flash怎么制作翻牌动画效果? flash数字翻牌动画的制作方法

admin 媒体动画 2022-02-20 23:05:16 3D设计 flash 翻牌动画"

想要使用flash制作一个动画版的翻页倒计时，该怎么制作这个翻牌效果的动画呢？下面我们就来看看详细的教程。

adobe Flash CS6简体中文版(专业动画软件) v12.0.0.481 绿色精简版

查看详情

一、元件准备

1、因此篇稍有难度，不建议完全没经验的朋友学习，为加快速度有些图就省略了。首先打开Flash cs6,新建Actionscript3.0文件（注意不是actionscript3.0类文件）。

2、选择矩形工具，设置颜色为灰黑色，设置其圆角为8，然后在场景中绘制一个适当大小的长方形。如图所示：

3、选择文字工具，在文字属性里选择一种较粗的字体，并设置文字颜色为白色，然后在刚绘制的灰黑色方块上方输入数字“0”。通过改变字号和使用变形工具调整好数字大小，效果如图：

4、选择第一帧，然后连续按下F6键，在第1帧后插入9个关键帧，然后分别将第1帧至第10帧上的数字改为9－0，并调整各个数字与背景的居中

注意：此处为什么不是0－9，主要是因为做的是倒计时，牌子要从9翻到0。

5、点击编辑多个帧按钮，然后在时间轴上调整编辑多帧按钮句柄，使其包含所有帧，具体如图：

6、在时间轴上选择所有帧，选择对齐工具，使所有图形垂直居中对齐，然后按ctrl+B操作，将所有图形全部打散，然后选择直线工具，设置直线颜色为红色，在场景中画一条水平直线，并使水平直线垂直居中对齐。从视图中打开标尺工具，在Y方向拖一条参考线，使之与红线重合，然后将红线删除。

7、选择参考线一上部分按向上箭头向上移动三下，然后选择下半部分向下移动三下，此时形成如下图形：

8、关闭编辑多帧按钮，选择第一帧上半部分按F8键将其转为影片剪辑，起元件名为9s（9的上半部分），然后将下半部分选择按F8键转为影片剪辑，起元件名为9x (9的下半部分)，使用同样的方法将后面9个帧的上半部分和下半部分分别转为影片剪辑并起便于识别的元件名。具体如图：（可以看到在库里已经产生了20个元件，分别是10个数字的上半部分和下半部分）本节就介绍到这里，下节将都大家如何制作翻牌效果。

二、翻牌动画

接着第一步，第二步我们将9－0做数字翻牌效果，然后做好编程前的相关准备。下图是将要实现的效果。

1、在第一步原来的数字牌上新建一层，命名为“9x”，在其上再新建一层，命名为“9s”，然后选择9s影片剪辑按ctrl+x将其剪切，在“9s”层按ctrl+shift+v将其粘贴入场景。同样的方法将9x影片剪辑粘贴在“9x”层中。并选择图层一的所有针将其向后拖动一段，使其不影响对上面两层的操作。如图所示：

2、按上步的方法分别建立8s和8x两个层，并从图层1中将8s,8x两个影片剪辑分别ctrl+shift+v粘贴入8s和8x两个层中，并将各帧长度调整到如图所示！

3、选择9x层第一帧上的影片剪辑，然后按Q键显示调整框，将其中心点移动到参考线所在位置

4、然后选择9s第一帧点右键－创建补间动画（这里注意要选最上面一个），然后在第5帧处点右键－插入关键帧－旋转（这里注意下图有一种错误，我把帧选择在了第15帧，应该是第5帧，后面的会改正）。

5、在9s层选择第5帧，然后选择3d旋转工具，将9s从上向下旋转至刚好消失。

6、选择8x层第一个关键帧，按Q键显示调整框，将中心点移动到参考线上，然后在第一帧上点右键－创建补间动画，如图所示：

7、选择8x层的第10帧，点右键－插入关键帧－旋转，如图

8、选择8x层第一个关键帧，然后选择3d旋转工具，在图上将8x向上旋转到刚好消失。如图一所示，然后选择后面的关键帧将其转到最下方，如图2所示：

