Flash实验十三 拼图游戏.docVIP

实验十三 拼图游戏 实验目的： 鼠标的拖动与释放动作函数的使用 不同元件之间进行转换的方法 分割图形的技巧 实验环境与设备： 安装有Photoshop CS3的计算机。 实验原理： 通过标尺锁定、元件转换、色调效果、“对齐”面板等来制作拼图效果，当用户用鼠标拖动某一图块时，该图块随之移动，直到释放鼠标后，图块停放在相应的位置，最终拼成一幅完整的图片，最终效果如图1所示。 图1 最终效果图 实验考核： 实例的源文件（.fla）以及.jpg格式的文件+实验报告。 实验步骤： 1: 步骤1：打开Flash CS3应用程序。 步骤2：按“Ctrl+N”组合键新建一个Flash文档。 步骤3：按“Ctrl+J”组合键弹出“文档属性”对话框，其参数设置如图2所示，设置完成后单击“确定”按钮。 图2 “文档属性”对话框 步骤4:选择“文件”→“导入”→“导入到库”命令，弹出“导入到库”对话框，如图3所示。选择一幅汽车图片后单击“打开”按钮，将其导入到“库”面板中。 图3 “导入到库”对话框 步骤5:按“Ctrl+L”组合键打开“库”面板，如图4所示，将刚才导入的图片拖动到舞台上。 　 步骤6:按“Ctrl+K”组合键打开“对齐”面板，如图5所示。分别单击“对齐”面板中的“匹配宽和高”按钮、“水平中齐”按钮和“垂直中齐”按钮，使其和舞台尺寸相匹配且放置于舞台的中心位置，如图6所示。 图4 “库”面板 图5 “对齐”面板 步骤7:选中导入的图片，按“Ctrl+B”组合键将其打散。 　 步骤8:选择工具箱中的直线工具，然后在图片上绘制两条垂直的直线作为图片的分割线，如图7所示。 步骤9:“视图”→“标尺”命令，将标尺显示出来，然后移动鼠标指针到标尺上，分别拖出一条竖向和一条横向的辅助线，并与前面的直线重合。 步骤10:视图”→“辅助线”→“锁定辅助线”命令，将辅助线锁定。 步骤11:选择工具箱中的选择工具，按住“Ctrl”键的同时将刚才绘制的直线向左拉出一个小三角，如图8所示。然后释放“Ctrl”键，将小三角调整为圆形，如图9所示。 步骤12:按照同样的方法对另外的三条直线进行调整，效果如图10所示。 步骤13:选择工具箱中的选择工具，单击左上角的图块，按“F8”键，弹出“转换为元件”对话框，其参数设置如图11所示，然后单击“确定”按钮将其转换为一个图形元件。 　　步骤14按照步骤13的方法，将其余的三个图块按顺时针方向分别将其转换为图形元件，并命名为gra2，gra3和gra4。 图10 调整完后的效果 图11 “转换为元件”对话框 步骤15:用鼠标双击用来分割图片的直线，按“Delete”键将其删除。 　　步骤16:将图层1命名为“图块”，如图12所示。 步骤17:单击“时间轴”面板上的“插入图层”按钮插入一个新图层，并将其命名为“背景”，然后将其拖动到“图块”图层的下方，如图13所示。 步骤18:单击“图块”图层，按住“Shift”键的同时单击4个图块，将其全部选中，按“Ctrl+C”组合键将其复制到剪贴板上，然后单击“背景”图层，按“Ctrl+V”组合键进行粘贴。 　　步骤19:单击“图块”图层上的gra1实例，按“F8”键弹出“转换为元件”对话框，其参数设置如图14所示。单击“确定”按钮后就将其转换为but1按钮元件。 图14 将图形元件转换为按钮元件 步骤20:按照步骤19的方法将其余的gra2，gra3和gra4实例分别转换为but2，but3和but4按钮元件。 　　步骤21:单击选中“but1”，按“F8”键弹出“转换为元件”对话框，其参数设置如图15所示。单击“确定”按钮后就将其转换为mv1影片剪辑元件。 步骤22:按照步骤21的方法将其余的but2，but3和but4实例分别转换为mv2，mv3和mv4影片剪辑元件。　　步骤23:选中“背景”图层，单击左上方的图块，按“F8”键弹出“转换为元件”对话框，其参数设置如图16所示。单击“确定”按钮后就将其转换为d1影片剪辑元件。 图16 将图形转换为影片剪辑元件 步骤24:按照步骤23的方法将其余的三个图块分别转换为d2，d3和d4影片剪辑元件。 步骤25:单击选中d1实例，在“属性”面板中将其“颜色”选项设置为“色调”，透明度为50%，如图17所示。 步骤26:按照步骤（25）的方法设置d2，d3和d4实例，完成后效果如图18所示。这样做的目的是为了给观众玩游戏时提供一个参照。这样，背景就制作完成了。 步骤27:接下来编写动作代码，选中“图块”图层，用鼠标双击左上角的图块，进入其影片剪辑的编辑界面，按“F9”键打开“动作”面板，然后输入以下代码。 o