照片墙

FlashCS3入门照片墙动画

照片墙动画就是在同一个平面中随意展示照片，并且可以任意叠加的效果，如图82-1

所示。该动画主要实现两个功能：一个是拖动图像；一个是图像排列顺序。在制作过程中，

需要将照片图像制作成影片剪辑元件，并且设置实例名称，才可以正确地添加动作代码。

图82-1照片墙动画效果

练习要点

影片剪辑

拖动事件

对象位置方法tChildIndex()

练习过程

（1）创建【帧频】为36fps、【尺寸】为700×500像素空白文档，并且将素材图像导入

到【库】面板中，如图82-2所示。

将动画文档的【帧频】设置为36帧/秒，是

为了提高拖动图像的速度。

图82-2导入图像文件

（2）按快捷键Ctrl＋F8创建影片剪辑元件“矩形”，在编辑模式中，使用【矩形工具】

绘制无边框的深灰色矩形，如图82-3所示。

图82-3创建矩形影片剪辑

灰色矩形绘制时，不用精确其尺寸。因为该影片剪辑在应用时还需要根据需要重新设置

不同的尺寸。

（3）按快捷键Ctrl＋F8创建影片剪辑元件tu01，在影片剪辑编辑模式中，将【库】面

板中的素材图像拖入舞台中心，如图82-4所示。

图82-4创建影片剪辑tu01

（4）在图层最下方新建“图层2”，将元件“矩形”拖至舞台，设置其属性如图82-5

所示。

图82-5设置实例“矩形”属性

（5）在图层最下方新建“图层3”，原位置复制“图层2”中的实例，并且设置【颜色】

为无。然后添加【模糊】滤镜，设置参数如图82-6所示。

图82-6添加模糊滤镜

（6）在【库】面板中直接复制影片剪辑tu01为tu02后，替换素材图像完成创建。然

后使用相同的放置创建影片剪辑tu03，如图82-7所示。

图82-7创建其他影片剪辑

（7）返回场景，将制作的照片元件分别拖入舞台，并且设置不同的实例名称，如图82-8

所示。

影片剪辑tu02

影片剪辑tu03

图82-8将影片剪辑拖入场景

（8）新建图层“动作”，选中空白关键帧后打开【动作-帧】面板。在其中输入鼠标拖

动事件语句，如图82-9所示。

该拖动事件语句，是为场景中的3个实例

添加了相同的鼠标按下与鼠标释放事件。

图82-9添加拖动事件语句

（9）这时保存文档后测试影片，发现单击并且拖动某个图像后，动画中的所有图像同

时被移动，如图82-10所示。

图82-10同时拖动多个图像

（10）将光标放置在大括号右侧按Enter键，输入如下代码，设置被拖动的事件源在显

示容器中的位置。

functionstartDragHandler(event:MouEvent):void

{

varmySpr:Sprite=tTargetas

Sprite;

tChildIndex(mySpr,numChildren-1);

rag();

}

（11）然后在鼠标释放事件的中同样加入函数Sprite()与变量对象mySpr，使其鼠标拖

动与释放同一个事件源，如图82-11所示。

图82-11添加决定照片位置的语句

（12）动作添加完成后保存文档，按快捷键Ctrl＋Enter测试影片，这时单击并且拖动

不同的照片，都会分别被移动，并且放置在其他照片上方，如图82-12所示。

图82-12测试影片