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á)。
最近有好多人問我關(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á)。