FLASH CS3实例电子相册.docx
- 文档编号:26121701
- 上传时间:2023-06-17
- 格式:DOCX
- 页数:10
- 大小:1.57MB
FLASH CS3实例电子相册.docx
《FLASH CS3实例电子相册.docx》由会员分享,可在线阅读,更多相关《FLASH CS3实例电子相册.docx(10页珍藏版)》请在冰豆网上搜索。
FLASHCS3实例电子相册
FLASHCS3实例电子相册
在Flash中制作电子相册有两种方法:
一种是将所有的素材图像导入其中,制作各种图片显示效果动画,然后通过鼠标单击事件跳转到指定的动画帧,完成电子相册效果;另一种是通过XML文件与ActionScript语言的结合,无需将素材图像导入即可实现电子相册效果,如图14-8所示。
图14-8电子相册
技能要点-通过XML文件加载外部图像
XML是一种具有数据描述功能、高度结构性及可验证性的语言,可以在任何平台或者语言之间交换数据,且允许用户自行定义标记和属性。
ActionScaript3.0包含一组基于ECMAScriptforXML(E4X)规范的类,这些类包含用于处理XML数据的强大且易用的功能。
下面将通过ActionScript3.0语言读取XML文件中的图像地址,并将图像显示在舞台中。
首先准备两张素材图像,并将其放置在images文件夹下,如图14-9所示。
图14-9准备素材图像
新建记事本文档,在其中输入如下代码。
然后将其保存为car.xml文件,如图14-10所示。
图14-10新建XML文件
xmlversion="1.0"encoding="UTF-8"?
>
在XML文件中,image表示的是外部图像的地址。
新建550×237像素的空白文档,在图层1的第1帧处打开【动作-帧】面板,并声明变量,代码如图14-11所示。
图14-11声明变量
将光标置于第7行,创建侦听加载XML文件事件,该事件调用xmlLoader()函数,代码如图14-12所示。
图14-12侦听加载XML文件
将光标置于第16行,创建xmlLoader()函数,该函数通过读取XML文件中图像的地址,将图像显示在舞台中,代码如下所示。
functionxmlLoader(event:
Event):
void{
myXML=newXML();
myXML=XML(event.target.data);
//将下载的文本转换为XML实例
xmlList=myXML.children();
//XML文件中的元素节点
for(vari:
int=0;i //循环读取XML文件中的所有元素节点 varimgLoader=newLoader(); imgLoader.load(newURLRequest(xmlList[i].attribute("image"))); //加载XML实例中元素的image属性 imgLoader.x=i*275; //实例的X坐标 imgLoader.y=0; //实例的Y坐标 addChild(imgLoader); //将实例显示在舞台中 } } children()方法是按XML对象的显示顺序列出其子项。 一个XML子项就是一个XML元素、文本节点、注释或处理指令;xmlList.length()方法表示XML文件中元素节点的个数。 至此通过XML文件加载外部图像就制作完成了,保存文档后预览动画,如图14-13所示。 图14-13预览效果 制作过程 首先通过读取XML中小尺寸图像的地址,将小图像显示在舞台的左侧,然后利用鼠标单击事件,再将相对应的大尺寸图像显示在舞台的右侧。 (1)在同一文件夹下创建2个文件夹。 其中,images文件夹用来放置较大尺寸的图像;thumbnails文件夹用来放置较小尺寸的图像,如图所14-14所示。 图14-14准备素材图像 (2)新建记事本文档,在其中输入如下代码。 然后将其保存为images.xml文件,如图14-15所示。 图14-15新建XML文件 xmlversion="1.0"encoding="utf-8"? > (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类能够使用ActionScript,通过指定目标影片剪辑的属性在若干帧数或秒数中具有动画效果,从而对影片剪辑进行移动、调整大小和淡入淡出操作;easing属性用来设置动画的补间效果。 (8)将光标置于第5行,声明变量,从URL加载XML文件,并侦听加载XML文件进度,代码如图14-21所示。 图14-21侦听加载XML文件 (9)将光标置于第18行,创建xmlLoaded()函数,该函数通过XML文件中的图像地址加载图像,并将其显示在舞台中,然后侦听鼠标单击事件,调用showPicture()函数,代码如下所示。 functionxmlLoaded(event: Event): void { xml=XML(event.target.data); //将下载的文本转换为XML实例 xmlList=xml.children(); for(vari: int=0;i { imageLoader=newLoader(); imageLoader.load(newURLRequest(xmlList[i].attribute("thumb"))); //读取元素的thumb属性 imageLoader.x=25; //实例的X坐标 imageLoader.y=i*126+25; //实例的Y坐标 imageLoader.name=xmlList[i].attribute("image"); //读取元素的image属性 addChild(imageLoader); //将图像显示在舞台中 imageLoader.addEventListener(MouseEvent.CLICK,showPicture); //侦听鼠标单击小尺寸图像事件调用showPicture()函数 } } 在该段代码中,分别从代表较小尺寸与较大尺寸的thumb与image属性中读取图像地址。 (10)将光标置于第41行,创建showPicture()函数,该函数将相对应的大尺寸图像显示在舞台中,并以透明渐显的方式轮换,代码如下所示。 functionshowPicture(event: MouseEvent): void { imageLoader=newLoader(); imageLoader.load(newURLRequest(event.target.name)); //从URL加载大尺寸图像 imageLoader.x=210; //大尺寸图像的X坐标 imageLoader.y=25; //大尺寸图像的Y坐标 addChild(imageLoader); //将大尺寸图像显示在舞台中 imageText.x=imageLoader.x; //动态文本的X坐标 imageText.y=490; //动态文本的Y坐标 for(varj: int=0;j { if(xmlList[j].attribute("image")==event.target.name) { imageText.text=xmlList[j]; //动态文本显示XML文件中文本节点的值 } } fadeTween=newTween(imageLoader,"alpha",None.easeNone,0,1,1,true); //图像以透明渐显的方式轮换 } (11)将光标置于第68行,设置动态文本的对齐方式,并将其显示在舞台中,代码如图14-22所示。 图14-22显示动态文本 (12)完成代码添加后,保存文档。 按快捷键Ctrl+Enter测试影片,发现方框右侧为空白,当单击左侧的任何一个图像,其相同图像的较大尺寸则在右侧显示,如图14-23所示。 图14-23预览效果
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FLASH CS3 实例 电子相册