2 Replies Latest reply on May 24, 2007 6:20 AM by ara_charu

    Display images

    thedex1
      Hi,
      How are all of you. I have an application that read external XML data about images and display the images with effects as it jumps to the next image.
      I did it as follows:
      I created four states with each state is responsible to load the single image. I create effects when changing one state to another state. But this is very hard coded since if I add more images to the external XML file, they won't show up in application since my application read first four images and load them to four states.

      I want this:
      The application should read all the images from the external XML file whether they are 4 or 40. Display each image one by one after regular interval of time say 5 seconds. I also want my application to play some effect such as Fade while jumping to the next image.
      Is it possible to this with only one state???
      Any hint or suggestions will be greatly appreciated.

      Best Regards,
      ..::DW
        • 1. Re: Display images
          ntsiii Level 3
          I can't help with the effects, but you can loop over the xml nodes and set the image.source to change the images.

          Tracy
          • 2. Re: Display images
            ara_charu Level 1
            hey there...
            this is the mxml component i have created...whcich shows image slide show on button click
            -----------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="578" height="388">
            <mx:Script>
            <![CDATA[
            import mx.events.FlexEvent;
            import mx.effects.Fade;
            import mx.controls.Alert;
            private var slideshowTimer:Timer;
            private var controlsTimer:Timer;
            private function showNextImage():void
            {
            fadeIn.play([image2],false)
            }
            private function showThirdImage():void
            {
            fadeOut.play([image2],false)
            fadeIn.play([image3],false)
            }

            private function showFirstImage():void
            {
            image2.visible=false;
            fadeOut.play([image3]);
            fadeIn.play([image1])
            }



            ]]>
            </mx:Script>
            <mx:Fade id="fadeOut" duration="1000" alphaTo="0.0"
            />
            <mx:Fade id="fadeIn" duration="1000" alphaTo="1.0"
            />




            <mx:Canvas id="can" x="17" y="100" width="481" height="278" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
            <mx:Image alpha="0" source="@Embed(source='/asset/plat_main_er.jpg')" id="image3" x="0" y="0" height="92" effectEnd="fadeOut.play([image3]);fadeIn.play([image1])" />
            <mx:Image alpha="0" source="@Embed(source='/asset/round.gif')" id="image2" x="0" y="0" effectEnd="{fadeOut.play([image2],false);fadeIn.play([image3],false)}" />
            <mx:Image source="@Embed(source='/asset/oval.gif')" id="image1" x="0" y="0" effectEnd="{fadeIn.play([image2],false)}"/>
            </mx:Canvas>
            <mx:CheckBox id="cb1" label="visible" selected="true"/>
            <mx:Button label="play the movie" id="bttn" click="{fadeOut.play([image1])}" x="208" y="30"/>
            </mx:Canvas>
            ------------------
            P.S:call this component from a main application file and chang image sources to what u have.

            BUG:after the last image i want to view the first image back.So if anyone can help fix that bug.Pls help me.....i need the help...or something better code