图片走廊

 图片走廊由两块组成，在主界面上面，分为预览区和浏览区，预览区由一个panel组件组成，里面的repeater组件和tile组件是核心部分。图片的源由一个xml指定，在初始化的时候进行httpservice发送请求。同时编写一个函数，当点击图片的时候，浏览区的image组件加载图片！<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Style source="assets/mycss.css"/> <mx:Script> <!--[CDATA[ import mx.effects.Fade; import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; private var urlLoader:URLLoader; private var urlRequest:URLRequest; [Bindable] private var arr:ArrayCollection; private function init():void { myHS.send(); } private function myHsFaultHanlder(e:FaultEvent):void { } private function myHsResultHandler(e:ResultEvent):void { // trace(e.currentTarget); // image_repeater.dataProvider=myHS.lastResult.dataConfig.image; // trace(image_repeater.currentItem); } private function getImage(e:Event):void { preImage.load(e.currentTarget.getRepeaterItem()); } ]]--> </mx:Script> <mx:HTTPService id="myHS" url="dataConfig/dataConfig.xml" fault="myHsFaultHanlder(event)" result="myHsResultHandler(event)"/> <mx:HDividedBox y="20" horizontalCenter="0"> <mx:Panel id="thumbNails_panel" x="10" y="10" width="351" height="538" layout="absolute" backgroundAlpha="0.37"> <mx:Tile width="100%" height="100%"> <mx:Repeater id="image_repeater" dataProvider="{myHS.lastResult.dataConfig.image}"> <mx:VBox x="10" y="10" width="75" height="75" horizontalAlign="center" verticalAlign="middle"> <mx:Image height="50" width="50" source="{image_repeater.currentItem}" rollOutEffect="{out}" rollOverEffect="{over}" click="getImage(event)"/> </mx:VBox> </mx:Repeater> </mx:Tile> </mx:Panel> <mx:Panel width="770" height="538" layout="absolute" backgroundAlpha="0.39"> <mx:Image id="preImage" horizontalCenter="0" verticalCenter="0" width="700" height="480" showEffect="{Fade}" addedEffect="{Fade}" hideEffect="{Fade}"/> </mx:Panel> </mx:HDividedBox> <mx:Parallel id="over" duration="400"> <mx:Glow alphaFrom="1" alphaTo="0" blurXFrom="0" blurXTo="50" blurYFrom="0" blurYTo="50" color="#ffffff"/> <mx:Zoom zoomHeightFrom="1" zoomHeightTo="1.2" zoomWidthFrom="1" zoomWidthTo="1.2"/> </mx:Parallel> <mx:Parallel id="out" duration="100"> <mx:Zoom zoomHeightFrom="1.2" zoomHeightTo="1" zoomWidthFrom="1.2" zoomWidthTo="1"/> </mx:Parallel> </mx:Application> 链接地址：http://www.521flex.cn/mygallenry/mygallenry.html