国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
【原創(chuàng)】關(guān)于圖片切換的制作方法 [論壇存檔]
wxdbetter
2007-04-27, 06:35 PM
一、深思熟慮,點滴做起
  最近有好多人問我關(guān)于制作圖片切換的問題,感覺這個問題是很多人普遍存在的一個現(xiàn)象。在很多的韓國網(wǎng)站上都有類似的模版,直接拿來可以套用,但是如果想完全自定義一個真正屬于自己的,能夠靈活運用的一個程序來說,有很多的障礙,即使是破解的,處理起來可能也不是完全滿意的。正好今天我在工作中也設(shè)計到了這部分的內(nèi)容,做了一下,由于時間有限,我以后循序漸進(jìn)講解,今天先從基礎(chǔ)的做起。(注:本教程主要以介紹思路為主,方法可以變通,不作為主要內(nèi)容) 首先,當(dāng)我們要實現(xiàn)一個整體效果的時候,要將效果分成若干部分,每個部分都有獨立的功能,然后將各部分再整合到一起,一般作為老手肯定都知道,但是新手要養(yǎng)成一個良好的編程習(xí)慣。閑話少絮,下面看一下我的設(shè)計思路。

  第一、想象一個圖片切換的方式(這里以一個簡單的淡入淡出效果為例)
  第二、能夠讓圖像自動按一定時間切換(setInterval、clearInterval)
  第三、可以手動控制當(dāng)前展示的圖片(需要根據(jù)xml節(jié)點動態(tài)輸出按鈕)
  第四、其他的擴展功能(各種特效遮罩、圖片滾動、視頻特效的嵌入、控制自動循環(huán)開關(guān)等等)

  下面做一下圖片切換的效果。
FadeIn = function () {
if (mc.down._alpha<100) {
mc.down._alpha += 5;
} else {
mc.down._alpha = 100;
delete mc.down.onEnterFrame;
}
};
FadeOut = function (thepath, theurl) {
if (mc.down._alpha>0) {
mc.down._alpha -= 5;
} else {
mc.down._alpha = 0;
delete mc.down.onEnterFrame;
mc.down.pic.loadMovie(thepath);
mc.down.onEnterFrame = function() {
FadeIn();
};
}
};
Load = function () {
var thepath:String;
var theurl:String;
var intro = myXML.firstChild;
var len:Number = intro.childNodes.length;
if (i<len) {
thepath = intro.childNodes[i].attributes.path;
theurl = intro.childNodes[i].attributes.url;
mc.down.onRelease = function() {
getURL(theurl, "_blank");
};
mc.down.onEnterFrame = function() {
FadeOut(thepath, theurl);
};
i++;
} else {
i = 0;
thepath = intro.childNodes[i].attributes.path;
theurl = intro.childNodes[i].attributes.url;
mc.down.onRelease = function() {
trace(theurl);
getURL(theurl, "_blank");
};
mc.down.onEnterFrame = function() {
FadeOut(thepath, theurl);
};
i++;
}
};
mc.down._alpha = 0;
//下面的xml讀取方式ego已經(jīng)多次講過,這里不再贅述,參考相關(guān)教程
var myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function(success) {
if (success) {
Load();
control = setInterval(Load, 5000);
} else {
}
};
myXML.load("title.xml");

  當(dāng)剛開始讀取第一張圖片的時候,就應(yīng)該有淡入的效果,所以開始要讓mc.down._alpha = 0;然后將外部文件信息用 Load() 全部載入,再調(diào)用淡出的效果 FadeOut(),其中myXML.onLoad = function(success) {
if (success) {
Load();
control = setInterval(Load, 5000);
} else {
}
};
  里面的Load用于第一次調(diào)用,以后將用control = setInterval(Load, 5000);來循環(huán)調(diào)用,但是我們知道,第一次顯示的時候,圖片效果是不需要淡出的,所以需要加入判斷語句,如果alpha=0的時候直接調(diào)入FadeIn函數(shù)。但是我們知道,淡入淡出效果執(zhí)行一次不可能實現(xiàn),所以記得用 對象.onEnterFrame,當(dāng)?shù)氲鲂Ч戤呉院笥浀糜?delete 對象.onEnterFrame將其刪除,否則很消耗內(nèi)存。
  這樣我們的圖片切換效果就完成了。

  方法總結(jié):
  1、圖片淡入淡出FadeOut、FadeIn算法
  2、設(shè)定時間頻率setInterval的使用辦法

  心靈雞湯:編程的思維方式有很多可以靈活運用到生活中,比如我們在做每一件事情的時候,可以把整件事看作一個最終效果,然后把事情分解成一件一件的小事去做,可以提高平時生活中的工作效率。欲速則不達(dá)。
