Jump to content
GreenSock

Aksel

Need some feedback on how to improve my code and to pause:)

By Aksel, in GSAP (Flash). Views: 2,016

Recommended Posts

Posted

Hi,

 

I've created a slideshow using your fine tweenlite class. First off...it's probably created really poorly regarding effectiveness and should be using arrays instead of hard code each function to each seperate movieclip. But my coding skills are not quite up there and had to do it this way :) Any tips here are appriciated though.

 

And a question I have is...I need to make a mouse event listener which pauses the current tween when the mouse if rolling over the scene. Any advice on how to achieve this?

 

Here is my code:

 

package{

import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.AutoAlphaPlugin;

TweenPlugin.activate([AutoAlphaPlugin]);
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;


public class mySlideshow extends MovieClip {


	// ---------------------------------------------------------------------------------------------------------------------------------------

	private var bilde1_adresse:String = "some-url-here";
	private var bilde2_adresse:String = "some-url-here";
	private var bilde3_adresse:String = "some-url-here";
	private var bilde4_adresse:String = "some-url-here";

	private var fadeTid:int = 2; // fading time
	private var pauseTid:int = 3; // pausetime
	private var bildeAntall:int = 3; // 3 or 4 images ? 


	// ------------------------------------------------------------------------------------------------------------------------------------

	private var bildeKlipp:MovieClip;
	private var bildeKlipp2:MovieClip;
	private var bildeKlipp3:MovieClip;
	private var bildeKlipp4:MovieClip;

	private var request1:URLRequest = new URLRequest(bilde1_adresse);
	private var request2:URLRequest = new URLRequest(bilde2_adresse);
	private var request3:URLRequest = new URLRequest(bilde3_adresse);
	private var request4:URLRequest = new URLRequest(bilde4_adresse);


	public function mySlideshow():void{

		bildeKlipp = new bilde1();
		bildeKlipp.x = 0;
		bildeKlipp.y = 0;
		bildeKlipp.alpha = 1;
		bildeKlipp.buttonMode = true;
		bildeKlipp.addEventListener(MouseEvent.CLICK, clickHandler);
		bildeKlipp.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
		bildeKlipp.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
		bildeKlipp.name = "bilde1";
		this.addChild(bildeKlipp);



		bildeKlipp2 = new bilde2();
		bildeKlipp2.x = 0;
		bildeKlipp2.y = 0;

		bildeKlipp2.buttonMode = true;
		bildeKlipp2.addEventListener(MouseEvent.CLICK, clickHandler2);
		bildeKlipp2.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
		bildeKlipp2.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
		bildeKlipp2.name = "bilde2";
		this.addChild(bildeKlipp2);
		TweenLite.to(bildeKlipp2,0,{autoAlpha: 0});


		bildeKlipp3 = new bilde3();
		bildeKlipp3.x = 0;
		bildeKlipp3.y = 0;
		bildeKlipp3.buttonMode = true;
		bildeKlipp3.addEventListener(MouseEvent.CLICK, clickHandler3);
		bildeKlipp3.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
		bildeKlipp3.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
		bildeKlipp3.name = "bilde3";
		this.addChild(bildeKlipp3);	
		TweenLite.to(bildeKlipp3,0,{autoAlpha: 0});

		if(bildeAntall==4){
		bildeKlipp4 = new bilde4();
		bildeKlipp4.x = 0;
		bildeKlipp4.y = 0;
		bildeKlipp4.buttonMode = true;
		bildeKlipp4.addEventListener(MouseEvent.CLICK, clickHandler4);
		bildeKlipp4.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
		bildeKlipp4.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
		bildeKlipp4.name = "bilde4";
		this.addChild(bildeKlipp4);	
		TweenLite.to(bildeKlipp4,0,{autoAlpha: 0});
		}

		startTween();

		}

		public function startTween():void{
			TweenLite.delayedCall(pauseTid, startTween1);
		}
		public function startTween1():void{
			if(bildeAntall==4){
			TweenLite.to(bildeKlipp4, fadeTid,{autoAlpha: 0});
			}
			else{
			TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0});
			TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 1, onComplete:testPause})
			}
			}

		public function testPause():void{

			TweenLite.delayedCall(pauseTid, startTween2);
		}
		public function startTween2():void{

			TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 0});
			TweenLite.to(bildeKlipp3, fadeTid,{autoAlpha: 1, onComplete:testPause2});

		}

		public function testPause2():void{
			trace("her da?");
			TweenLite.delayedCall(pauseTid, startTween3);
		}

		public function startTween3():void{
			trace("hmm");
			TweenLite.to(bildeKlipp3, fadeTid,{autoAlpha: 0});
			if(bildeAntall==4){
			TweenLite.to(bildeKlipp4, fadeTid,{autoAlpha: 1, onComplete:pause3});
			}
			else{
				trace("tjoho!");
				TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 1, onComplete:pause4});
			}

		}

		public function pause3():void{

			TweenLite.delayedCall(pauseTid, startTween4);
		}

		public function startTween4():void{

			TweenLite.to(bildeKlipp4, fadeTid,{autoAlpha: 0});
			TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 1, onComplete:pause4});
		}

		public function pause4():void{

			TweenLite.delayedCall(pauseTid, startTween1);
		}



		public function clickHandler(e:MouseEvent):void{
		try{
			navigateToURL(request1, '_self');
			}
			catch(e:Error){
				trace("En feil oppstod");
			}


		}
		public function clickHandler2(e:MouseEvent):void{
		 try{
			navigateToURL(request2, '_self');
			}
			catch(e:Error){
				trace("En feil oppstod");
			}

		}
		public function clickHandler3(e:MouseEvent):void{
		try{
			navigateToURL(request3, '_self');
			}
			catch(e:Error){
				trace("En feil oppstod");
			}

		}
		public function clickHandler4(e:MouseEvent):void{
		try{
			navigateToURL(request4, '_self');
			}
			catch(e:Error){
				trace("En feil oppstod");
			}

		}

		public function overHandler(e:MouseEvent):void{

			switch(e.target.name){
				case "bilde1":
				// need some way to pause the current tween here...
				break;

				case "bilde2":
				// need some way to pause the current tween here...
				break;

				case "bilde3":
				// need some way to pause the current tween here...
				break;

				case "bilde4":
				// need some way to pause the current tween here...
				break;


			}


		}

		public function outHandler(e:MouseEvent):void{
			trace("ute igjen!");
		}


}

}

