Flash制作個性漂亮的蜻蜓菜單_Flash教程
推薦:學習AS3:delete關鍵字和類成員delete要害字在Flash中是用來刪除定義的變量,但是并不將對象從內(nèi)存中清除掉(這是垃圾收集器的工作)。它只是將一個變量的引用設置成無效,讓內(nèi)存中的這個對象
畫面與程序完全原創(chuàng)哦。
效果如下:
菜單介紹:
芳草青青,上面落著一只小蜻蜓。當你的鼠標移向某個按鈕時,蜻蜓就會快速向你飛了過來,并緩緩地停在那里。當你的鼠標移開菜單,蜻蜓就會飛回家去。
首先畫一只蜻蜓,共兩幀,第一幀翅膀與第二幀翅膀略有不同,形成翅膀抖動的效果,并把它轉化為元件
再畫上代表首頁,作品,日記的圖標,并將其鏈接名命名為home,photo,diary,work,music,并在第一幀導出
用遮罩制作光線劃過效果。
圖層1為作遮罩的廣塊,圖層3為被遮罩的光線。
作好后將此效果轉為元件,其鏈接名命名flash,并在第一幀導出





制作按鈕在圖層1畫一白色透明方塊,這樣方便用戶點擊按鈕,而不至于點空
在圖層2建一動態(tài)文本框,命名為txt


現(xiàn)在是制作整個菜單的過程了,如下圖所示
bug層上拖入剛才所畫的蜻蜓元件,將其實例名命為bug btn層上拖入五個做好的按鈕,一字排開,將其實例名依次命名為home,photo,diary,work,music
interval層上畫一些間隔來分隔這些按鈕
把剛做好的菜單轉化為元件,如下圖所示
鏈接名為menu,AS 2.0類為Menu,注重大小寫。


這是在FLA文件上的最后一步動作了�;氐街鲌鼍啊H缦聢D:
在bg層上畫一些花花草草做背景在line層上畫一半透明的白色長條,這只是給菜單起裝飾作用。在menu層上拖入剛才做好的Menu元件。一切OK,保存吧。后面是代碼了。