9、到这里我们播放前10帧就已经实现了从数字9向数字8过渡的动画。其中1－5帧实现的是9的上半部分从上向下旋转到中间消失然后8的下半部分接差从中间向下旋转，整个过程连接起来就实现了我们想要的效果。最后要做的就是将9s层第6帧以后的帧删除，如图：

10、以同样的方法把影片剪辑7x，7s放到新建的7x,7s层中，并调整各层的长度如图：

其中8s层模仿前面的9s层的做法，7x层模仿前面的8x层的做法，就可以做出从8到7的翻牌效果。因为后面的都是重复性操作，基本都是按9到8变化的方法制作，所以本节就讲到这里，愿意做的朋友可以自己按前面的方法把从8一直到0的翻牌效果做一下。下一节将对程序控制进行讲解。

三、场景布局

第二步我们制作了数字9到数字8的翻页效果，用同样的方法可以做出8－0的翻页效果，第三步，主要是对做好的9－0翻页效果进行简单处理，并进行编程控制。

1、接上第二步，按相同方法制作了8－0的数字翻牌，最终的结果如图所示，选择所有帧点右键剪切所有帧，然后按Ctrl+F8新建一个影片剪辑命名为m_mc2，然后确定，选择这个影片剪辑第一帧点右键将所有帧粘入。此时我们就有了一个翻牌的影片剪辑m_mc2，这里注意这个名字是元件名，不是实例名。

2、做倒计时大家应该知道，十位上一般是5－0，个位上9－0，刚我们做的那个是9－0的翻牌剪辑，所以还要做一个5－0的翻牌效果，这个基本不需要重新去做，ctrl+L键打开库，选择刚做好的影片剪辑m_mc2，在其上点右键－选择直接复制，在弹出的直接复制元件对话框中给影片剪辑起名为m_mc1，如图所示：

3、打开m_mc1影片剪辑，将9－6数字全部删除，然后对各图层按上节讲的方法进行简单处理，既做好5－0的翻牌效果，如图所示：

4、打开m_mc2影片剪辑，在最上面新建一层，用来加帧标签和控制代码：

在每一个翻牌动画开始的那一帧插入空白关键帧，然后选择所在帧为所在帧加帧标签p8-p0

其意义就是从p8开始播放9－8的动画，从p7开始8－7的动画，依此类推。加完标签后，因为每个动画播完之后不会停止，会继续向下播放，所以要在每个标签前面的一帧加入一句代码stop();最终加完代码和标签效果如下图。

5、以同样的方法给m_mc1加入标签和代码，如图所示：

6、以上我们制作完分钟的十位和个位，下面要制作秒的十位和个位，方法很简单，在库里选择m_mc1剪辑并在其上点右键选择"直接复制"(这里注意不是复制，是直接复制)，给元件起名为s_mc1。然后用同样的方法将m_mc2直接复制一个影片剪辑起名为s_mc2。这样库里就有了表示分钟和秒数的四个影片剪辑。

设计场景

1、根据需要对场景大小进行修改。

2、从库中依次拖入m_mc1,m_mc2,s_mc1,s_mc2四个影片剪辑到场景中，放在如下图红色箭头所指位置。

3、制作并添加重量按钮和播放按钮，放在上图红色圆圈所示位置。并在每个数字牌下面制作四个向下简单的按钮，后面用来设置开始计时时间。到此前期准备工作完毕。下节开始讲解相关代码。

四、编写代码

1、为元件添加实例名

代码控制元件，首先要有实例名才能控制。所以第一步就是给场景中的各个元件加实例名，具体如图：

用FLash制作漂亮的翻页倒计时：[4]编写代码

2、添加代码

1）在最上层新建一层做为代码层，然后选择第一帧按F9打开代码编辑器。

加入以下内容：（一般情况下在输入相应事件时软件会自动加入）

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

这些内容主要是提供相应类库。

2）设置初始状态各个变量：

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毫秒（一秒）执行一次。

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）加入鼠标按下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，依此类推在每个翻牌结束是为m1赋值。

用同样的方法在m_mc2里为m2赋值，在s_mc1里为s1赋值，在s_mc2里为s2赋值。然后保存文件，所有动画完成。