Toggling a Play/Pause Button in an FLA Animation

:

skolts,

> I'd like the Play/Pause button to toggle between a PLAY
> state and a PAUSE state depending on whether the animation
> is already playing or paused.

That makes sense, and it's a common endeavor.

> I've sucessfully created the button (actually as a movie clip with
> the two states). I've also got the button to pause and play the
> animation--but I'm unable to get the button (movie clip that is) to
> actually toggle between the two states.

Your choice of a movie clip symbol for this scenario, as opposed to a
button symbol, is a good one. The reason it's a good choice is because
movie clips give you control over their timelines, whereas buttons do not.
If you look up the MovieClip class in the Actionscript 3.0 Language
Reference (help docs), you'll see all the functionality available to you,
but for example, the MovieClip class gives you gotoAndPlay() or
gotoAndStop() methods, when allow you to direct the timeline of the movie
clip in question.

The approach you've taken -- two seperate custom functions -- certainly
works, but if you change your code just a bit, you can reduce your need to a
single function. Let's take this in two steps. First, using a single
function to pause and play the timeline. You can use a variable and an if()
statement to do the work for you:

// Timeline plays by default
var isPlaying:Boolean = true;
PlayPause_btn.addEventListener(MouseEvent.CLICK, togglePlayback);

function togglePlayback(evt:MouseEvent):void {
if (isPlaying) {
stop();
} else {
play();
}
isPlaying = !isPlaying;
};

First, you're declaring an arbitrarily named Boolean variable (a
variable with a true/false value) and setting it to true by default, because
naturally, the timeline is already playing -- so a variable named isPlaying,
with a value of true, makes sense.

Next, you're assigning a function to the "click" event, which you've
already shown you know how to do. In this case, the triggered function is
called togglePlayback, and it simply checks the value of isPlaying to
determine how to proceed. If isPlaying is true, the function invokes the
MovieClip.stop() method on the main timeline. If isPlaying is faulse, the
function invokes MovieClip.play().

Finally, the isPlaying variable is set to its opposite (isPlaying =
!isPlaying; -- in other words, isPlaying equals NOT isPlaying).

Note, I used the parameter "evt" in my event handler function, instead
of "Event." You can use whatever parameter name makes sense to you, but
because there's already a class named Event in ActionScript 3.0, you might
want to use something other than "Event" -- in any case, all that parameter
does is provide a variable you can optionally use inside the function to
refer to the event object itself. In this case, your event is an instance
of the MouseEvent class, which means you could use the "evt" parameter (or
whatever you decide to name it) to access functionality of the MouseEvent
class if you wanted to.

So that reduces your code quite a bit! You only need to assign a single
event handler, and you don't have to keep unhooking and re-hooking your
handlers. Now to update the movie clip "button" itself.

I assume you have at least two frames in your movie clip, with "pause"
and "play" indicators in either frame. You might, for example, have a
picture of a stop sign in frame 1 and the word "play" in frame 2. By
default, you movie clip will want to play, so the first thing you need to do
is invoke the MovieClip.stop() method on the movie clip itself. You can do
that by referencing its instance name and simply referencing the method:

PlayPause_btn.stop();

Then you could update your event handler function like this:

function togglePlayback(evt:MouseEvent):void {
if (isPlaying) {
stop();
PlayPause_btn.gotoAndStop(2);
} else {
play();
PlayPause_btn.gotoAndStop(1);
}
isPlaying = !isPlaying;
};

This way, the "button" looks like a stop sign at first, while th main
timeline plays. When someone clicks the stop sign, the main timeline pauses
(stop();) and the button changes from a stop sign to the word "play"
(PlayPause_btn.gotoAndStop(2);). Make sense? And the reverse holds true
when the isPlaying variable is false.

Give that a shot and let me know if anything falls apart or doesn't make
sense to you. For extra credit, you could even forego the isPlaying
variable, if you wanted to. The principle is basically the same, but the
mechanics are different. Here's the alternate approach, in which case you
wouldn't need the line with the word "var" in it:

function togglePlayback(evt:MouseEvent):void {
if (PlayPause_btn.currentFrame == 1) {
stop();
PlayPause_btn.gotoAndStop(2);
} else {
play();
PlayPause_btn.gotoAndStop(1);
}
};

In this alternate approach, notice that the comparison operator (==),
with two equals signs, means you're checking the value of something, rather
than setting the value of.


David Stiller
Co-author, Foundation Flash CS4 for Designers
http://tinyurl.com/5j55cv
"Luck is the residue of good design."