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所示。如切一归I返青妙微ImIJl'T)11如出hCiWJIFlwh〔监用青竽刘制手Mt.]4串A141.2图14-10新建XML文件<?xmlversion="1.0"encoding="UTF-8"?><cars><ca门mage="images/car01.jpg"/><ca门mage="images/car02.jpg"/></cars>Q提示在XML文件中，image表示的是外部图像的地址。新建550X237像素的空白文档，在图层1的第1帧处打开【动作-帧】面板，并声明变量，代码如图14-11所示。装户由卡，国阵丹甘拿口中口m 通1wrXILJfRL:String..小。件地址：wrii?glLlJRL;QELReqx^st;wrBTLoader;QRLloafer.1var加以曲:=血 疗K/文件5varKnlLisrtzXULLst; ，，沛L文件列表Q凰民l-1d『7日共与行力拣昌列图14-11声明变量将光标置于第7行，创建侦听加载XML文件事件，该事件调用xmlLoader()函数，代码如图14-12所示。||电户由-7也统H甘赞©中口值 J率甯f*MLJffiL^oar.ml*;▲RNL文件地址nr]'：NLURL=TKWURLRtqLKSil'Kft._URL：l."诿取ENL文件坨址njL河deLn部□用Lm如Mu，XNLURL].,/从皿期载K)L文件njUiaijer.adiJEvant.List-eiw8ffivetit.mMFLETEp31工酬社鲸);//位所加就XHL交件工期£1IT图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<xmlList.length();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所示。（3）新建空白文档，在【文档属性】面板中设置舞台的大小及背景颜色，如图14-16所示。图14-18绘制白色直线（6）选择舞台中的所有图形，按F8快捷键将其转换为影片剪辑，并添加投影滤镜效果，如图14-19所示。图14-19添加滤镜效果A技巧>当为影片剪辑添加投影滤镜后，就可以将舞台背景颜色设置为白色，这样可以更清楚地查看投影效果。(7)新建图层2，在第1帧处打开【动作-帧】面板，并导入所要用到的类，代码如图14-20所示。图14-20导入类Tween类能够使用ActionScript，通过指定目标影片剪辑的属性在若干帧数或秒数中具有动画效果，从而对影片剪辑进行移动、调整大小和淡入淡出操作；easing属性用来设置动画的补间效果。提示(8)将光标置于第5行，声明变量，从URL加载XML文件，并侦听加载XML文件进度，代码如图14-21所示。电尸中"，住1阵近三寸◎⑪口因 、岸本好fflSysitri.uss3:dePa-2e=tiua;/^La=h和肆作系统使用的渔盲汗样一蚊"wrf国语TWeen;Tween;-virlmLfleTKt;T«tFleld=nwlartFleldQ;variraa-Ed-Mder!Leader.II10varxril”NLI11皿znlLimtiMLlEt.2vbtznlLw(fer;URLL:^i：kf=nt«URLLMderQ;XEilLsadtr.lead(newCIRLRe：questCl2£小=■-武力】r))://MURL加辨ML文件znlkiader.addEven.tLlErten.er©vent.iXIffLETE.,^alloaded).]f."仙所加载Khl■文件进度调用••-I aw-ISice：1用一第逋仃曲话灯八*28列图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<xmlList.length();i++){imageLoader=newLoader();imageLoader.load(newURLRequest(xmlList[i].attribute("thumb")));//读取元素的thumb属性imageLoader.x=25;//实例的X坐标imageLoader.y=i*126+25;//实例的Y坐标imageL =xmlList[i].attribute("image");//读取元素的image属性addChild(imageLoader);//将图像显示在舞台中imageLoader.addEventListener(MouseEvent.CLICK,showPicture);〃侦听鼠标单击小尺寸图像事件调用showPicture()函数}}67提示在该段代码中，分别从代表较小尺寸与较大尺寸的thumb与image属性中读取图像地址。(10)将光标置于第41行，创建showPicture()函数，该函数将相对应的大尺寸图像显示在舞台中，并以透明渐显的方式轮换，代码如下所示。functionshowPicture(event:MouseEvent):void{imageLoader=newLoader();imageLoader.load(newURLRequest());〃从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<xmlList.length();j++){if(xmlList[j].attribute("image") ==){imageText.text=xmlList[j];〃动态文本显示XML文件中文本节点的值}}fadeTween = newTween(imageLoader,"alpha",None.easeNone,0,1,1,true);〃图像以透明渐显的方式轮换2 (11)将光标置于第68行，设置动态文本的对齐方式，并将其显示在舞台中，代码如图14-22所示。

57典?0