Flash MX 精彩实例动画片的制作.docx

Flash MX 精彩实例动画片的制作.docx

《Flash MX 精彩实例动画片的制作.docx》由会员分享，可在线阅读，更多相关《Flash MX 精彩实例动画片的制作.docx（19页珍藏版）》请在冰豆网上搜索。

FlashMX精彩实例动画片的制作

后裔射日

1．实例说明

这是一个动画短片巨作，由近两百个符号，22个场景组成。

每个人都有自己的梦境，自己的幻想，当你有用视觉来表现她，实现她的冲动时，FLASH无疑是一个最佳选择。

当制作动画时，它打破了高资本，多人员的动画制作模式，使你在家就能构建属于自己的梦想王国——有想法就行，很酷吧？

！

下面让就让我们尝试着做一个动画短片。

1．1资料收集

先确定动画的题材，中国古老神话怎么样？

那就做个后裔射日的故事吧。

不错，就是它了……

然后到图书馆，书店去收集有关后裔射日的图案资料，文字资料与音乐资料，（这是一个必要过程哦，它是一个形象化的过程同时也会加深自己对完成这段动画的信心）。

然后进行整理……

1．2人物，场景设定

当资料完备后，人物和场景在脑中也应该有个初步印象了，这时你就可以找张纸，把想好的人物和场景画下来。

我们这次作的是后裔射日，所以基本上人物就两个，.后羿和金鸦，（当然你也可以直接用FLASH画）。

1．3分镜头

FLASH中有SCENE的概念，其实这在制作动画短片时很重要。

一部短片可以分为若干个镜头，当衔接起来时，就是一个完整动画。

（在FLASH中，可以通过INSERT——SCENE，来实现）。

《后裔射日》大约有22个SCENE。

大致是1.LOADING画面及开头、2.太阳升出海面、3.太阳肆虐…………21。

射日22.结尾。

当想好如何分镜头了，你可以先把他画下来。

1．4制作过程

一．LOADING画面

1.当上述过程都完成了，就可以正式制作了。

先新建文件（File>New）调整尺寸（Modify>Document）至550pxX300px。

2.但这时画面是很空无一物的。

我们如何下手呢？

我们想让观众在看LOADING画面时就对整个动画有一个大致的认识。

所以我们先来进行《后裔射日》的第二主人公—太阳的制作（传说中以前太阳是天帝的儿子，他们是十兄弟，并且平时是以三只金色乌鸦的形象）。

有了先前这些资料，我们就可以着手进行太阳的制作。

（Insert>NewSymbol>Graphic），取名“太阳底图”，画上太阳图案，如图1-1所示。

不过光秃秃的太阳是显然没有人气，我们加上火焰吧。

图1-1太阳底图

再次（Insert>NewSymbol）选择Moveclip取名“火焰00”，制作远动着的火焰动画，这必须作逐祯动画，即在1-9祯分别按F7插入空帧，在每祯分别中画入如图1-2的火焰图案。

第1祯第2祯第3祯第4祯第5祯第6祯第7祯第8祯第9祯

图1-2火焰

这样就完成了一个连续的火焰动画。

然后用同样的方法再画出几个不同的火焰，分别命名成“火焰01”，“火焰02”……（这样放上几个不同火焰Moveclip，会使画面看上不呆滞的）

接着我们在图案的中心部分加上金鸦拍打翅膀的动画

同样作一个Moveclip取名“金鸦”，再用逐祯动画的方法完成太阳中心“金鸦”拍打翅膀的动画（具体动画参考源文件）。

现在可以合成这个燃烧的太阳了（Insert>NewSymbol）选择Moveclip，取名“太阳”连续点击

两次，新增Layer2层，Layer3层。

在Layer1层中调入“太阳底图”，在Layer2层中调入“火焰00”，“火焰01”“火焰02”（并多复制几个，使其以大小不同，错落有秩地围绕太阳底图排列），在Layer3层中调入“金鸦”，如图20.1-3所示。

这样一个燃烧着的太阳就诞生了，是不是很棒啊？

随后我们把它放入场景中。

点击

进入Scene1,点击

