资源简介

(共25张PPT)
项目五 制作简单交互课件
任务三 实例名称和路径
——认识立方体截面
下面通过制作“认识立方体截面”课件，使读者掌握实例名称和路径的应用。
立方体截面课件
（一）制作课件内容
首先制作“认识立方体截面”课件的封面，以及切割截面的动画，具体操作如下：
导入图像素材
1.新建一个Flash文档，将场景大小设为800 600像素，然后将“底图.jpg”图像素材导入到舞台中，并将其“x”和“y”坐标都设为“0”。
新建并重命名图层
2.在“图层1”上方新建3个图层，并分别将图层命名为“底图”、“立方体”、“按钮”和“代码”。
绘制立方体图形 输入标题文本
3.锁定“底图”图层，然后使用“线条工具” 和“选择工具” 在“立方体”图层的舞台中绘制立方体的轮廓，并为立方体的顶面填充黄色（#FFFF00）、正面填充橙黄色（#FFCC00）、侧面填充橘黄色（#FF9900）。
4.选择“文本工具” ，在“属性”面板中将“系列”设为“文鼎特粗黑簡”、“大小”设为“100”、“颜色”设为白色，然后在“立方体”图层中输入标题文本，再为文本添加“投影”滤镜。
绘制并填充边框
创建“立方体”影片剪辑
5.在所有图层的第2帧插入关键帧，然后使用“线条工具” 和“选择工具” 在“按钮”图层第2帧的舞台中绘制边框轮廓，再为边框填充由绿色（#006600）到浅绿色（#99FF00）再到绿色（#006600）的线性渐变。
7.删除“立方体”图层第2帧中的文本，框选舞台中的立方体，然后按【F8】键将其转换为名为“立方体”的影片剪辑。
6.单击“按钮”图层的第2帧，选中绘制的边框，然后按快捷键【Ctrl+G】将其群组，再利用快捷键【Ctrl+X】和【Ctrl+Shift+V】，将其原位剪切到“底图”图层第2帧的舞台中。
（二）制作切割动画
下面在“立方体”影片剪辑中制作切割各种截面的动画，具体步骤如下：
新建并重命名图层 绘制切割线段
1.双击舞台中的“立方体”影片剪辑实例进入其编辑状态，在“图层1”上方新建3个图层，并分别将图层重命名为“立方体”、“刀片”、“切片”和“代码”。
2.在所有图层的第240帧插入普通帧，在“立方体”、“刀片”和“切片”图层的第2帧插入关键帧，然后使用“线条工具” 在“立方体”图层第2帧的舞台中绘制绿色线段。
创建“正方形”图形元件
填充立方体切割后的区域
3.双击选中立方体中要切割的部分，然后利用快捷键【Ctrl+X】和【Ctrl+Shift+V】将所选图形原位剪切到“切片”图层的第2帧中，再删除绿色线段，并将“切片”图层第2帧中的图形转换为名为“正方形”的图形元件。
4.隐藏“切片”图层，在“立方体”图层中绘制绿色线段，然后为空白区域填充橘黄色（#FF6600），再删除绿色线段。
创建“刀片”图形元件 创建刀片落下的动画效果
5.使用“矩形工具” 在“刀片”图层第2帧的舞台中创建一个矩形，并为其填充由深灰色（#333333）到灰色（#CCCCCC）的线性渐变，再将其转换为名为“刀片”的图形元件。
6.在“刀片”图层的第20帧插入关键帧，然后在第2~20帧之间创建传统补间动画，并将第2帧中的“刀片”元件实例向上移动。
创建刀片消失的动画效果
创建刀片消失的动画效果
7.在“刀片”图层的第30帧插入关键帧，然后在“刀片”图层的第20~30帧之间创建传统补间动画，再选中第30帧中的“刀片”元件实例，将其“Alpha”值设为“0%”。
8.显示“切片”图层，在“切片”图层的第20帧和第40帧插入关键帧，并在第20~40帧之间创建传统补间动画，再将第40帧中的“正方形”元件实例向右移动。
绘制切割线段
创建“长方形”图形元件
9.在“立方体”、“刀片”和“切片”图层的第41帧插入空白关键帧，然后利用快捷键【Ctrl+C】和【Ctrl+Shift+V】将“立方体”图层第1帧中的立方体图形原位复制到第41帧中，并使用“线条工具” 在“立方体”图层第41帧的舞台中绘制绿色线段。
10.双击选中立方体中要切割的部分，然后利用快捷键【Ctrl+X】和【Ctrl+Shift+V】将所选图形原位剪切到“切片”图层的第41帧中，再删除绿色线段，并将“切片”图层第41帧中的图形转换为名为“长方形”的图形元件。
填充立方体切割后的区域
复制并倾斜刀片
11.将“切片”图层隐藏，在“立方体”图层第41帧的舞台中绘制绿色线段，然后为空白区域填充橘黄色（#FF6600），再删除绿色线段。
12.将“刀片”图层第20帧中的“刀片”元件实例原位复制到“刀片”图层的第21帧中，然后使用“任意变形工具” 对其进行倾斜变形操作。
创建刀片落下并消失的动画效果
创建长方形切片平移的动画效果
13.在“刀片”图层的第60和第70帧插入关键帧，并在第41帧与第60帧，以及第60帧与第70帧之间创建传统补间动画，然后将第41帧中的“刀片”元件实例向上移动，将第70帧中“刀片”元件实例的“Alpha”值设为“0%”。
14.显示“切片”图层，在“切片”图层的第60和第80帧插入关键帧，并在第60帧与第80帧间创建传统补间动画，再将第80帧中的“长方形”元件实例向右平移。
制作其他切割动画效果
15.在“立方体”影片剪辑的第81帧至第120帧制作切割三角形的动画效果；在第121帧至第160帧制作切割梯形的动画效果；在第161帧至第200帧制作切割五边形的动画效果；在第201帧至240帧制作切割六边形的动画效果。
（三）制作按钮
下面制作用于控制课件播放的按钮，具体步骤如下：
创建“透明按钮”按钮元件 拖动关键帧
1.双击舞台空白区域返回主场景，然后在“按钮”图层第1帧的舞台中创建一个覆盖整个舞台的矩形，并将其转换为名为“透明按钮”的按钮元件。
2.双击舞台中的“透明按钮”按钮，进入其编辑状态，将“图层1”的弹起帧拖到点击帧处，制作一个透明的按钮。
创建“截正方形”按钮元件 编辑“截正方形”按钮
3.返回主场景，选择“矩形工具” ，在“属性”面板中将“填充颜色”设为“没有颜色”，将“矩形边角半径”设为“20”，然后在“按钮”图层第2帧中的舞台上绘制一个圆角矩形，并为其填充由浅蓝色（#00FFFF）到蓝色（#0000FF）再到浅蓝色（#00FFFF）的线性渐变，再将其转换为名为“截正方形”的按钮元件。
4.双击舞台中的“截正方形”按钮，进入其编辑状态，然后在“图层1”上方新建“图层2”，再在“图层1”中的圆角矩形中绘制一条弧线，在“图层2”中输入文本并创建黑色三角形。
改变按钮颜色 创建“截长方形”按钮元件
5.在“图层1”的指针经过帧、按下帧和点击帧插入关键帧，然后将指针经过帧中圆角矩形的填充颜色改为由淡紫色（# FF99FF）到深红色（# 990000）再到红色（# FF0000）的线性渐变。
6.右击“库”面板中的“截正方形”按钮元件，在弹出的快捷菜单中选择“直接复制”菜单，然后在打开的“直接复制元件”对话框中将名称设为“截长方形”，并单击“确定”按钮。
修改“截长方形”按钮元件的文本 将按钮添加到舞台中
7.双击“库”面板中的“截长方形”按钮元件进入其编辑状态，然后修改“图层2”中的文本。
8.创建“截三角形”、“截梯形”、“截五边形”和“截六边形”按钮元件，然后将“库”面板中的按钮添加至“按钮”图层第2帧的舞台中，并调整其位置。
（四）添加实例名称和ActionScript 2.0代码
课件所需的素材和内容制作好了，下面首先为影片剪辑实例设置实例名称，然后为关键帧和按钮添加ActionScript 2.0代码。
为元件实例设置实例名称
1.使用“选择工具” 单击选中“立方体”图层第2帧舞台中的“立方体”影片剪辑实例，然后在“属性”面板中将其“实例名称”设为“lft”。
2.在“代码”图层的第2帧插入关键帧，然后打开“动作”面板，为“代码”图层的第1帧和第2帧添加“stop”语句。
为透明按钮添加“goto”语句
3.选中“按钮”图层第1帧中的“透明按钮”按钮，然后激活“动作”面板中的“脚本助手”按钮 ，并添加“goto”语句，再在右侧的“帧”编辑框中输入“2”。
4.双击“库”面板中的“立方体”影片剪辑进入其编辑状态，在“代码”图层的第40、80、120、160、200和240帧插入关键帧，并为第1、40、80、120、160、200和240帧添加“stop”语句。
为“截正方形”按钮添加代码
为“截长方形”按钮添加代码
5.返回主场景，单击选中“按钮”图层第2帧中的“截正方形”按钮，然后在“动作”面板中为其添加“goto”语句，再取消“脚本助手”按钮 的激活状态，并在脚本窗格中修改代码。
6.在“动作”面板中为“截长方形”按钮添加代码。
为“截三角形”按钮添加代码
为“截梯形”按钮添加代码
7.在“动作”面板中为“截三角形”按钮添加代码。
8.在“动作”面板中为“截梯形”按钮添加代码。
为“截五边形”按钮添加代码
为“截六边形”按钮添加代码
9.在“动作”面板中为“截五边形”按钮添加代码。
10.在“动作”面板中为“截六边形”按钮添加代码。
11.最后保存文档，并按快捷键【Ctrl+Enter】测试课件效果。
（五）补充学习——相对路径
相对路径是以当前实例为出发点，来确定其他实例的位置。例如：假设在主时间轴舞台上有一个影片剪辑实例名称为js，在js实例中包含一个子影片剪辑实例js1，在js1实例中还包含一个子影片剪辑实例js2。若要为js1添加stop()语句，在js1影片剪辑中，对它本身进行操作的动作脚本为：
this.stop();
对js实例进行操作，因为js是它的上一级（父级），所以动作脚本为：
_parent.stop();
对js2的操作，因为js2是它的子级，所以动作脚本为：
this.js2.stop();或者js2.stop();
设置第5张幻灯片
4.在“幻灯片”图层的第5帧处插入空白关键帧，在“辅助线”引导层插入普通帧，然后将“库”面板中的“民居.jpg”图像素材拖至舞台中，并调整其大小和位置，再在舞台中创建图形和文本。
5.最后返回主场景，并保存文档，至此实例就完成了。

展开更多......

收起↑