flash秒表动画的设计与制作.docx
《flash秒表动画的设计与制作.docx》由会员分享,可在线阅读,更多相关《flash秒表动画的设计与制作.docx(14页珍藏版)》请在冰豆网上搜索。
flash秒表动画的设计与制作
Flash秒表动画的设计与制作
平山县回舍中学郜兵山
秒表功能单击秒表上端按钮,秒表开始计时;再次单击秒表按钮,秒表停止计时;第三次单击秒表按钮,秒表回零。
上述过程可以重复执行。
制作环境MacromediaFlash8,WindowsXP
运行环境WindowsXP
功能实现:
1、创建用户界面
1.1新建Flash文档
执行“开始”→“所有程序”→“Macromedia”→“MacromediaFlash8”命令,打开MacromediaFlash8程序窗口,同时弹出如下图所示的对话框。
在该对话框中,选择“创建新项目”中的“Flash文档”一项,新建一个Flash文档。
1.2保存文档
执行“文件”→“保存(S)”命令,打开“另存为”对话框,如下图所示。
在“另存为”对话框中,选择文件保存的位置,如“秒表”文件夹,输入要保存的文件名,如“Flash秒表.fla”后,单击“保存”按钮,保存文件。
1.3设置文档属性
在Flash程序窗口中,查看属性面板是否打开,若打开的话,可以直接进行文档属性设置的操作;若属性面板没有打开的话,则执行“窗口”→“属性”命令,打开属性面板。
属性面板如下图所示。
在属性面板中,单击“大小”后面的“文档属性”按钮,打开文档属性对话框,如下图所示。
在“文档属性”对话框中,对文档的标题,描述,尺寸按下面表格要求进行设置,设置完成之后,单击“确定”按钮。
属性
属性值
文档标题
FLASH秒表
描述
利用FLASH秒表,可以用来计时,使用方法如下:
第一次单击秒表按钮,计时开始;第二次单击秒表按钮,计时停止;第三次单击秒表按钮,秒表指针回零。
上述过程可以重复执行。
尺寸
宽:
300px、高:
300px
背景
白色#FFFFFF
帧频
12fps
标尺单位
像素
2、创建元件
2.1创建“时针”元件
2.1.1确定元件名称及类型
“插入”→“新建元件”命令,打开“创建新元件”对话框,如下图所示。
在“创建新元件”对话框中,将元件名称改为“时针”,在“类型”选项中选中“影片剪辑”选项,单击“确定”按钮,进入“时针”元件的编辑界面。
2.1.2制作“时针”元件
分别选择“矩形工具”和“椭圆工具”,在属性面板中,设置矩形和椭圆的填充色均为黑色,笔触颜色均为无色;在时针元件的编辑界面,拖动鼠标画出两个矩形和一个椭圆;用“选择工具”调整矩形和椭圆的形状和大小及位置,调整后的效果如下图所示。
选中做好的图形,选择“任意变形”工具,图形出现控点,如下图所示。
将鼠标指针指向注册点位置,按下鼠标左键,拖动鼠标,将注册点拖动到图形下边框中间的控点位置。
按键盘上的方向键,移动图形至使图形注册点与编辑界面的中心重合,完成后的效果如下图所示。
2、2创建“分针”、“秒针”元件
创建分针、秒针元件与创建时针元件的方法大致相同,所不同之处,只是图形的高度、宽度与颜色有所不同。
分针、秒针元件做好后的效果如下图所示。
2.3、创建“表面”元件
2.3.1确定元件名称和类型
执行“插入”→“新建元件”命令,弹出“创建新元件”对话框如下图所示。
在“创建新元件”对话框中,将元件名称改为“表面”,在行为选项中,选中“图形”选项,最后,单击“确定”按钮,进入元件的编辑界面。
2.3.2制作“表面”元件的表面
选中“椭圆工具”,并设置其属性如下:
笔触颜色为黑色,填充颜色:
放射状。
按下Shift键的同时,按下鼠标左键,在“表面”元件的编辑界面给制出一个圆。
如下图所示。
选中“任意变形”工具,然后,用鼠标左键单击绘制作的圆,这时圆中出现控点。
利用键盘方向键,移动圆,使它的注册点与编辑界面的中心点“+”重合。
2.3.3制作“表面”元件的刻度
2.3.3.1新建刻度图层
新插入一个图层,并将该图层重新命名为:
刻度
2.3.3.2设置直线工具属性
选中“直线工具”,在属性面板中设置直线的属性为:
笔触高度为1.5、笔触颜色为红色。
2.3.3.3制作刻度
按下SHIFT键的同时,在舞台上的“+”位置开始,沿垂直方向画一条直线段;选中“任意变形”工具,然后,用鼠标左键单击该直线段,使该直线段四周出现控点;用鼠标左键移动注册点至直线段的下端;用键盘上的方向键,移动直线段,使它的注册点刚好与界面中心点“+”重合。
选中直线段,执行“窗口”→“变形”命令,弹出“变形”对话框。
在“变形”对话框中,选中“约束”和“旋转”选项,并设置旋转角度为6度,然后单击对话框中的“复制并应用变形”按钮60次得到下图所示效果。
在工具箱中选中“橡皮”工具,在拷贝出的每条直线段上,将多余的部分擦除,得到表面上的时间刻度,如下图所示。
新插入数字图层。
选中工具箱中的文本工具,在“表面”的编辑场景中,依次建立“1”、“2”、“3”、“4、”“5”、“6”、“7”、“8”、“9”、“10”、“11”、“12”静态文本。
调整十二个静态文本位置、方向,调整后的效果如下图所示。
2.4创建“按钮图形”元件
2.4.1确定元件名称和类型
执行“插入”→“新建元件”命令,弹出“新建元件”对话框,在此对话框中的“类型”选项中,选择“图形”选项,名称后面文本框中,输入“按钮图形”最后,单击“确定”按钮,进入“按钮”元件的编辑界面。
2.4.2制作“按钮图形”
在工具箱中选中矩形工具,打开属性面板,设置矩形的笔触颜色为无色,填充颜色为黑色,在场景中拖动鼠标,画出下图所示的矩形。
在工具箱中选中直线工具,设置笔触高度为5,笔触颜色为白色,在矩形上,沿竖直方向拖动鼠标,在矩形上画出一些白线条。
如下图所示。
新插入一个图层,在工具箱中选中椭圆工具,设置椭圆工具的属性为填充色为无色,笔触颜色为黑色;然后在场景中拖动出一个椭圆。
选中新插入的图层,按下鼠标左键,将其拖动至最一层。
拖动该图层后的效果如下图所示。
2.5创建按钮元件
2.5.1确定按钮元件类型及名称
执行“插入”→“新建元件”命令,打开“创建新元件”对话框,在此对话框的“类型”选项中选择“按钮”,名称后面的文本框中输入“按钮”,单击“确定”按钮,进入按钮的编辑场景。
2.5.2编辑按钮元件
2.5.2.1打开库面板
执行“窗口”→“库”命令,打开库面板。
2.5.2.2编辑按钮元件
将库面板中的按钮图形元件拖放到舞台,并保证它被选中。
单击“任意变形”工具,按钮图形四周出现控点;移动注册点至下边框中间控点的位置;移动图形,使控点与编辑界面的中心重合;选中“按下帧”,向下拖动按钮图形上边框的控点,使图形的高度变小。
用鼠标按下按钮时的效果如下图所示。
3、创建主动画
3.1编辑“表面”图层
返回场景1,将库面板中的“表面”元件拖放到舞台并调整好位置及大小,选中时间轴面板的图层1,并将其重命名为“表面”。
3.2编辑时针图层
新插入一个图层,并将该图层重新命名为“时针”。
将“时针”元件由库面板拖放到舞台,调整时针位置,使其注册点分别正好对准表面的中心;选中时针,在属性面板中,设置时针实例名为h。
3.3编辑“分针”、“秒针”图层
用同样的方法,分别新建“分针”、“秒针”图层,分针、秒针实例的名称分别设置为m、s。
3.4编辑“按钮”图层
新建按钮图层,将库面板中的“按钮”元件拖放到舞台,调整其大小和位置。
将表面、时针、分针、秒针、按钮元件拖放到舞台上,适当调整其大小和位置后的效果如下图所示。
3.5、编辑脚本图层
新建一个图层,并将其重命名为“脚本”,选中该图层的第一帧,打开动作面板,添加如下动作脚本:
varx=0;
y=0;
z=0;
n=0;
h._rotation=0;
m._rotation=0;
s._rotation=0;
stop();
在该图层的第2帧插入空白关键帧。
在该图层的第13帧插入关键帧,打开动作面板,在动作面板中添加如下动作脚本:
x=x+1;
If(x==60){
x=0;
y=y+1;
If(y==60){
y=0;
z=z+1;
}
}
h._rotation=z*30+y*0.5+x*1/120;
m._rotation=y*6+x*0.1;
s._rotation=x*6;
Gotoandply
(2)。
3.6编辑“按钮”脚本
选中按钮,打开动作面板,添加如下动作脚本:
On(release){
If(n==0){
play();
n=1;
}else{
If(n==1){
stop();
n=2;
}else{
Gotoandply
(1);
}
}
}
分别将主场景中的“表面”、“时针”、“分针”、“秒针”、“按钮”图层延长到第13帧。
至此,这个Flash秒表动画就完成了。
4、动画测试
按下“Ctrl+Enter”键或执行“控制”→“测试影片”命令,测试影片,测试效果如下图所示
用鼠标左键第一次单击按钮,表针开始走动,效果如下图所示。
第二次用鼠标左键单击按钮,秒表的时针、分针、秒针停止走动。
第三次用鼠标左键单击按钮,秒表的时针、分针、秒针归零,效果如下图所示。
→
上面所做的Flash文件,只有在Flash环境下,才能运行,为使该文件在脱离Flash环境时,也能够运行,可采用发布设置的方法,将其发布为可执行文件。
具体方法如下:
1、执行“文件”→“发布设置”命令,打开发布设置对话框,如下图所示。
2、在发布设置对话框中,选择发布类型为“Windows放映文件(.exe)”,单击该项后面的“选择发布目标”按钮,打开“选择发布目标”对话框,如下图所示。
3、在“选择发布目标”对话框中,选择文件的保存位置,如“桌面”,输入文件名,如“Flash秒表”后,单击“保存”按钮,便开始执行发布命令,在指定位置生成可执行文件:
Flash秒表.exe