新建一层，调入Moveclip“太阳”。

现在可以导出看一下效果。

一个熊熊燃烧，并带有一只扑腾的乌鸦的太阳出现在我们眼前。

不错，还算符合想象中的形象，让我们提起精神接着做下去。

图1-3太阳

5．然后我们来制作LOADING读取槽

我们想制作一个象格斗游戏中能量槽似的读取槽。

使在网上下载动画时读取槽会随着下载程度漫漫变满。

好，Let’sgo

（Insert>NewSymbol>Graphic）取名“长方形”,画入一个30X18的白色长方形。

.再次（Insert>NewSymbol>MovieClip）取名“读取槽”，点击

新建一层,在Layer1和Layer2中分别调入读取条，调整他们的宽度使Layer1中的长方形的宽为2px.。

使Layer2中的长方形宽为325px。

（CtrlA）全选他们，（CtrlK打开Align窗口）点击

与

使其如图20.1-4排列（此时的背景色为

色）。

图1-4读取条

Layer1在第8祯时按F5,Layer2在1到8祯分别按（F6插入关键祯）然后调整Layer2中长方形的宽度使其逐祯递增，在第8祯时的宽度与Layer1中的长方形相等，即为325px。

（此时读取槽为满）。

在每一祯中设置“STOP”语句（Action>moviecontral>stop）

Scene1中新建一蹭，把“读取槽”调入，选中它，使他的InstanceName为“a”（Properties>InstanceName中输入）这样我们就可以用tellTarget语句来调用他了。

然后就可以用IfFrameisLoaded和tellTarget语句实现LOADING功能。

新建一层，在第1祯输入

ifFrameLoaded（"Scene3",25）{

tellTarget（"/a"）{

gotoAndStop

（1）;

}

gotoAndPlay（3）;

}

在第2祯按下F7后输入gotoAndPlay

（1）;,使语句循环~

同理在第3祯按下F7后输入

ifFrameLoaded（"Scene5",35）{

tellTarget（"/a"）{

gotoAndStop

（2）;

}

gotoAndPlay（9）;

}

在第4祯按下F7后输入gotoAndPlay（3）;,………………

由于读取“读取槽”一共有8祯，所以按照上述方法，最终在第15祯中输入

ifFrameLoaded（"Scene23",60）{

tellTarget（"/a"）{

gotoAndStop（8）;

}

gotoAndPlay（"Scene2",1）;

}

最后的gotoAndPlay（"Scene2",1）;是结束LOADING画面，进入下一个Scene。

好了action设置完毕，然后我们可以在读取槽旁边加上“LOADING”字样。

接着在Layer1拉一个550pxX300px的

色的长方形做为底色。

为了使画面颜色更丰富，（Insert>NewSymbol），画一个R：

245G：

124B：

3ALPHA：

40%的圆。

再选择（Insert>NewSymbol）把刚才的圆调入，组成一个11X32的圆圈方阵。

把方阵调入SCENE1Layer2上。

这样就完成了整个LOADING画面的制作，如图1-5所示

图1-5

二．开头字幕

当LOADING完后，动画开始之前我们想制做一个带着光效的开头字幕。

即跳出现“后裔射日”这四个字，然后再出现类似3DMAX体积光运动的效果，.如图1-6所示

图1-6

三．背景动画

由于动画制作技术大同小，主要是一些技巧及创意，以下20个场景省略，请发挥想象……。

从前有座山

实例说明

制作一本可以翻页的书，讲述一个古老的故事。

有关知识

隐形按钮，tellTarget的应用，对象的缩放、变形及中心点编辑，关键帧动画等。

制作过程

步骤1：

打开flashMX，按Ctrl+M，在电影属性对话框设置播放速度：

18fps；大小：

450px*300px；背景颜色：

白色。

步骤2：

从菜单栏中选择插入>添加符号（Insert>NewSymbol），在出现的对话框中选图像（Graphic），命名为cover，用绘图工具在舞台画一本书的封面，左上角对齐舞台的中心点，如图1所示。

图1制作图书封面

步骤3：

制作书的内页。

