trying to load function after tween completes[SOLVED]

[attaboy]

In the example below I have a simple sideshow. In the last line I try to make it run loadSlide() but I did something wrong. I just started learning greensock a couple of days ago so I'm purdy igirant. I'll see if I can find a tutorial that tells me what I need. In the mean time maybe someone will answer this post.

 

package com.droolpigs {

import com.greensock.*;

import com.greensock.easing.*;

import flash.display.*;

import flash.utils.*;

import flash.events.*;

import flash.net.*;

 

public class Slideshow1219 extends Sprite

{

var bars:Bars = new Bars();

var n:int = 0;

var intCurrentSlide:int;

var req:URLRequest;

var holder:Sprite = new Sprite();

var loader:Loader;

var rand:int;

var nxtNum:int;

var picNum:String;

var intSlideCount:int;

var xmlLoader:URLLoader; // slideshow xml loader

var xmlSlideshow:XML; // slideshow xml

var strXMLPath:String = "slideshow-data.xml";

var zzz:String;

var history:Array = new Array();

var timeline:TimelineMax=new TimelineMax({repeat:-1,repeatDelay:2.5,yoyo:true});

var duration:Number=.5;

 

 

public function Slideshow1219(){

nxtNum = rand + 10000;

picNum = intCurrentSlide.toString();

xmlLoader = new URLLoader();

xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);

xmlLoader.load(new URLRequest(strXMLPath));

}

 

 

private function onXMLLoadComplete(e:Event):void {

xmlLoader.removeEventListener(Event.COMPLETE, onXMLLoadComplete);

xmlSlideshow = new XML(e.target.data); // create new xml with the received data

intSlideCount = xmlSlideshow..image.length(); // get total slide count

loadSlide();

}

 

private function loadSlide():void {

rand = Math.ceil(Math.random()* intSlideCount);

trace("intSlideCount "+intSlideCount);

loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displaySlide);

zzz = xmlSlideshow..@src[rand].toString();

history.push(zzz);

trace("history "+history);

loader.load(new URLRequest(xmlSlideshow..@src[rand]));

}

 

private function displaySlide(e:Event = null):void {

holder.addChild(loader);

holder.mask=bars;

bars.cacheAsBitmap=true;

holder.cacheAsBitmap=true;

addChild(bars);

addChild(holder);

addChild(bars);

var timeline:TimelineMax=new TimelineMax({repeat:1,repeatDelay:1,yoyo:true,onComplete:loadSlide()});

var duration:Number=.5;

loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, displaySlide);

trace("loader.content "+loader.content);

holder.addChild(loader.content);

addChildAt(holder, 0);

if(holder.numChildren > 1){holder.removeChildAt(0);}

bars.width=holder.width;

bars.height=holder.height;

for (var count:Number = 1; count <=10; count++) {

var mc:MovieClip=bars["bar"+count];

timeline.append(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), -.4);

}

}

}

}

 

btw: if I remove the onComplete the tween works but just loads one slide. I want to load a slide, run the tween, load another slide ,etc..

[Carl]

try changing

 

var timeline:TimelineMax=new TimelineMax({repeat:1,repeatDelay:1,yoyo:true,onComplete:loadSlide()});

 

to

 

var timeline:TimelineMax=new TimelineMax({repeat:1,repeatDelay:1,yoyo:true,onComplete:loadSlide});

 

no parenthesiseeses after loadSlide

[attaboy]

Thanks! I should have thought of that. Now it works except that the tween only runs once. that is it runs loadSlide which loads a new image then it runs displaySlide but when in displaySlide it doesn't run the tween again like I want it to or rather it does run the tween but the tween doesn't tween it just sends it back to loadSlide and the process just keeps looping between the two functions like I want it to but still only one tween.

[Carl]

from looking at your code nothing is jumping out at me.

 

as you said the loadSlide, displaySlide, loadSlide, displaySide sequence appears to be working, so that means that the timeline is in fact playing as the onComplete is firing. Its just that you are not "seeing the tween".

 

what I would do is try to figure out what is working and not working. For instance...

 

is the tween playing, but masking isn't working?

is the tween playing but you can't see it cause it is on a level/depth beneath the holder?

 

I would probably start by getting rid of the masking and just trying to see if I can see solid bars moving.

Once I can see the bars, then I'd try to figure out why the masking isn't working.

 

the fact that it works for the first time makes me thinks things are "pretty right" and its gotta be something small that is getting in the way.

 

if you feel like posting a zip with just this functionality in place I'd take a look at it for you.

 

Carl

[attaboy]

If you set yoyo to false it works but I want to leave the yoyo effect in. I've attached the project minus the com folder.

[Carl]

cool. i'll look at it later tonight.

[Carl]

i think i got it.

one of the issues was holder.mask was set before holder.cacheAsBitmap.

i put the timeline creation in its own function so it is only created once.

 

check it out:

 

