Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    issue with slideshow in flex

    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]);

  • #2
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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>
    Last edited by adaminaudio; 01-21-2012 at 01:55 PM.

  • Users who have thanked adaminaudio for this post:

    akuria (01-24-2012)

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it worked. thank you for the help.

  • #8
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •