accordion and rollover troubles

[Gabums]

Hello all,

 

I'm working on an accordion animation where the individual elements (cards) have a small rollover (ease in and out) before you then click on them and they move apart as the accordion. I got the rollover and the accordion animation working individually however, when the cards move apart and the mouse hits a card as its moving, the animation stops. The accordion stops moving and the card tries to initiate the rollover again. Any thoughts on how to make this stop happening? Does this even make sense??? I feel like it needs the code for the card to have a tween.play (); and tween.reverse(); command to solve the issue, but I can't figure out how to make that work with the var _posX and _posY commands. Here is my script...

 

For the card:

 

import com.greensock.*;

import com.greensock.easing.*;

 

card2.addEventListener(MouseEvent.ROLL_OVER, overhandle);

card2.addEventListener(MouseEvent.ROLL_OUT, outhandle);

 

function overhandle(e:MouseEvent):void {

var _posX:Number = card2.x -10;

var _posY:Number = card2.y + 0;

TweenLite.to(card2, 1,{x:_posX, y:_posY, ease:Cubic.easeOut}); }

 

function outhandle(e:MouseEvent):void {

var _posX:Number = card2.x +10;

var _posY:Number = card2.y + 0;

TweenLite.to(card2, 1,{x:_posX, y:_posY, ease:Cubic.easeOut}); }

 

 

 

For the accordion:

 

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.MovieClip;

 

import gs.TweenLite;

import com.greensock.*;

import com.greensock.easing.*;

 

public class Accordion extends MovieClip

{

var speed:Number = 1;

 

public function Accordion()

{

card1.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);

card2.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);

card3.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);

 

protected function clickHandler(event:MouseEvent):void

{

if(event.target == card1)

{

TweenLite.to(card1, speed, { x:180, y:160 } );

TweenLite.to(card2, speed, { x:600, y:160 } );

TweenLite.to(card3, speed, { x:630, y:160 } );

}

else if(event.target == card2)

{

TweenLite.to(card1, speed, { x:180, y:160 } );

TweenLite.to(card2, speed, { x:210, y:160 } );

TweenLite.to(card3, speed, { x:630, y:160 } );

}

else if(event.target == card3)

{

TweenLite.to(card1, speed, { x:260, y:160 } );

TweenLite.to(card2, speed, { x:290, y:160 } );

TweenLite.to(card3, speed, { x:320, y:160 } );

}

}

}

}

 

 

Thank you so much in advance for your help!!!!

[Carl]

first:

 

Don't do this:

 

import gs.TweenLite;

import com.greensock.*;

 

it appears you are importing an old AND current version of TweenLite.

 

do not use gs.TweenLite it is old and out-dated.

 

-----------

 

second if I understand you correctly the problem is when the accordion opens you are triggering ROLL_OVER events of the buttons that pass beneath the mouse.

 

This appears to be the expected behavior, you could look into the overwrite manager perhaps to give your accordion tweens more priority, or use a boolean variable to track the state of the the accordion

 

something like the following pseudo-code:

 

var accordionAnimating:Boolean = false;

functionToStartTheAccordion(){
accordionAnimating = true;
//insert code to tween the accordion effect to the proper card
TweenLite.to({someCard, x:value, onComplete:accordionDone})
}

function accordionDone(){
accordionAnimating = false;
}

 

and then the button over states will only work if accordionAnimating = false like so

 

function overhandle(e:MouseEvent):void { 

if(accordionAnimating == false){
var _posX:Number = card2.x -10; 
var _posY:Number = card2.y + 0; 
TweenLite.to(card2, 1,{x:_posX, y:_posY, ease:Cubic.easeOut}); 
} 
}

[Gabums]

Thank you so much!!! Your guidance was wonderful. This is also the first time I got a boolean to work too

 

Cheers!