[as3编程教学]图片gallery制作高级教程

《[as3编程教学]图片gallery制作高级教程》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Gallery是图片切换展示的一种交互作品，多用于网站首页或摄影网站的图片展示。本篇教程既然叫“高级教程”，自然是要做一些高级的东西了：我们首先给图片集做一个单独的类，然后遮罩和按钮都动态创建，用文档类來管理和控制。我们的效果就是，舞台上是空的，图层也是空的，但是运行后会展现一个Gallery在舞台上，这就是高级之，处。完成效果如下图所示：工具/原料FlashCS3（及其以上版本），PhotoShop（任意版本）10张图片步骤/方法1同样为了显示原创性和本人没有偷懒，这次我们用10张猫猫的图片來做这个效果，并在舞台上新建一个10帧

2、的影片剪辑，分别是准备的10张图片。2我们实现移动的原理依旧是在容器中创建5个元件，三个可见，两个在首尾不可见位置，每次左移最前面的那个跑到最后去，并显示成下一张的内容；每次右移最后面那张跑到最前面去，并显示前一张的内容，这样就实现了循环滚动展示，而容器的位置每次都要被重置到初始位置。3要过年了嘛，我们把左右按钮做成红色的，然后我们给左右按钮一个连接类名BtnLeft和BtnRight,如果弹出警告直接点击确定，系统会在运行时H动创建一个空类给它，当然这是内部机制，你完全不用管。4按钮有了类，下面我们要写图片集类，图片集有一些属性

3、，比如自己的页码，以及属于H己的鼠标事件，单击后告诉主类自己被单击，然后主类收到后耍控制文本框来显示这条单击信息。图片集类写111来如下图:package{importflash.display.MovieClip;importflash.events.DataEvent;importflash.events.MouseEvent;/***图片集类*@authorTiger*2016/1/1523:21*/publicclassPicltemextendsMovieClip{privatevarpage:int;publicfun

4、ctionPicltcm(){page=0this.addEventListener(MouseEvent.CLICK,clickPic);}privatefunctionclickPic(e:MouseEvent):voidvarmidEvt:DataEvent=newDataEvent(ClickPicItem);dispatchEvent(midEvt);}/***外部设置页面显示*@paramindex*/publicfunctionsetPage(index:int):void{page=index;gotoAndSto

5、p(index);}}}〃我们用了一个DataEvent来发送单击事件，通过一个setPage的公共方法设置页面信息。图片类写好后库中图片影片剪辑右键链接绑定类，a不赘述。5接下来写文档类，按照结构和思路，这个Gallery的创建过程是这样的：创建容器，创建图片，创建遮罩，创建文本框，创建按钮，施加控制！所以文档类执行吋严格按照这个顺序完成。变量定义的部分如下:privatevarmcCup:Sprite;〃容器privatevarmcMask:Sprite;〃遮罩privatevartxtInfo:TextField;//信息文

6、本显示privatevarleftBtn:BtnLeft;//右按钮privatevarrightBtn:BtnRight;//右按钮privatevarpicNum:int=10;//图片数量privatevarpicList:Array=[];//图片存储数组privatevarpicWidth:int=160;〃图片宽度privatevarpicHeight:int=50;〃图片高度privatevarisMoving:Boolean=false;//是否在运动中privatevarleftlndex:int=1;//左侧图

7、片页码构造两数结构如卞:publicfunctionMain():void{stagc.showDcfaultContcxtMcnu=false;createPic();createMask();createInfoText();createTwoBtn();}〃建立图片privatefunctioncreatePic():voidmcCup=newSprite();mcCup.x=cupInitX;mcCup.y=142;this.addChild(mcCup);for(vari:int=0;i<5;i++){varmidPic

8、:PicItem=newPicltem();midPic.x=-picWidth+i*picWidth;midPic.y=0;midPic.setPage(i+1);midPic.addEventListener(ClickPicItem$getC