Link to comment
Share on other sites
Posted

I don't have time to read through and analyze all of your code, but to answer your question about how to pause a tween when the mouse rolls over an area, you'd just need to add a ROLL_OVER event listener to that DisplayObject and then in the handler, you'd call pause() on your tween. Just remember to store a reference to the tween in a variable, kinda like:

 

var tween:TweenLite;

//then each time you do a tween that you want to be able to interrupt
//assuming you only have 1 going at a time...
tween = TweenLite.to(mc, 1, {x:100});

function rollOverHandler(event:MouseEvent):void {
   tween.pause();
}

function rollOutHandler(event:MouseEvent):void {
   tween.resume();
}

 

You could also use a TimelineLite or TimelineMax to group several tweens together and be able to pause()/resume() them as a whole.

 

Also, be careful about using MOUSE_OVER/MOUSE_OUT rather than ROLL_OVER/ROLL_OUT. It's a common mistake. http://www.greensock.com/tweening-tips/#mouseover

Link to comment
Share on other sites
  • Author
Posted

Hi, thanks alot for your quick reply :)

 

I'm trying to put the tweens into variable like this:

 

var tween1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0});

 

then i try to start it :

 

tween1.play();

 

But i keep getting spammed with these errors:

Error: Cannot tween a null object.
at com.greensock::TweenLite()
at com.greensock::TweenLite$/to()
at gamezoneSlideshow()
TypeError: Error #1006: value is not a function.
at com.greensock::TweenLite/renderTime()
at com.greensock.core::SimpleTimeline/renderTime()
at com.greensock::TweenLite$/updateAll()

 

So obviously I'm doing something wrong here :P

Link to comment
Share on other sites
Posted

HI Aksel,

Until Jack comes back with something more comprehensive I'll jump in with what immediately strikes me - you can only have 1 movieClip in each TweenLite instance, so you would have to do:

 

var tween1:TweenLite = TweenLite.to(bildeKlipp,{autoAlpha: 0});

var tween2:TweenLite = TweenLite.to(fadeTid,{autoAlpha: 0});

 

then:

 

tween1.play();
tween2.play();

 

You might consider using a TimelineLite/TimelineMax if you need to control the timing more effectively.

Link to comment
Share on other sites
Posted

X10, I think "fadeTid" was a numeric variable that represented the duration. So that part was fine.

 

Aksel, the error sounds like you're trying to tween a null target, so in your case "bildeKlipp" is resolving to null. Try adding a trace(bildeKlipp) right before your tween to see for yourself.

 

If you're still having trouble, feel free to post a sample FLA that clearly demonstrates the problem. The simpler the better - please remove all unnecessary code and don't post your production files.

Link to comment
Share on other sites
Posted

Ah yes, going back over the code I completely missed that!

Apologies Aksel, hope I didn't confuse you.

X10

(/makes a note to read code properly next time)

Link to comment
Share on other sites
  • Author
Posted

Hi guys, thanks again for your quick replies :)

 

I've managed to resolve the errors. Was creating the variable containing the tween in the wrong place :oops:

 

Now...on to another probably very basic / silly question :)

 

I'm trying to do the following in a function:

 

tween1.play();

tween2.play();

 

