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.

Code:

<?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:

Code:

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:

Code:

//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.

Code:

<?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

Code:

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

Code:

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.

Code:

<?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>