新建图像符号page，用矩形工具绘制大小和cover相等的矩形，左上角对齐舞台的中心点。

步骤4：

新建隐形按钮button，选取Hit帧，按F6插入一个关键帧，在舞台用矩形工具画一长方形，如图2所示。

图2制作隐形按钮

步骤5：

新建电影片断pages，新建book层，将第1帧设为空白帧（blankkeyframe），Actions设置为停止（stop）。

在第2帧处按F7插入空关键帧，将图像cover放置在舞台内，左上角和舞台中心点对齐。

在第3帧处按F7插入空关键帧，将图像page放置在舞台内，并和图像cover对齐。

在第8帧按F5插入帧，使book层的帧长度为8帧，如图3所示。

图3制作层book，对齐中心点

步骤6：

新建button&page层，放置在book层上面，同样将第1帧设为空白帧，在第2帧处插入关键帧，将隐形按钮button放置在层中，并利用缩放工具将按钮大小拉伸为和cover同样大小并覆盖在cover上方。

在3，4，5，6，7，8帧处分别建立关键帧，用文字工具写上书的页数1，2，3，4，5，6。

如图4所示。

图4给电影加上隐形按钮和页数

步骤7：

新建text层和pagebutton层，其中text层加入文字，而pagebutton层放入对应的按钮。

在第4、第5帧处建立关键帧，制作书本的向后翻页按钮next；在第5、第7帧处建立关键帧，制作书本的向前翻页按钮pre；在第8帧处建立按钮close，作用是当按下此按钮，书本关上，返回到初始状态。

如图5所示。

图5建立关闭书本按钮

步骤8：

新建电影片断book，帧长度为37帧。

增加cover层，将图像cover放置在舞台内，左上角和舞台中心点对齐。

第2至37帧为空白帧。

如图6所示。

步骤9：

新建rightflip层，将电影片断pages放置在舞台内，和舞台中心点对齐。

在属性面板将其命名为rightflip。

如图6所示。

图6rightflip的位置

提示：

因为电影片断pages第一帧为空白帧，所以在舞台上只能看到一个小空心圆。

步骤10：

在rightflip层下新建leftpage层。

将电影片断pages放置在舞台内，并在Instance面板将其命名为leftpage，如图7所示。

图7放置rightpage

提示：

leftpage水平方向和rightflip平行，并相距一本书的距离。

也就是当这本书打开以后，左边的效果要由leftpage完成，所以位置一定要放好.。

步骤11：

在rightflip层上方新建leftflip层。

将电影片断pages放置在舞台内，和rightflip对齐，并将其命名为leftflip，这个层主要是用来表现翻页效果。

提示：

因为电影片断pages第一帧是空白帧，表现在层中是一个小空心圆，效果很不直观，这时如果先将pages的第1帧删除，就能更直观的调整效果了（光盘中的d.fla为已删除第1帧的源程序），当然在做好电影片断book后，别忘了再将第1帧还原为空白帧。

如图8所示。

图8好象两本书并排，效果更直观

选中第2帧、第9帧，按F6将其分别设为关键帧。

在Transform面板，将第9帧处的pages的水平缩放设置为85%，垂直变形设置为-85，如图9所示。

图9设置变形

在第10帧建立空关键帧，将电影片断pages放置在舞台上，水平方向和第2帧对齐，垂直方向在第2帧的左边一本书的距离，选择修改>变形>编辑中心点（Modify>Transform>Editcenter）命令，将pages的中心点移至右上角，如图10所示。

图10编辑中心点

选中第18，19，20，29帧，按F6建立关键帧。

将第10，第29帧处pages的Transform设置为：

水平缩放85%；垂直变形85。

如图11所示。

图11设置Trnsform

将第19帧的pages拖放在舞台外。

拷贝第9帧至30帧；拷贝第2帧至36帧;拷贝第19帧至37帧。

第36帧处pages的Transform设置为：

水平缩放95%；.垂直变形-10。

在Frame面板中，将第2至9，10至18，20至29，30至36帧的渐变设置为移动（Motion），如图12所示。

图12产生移动渐变

新建Actions层，在第1，2，10，18，19，20，29，37帧处建立关键帧，并分别设置其Actions：

