FLASH CS3 实例 电子相册

FLASH CS3 实例电子相册

在Flash中制作电子相册有两种方法：一种是将所有的素材图像导入其中，制作各种图片显示效果动画，然后通过鼠标单击事件跳转到指定的动画帧，完成电子相册效果；另一种是通过XML文件与ActionScript语言的结合，无需将素材图像导入即可实现电子相册效果，如图14-8所示。

图14-8 电子相册

技能要点-通过XML文件加载外部图像

XML是一种具有数据描述功能、高度结构性及可验证性的语言，可以在任何平台或者语言之间交换数据，且允许用户自行定义标记和属性。

ActionScaript3.0包含一组基于ECMAScript for XML (E4X)规范的类，这些类包含用于处理XML数据的强大且易用的功能。下面将通过ActionScript3.0语言读取XML文件中的图像地址，并将图像显示在舞台中。

首先准备两张素材图像，并将其放置在images文件夹下，如图14-9所示。

图14-9 准备素材图像

新建记事本文档，在其中输入如下代码。然后将其保存为car.xml文件，如图14-10所示。

图14-10 新建XML文件

在

的地址。

新建550×237像素的空白文档，在图层1的第1帧处打开【动作-帧】面板，并声明变量，代码如图14-11所示。

图14-11 声明变量

将光标置于第7行，创建侦听加载XML文件事件，该事件调用xmlLoader()函数，代码如图14-12 所示。

图14-12 侦听加载XML文件

将光标置于第16行，创建xmlLoader()函数，该函数通过读取XML文件中图像的地址，将图像显示在舞台中，代码如下所示。

children()

顺序列出其子项。

一个

理指令；

文件中元素节点的个数。

至此通过XML文件加载外部图像就制作完成了，保存文档后预览动画，如图14-13所示。

图14-13 预览效果

制作过程

首先通过读取XML中小尺寸图像的地址，将小图像显示在舞台的左侧，然后利用鼠标单击事件，再将相对应的大尺寸图像显示在舞台的右侧。

（1）在同一文件夹下创建2个文件夹。其中，images文件夹用来放置较大尺寸的图像；thumbnails文件夹用来放置较小尺寸的图像，如图所14-14所示。

图14-14 准备素材图像

（2）新建记事本文档，在其中输入如下代码。然后将其保存为images.xml文件，如图14-15所示。

（3）新建空白文档，在【文档属性】面板中设置舞台的大小及背景颜色，如图14-16所示。

图14-16 新建Flash文件

（4）选择【矩形工具】，在舞台中绘制一个无填充的白色矩形，并设置笔触高度为8；接合类型为尖角，如图14-17所示。

图14-17 绘制矩形

（5）选择【线条工具】，在坐标轴X为180像素的位置绘制垂直白色线条，如图14-18所示。

图14-18 绘制白色直线

（6）选择舞台中的所有图形，按F8快捷键将其转换为影片剪辑，并添加投影滤镜效果，如图14-19所示。

图14-19 添加滤镜效果

当为影片剪辑添加投影滤镜后，就可以将

舞台背景颜色设置为白色，这样可以更清

楚地查看投影效果。

（7）新建图层2，在第1帧处打开【动作-帧】面板，并导入所要用到的类，代码如图14-20所示。

图14-20 导入类

Tween

定目标影片剪辑的属性在若干帧数或

秒数中具有动画效果，

进行移动、调整大小和淡入淡出操作；

easing

（8）将光标置于第5行，声明变量，从URL加载XML文件，并侦听加载XML文件进度，代码如图14-21所示。

图14-21 侦听加载XML文件

（9）将光标置于第18行，创建xmlLoaded()函数，该函数通过XML文件中的图像地址加载图像，并将其显示在舞台中，然后侦听鼠标单击事件，调用showPicture()函数，代码如下所示。

在该段代码中，分别从代表较小尺寸与较

大尺寸的

地址。

（10）将光标置于第41行，创建showPicture()函数，该函数将相对应的大尺寸图像显示在舞台中，并以透明渐显的方式轮换，代码如下所示。

（11）将光标置于第68行，设置动态文本的对齐方式，并将其显示在舞台中，代码如图14-22所示。

图14-22 显示动态文本

（12）完成代码添加后，保存文档。按快捷键Ctrl＋Enter测试影片，发现方框右侧为空白，当单击左侧的任何一个图像，其相同图像的较大尺寸则在右侧显示，如图14-23所示。

图14-23 预览效果