天才教育網(wǎng)合作機構 > 培訓機構 >

                                                                                        東莞設計培訓網(wǎng)

                                                                                        歡迎您!
                                                                                        朋友圈

                                                                                        全國統一學(xué)習專(zhuān)線(xiàn) 9:00-21:00

                                                                                        位置:培訓資訊 > Flash變速滑動(dòng)菜單剖析

                                                                                        Flash變速滑動(dòng)菜單剖析

                                                                                        日期:2005-12-24 00:00:00     瀏覽:377    來(lái)源:東莞設計培訓網(wǎng)

                                                                                          實(shí)例說(shuō)明:

                                                                                          這是一個(gè)在網(wǎng)頁(yè)中的FLASH導航菜單,很有動(dòng)感吧?

                                                                                          經(jīng)過(guò)本例的學(xué)習,你將掌握基本的FLASH菜單的操作步驟。以及用AS來(lái)編寫(xiě)變速運動(dòng)的基本方法。一個(gè)例子的學(xué)習是次要的,希望大家學(xué)習完以后可以掌握這種方法,舉一反三,應用到更多的實(shí)例中去。

                                                                                           

                                                                                          實(shí)例思路:

                                                                                          正如前面所說(shuō)的,一個(gè)例子的學(xué)習是次要的,關(guān)鍵是掌握這種方法。在進(jìn)行我們實(shí)例之前,先說(shuō)一下理論與方法。

                                                                                          在這個(gè)導航中,有四個(gè)Button(按鈕,簡(jiǎn)稱(chēng):BTN),一個(gè)MovieClip(影片,簡(jiǎn)介:MC)。上面跟隨移動(dòng)的MC實(shí)例名為:follow。下面的四個(gè)BTN實(shí)例名分別為:btn_home,btn_about,btn_news,btn_links。實(shí)例的運動(dòng)方法:當鼠標移動(dòng)到其中的一個(gè)按鈕上時(shí),上面的MC(follow)會(huì )以逐漸減速的運動(dòng)慢慢靠近鼠標所指的按鈕上。這其中是以它們的X坐標來(lái)判斷follow的位置的。

                                                                                          follow總共需要移動(dòng)的距離為我們鼠標所指的按鈕的X坐標減去它自己的X坐標。follow每次移動(dòng)一定的距離(如果大家仔細觀(guān)察的話(huà),應該發(fā)現它并不是以勻速進(jìn)行的,而是以減速進(jìn)行的)

                                                                                          下面我們假設follow的X坐標為40,而我們將鼠標移動(dòng)到了btn_links的按鈕上了(即標有links的那個(gè)按鈕)。而btn_links的X坐標為280,那么,它們之間的距離為btn_links._x-follow._x(這其中的._x代表這個(gè)實(shí)例的X坐標)?,F在我們需要讓follow以減速運動(dòng)從當前的X坐標移動(dòng)到btn_links的X坐標上。

                                                                                          注意:下面是本例的重點(diǎn),也就是需要大家掌握的“方法”。

                                                                                          我們讓follow每次移動(dòng)它們之間的距離的1/2。因為follow的X坐標是隨時(shí)改變的,所以它們之間的距離也會(huì )隨時(shí)改變。當follow*次移動(dòng)的時(shí)候,它的X坐標為40+(280-40)/2=160注:(40(follow的X坐標)+(280(btn_links的X坐標)-40(follow的X坐標))/2=160(移動(dòng)后follow的X坐標))。當它第二次移動(dòng)的時(shí)候,它的X坐標為160+(280-160)/2=220。它*次移動(dòng)的距離為120像素,而第二次移動(dòng)的距離為60,實(shí)現了我們所要的減速運動(dòng)。如果覺(jué)得這樣的減速運動(dòng)太快的話(huà),你可以適應的改變每次移動(dòng)的比例。如讓follow每次移動(dòng)1/3……

                                                                                          實(shí)例實(shí)踐:

                                                                                          上面我們已經(jīng)掌握了本例的基本實(shí)現思路。下面,我們就按著(zhù)我們的思路,來(lái)一步一步地去實(shí)現這個(gè)菜單。

                                                                                          step1:首先,我們需要制作我們所需要的元素。4個(gè)bTN,以及一個(gè)MC,把你所需要的欄目,做成BTN,然后制作一個(gè)跟隨移動(dòng)的MC。
                                                                                          方法:點(diǎn)擊菜單 插入(insert)>>新建元件(new symbol) 在名稱(chēng)(name)上填寫(xiě)名稱(chēng)btn_home。(起名字*要有個(gè)規則,不然如果元件多了,看起來(lái)會(huì )很亂)

                                                                                         ?。旖萱ICtrl+F8)確認行為選擇為按鈕。

                                                                                          點(diǎn)擊確認以后,便會(huì )進(jìn)到這個(gè)元件的編輯界面。我們會(huì )看到這里面的編輯方式不一和主場(chǎng)景不一樣,只有四個(gè)幀,這是因為這個(gè)元件的行為是按鈕的原因。這四個(gè)幀分別為:up(彈起)、over(指針經(jīng)過(guò))、down(按下)、activ(點(diǎn)擊)。分別代表鼠標不在按鈕上,鼠標經(jīng)過(guò)按鈕(或者在按鈕上停留時(shí)),鼠標點(diǎn)擊時(shí),*一個(gè)是響應鼠標的區域。如果*一層沒(méi)有的話(huà),就會(huì )以最上面一層的up(彈起)為活動(dòng)區域。

                                                                                          我們在圖層1的up幀用文本工具寫(xiě)入HOME,這里顏色為#146270。然后在down(按下)幀,點(diǎn)鼠標右鍵,選擇插入幀(insert frame)。這是為了保證在任何時(shí)候都顯示home這幾個(gè)文字。在屬性面板中設置X和Y都為0;然后在新建一圖層,將圖層2拉到圖層1下面,用矩形工具在圖層2上畫(huà)一個(gè)長(cháng)方形。在屬性面板設置寬為80,高為20,X和Y都為0;設置填充色為#56CCE0,無(wú)邊框。然后在鼠標經(jīng)過(guò)(OVER)上點(diǎn)鼠標右鍵選擇插入關(guān)鍵幀(insert key frame)。將填充色改為#8ADCEA,然后在*一幀上,即點(diǎn)擊(activ)幀點(diǎn)鼠標右鍵,選擇插入幀(這樣是為了讓我們的鼠標活動(dòng)范圍增大)。按照此方法,繼續制作其它欄目的BTN,只有文字不同,其它地方方法一樣。你也可以在庫面板(窗口>>庫,快捷鍵Ctrl+L、F11),選擇建立的元件名,這里是btn_home,然后右擊,選擇復制,起一個(gè)新的好記的名稱(chēng),然后再雙擊進(jìn)入復制好的元件里,對文字進(jìn)行編輯。把文字改為各個(gè)欄目的名稱(chēng)。

                                                                                          將四個(gè)按鈕制作完以后,再新建一個(gè)元件,名字為follow,行為為影片剪輯,同樣用矩形工具畫(huà)一個(gè)長(cháng)方形,然后對它用漸變進(jìn)行填充。高:6,寬:80,X:0,Y:0。

                                                                                          step2:回到主場(chǎng)景,打開(kāi)庫面板,將我們的組件拉到主場(chǎng)景來(lái),對它們的位置進(jìn)行排列。

                                                                                          把主場(chǎng)景的大小設為400X40,幀數為25幀,背景色為#006699。把四個(gè)按鈕拉進(jìn)主場(chǎng)景,將它們的Y坐標都設為20,X坐標分別為:40,122,204,286(這里可以自由設定)。為了直觀(guān),將該層改名為btns。

                                                                                          新建一層,將follow影片也拉到主場(chǎng)景,X:40;Y:7,將該層改名為follow。

                                                                                          給每個(gè)按鈕、影片起實(shí)例名:先看一下下面的圖片

                                                                                          為home、about、news、links分別起實(shí)例名為btn_home,btn_about,btn_news、btn_links。給上面的跟隨移動(dòng)的MC,起名為follow。

                                                                                          注意:這里的實(shí)例名和在庫中的元件名是兩回事。庫中的元件名是為了我們能夠在編輯的時(shí)候,可以很好的區分它們。不在同目錄下的元件是可以重名的。而場(chǎng)景中的實(shí)例名,則是為了讓我們在使用編寫(xiě)as程序的時(shí)候,利用實(shí)例名來(lái)分辨他們。

                                                                                          再新建一層,起名為as,在下面鍵入如下代碼。(附注釋)

                                                                                        //這個(gè)符號是FLASH中的注釋符
                                                                                        //設置兩個(gè)變量,startX,endX,用來(lái)保存follow的運動(dòng)起始點(diǎn)和結束點(diǎn)。即當前的followX坐標與我們所移動(dòng)到的BTN的X坐標。這里僅起到初始化的作用。
                                                                                        startX = follow._x;
                                                                                        endX = 40;

                                                                                        //當鼠標移動(dòng)到不同的按鈕上時(shí),follow的結束點(diǎn)X坐標是不同的。以下的語(yǔ)句是用來(lái)判斷鼠標移動(dòng)到哪一個(gè)按鈕上了。
                                                                                        btn_home.onRollOver = function() {
                                                                                             //設置當鼠標移動(dòng)到不同的按鈕上時(shí),結束點(diǎn)的X坐標為當前鼠標所移動(dòng)到的按鈕的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是為了保證實(shí)時(shí)運行,即當播放到這一幀時(shí),便持續播放。
                                                                                        follow.onEnterFrame = function() {
                                                                                             //因為follow的X坐標是實(shí)時(shí)在變化的,因此,我們需要每次都取得它的X坐標。
                                                                                             startX=follow._x;
                                                                                             //moveX用來(lái)計算每回移動(dòng)的距離。endX是所要移動(dòng)到的按鈕的X坐標。startX便是follow的當前X坐標了
                                                                                             moveX=(endX-startX)/2;
                                                                                             //重新設置follow的X坐標
                                                                                             this._x=moveX+this._x;
                                                                                        };

                                                                                          現在再確認一下你所鍵入的代碼,并且確認實(shí)例名稱(chēng)已經(jīng)設定,并且正確。就可以按Ctrl+Enter來(lái)預覽一下了?!∠螺d源文件

                                                                                        如果本頁(yè)不是您要找的課程,您也可以百度查找一下:

                                                                                        奇米在线7777在线精品|国产成人精品免费视|精品无码不卡一区二区三区|国内综合精品午夜久久资源|亚洲视频在线观看..