43看图拼图.docx

43看图拼图.docx

《43看图拼图.docx》由会员分享，可在线阅读，更多相关《43看图拼图.docx（13页珍藏版）》请在冰点文库上搜索。

43看图拼图

43看图拼图

制作：

江西省新余市孔目江区欧里中学谢绚

⑴动画原理分析：

本动画使用一幅家装设计图制作一个点击并拖动图片，若拖动的位置正确，则自动吸附，不正确则返回到原位置的效果。

先导入一幅图片并打散成图形，用线条工具将图形分为6部分，分别转换为影片剪辑元件并赋予不同的实例名称且设置透明度为0%；再用一个图层排列6个相同大小的图形也转换为影片剪辑，同样赋予不同的实例名称，成为可拖动的对象；接着在“行为”面板给6个可拖动的影片剪辑赋予脚本命令：

点击哪个图片哪个图片就置于所有图片的最上面；再在帧上赋予场景鼠标加载影片剪辑的脚本命令：

鼠标点击后可拖动图片，停止拖动图片就自动停止下来，松开鼠标时若拖动对象碰撞到指定的对象上图片自动吸附，没有碰撞到指定的对象上则返回到原来的位置，从而实现了有趣的交互性动画的制作效果。

⑵重点难点：

用图片本身作碰撞对象，行为面板的使用，影片剪辑置顶的脚本设置，影片剪辑.onPress/Release=function（）脚本语句的使用，拖动与停止对象的脚本设置，碰撞对象的脚本设置

⑶制作过程：

1设置场景：

在场景的空白处右击／文档属性，将长宽设置成：

800*600，背景颜色：

#006600，并将场景缩小到原来的70%，确定。

2导入图片：

文件／导入／导入到库，在“看图拼图”的文件夹下找到素材文件夹，选中“家装设计图”，点击打开。

3排列图片：

将素材图片拖放到场景中并复制一个，将两者都缩小并排列成如图所示，同时输入说明文字

4打散分图：

选中左上角大图按ctrl+B一次打散成图形，选择笔触为红色，用线条工具将图形分为6部分

5复制图形：

插入图层2，将图层1的帧复制并粘贴到图层2，同时删除图层2内的左下小图片和说明文字

6转换剪辑并赋予实例名称：

在图层2的每个图形上右击／转换为元件，类型：

影片剪辑，同时展开属性面板，给每个影片剪辑赋予一个实例名称：

mc1,mc2...mc6

7转换剪辑并赋予实例名称再设置透明度：

隐藏图层2，将图层1的每个图形也转换成影片剪辑，展开属性面板，赋予每个影片剪辑实例名称：

p1,p2...p6，再设置属性面板内“颜色”下的alpha值都为0%，这样图层1每个影片剪辑设置成为透明，同时删除两个图层内的红画线。

8画出放图框：

锁定两个图层，插入图层3，将笔触颜色设置为2的红色，在大图片边缘画出一个没有填充色的矩形

9添加剪辑置顶命令：

锁定图层1和图层3，点击场景中图层2的每个影片剪辑，展开“行为”面板，再点击下面的“+”（添加行为），影片剪辑／移到最前，弹出“移到最前”框，默认mc1,mc2...mc6，确定。

这时，在动作面板内就给每个影片剪辑上添加了点击剪辑时剪辑自动移到最前的脚本命令。

10设置鼠标“按下”命令：

点击场景中的每个影片剪辑，再点击行为面板的“事件”下“释放时”右侧的下拉箭头，在弹出的菜单内选择“按下时”

11在帧上添加脚本：

插入图层4，点击第一帧，在动作面板内输入加载mc1影片剪辑函数的脚本和注释

12继续复制脚本：

拖光标选中上面的脚本，复制并粘贴到下面，修改mc1,p1为mc2,p2，两者的起始坐标修改为x3,y3x4,y4

13继续复制完所有的脚本：

继续复制并粘贴前面的脚本，同时修改mc,p的序号并修改x,y两者的起始坐标值，最后一个影片剪辑修改为mc6,p6，起始坐标修改为x11,y11及x12,y12

14设置可拖动剪辑的初始位置：

将左侧大方框内的各个可拖动影片剪辑放置到右侧适当层叠

15测试动画：

控制／测试影片，点击右侧的每个小图片，点击的对象都会自动出现在最上面，拖动对象到红色的框内，若不是正确的位置则自动返回原来位置，若位置正确则自动吸附。

⑷技巧综述：

1用图片本身作碰撞对象：

前面我们在制作遮罩动画时，如果遮罩和被遮罩的对象一样大时，就可以直接将同一个对象复制并粘贴到另一个图层，转换成遮罩层，形成遮罩和被遮罩的关系，这样做的好处是：

他们的大小是天衣无缝的吻合，不必再画出一个带颜色的矩形去缩放大小和对齐。

