Flash CS4制作時(shí)尚的時(shí)鐘走動(dòng)gif動(dòng)畫效果

發(fā)布時(shí)間：2015-01-05 15:51:20 作者：佚名

這篇教程是向腳本之家的朋友介紹利用Flash CS4制作時(shí)尚的時(shí)鐘走動(dòng)gif動(dòng)畫效果過(guò)程，教程比較經(jīng)典，介紹的也很詳細(xì)，其中的代碼也梳理的很詳細(xì)，推薦到腳本之家，喜歡的朋友可以跟著教程一起來(lái)學(xué)習(xí)

這篇教程是向腳本之家的朋友介紹Flash CS4制作時(shí)尚的時(shí)鐘走動(dòng)gif動(dòng)畫效果，本例主要介紹如何取得系統(tǒng)時(shí)間，以及如何加載外部的swf皮膚文件。我們先來(lái)看看最終的效果圖：

本例思路

.繪制出背景效果，再新建幾個(gè)fla文件用來(lái)存儲(chǔ)時(shí)鐘界面(必須發(fā)布swf文件)，然后繪制出時(shí)鐘效果。

. 編寫加載皮膚的管理類，然后編寫出時(shí)鐘類，再加載swf皮膚文件，創(chuàng)建出時(shí)鐘對(duì)象。

Part 1 定制皮膚

(1)新建一個(gè)500×350像素的空白文檔，然后使用“矩形工具”繪制出如圖12-1所示的斑馬條紋背景。

圖12-1 繪制背景

技巧與提示：

圖12-2所示是本例所創(chuàng)建的幾個(gè).fla文件，這幾個(gè)文件專門用來(lái)存儲(chǔ)時(shí)鐘界面的皮膚，并且發(fā)布了swf文件，它們統(tǒng)一保存在skin文件夾內(nèi)。

圖12-2 皮膚文件

(2)下面只介紹一個(gè)皮膚文件的制作方法。新建一個(gè)Flash文件，并將其保存為01，再新建一個(gè)影片剪輯(名稱為Bg)，然后繪制出如圖12-3所示的時(shí)鐘界面。

圖12-3 繪制時(shí)鐘背景

(3)新建一個(gè)“刻度”圖層，然后繪制出表盤的刻度，如圖12-4所示。

圖12-4 繪制刻度線

(4)使用“橢圓工具”繪制一個(gè)只有邊框的灰色圓形，然后刪除圓形內(nèi)的線條，再刪除圓形，如圖12-5所示。

圖12-5 繪制刻度

(5)將時(shí)針?biāo)诘目潭戎本€進(jìn)行加粗顯示，然后添加時(shí)刻文字(靜態(tài)文本)，如圖12-6所示。

圖12-6 添加文本

(6)新建一個(gè)“高光”圖層，然后繪制一個(gè)半圓形作為高光區(qū)域，再設(shè)置填充類型為“線性”，并設(shè)置第1個(gè)色標(biāo)顏色為(R:255，G:255，B:255)，Alpha為60%，第2個(gè)色標(biāo)顏色為(R: 43，G:43，B:43)，Alpha為0%，效果如圖12-7所示。

圖12-7 繪制高光

(7)新建3個(gè)影片剪輯，分別命名為Hours、Minutes和Seconds，然后分別在對(duì)應(yīng)的影片剪輯中繪制出如圖12-8所示時(shí)針、分針和秒針。

圖12-8 繪制表秒針

Part 2 輸入控制程序

(1)切換到“庫(kù)”面板，然后分別為4個(gè)影片剪輯添加元件類，如圖12-9所示。

圖12-9 添加元件類

技巧與提示：

在前面步驟中只創(chuàng)建了4個(gè)影片剪輯元件，它們只存在于“庫(kù)”面板中，當(dāng)發(fā)布成swf文件時(shí)，此時(shí)查看swf文件則為空，因?yàn)闆](méi)有編寫任何程序來(lái)進(jìn)行引用和控制，就相當(dāng)于該swf文件中只包含4個(gè)元件類，下面將通過(guò)加載該swf文件來(lái)引用和創(chuàng)建其元件類實(shí)例。

(2)新建一個(gè)ActionScript文件，并將其保存為SkinManager，然后編寫出加載皮膚的管理類程序。

AS3代碼

復(fù)制代碼

代碼如下:

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代碼

復(fù)制代碼

代碼如下:

