<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute" viewsourceurl="srcview/index.html"><br /> <br /> <!-- This XML is our static model, where we specify the titles and source paths of our images, you can always replace this with your dynamically loaded XML --><br /> <mx:xml id="myGallery"><br /> <gallery><br /> <item><br /> <title>"I love you, chennai"</title><br /> <source>chennai1.jpg</source><br /> </item><br /> <item><br /> <title>"dumbledore dies, nao feed meh</title><br /> <source>chennai2.jpg</source><br /> </item><br /> <item><br /> <title>"AHHH!" Too many stairz!"</title><br /> <source>chennai3.jpg</source><br /> </item><br /> <item><br /> <title>Kitteh couldn't resist</title><br /> <source>chennai1.jpg</source><br /> </item><br /> <item><br /> <title>Mono-rail cat test-deploys</title><br /> <source>chennai2.jpg</source><br /> </item><br /> </gallery><br /> </mx:XML><br /><br /> <!-- In Actionscript arrays start at 0, so 0 is actually your first item Specify how many images you have in your gallery--><br /> <mx:number id="totalItems">4</mx:Number><br /> <!-- Specify the starting point, this will hold the value of the Image you're currently viewing --><br /> <mx:number id="currentItem">0</mx:Number><br /> <br /> <!-- We define 2 sequences which simply do the following 1. Fades out image 2. When the fade out effect is complete, it either goes to the next or previous item 3. Fades in image --><br /> <mx:sequence id="previousImage" target="{galleryImage}"><br /> <mx:fade alphafrom="1" alphato="0" duration="1000" effectend="{currentItem = currentItem - 1}"><br /> <mx:fade alphafrom="0" alphato="1" duration="1000"><br /> </mx:Sequence><br /> <mx:sequence id="nextImage" target="{galleryImage}"><br /> <mx:fade alphafrom="1" alphato="0" duration="1000" effectend="{currentItem = currentItem + 1}"><br /> <mx:fade alphafrom="0" alphato="1" duration="1000"><br /> </mx:Sequence><br /> <br /> <mx:vbox horizontalcenter="0"><br /> <!-- The text component displays the title of our image by binding to the XML. notice than currentItem changes depending on our navigation. --><br /> <mx:text text="{myGallery.item.title[currentItem]}"><br /> <mx:hbox><br /> <!-- We use the previous and next buttons as our navigation, we do the following to these components. 1. Define an inline event handler 2. Make sure that if the currentItem is smaller or greater than 0 or totalItems that it is enabled/disabled --><br /> <mx:button id="prevBtn" label="Previous" click="{previousImage.play(); prevBtn.enabled = false; nextBtn.enabled = false;}" enabled=""> 0}"/><br /> <mx:button id="nextBtn" label="Next" click="{nextImage.play(); prevBtn.enabled = false; nextBtn.enabled = false;}" enabled="{currentItem < totalItems}"><br /> </mx:HBox><br /> <mx:canvas width="500" height="500" clipcontent="true"><br /> <!-- Our gallery image is bound to our XML, notice that currentItem changes depending on our navigation. --><br /> <mx:image id="galleryImage" data="{myGallery.item.source[currentItem]}"><br /> </mx:Canvas><br /> </mx:VBox><br /> <br /></mx:Application><br />
0 comments:
Post a Comment