Flash AS3 個(gè)性的旋轉(zhuǎn)圓形網(wǎng)頁(yè)導(dǎo)航

源文件下載//img.jbzj.com/file_images/flash/200912/1_091129014541.zip
1、創(chuàng)建一個(gè)FLASH文件,保存為menu.fla文件。
2、重命名“layer 1″為 “actions”,我們使用http://blog.greensock.com/tweenlite/的小而美的Tweening Engine,下載AS3的壓縮包,然后解壓縮到com目錄然后把這個(gè)目錄放到menu.fla文件的文件夾中。
3、用矩形工具繪制一個(gè)黑色的矩形,轉(zhuǎn)換為MC影片剪輯,打開屬性窗口。
4、雙擊這個(gè)影片剪輯編輯它,使用文本工具,設(shè)置為動(dòng)態(tài)文本,繪制一個(gè)區(qū)域,設(shè)置顏色是白色,命名實(shí)例名為abelBtn。
5、回到場(chǎng)景1,刪除掉剛剛建立的影片剪輯。
6、我們選擇第一幀,然后打開動(dòng)作面板,輸入下面代碼,主要是為了導(dǎo)入Tweenlite engine。
import com.greensock.*;
import com.greensock.easing.*;
7、然后創(chuàng)建一個(gè)數(shù)字,動(dòng)態(tài)調(diào)用每個(gè)菜單的項(xiàng)目文字。
var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];
var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);
8、用一個(gè)函數(shù)buildMenu來實(shí)現(xiàn)每個(gè)菜單項(xiàng)目。
function buildMenu(){
var btn:myButton;
var angle:int=360/menu_items.length;
for (var i:int = 0; i< menu_items.length; i++){
btn = new myButton();
btn.buttonMode=true;
btn.labelBtn.text = menu_items[i];
btn.mouseChildren=false;
menu.addChild(btn);
TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
}
}
9、最后添加一個(gè)監(jiān)聽單擊事件的代碼。
menu.addEventListener(MouseEvent.CLICK,clickHandler );
function clickHandler(e:MouseEvent ):void{
// TO DO ...
trace(myButton(e.target).labelBtn.text);
}
10、所有代碼如下。
import com.greensock.*;
import com.greensock.easing.*;
var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];
var menu:Sprite = new Sprite();
menu.x= stage.stageWidth / 2;
menu.y=stage.stageHeight /2;
addChild(menu);
buildMenu();
function buildMenu(){
var btn:myButton;
var angle:int=360/menu_items.length;
for (var i:int = 0; i< menu_items.length; i++){
btn = new myButton();
btn.buttonMode=true;
btn.labelBtn.text = menu_items[i];
btn.mouseChildren=false;
menu.addChild(btn);
TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});
}
}
menu.addEventListener(MouseEvent.CLICK,clickHandler );
function clickHandler(e:MouseEvent ):void{
// TO DO ...
trace(myButton(e.target).labelBtn.text);
}
相關(guān)文章
flash如何做雨滴下落的動(dòng)畫效果? Flash8做一個(gè)下雨效果的技巧
flash如何做雨滴下落的動(dòng)畫效果?想要做一個(gè)逼真的雨滴落下的效果,該怎么做雨滴落下水花擴(kuò)散的效果呢?下面我們就來看看Flash8做一個(gè)下雨效果的技巧2022-08-18flash理發(fā)店旋轉(zhuǎn)彩燈動(dòng)畫效果怎么做? 理發(fā)店旋轉(zhuǎn)燈制作技巧
flash理發(fā)店旋轉(zhuǎn)彩燈動(dòng)畫效果怎么做?經(jīng)常使用flash制作動(dòng)畫效果,該怎么制作旋轉(zhuǎn)燈效果,下面我們就來看看理發(fā)店旋轉(zhuǎn)燈制作技巧,詳細(xì)請(qǐng)看下文介紹2022-07-23flash怎么把形狀變成文字? flash星星變文字動(dòng)畫的實(shí)現(xiàn)方法
flash怎么把形狀變成文字?flash繪制的星星想要慢慢變成文字,該怎么將圖形變文字呢?下面我們就來看看flash星星變文字動(dòng)畫的實(shí)現(xiàn)方法,詳細(xì)請(qǐng)看下文介紹2022-06-06flash怎么制作補(bǔ)間動(dòng)畫? flash變形動(dòng)畫的實(shí)現(xiàn)方法
flash怎么制作補(bǔ)間動(dòng)畫?flash中想要制作形狀變化的動(dòng)畫效果,該怎么制作補(bǔ)間動(dòng)畫呢?下面我們就來就來看看flash變形動(dòng)畫的實(shí)現(xiàn)方法2022-02-06FLASH怎么讓搖曳的荷花更逼著? flash制作風(fēng)吹荷花動(dòng)畫的技巧
FLASH怎么讓搖曳的荷花更逼?flash中想要制作風(fēng)吹荷花的動(dòng)畫熊愛國(guó),該怎么制作這個(gè)效果呢?下面我們就來看看flash制作風(fēng)吹荷花動(dòng)畫的技巧2022-02-06flash怎么制作荷花在荷花池里搖擺的動(dòng)畫? FLASH做擺動(dòng)荷花的技巧
flash怎么制作荷花在荷花池里搖擺的動(dòng)畫??flash中想要制作荷花搖擺的動(dòng)畫,該怎么制作荷花搖曳的動(dòng)畫呢?下面我們就來看看FLASH做擺動(dòng)荷花的技巧2022-02-06flash怎么做徑向彩虹文字動(dòng)畫? 文字添加彩虹動(dòng)畫效果的技巧
flash怎么做徑向彩虹文字動(dòng)畫?flash椎間盤買個(gè)輸入的文字,想要添加動(dòng)畫效果,該怎么添加徑向彩虹文字效果呢?下面我們就來看看flash文字添加彩虹動(dòng)畫效果的技巧,詳細(xì)請(qǐng)2021-11-09flash怎么做眨眼動(dòng)畫效果? flash動(dòng)漫人物眨眼動(dòng)畫的做法
flash怎么做眨眼動(dòng)畫效果?flash中想要制作一個(gè)動(dòng)漫人物的眼睛眨眼動(dòng)畫,該怎么制作呢?下面我們就來看看flash動(dòng)漫人物眨眼動(dòng)畫的做法2021-11-08flash怎么制作火焰文字效果? flash做火焰字體動(dòng)畫的技巧
flash怎么制作火焰文字效果?flash中想要制作一個(gè)熊熊燃燒的活顏文字,該怎么制作這個(gè)文字效果呢?下面我們就來看看flash做火焰字體動(dòng)畫的技巧2021-11-01flash怎么做文字動(dòng)畫logo? 閃動(dòng)的片頭動(dòng)畫flash的實(shí)現(xiàn)方法
flash怎么做文字動(dòng)畫logo?flash中想要制作一個(gè)文字logo的動(dòng)畫,讓文字閃爍,該怎么制作這個(gè)效果呢?下面我們就來看看flash制作文字動(dòng)畫的技巧2021-10-29