教你用Flash制作非?？岬亩M制時鐘動畫
我要評論今天在這個教程中我們將學(xué)習(xí)用Flash做一個不同尋常的，但非?？岬臅r鐘：一個二進制時鐘，中間用到了代碼，但介紹地很詳細，相信很值得大家學(xué)習(xí)，感興趣的朋友可以跟著一起來制作哦~！
最終預(yù)覽讓我們看一下最終預(yù)覽效果
第一步：二進制是什么意思？
每個人都知道如何計數(shù)，但不是每個人都知道有多少種不同的方法。我們現(xiàn)在要用一種很特別的方法，叫做十進制法。我們也可以用十六進制法，八進制法，二進制法或其他的。
在十進制法中，我們用10來代表我們進位基數(shù)，以此來進行加減。但是在二進制中，10和十進制中的2是相等的，11和十進制中的3相等，100和十進制中的4相等，等等。所以我們常見的10也可以表示不同的數(shù)。
二進制法是以2為基數(shù)的，這就是為什么它叫二進制，和以10為基數(shù)的十進制不同。計算機用二進制來工作。
有了這些知識，你能看明白上面SWF中的表么？
第二步：創(chuàng)建Flash文檔創(chuàng)建一個新的AS3Flash文檔，命名為”Binary_Clock.fla”
進入屬性面板，將舞臺大小設(shè)為550*400，背景色為#222222.
到http://www.greensock.com/tweenmax/網(wǎng)站下載AS3所需的庫
第五步：提取TweenMax
將文件解壓并將名為”com”的文件夾復(fù)制到你存放Binary_Clock.fla的目錄中。
現(xiàn)在執(zhí)行插入>新建元件，建一個名為Bit的影片剪輯元件。
這個”Bit”將代表一個數(shù)的一個單位。它有兩種狀態(tài)，分別用兩種顏色表示：一個代表0一個代表1。
第七步：畫一個方塊下一步,在你新創(chuàng)建的元件中畫一個50*50的正方形。
將方塊的顏色改為#00CBFF，并將其放置到中間。
回到舞臺，從庫中選取些方塊，并將它們擺成我們要用的樣子?？梢园聪旅娴臉幼訑[放。
可以按你所需添加些文本標簽和線條，使它們更易于理解。
在屬性面板中為每一個方塊設(shè)實例名稱，它們的名字如下所示：
進入屬性面板，將類名設(shè)為”Main”，這個是下一步中我們要創(chuàng)建的類。
完成了舞臺部分后，我們現(xiàn)在可以開始寫代碼了。首先創(chuàng)建一個新的ActionScript3.0文件，保存為”Main.as”
將下面的代碼添加到文件中：
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main()
{
}
}
}
我們開始要先導(dǎo)入一些必要的類，將下面的添加到包聲名后面。
import flash.utils.Timer;
import flash.events.TimerEvent;
import com.greensock.*;
import com.greensock.easing.*;
第十五步：定義變量
下面我們將定義些公有變量，將下面的添加到類聲名后：
public var date:Date=new Date();
public var hr:int;
public var min:int;
public var sec:int;
public var bits:Array;
這時會自動創(chuàng)建一個新Date對象將其設(shè)為當前時間。
第十六步：為變量賦值好了現(xiàn)在來添加讓時鐘啟動的代碼。這些是在Main函數(shù)里面的。
//通過這些來為每個變量賦初值
min=date.getMinutes();
hr=date.getHours();
clock.start();
clock.addEventListener(TimerEvent.TIMER, setTime);
每一秒都會調(diào)用這個函數(shù)
{
date=new Date();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
}
這個函數(shù)將把十進制數(shù)轉(zhuǎn)化為二進制數(shù)，這些數(shù)過會會用到。
{
var bin:Array = new Array();
while((dec/2)>0) //注意這兒和 “while((dec/2)>=1)”的效果一樣
{
bin.push(dec%2); //dec%2是dec除以2后的余數(shù)。 3%2=1; 4%2=0; 5%2=1; 6%2=0; 等等
//也就是看這個數(shù)是偶數(shù)還是奇數(shù)
dec=dec/2; //由于dec是整形數(shù)，所以會得到一個近似數(shù)
}
while(bin.length<length) bin.push(0); //這只是用0來填充數(shù)組
return bin;
}
所以,調(diào)用 函數(shù)dec2bin(13, 4)得到的是 [1,1,0,1].
第十九步：創(chuàng)建converter()函數(shù)這個函數(shù)將傳一個十進制數(shù)并用dec2bin()函數(shù)將其轉(zhuǎn)化為我們將要用的二維數(shù)組
{
var st:String=String(num);
if (st.length==1) st=’0′+st;
var fDigit:int=int(st.charAt(1));
var sDigit:int=int(st.charAt(0));
var fColumn:Array=dec2bin(fDigit,4);
var sColumn:Array=dec2bin(sDigit,3);
var result:Array=fColumn.concat(sColumn);
return result;
}
現(xiàn)在我們要添加一些代碼來啟動，關(guān)閉方塊，下面的函數(shù)將實現(xiàn)該功能：
//newBits是我們從converter()中得到的二維數(shù)組， target是 用來標明使用的是哪一列的”H” “M” 或”S”
{
//二維數(shù)組通過循環(huán)來改變方塊的狀
for(var a:int=0; a<newBits.length; a++)
{
//這是用來檢查是否將達小時列的6，記住小時列只有5個方塊。
if((a!=6)||(target!=”H”))
{
//如果為0，獲取實例名稱，例如 首先是”S0″，然后是 “S1″
if(newBits[a]==0) this.getChildByName(target+String(a)).alpha=.2;
//如果為1，將其 alpha值設(shè)為 1 (啟動)
else this.getChildByName(target+String(a)).alpha=1;
}
}
}
一些對Main()函數(shù)和setTime() 函數(shù)的更改：
{
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();</p> turnBits(converter(sec), ‘S’ );
turnBits(converter(min), ‘M’ );
turnBits(converter(hr), ‘H’ );
clock.start();
clock.addEventListener(TimerEvent.TIMER, setTime);
}
private function setTime(e:TimerEvent): void
{
date= new Date();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours(); <p></p> turnBits(converter(sec), ‘S’ );
turnBits(converter(min), ‘M’ );
turnBits(converter(hr), ‘H’ );
}
我們將會看到它能顯示當前的時間。
第二十二步：一些樣式這就是 TweenMax要用到的地方。我們將添加光使時鐘更加美觀。按下面所示修改turnBits()函數(shù)。
{
for(var a:int=0;a<newBits.length;a++)
{
if((a!=6)||(target!=”H”))
{
if(newBits[a]==0) TweenMax.to(this.getChildByName(target+String(a)), 1, {glowFilter:{color:0×00cbff, alpha:0, blurX:15, blurY:15,strength:1},alpha:.1});
else TweenMax.to(this.getChildByName(target+String(a)), 1, {glowFilter:{color:0×00cbff, alpha:1, blurX:20, blurY:20,strength:.8},alpha:1});
}
}
}
這樣就成功完成了這個教程。
總結(jié)現(xiàn)在我們有了一個引人注目的時鐘，我們可以將它作為背景時鐘，或?qū)⑵涮砑拥骄W(wǎng)頁中。希望這篇Flash制作非?？岬亩M制時鐘動畫對大家有所幫助！
相關(guān)文章
flash如何做雨滴下落的動畫效果? Flash8做一個下雨效果的技巧
flash如何做雨滴下落的動畫效果？想要做一個逼真的雨滴落下的效果，該怎么做雨滴落下水花擴散的效果呢？下面我們就來看看Flash8做一個下雨效果的技巧2022-08-18
flash理發(fā)店旋轉(zhuǎn)彩燈動畫效果怎么做? 理發(fā)店旋轉(zhuǎn)燈制作技巧
flash理發(fā)店旋轉(zhuǎn)彩燈動畫效果怎么做？經(jīng)常使用flash制作動畫效果，該怎么制作旋轉(zhuǎn)燈效果，下面我們就來看看理發(fā)店旋轉(zhuǎn)燈制作技巧，詳細請看下文介紹2022-07-23
flash怎么把形狀變成文字? flash星星變文字動畫的實現(xiàn)方法
flash怎么把形狀變成文字？flash繪制的星星想要慢慢變成文字，該怎么將圖形變文字呢？下面我們就來看看flash星星變文字動畫的實現(xiàn)方法，詳細請看下文介紹2022-06-06
flash怎么制作補間動畫? flash變形動畫的實現(xiàn)方法
flash怎么制作補間動畫？flash中想要制作形狀變化的動畫效果，該怎么制作補間動畫呢？下面我們就來就來看看flash變形動畫的實現(xiàn)方法2022-02-06
FLASH怎么讓搖曳的荷花更逼著? flash制作風(fēng)吹荷花動畫的技巧
FLASH怎么讓搖曳的荷花更逼？flash中想要制作風(fēng)吹荷花的動畫熊愛國，該怎么制作這個效果呢？下面我們就來看看flash制作風(fēng)吹荷花動畫的技巧2022-02-06
flash怎么制作荷花在荷花池里搖擺的動畫? FLASH做擺動荷花的技巧
flash怎么制作荷花在荷花池里搖擺的動畫?？flash中想要制作荷花搖擺的動畫，該怎么制作荷花搖曳的動畫呢？下面我們就來看看FLASH做擺動荷花的技巧2022-02-06
flash怎么做徑向彩虹文字動畫? 文字添加彩虹動畫效果的技巧
flash怎么做徑向彩虹文字動畫？flash椎間盤買個輸入的文字，想要添加動畫效果，該怎么添加徑向彩虹文字效果呢？下面我們就來看看flash文字添加彩虹動畫效果的技巧，詳細請2021-11-09
flash怎么做眨眼動畫效果? flash動漫人物眨眼動畫的做法
flash怎么做眨眼動畫效果？flash中想要制作一個動漫人物的眼睛眨眼動畫，該怎么制作呢？下面我們就來看看flash動漫人物眨眼動畫的做法2021-11-08
flash怎么制作火焰文字效果? flash做火焰字體動畫的技巧
flash怎么制作火焰文字效果？flash中想要制作一個熊熊燃燒的活顏文字，該怎么制作這個文字效果呢？下面我們就來看看flash做火焰字體動畫的技巧2021-11-01
flash怎么做文字動畫logo? 閃動的片頭動畫flash的實現(xiàn)方法
flash怎么做文字動畫logo？flash中想要制作一個文字logo的動畫，讓文字閃爍，該怎么制作這個效果呢？下面我們就來看看flash制作文字動畫的技巧2021-10-29
