網頁開頭動畫:宇宙地球動畫
1.從檔案→匯入→匯入至舞台,把[銀河]圖片匯入舞台中。
2.在圖上按右鍵→轉換成元件,名稱定為"銀河",類型為"影片片段"。

3.新增元件→名稱:流星,類型:影片片段。

4.直接進入流星的內部畫面做編輯。

5.用矩形工具畫一個細長方形,用線性漸層,由黑變白。

6.把圖層名稱改為"流星";在第一格影格設關鍵影格,因為要讓流星是從左邊往右邊飛過去,所以第一個影格先把長方形往左移並縮短;在第5個影格設關鍵影格,把長方形往中心點移動並拉長,到第10格影格時把長方形往右移並縮短,設關鍵影格。在第11影格的地方設定空白關鍵影格使長方形停止並消失,最後建立形狀補間動畫。

7.新增一個圖層,名稱為"語法",在此圖層上,在與[流星]圖層最後一個影格相同的位置設定關鍵影格,並按右鍵→動作,加入語法: stop();

8.回到場景中,在[銀河]圖層上方新增圖層:流星。在此圖層上,選擇流星要開始的時間(在此設定第15影格開始),把流星元件拉進舞台放在右上方的位置(從左上方往右下方落下),可以不只放一個流星,可以看個人喜好。

9.可以調整每一個流星傾斜的方向,在右邊的[變形]面板→傾斜。

10.匯入地球圖片,新增[地球]圖層,放在右下方的位置。

11.新增兩個圖層分別是上布幕與下布幕,在[上布幕]圖層上,第一影格設關鍵影格,在舞台上拉出一個長方形寬度為舞台的一半,放在舞台的上半部;在[下布幕]圖層上,複製[上布幕]的長方形放在舞台的下半部並設定關鍵影格。

12.在第40個影格兩個圖層都設關鍵影格,並把兩個長方形都分別往上與往下縮短到最小,要造成布幕慢慢掀開的感覺,兩個關鍵影格中間要建立形狀補間動畫。

13.當上下布幕掀開之後,要做銀河往右邊移動帶出地球的動作;在[銀河]圖層上第43影格的位置設定關鍵影格(先把地球拉出背景外,之後再做設定)。

14.在[銀河]圖層第83影格設定關鍵影格,把舞台上的銀河背景往右移動一段距離在兩個關鍵影格中間建立傳統補間動畫
15.再設定地球出場時間,在[地球]圖層上,第50影格設定關鍵影格(前面有影格的話要全部清除)

16.同樣在地球圖層上的第83影格(與銀河移動停止的關鍵影格相同)設定關鍵影格,並把地球由右邊拉進舞台。
17.兩個關鍵影格之間建立傳統補間動畫。

18.導引線動畫→要設定讓小亮點繞著地球轉一圈的動畫;新增一個圖層名為[亮點]在地球圖層上面。在[亮點]圖層上按右鍵→增加移動引導線,這時會自動增加一個引導線圖層。
19.在[引導線]圖層上用"橢圓形工具"在地球外圍畫一個曲線當導引線(把橢圓形線條顏色設為白色,裡面為無填色),再用橡皮擦擦掉一小段的線(以方便之後亮點要吸附在線上)。

20. (1)設定亮點與導引線開始與結束的關鍵影格,並在[亮點]圖層的關鍵影格之間建立傳統補間動畫,(2)新增[文字圖層]。

21.新增元件,類型為按鈕,名稱為Enter;在按鈕元件上點兩下,進入元件內部做編輯,可以自己設定按鈕圖案或文字;編輯完元件內部後,回到按鈕圖層上設定出現與結束的關鍵影格並建立傳統補間動畫,記得要設定按鈕的"實體名稱(在此設定為enter_btn)。

22.補充一下,在設定按鈕內部文字時也可以依不同狀況改變顏色甚至在關鍵影格上加入聲音喔。

23.最後,新增[語法]圖層,在此圖層的最後設關鍵影格並加入語法,這語法的用意是按下按鈕"enter"之後會連結到設定要去的網頁名稱(在此預設名稱是a1.html),"enter_btn"是指按鈕的"實體名稱";語法如下:
stop(); //停止所有畫面
import flash.net. URLRequest;
import flash.events.MouseEvent;
var myURL:URLRequest=new URLRequest("a1.html");
enter_btn.addEventListener(MouseEvent.CLICK,gogo);
function gogo(e: MouseEvent){
navigateToURL(myURL,"_self");
}

24.ctrl+Enter測試看看就完成了。
回目錄│
上一篇│
下一篇│
TOP