| 效果描述 用FLASH做的小鬧種 知識點 1. fs command 2.簡單的avascript 3.基本的action script 4. movie clip的控制 見過用FLASH制作的實時時鐘嗎?做一個精美的FLASH時鐘放在桌面上,不要太酷哦! 準備工作 啟動FLASH MX,按Ctrl+J設置尺寸及背景色。 為了制作更精確,選擇【View】菜單中的【Grid】子菜單下的【Show Grid】命令顯示網格。同時選擇【View】菜單下的【Rulers】命令顯示標尺。 制作時鐘各部件 接下來準備制作時鐘各部件。單擊Insert菜單下的New Symbol命令(或者按Ctrl+F8)新建一個圖符(Graphic),命名為"鐘面",進入圖符編輯窗口。在工具面板中選擇畫圓工具 ,圓的邊框和填充顏色可以根據個人喜好設定。按住Shift鍵在編輯區中畫出一個正圓形,在屬性面板中設置尺寸:W:200,H:200,即圓半徑為100。然后按Ctrl+K調出對齊面板(Align)。按下面板右邊的To Stage按鈕,再單擊一下水平居中(Align horizontal center) 和垂直居中(Align vertical center) 兩個按鈕。如圖1所示。此時可以看到圓的中心與場景中心的十字線重合在一起。如圖2所示。 圖1 圖2 用箭頭工具單擊選中選內部,按Shift+F9調出Color Mixer面板,將填充模式設置為Radial漸變填充。漸變色自選,如圖3所示。(由于篇幅有限,這里對美化方面的制作只能一筆帶過。) 圖3 接下來制作鐘面刻度。新建一層命名為"刻度"。用直線工具畫出一條小豎線,設置豎線尺寸為4。按F8將小豎線轉化為圖符(Graphic),命名為"小刻度"。雙擊小豎線進入編輯狀態。在屬性面板中設置豎線的位置X:0,Y:-100(100為圓半徑)。 回到"鐘面"圖符編輯狀態。拖動"小刻度"圖符使其中心位置與鐘面圓心重合。如圖4所示。 圖4 圖5 選擇【Windows】菜單中的【Transform】命令,或者直接按Ctrl+T調出Transform面板。設置旋轉角度Totate為30度。然后單擊Copy and Apply Transform按鈕 。將小刻度圖符旋轉并復制12次。 考慮到幾個重要的時間點,將3,6,9,12時間點刪除,用同樣的方法新建"大刻度"圖符。不同的是,畫小豎線時,將線的尺寸設為6。然后回到"鐘面"圖符編輯狀態。繼續按旋轉復制的操作步驟,不過旋轉角度要設為90度。然后單擊工具面板中的文字工具在幾個關鍵的時間點處輸入數字。最終得到的鐘面效果圖如圖6所示。 圖6 鐘面做好了,現在分別制作時針、分針和秒針。 選擇【Insert】菜單下的【New Symbol】命令,在彈出對話框中選擇Movie Clip單選框,并設置電影夾名稱為"時針"。如圖7所示。 圖7 圖8 單擊工具面板中的圓形工具,在編輯區中拖出一個橢圓形,然后按住Ctrl鍵,在橢圓形上緣拖出一個錐形。如圖8所示。 接下來用同樣的方法建立"分針"和"秒針"兩個電影夾。唯一的區別是秒針比分針長,分針比時針長。 組裝時鐘 時鐘各部件都已經做完了,現在將各部件組裝起來。 回到主場景,按F11調出庫(Library)面板。將鐘面圖符拖到主場景中,將當前圖層命名為"鐘面"。為了保證制作的精確度,在左邊的標尺刻度處點住鼠標向右拖出一條垂直參考線。同樣在上方的標尺刻度處向下拖出一條水平參考線。將鐘面圖符的中心跟兩條參考線的交點重合。注:在上面的操作過程中,注意選中Snap to Object按鈕。 新建一層,命名為"時針",將庫里邊的"時針"電影夾拖到主場景中,設置時針中心點在時針底端中心處,設置方法是:點擊縮放工具,將中心點直接拖動到目標位置即可。然后移動時針使其中心點跟鐘面的中心點重合。時針頭指向12時間點。 再新建"分針"和"秒針"兩層,操作方法同"時針"層一樣。 另外"時針"層在最上方,其次是"分針",再是"秒針"。得到的效果圖如圖9所示。 在每一層的第二幀按F5插入幀,將每一層都延長到第二幀。 圖9 添加AS 時鐘已經制作完成,怎樣讓時針,分針和秒針走動起來呢?,F在給FLASH加入ActionScript。 新建一層命名為"ActionScript"。在第一幀里加入如下Action代碼: time = new Date(); //獲取系統日期 hours = time.getHours(); //獲取系統小時數 minutes = time.getMinutes(); //獲取系統分鐘數 seconds = time.getSeconds(); //獲取系統秒數 if (hours>12) { hours = hours-12; } if (hours<1) { hours = 12; } hours = hours*30+int(minutes/2); //計算時針旋轉的角度 minutes = minutes*6+int(seconds/10); //計算分針旋轉的角度 seconds = seconds*6; //計算秒針旋轉的角度 代碼基本上已經作了注釋,這里作一點說明:因為系統的時間是24小時計的,而這里的時鐘只有12個小時的,只能以12小時計。 另外系統的0點也就是時鐘的12點。 接下來,在第二幀按F6插入關鍵幀,在該幀加入下面的Action代碼: gotoAndPlay (1); 時鐘能走了嗎??還不行,還有最后也是最為關鍵的步驟之一。怎樣將時針,分針以及秒針走動起來呢? 選中"時針"電影夾,按F9調出Action面板,輸入如下代碼: onClipEvent(EnterFrame) { SetProperty(this,_rotation,_root.hours); } 再分別選中"分針"和"秒針" 電影夾,分別加入如下Action: onClipEvent(EnterFrame) { SetProperty(this,_rotation,_root.minutes); } onClipEvent(EnterFrame) { SetProperty(this,_rotation,_root.seconds); } 好了,大功告成,現在按下Ctrl+Enter鍵測試一下,感覺怎么樣?如圖10所示。是不是很酷?發揮你的想象,相信你可以做得更酷! 圖10
|