/**
* 該類為皮膚加載管理類
* @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("不能直接創(chuàng)建對(duì)象");
}
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));//發(fā)布事件
}
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;
}
}
}

技術(shù)看板：關(guān)于SkinManager類涉及到的難點(diǎn)

有一定編程基礎(chǔ)的用戶很容易看出該類使用了很常用的“設(shè)計(jì)模式”中的單件模式，通過(guò)提供該類公有的靜態(tài)方法getInstance()作為返回唯一的實(shí)例對(duì)象，并且可以對(duì)該實(shí)例進(jìn)行全局訪問(wèn)。

(3)新建一個(gè)ActionScript文件，并將其保存為Clock，下面編寫時(shí)鐘類的程序代碼。該類接收3個(gè)Sprite類型的對(duì)象參數(shù)，它們分別來(lái)自前面3個(gè)元件類所創(chuàng)建的實(shí)例(如第21~28行代碼)，在創(chuàng)建實(shí)例時(shí)接收完這3個(gè)參數(shù)后，然后調(diào)用init()方法來(lái)注冊(cè)ENTER_FRAME事件，并在偵聽器函數(shù)enterFrameHandler()中創(chuàng)建Date的實(shí)例，再取得一個(gè)特定時(shí)間點(diǎn)的時(shí)、分和秒值(如第35~38行代碼)。

AS3代碼

復(fù)制代碼

代碼如下:

/**
* 該類為時(shí)鐘原理類
* @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) {
//將傳遞進(jìn)來(lái)的三個(gè)對(duì)象參數(shù),賦給該時(shí)鐘類的三個(gè)屬性
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(); // 構(gòu)造一個(gè)Date實(shí)例,Date 類的實(shí)例表示一個(gè)特定時(shí)間點(diǎn)
hour = now.getHours(); //獲取系統(tǒng)當(dāng)前的時(shí)，分，秒
minute = now.getMinutes();
second = now.getSeconds();
//下面控制時(shí)針、分針、秒針的旋轉(zhuǎn)規(guī)律、旋轉(zhuǎn)角度，后面進(jìn)行具體解釋
_hours.rotation = hour*30 + Math.floor(minute*6/12);
_minutes.rotation = minute*6 + Math.floor(second*6/60);
_seconds.rotation = second*6;

}
}
}

技術(shù)看板：時(shí)、分、秒的算法

小時(shí)(hours)：時(shí)鐘轉(zhuǎn)動(dòng)一圈是360°，總共花12個(gè)小時(shí)，每一小時(shí)為30°，為了更加接近生活中時(shí)鐘的運(yùn)動(dòng)效果，因此再加上時(shí)針(hour)走完一小時(shí)的角度(30°)與分針(minute)走完一小時(shí)的角度(360°)，那么它們的比例關(guān)系就是1/12。

分鐘(minutes)：時(shí)鐘轉(zhuǎn)動(dòng)一圈是360°，總共花60分鐘，每一分鐘是6°，再加上分針(minute)走完一分鐘的角度6°與秒針(second)走過(guò)一分鐘的角度360°，那么它們的比例關(guān)系就是1/60。

秒鐘(seconds)：時(shí)鐘轉(zhuǎn)動(dòng)一圈是360°，共60秒鐘，每一秒鐘是6°。

(4)返回到flash文檔中，然后新建一個(gè)AS圖層，并編寫出程序。通過(guò)SkinManager類來(lái)加載皮膚文件，并注冊(cè)偵聽器(如第1~3行代碼);第5~8行代碼是創(chuàng)建存儲(chǔ)時(shí)鐘組成元素的容器，并設(shè)置舞臺(tái)為居中對(duì)齊;接著創(chuàng)建sprite_name和class_name兩個(gè)數(shù)組，來(lái)分別存儲(chǔ)將要被加載swf文件中的元件類的實(shí)例名稱以及元件類名稱(如10和11行代碼);當(dāng)加載完swf時(shí)鐘皮膚文件后，調(diào)用偵聽器函數(shù)completeHandler()，在偵聽器函數(shù)中執(zhí)行一個(gè)for()循環(huán)語(yǔ)句，然后創(chuàng)建4個(gè)(_length值等于4)被加載swf文件中的元件類實(shí)例，并在添加實(shí)例名稱后統(tǒng)一添加到container_mc容器中(如第16~21行代碼)。

AS3代碼

復(fù)制代碼

代碼如下:

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();
}
//創(chuàng)建一個(gè)時(shí)鐘(Clock)類,傳入三個(gè)參數(shù),參數(shù)類型都是Sprite類型,
//它們分別是舞臺(tái)上存在的三個(gè)影片剪輯元件,實(shí)例名分別為
//時(shí)針(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);
}

創(chuàng)建完被加載swf文件中的元件類實(shí)例后，調(diào)用create()方法來(lái)創(chuàng)建Clock類實(shí)例(如第28行代碼);getItem()方法主要是通過(guò)container_mc.getChildByName()方法來(lái)取得container_mc容器中指定名稱的對(duì)象。

(5)除了前面的方法外，還可以通過(guò)隨機(jī)指定路徑來(lái)加載swf皮膚文件。

AS3代碼

復(fù)制代碼

代碼如下:

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組合鍵發(fā)布本例的所有程序。

教程結(jié)束，以上就是Flash CS4制作時(shí)尚的時(shí)鐘走動(dòng)gif動(dòng)畫效果，希望能對(duì)大家有所幫助！