Basically tween1 is fading OUT one image and tween2 is fading IN another image... Doesn't seem to go quite well though as it keeps waiting until tween1 is completely faded out before starting to fade in image2.. Any advice on how to accomplish the wanted effect? :) (i want the images to cross-fade into one another :)

Link to comment
Share on other sites
Posted

Hi Aksel,

If you're using a TimelineLite/Max, you can use a time offset on the second tween so they happen at the same time:

 

myTimeline.append(TweenLite.to(mc1, 2, {alpha:0}));
myTimeline.append(TweenLite.to(mc2, 2, {alpha:1}),-2);

 

or without TimelineLite/Max create a function that has the tweens in it:

 

function crossFade():void
{			
TweenLite.to(mc1, 2, {alpha:0});
TweenLite.to(mc2, 2, {alpha:1})
}

Link to comment
Share on other sites
  • Author
Posted
Hi Aksel,

If you're using a TimelineLite/Max, you can use a time offset on the second tween so they happen at the same time:

 

myTimeline.append(TweenLite.to(mc1, 2, {alpha:0}));
myTimeline.append(TweenLite.to(mc2, 2, {alpha:1}),-2);

 

or without TimelineLite/Max create a function that has the tweens in it:

 

function crossFade():void
{			
TweenLite.to(mc1, 2, {alpha:0});
TweenLite.to(mc2, 2, {alpha:1})
}

 

 

Hmm.. but I had already created a function which had both tween1(); and tween2(); inside... Still it seems to wait until tween1(); completes before starting on tween2(); :)

 

The variables contains the following:

 

var tween1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0});
var tween2:TweenLite = TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 1, onComplete:testPause});

 

Where fadeTid is an int telling how long the fadeeffect should last.

Link to comment
Share on other sites
  • Author
Posted

Anyone? :) Will happily donate to my saviour here :D

Link to comment
Share on other sites
Posted

if you have a file with the following code:

 

import com.greensock.*;

var fadeTil:Number = 2;
var tween1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0});
var tween2:TweenLite = TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 1, onComplete:testPause});

function testPause(){
trace("paused");
}

 

and bildeKlipp and bildeKlipp2 (with alpha:0) on the stage, both tweens will start at the same time and testPause will run as soon as they are both finished (as they both start at the same time and finish at the same time).

 

there must be something else you aren't showing or that isn't clear to us. with all the different comments it is difficult to figure out exactly what code you are using, where it lives and how it is fired.

 

if you can generate a simple file that ONLY demonstrates your 2 tweens not running at the same time, it will make it much easier for us to offer a solution.

Link to comment
Share on other sites
  • Author
Posted

Hi, thanks for replying :)

 

I'm getting sooomewhat closer (babysteps! :P ).. I'll paste my current code in as I started over again to regain som control over what actually is happening here hehe :)

 

package{

import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.AutoAlphaPlugin;

TweenPlugin.activate([AutoAlphaPlugin]);
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;


public class mySlideshow extends MovieClip {

	private var bilde1_adresse:String = "url1";
	private var bilde2_adresse:String = "url2";
	private var bilde3_adresse:String = "url3";
	private var bilde4_adresse:String = "url4";

	private var fadeTid:int = 2; // duration of the fade
	private var pauseTid:int = 3; // duration of pause

	// ----------------------------------------------------------------------------------------------------------

	private var request1:URLRequest = new URLRequest(bilde1_adresse);
	private var request2:URLRequest = new URLRequest(bilde2_adresse);
	private var request3:URLRequest = new URLRequest(bilde3_adresse);
	private var request4:URLRequest = new URLRequest(bilde4_adresse);

	var bildeKlipp = new bilde1();
	var bildeKlipp2 = new bilde2();
	var bildeKlipp3 = new bilde3();

	var tween1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0});
	var tween2:TweenLite = TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 1, onComplete:testPause});

	public function mySlideshow():void{

		bildeKlipp.x = 0;
		bildeKlipp.y = 0;
		bildeKlipp.alpha = 1;
		bildeKlipp.buttonMode = true;
		bildeKlipp.name = "bilde1";
		this.addChild(bildeKlipp);

		bildeKlipp2.x = 0;
		bildeKlipp2.y = 0;
		bildeKlipp2.buttonMode = true;
		bildeKlipp2.name = "bilde2";
		this.addChild(bildeKlipp2);
		TweenLite.to(bildeKlipp2,0,{autoAlpha: 0});

		TweenLite.delayedCall(pauseTid, startTween1);

	}

	public function startTween1():void{
		trace("in tween1");
		tween1.play();
		tween2.play();
	}


	public function testPause():void{
			trace("in testpause");
		}

}


}

 

I need to have the tween variables availible to other functions.. Seems now that the tweens are triggered already upon declaration of tween1, tween2 etc..

 

