Should I use reverse or a boolean?

[Gabums]

Hello all,

 

I am trying to figure out the best way to do this:

 

I have an animation that has a rollover and a rollout. When you rollover, the x position moves -10 and rollout it moves back +10. It does work, but gets a little glitch-y. I have three movieclips that slightly overlap each other. The rollout doesn't always work when you rollover mc_1 then mc_2 then mc_3. I believe the rollout never really gets called to work when you go from one mc to the other. I'm thinking that a solution to the problem would be to have the movie clip move, then reverse on a rollover only. So that way a rollout would never need to be called. The only problem with that is I needed to put a variable for the x position. Here is my code:

 

import com.greensock.*; 
import com.greensock.easing.*; 

card1.addEventListener(MouseEvent.ROLL_OVER, overhandler);

function overhandler(e:MouseEvent):void { 
if(accordionAnimating == false){
	var _posX:Number = card1.x -10;     
	var _posY:Number = card1.y + 0;         
	TweenLite.to(card1, .5,{x:_posX, y:_posY, ease:Cubic.easeOut}); } 
}

function outhandler(e:MouseEvent):void { 
if(accordionAnimating == false){
	var _posX:Number = card1.x +10;     
	var _posY:Number = card1.y + 0;         
	TweenLite.to(card1, .5,{x:_posX, y:_posY, ease:Cubic.easeOut}); } 
}

 

What I can't seem to figure out is how to get that var _posX and var _posY position to be added into the reverse function code. Would this even be possible? Should I just use a boollean that tell the other mc's not to work until the other one is finished? I feel like that might end up looking funny if I do so.

 

Thanks so much in advance!

[jamiejefferson]

import com.greensock.easing.*; 

card1.addEventListener(MouseEvent.ROLL_OVER, overhandler);
card1.addEventListener(MouseEvent.ROLL_OUT, outhandler);

var _posX:Number = card1.x;     
var _posY:Number = card1.y;     

function overhandler(e:MouseEvent):void { 
if(accordionAnimating == false){ 
	TweenLite.to(card1, .5, { x:_posX - 10, ease:Cubic.easeOut } );
} 
}

function outhandler(e:MouseEvent):void { 
if(accordionAnimating == false){
	TweenLite.to(card1, .5, { x:_posX, ease:Cubic.easeOut } );
} 
}

 

Don't define variables at the function level if you want to access them in other places. Any variable defined inside a function is only accessible within the life of that function (as soon as the function has completed, all of it's local variables are destroyed).

 

If you want card1 to just shift 10 pixels back and forth, then you will need to store its original location outside of a function so it can be referred to. You can definitely have a rollover and rollout with card1 staying where it is supposed to, and no glitches.

 

 

var _posX:Number = card1.x -10; // function level variable - defined every time the tween is created
TweenLite.to(card1, .5,{x:_posX, ease:Cubic.easeOut}); }

This tween uses what is essentially a 'relative' value. Wherever card1 is currently located, it will move 10 pixels left from that position. If you call this code multiple times, card1 will eventually animate off the left of the stage.

 

 

// _posX defined as a class or global variable - defined at runtime and never changed
TweenLite.to(card1, .5,{x:_posX - 10, ease:Cubic.easeOut}); }

This tween uses an 'absolute' value. As long as _posx isn't changed, card1 will always move to 10 pixels left of its original position. Even if you call this code multiple times, card1 will never move further than 10 pixels left of its original position.

[Gabums]

Thank you for your reply! I'm still a bit confused though. I modified the code again:

 

import com.greensock.*; 
import com.greensock.easing.*; 

card1.addEventListener(MouseEvent.ROLL_OVER, overhandler);

function overhandler(e:MouseEvent):void { 
if(accordionAnimating == false){
	var _posX:Number = card1.x -10;
	TweenLite.to(card1, .5,{x:_posX, ease:Cubic.easeOut}); } 
}

 

So the card now moves 10 to the left every time I rollover it. But I cannot seem to get the reverse part working still.

 

I tried changing it around to something like this:

 

import com.greensock.*; 
import com.greensock.easing.*; 

var _posX:Number = card1.x -10;
var myTween:TweenMax = new TweenMax(card1, .5,{x:_posX, ease:Cubic.easeOut});

card1.addEventListener(MouseEvent.ROLL_OVER, overhandler);

function overhandler(e:MouseEvent):void { 
if(accordionAnimating == false){
	 myTween.reverse();} 
}

 

Now the card moves to the left as soon as you enter the frame vs on the rollover like I wanted and it only reverses on rollover. AND only once. The rollover wont work again. I know this should be easy... I don't understand what I'm doing wrong

