动手实践：制作识图游戏案例

2023-11-17 理论教育版权反馈

【摘要】：图7.30 识图游戏1.设置“文档属性”启动Adobe Flash CS6后，新建一个文档，设置文档大小为720×576像素，背景为白色。执行“文件”→“保存”菜单命令，将新文档保存，并命名为“识图游戏”。图7.33 “底图”层布置图7.34 “背景”层布置Step3 新建“图层3”，并重新命名为“水果”。图7.35 属性面板的设置图7.36 影片剪辑实例名Step4 新建“图层4”，并重新命名为“actionscript”。图7.37 “actionscript”层第1帧脚本代码

【案例概述】

本案例使用ActionScript 3.0中的startDrag（）和stopDrag（）方法来实现鼠标点击拖拽对象进行移动，松开鼠标时停止拖拽的动画，同时，使用hitTestObject（）方法使拖拽对象与目标区域进行匹配。通过本案例的学习，读者可以掌握startDrag（）和stopDrag（）方法的使用，以及hitTestObject（）方法的使用，识图效果如图7.30所示。

图7.30 识图游戏

【实现过程】

1.设置“文档属性”

启动Adobe Flash CS6后，新建一个文档，设置文档大小为720×576像素，背景为白色。执行“文件”→“保存”菜单命令，将新文档保存，并命名为“识图游戏”。

2.制作所需元件

Step1 导入素材。执行“文件”→“导入”→“导入到库”菜单命令，在打开的“导入”对话框中选择与本案例相对应的素材文件夹的图片“1.png”～“8.png”、“bg1.png”～“bg8.png”，再次单击“打开”按钮。

Step2 新建影片剪辑，重新命名为p1_mc，将图片1.png拖放至舞台，使用对齐工具使其与舞台水平和垂直方向都对齐，即中心对齐，如图7.31所示。使用此方法，依次创建图片2.png～8.png的影片剪辑。

图7.31 影片剪辑“p1_mc”

图7.32 影片剪辑“bg1_mc”

提示：在使用对齐工具时，如果想让对象与舞台中心对齐的话，一定要勾选“与舞台对齐”选项，否则只是对象本身的对齐。

新建影片剪辑，重新命名为bg1_mc，将图片bg1.png拖放至舞台，使用对齐工具使其与舞台中心对齐，如图7.32所示。使用此方法，依次创建图片bg2.png～bg8.png的影片剪辑。

3.布置舞台场景(www.chuimin.cn)

Step1 将“图层1”重新命名为“底图”。使用“基本矩形工具”在舞台上绘制一个圆角矩形，并设置颜色为“#999999”，摆放至舞台的左上角，如图7.33所示。

Step2 新建“图层2”，并重新命名为“背景”。将影片剪辑“bg1_mc”～“bg8_mc”拖放至舞台，并摆放好位置，如图7.34所示。

图7.33 “底图”层布置

图7.34 “背景”层布置

Step3 新建“图层3”，并重新命名为“水果”。将影片剪辑“p1_mc”～“p8_mc”拖放至舞台，摆放好位置，并为这些影片剪辑元件在属性面板中进行实例命名，如图7.35和图7.36所示。

图7.35 属性面板的设置

图7.36 影片剪辑实例名

Step4 新建“图层4”，并重新命名为“actionscript”。单击第1帧，按【F9】键打开动作面板，为场景中p1_mc、p2_mc、p3_mc、p4_mc、p5_mc、p6_mc、p7_mc、p8_mc影片剪辑编写鼠标按下与弹起的事件监听器与对应函数的Actionscript，如图7.37所示。

图7.37 “actionscript”层第1帧脚本代码

【技术讲解】

动手实践：制作识图游戏案例

相关推荐