Flex random image panels

For one of the website I develop with dreamweaver, I want to have a image bar with 3 cars, but this is not so difficult but I had some demands how this should work. The images of each car has to change every few seconds and it has to be random. When you click on one of the images and it has to redirect you to the right car page. The last thing I want is that the configuration of the images as to be done in a xml.
This is the power of Flex, you can make this in a few hours , an expert within a hour. Here is a picture of the result or go to the website and see it in action

Here is an example of the xml I use. I have a car element with the images as child
<br /><pictures><br /> <car name="Viper" description="Tsjechisch 450pk mitsubishi evo" url="http://www.sbsframes.nl/crossautos/auto1/crossautos_1.html" ><br /> <image id="1" url="viper/viper1.jpg"/><br /> <image id="2" url="viper/viper2.jpg"/><br /> <image id="3" url="viper/viper3.jpg"/><br /> <image id="4" url="viper/viper4.jpg"/><br /> </car><br /> <car name="Viper XL" description="Tsjechisch 470pk mitsubishi evo" url="http://www.sbsframes.nl/crossautos/auto3/crossautos_3.html" ><br /> <image id="1" url="viperxl/viperxl1.jpg"/><br /> <image id="2" url="viperxl/viperxl2.jpg"/><br /> <image id="3" url="viperxl/viperxl3.jpg"/><br /> <image id="4" url="viperxl/viperxl4.jpg"/><br /> <image id="5" url="viperxl/viperxl5.jpg"/><br /> </car><br /> <car name="Mamba" description="europees 2008 Roman Kalvoda frame" url="http://www.sbsframes.nl/crossautos/auto2/crossautos_2.html"><br /> <image id="1" url="mamba/mamba1.jpg"/><br /> <image id="2" url="mamba/mamba2.jpg"/><br /> <image id="3" url="mamba/mamba3.jpg"/><br /> <image id="4" url="mamba/mamba4.jpg"/><br /> </car> <br /></pictures><br />
Now let's look at the flex application xml. Globally this is what happens, I retrieve the xml and transform it to objects, start the timer which refresh the images. Last step is to add the code for redirecting to the right webpage when you click on an image.
This is code is not so dynamic, please update it and inform me about the changes.
<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" <br /> backgroundColor="#CCCCCC" borderColor="#B7BABC" creationComplete="timer();"><br /> <mx:Script><br /> <![CDATA[<br /> import mx.rpc.events.FaultEvent;<br /> import mx.rpc.events.ResultEvent;<br /><br /> private var car1Obj:Object;<br /> private var car1Images:Number;<br /> private var car1Last:Number = 0;<br /> private var car2Obj:Object;<br /> private var car2Images:Number;<br /> private var car2Last:Number = 0;<br /> private var car3Obj:Object;<br /> private var car3Images:Number;<br /> private var car3Last:Number = 0;<br /><br /> <br /> private function serv_result(evt:ResultEvent):void {<br /> var resultObj:Object = evt.result;<br /> /* Assign the values... */<br /> car1Obj = resultObj.pictures.car[0];<br /> car1Images = car1Obj.image.length<br /> image1.source = car1Obj.image[0].url;<br /> panel1.title = car1Obj.name;<br /> <br /> car2Obj = resultObj.pictures.car[1];<br /> car2Images = car2Obj.image.length<br /> image2.source = car2Obj.image[0].url;<br /> panel2.title = car2Obj.name;<br /> <br /> car3Obj = resultObj.pictures.car[2];<br /> car3Images = car3Obj.image.length<br /> image3.source = car3Obj.image[0].url;<br /> panel3.title = car3Obj.name;<br /> <br /> }<br /> // every second <br /> private var delay:uint = 1000;<br /> private var myTimer:Timer = new Timer(delay, 0);<br /> private var lastId:Number = 1;<br /> private function timer():void {<br /> // load the xml and transform to the car object<br /> serv.send();<br /> myTimer.start(); <br /> myTimer.addEventListener(TimerEvent.TIMER, timerHandler);<br /> }<br /> <br /> private function timerHandler(e:TimerEvent):void{<br /> // refresh the image one for one<br /> image_result(lastId);<br /> lastId++;<br /> if (lastId == 4) {<br /> lastId = 1;<br /> }<br /> }<br /><br /> // do a random image and it can not be the last image<br /> private function image_result(id:Number):void {<br /><br /> if ( id == 1 ){<br /> var random1:Number = Math.round(Math.random()*(car1Images-1) );<br /> while (random1 == car1Last) {<br /> random1 =Math.round(Math.random()*(car1Images-1) );<br /> }<br /> car1Last = random1;<br /> }<br /> if ( id == 2 ){<br /> var random2:Number = Math.round(Math.random()*(car2Images-1) );<br /> while (random2 == car2Last) {<br /> random2 =Math.round(Math.random()*(car2Images-1) );<br /> }<br /> car2Last = random2;<br /> }<br /> if ( id == 3 ){<br /> var random3:Number = Math.round(Math.random()*(car3Images-1) );<br /> while (random3 == car3Last) {<br /> random3 =Math.round(Math.random()*(car3Images-1) );<br /> }<br /> car3Last = random3;<br /> }<br /> // set the new image to the image component<br /> image1.source = car1Obj.image[car1Last].url;<br /> image2.source = car2Obj.image[car2Last].url;<br /> image3.source = car3Obj.image[car3Last].url;<br /><br /> }<br /> // when click go to the right url in the same browser session<br /> private function clickHandler(id:Number):void {<br /> var urlReq:URLRequest<br /> if ( id == 1 ) {<br /> urlReq = new URLRequest(car1Obj.url);<br /> } else if ( id == 2 ) {<br /> urlReq = new URLRequest(car2Obj.url);<br /> } else if ( id == 3 ) {<br /> urlReq = new URLRequest(car3Obj.url);<br /> }<br /> navigateToURL(urlReq, "_self"); <br /> } <br /> ]]><br /> </mx:Script><br /><br /> <!-- get the xml with the pictures --><br /> <mx:HTTPService id="serv" url="images.xml"<br /> resultFormat="object" result="serv_result(event);" /><br /><br /> <mx:VBox x="0" y="0" width="205" height="500"><br /><br /> <mx:Panel width="200" height="160" id="panel1" <br /> layout="absolute" <br /> color="#91280B"<br /> horizontalAlign="center" <br /> cornerRadius="15"<br /> backgroundColor="#A4A4A4" borderStyle="solid"><br /> <mx:Image x="0" y="0" id="image1" click="clickHandler(1);"<br /> width="100%" height="100%" maintainAspectRatio="true"<br /> horizontalAlign="center" scaleContent="false"<br /> showEffect="FadeInEffect" <br /> useHandCursor="true" buttonMode="true" mouseChildren="false"/><br /> </mx:Panel><br /> <mx:Panel width="200" height="160" id="panel2"<br /> layout="absolute" <br /> color="#91280B"<br /> horizontalAlign="center" <br /> cornerRadius="15"<br /> backgroundColor="#A4A4A4" borderStyle="solid"><br /> <mx:Image x="0" y="0" id="image2" click="clickHandler(2);"<br /> width="100%" height="100%" maintainAspectRatio="true"<br /> horizontalAlign="center" scaleContent="false"<br /> showEffect="FadeInEffect"<br /> useHandCursor="true" buttonMode="true" mouseChildren="false"/><br /> </mx:Panel><br /> <mx:Panel width="200" height="160" id="panel3"<br /> layout="absolute" <br /> color="#91280B"<br /> horizontalAlign="center" <br /> cornerRadius="15"<br /> backgroundColor="#A4A4A4" borderStyle="solid"><br /> <mx:Image x="0" y="0" id="image3" click="clickHandler(3);"<br /> width="100%" height="100%" maintainAspectRatio="true"<br /> horizontalAlign="center" scaleContent="false"<br /> showEffect="FadeInEffect"<br /> useHandCursor="true" buttonMode="true" mouseChildren="false"/><br /> </mx:Panel><br /> </mx:VBox><br /></mx:Application><br />

Here you can download the project.