實例說明:
這是一個在網(wǎng)頁中的FLASH導航菜單,很有動感吧?
經(jīng)過本例的學習,你將掌握基本的FLASH菜單的操作步驟。以及用AS來編寫變速運動的基本方法。一個例子的學習是次要的,希望大家學習完以后可以掌握這種方法,舉一反三,應用到更多的實例中去。
實例思路:
正如前面所說的,一個例子的學習是次要的,關鍵是掌握這種方法。在進行我們實例之前,先說一下理論與方法。
在這個導航中,有四個Button(按鈕,簡稱:BTN),一個MovieClip(影片,簡介:MC)。上面跟隨移動的MC實例名為:follow。下面的四個BTN實例名分別為:btn_home,btn_about,btn_news,btn_links。實例的運動方法:當鼠標移動到其中的一個按鈕上時,上面的MC(follow)會以逐漸減速的運動慢慢靠近鼠標所指的按鈕上。這其中是以它們的X坐標來判斷follow的位置的。
follow總共需要移動的距離為我們鼠標所指的按鈕的X坐標減去它自己的X坐標。follow每次移動一定的距離(如果大家仔細觀察的話,應該發(fā)現(xiàn)它并不是以勻速進行的,而是以減速進行的)
下面我們假設follow的X坐標為40,而我們將鼠標移動到了btn_links的按鈕上了(即標有l(wèi)inks的那個按鈕)。而btn_links的X坐標為280,那么,它們之間的距離為btn_links._x-follow._x(這其中的._x代表這個實例的X坐標)?,F(xiàn)在我們需要讓follow以減速運動從當前的X坐標移動到btn_links的X坐標上。
注意:下面是本例的重點,也就是需要大家掌握的“方法”。
我們讓follow每次移動它們之間的距離的1/2。因為follow的X坐標是隨時改變的,所以它們之間的距離也會隨時改變。當follow*次移動的時候,它的X坐標為40+(280-40)/2=160注:(40(follow的X坐標)+(280(btn_links的X坐標)-40(follow的X坐標))/2=160(移動后follow的X坐標))。當它第二次移動的時候,它的X坐標為160+(280-160)/2=220。它*次移動的距離為120像素,而第二次移動的距離為60,實現(xiàn)了我們所要的減速運動。如果覺得這樣的減速運動太快的話,你可以適應的改變每次移動的比例。如讓follow每次移動1/3……
實例實踐:
上面我們已經(jīng)掌握了本例的基本實現(xiàn)思路。下面,我們就按著我們的思路,來一步一步地去實現(xiàn)這個菜單。
step1:首先,我們需要制作我們所需要的元素。4個bTN,以及一個MC,把你所需要的欄目,做成BTN,然后制作一個跟隨移動的MC。
方法:點擊菜單 插入(insert)>>新建元件(new symbol) 在名稱(name)上填寫名稱btn_home。(起名字*要有個規(guī)則,不然如果元件多了,看起來會很亂)
(快捷鍵Ctrl+F8)確認行為選擇為按鈕。
點擊確認以后,便會進到這個元件的編輯界面。我們會看到這里面的編輯方式不一和主場景不一樣,只有四個幀,這是因為這個元件的行為是按鈕的原因。這四個幀分別為:up(彈起)、over(指針經(jīng)過)、down(按下)、activ(點擊)。分別代表鼠標不在按鈕上,鼠標經(jīng)過按鈕(或者在按鈕上停留時),鼠標點擊時,*一個是響應鼠標的區(qū)域。如果*一層沒有的話,就會以最上面一層的up(彈起)為活動區(qū)域。
我們在圖層1的up幀用文本工具寫入HOME,這里顏色為#146270。然后在down(按下)幀,點鼠標右鍵,選擇插入幀(insert frame)。這是為了保證在任何時候都顯示home這幾個文字。在屬性面板中設置X和Y都為0;然后在新建一圖層,將圖層2拉到圖層1下面,用矩形工具在圖層2上畫一個長方形。在屬性面板設置寬為80,高為20,X和Y都為0;設置填充色為#56CCE0,無邊框。然后在鼠標經(jīng)過(OVER)上點鼠標右鍵選擇插入關鍵幀(insert key frame)。將填充色改為#8ADCEA,然后在*一幀上,即點擊(activ)幀點鼠標右鍵,選擇插入幀(這樣是為了讓我們的鼠標活動范圍增大)。按照此方法,繼續(xù)制作其它欄目的BTN,只有文字不同,其它地方方法一樣。你也可以在庫面板(窗口>>庫,快捷鍵Ctrl+L、F11),選擇建立的元件名,這里是btn_home,然后右擊,選擇復制,起一個新的好記的名稱,然后再雙擊進入復制好的元件里,對文字進行編輯。把文字改為各個欄目的名稱。
將四個按鈕制作完以后,再新建一個元件,名字為follow,行為為影片剪輯,同樣用矩形工具畫一個長方形,然后對它用漸變進行填充。高:6,寬:80,X:0,Y:0。
step2:回到主場景,打開庫面板,將我們的組件拉到主場景來,對它們的位置進行排列。
把主場景的大小設為400X40,幀數(shù)為25幀,背景色為#006699。把四個按鈕拉進主場景,將它們的Y坐標都設為20,X坐標分別為:40,122,204,286(這里可以自由設定)。為了直觀,將該層改名為btns。
新建一層,將follow影片也拉到主場景,X:40;Y:7,將該層改名為follow。
給每個按鈕、影片起實例名:先看一下下面的圖片
為home、about、news、links分別起實例名為btn_home,btn_about,btn_news、btn_links。給上面的跟隨移動的MC,起名為follow。
注意:這里的實例名和在庫中的元件名是兩回事。庫中的元件名是為了我們能夠在編輯的時候,可以很好的區(qū)分它們。不在同目錄下的元件是可以重名的。而場景中的實例名,則是為了讓我們在使用編寫as程序的時候,利用實例名來分辨他們。
再新建一層,起名為as,在下面鍵入如下代碼。(附注釋)
//這個符號是FLASH中的注釋符//設置兩個變量,startX,endX,用來保存follow的運動起始點和結(jié)束點。即當前的followX坐標與我們所移動到的BTN的X坐標。這里僅起到初始化的作用。
startX = follow._x;
endX = 40;
//當鼠標移動到不同的按鈕上時,follow的結(jié)束點X坐標是不同的。以下的語句是用來判斷鼠標移動到哪一個按鈕上了。
btn_home.onRollOver = function() {
//設置當鼠標移動到不同的按鈕上時,結(jié)束點的X坐標為當前鼠標所移動到的按鈕的X坐標
endX = this._x;
};
btn_about.onRollOver = function() {
endX = this._x;
};
btn_news.onRollOver = function() {
endX = this._x;
};
btn_links.onRollOver = function() {
endX = this._x;
};
//這里的onEnterFrame是為了保證實時運行,即當播放到這一幀時,便持續(xù)播放。
follow.onEnterFrame = function() {
//因為follow的X坐標是實時在變化的,因此,我們需要每次都取得它的X坐標。
startX=follow._x;
//moveX用來計算每回移動的距離。endX是所要移動到的按鈕的X坐標。startX便是follow的當前X坐標了
moveX=(endX-startX)/2;
//重新設置follow的X坐標
this._x=moveX+this._x;
};
現(xiàn)在再確認一下你所鍵入的代碼,并且確認實例名稱已經(jīng)設定,并且正確。就可以按Ctrl+Enter來預覽一下了?!∠螺d源文件