基于 flash 制作的算法演示动画的设计

基于flash 制作的算法演示动画的设计
/
本文主要介绍基于Flash制作的算法演示动画的设计和制作步骤。

flash应用是十分广泛的,主要原因是制作简单,效果却华丽美观,只需要很少的时间就能制作绚烂的动态效果。

C语言程序中有许多典型算法,例如冒泡排序、选择排序、矩阵转置、函数的运用以及指针的运用等,如果仅仅依靠课堂上文字描述,无法使学生在短时间内理解,通过Flash的动画演示却能够事半功倍。

1.flash动画的交互性动态效果的实现
Flash之所以能够在动画制作占有主导地位,与其所具有的强大的交互功能有密切关系,而这些交互功能的实现离不开ActionScript脚本语言的使用。

ActionScript是Macromedia公司专为Flash设计的交互性脚本语言,是一种面向对象化的编程语言,它提供自定义的函数及强大的数学函数、颜色、声音、XML等对象的支持。

使用Flash中的ActionScript脚本,可以制作高质量的动画效果以及动态网页。

2片头动画的制作
很多课件在进入正式的页面之前都会有一段绚丽花俏的片头,这样很吸引用户的眼球,使用户直接面对主题,产生浏览此课件的冲动。

而且通过片头,用户可以快速而清晰地认识课件的主要内容。

本小节主要介绍算法演示动画的片头的设计构思以及简单步骤。

2.1创意和构思片头制作不像大多MTV或者短片,它不需要细腻的动画,它的特点就是力求简洁、明快、节奏分明,在短短的十几秒内传达出最直接的主题。

如图1所示,本片头采用给人简洁、宁静的浅蓝色和安宁、舒服的浅黄色合成2个相反的字母“C”,再配以圆形放置的蓝色渐变颜色的花瓣一片片地出现绘画成字母“C”,同时在花瓣的左侧不同时间切换出“C程序设计精品课程”字符串,排列组成“C”字样。

接着窗口右侧飞入“算法动画演示”字符串,利用滤镜的模糊到清晰效果渐变显示出来。

动画最后透明渐变显示“点击进入”按钮,点击按钮即可进入“算法动画”的目录。

2.2制作片头动画
1)背景图形。

舞台中背景图形是通过混色器面板创建的放射状渐变填充椭圆,其中颜色中心的偏移是利用“填充变形工具”移动中心得到的。

2个椭圆分别转换为影片剪辑实例,分别放置在2个图层中,图层命名为“大椭圆”和“小椭圆”。

设置其透明度,分别创建30帧的动画补间,使2个图形依次渐变出现在舞台。

2)花瓣。

新建图层命名为“花瓣”,在第60帧上创建关键帧。

使用椭圆工具创建一个椭圆,利用混色器面板设置其放射状渐变填充,使其看起来像一个瘦小的花瓣。

选择椭圆,右键转换为影片剪辑元件并命名为“展开”。

进入元件编辑窗口中,再次选择椭圆,右键转换为影片剪辑元件并命名为“花瓣”。

返回“展开”元件编辑窗口,打开变形面板,选择舞台中的“花瓣”实例,将旋转中心设置在花瓣一侧,同时在旋转选项中填入15度。

单击变形面板中的“复制并应用变形”按钮,得到一圈花瓣。

在舞台空白处右键选择“分散到图层”,将花瓣分别放置在独立的图层,选择所有图层的第一帧,打开属性面板设置“动画”补间。

为选择所有图层的20帧插入关键帧,再次选择所有图层的第一帧,设置其透明度为0%。

选择各个图层的动作补间,依次向后移动5帧。

选择第60帧上的关键帧,打开动作面板写入动作:“Stop();”。

花瓣的展开设置完毕。

3)“C”形字符串。

新建图层命名为“C”,在第90帧上创建关键帧。

使用文本工具在舞台创建“C程序设计精品课程”,右键分离字符串,将其分离为单个字符。

摆放单个字符为一个大写“C”字样,选择所有字符右键转换为影片剪辑元件,命名为“C”。

双击进入元件编辑窗口,分别将字符右键转换为影片剪辑元件,命名为字符名称。

选择所有影片剪辑实例,右键分散到图层。