建一文本文件,保存為Menu.as,找到上面貼子中有“鏈接名為menu,AS 2.0類為Menu,注重大小寫”這么一句話。對了,必須命名為Menu,這樣保持與AS 2.0類為Menu相一致。
下面是文件中的代碼
/* * author 西西 * date 2006.04 */ class Menu {
//按鈕的實例名 private var home:MovieClip; private var photo:MovieClip; private var diary:MovieClip; private var work:MovieClip; private var music:MovieClip;
private var bug:MovieClip;//晴蜓的實例名
private var ballTween:Object;//用來使用Tween類的對像 private var DEPTH_1:Number; private var TEXTINITCOLOR:Number; private var TEXTOVERCOLOR:Number;
//構造函數(shù) function Menu() { TEXTINITCOLOR = 0x707D37;//文字初始顏色 TEXTOVERCOLOR = 0xFFFFFF;//鼠標經(jīng)過文字的顏色 DEPTH_1 = 1;//深度 showMenuText();//設定按鈕邊上的文字內(nèi)容 initBtn();//菜單中所有的功能都在此函數(shù)中 };
private function showMenuText():Void { home.txt.text = "首頁"; photo.txt.text = "西西照片"; diary.txt.text = "西西日記"; work.txt.text = "西西作品"; music.txt.text = "我的音樂"; }
private function initBtn():Void { var ins = this;//為了能在onRollOver等函數(shù)中使用全局變量而設 bug._x = home._x;//設定晴蜓的初始位置,讓它停在首頁的上面 bug.gotoAndStop(1);//設定晴蜓翅膀的初始狀態(tài)為靜止
//將幾個按鈕的實例放至一數(shù)組中,目的為節(jié)約代碼 var BtnArr:Array = new Array(home,photo,diary,work,music); for(var i=0;i;//按順序取出每一個按鈕
//當鼠標經(jīng)過按鈕時,蜻蜓開始向著按鈕的方向飛,飛到了就停下來。 mc.onRollOver =function() { //當每一按鈕在鼠標經(jīng)過時,設至其文字顏色 ins.setTextColor(this,ins.TEXTOVERCOLOR); //當鼠標經(jīng)過時加載光線劃過效果 this.attachMovie("flash","flash" 2,2);
//將沿未完成的蜻蜓飛行的動作停止 ins.ballTween.stop();
//計算蜻蜓和當前鼠標所指按鈕間的距離,目的為下面的實現(xiàn)蜻蜓轉向所指按鈕方向 var instance:Number = this._x - ins.bug._x;
//假如蜻蜓是面向左,而所指按鈕在晴蜓的右面,則使蜻蜓面向右轉。 if(instance>0 && ins.bug._xscale>0) { ins.bug._xscale = - ins.bug._xscale; } //同上,在按鈕在蜻蜓左邊時,使它面向左 if(instance<0 && ins.bug._xscale<0) { ins.bug._xscale = - ins.bug._xscale; }
//實現(xiàn)蜻蜓翅膀扇動效果 ins.bug.play();
//使用Tween類實現(xiàn)蜻蜓的飛行 //Strong easeOut為從開始到結束作減速運動 //Strong easeIn為從開始到結束作加速運動 var easeType = mx.transitions.easing.Strong.easeOut;
//蜻蜓開始飛時的位置 var begin = ins.bug._x;
//蜻蜓飛結束時的位置 var end = this._x;
//飛行共用時間 var time = 2;
//指明飛行的物體是蜻蜓 var mc = ins.bug;
//飛吧,飛吧 ins.ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true);
//當飛完后,蜻蜓翅膀停止扇動 ins.ballTween.onMotionFinished = function() { ins.bug.gotoAndStop(1); }; };
//當鼠標離開所指按鈕時,蜻蜓就飛回家 mc.onRollOut = function() { //設定字的顏色 ins.setTextColor(this,ins.TEXTINITCOLOR);
//移除光線劃過效果 var mcflash:MovieClip = this.getInstanceAtDepth(2); mcflash.removeMovieClip(); //讓蜻蜓的頭轉向首頁的方向 if(ins.bug._xscale<0) { ins.bug._xscale = - ins.bug._xscale; }
//停止尚未完成的飛行動作 ins.ballTween.stop();
//實現(xiàn)蜻蜓翅膀扇動效果 ins.bug.play();
//開始飛行啦,這里None采用勻速飛行 var easeType = mx.transitions.easing.None.easeOut; var begin = ins.bug._x;
//向著首頁的方向飛 var end = ins.home._x; var time = 4; var mc = ins.bug; ins.ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true); ins.ballTween.onMotionFinished = function() { ins.bug.gotoAndStop(1); }; }; }
//將各個小圖標加載到文字的左邊 var pichome:MovieClip = home.attachMovie("home","home" DEPTH_1,DEPTH_1); var picphoto:MovieClip = photo.attachMovie("photo","photo" DEPTH_1,DEPTH_1); var picdiary:MovieClip = diary.attachMovie("diary","diary" DEPTH_1,DEPTH_1); var picwork:MovieClip = work.attachMovie("work","work" DEPTH_1,DEPTH_1); var picmusic:MovieClip = music.attachMovie("music","music" DEPTH_1,DEPTH_1); //點擊各個按鈕后,所執(zhí)行的代碼,想要做什么,自己隨便寫吧 home.onRelease = function() { }
photo.onRelease = function() { }
diary.onRelease = function() { }
work.onRelease = function() { }
music.onRelease = function() { }
} //設置字的顏色 private function setTextColor(mc:MovieClip,usecolor:Number):Void { var my_fmt = new TextFormat(); my_fmt.color = usecolor; mc.txt.setTextFormat(my_fmt); } }
可以按CTRL ENTER測試了
最后,其實這個菜單還是有許多需要修改的地方。比如增加菜單中按鈕的個數(shù)之類就不怎么方便。應該和外部提供一個很好的接口。另外關于按鈕的排列,之間的間隔大小也應由程序控制,并且應更加靈活。我會在以后將其改進,并再發(fā)教程。
分享:學習AS3:唯一的類變量(本文非直接翻譯,原文如下:)InActionScript2,variablesdefinedwithinaclass'sbodyweredefinedintheclass'sprototypeobject.Thiswasanef
- 相關鏈接:
- 教程說明:
Flash教程-Flash制作個性漂亮的蜻蜓菜單
。