wxdbetter
2007-04-27, 06:50 PM
二、舉一反三,發(fā)散思維
  有了上面的基礎(chǔ),接下來我們就該進(jìn)行下一步,按鈕的制作了。其他地方改動不大,在制作的時候,我們先將按鈕輸出,同時伴有標(biāo)號1、2、3.。。等一切沒問題之后,再實現(xiàn)按鈕的功能。這就是我將要為大家講解的 ListBtn()功能的實現(xiàn)。先看下代碼:
ListBtn = function () {
var btnpath:Array = new Array();
var btnurl:Array = new Array();
var btn_x:Number = 10;
var btn_y:Number = 200;
var space:Number = 20;
var intro = myXML.firstChild;
var len:Number = intro.childNodes.length;
for (i=0; i<len; i++) {
var btn = attachMovie("botton", "botton"+i, this.getNextHighestDepth(), {_x:btn_x+i*space, _y:btn_y});
btn.btnpath = intro.childNodes[i].attributes.path;
btn.btnurl = intro.childNodes[i].attributes.url;
btn.txt.selectable = false;
btn.num = i+1;
btn.ii = i;
}
};

  對C語言稍有基礎(chǔ)的人,一看便知,計算按鈕的個數(shù),主要用到了length,這個是記錄節(jié)點長度的,其次是將各個按鈕對應(yīng)圖片的路徑和鏈接一個個的傳到每個按鈕中去,就是
btn.btnpath = intro.childNodes[i].attributes.path;
btn.btnurl = intro.childNodes[i].attributes.url;

  這個就是主要的大致思路,其他的沒什么難點。下面就要對每個按鈕接收到參數(shù)以后執(zhí)行哪些操作進(jìn)行設(shè)計,btn第一幀代碼如下:
stop();
var btnpath:Number;
var btnurl:Number;
var num:Number;
var ii:Number;
var my_fmt:TextFormat = new TextFormat();
txt.text = num;
this.onEnterFrame = function() {
if (ii == (_global.i-1)) {
my_fmt.color = 0xffffff;
txt.setTextFormat(my_fmt);
nextFrame();
} else {
my_fmt.color = 0x000000;
txt.setTextFormat(my_fmt);
prevFrame();
}
};
thebtn.onRelease = function() {
clearInterval(_parent.control);
_global.i = ii;
_parent.mc.down.onEnterFrame = function() {
_parent.FadeOut(btnpath, btnurl);
};
_global.i++;
_parent.control = setInterval(_parent.Load, 5000);
};


  當(dāng)點擊按鈕完畢的時候,應(yīng)該讓自動時間重新計時,否則剛點擊完畢后,可能會和自動切換相沖突,所以要用到 clearInterval(_parent.control);將其刪除。_global.i 是個全局變量,對整個影片有效,他的作用就是記錄當(dāng)前圖片所在位置的。當(dāng)圖片切換完畢(即調(diào)用FadeOut結(jié)束后)再次調(diào)用_parent.control = setInterval(_parent.Load, 5000);就達(dá)到了重新計時的目的。其實,現(xiàn)在的功能已經(jīng)都實現(xiàn)并正常運作了,為了使效果更美觀,我們可以在按鈕中加些時間軸效果變換,然后用this.onEnterFrame = function() {
if (ii == (_global.i-1)) {
my_fmt.color = 0xffffff;
txt.setTextFormat(my_fmt);
nextFrame();
} else {
my_fmt.color = 0x000000;
txt.setTextFormat(my_fmt);
prevFrame();
}
};
中的nextFrame()、prevFrame()進(jìn)行播放就可以了。my_fmt:TextFormat = new TextFormat();是對字體樣式進(jìn)行的設(shè)置,然后通過txt.setTextFormat(my_fmt);應(yīng)用到文本框當(dāng)中去,上面的if語句,就是對其進(jìn)行判斷,當(dāng)按鈕被選中時,文字變白色,否則變黑色。
  好了,到此為止,基本功能已經(jīng)實現(xiàn),而且網(wǎng)絡(luò)當(dāng)中大部分流傳的源代碼基本也都如此,大同小異。不過之前我講過,做東西要學(xué)會舉一反三,后面我將為大家介紹一些網(wǎng)絡(luò)中很少用到的或者是沒出現(xiàn)過的做法。

  方法總結(jié):
  1、循環(huán)輸出按鈕 ListBtn() 的算法
  2、clearInterval的使用方法
  3、文本樣式的使用 new TextFormat()

  心靈雞湯:寫程序要講究條理性,生活中亦如此,先把要做的事情想清楚再去做,當(dāng)做完以后,可以考慮是否能夠錦上添花,使事情做得更完美。(就像上例中的按鈕一樣)?┷


