• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Making movie clips play in reverse in AS 3.0

New Here ,
Feb 24, 2009 Feb 24, 2009

Copy link to clipboard

Copied

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?
TOPICS
ActionScript

Views

3.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 25, 2009 Feb 25, 2009
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
consol...

Votes

Translate

Translate
LEGEND ,
Feb 24, 2009 Feb 24, 2009

Copy link to clipboard

Copied

How do you do it in AS2 (what's the script you want to translate)?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 24, 2009 Feb 24, 2009

Copy link to clipboard

Copied

DjPhantasy5,

> I know how to do this in AS 2.0 but how can I
> translate the script to 3.0?

Let's see what your AS2 version looks like, and I'll try to give you a
quick AS3 version.


David Stiller
Adobe Community Expert
Dev blog, http://www.quip.net/blog/
"Luck is the residue of good design."


Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 24, 2009 Feb 24, 2009

Copy link to clipboard

Copied

I made a basic file of what it does.
http://www.iaw-atlanta.com/RewindTest.fla

I was really hoping that AS 3.0 had an easier way to do this without there having to be so many elements. Btw I know I can't cheat and have my actions on a button anymore so just pretend it was on a frame instead.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 24, 2009 Feb 24, 2009

Copy link to clipboard

Copied

For the approach you've taken, the translation is fairly straightforward, except there's no _root reference in AS3, but you can use a MovieClip(this.parent) (which replaces what _parent does in AS2) to locate something outside of the immediate movieclip. You can string them along as... MovieClip(this.parent.parent)

Your _currentframe in the the controller becomes currentFrame. That's about it. The rest of what I saw will fly as is.

Dave probably has some useful info to add to this, so don't run off, or at least check back.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 24, 2009 Feb 24, 2009

Copy link to clipboard

Copied

Ok thanks, I'll see what he also has to say as well.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 25, 2009 Feb 25, 2009

Copy link to clipboard

Copied

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."


Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 25, 2009 Feb 25, 2009

Copy link to clipboard

Copied

LATEST
Cool, that was a very detailed response! References are really changing from what I'm use to using in AS2. I have a good idea of how I need to script my files from now on. Dave, I have downloaded those 3 files from your server so you can delete them whenever.

Thanks again to you both!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines