...

View Full Version : issue with slideshow in flex



akuria
01-20-2012, 07:44 AM
i am trying to do a slideshow in flex and i am having issues with it. here is what i have so far in the code. i am using SDK 4.5 in flash builder.


<?xml version="1.0" encoding="utf-8"?>
<s:Application
creationComplete="init()"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
minWidth="546"
minHeight="362">

<fx:Script>
<![CDATA[
import mx.effects.Fade;

private var pictures : Array = ["venue1.jpg","venue2.jpg","venue3.jpg","venue4.jpg"];
private var index:int = 0;

private function init():void{

img.setStyle("completeEffect",Fade);

img.load("assets/"+pictures[0]);
index ++;

var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER,changeImage);
timer.start();
}

private function changeImage(e:TimerEvent):void{
img.load("assets/"+pictures[index]);
if(index<pictures.length -1)
index++;
else
index=0;
}
]]>
</fx:Script>

<s:Image id="img" x="0" y="0" width="546" height="362"/>

</s:Application>

i am getting this error message:

1061: Call to a possibly undefined method load through a reference with static type spark.components:Image

the 2 lines i am getting this message are:


img.load("assets/"+pictures[0]);
img.load("assets/"+pictures[index]);

adaminaudio
01-20-2012, 03:13 PM
Hi there, yeah the console is telling you that the 'load()' method doesn't exist for the image class.

What you should try to do instead is put it in a Loader object and when the image loads, you make the image source the content of the loader:





//get your loader ready...
private function init(){
var imageLoader:Loader = new Loader();
imageLoader.loaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
var req:URLRequest = new URLRequest('assets/' + pictures[index]);
imageLoader.load(new URLRequest('assets/' + pictures[index]);
}


//don't forget to add your handler (for the complete event when the image is finished loading)
private function onImageLoaded(event:Event):void
{

//I could have this part wrong, can't remember now :)
image.source = event.target.content;

}


I hope that helps!

-Adam

akuria
01-21-2012, 05:47 AM
i tried that code and it didnt work. could you put up the entire code if you didnt? or maybe give me more directions? thanks.

adaminaudio
01-21-2012, 12:41 PM
Hi again,

Sorry about that.. I've forgotten how Flex's image control works (that and I wasn't at a FLEX machine before

Try something like this: (NOTE: I used the mx version of 'Image' and I make use out of FLEX's data Binding with the imageSource variable

this worked for me when I tested it, give it a shot.




<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
creationComplete="init()"
minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.effects.Fade;

[Bindable]
private var imageSource:String = "";

private var pictures : Array = ["venue1.jpg","venue2.jpg","venue3.jpg","venue4.jpg"];
private var index:int = 0;

private function init():void{

img.setStyle("completeEffect",Fade);
imageSource = 'assets/' + pictures[index++];
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER,changeImage);
timer.start();
}

private function changeImage(e:TimerEvent):void{
imageSource = ("assets/"+pictures[index++]);
if(index>pictures.length -1)
index=0;
}
]]>
</fx:Script>

<mx:Image source="{imageSource}" id="img" x="0" y="0" width="546" height="362"/>



</s:Application>

akuria
01-22-2012, 04:50 AM
sorry I am still a little bit of a noob when it comes to flex. what do i need to data bind and how do i set that up?

adaminaudio
01-22-2012, 05:34 AM
it's in the bottom part of the code. The image's source property is bound to the imageSource property


source="{imageSource}"

data binding is more useful when using things like array collections. Here, you just have to make sure that the images source property is being set wherever you want it


img.source = 'assets/venue1.jpg';

have you tried out that code in my previous post? you should just be able to post the whole thing into your app.

akuria
01-24-2012, 04:34 AM
it worked. thank you for the help.

akuria
02-09-2012, 02:58 AM
I got the slideshow to work. Now my next question is; how do you make it fade from image to image? right now one image fades out then the new image fades in with a delay between each image showing the white background each time. I want it to fade from one image to the other without the white of the background showing up.


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
creationComplete="init()"
minWidth="546"
minHeight="362">

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.effects.Fade;

[Bindable]
private var imageSource:String = "";

private var pictures : Array = ["venue1.jpg","venue2.jpg","venue3.jpg","venue4.jpg","venue5.jpg","venue6.jpg","venue7.jpg","venue8.jpg","venue9.jpg","venue10.jpg","venue11.jpg","venue12.jpg","venue13.jpg","venue14.jpg","venue15.jpg","venue16.jpg","venue17.jpg","venue18.jpg"];
private var index:int = 0;

private function init():void{

img.setStyle("completeEffect",Fade);
imageSource = 'assets/' + pictures[index++];
var timer:Timer = new Timer(4000);
timer.addEventListener(TimerEvent.TIMER,changeImage);
timer.start();
}

private function changeImage(e:TimerEvent):void{
imageSource = ("assets/"+pictures[index++]);
if(index>pictures.length -1)
index=0;
}
]]>
</fx:Script>

<mx:Image source="{imageSource}" id="img" x="0" y="0" width="546" height="362"/>



</s:Application>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum