想要使用flash制作一個動畫版的翻頁倒計時，該怎么制作這個翻牌效果的動畫呢？下面我們就來看看詳細的教程。

adobe Flash CS6簡體中文版(專業(yè)動畫軟件) v12.0.0.481 綠色精簡版

• 類型：動畫制作
• 大?。?/span>176MB
• 語言：簡體中文
• 時間：2018-11-12

查看詳情

一、元件準備

1、因此篇稍有難度，不建議完全沒經(jīng)驗的朋友學(xué)習(xí)，為加快速度有些圖就省略了。首先 打開Flash cs6,新建Actionscript3.0文件（注意不是actionscript3.0類文件）。

2、選擇矩形工具，設(shè)置顏色為灰黑色，設(shè)置其圓角為8，然后在場景中繪制一個適當(dāng)大小的長方形。如圖所示：

3、選擇文字工具，在文字屬性里選擇一種較粗的字體，并設(shè)置文字顏色為白色，然后在剛繪制的灰黑色方塊上方輸入數(shù)字“0”。通過改變字號和使用變形工具調(diào)整好數(shù)字大小，效果如圖：

4、選擇第一幀，然后連續(xù)按下F6鍵，在第1幀后插入9個關(guān)鍵幀，然后分別將第1幀至第10幀上的數(shù)字改為9－0，并調(diào)整各個數(shù)字與背景的居中

注意：此處為什么不是0－9，主要是因為做的是倒計時，牌子要從9翻到0。

5、點擊編輯多個幀按鈕，然后在時間軸上調(diào)整編輯多幀按鈕句柄，使其包含所有幀，具體如圖：

6、在時間軸上選擇所有幀，選擇對齊工具，使所有圖形垂直居中對齊，然后按ctrl+B操作，將所有圖形全部打散，然后選擇直線工具，設(shè)置直線顏色為紅色，在場景中畫一條水平直線，并使水平直線垂直居中對齊。從視圖中打開標(biāo)尺工具，在Y方向拖一條參考線，使之與紅線重合，然后將紅線刪除。

7、選擇參考線一上部分按向上箭頭向上移動三下，然后選擇下半部分向下移動三下，此時形成如下圖形：

8、關(guān)閉編輯多幀按鈕，選擇第一幀上半部分按F8鍵將其轉(zhuǎn)為影片剪輯，起元件名為9s（9的上半部分），然后將下半部分選擇按F8鍵轉(zhuǎn)為影片剪輯，起元件名為9x (9的下半部分)，使用同樣的方法將后面9個幀的上半部分和下半部分分別轉(zhuǎn)為影片剪輯并起便于識別的元件名。具體如圖：（可以看到在庫里已經(jīng)產(chǎn)生了20個元件，分別是10個數(shù)字的上半部分和下半部分）本節(jié)就介紹到這里，下節(jié)將都大家如何制作翻牌效果。

二、翻牌動畫

接著第一步，第二步我們將9－0做數(shù)字翻牌效果，然后做好編程前的相關(guān)準備。 下圖是將要實現(xiàn)的效果。

1、在第一步原來的數(shù)字牌上新建一層，命名為“9x”，在其上再新建一層，命名為“9s”，然后選擇9s影片剪輯按ctrl+x將其剪切，在“9s”層按ctrl+shift+v將其粘貼入場景。同樣的方法將9x影片剪輯粘貼在“9x”層中。并選擇圖層一的所有針將其向后拖動一段，使其不影響對上面兩層的操作。如圖所示：

2、按上步的方法分別建立8s和8x兩個層，并從圖層1中將8s,8x兩個影片剪輯分別ctrl+shift+v粘貼入8s和8x兩個層中，并將各幀長度調(diào)整到如圖所示！

3、選擇9x層第一幀上的影片剪輯，然后按Q鍵顯示調(diào)整框，將其中心點移動到參考線所在位置

4、然后選擇9s第一幀點右鍵－創(chuàng)建補間動畫（這里注意要選最上面一個），然后在第5幀處點右鍵－插入關(guān)鍵幀－旋轉(zhuǎn)（這里注意下圖有一種錯誤，我把幀選擇在了第15幀，應(yīng)該是第5幀，后面的會改正）。

5、在9s層選擇第5幀，然后選擇3d旋轉(zhuǎn)工具，將9s從上向下旋轉(zhuǎn)至剛好消失。

6、選擇8x層第一個關(guān)鍵幀，按Q鍵顯示調(diào)整框，將中心點移動到參考線上，然后在第一幀上點右鍵－創(chuàng)建補間動畫，如圖所示：

7、選擇8x層的第10幀，點右鍵－插入關(guān)鍵幀－旋轉(zhuǎn)，如圖

8、選擇8x層第一個關(guān)鍵幀，然后選擇3d旋轉(zhuǎn)工具，在圖上將8x向上旋轉(zhuǎn)到剛好消失。如圖一所示，然后選擇后面的關(guān)鍵幀將其轉(zhuǎn)到最下方，如圖2所示：

9、到這里我們播放前10幀就已經(jīng)實現(xiàn)了從數(shù)字9向數(shù)字8過渡的動畫。其中1－5幀實現(xiàn)的是9的上半部分從上向下旋轉(zhuǎn)到中間消失然后8的下半部分接差從中間向下旋轉(zhuǎn)，整個過程連接起來就實現(xiàn)了我們想要的效果。最后要做的就是將9s層第6幀以后的幀刪除，如圖：

10、以同樣的方法把影片剪輯7x，7s放到新建的7x,7s層中，并調(diào)整各層的長度如圖：

其中8s層模仿前面的9s層的做法，7x層模仿前面的8x層的做法，就可以做出從8到7的翻牌效果。因為后面的都是重復(fù)性操作，基本都是按9到8變化的方法制作，所以本節(jié)就講到這里，愿意做的朋友可以自己按前面的方法把從8一直到0的翻牌效果做一下。下一節(jié)將對程序控制進行講解。

三、場景布局

第二步我們制作了數(shù)字9到數(shù)字8的翻頁效果，用同樣的方法可以做出8－0的翻頁效果，第三步，主要是對做好的9－0翻頁效果進行簡單處理，并進行編程控制。

1、接上第二步，按相同方法制作了8－0的數(shù)字翻牌，最終的結(jié)果如圖所示，選擇所有幀點右鍵剪切所有幀，然后按Ctrl+F8新建一個影片剪輯命名為m_mc2，然后確定，選擇這個影片剪輯第一幀點右鍵將所有幀粘入。此時我們就有了一個翻牌的影片剪輯m_mc2，這里注意這個名字是元件名，不是實例名。

2、 做倒計時大家應(yīng)該知道，十位上一般是5－0，個位上9－0，剛我們做的那個是9－0的翻牌剪輯，所以還要做一個5－0的翻牌效果，這個基本不需要重新去做，ctrl+L鍵打開庫，選擇剛做好的影片剪輯m_mc2，在其上點右鍵－選擇直接復(fù)制，在彈出的直接復(fù)制元件對話框中給影片剪輯起名為m_mc1，如圖所示：

3、打開m_mc1影片剪輯，將9－6數(shù)字全部刪除，然后對各圖層按上節(jié)講的方法進行簡單處理，既做好5－0的翻牌效果，如圖所示：

4、打開m_mc2影片剪輯，在最上面新建一層，用來加幀標(biāo)簽和控制代碼：

在每一個翻牌動畫開始的那一幀插入空白關(guān)鍵幀，然后選擇所在幀為所在幀加幀標(biāo)簽p8-p0

其意義就是從p8開始播放9－8的動畫，從p7開始8－7的動畫，依此類推。加完標(biāo)簽后，因為每個動畫播完之后不會停止，會繼續(xù)向下播放，所以要在每個標(biāo)簽前面的一幀加入一句代碼stop();最終加完代碼和標(biāo)簽效果如下圖。

5、以同樣的方法給m_mc1加入標(biāo)簽和代碼，如圖所示：

6、以上我們制作完分鐘的十位和個位，下面要制作秒的十位和個位，方法很簡單，在庫里選擇m_mc1剪輯并在其上點右鍵選擇"直接復(fù)制"(這里注意不是復(fù)制，是直接復(fù)制)，給元件起名為s_mc1。然后用同樣的方法將m_mc2直接復(fù)制一個影片剪輯起名為s_mc2。這樣庫里就有了表示分鐘和秒數(shù)的四個影片剪輯。

設(shè)計場景

1、根據(jù)需要對場景大小進行修改。

2、從庫中依次拖入m_mc1,m_mc2,s_mc1,s_mc2四個影片剪輯到場景中，放在如下圖紅色箭頭所指位置。 

3、制作并添加重量按鈕和播放按鈕，放在上圖紅色圓圈所示位置。并在每個數(shù)字牌下面制作四個向下簡單的按鈕，后面用來設(shè)置開始計時時間。到此前期準備工作完畢。下節(jié)開始講解相關(guān)代碼。

四、編寫代碼

1、為元件添加實例名

代碼控制元件，首先要有實例名才能控制。所以第一步就是給場景中的各個元件加實例名，具體如圖：

用FLash制作漂亮的翻頁倒計時：[4]編寫代碼

2、添加代碼

1）在最上層新建一層做為代碼層，然后選擇第一幀按F9打開代碼編輯器。

加入以下內(nèi)容：（一般情況下在輸入相應(yīng)事件時軟件會自動加入）

import flash.utils.Timer;import flash.events.TimerEvent;
import flash.events.MouseEvent;i
mport flash.media.SoundChannel;

這些內(nèi)容主要是提供相應(yīng)類庫。

2）設(shè)置初始狀態(tài)各個變量：

var num:int = 0;
var m1:int = 0;
var m2:int = 0;
var s1:int = 0;
var s2:int = 0;
m_mc1.gotoAndPlay("p0");
m_mc2.gotoAndPlay("p0");
s_mc1.gotoAndPlay("p0");
s_mc2.gotoAndPlay("p0");

3）加入Timer偵聽事件，1000毫秒（一秒）執(zhí)行一次。

var tTimer:Timer = new Timer(1000);
tTimer.addEventListener(TimerEvent.TIMER,ontimer);
function ontimer(e:TimerEvent):void{
if (num>0) {
num--;
sc = mysound.play();
s_mc2.play();
if (s_mc2.currentLabel == "p0") {
s_mc1.play();
}
if (s_mc1.currentLabel == "p0" && s_mc2.currentLabel == "p0") {
m_mc2.play();
}
if (s_mc1.currentLabel == "p0" && s_mc2.currentLabel == "p0" && m_mc2.currentLabel == "p0") {
m_mc1.play();
}
} else {
tTimer.stop();
sc.stop();
}
}

4）加入鼠標(biāo)按下MOUSE_DOWN偵聽事件：

addEventListener(MouseEvent.MOUSE_DOWN,ondown);
function ondown(e:MouseEvent):void{ 
switch (e.target.name) {
  case "p1_btn" : 
  m_mc1.play();
   break; 
 case "p2_btn" :  
 m_mc2.play();   
break; 
 case "p3_btn" :
   s_mc1.play();
   break;
  case "p4_btn" :
   s_mc2.play();
   break;
  case "start_btn" : 
  num = s2 + s1 * 10 + m2 * 60 + m1 * 600; 
  tTimer.start(); 
  break; 
 case "re_btn" : 
  tTimer.stop();
   m_mc1.gotoAndPlay("p0");
   m_mc2.gotoAndPlay("p0");
   s_mc1.gotoAndPlay("p0"); 
  s_mc2.gotoAndPlay("p0"); 
  break;
  default :
   break;
 }
}

在上面的代碼中有四個變量，s1,s2,m1,m2

這四個代碼的變量從哪里得到呢，又要回到m_mc1,m_mc2,s_mc1,s_mc2這四個影片剪輯里去了，我們以m_mc1為例，打開m_mc1這個影片剪輯：

如圖所示，第四個動畫完成時的stop()后加一句MovieClip(root).m1=4;第三個加MovieClip(root).m1=3，依此類推在每個翻牌結(jié)束是為m1賦值。

用同樣的方法在m_mc2里為m2賦值，在s_mc1里為s1賦值，在s_mc2里為s2賦值。然后保存文件，所有動畫完成。

以上就是flash數(shù)字翻牌動畫的制作方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

flash怎么制作不斷變化的數(shù)字動畫?

Flash cs6怎么設(shè)計電子表數(shù)字效果?

flash怎么制作數(shù)字不斷變化的百分比動畫?

最新評論