选择所有图层的第一帧设置动画补间,为所有图层的20帧插入关键帧,再次选择所有图层的第一帧,设置其透明度为0%,依次移动到偏右上的位置。

选择各个图层的动作补间,依次向后移动5帧。

选择第60帧上的关键帧,打开动作面板写入动作:“Stop();”。

为着重显示,将“C”字符的颜色设置为橘红色。

4)“算法演示动画”。

新建图层命名为“标题”,在第150帧上创建关键帧。

使用文本工具在舞台创建“算法演示动画”,设置字体为宋体,将“动画”的字号设置得稍大些。

为文本添加“投影”和”发光”的滤镜效果。

使用模糊滤镜效果设置30帧的动作补间动画。

5)按钮。

新建图层命名为“按钮”,在第180帧上创建关键帧。

新建按钮元件命名为“进入”,按钮没有过多的交互变化,只在“弹起”上写入“点击进入”,并在字样左侧放置一个渐大变化的圆形,为片头增添一些动感。

按钮中动作设置:“On(press){nextScene();}”。

按钮出现在片头的最后一个关键帧上,并在关键帧上设置动作:“Stop();”。

6)精确下载动画(图2)。

Flash动画是流媒体格式的动画,即动画是边下载边播放的,但是由于网络速度的原因,可能在某个时候,动画下载速度较慢,这时就会造成动画的停顿,或者动画中声音与动画不会同步。

为了避免这种情况的发生,笔者制作一个Loading动画,将动画预先载入用户的计算机中,并且通过此Loading动画可以准确地知道动画所有载入的时间和百分比。

新建一个场景命名为Loading,使用场景面板放置在片头动画所在场景之前。

在舞台中创建一个长条矩形放置在舞台中央,右键转换为影片剪辑元件,命名为“进度”。

双击进入元件编辑窗口,将矩形的轮廓线和填充物分别放置在不同的图层。

选择2个图层的第100帧插入普通帧,为矩形的填充物的100帧上创建关键帧。

返回填充物的第一帧创建形状补间,使用橡皮擦擦去矩形填充的右边大部分,只留左侧的一小段。

新建一个图层,为第一帧设置动作:“Stop();”。

返回主场景,在第2帧插入普通帧。

为舞台中的实例命名为“loaded”,新建一个图层,使用文本工具创建一个静态文本,文本内容为“已下载:”一个动态文本,设置足够的文本宽度,在属性面板中设置动态文本的变量名为“shu”。

新建一个图层,为第一帧设置动作:
a=getBytesLoaded();
b=getBytesTotal();
loaded=int(a/b*100);
loader.gotoAndPlay(loaded);
在第二帧上创建关键帧,设置动作:
if(a==b){
gotoAndPlay(“场景1”,1);
}else{
shu=loaded+”%”;
gotoAndPlay(1);
7)背景音乐。

新建图层命名为背景音乐,导入水木年华单曲“借我一生”,利用“编辑封套”对话框截取前奏部分,设置声音类型为数据流,片头动画制作完成。

动画中各个元素都紧扣“C语言”这个主题,文字的飞入、图像的形状变化让片头动感十足,再配以优美舒缓的音乐,使片头内容清晰明朗,突出设计制作的主题。

3冒泡排序算法动画的制作
冒泡算法是C语言中比较重要的算法,像水中冒泡一样,算法思路是将小的、轻的升到上面,将大的、重的沉到水底。

本课程是案例教学方式,每个算法都提出一个典型实用的问题,采用案例分析的方法,分析其模块源代码,重点引导学生逐步完成任务模块的代码编写。

本算法提出问题为排序体育成绩,以简单数值8、7、2、3、0为例,将这5个数值以冒泡排序的方式进行从小到大排列(图3)。

30个算法中,冒泡算法是比较典型的按钮控制动画,按钮动作:“On(press){Play();}”。

动画中关键画面的关键帧上设置动作:“Stop();”。

4结束语
“算法演示动画”展示“C语言”课程中较典型的30个算法,通过动态直观的Flash动画能够辅助学生学习课本中生硬的程序。

在制作这些算法的同时,笔者不仅对C语言有了更深的了解和认识,同时也深化了Flash 的动作脚本的知识结构。

■
/ / /。