Making movie clips play in reverse in AS 3.0

Question

Hey all. I'm changing all my files to AS 3.0 because of some
new elements I'd like to use in flash CS4.
Here:
http://www.iaw-atlanta.com/IvyLeague1-13-09.html
I have the menu navigation at the bottom with 4 buttons. When the
buttons are moused over they ascend and when they are moused out
the movie plays in reverse so that they descend. Basically in the
movie clip, I have it stopped as well as gotoAndPlay the next frame
when the button is moused over and then have a script telling it to
reverse when moused out. I know how to do this in AS 2.0 but how
can I translate the script to 3.0?

Answer 1

DjPhantasy5,
> Ok thanks, I'll see what he also has to say as well.
Actually, NedWebs pretty much nailed it. :) The approach
you've taken
is an interesting one, because it scales all the way back to
Flash Player 5,
which didn't yet support the MovieClip.onEnterFrame event.
Without that
event, you need something like your "controller" symbol -- a
separate
looping timeline -- to perform code that depends on frame
loops.
Available as of Flash Player 6, that event would allow you
to
consolidate your code a bit by putting it all in a single
frame and avoiding
the extra movie clip symbol. That doesn't mean your approach
is wrong, by
any stretch. In fact, it's good to know your options, because
if you ever
need to publish to Flash Player 5, you'll probably do best to
use the setup
you've taken.
I'll demonstrate onEnterFrame in just a bit, in case you
want to take a
look at that.
>> there's no _root reference in AS3, but you can use a
>> MovieClip(this.parent) (which replaces what _parent
>> used to do) to locate something outside of the
immediate
>> movieclip.
The term "parent," in this context, is technically a
property of the
MovieClip class, which means all movie clips in AS3 have
access to the
"parent" feature, which points to the timeline that contains
the movie clip
in question. Buttons also feature a "parent" property. In
AS2, this
property acted exactly the same, only it was preceeded by an
underscore.
In fact, NedWebs' suggested code works the same in your
existin file.
Instead of this:
// Your existing code ...
if (_root.animation._currentframe>1) {
_root.animation.prevFrame();
this.gotoAndPlay(2)
if (_root.animation._currentframe<=1) {
this.gotoAndStop(1);
... you could be using this:
// Alternative code ...
if (_parent.animation._currentframe>1) {
_parent.animation.prevFrame();
gotoAndPlay(2)
if (_parent.animation._currentframe<=1) {
gotoAndStop(1);
... because from this scope -- that is, from this point of
view -- the
MovieClip._parent property points to the same timeline that
_root does.
That changes, of course, based on how deeply nested the
current scope is.
The term "this" in the above code is optional, because Flash
understands
what scope you're in. From the point of view of this code,
_parent is
understood to refer to the current scope's parent timeline,
just like
gotoAndPlay() is understood to refer to the current scope's
own timeline.
You could precede either of those by "this" or not.
Many people will argue that _root is probably best avoided,
only because
it's a slippery slope. It doesn't always refer to the main
timeline you
think it does, depending on whether or not your SWF is loaded
into another
SWF at runtime. Meanwhile, _parent *always* refers to the
immediately
parent timeline.
So when you look at it that way, this perfectly valid AS2:
if (_parent.animation._currentframe>1) {
... isn't much different at all from its AS3 counterpart:
if (MovieClip(parent).animation.currentFrame>1) {
It would be nicer if you didn't need to cast the parent
reference as a
movie clip here, but if you don't, AS3 doesn't realize that
the scope in
question is a movie clip.
>> You can string them along as...
>> MovieClip(this.parent.parent)
Exactly.
>> Your _currentframe in the the controller becomes
>> currentFrame. That's about it. The rest of what I
>> saw will fly as is.
Not quite. AS3 doesn't support the on() or onClipEvent()
functions, so
you won't be able to attach your code direction to the
button. Instead,
you'll have to put it in a keyframe -- which you can also do
with AS2. It's
a good idea, in any case, because it allows you to put all
your code in one
place, making it easier to find.
Here's a quick note on direct attachment:
http://www.quip.net/blog/2006/flash/museum-pieces-on-and-onclipevent
To convert your existing FLA structure to AS3, you might,
for example,
do this:
animation.buttonMode = true;
animation.addEventListener(MouseEvent.ROLL_OUT, outHandler);
animation.addEventListener(MouseEvent.ROLL_OVER,
overHandler);
function outHandler(evt:MouseEvent):void {
controller.gotoAndPlay(2);
function overHandler(evt:MouseEvent):void {
controller.gotoAndPlay(4);
That takes care of the on(rollout) and on(rollover) code in
your current
version. The first line (buttonMode) is only necessary
because I got rid of
the button symbol and, instead, associated the event handlers
directly with
your animation clip. (Movie clips handle button-style events,
too, so you
don't need the button.) In AS3, event handling is very
straightforward:
you reference the object (here, animation), invoke its
inherited
addEventListener() method, then pass in two parameters: a)
the event to
listen for, and b) the function to perform when that event
occurs.
You can see that spelled out above. In AS2, there are quite
a few ways
to handle events, including on()/onClipEvent(), so it's
harder to know when
to use what approach. For buttons and movie clips, the
princple works the
same as I just showed, but the syntax is different.
Let's take a quick look at reducing all this code by using
the
onEnterFrame event. First, check out this AS2 version:
animation.onRollOut = outHandler;
animation.onRollOver = overHandler;
function outHandler():Void {
this.onEnterFrame = reversePlay;
function overHandler():Void {
this.onEnterFrame = null;
this.play();
function reversePlay():Void {
this.prevFrame();
All of that code would appear in frame 1. You don't need the
controller
movie clip. The animation clip no longer contains an orb
button, because
we're using animation itself as the "button". (You can always
see what
functionality any object has by looking up its class. If
you're dealing
with a movie clip, look up the MovieClip class. See the
Properties heading
to find out what characteristics the object has, see Methods
to find out
what the object can do, and see Events to find out what the
object can react
to.)
In the above code, it's all laid out pretty easily. This is
AS2,
remember. We have two events we're listening for:
MovieClip.onRollOut and
MovieClip.onRollOver. Those events are established for the
animation movie
clip by way of its instance name, and associated with
corresponding custom
functions. The outHandler() function associates yet another
function to the
MovieClip.onEnterFrame event of the animation clip. Very
simply, it
instructs animation to perform the custom reversePlay()
function every time
it encounters an onEnterFrame event. The overHandler()
function kills that
association by nulling it out, and telling animation to play,
via the
MovieClip.play() method. Finally, the reversePlay() function
simply invokes
MovieClip.prevFrame() on the animation clip.
Here's the AS3 version:
animation.buttonMode = true;
animation.addEventListener(MouseEvent.ROLL_OUT, outHandler);
animation.addEventListener(MouseEvent.ROLL_OVER,
overHandler);
function outHandler(evt:MouseEvent):void {
animation.addEventListener(Event.ENTER_FRAME, reversePlay);
function overHandler(evt:MouseEvent):void {
animation.removeEventListener(Event.ENTER_FRAME,
reversePlay);
animation.play();
function reversePlay(evt:Event):void {
evt.target.prevFrame();
It looks wordier, but if you look carefully, you'll see that
it's
essentially the same thing. The main difference is the way
scope works in
AS3. In AS2, there are numerous references to "this", because
the event
handler functions operate in the same scope as the object to
which the
association is made. In AS3, the references aren't to "this",
but rather to
the same animation clip by its *intance name*, because in
AS3, the scope
operates in the same timeline in which the code appears
(namely, in this
case, the main timeline).
In the reversePlay() function, in order to emulate a "this"
sort of
setup, I'm referring to the parameter that gets passed to all
event handler
functions in AS3. I happened to name it "evt" (for event),
but you can call
it what you like. In the case of reversePlay(), the evt
parameter refers to
an instance of the Event class, which has a target property.
The target
property refers to the object that dispatched the event --
happens to be
animation, in this case. So evt.target, in this context,
refers to
animation, which is what I invoke the MovieClip.prevFrame()
method on.
I've uploaded a handful of FLA files to my server. I won't
keep them
there forever ... maybe a couple weeks, as of this post:
http://www.quip.net/RewindTestAS3.fla
http://www.quip.net/RewindTestAS3_new.fla
http://www.quip.net/RewindTestAS2_new.fla
David Stiller
Co-author, ActionScript 3.0 Quick Reference Guide
http://tinyurl.com/2s28a5
"Luck is the residue of good design."