SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,508
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)

    Question flickering in image slideshow

    I'm using Flashdevelop (because I just want to fool around a bit and see if flash is something I want to spend time on), and that means it's really hard to find any useful tutorials, manuals and scripts. Because almost all assume one is using CS3, and are full of design modes, .fla's, timelines and frames

    Still, I managed to put together (copying and pasting from several scripts and tutorials I found online) an image slideshow.
    I've got two image items covering each other. In the one on top I load the first picture, in the one on the bottom I load the picture to be shown next. Then the pic on top fades out, showing the pic underneath. Once the pic on top has become invisible, I load the pic now visible in the top image item and make it visible again. Then, I load the pic to be shown next in the bottom image item, etc. etc.

    The images nicely fade one into the other when I click on the image.
    But... when I make the slideshow advance on it's own, I get an ugly flickering between pics. One pic fades into the second pic. Then for a fraction of a sec I see the black background (the pic disappears), it reappears and fades into the next pic.

    I guess it's got something to do with the fade out effect duration, or the fact that the goNext() is executed before the pic is completely loaded? Or maybe it's something else, who knows. I'm a complete newbie when it comes to this stuff

    Here's my code:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    	<mx:Script>
    		<![CDATA[
    			
    			import com.asfusion.controls.PhotoshowImage;
    
    			//all the pictures
    			private var pictures:Array;
    			//the index of the array that corresponds to currently shown picture
    			private var currentIndex:int = 0;
    			
    			//actual picture object that is currently shown
    			[Bindable]
    			private var currentPicture:PhotoshowImage;
    			//next picture object to be shown
    			[Bindable]
    			private var nextPicture:PhotoshowImage;
    			
    			// show the next picture in set
    			private function goNext():void
    			{
    				if (currentIndex < pictures.length - 1){
    					currentIndex++;
    				}
    				else {
    					currentIndex = 0;
    				}
    				switchPictures();
    			}
    
    			private function switchPictures():void{
    				fadeIn.end();
    				fadeOut.end();
    				nextPicture = pictures[currentIndex];
    				picture2.visible = false;			
    			}
    
    			private function updateCurrentPicture():void{
    				
    				//set the current picture based on current index
    				currentPicture = pictures[currentIndex];
    				goNext(); // without this line I have to click on the image and it all works smoothly
    			}
    				
    			//this changes the set of pictures
    			public function set dataProvider(value:Array):void
    			{
    				pictures = value;
    				currentIndex = 0;
    				updateCurrentPicture();
    			}
    			
    			public function  get dataProvider():Array
    			{
    				return pictures;
    			}
    		]]>
    	</mx:Script>
    	
    	<mx:Resize id="resize" />
    
    	<!-- taken straight from the docs -->
    	<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
    	
    	<mx:Canvas styleName="imageHolder" id="canvasSlideshow" width="500" height="500" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    		<mx:ProgressBar styleName="progressBar" id="progressBar1" source="{picture1}" visible="{progressBar1.percentComplete != 100}" />
    		<mx:ProgressBar styleName="progressBar" id="progressBar2" source="{picture2}" visible="{progressBar2.percentComplete != 100}" />
    		 
    		<mx:Image top="0" left="0" id="picture1" 
    			source="assets/photoshow/images/{nextPicture.name}" click="goNext()"/>
    		<mx:Image top="0" left="0" id="picture2" 
    			source="assets/photoshow/images/{currentPicture.name}" hideEffect="{fadeOut}" 
    			complete="picture2.visible = true" click="goNext()"/>
    	</mx:Canvas>
    	
    	<mx:Text y="320" height="47" styleName="caption"
    		text="{currentPicture.caption}" />
    
    </mx:Canvas>
    Any ideas?

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,508
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    I changed the way the code works: now I load a picture in one of the two image elements (depending on a flag), and then fade out of the old pic and fade into the new pic. This takes care of the flickering.

    But now I have two other problems:
    1) I can't get the slideshow to start on loading. I have to click once on the first image to get the show started.
    2) I can't get the text element (containing the caption) to fade in and out with the image.

    My modified code:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    	<mx:Script>
    		<![CDATA[
    			
    			import com.asfusion.controls.PhotoshowImage;
    
    			//all the pictures
    			private var pictures:Array;
    			//the index of the array that corresponds to currently shown picture
    			private var currentIndex:int = 0;
    			
    			//picture for image 1
    			[Bindable]
    			private var currentPicture1:PhotoshowImage;
    			//picture for image 2
    			[Bindable]
    			private var currentPicture2:PhotoshowImage;
    			
    			//visible image indicator (0 = image 1, 1 = image 2)
    			private var currentPicCounter:int = 0;
    			
    			// calculated picture size
    			private var picHeight:Number = 0;
    			private var picWidth:Number = 0;
    			
    			// calculate the pictures width
    			private function calcSize(height:Number, width:Number):void
    			{
    				var valCanvasRatio:Number = canvasSlideshow.width / canvasSlideshow.height;
    				var valPicRatio:Number = width / height;
    				
    				if (valPicRatio > valCanvasRatio) {
    					picWidth = canvasSlideshow.width;
    					picHeight = Math.floor(height * canvasSlideshow.width / width);
    				} else {
    					picWidth = Math.floor(width * canvasSlideshow.height / height);
    					picHeight = canvasSlideshow.height;
    				}
    			}
    				
    			// show the next picture in set
    			private function goNext():void
    			{
    				if (currentIndex < pictures.length - 1){
    					currentIndex++;
    				}
    				else {
    					currentIndex = 0;
    				}
    
    				if (currentPicCounter == 0) {
    					fadeIn1.end();
    					fadeOut2.end();
    					currentPicture2 = pictures[currentIndex];
    					calcSize(currentPicture2.height, currentPicture2.width);
    					picture2.height = picHeight;
    					picture2.width = picWidth;
    					caption.text = "pic " + currentIndex + " : " + currentPicture2.caption;
    					picture1.visible = false;			
    					picture2.visible = true;		
    					currentPicCounter = 1;
    				} else {
    					fadeIn2.end();
    					fadeOut1.end();
    					currentPicture1 = pictures[currentIndex];
    					calcSize(currentPicture1.height, currentPicture1.width);
    					picture1.height = picHeight;
    					picture1.width = picWidth;
    					caption.text = "pic " + currentIndex + " : " + currentPicture1.caption;
    					picture2.visible = false;			
    					picture1.visible = true;			
    					currentPicCounter = 0;
    				}
    			}
    
    			//this changes the set of pictures
    			public function set dataProvider(value:Array):void
    			{
    				pictures = value;
    				currentIndex = 0;
    				currentPicture1 = pictures[currentIndex];
    				calcSize(currentPicture1.height, currentPicture1.width);
    				picture1.height = picHeight;
    				picture1.width = picWidth;
    				caption.text = currentPicture1.caption;
    // If I add a goNext() here, it starts with the 2nd pic instead of the first, but it doesn't start the slideshow. I still have to click once.
                                    // goNext();  
    			}
    			
    			public function  get dataProvider():Array
    			{
    				return pictures;
    			}
    		]]>
    	</mx:Script>
    	
    	<mx:Resize id="resize" />
    
    	<!-- taken straight from the docs -->
    	<mx:Fade id="fadeOut1" duration="2000" alphaFrom="1.0" alphaTo="0.0" />
        <mx:Fade id="fadeIn1" duration="2000" alphaFrom="0.0" alphaTo="1.0" effectEnd="goNext()"/>
    	<mx:Fade id="fadeOut2" duration="2000" alphaFrom="1.0" alphaTo="0.0" />
        <mx:Fade id="fadeIn2" duration="2000" alphaFrom="0.0" alphaTo="1.0" effectEnd="goNext()"/>
    	
    	<mx:Canvas styleName="imageHolder" id="canvasSlideshow" width="500" height="500" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    		<mx:Canvas id="canvasMobile" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    			<mx:ProgressBar styleName="progressBar" id="progressBar1" source="{picture1}" visible="{progressBar1.percentComplete != 100}" />
    			<mx:ProgressBar styleName="progressBar" id="progressBar2" source="{picture2}" visible="{progressBar2.percentComplete != 100}" />
    		 
    			<mx:Image id="picture1" styleName="picture"
    				source="assets/photoshow/images/{currentPicture1.name}" hideEffect="{fadeOut1}" showEffect="{fadeIn1}" 
    				click="goNext()"/>
    			<mx:Image id="picture2" styleName="picture"
    				source="assets/photoshow/images/{currentPicture2.name}" hideEffect="{fadeOut2}" showEffect="{fadeIn2}" 
    				click="goNext()" visible="false" />
    	
    			<mx:Text y="320" height="47" styleName="caption" id="caption"
    				text="" />
    		</mx:Canvas>
    	</mx:Canvas>
    			
    </mx:Canvas>
    Is there anybody that can help me, please?

  3. #3
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not related to your topic unfortunately, but you can download a free trial version of Flash from Adobe.

    It has full functionality for the 30 days of the trial.

    That might give you a better insight into whether Flash is something you "want to spend time on".

    *EDIT* - after a quick look on adobe.com, it seems like they've taken CS3 down and we have to wait until CS4 is available. That's a bit stupid!

    *EDIT* - oh no, looks like you can still get it: https://www.adobe.com/cfusion/tdrc/i...oduct=flashpro

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,508
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ferrari_chris View Post
    Not related to your topic unfortunately, but you can download a free trial version of Flash from Adobe.

    It has full functionality for the 30 days of the trial.

    That might give you a better insight into whether Flash is something you "want to spend time on".

    *EDIT* - after a quick look on adobe.com, it seems like they've taken CS3 down and we have to wait until CS4 is available. That's a bit stupid!

    *EDIT* - oh no, looks like you can still get it: https://www.adobe.com/cfusion/tdrc/i...oduct=flashpro
    Yeah I know. Thanks for the link, I couldn't find it on the adobe site and got it from somewhere else. But it installed everything, except for the CS3 itself

    I'll try to download from this link when I'm at home and got the time

  5. #5
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,508
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    I found the solution to my first question: how to start the slideshow on loading. I added the following line to the canvasSlideShow mx:canvas element:
    Code:
    creationComplete="goNext()"
    I'm still looking to fade in and out of the caption together with the image. Any ideas?


Bookmarks

Posting Permissions

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