Facebook加入
LINE加入
2021/12/25
教學主題: Flash CS4教程：製作時尚的時鐘效果
大家好!! 小編今天來和大家分享關於 Flash/3D/CAD教程中的Flash教程教學
今天的這個教學主題是: Flash CS4教程：製作時尚的時鐘效果
這教學的重點為這幾點 [ 效果,時尚,製作,教程,var,文件,時鐘,一個,然後,實例 ]
希望你可以從這幾點中領悟到修圖的精華
本文重點
本例主要介紹如何取得系統時間，以及如何加載外部的swf皮膚文件。
本例主要介紹如何取得系統時間，以及如何加載外部的swf皮膚文件。
本例思路
.繪製出背景效果，再新建幾個fla文件用來存儲時鐘界面(必須發布swf文件)，然後繪製出時鐘效果。
. 編寫加載皮膚的管理類，然後編寫出時鐘類，再加載swf皮膚文件，創建出時鐘對象。
Part 1 定製皮膚
(1)新建一個500×350像素的空白文檔，然後使用“矩形工具”繪製出如圖12-1所示的斑馬條紋背景。
圖12-1 繪製背景
技巧與提示：
圖12-2所示是本例所創建的幾個.fla文件，這幾個文件專門用來存儲時鐘界面的皮膚，並且發布了swf文件，它們統一保存在skin文件夾內。
圖12-2 皮膚文件
(2)下面只介紹一個皮膚文件的製作方法。新建一個Flash文件，並將其保存為01，再新建一個影片剪輯(名稱為Bg)，然後繪製出如圖12-3所示的時鐘界面。
圖12-3 繪製時鐘背景
(3)新建一個“刻度”圖層，然後繪製出錶盤的刻度，如圖12-4所示。
圖12-4 繪製刻度線
(4)使用“橢圓工具”繪製一個只有邊框的灰色圓形，然後刪除圓形內的線條，再刪除圓形，如圖12-5所示。
圖12-5 繪製刻度
(5)將時針所在的刻度直線進行加粗顯示，然後添加時刻文字(靜態文本)，如圖12-6所示。
圖12-6 添加文本
(6)新建一個“高光”圖層，然後繪製一個半圓形作為高光區域，再設置填充類型為“線性”，並設置第1個色標顏色為(R:255，G:255，B:255)，Alpha為60%，第2個色標顏色為(R: 43，G:43，B:43)，Alpha為0%，效果如圖12-7所示。
圖12-7 繪製高光
(7)新建3個影片剪輯，分別命名為Hours、Minutes和Seconds，然後分別在對應的影片剪輯中繪製出如圖12-8所示時針、分針和秒針。
圖12-8 繪製表秒針
Part 2 輸入控制程序
(1)切換到“庫”面板，然後分別為4個影片剪輯添加元件類，如圖12-9所示。
圖12-9 添加元件類
技巧與提示：
在前面步驟中只創建了4個影片剪輯元件，它們只存在於“庫”面板中，當發布成swf文件時，此時查看swf文件則為空，因為沒有編寫任何程序來進行引用和控制，就相當於該swf文件中只包含4個元件類，下面將通過加載該swf文件來引用和創建其元件類實例。
(2)新建一個ActionScript文件，並將其保存為SkinManager，然後編寫出加載皮膚的管理類程序。
AS3代碼
| var skin_mc:SkinManager = SkinManager.getInstance(); skin_mc.loadSkin("skin/01.swf"); skin_mc.addEventListener("skincomplete",completeHandler); function completeHandler(e:Event) { var class_name:String = "Bg"; var _class:Class = skin_mc.getClass(class_name); var new_sprite:Sprite = new _class(); addChild(new_sprite); } |
AS3代碼
| /** * 該類為皮膚加載管理類 * @author lbynet * @version 0.1 */ package { import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.events.EventDispatcher; public class SkinManager extends EventDispatcher { public static const SKINCOMPLETE:String="skincomplete"; private static var instance:SkinManager=new SkinManager(); public var loader:Loader; public function SkinManager() { if (instance != null) { throw new Error("不能直接創建對象"); } loader=new Loader(); } public static function getInstance():SkinManager { return instance; } public function loadSkin(path:String):void { loader.load(new URLRequest(path)); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler); } private function completeHandler(e:Event) { //移除偵聽器 loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,completeHandler); dispatchEvent(new Event(SkinManager.SKINCOMPLETE));//發布事件 } public function getClass(className:String):Class { try { return loader.contentLoaderInfo.applicationDomain.getDefinition(className) as Class; } catch (e:Error) { throw new Error(className + " definition not found in " + e.toString()); } return null; } } } |
技術看板：關於SkinManager類涉及到的難點
有一定編程基礎的用戶很容易看出該類使用了很常用的“設計模式”中的單件模式，通過提供該類公有的靜態方法getInstance()作為返回唯一的實例對象，並且可以對該實例進行全局訪問。
(3)新建一個ActionScript文件，並將其保存為Clock，下面編寫時鐘類的程序代碼。該類接收3個Sprite類型的對象參數，它們分別來自前面3個元件類所創建的實例(如第21~28行代碼)，在創建實例時接收完這3個參數后，然後調用init()方法來註冊ENTER_FRAME事件，並在偵聽器函數enterFrameHandler()中創建Date的實例，再取得一個特定時間點的時、分和秒值(如第35~38行代碼)。
AS3代碼
| /** * 該類為時鐘原理類 * @author lbynet * @version 0.1 */ package { import Date; import flash.display.Sprite; import flash.events.Event; public class Clock extends Sprite { private var hour:Number; private var minute:Number; private var second:Number; private var _hours:Sprite; private var _minutes:Sprite; private var _seconds:Sprite; public function Clock(h:Sprite,m:Sprite,s:Sprite) { //將傳遞進來的三個對象參數,賦給該時鐘類的三個屬性 this._hours = h; this._minutes = m; this._seconds = s; init(); } private function init() { this.addEventListener(Event.ENTER_FRAME,enterFrameHandler); } private function enterFrameHandler(event:Event) { var now:Date = new Date(); // 構造一個Date實例,Date 類的實例表示一個特定時間點 hour = now.getHours(); //獲取系統當前的時，分，秒 minute = now.getMinutes(); second = now.getSeconds(); //下面控制時針、分針、秒針的旋轉規律、旋轉角度 ，後面進行具體解釋 _hours.rotation = hour*30 + Math.floor(minute*6/12); _minutes.rotation = minute*6 + Math.floor(second*6/60); _seconds.rotation = second*6; } } } |
技術看板：時、分、秒的算法
小時(hours)：時鐘轉動一圈是360°，總共花12個小時，每一小時為30°，為了更加接近生活中時鐘的運動效果，因此再加上時針(hour)走完一小時的角度(30°)與分針(minute)走完一小時的角度(360°)，那麼它們的比例關係就是1/12。
分鐘(minutes)：時鐘轉動一圈是360°，總共花60分鐘，每一分鐘是6°，再加上分針(minute)走完一分鐘的角度6°與秒針(second)走過一分鐘的角度360°，那麼它們的比例關係就是1/60。
秒鐘(seconds)：時鐘轉動一圈是360°，共60秒鐘，每一秒鐘是6°。
(4)返回到flash文檔中，然後新建一個AS圖層，並編寫出程序。通過SkinManager類來加載皮膚文件，並註冊偵聽器(如第1~3行代碼);第5~8行代碼是創建存儲時鐘組成元素的容器，並設置舞台為居中對齊;接着創建sprite_name和class_name兩個數組，來分別存儲將要被加載swf文件中的元件類的實例名稱以及元件類名稱(如10和11行代碼);當加載完swf時鐘皮膚文件后，調用偵聽器函數completeHandler()，在偵聽器函數中執行一個for()循環語句，然後創建4個(_length值等於4)被加載swf文件中的元件類實例，並在添加實例名稱后統一添加到container_mc容器中(如第16~21行代碼)。
AS3代碼
| var skin_mc:SkinManager = SkinManager.getInstance(); skin_mc.loadSkin("skin/01.swf"); skin_mc.addEventListener("skincomplete",completeHandler); var container_mc:Sprite = new Sprite(); addChild(container_mc); container_mc.x = stage.stageWidth/2; container_mc.y = stage.stageHeight/2; var sprite_name:Array = ["bg_mc","hours_mc","minutes_mc","seconds_mc"]; var class_name:Array = ["Bg","Hours","Minutes","Seconds"]; var _length:uint = class_name.length; function completeHandler(e:Event) { var _class:Class; var new_sprite:Sprite; for (var i=0; i<_length i=""> _class = skin_mc.getClass(class_name[i]); new_sprite = new _class(); new_sprite.name = sprite_name[i]; container_mc.addChild(new_sprite); } create(); } //創建一個時鐘(Clock)類,傳入三個參數,參數類型都是Sprite類型, //它們分別是舞台上存在的三個影片剪輯元件,實例名分別為 //時針(hours_mc) , 分針(minutes_mc) , 秒針(seconds_mc) function create() { var a:Clock = new Clock(getItem("hours_mc"),getItem("minutes_mc"),getItem("seconds_mc")); addChild(a); } function getItem(Name:String):* { return container_mc.getChildByName(Name); } |
創建完被加載swf文件中的元件類實例后，調用create()方法來創建Clock類實例(如第28行代碼);getItem()方法主要是通過container_mc.getChildByName()方法來取得container_mc容器中指定名稱的對象。
(5)除了前面的方法外，還可以通過隨機指定路徑來加載swf皮膚文件。
AS3代碼
| var skin_mc:SkinManager = SkinManager.getInstance(); skin_mc.loadSkin("skin/0"+Math.ceil(Math.random()*4)+".swf"); skin_mc.addEventListener("skincomplete",completeHandler); |
(6)按Ctrl+Enter組合鍵發布本例的所有程序。
進入論壇參與討論和交作業：http://www.missyuan.com/viewthread.php?tid=424472
看完小編分享的教學之後 是不是對Flash教程中的Flash/3D/CAD教程教學更熟悉了呢?
希望我們所介紹的 Flash CS4教程：製作時尚的時鐘效果 這教學會喜歡
文章標題: 骨子愛創意- Flash CS4教程：製作時尚的時鐘效果–轉載請註明來源處
本教學分類為Flash教程中的 Flash/3D/CAD教程相關教學
文章相關關鍵字為: 效果,時尚,製作,教程,var,文件,時鐘,一個,然後,實例
本文永久連結 :Flash CS4教程：製作時尚的時鐘效果
本文轉載自 :VIA
熱門推薦
留言回覆