[Gabums]

Ah... got it to work:

 

Here is the code if anyone is curious:

 

import com.greensock.*;
import com.greensock.easing.*;

card1.buttonMode = true;
card1.useHandCursor = true;

card1.addEventListener(MouseEvent.ROLL_OVER, overhandler);

function overhandler(event:MouseEvent):void {
if(accordionAnimating == false){
	var _posX:Number = card1.x -10;     
	TweenLite.to(card1, .5,{x:_posX, ease:Linear.easeNone, onComplete:reverseAni});
	} 
}
function reverseAni():void {
var _posX:Number = card1.x +10;     
TweenLite.to(card1, .5,{x:_posX, ease:Linear.easeNone }); } 

[jamiejefferson]

Glad you figured it out. That solution still uses relative values though, which means if you rollover the clip multiple times a second, it's going to animate off the left of the stage. I don't know what your project entails but is that desired?

 

If you want to keep card1 from running away you should put var _posX:Number = card1.x; outside the function and animate to x:_posX - 10.

 

Also, instead of using an oncomplete function just to reverse the tween, you could use yoyo and repeat with a TweenMax to do the same thing.

TweenMax.to(card1, .5,{x:_posX, ease:Linear.easeNone, yoyo:true, repeat:1}); // this will reverse 'onComplete'

[Gabums]

Hi again!

 

I see what you mean with the rollover moving the card over to the left if you rollover repeatedly. This is definitely something I do not want. I tried your methods but I cannot seem to get the yoyo to work, and since I have more than one card, I tried simplifying the code as follows:

 

card1.addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);
card2.addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);
card3.addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);


function overhandler(e:MouseEvent):void {
if(accordionAnimating == false){
	var _posX:Number = e.target.x -8;     
	TweenLite.to(e.target, .5,{x:_posX, ease:Linear.easeNone, onComplete:reverseAni});
	} 
function reverseAni():void {
var _posX:Number = e.target.x +8;     
TweenLite.to(e.target, .5,{x:_posX, ease:Linear.easeNone });
}
}

 

So to modify it like you suggested I would have to do this:

 

card1.addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);
card2.addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);
card3.addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);

var _posX:Number = e.target.x -8; 

function overhandler(e:MouseEvent):void {
if(accordionAnimating == false){
	TweenLite.to(e.target, .5,{x:_posX, ease:Linear.easeNone, yoyo:true, repeat:1});
	} 
       }

 

This of course now says that the "e" is an undefined property. I'm not sure how to handle the variable x now that it is outside the function. Any ideas?

[X10]

Not sure if this will fix the issue you have but just a note, as jamiejefferson mentioned, TweenLite doesn't yoyo:

TweenMax.to(e.target, .5,{x:_posX, ease:Linear.easeNone, yoyo:true, repeat:1});

[Gabums]

oh duh. haha. Thank you

The yoyo command does work now.

 

I'm still a bit lost with how to take the variable x position out of the function. I changed my code around a bit again to try simplifying things:

 

var allCards:Array = [card1, card2, card3];

for (var i:Number = 0; i < 3; i++) {
   allCards[i].addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);
}

function overhandler(e:MouseEvent):void {
if(accordionAnimating == false){
	var _posX:Number = e.target.x -8; 
	TweenMax.to(e.target, .5,{x:_posX, ease:Linear.easeNone, yoyo:true, repeat:1});
	} 
}

 

But alas, no still no dice...

[jamiejefferson]

This is one of those situations where you might consider whether it would be easier to create a class for 'cards' that could store their initial x position, and perhaps functions for mouseevent animations.

 

You can always use name to store an index if necessary.

 

var allCards:Array = [ [card1, card1.x], [card2, card2.x], [card3, card3.x] ]; // index 0 is the card, index 1 is that card's "initial x"

for (var i:Number = 0; i < allCards.length; i++) {
allCards[i][0].addEventListener(MouseEvent.MOUSE_OVER, overhandler, false, 0, true);
allCards[i][0].name == "card" + i; // card1 will get the name card0, etc, but this is the index in allCards we want later. You can +1 the value if you'd prefer
}

function overhandler(e:MouseEvent):void {
if (accordionAnimating == false) {
	var i:int = int(e.target.name.substr(4)); // (-1 if you added 1 to the index in the card names)
	var _posX:Number = allCards[i][1] - 8;
	TweenMax.to(e.target, .5, { x:_posX, ease:Linear.easeNone, yoyo:true, repeat:1 } );
} 
}