*****下面的內(nèi)容是舉一反三,在上面的基礎(chǔ)做了變化*****
1、遮罩變化
  這里主要需要將思路放寬,變化效果是在一個已經(jīng)出現(xiàn)的圖片上面再出現(xiàn)一張圖片,并且伴隨過度效果,所以我們可以很容易想到,圖片需要被加載到不同的mc上面(比方建立2個mc,上面的叫up,下面的叫down),再建立一個mask層。這個是前期思路,后面我們可以根據(jù)效果來想象出,down一開始已經(jīng)加載了第一張圖片,up加載了第二張,再把遮罩mask與up建立關(guān)系(setMask),然后開始播放mask,當(dāng)up圖片全部展開之后,再用down加載up的圖片,這樣就完成了一次切換的過程。隨后,我們可以繼續(xù)擴展,建立多個遮罩層,分別起好名字,然后在調(diào)用遮罩的時候,使用一個(random)隨機函數(shù),這樣每次的圖片切換效果都會不一樣的。下面我做了一個范例,設(shè)計了5個不同的遮罩效果:
http://www.flashdesign123.com/a1/change5.swf
2、視頻與flash的合成
  下面這個flash是在原有的基礎(chǔ)上進(jìn)行了修改,在場景上建立了一個影片剪輯,然后將視頻導(dǎo)入,在末尾加入關(guān)鍵楨,輸入代碼_parent.FadeIn(thepath,theurl),讓它來調(diào)用主影片的函數(shù)。接下來讓FadeOut()播放這段視頻就可以了。別忘了,每個按鈕單擊事件亦如此,讓他們分別調(diào)用FadeOut()就可以了。
http://www.btwob.net/wxd/test/change3.swf
由于源文件比較大無法上傳,比較的遺憾~!
3、滾動效果的實現(xiàn)
  這個思路和上面的又不一樣了,我的想法是這樣的,先建立個mc,然后將每個圖片都讀取出來,并按照圖片的寬度將他們排列開到mc里面,再把第一張圖片讀取一遍加載到最后(比方有5個圖片,加載順序就是1、2、3、4、5、1),最后那個圖片的作用就是,當(dāng)5換到后面那個1的時候,再將mc的_x坐標(biāo)賦值成前面那個1的_x坐標(biāo),然后再利用setInterval對他們進(jìn)行每隔N秒移動M像素就可以了(N、M自定義)??梢栽O(shè)一個變量(比方設(shè)為i)顯示當(dāng)前的圖片個數(shù),然后讓按鈕調(diào)用這個i就可以了,這樣當(dāng)圖片顯示到第幾個的時候,按鈕也會變到相應(yīng)的位置。
  下面是我做的效果,可以設(shè)置4個不同方向滾動,我默認(rèn)設(shè)置的是向下滾動:
