addEventListener MouseEvent.CLICK as a Toggle?

[johnnyfortune]

UPDATE:

 

Hey thanks alot for your advice. which as you already know was right

The problem with the buttons not working was obviously not tweenmax so I had to go back and look at my html, I was using a jQuery code to make the div's draggable and that was messing things up. (What a suprise?!) I found this post that kinda explained the problem.

http://old.nabble.com/Embedded-Flash-Draggable-on-Safari-td19394706s27240.html?

 

and the here is a 2mb fla of what im talking about. http://www.inmomentmedia.com/files/PV3D.fla.zip

 

//code
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

red_btn.addEventListener(MouseEvent.CLICK, clickButtonHandler);

yellow_btn.addEventListener(MouseEvent.CLICK, yellowclickHandler);

grass.addEventListener(MouseEvent.ROLL_OVER, greenoverHandler);
grass.addEventListener(MouseEvent.ROLL_OUT, greenoutHandler);

var myTimeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:true, overwrite:false, paused:true});
myTimeline.insert( new TweenMax(asciitowel, 3, {y:-500, ease:Sine.easeInOut}) );

var myTimeline1:TimelineMax = new TimelineMax({paused:true});
myTimeline1.insert( new TweenMax(paper, 1, {y:200, ease:Quad.easeOut}) );
myTimeline1.insert( new TweenMax(rainbow, 3, {y:250, ease:Elastic.easeOut}) );	
myTimeline1.insert( new TweenMax(tree, 2, {y:200, ease:Bounce.easeOut}) );	

function greenoverHandler(event:MouseEvent):void {
myTimeline.play();
}

function greenoutHandler(e:MouseEvent):void {
myTimeline.reverse();
}

function clickButtonHandler(e:MouseEvent):void {
import flash.external.ExternalInterface;
ExternalInterface.call("animatedcollapse.toggle('mainContent')");
//trace ("toggleDiv");
}

function yellowclickHandler(event:MouseEvent):void {
myTimeline1.play();
    //myTimeline1.toggle();
}

[GreenSock]

There shouldn't be any browser-specific behavior related to TweenLite/Max - I think there must be something else going on in your code.

 

I think you might be misunderstanding TimelineLite/Max too. I noticed you're insert()-ing tweens into an existing TimelineMax instance when your users click the yellow button - why? That'll work great the first time, but then the timeline will reach its end point, and you insert()-ing new tweens and then play()-ing won't make anything happen because the timeline will already be sitting at its end point. Imaging a MovieClip that has finished playing and has a stop() at the end and then after it finishes, you add tweens to its beginning - see the problem? The tweens will be added fine, but you'll never see them because the currentTime is AFTER where you put the tweens on the timeline.

 

If you're still running into trouble, please post an example FLA that demonstrates the issues. It doesn't need to be your production file - it can [i'd actually prefer this] be a super simple separate FLA that isolates the issue. (don't forget to zip your file before posting it)

[johnnyfortune]

I think I figured out all the kinks, but Im still having one problem.

 

Can you make one button, that when it's clicked it plays the timeline, then when its clicked again, the button play the timeline in reverse?

 

btw sorry for not using these neat code boxes before. I didnt know.

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

red_btn.addEventListener(MouseEvent.CLICK, clickButtonHandler);

yellow_btn.addEventListener(MouseEvent.CLICK, yellowclickHandler);

green.addEventListener(MouseEvent.ROLL_OVER, greenoverHandler);
green.addEventListener(MouseEvent.ROLL_OUT, greenoutHandler);

//GREEN BUTTON
var myTimeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:true, overwrite:false, paused:true});
     myTimeline.insert( new TweenMax(asciitowel, 3, {y:-500, ease:Sine.easeInOut}) );
//GREEN BUTTON

var myTimeline1:TimelineMax = new TimelineMax({paused:true, repeat:-1, yoyo:true, overwrite:true});
myTimeline1.insert( new TweenMax(paper, 1, {y:200, ease:Quad.easeOut}) );
myTimeline1.insert( new TweenMax(rainbow, 3, {y:250, ease:Elastic.easeOut}) );	
myTimeline1.insert( new TweenMax(tree, 2, {y:200, ease:Bounce.easeOut}) );	

function greenoverHandler(event:MouseEvent):void {
myTimeline.play();
}

function greenoutHandler(e:MouseEvent):void {
myTimeline.reverse();
}

//RED BUTTON
function clickButtonHandler(e:MouseEvent):void {
import flash.external.ExternalInterface;
ExternalInterface.call("animatedcollapse.show('redbutton')");
ExternalInterface.call("animatedcollapse.hide('mainContent')");
//trace ("toggleDiv");
}

//YELLOW BUTTON
function yellowclickHandler(event:MouseEvent):void {
myTimeline1.yoyo();
}

 

When I try the myTimeline1.yoyo(); it says "inaccessible method" and myTimeline1.play(); obv just plays the animation once. or forever on repeat.

[johnnyfortune]

Found the Answer a little deeper down the board.

 

viewtopic.php?f=1&t=2180

 

If anyone is curious, I just set my var openTimeline to have the {Reversed:true, Paused:true, repeat:0, yoyo:true, overwrite:true} so the animation would load, but you wouldn't see it until the button is clicked. Then when its click again, the animation plays in reverse. An so on, forever, until you get tired and stop clicking it.

http://www.inmomentmedia.com/files/PV3D.fla.zip

 

function yellowclickHandler(event:MouseEvent):void {

if (openTimeline.reversed) {

openTimeline.play();

} else {

openTimeline.reverse();

}

}