Basic Tween Question.

[ej23]

I know I am still learning and probably always will be but for some reason I am completely stumped with this issue I am having using Tweenmax. Any help would be completely appreciated.

 

Basically I am trying to assign a couple of functions to a button.

The first function works okay (It moves the first image off the stage, and bring the second image on to the stage, while the button , and another moves to a different coordinate)

It's the second function where I ran into a wall. It's suppose to move the second image off the stage, and bring the first image to it's original coordinate. But it's not. The second image goes no where. Here is a link to the page with the animation.

 

http://www.erickjurado.com/docs/pages/demopage.html

 

I am guessing it's an overwrite issue, or maybe some factor I am over completely overlooking. But either way I can't seem to figure out what I am doing wrong, and slowly going insane trying to figure it out. I am using TweenMax Again any insight, help, assistance, perspective, or direction would be totally appreciated!!!

 

Here is the code if that helps. And again much thanks for any help!!!!

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.MouseEvent;
import gs.*;
import gs.easing.*;
import gs.TweenMax;

import gs.plugins.*;
TweenPlugin.activate([setSizePlugin]);
TweenPlugin.activate([AutoAlphaPlugin]);
TweenPlugin.activate([blurFilterPlugin]);
TweenPlugin.activate([ColorTransformPlugin, TintPlugin]);
TweenPlugin.activate([RemoveTintPlugin, TintPlugin]);



stop();

var soundReq:URLRequest = new URLRequest("slapish.mp3");
var sound:Sound = new Sound();
var soundControl:SoundChannel = new SoundChannel();
var resumeTime:Number = 0;
sound.load(soundReq);

OverwriteManager.init(0);


sound.addEventListener(MouseEvent.CLICK, thecloser);




////////////////////////////////////////VARIABLES//////////////////////////////VARIABLES//////////////////////////////VARIABLES


var bf:BlurFilter = new BlurFilter();
bf.blurX = 100;
bf.blurY = 100;




var backgroundmover:backgrounder = new backgrounder();
addChild(backgroundmover);
backgroundmover.width = 675;
backgroundmover.height = 510;
backgroundmover.x = 280;
backgroundmover.y = 192;
backgroundmover.filters = [bf];
backgroundmover.alpha = 0;



TweenLite.to(backgroundmover, .75,{alpha:1,ease:Cubic.easeOut, overwrite:false});
TweenMax.to(backgroundmover, .10, {blurFilter:{blurX:100, blurY:0}});




var closermakerc:closer = new closer();
addChild(closermakerc);
closermakerc.x = 43;
closermakerc.y = - 125;
closermakerc.width = 35.8;
closermakerc.height = 35.8;
closermakerc.alpha = 0;

TweenMax.to(closermakerc,1, {y:345,rotation:1080, alpha:1, ease:Back.easeOut});
closermakerc.addEventListener(MouseEvent.CLICK, thecloser);




var nexter:nextbutton = new nextbutton();
addChild(nexter);
nexter.x = 43;
nexter.y = - 125;
nexter.width = 50.8;
nexter.height = 50.8;
nexter.alpha = 0;
nexter.buttonMode = true;
TweenMax.to(nexter,1, {y:300,rotation:1080, alpha:1, ease:Back.easeOut});

nexter.addEventListener(MouseEvent.CLICK, numerouno);


/////////////FIRST IMAGE/////////////////////

       var bbook:birdbook = new birdbook();
addChild(bbook);
bbook.x = 102;
bbook.y = 374.1;
bbook.width = 30;
bbook.height = 200;
bbook.rotation = 1080
bbook.alpha =1;
bbook.filters = [bf];


TweenMax.to(bbook, 0, {dropShadowFilter:{color:0x000000, alpha:1, blurX:10, blurY:10, strength:.5, angle:50, distance:3}});
TweenLite.to(bbook, .25,{x:100, y:60,alpha:1, ease:Back.easeOut, overwrite:false});
TweenLite.to(bbook, .25,{x:450, width: 400,ease:Cubic.easeOut, overwrite:false,delay:.25});
TweenLite.to(bbook, .25,{width: 30,ease:Cubic.easeOut, overwrite:false,delay:.5});
TweenLite.to(bbook, .25,{rotation:0,y: 270,ease:Cubic.easeOut, overwrite:false,delay:1});
TweenLite.to(bbook, .25,{width:400,x: 50,ease:Cubic.easeOut, overwrite:false,delay:1.25});
TweenLite.to(bbook, .25,{width:40,height:40, y:250, ease:Cubic.easeOut, overwrite:false,delay:1.5});
TweenLite.to(bbook, .25,{rotation:1080, x:100,y:335,ease:Cubic.easeOut, overwrite:false,delay:1.75});
TweenLite.to(bbook, .25,{width:382, height:324, x:285, y:200, ease:Elastic.easeOut, overwrite:false,delay:2});

