大三时写的教程(6)~飘动的旗帜

      创造另一个世界 2004-10-8 9:53
本例的效果图如下,按右上角的按钮可以切换旗帜。

怎么样,还不错吧,这可是在FLASH中动态生成的。现在我们就来看看如何利用FLASH强大的功能生成这一效果。
一 准备元件
这个效果看起来复杂,其实用到的元件其实并不多。
1.新建一个图形元件“graphic”。准备一张国旗的图片,将其导入其中(没有国旗的图片就拿其它图片凑和一下罢)。
2.新建一个影片元件“move”。将刚才做好的“graphic”拖放到其中,记下“graphic”的高度height和宽度width ;在影片中新建一个遮蔽层“mask”(让刚才的层成为被遮蔽层),在正中心用矩形工具画一个矩形,其宽和高分别取width/n,height,n可以随便取。在我的影片中n取为40(记住你现在选择的n,以后还要用到噢)。调节“graphic”元件的位置,使其左侧边缘与矩形的左侧边缘对齐,在高的方向上重合。在第n帧新建关键帧,将“graphic”位置移到右侧边缘与矩形的右侧边缘对齐,生成动画(如下图)。

3.新建影片元件“flagmovie”,将刚做好的“move”拖放至其中,然后做一个“move”上下摆动及亮度改变的动画。共五个关键帧,现将每个关键帧的“move”Y坐标和影片亮度值作为参考写出如下(X坐标不变):-100,0%;-120,25%;-100,0%; -80,-25%;-100,0%。为了让最后旗帜飘动的效果更好,我们可以利用“扩大值”制造一些加速度(如图)。

点击两个关键帧之间的任何一帧,我们就可以在“属性”中调整这一段动画的“扩大值”了。下面是这个动画四段的四个“扩大值”,列出以供参考:100,-100,100,-100
(“扩大值”为正:慢慢地开始补间动画,并朝着动画的结束方向加速补间。“扩大值”为负:快速地开始补间动画,并朝着动画的结束方向减速补间。)
二.写ACTION SCRIPT,做出最后效果。
请先退出元件编辑状态,回到整个影片的编辑。
1.点击影片的第一帧,写入以下代码:
//变量初始化
x=20;
maskwidth=8; //作第二个元件时用来作遮蔽的矩形的宽
maskcount=40; //即你所取的n的值
count=1;
2.在第二帧新建一个关键帧,将“flagmovie”拖放至影片的非显示区域,更改其“instance”值为“flagmovie”,并写入以下代码:
if (count
好了,整个影片就全部完成了。原理简述如下:作第二个元件“move”时,我们通过生成一个旗帜移动的动画,实际上在这个动画的每一帧得到了旗帜的一个切片,这些切片摆在一起就可以形成一个完整的旗帜。做第三个元件“flagmovie”时,我们给了这些切片一个摆动的动画,最后通过Action Script将这些切片摆在影片中,就形成了一面完整的旗帜。而且由于这些旗帜切片的生成时间依次落后两帧,所以运动也依次比前一个切片落后两帧,最后整体就形成了飘动的效果。而“flagmovie”中亮度改变的动画是为了最后影片中飘到上方的旗帜部分发亮的效果。至于切换旗帜的实现,请参看影片的源文件。

点击下载
影片的源文件。
标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}