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."
3
Replies
AdChoices