第1帧：

stop（）;

tellTarget（"rightflip"）{

nextFrame（）;

}

停止

告知目标（“rightflip”）

跳至下一帧

第2帧：

tellTarget（"rightflip"）{

nextFrame（）;

}

tellTarget（"rightflip"）{

nextFrame（）;

}

tellTarget（"leftflip"）{

nextFrame（）;

}

告知目标（“rightflip”）

跳至下一帧

告知目标（“rightflip”）

跳至下一帧

告知目标（“leftflip”）

跳至下一帧

第10帧：

tellTarget（"leftflip"）{

nextFrame（）;

}

告知目标（“leftflip”）

跳至下一帧

第18帧：

tellTarget（"leftpage"）{

nextFrame（）;

}

tellTarget（"leftpage"）{

nextFrame（）;

}

告知目标（“leftpage”）

跳至下一帧

告知目标（“leftpage”）

跳至下一帧

第19帧：

stop（）;

停止

第20帧：

tellTarget（"leftpage"）{

prevFrame（）;

}

tellTarget（"leftpage"）{

prevFrame（）;

}

告知目标（“leftpage”）

跳至上一帧

告知目标（“leftpage”）

跳至上一帧

第29帧：

tellTarget（"leftflip"）{

prevFrame（）;

}

告知目标（“leftflip”）

跳至上一帧

第37帧：

tellTarget（"leftflip"）{

prevFrame（）;

}

stop（）;

tellTarget（"rightflip"）{

prevFrame（）;

}

tellTarget（"rightflip"）{

prevFrame（）;

}

告知目标（“leftflip”）

跳至上一帧

停止

告知目标（“rightflip”）

跳至上一帧

告知目标（“rightflip”）

跳至上一帧

步骤12：

回到电影片断pages，在层button&page的第2帧处，将按钮button的Actions设置为：

on（release）{

tellTarget（".."）{

gotoAndPlay

（2）;

}

}

当鼠标放开

告知目标（“..”）

跳至并播放帧

（2）

提示：

因在电影片断book中使用pages，所以告知目标（“..”）表示告知电影片断book。

步骤13：

在pagebutton层，分别设置按钮的Actions。

第3帧按钮next的Actions：

on（release）{

tellTarget（".."）{

gotoAndPlay

（2）;

}

}

当鼠标放开

告知目标（“..”）

跳至并播放帧2

第4帧按钮pre的Actions：

on（release）{

tellTarget（".."）{

gotoAndPlay（20）;

}

}

当鼠标放开

告知目标（“..”）

跳至并播放帧20

第5帧按钮next的Actions：

on（release）{

tellTarget（".."）{

gotoAndPlay

（2）;

}

}

当鼠标放开

告知目标（“..”）

跳至并播放帧2

第6帧按钮pre的Actions：

on（release）{

tellTarget（".."）{

gotoAndPlay（20）;

}

}

当鼠标放开

告知目标（“..”）

跳至并播放帧20

第7帧按钮close的Actions：

on（release）{

tellTarget（"../leftpage"）{

gotoAndStop

（1）;

}

tellTarget（"../leftflip"）{

gotoAndStop

（2）;

}

tellTarget（"../rightflip"）{

gotoAndStop（4）;

}

tellTarget（".."）{

gotoAndPlay（32）;

}

}

当鼠标放开

告知目标（“../leftpage”）

跳至并停止帧1

告知目标（“../leftflip”）

跳至并停止帧2

告知目标（“../rightflip”）

跳至并停止帧4

告知目标（“..”）

跳至并播放帧32

这样，当按下按钮next时产生向后翻页动作；当按下按钮pre时，产生向前翻页动作；按下按钮close时，回到初始状态。

步骤14：

回到场景中，将电影片断book放置在场景中，摆放好位置，.如图13所示。

图13将电影片断拖入场景

步骤15：

现在可以按Ctrl+Enter测试效果，如图14所示。

图14点击即可演示效果

当然输出效果是在内页里是添加了一些图形后的形成的，可以在电影片断pages中另放一些画面，以表达一个完整的故事，页数也可以设定。