同样，本动画的上下两层的影片剪辑大小也是一样大，而且对齐工整，只需要将图层1的图形复制并粘贴到图层2，再各自转换成影片剪辑并赋予不同的实例名称，设置不同的透明度值，同样的图形就转换成了不同的影片剪辑元件，操作起来简捷方便，但对于初学者来说，需要理解它们已经是不同的对象和作用：

首先它们的实例名称不同，其次是固定位置对象和可拖动的对象，再次是透明度的不同，这样给人一种“隐藏”的感觉。

2行为面板的使用：

行为面板，就是预先编写的动作脚本。

它使你可以将动作脚本编码的强大功能、控制能力灵活地添加到Flash文档中，而不必自己创建动作脚本代码。

添加行为的方法：

选中要添加行为的对象／打开“行为”面板，在“行为”面板上单击【添加行为】按钮，选择相应的行为项目／在“行为”面板上打开“事件”下拉菜单，选择适当的触发事件。

例如本动画为影片剪辑添加“移到最前”的命令：

点击场景中图层2的每个影片剪辑，展开“行为”面板，再点击下面的“+”（添加行为）/影片剪辑／移到最前，弹出“移到最前”框，默认mc1,mc2...mc6影片剪辑，确定。

这时，在动作面板内就给每个影片剪辑上添加了点击剪辑时剪辑自动移到最前的脚本命令。

⑴控制影片剪辑的行为（5类12项）：

①调整叠放层次：

包括“上移一层”、“下移一层”、“移到最前”、“移到最后”。

2拖动影片剪辑：

包括“开始拖动影片剪辑”、“停止拖动影片剪辑”。

3加载图像。

4加载或复制影片剪辑：

包括“加载外部影片剪辑”、“直接复制影片剪辑”、“卸载影片剪辑”。

5跳转播放：

“转到帧或标签并在该处播放”、“转到帧或标签并在该处停止”。

⑵控制视频的行为：

控制嵌入视频的行为有“停止”、“后退”、“快进”、“播放”、“显示”、“暂停”、“隐藏”等共7项。

⑶控制声音的行为：

控制声音的行为有“从库加载声音”、“停止声音”、“停止所有声音”、“加载MP3流文件”、“播放声音”等共5项。

3对象置顶的脚本设置：

这是对影片剪辑用于调整叠放层次的脚本一种，当我们选择适当的触发事件时，例如“按下时”，“移入时”，“移出时”“拖过时”“拖离时”等，在生成文件后，影片剪辑在按下，拖过等触发后，自动显示在所有影片剪辑的最顶端，这时，如果打开动作面板，就会发现里面自动添加这些脚本命令：

on（press）{

//BringtoFrontBehavior

mx.behaviors.DepthControl.bringToFront（this）;

//EndBehavior

}

4影片剪辑.onPress/Release=function（）脚本语句的使用：

这是用于加载按压（释放）影片剪辑函数的脚本命令。

它的结构形式是：

影片剪辑放于最前，再加点（英语状态），再加onPress（按压鼠标）／Release（释放鼠标）等于function（）；这是一个常用的加载函数的脚本命令。

在实际使用时，常成对出现并附于条件语句

if（条件）{

语句1；}else{

语句2；

}

如果条件小括号内的条件成立（true），则Flash将运行条件后面花括号内的语句1，if语句中的条件不成立时（false），执行else大括号中的语句2。

5拖动与停止对象的脚本设置：

拖动影片剪辑和停止拖动影片剪辑，也是对影片剪辑常用的执行语句之二，用startDrag（true/false），stopDrag（）语句来表示，前者在括号内还需要添加“可执行”（true真），和“不可执行”（false假）的命令，有时指定拖动某个对象，如startDrag（this），本动画两者都需要反应出来，则采用了将影片剪辑添加在拖动语句之前的表达式：

this.startDrag（false）;这里，this指的是当前拖动的对象，也就是mc.onPress=function（）加载的函数对象mc，而后者没有说明什么参数，直接是一个空括号。

6碰撞对象的脚本设置：

碰撞语句在拖动动画中使用较多，它的基本结构是：

拖动影片剪辑+点+hitTest（被撞目标）

拖动对象必须是影片剪辑，被撞目标可以是影片剪辑，按钮，场景中的一个位置（一个坐标点）等。

本例中我们使用了this.hitTest（p1），this是指当前拖动对象，去碰撞被撞的目标p1（影片剪辑），其另一个语句是没有碰撞到：

!

this.hitTest（p1），在语句前加“!

”表示运算符执行取反操作，其用法相当于if语句结构中的语句2脚本命令。

使用本语句，通常用if的条件语句结构（以上第4点的条件句型）来说明碰撞与否的操作。

这个语句通常用在制作课件拖动某个答案，游戏的拖动等，是一个常见实用的脚本命令之一，

将以上几点综合起来，对理解本动画的脚本命令就非常容易了。

⑸视频教学：

见“看图拼图.wmv”视频文件。