bildeKlipp starts tweening as soon as the movie starts. What I wish is that bildeKlipp is visible upon start of the movie..then after end of 

TweenLite.delayedCall(pauseTid, startTween1);

it should start to tween as stated in the function "startTween1".

 

:):oops:

Link to comment
Share on other sites
Posted

you can pause a tween upon creation like so:

 

var tween1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0, paused:true});

 

 

 

you can tell it to play later with play()

you can also force the play head back to the start with tween1.currentTime = 0 if need be

Link to comment
Share on other sites
  • Author
Posted

Thanks :D Really getting closer to completing this finally now all due to your great help :)

 

Basically now the slideshow works as intended.. and i've rewritten the code ...however it seems that after the first round of slides..it shows the first image again..and then it stops tweening. I've tried tracing some output and see that the code still keeps running through the diffirent switch functions which i've created..but the first image just stands there without fading out after the first round.

 

This is the code I'm using now:

 

public class mySlideshow extends MovieClip {

	private var fadeTid:int = 3; // her styres farten på fade-effekten
	private var pauseTid:int = 4; // her styres tiden hvert bilde vises før ny overgang starter

	// ----------------------------------------------------------------------------------------------------------

	var bildeKlipp = new bilde1();
	var bildeKlipp2 = new bilde2();
	var bildeKlipp3 = new bilde3();

	var fade_in1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 1, paused: true});
	var fade_ut1:TweenLite = TweenLite.to(bildeKlipp, fadeTid,{autoAlpha: 0, paused: true});

	var fade_in2:TweenLite = TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 1, paused:true});
	var fade_ut2:TweenLite = TweenLite.to(bildeKlipp2, fadeTid,{autoAlpha: 0, paused: true});

	var fade_in3:TweenLite = TweenLite.to(bildeKlipp3, fadeTid,{autoAlpha: 1, paused:true});
	var fade_ut3:TweenLite = TweenLite.to(bildeKlipp3, fadeTid,{autoAlpha: 0, paused:true});

	public function mySlideshow():void{
		bildeKlipp.x = 0;
		bildeKlipp.y = 0;
		bildeKlipp.alpha = 1;
		bildeKlipp.buttonMode = true;
		bildeKlipp.name = "bilde1";
		this.addChild(bildeKlipp);

		bildeKlipp2.x = 0;
		bildeKlipp2.y = 0;
		bildeKlipp2.buttonMode = true;
		bildeKlipp2.name = "bilde2";
		this.addChild(bildeKlipp2);
		TweenLite.to(bildeKlipp2,0,{autoAlpha: 0});

		bildeKlipp3.x = 0;
		bildeKlipp3.y = 0;
		bildeKlipp3.buttonMode = true;
		bildeKlipp3.name = "bilde3";
		this.addChild(bildeKlipp3);
		TweenLite.to(bildeKlipp3,0,{autoAlpha: 0});

		pauseFunksjon("start1");
	}

	public function startTween(c:String):void{
		switch(c){

		case "start1":
		fade_ut1.play();
		fade_in2.play();
		pauseFunksjon("start2");
		break;

		case "start2":
		fade_ut2.play();
		fade_in3.play();
		pauseFunksjon("start3");
		break;

		case "start3":
		fade_ut3.play();
		fade_in1.play();
		pauseFunksjon("start1");
		break;
		}
	}

		public function pauseFunksjon(b:String):void{
			switch({

				case "start1":
				TweenLite.delayedCall(pauseTid, startTween,["start1"]);
				break;

				case "start2":
				TweenLite.delayedCall(pauseTid, startTween, ["start2"]);
				break;

				case "start3":
				TweenLite.delayedCall(pauseTid, startTween, ["start3"]);
				break;

			}

		}

Any ideas why the fadefunction of the images stop after "bildeKlipp"  (image1) displays for the second time? 


}

Link to comment
Share on other sites
Posted

once you tell a tween to play, its virtual playhead moves from beginning to end.... just like a movie clip.

once a tween has played fully to the end... telling it to play again does not rewind it back to the beginning.

 

the reason why the first image APPEARS to have played or faded in after the sequence is because that tween had never played before.

 

you start your sequence with fade_ut1 then you play through all the tweens and at the end of fade_ut3 you tell fade_ut1 to play for the first time.

 

insteade of using someTween.play()... try someTween.restart() like:

 

case "start1":

fade_ut1.restart()

fade_in2.restart()

pauseFunksjon("start2");

break;

 

do this for all of them.

 

restart will force the tween to play from the beginning.

 

once you get this working, spend some time with TimelineLite/Max it will make this sort of sequence much much easier. you won't need all the delayedCalls and manual switches.

Link to comment
Share on other sites
  • Author
Posted

This worked fine.t.hanks alot. Will need to read up on timelinelite anyways it seem to get it to pause properly upon mouse rollover. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account