http://www.flashdesign123.com/a2/change4.swf
  好了,舉一反三到此結(jié)束,上面都是一些核心思想,也許你們看我敘述的很簡單,但是別忘了中國有句古話“說起來容易做起來難”,但是還有一句話,叫做“師傅領(lǐng)進(jìn)門,修行在個人”,雖然這里我不能將源文件都上傳(考慮到老大的空間很寶貴,不忍心占用了,以后大于97kb的文件就不上傳了)但是我把方法已經(jīng)告訴給大家了,有了這些思想,你只需要一步步將他們實現(xiàn)就可以了,難道還怕找不到原材料嗎? :)
wxdbetter
2007-04-27, 06:50 PM
三、精益求精,錦上添花
  在上面的基礎(chǔ)完成之后,有一個問題,可能用過模版的人都知道,就是他們的代碼有的感覺邏輯很復(fù)雜,不易修改,這是因為破解的原因,即便是我自己寫的程序,有的再破解出來,我都感覺莫名其妙(當(dāng)然對于一些簡單的效果破解出來沒太大問題)。上面的程序,如果只是展示幾張圖片的話,沒太大問題,但如果展示幾十張或更多的話,恐怕用起來就困難了,所以這里我再提供一個思路,為其錦上添花。
  將按鈕也做成滾動效果,不失為一個好方法,下面是核心代碼:
Mask = function (px, py, pw, ph) {
createEmptyMovieClip("mc_mask", 11);
with (mc_mask) {
beginFill(0xffffff, 20);
moveTo(px, py-5);
lineTo(px+pw, py-5);
lineTo(px+pw, py+ph+5);
lineTo(px, py+ph+5);
lineTo(px, py-5);
endFill();
}
mc_btn.list.setMask("mc_mask");
};
ListBtn = function () {
var btnpath:Array = new Array();
var btnurl:Array = new Array();
//按鈕初始化位置
var btn_x:Number = 40;
var btn_y:Number = Stage.height-25;
//按鈕+間隙的寬度
var space:Number = 20;
//需要顯示按鈕的個數(shù)
var showbtn:Number = 7;
var page:Number = 0;
createEmptyMovieClip("mc_btn", 10);
mc_btn.createEmptyMovieClip("direct", 2);
mc_btn.createEmptyMovieClip("list", 1);
var left:MovieClip = mc_btn.direct.attachMovie("left", "left1", 1);
var right:MovieClip = mc_btn.direct.attachMovie("right", "right1", 2);
left._x = btn_x-28;
right._x = btn_x+showbtn*space+10;
left._y = right._y=btn_y;
Mask(btn_x, btn_y, showbtn*space, space);
var intro = myXML.firstChild;
var len:Number = intro.childNodes.length;
for (i=0; i<len; i++) {
var btn = mc_btn.list.attachMovie("botton", "botton"+i, i, {_x:btn_x+i*space, _y:btn_y});
btn.btnpath = intro.childNodes[i].attributes.path;
btn.btnurl = intro.childNodes[i].attributes.url;
btn.txt.selectable = false;
btn.num = i+1;
btn.ii = i;
}
mc_btn.list.onEnterFrame = function() {
mc_btn.list._x += (mov-mc_btn.list._x)*0.2;
};
left._visible = false;
left.onRelease = function() {
clearInterval(control);
if (page>0) {
right._visible = true;
left._visible = true;
mov = -(showbtn*space)*--page;
}
if (page<=0) {
left._visible = false;
}
control = setInterval(Load, scrolltime);
};
right.onRelease = function() {
clearInterval(control);
if (page<Math.ceil(len/showbtn)-1) {
left._visible = true;
right._visible = true;
mov = -(showbtn*space)*++page;
}
if (page>=Math.ceil(len/showbtn)-1) {
right._visible = false;
}
control = setInterval(Load, scrolltime);
};};
  這里和上一節(jié)舉一反三中的滾動效果差不多,也是現(xiàn)將按鈕根據(jù)圖片個數(shù)全部展示出來,不同的是,需要在按鈕上建立個動態(tài)遮罩,然后設(shè)置一個變量可以隨時控制顯示按鈕的多少。別的東西都講過了,這里主要提一下遮罩的算法Mask()。先建立個空影片,然后在空影片中進(jìn)行繪圖,beginFill()與endFill()是成對出現(xiàn)的,里面的moveTo()和lineTo()是設(shè)置繪制的起始點。這里面我設(shè)置的參數(shù),是將其繪制成一個矩形,矩形的寬度就是按鈕之和的寬度。
  之后需要設(shè)置左右按鈕,并且最好能讓左右按鈕隨著數(shù)字按鈕的多少而改變距離,這樣維護(hù)起來才方便,主要就是這段代碼:
