flash知识强化实例

实例实例1 幻灯片效果幻灯片效果实例实例2 拼图游戏拼图游戏实例实例3 展开的画卷展开的画卷实例实例4 鼠标看图鼠标看图第第15章章 知识强化实例知识强化实例 实例实例1 幻灯片效果幻灯片效果 实例目标实例目标本例将制作一个幻灯片效果。通过本例的练习，可以让用户掌握“导入到库”、“对齐”面板、“遮罩”命令、“场景”切换、“绘图工具”等的综合运用。实例内容实例内容 本例主要采用遮罩命令和两个场景间的切换来制作幻灯片效果，其效果为：开始播放首先看到一幅图像，接着第2幅图像从中心开始逐渐向四周扩展，并逐渐覆盖第1幅图片，接下来又从右向左逐渐推出第3幅图像并覆盖第2幅图像，如图15.1.1所示。图15.1.1 最终效果 实例过程实例过程（1）按“CtrlN”组合键，新建一个Flash文档。（2）按“Ctrl+J”组合键，弹出“文档属性”对话框，其参数设置如图15.1.2所示。图15.1.2 “文档属性”对话框（3）设置完成后单击“确定”按钮。（4）选择“文件”“导入”“导入到库”命令，弹出如图15.1.3所示的“导入到库”对话框。图15.1.3 “导入到库”对话框（5）选择需要的图片后，单击“打开”按钮，将其导入到库中。（6）按“Ctrl+L”组合键打开“库”面板，即可看到刚才导入的图片，如图15.1.4所示。（7）继续按照同样的方法导入另外一幅图片，如图15.1.5所示。图15.1.4 导入一幅图片 图15.1.5 导入另一幅图片（8）将“风车”图片拖动到舞台上，如图15.1.6所示。（9）按“Ctrl+K”组合键打开“对齐”面板，如图15.1.7所示。选中“风车”图片，单击“对齐”面板中的“匹配宽和高”按钮，将其设置为舞台大小。然后再单击“对齐”面板上的“水平中齐”和“垂直中齐”按钮，将图像和舞台对齐。图15.1.6 将“风车”图片拖动到舞台上 图15.1.7 “对齐”面板（10）双击“时间轴”面板上的“图层1”，将其改名为“风车”，如图15.1.8所示。（11）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，并将其命名为“木雕小二郎”，如图15.1.9所示。图15.1.8 “时间轴”面板图15.1.9 “时间轴”面板（12）按照同样的方法将“库”面板中的图片“木雕小二郎”拖动到舞台上，将其调整为舞台大小，并放置到舞台的中心，如图15.1.10所示。图15.1.10 导入图片2（13）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，并将其命名为“遮罩”，如图15.1.11所示。图15.1.11 “时间轴”面板（14）选择工具箱中的椭圆工具，在舞台的中心位置绘制一个小椭圆，如图15.1.12所示。（15）单击“遮罩”图层的第30帧，按“F6”键插入关键帧，将椭圆放大覆盖住整个图片，如图15.1.13所示。图15.1.12 绘制小椭圆 图15.1.13 放大椭圆（16）单击第1帧，在“属性”面板中选择“形状”补间，如图15.1.14所示，建立两个帧之间的形状补间动画。图15.1.14 “属性”面板（17）按住“Ctrl”键分别单击“风车”图层和“木雕小二郎”图层的第30帧，按“F5”键插入帧，如图15.1.15所示。图15.1.15 “时间轴”面板（18）用鼠标右键单击“遮罩”图层的名称，在弹出的快捷菜单中选择“遮罩层”命令，使“遮罩”图层对“木雕小二郎”图层产生遮罩，如图15.1.16所示。图15.1.16 转换为遮罩层这样，场景一的动画就制作完成了。按“Ctrl+Enter”组合键进行测试，可以看到从中心向四周圆形扩展显示一幅木雕小二郎的图片。下面来制作场景2，动画的内容是：当显示完图片“木雕小二郎”后，又从右向左显示另外一幅图片。（19）选择“插入”“场景”命令，插入一个新场景，如图15.1.17所示。图15.1.17 插入新场景（20）将“库”面板中的“木雕小二郎”图片拖动到舞台上，并将其调整为舞台大小且放置到舞台的中心。（21）再次按照上面的方法导入一幅“落英”图片，如图15.1.18所示。（22）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，并将其命名为“落英”。（23）将“落英”图片从“库”面板中拖动到舞台上，调整好其位置和大小，如图15.1.19所示。图15.1.18 导入图片3 图15.1.19 拖动“落英”图片到舞台上（24）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，并将其命名为“遮罩”，如图15.1.20所示。图15.1.20 “时间轴”面板（25）选择工具箱中的矩形工具，在舞台上绘制一矩形，将其放置到舞台上图片的右侧，如图15.1.21所示。（26）单击第30帧，按“F6”键插入一个关键帧，将矩形放大使其覆盖住整个图片并放置到舞台的中心位置，如图15.1.22所示。图15.1.21 绘制矩形 图15.1.22 将矩形放大（27）单击第1帧，在“属性”面板中选择“形状”补间，建立两个帧之间的形状补间动画。（28）单击“遮罩”图层和“落英”图层的第30帧，按“F5”键插入帧。（29）用鼠标右键单击“遮罩”图层的名称，在弹出的快捷菜单中选择“遮罩层”命令，使“遮罩”图层对“落英”图层产生遮罩效果。至此，场景2的动画就制作完成了，按“Ctrl+Alt+Enter”组合键进行测试，可以看到场景2的动画效果。（30）按“Ctrl+Enter”组合键测试整个动画，就会依次播放场景1和场景2的动画，如图15.1.1所示。实例实例2 拼图游戏拼图游戏 实例目标实例目标本例将制作一个拼图游戏，主要讲解鼠标的拖动与释放动作函数的使用，并介绍了不同元件之间进行转换的方法以及分割图形的技巧。实例内容实例内容 本例通过标尺锁定、元件转换、色调效果、“对齐”面板等来制作拼图效果，当用户用鼠标拖动某一图块时，该图块随之移动，直到释放鼠标后，图块停放在相应的位置，最终拼成一幅完整的图片，最终效果如图15.2.1所示。图15.2.1 最终效果图 实例过程实例过程（1）打开Flash 8应用程序。（2）按“Ctrl+N”组合键新建一个Flash文档。（3）按“Ctrl+J”组合键弹出“文档属性”对话框，其参数设置如图15.2.2所示，设置完成后单击“确定”按钮。图15.2.2 “文档属性”对话框（4）选择“文件”“导入”“导入到库”命令，弹出“导入到库”对话框，如图15.2.3所示。选择一幅汽车图片后单击“打开”按钮，将其导入到“库”面板中。图15.2.3 “导入到库”对话框（5）按“Ctrl+L”组合键打开“库”面板，如图15.2.4所示，将刚才导入的图片拖动到舞台上。（6）按“Ctrl+K”组合键打开“对齐”面板，如图15.2.5所示。分别单击“对齐”面板中的“匹配宽和高”按钮、“水平中齐”按钮和“垂直中齐”按钮，使其和舞台尺寸相匹配且放置于舞台的中心位置，如图15.2.6所示。图15.2.4 “库”面板 图15.2.5 “对齐”面板（7）选中导入的图片，按“Ctrl+B”组合键将其打散。（8）选择工具箱中的直线工具，然后在图片上绘制两条垂直的直线作为图片的分割线，如图15.2.7所示。图15.2.6 对齐舞台 图15.2.7 分割图片（9）选择“视图”“标尺”命令，将标尺显示出来，然后移动鼠标指针到标尺上，分别拖出一条竖向和一条横向的辅助线，并与前面的直线重合。（10）选择“视图”“辅助线”“锁定辅助线”命令，将辅助线锁定。（11）选择工具箱中的选择工具，按住“Ctrl”键的同时将刚才绘制的直线向左拉出一个小三角，如图15.2.8所示。然后释放“Ctrl”键，将小三角调整为圆形，如图15.2.9所示。图15.2.8 调整直线（一）图15.2.9 调整直线（二）（12）按照同样的方法对另外的三条直线进行调整，效果如图15.2.10所示。（13）选择工具箱中的选择工具，单击左上角的图块，按“F8”键，弹出“转换为元件”对话框，其参数设置如图15.2.11所示，然后单击“确定”按钮将其转换为一个图形元件。（14）按照步骤（13）的方法，将其余的三个图块按顺时针方向分别将其转换为图形元件，并命名为gra2，gra3和gra4。图15.2.10 调整完后的效果 图15.2.11 “转换为元件”对话框（15）用鼠标双击用来分割图片的直线，按“Delete”键将其删除。（16）将图层1命名为“图块”，如图15.2.12所示。图15.2.12 “时间轴”面板（17）单击“时间轴”面板上的“插入图层”按钮插入一个新图层，并将其命名为“背景”，然后将其拖动到“图块”图层的下方，如图15.2.13所示。图15.2.13 “时间轴”面板（18）单击“图块”图层，按住“Shift”键的同时单击4个图块，将其全部选中，按“Ctrl+C”组合键将其复制到剪贴板上，然后单击“背景”图层，按“Ctrl+V”组合键进行粘贴。（19）单击“图块”图层上的gra1实例，按“F8”键弹出“转换为元件”对话框，其参数设置如图15.2.14所示。单击“确定”按钮后就将其转换为but1按钮元件。图15.2.14 将图形元件转换为按钮元件（20）按照步骤（19）的方法将其余的gra2，gra3和gra4实例分别转换为but2，but3和but4按钮元件。（21）单击选中“but1”，按“F8”键弹出“转换为元件”对话框，其参数设置如图15.2.15所示。单击“确定”按钮后就将其转换为mv1影片剪辑元件。图15.2.15 将按钮元件转换为影片剪辑元件（22）按照步骤（21）的方法将其余的but2，but3和but4实例分别转换为mv2，mv3和mv4影片剪辑元件。（23）选中“背景”图层，单击左上方的图块，按“F8”键弹出“转换为元件”对话框，其参数设置如图15.2.16所示。单击“确定”按钮后就将其转换为d1影片剪辑元件。图15.2.16 将图形转换为影片剪辑元件（24）按照步骤（23）的方法将其余的三个图块分别转换为d2，d3和d4影片剪辑元件。（25）单击选中d1实例，在“属性”面板中将其“颜色”选项设置为“色调”，透明度为50%，如图15.2.17所示。图15.2.17 设置d1实例的属性（26）按照步骤（25）的方法设置d2，d3和d4实例，完成后效果如图15.2.18所示。这样做的目的是为了给观众玩游戏时提供一个参照。这样，背景就制作完成了。图15.2.18 设置色调后的效果（27）接下来编写动作代码，选中“图块”图层，用鼠标双击左上角的图块，进入其影片剪辑的编辑界面，按“F9”键打开“动作”面板，然后输入以下代码。on(press)startDrag(,true);on(release)stopDrag();obj=/d1;if(_droptarget=obj)setProperty(“”,_x,getProperty(obj,_x);setProperty(“”,_y,getProperty(obj,_y);该段代码的含义是当按住鼠标左键时，可以拖动色块。当停止拖动时，判断释放的图块是否在背景上相应的图块上，如果在，图块就被吸附到该位置。（28）按照步骤（27）的方法对mv2，mv3，mv4分别编写代码，只是将其中的d1相应地换为d2，d3和d4即可。（29）按“Ctrl+E”组合键返回到主场景中，将图块移动位置，如图15.2.19所示。（30）按“Ctrl+Enter”组合键进行测试，就可以玩这个游戏了，拼图前和拼图后的效果如图15.2.1所示。图15.2.19 打乱图块的位置实例实例3 展开的画卷展开的画卷 实例目标实例目标本例将制作一幅画卷自动展开的效果。通过本例的学习，可以让用户更进一步地掌握遮罩动画、动作补间动画的结合使用，以及文字工具、绘图工具和填充颜色设置等方面的技巧。实例内容实例内容 本例的效果为：一幅画卷从右向左展开，然后一行文字从舞台上方缓缓进入，最后停留在画卷的上方，如图15.3.1所示。图15.3.1 “展开的画卷”最终效果 实例过程实例过程（1）启动Flash 8应用程序，进入其工作界面。（2）按“Ctrl+J”组合键弹出“文档属性”对话框，将其背景设置为黑色，如图15.3.2所示。设置完成后单击“确定”按钮。图15.3.2 “文档属性”对话框（3）选择“文件”“导入”“导入到库”命令，弹出“导入到库”对话框，如图15.3.3所示。（4）选择需要的文件后，单击“打开”按钮，将该文件导入到“库”面板中。图15.3.3 “导入到库”对话框（5）按“Ctrl+F8”组合键，弹出“创建新元件”对话框，其参数设置如图15.3.4所示。（6）单击“确定”按钮后进入该影片剪辑元件的编辑区。（7）选择工具箱中的矩形工具，在元件编辑区中绘制一个矩形。打开“混色器”面板，设置其填充颜色，如图15.3.5所示。继续用矩形工具绘制一个小矩形，并将其填充为灰白渐变颜色，如图15.3.6所示。将两个矩形放置到合适的位置，这样，画轴就制作好了，如图15.3.7所示。图15.3.4 “创建新元件”对话框 图15.3.5 “混色器”面板（一）图15.3.6 “混色器”面板（二）图15.3.7 画轴（8）按“Ctrl+L”组合键打开“库”面板，将刚才导入的图片拖动到舞台上。选择工具箱中的任意变形工具，调整好其大小，然后将其放置到舞台的中心，如图15.3.8所示。图15.3.8 调整图像大小（9）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，然后将其命名为“右轴”。（10）将“库”面板中的画轴元件拖动到舞台上，并调整好位置，如图15.3.9所示。图15.3.9 添加右轴（11）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，然后将其命名为“左轴”。（12）继续将“库”面板中的画轴元件拖动到舞台上，并调整好位置，如图15.3.10所示。图15.3.10 添加左轴（13）单击“左轴”图层的第35帧，按“F6”键插入关键帧，移动左轴到如图15.3.11所示的位置。在第1帧到第35帧之间的任意帧单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令。（14）单击背景图层，再单击“时间轴”面板上的“插入图层”按钮，在背景层上插入一个新图层，并将其命名为“遮罩”。图15.3.11 移动左轴（15）选择工具箱中的矩形工具，绘制一个矩形，放置到如图15.3.12所示的位置。图15.3.12 绘制矩形（16）单击“遮罩”图层的第35帧，按“F6”键插入关键帧。选择工具箱中的任意变形工具，将矩形缩放到可以覆盖住画卷，如图15.3.13所示。在第1帧到第35帧之间单击任意一帧，在“属性”面板中将其补间选项设置为“形状”。图15.3.13 缩放矩形（17）选中遮罩图层，单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令。（18）选中“左轴”图层，继续插入一个新图层，将其命名为“文字”。（19）按“Ctrl+F8”组合键弹出“创建新元件”对话框，选中“图形”单选按钮，再单击“确定”按钮，进入图形元件的编辑区。（20）选择工具箱中的文字工具，设置好其属性，在编辑区中输入文字“梅花香自苦寒来”。（21）按两次“Ctrl+B”组合键打散文本。（22）选择工具箱中的墨水瓶工具，将其笔触颜色设置为黄色，在打散的文本上单击，为文本描上黄色的边框，然后按“Delete”键将其填充内容删除。（23）选择“修改”“形状”“将线条转换为填充”命令，将线条转换为填充。（24）选择“修改”“形状”“柔化填充边缘”命令，弹出如图15.3.14所示的对话框，设置好其参数后单击“确定”按钮，文字效果如图15.3.15所示。图15.3.14 “柔化填充边缘”对话框 图15.3.15 文字效果（25）单击“文字”图层的第35帧，按“F6”键插入关键帧。将“库”面板中的“文字”元件拖动到舞台的上方，如图15.3.16所示。然后单击“文字”图层的第55帧，按“F6”键插入关键帧，将文字移动到舞台中如图15.3.17所示的位置。图15.3.16 拖动文字到舞台上方 图15.3.17 拖动文字到舞台中（26）在第35帧到第55帧之间的任意帧上单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令。（27）单击第65帧，按“F6”键插入关键帧。在“属性”面板中将文字的Alpha值设置为0。用鼠标右键单击第55帧，在弹出的快捷菜单中选择“创建补间动画”命令。（28）分别在“背景”、“遮罩”、“左轴”、“右轴”图层的第65帧处按“F5”键插入帧，这时的“时间轴”面板如图15.3.18所示。至此，该动画就制作完成了，按“Ctrl+Enter”组合键进行测试，其效果如图15.3.1所示。图15.3.18 “时间轴”面板实例实例4 鼠标看图鼠标看图 实例目标实例目标本例将制作一个鼠标看图的效果。本例的制作用到了Flash中所有类型的元件：图形元件、按钮元件以及影片剪辑元件。通过本例的学习，可以让用户了解不同的元件类型之间相互转换的方法，并应用这种转换后，只要通过简单的操作步骤和极少的素材就可以制作出精美的动画效果。用户应该掌握这一技巧。实例内容实例内容 本例的效果为：画面的底部是一幅漂亮的图片，开始时它被一些红色的小球遮挡着看不到。当用鼠标在上面快速地划动时，随着鼠标划动的轨迹逐渐显示下面的图片，而在一定的时间后又逐渐闭合。最终效果如图15.4.1所示。图15.4.1 最终效果 实例过程实例过程（1）启动Flash 8，进入其工作界面。（2）按“Ctrl+N”组合键新建一个Flash文档。（3）按“Ctrl+J”组合键弹出“文档属性”对话框，其参数设置如图15.4.2所示。图15.4.2 “文档属性”对话框（4）设置完成后单击“确定”按钮。（5）按“Ctrl+F8”组合键弹出“创建新元件”对话框，选中“图形”单选按钮，并将其命名为“小球图形”，如图15.4.3所示。图15.4.3 创建图形元件（6）单击“确定”按钮，进入其编辑区。选择工具箱中的矩形工具，将其笔触颜色设置为无，将其填充颜色设置为红黑渐变色，如图15.4.4所示。然后绘制一个小矩形，如图15.4.5所示。图15.4.4 设置矩形颜色 图15.4.5 绘制矩形（7）按“Ctrl+F8”组合键弹出“创建新元件”对话框，选中“按钮”单选按钮，并将其命名为“小球按钮”，如图15.4.6所示。图15.4.6 创建按钮元件（8）单击“确定”按钮，进入其编辑区。按“Ctrl+L”组合键打开“库”面板，如图15.4.7所示，将刚才创建的图形元件拖动到编辑区中。（9）按“Ctrl+K”组合键打开“对齐”面板，如图15.4.8所示。单击该面板中的“水平中齐”按钮和“垂直中齐”按钮，将图形元件放置到按钮编辑区的中心位置。图15.4.7 “库”面板 图15.4.8 “对齐”面板（10）按“Ctrl+F8”组合键弹出“创建新元件”对话框，选中“影片剪辑”单选按钮，并将其命名为“小球影片”，如图15.4.9所示。图15.4.9 创建影片剪辑元件（11）单击“确定”按钮后进入其编辑区。将“库”面板中的“小球按钮”元件拖动到编辑区中。在第2帧处按“F6”键插入关键帧。单击“属性”面板中的“交换”按钮，弹出“交换元件”对话框，如图15.4.10所示。图15.4.10 “交换元件”对话框（12）选择“小球图形”选项，然后单击“确定”按钮，这时就将按钮元件交换成了图形元件。（13）单击第20帧，按“F6”键插入关键帧，然后在“属性”面板中将舞台上的图形的透明度设置为0，如图15.4.11所示。图15.4.11 “属性”面板（14）在第2帧到第20帧之间的任意帧单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，创建补间动画。（15）在第110帧和第128帧处插入关键帧。（16）选中第128帧，按照步骤（13）的方法将舞台上的图形的透明度设置为100%。（17）在第110帧到第128帧之间的任意帧单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，创建补间动画。（18）在第1帧处单击鼠标右键，弹出其快捷菜单，如图15.4.12所示。（19）选择“动作”命令，打开“动作”面板，输入stop()，如图15.4.13所示。这样，动画在第1帧处停止播放。图15.4.12 快捷菜单 图15.4.13 “动作”面板（20）用鼠标右键单击舞台上的按钮实例，在弹出的快捷菜单中选择“动作”命令，然后输入以下代码：On(rollout)gotoAndPlay(2);该段代码的含义是：当鼠标指针经过该按钮实例时，动画就会跳到第2帧并继续播放。（21）按“Ctrl+E”组合键返回到主场景。（22）选择“文件”“导入”“导入到库”命令，弹出“导入到库”对话框，如图15.4.14所示。选择一张精美的图片，然后单击“打开”按钮，将其导入到“库”面板中。图15.4.14 “导入到库”对话框（23）将导入的图片拖动到场景中。选中该图形，单击“对齐”面板中的“匹配宽和高”按钮，将该图片设置为舞台大小，然后将其放置到舞台的中心位置，如图15.4.15所示。（24）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层。图15.4.15 导入图片（25）单击图层1名称后面的按钮，使图形不显示。将“库”面板中的“小球影片”元件拖动到舞台上并布满整个舞台，如图15.4.16所示。至此，动画就制作完成了，按“Ctrl+Enter”组合键进行测试，效果如图15.4.1所示。图15.4.16 将影片剪辑元件布满整个舞台