package {
		import com.greensock.*;
		import com.greensock.easing.*;
	import flash.display.*;
	import flash.utils.*;
	import flash.events.*;
	import flash.net.*;

public class Slideshow1219 extends Sprite
{
	var bars:Bars = new Bars();
	var n:int = 0;
	var intCurrentSlide:int;
	var req:URLRequest; 
		var holder:Sprite = new Sprite();
	var loader:Loader;
	var rand:int;
	var nxtNum:int;
	var picNum:String;
	var slideCount:int;
	var xmlLoader:URLLoader;   // slideshow xml loader
	var xmlSlideshow:XML;  // slideshow xml
	var strXMLPath:String = "slideshow-data.xml";
	var slideName:String;
	var history:Array = new Array();
	var duration:Number=.5;
	var prevSlide:String;
	var timeline:TimelineMax;


	public function Slideshow1219(){
			nxtNum = rand + 10000;     
		picNum = intCurrentSlide.toString();
		xmlLoader = new URLLoader();   
		xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
		xmlLoader.load(new URLRequest(strXMLPath));
		createTimeline();
	}


	private function onXMLLoadComplete(e:Event):void {
		xmlLoader.removeEventListener(Event.COMPLETE, onXMLLoadComplete);
		xmlSlideshow = new XML(e.target.data);     // create new xml with the received data
		slideCount = xmlSlideshow..image.length();   // get total slide count
		trace("slideCount "+slideCount);
		loadSlide();
	}

	private function loadSlide():void {
		prevSlide=history[history.length-1];
		rand = Math.ceil(Math.random()* slideCount - 1);  
		loader = new Loader();
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displaySlide);
 		slideName = xmlSlideshow..@src[rand].toString();
		trace("slideName "+slideName);
			if(slideName != prevSlide){
			history.push(slideName); 
			loader.load(new URLRequest(xmlSlideshow..@src[rand]));
		}else{
			loadSlide();
			}
	}


	private function createTimeline():void{
		timeline =new TimelineMax({repeat:1,repeatDelay:2,yoyo:true,onComplete:loadSlide, paused:true});
		for (var count:int = 1; count 				var mc:MovieClip=bars["bar"+count];
			trace("doing it");
			timeline.append(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), -.4);
		}
		}

	private function displaySlide(e:Event = null):void {
			holder.addChild(loader);

		bars.cacheAsBitmap=true;
		holder.cacheAsBitmap=true;
		holder.mask=bars;
		addChild(holder);
		addChild(bars);
			timeline.restart();
		var duration:Number=.5;
		loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, displaySlide);
		addChildAt(holder, 0);
		if(holder.numChildren > 1){holder.removeChildAt(0);}
		bars.width = holder.width;
		bars.height = holder.height;

//			timeline.insert(TweenMax.from(mc, 2, {alpha:0, ease:Cubic.easeOut}));
	}

}

}

[attaboy]

awsome!!! I owe you 1 beer.

[Carl]

i enjoyed fixing this. its really cool that you took something pretty small and were able to incorporate it into something much bigger. great job.

[Carl]

here is the fixed file all zipped up.

 

attaboy, someone on my site just asked for tips on how to use multiple images with the mega-mask effect.

 

i hope you don't mind them looking at your file for inspiration.

 

Carl

[shait]

Hi,

 

Im trying to figure how to disable showing random images but i have some problems. Can you please advice how to turn off random function, please.

 

Thx

BR

Shait

[Carl]

replace all the code in Slideshow1219.as with:

 

package 
{
import com.greensock.*;
import com.greensock.easing.*;
import flash.display.*;
import flash.utils.*;
import flash.events.*;
import flash.net.*;

public class Slideshow1219 extends Sprite
{
	var bars:Bars = new Bars();
	var n:int = 0;
	var intCurrentSlide:int;
	var req:URLRequest;
	var holder:Sprite = new Sprite();
	var loader:Loader;
	var rand:int;
	var nxtNum:int;
	var picNum:String;
	var slideCount:int;
	var xmlLoader:URLLoader;// slideshow xml loader
	var xmlSlideshow:XML;// slideshow xml
	var strXMLPath:String = "slideshow-data.xml";
	var slideName:String;
	var history:Array = new Array();
	var duration:Number = .5;
	var prevSlide:String;
	var timeline:TimelineMax;

	var currentSlide:Number = 0;

	public function Slideshow1219()
	{
		nxtNum = rand + 10000;
		picNum = intCurrentSlide.toString();
		xmlLoader = new URLLoader();
		xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
		xmlLoader.load(new URLRequest(strXMLPath));
		createTimeline();
	}


	private function onXMLLoadComplete(e:Event):void
	{
		xmlLoader.removeEventListener(Event.COMPLETE, onXMLLoadComplete);
		xmlSlideshow = new XML(e.target.data);// create new xml with the received data
		slideCount = xmlSlideshow..image.length();// get total slide count
		trace("slideCount "+slideCount);
		loadSlide();
	}

	private function loadSlide():void
	{

		loader = new Loader();
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displaySlide);
		slideName = xmlSlideshow.. @ src[currentSlide].toString();
		trace("slideName "+slideName);

		loader.load(new URLRequest(xmlSlideshow..@src[currentSlide]));

		if (currentSlide 			{
			currentSlide++;

		}
		else
		{
			currentSlide = 0;

		}



	}


	private function createTimeline():void
	{
		timeline = new TimelineMax({repeat:1,repeatDelay:2,yoyo:true,onComplete:loadSlide,paused:true});
		for (var count:int = 1; count 			{
			var mc:MovieClip = bars["bar" + count];
			trace("doing it");
			timeline.append(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), -.4);
		}
	}

	private function displaySlide(e:Event = null):void
	{
		holder.addChild(loader);

		bars.cacheAsBitmap = true;
		holder.cacheAsBitmap = true;
		holder.mask = bars;
		addChild(holder);
		addChild(bars);
		timeline.restart();
		var duration:Number = .5;
		loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, displaySlide);
		addChildAt(holder, 0);
		if (holder.numChildren > 1)
		{
			holder.removeChildAt(0);
		}
		bars.width = holder.width;
		bars.height = holder.height;

		//         timeline.insert(TweenMax.from(mc, 2, {alpha:0, ease:Cubic.easeOut}));
	}
}
}

 

the loadSlide() function was the only thing updated and I added a currentSlide var up top.

 

Carl

[mickey]

here is the fixed file all zipped up.

 

attaboy, someone on my site just asked for tips on how to use multiple images with the mega-mask effect.

 

i hope you don't mind them looking at your file for inspiration.

 

Carl

 

 

this is sik, very inspiring, thanks for uploading