left._x = btn_x-28;
right._x = btn_x+showbtn*space+10;
left._y = right._y=btn_y;
showbtn是顯示按鈕的個數(shù),space是每個按鈕的寬度。然后是實現(xiàn)其左右鍵功能,代碼上面已經(jīng)給出,應(yīng)該不算難吧,呵呵。
  好了,這樣看起來,這個程序的使用價值就更大了,你說是吧~! :p

  方法總結(jié):
  1、Mask()的算法與相應(yīng)的繪圖語句
  2、left、right鍵算法的實現(xiàn)

  心靈雞湯:“聯(lián)想”是人特有的本領(lǐng),當(dāng)我們做完一件事情的時候,應(yīng)該將其進(jìn)行總結(jié),因為當(dāng)你做其他事情的時候,也許只是在重復(fù)上一次的工作,那你是否會聯(lián)想到上一次是如何做的,然后提高自己的工作效率呢?(比方第二節(jié)舉一反三提到的滾動效果,在這里的ListBtn()中再次可以使用)
wxdbetter
2007-04-27, 06:51 PM
四、創(chuàng)意無限,舍我其誰 
  這里面是將前面提到效果的綜合運用,只有你想不到的,沒有你做不到的。
http://www.flashdesign123.com/a3/change7.swf

小憩:
  很多朋友在遇到困難求助的時候,是不是遇到過這樣的情況,一般別人回復(fù)你有三種形式:
  1、將源文件直接給你。這個是對于求助者最大的幫助,不需要明白代碼原理,只需要修改一些原件和參數(shù)即可運用,雖然可解燃眉之急,但是究其原因,不得其解。
  2、給出相關(guān)語句。這個語句可能只是部分的,對于求助者而言,指點了一條明路,但是距離成功還有很長的一段路要走,需要自己查找相關(guān)書籍和幫助信息。
  3、沒有給出源文件與相關(guān)代碼,只給出相關(guān)思路算法。這個是對求助者最大的幫助,雖然暫時沒得到成品,但是知道了制造過程之后,最終你是能得到它的。
  不知道大家是否聽過這樣的例子:有一家密制的醬汁雞翅非常好吃,你想去學(xué)習(xí),你可能遇到三種情況,第一種就是,師傅直接將密制醬汁給你,這樣你自己也可以做了,但是醬汁用完后該如何呢?第二種,師傅給你一些制作工具,可能不是全部的,還得需要自己去研究和尋找。第三種就是,師傅告訴你制作密制醬汁的方法,別的什么都沒給你,這樣,你就學(xué)會了其原理,至于原材料,總會想辦法尋找得到的。
  希望我的教程能帶給大家更多的收獲,如果你們給我大力的支持,我將不勝感激。

                        ------------------PowerBoy
                             2007/05/08
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
制作FLV播放器源碼教程_Flash AS教程
js實現(xiàn)圖片無縫滾動特效
Web前端
JavaScript日期函數(shù) - 練習(xí)、計時器、innerHTML
BOM 定時器:setTimeout和setInterval
flahs as 無基礎(chǔ)入門經(jīng)典教程
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服