TweenMax.to(bbook, 1, {dropShadowFilter:{color:0x000000, alpha:0, blurX:10, blurY:10, strength:1, angle:50, distance:3},delay:2.25});
TweenMax.to(bbook, 1, {blurFilter:{blurX:0, blurY:0}, delay:2.5});




////////////SECOND IMAGE//////////////

   var elspread:spread = new spread();
addChild(elspread);
elspread.x = -300;
elspread.y = -25;
elspread.width = 30;
elspread.height = 30;








////////////////////FUNCTIONS///////////////////////////////FUNCTIONS///////////////////////////////FUNCTIONS///////////////////////////////FUNCTIONS


function numerouno (event:MouseEvent):void

{
	TweenLite.to(nexter,1, {y:368.9, x:316.9,rotation:1080, alpha:1, ease:Back.easeOut});

	TweenLite.to(closermakerc,1, {y:369.9, x:258.9, rotation:1080, alpha:1, ease:Back.easeOut});

	TweenMax.to(bbook, 1, {blurFilter:{blurX:10, blurY:10}});

	TweenMax.to (bbook, 1,{height:10,width: 100, y:100, x:350,ease:Cubic.easeIn});

	TweenMax.to (bbook, 1,{rotation:90,ease:Cubic.easeIn, delay:.25});

	TweenMax.to (bbook, 1,{x:800, ease:Cubic.easeIn, delay:.55});

	TweenMax.to(elspread, .25,{x:275, y:171, width: 520, height:321,alpha:1, ease:Cubic.easeOut, delay:1});


function numerodos (event:MouseEvent):void

{
TweenLite.to(nexter,1, {y:368.9, x:316.9,rotation:1080, alpha:1, ease:Back.easeOut});

TweenLite.to(closermakerc,1, {y:369.9, x:258.9, rotation:1080, alpha:1, ease:Back.easeOut});

TweenMax.to (elspread,1,{x:800, ease:Cubic.easeIn});

TweenMax.to(bbook, .25,{alpha:1, x:100, ease:Cubic.easeOut, delay:1});

}

}



function thecloser(event:MouseEvent):void 
{
TweenLite.to(closermakerc, 1 ,{ y: -60, rotation:1080, ease:Back.easeIn});

TweenLite.to(backgroundmover, 1, {width:1, height:400,delay:.75 });

TweenLite.to(backgroundmover, 1, {rotation:90, x:-300,delay:1.25 });

var timer:Timer = new Timer(4500, 1);
timer.start();
timer.addEventListener(TimerEvent.TIMER, felakiller);
}



function felakiller(e:TimerEvent):void 
{

this.parent.parent.removeChild(this.parent);
}

[GreenSock]

A few things off the top of my head after glancing at the code:

 

1) You set the overwrite mode to 0 (NONE) which means conflicting tweens will be allowed to run. I saw some conflicting tweens like bbook's x property was getting tweened by 2 different tweens at the same time meaning they'll fight with each other. I generally recommend against disabling overwrite management for this reason. Why not use the AUTO mode?

 

2) You're using a nested numerodos() function. Nested functions are usually problematic because they get deleted as soon as the parent function finishes running. I've seen one case in all my years where a nested function was useful, but in every other case I've seen them just cause problems and confusion. I'd avoid them.

 

3) In thecloser(), you create a local timer variable. I bet that's getting garbage collected because it's a local variable. Why not use TweenLite.delayedCall()?

 

4) You used 5 lines to activate your plugins. You can combine those all into one line like this:

TweenPlugin.activate([setSizePlugin, AutoAlphaPlugin, BlurFilterPlugin, ColorTransformPlugin, TintPlugin, RemoveTintPlugin]);

 

5) I noticed you're doing a lot of sequencing. You might want to check out the new TimelineLite and TimelineMax classes in v11 (http://blog.greensock.com/v11beta/). They can make sequencing very intuitive and then you can manage the group/sequence as a whole very easily.

 

Hope that helps.

[ej23]

Much thanks! This is a huge help, and clears up a lot of confusion!!!! Much appreciated.