交互图像展示文档格式.docx

交互图像展示文档格式.docx

《交互图像展示文档格式.docx》由会员分享，可在线阅读，更多相关《交互图像展示文档格式.docx（13页珍藏版）》请在冰点文库上搜索。

（3）熟练掌握学习影片剪辑实例名称使用

【制作流程】

流程图

【主要步骤】

【说明】本实例采用的是ActionScript3.0脚本使用及学习，如下操作选择新建“Flash文件（ActionScript3.0）”文档。

如图5-38所示。

图5-38新建“Flash文件（ActionScript3.0）”文档

（1）导入素材

1）鼠标单击【文件】菜单，在弹出的菜单下选择【导入到舞台】或者选择直接【导入到库】的选项。

2）选择“库”中五张小图和一张大图拖拽到“场景1”舞台中，选择五张小图打开“窗口”菜单下“对齐”选项，如图5-39所示。

图5-39用对齐命令将五张图像对齐

（2）制作闪光效果按钮

1）选择五张图像元件，打开属性菜单栏中“色彩效果”样式选择“色调”将色调颜色为白色透明度调整为50%，如图5-40所示。

图5-40白色透明度调整为50%

【说明】制作按钮鼠标划过发生渐变色动画效果，需要将图形元件转化为“按钮”元件，然后将第二帧内容制作“影片剪辑”渐变色动画。

2）选择第一个图像元件，右键弹出对话框中选择“转化为元件”选项，如图钱5-41所示。

3）弹出对话框中键入名称“按钮01”，类型模式选择“按钮”，单击“确定”按钮，如图5-42所示。

图5-41右键弹出对话框中选择“转化为元件”选项

图5-42对话框中键入名称“按钮01”，类型模式选择“按钮”

4）双击按钮01进入其内部，选择“点击”帧右键菜单中选择“插入关键帧”选项，如图5-43所示。

5）选择“指针经过”帧右键菜单中选择“插入关键帧”，如图5-44所示。

图5-43右键菜单中选择“插入关键帧”选项

图5-44“指针经过”帧右键菜单中选择“插入关键帧”

6）选择“按钮01”右键菜单中选择“转化为元件”选项，如图5-45所示。

7）弹出的“转化为元件”对话框中键入“按钮渐变01”类型模式选择“影片剪辑”，单击“确定”按钮。

如图5-46所示。

图5-45右键菜单中选择“转化为元件”选项

图5-46“转化为元件”对话框中键入“按钮渐变01”类型模式选择“影片剪辑”

8）双击进入“按钮渐变01”影片剪辑内部，在第时间轴第10帧位置插入关键帧，选择第1-9帧之间右键菜单中选择“创建传统补间”选项，如图5-47所示。

9）在第10帧位置右键菜单中选择“动作”选项，选择“代码片段”，“时间轴导航”“在此帧处停止”。

如图5-48所示。

图5-47选择第1-9帧之间右键菜单中选择“创建传统补间”选项

图5-48弹出动作对话框中键入“stop（）;

”语句

10）选择第10帧位置，打开属性栏中“色彩效果”中样式选择色调“无”，如图5-49所示。

选择“控制”菜单下测试影片选项，测试按钮渐变效果。

依据制作“按钮01”效果制作出其他四个按钮同样效果。

如图5-50所示。

图5-49属性栏中“色彩效果”中样式选择色调无

图5-50测试影片

（4）制作图像闪光转场效果

1）图层1第5帧选择“插入帧”，图层2第2帧处选择“插入关键帧”，选中图层2第2帧图像选择属性面板中的“交换”，将第2帧处图像交换为第2张大图。

如图5-51所示。

【说明】交换位图可以保证同类图像在位置、大小保持一致。

图5-51位图交换

2）分别在图层2第3、4、5帧处选择“插入关键帧”，分别选中图层2第3、4、5帧图像选择属性面板中的“交换”，将第3、4、5帧处图像交换为第3、4、5张大图。

3）新建一层，分别在在图层3的1至5帧处选择“插入关键帧”。

如图5-52所示。

图5-52插入关键帧

4）回到图层2第一帧选中图像，鼠标右键单击“转化为元件”，选择影片剪辑命名为“movie01”,双击打开“movie01”，将图像转化为影片剪辑，修改影片剪辑的色彩效果，亮度设置为100%。

如图5-53所示。

在15帧处插入关键帧，修改影片剪辑的色彩效果，亮度设置为0%，选中1至15帧之间任何一帧，鼠标右键选择“创建传统补间”，并在15帧处添加停止命令。

如图5-54所示。

图5-53修改影片剪辑亮度

图5-54创建传统补间

4）用同样的方法分别给图层2的第2至5帧图像转化为影片剪辑“movie02”、“movie03”、“movie04”、“movie05”，并且分别给“movie02”、“movie03”、“movie04”、“movie05”中完成色彩效果亮度100%至0%的变化。

（5）按钮控制时间轴跳转

1）分别选择图层1中按钮，在属性面板的“实例名称”处给按钮命名为“aa01”、“aa02”、“aa03”、“aa04”、“aa05”。

【说明】实例名称命名为小写的英文和数字组合。

2）选中按钮“aa01”，鼠标右键单击选择“动作”，在“代码片段”中选择“时间轴导航”下“单击以转到帧并停止”。

并根据需要修改代码中合适的帧编号。

如图5-55所示。

图5-55添加、修改代码中的帧编号

3）用同样的方法给按钮“aa02”、“aa03”、“aa04”、“aa05”加载跳转命令。

（6）发布与测试

【活学活用】

本实例为交互设计图像类，采用相同的技术，可以制作出非遗类图像交互展示动画效果。

1.创建风筝按钮转动影片剪辑，在影片剪辑中完成旋转动画制作。

如图5-56所示。

图5-56添加、修改代码中的帧编号

2.根据按钮大小及位置，添加遮罩层设置遮罩区域，如图5-57所示。

并为影片剪辑命名，如图5-58所示。

图5-57添加、修改代码中的帧编号

图5-58添加、修改代码中的帧编号

3.通过创建传统补间动画和引导层动画制作风筝从下往上飞翔动画。

如图5-59所示。

图5-59添加、修改代码中的帧编号

4.为按钮添加命令，选择场景1第一帧，鼠标右键单机添加以下命令，实现按钮单击图像之间跳转切换，并用同样的方法为其他按钮添加命令。

如图5-60所示。

图5-60添加、修改代码中的帧编号

5.动画测试效果