本例巧妙地運用Flash中顏色對象、幀與標簽的跳轉技巧以及函數的創(chuàng )建方法。本例的效果演示也很有意思:只要輕輕滑一下鼠標,動(dòng)畫(huà)的背景就變了色;如果跳轉到變色背景的點(diǎn)擊模式下,就可以點(diǎn)擊鼠標改變背景的顏色了。好了,下面就讓我們動(dòng)手設計吧。
設計元件:1.打開(kāi)打開(kāi)Flash MX 2004,如圖1所示新建一個(gè)Flash文檔。按快捷鍵Ctrl+F3打開(kāi)“屬性”面板,如圖2所示單擊“文檔屬性”按鈕打開(kāi)“文檔屬性”面板(快捷鍵Ctrl+J),設置場(chǎng)景大小為255px x 255px,背景色為黑色,幀頻為12fps。
圖1 ,圖2
2.在制作之前先了解主場(chǎng)景中層與幀的結構,如圖3所示。這樣便于以后的設計。
圖3, 圖4
3.點(diǎn)選“矩形工具”,并禁用“筆觸顏色”,如圖4所示。按著(zhù)Shift鍵,同時(shí)用鼠標左鍵在場(chǎng)景中拉出一個(gè)的矩形。點(diǎn)選繪制好的矩形,如圖5所示設置“屬性”面板,使其正好覆蓋住整個(gè)場(chǎng)景。
圖5
技巧:按快捷鍵Ctrl+K打開(kāi)“排列”面板,點(diǎn)選“相對舞臺”按鈕,再點(diǎn)選場(chǎng)景中的矩形,單擊面板中的按鈕即可讓物體快速和場(chǎng)景對齊。上一步驟,可以通過(guò)單擊面板中的“匹配高度和寬度”、“左對齊”、“上對齊”三個(gè)按鈕完成。
使用“排列”面板可以便捷的對物體進(jìn)行對齊等操作,希望讀者能牢記Ctrl+K這個(gè)快捷鍵。
4.轉換場(chǎng)景中的矩形為影片剪輯元件。點(diǎn)選剛繪制好的矩形,按F8鍵,在彈出的“轉換為元件”面板里點(diǎn)選“影片剪輯”單選鈕,并命名為“矩形”。如圖6所示。
圖6
5.點(diǎn)選場(chǎng)景中的“矩形”影片剪輯元件,實(shí)體名設置為mc。如圖7所示。
圖7
6.按快捷鍵Ctrl+F8新建一個(gè)名為“移動(dòng)變色”的按鈕元件。在“移動(dòng)變色”元件的編輯場(chǎng)景中,點(diǎn)選“文本工具”,在Up幀中寫(xiě)下“移動(dòng)模式”四個(gè)字,字的顏色為黃色。點(diǎn)選Hit幀,按F6鍵插入一個(gè)關(guān)鍵幀。點(diǎn)選“矩形工具”,畫(huà)一個(gè)矩形使其覆蓋住Hit幀里的文字。
注意:如果不在Hit幀里設置點(diǎn)選區域,則會(huì )默認以文字為點(diǎn)選區域,導致不易點(diǎn)中按鈕。有些文字按鈕不容易點(diǎn)擊到就是這個(gè)原因。
7.按快捷鍵Ctrl+L打開(kāi)“庫”面板,右鍵單擊“點(diǎn)擊變色”按鈕,在彈出的菜單中點(diǎn)選“復制”命令。在彈出的“元件副本”面板里輸入“點(diǎn)擊變色”,如圖8所示。接著(zhù)把“點(diǎn)擊變色”按鈕里“移動(dòng)”二字改成“點(diǎn)擊”,其它設置不變。
圖8
設計場(chǎng)景:
1.雙擊“時(shí)間軸”面板中“圖層1”的名字,改層的名字為“背景”。點(diǎn)選場(chǎng)景中的“矩形”元件,按F9打開(kāi)“動(dòng)作”面板,并輸入如下代碼:
// 移動(dòng)鼠標執行動(dòng)作
onClipEvent (mouseMove) {
// 把鼠標的當前位置的X坐標值附值給影片的紅色參數
_root.r = _root._xmouse;
// 把鼠標的當前位置的Y坐標值附值給影片的綠色參數
_root.b = _root._ymouse;
_root.g = _root._xmouse+_root._ymouse;
// 調用mcColor()函數
_root.mcColor();
}
2.點(diǎn)選“背景”層的第3幀按F6鍵插入一個(gè)關(guān)鍵幀。右鍵單擊第3幀中“矩形”元件,按F9鍵打開(kāi)“動(dòng)作”面板,把動(dòng)作onClipEvent中的事件“mouseMove”改成“mouseDown”。
3.單擊“時(shí)間軸”面板中的“插入圖層”按鈕新增一層并修改層的名字為“跳轉”。點(diǎn)選該層第1幀,在場(chǎng)景的左上角寫(xiě)下“請點(diǎn)擊你的鼠標”幾個(gè)字。按快捷鍵Ctrl+L打開(kāi)“庫”面板,把庫中的“點(diǎn)擊變色”按鈕拖拽到場(chǎng)景的右下角。如圖9所示。
圖9
4.點(diǎn)選“跳轉”層的第3幀,按F6鍵插入一個(gè)關(guān)鍵幀。在“屬性”面板中把該幀命令為“l(fā)able”,如圖10所示。把該幀場(chǎng)景左上角的文字換成“請點(diǎn)擊你的鼠標”,再把右下角的“點(diǎn)擊變色”按鈕替換成“移動(dòng)變色”按鈕。
圖10
5.點(diǎn)選“點(diǎn)擊變色”按鈕,按F9鍵打開(kāi)“動(dòng)作”面板,輸入如下代碼。
// 單擊鼠標左鍵并松開(kāi)后觸發(fā)事件
on (release) {
// 跳轉到“l(fā)abel”標簽
gotoAndStop ("label");
}
6.點(diǎn)選“移動(dòng)變色”按鈕,按F9鍵打開(kāi)“動(dòng)作”面板,輸入如下代碼。
on (release) {
// 跳轉到第1幀
gotoAndStop (1);
}
7.單擊“時(shí)間軸”面板中的“插入圖層”按鈕(圖標7)新增一層并修改層的名字為“代碼”。點(diǎn)選該層第1幀,按F9鍵打開(kāi)“動(dòng)作”面板,輸入如下代碼。
// 新建一個(gè)Color對象
changeColor = new Color(mc);
// 初始化“背景”元件的顏色參數
r = 0;
g = 0;
b = 0;
// 創(chuàng )建mcColor()函數
function mcColor () {
// setRGB()函數設置影片的顏色值,“()”內重新設置影片的顏色屬性
changeColor.setRGB(r << 16 | g << 8 | b);
}
stop ();
好了,效果到這里就完成了。按快捷鍵Ctrl+Enter測試一下效果吧。認真完成該效果并完全理解效果中代碼的作用后,再設計別與顏色相關(guān)的效果就很容易了。