Migrating from AS2 to AS3
Before we get into the nitty gritty of my post, let’s answer the age old question:
Why choose AS3 over AS2?
The player has made a dent in the market already. It helps that MySpace and YouTube both require Flash 9. It’s far faster. The error messaging is much better, meaning when something breaks you’ll actually be able to diagnose why (as opposed to the old guess and check method).
XML is natively integrated — it’s so easy to work with XML now, it’s unbelievable. Loading actually makes sense. You can read any kind of byte you want.
And that’s just the tip of the iceberg.
The only downside — and it’s a steep downside at first glance — is that ActionScript developers need to get comfortable with a new, strict, *true* programming language. The learning curve seems scary… until you dive in.
Most of the designers here are pretty familiar with AS. Some of them have a basic understanding of AS2, grasping the concepts and uses of OOP even if they don’t entirely get how to write code. All of them are a little terrified of ActionScript 3. This presents a bit of a problem — sometimes designers will want to create a simple example for a coder to rebuild better/stronger/faster for the final deployment of a site.
To empower our team to learn a little about the basics of AS3, I wrote this doc up for them. Now, I share with you. Click on to read my rant.
A lot of questions are being asked about AS3 people. A lot. You have every reason to be frightened. We were frightened, too. But it’s okay. AS3 has replaced all of the old annoying quirks with a slew of new ones. There’s lots more to be frustrated over, and the best part is you don’t even know what it is yet.
Oh learning.
I’ll try and cover as much as I think you’ll need to know in as simple a way as possible. Which isn’t much.
No More _ (as in underscore).
myClip._x = 500; // bad
myClip.x = 500; // good
alpha, x, y, scaleX, scaleY, rotation, etc. This is consistent for any Display Object (hey kids, it’s a key word!). A display object is an object that displays. On the screen. You have your basics: MovieClip, TextField, SimpleButton, Video. Then your new guys, like Sprite (sorta like a graphic symbol on steroids), Video, Bitmap. This sort of thing is explained far better than I can describe here.
Oh yeah, nothing is 100 based anymore… it’s all 0 thru 1. So if you want 50% alpha:
myClip.alpha = .5;
_currentframe is currentFrame.
_parent is parent
You get the idea.
Controlling the Timeline
gotoAndPlay, gotoAndStop are radically, radically different. They now look like this:
myClip.gotoAndPlay(2);
myclip.gotoAndPlay("LABEL_FOO");
Gah! So hard! Right?
No more _root
And I’m not telling you how to access it. You’ll just mess up all our beautiful code.
(myClip.root will give you that specific SWF’s root. I think.)
(myClip.stage will give you the root root root timeline. I’m pretty confident that every single clip in Flash will share the same stage property.)
Strict variables
var n = 0; // flash hates you, and it will tell you so.
var n:Number = 0; // flash might just buy you a burger on wednesday. don't get your hopes up.
The obvious ones are String and Number. Whenever you want to reference a movieclip, you need to import the MovieClip class, like so:
import flash.display.MovieClip; // you only need this once.
var zanderClip:MovieClip;
Methods R Out
onEnterFrame is gone. onRelease, onRollOut, etc, etc, etc. startDrag and stopDrag are still there, but that’s about it. Everything runs off of EventDispatcher now (that fancy schmancy thing we use on this side of the office to make it seem like we know more than you about something). Basically all event dispatching is is blindly broadcasting something has happened. It’s up to you to define Listeners, which will react to events. This is only slightly more complicated than the “old” way.
old way:
myClip.onRelease = function()
{
// now we're in the scope of myClip. that sucks. what if we have variables outside of myClip? now we have to call _parent? no wai.
}
new way:
import flash.events.Event;
import flash.events.MouseEvent;
myClip.addEventListener(MouseEvent.MOUSE_UP,_onMouseUpHandler);
function _onMouseUpFunction($evt:MouseEvent):void
{
// we're still within the original scope, but we know that myClip just was clicked on.
};
Note a couple of things. void is the return type of the function — what it would pass back to another function if called. Since this isn’t returning anything, void it is. $evt is an argument, you all know what that is, right? It’s of type MouseEvent. Can you figure out why? :)
There are lots and lots of events you can listen to, and you can assign about any event to just about any DisplayObject, at least for your purposes. Here’s a bunch that you’ll want to toy around with.
MouseEvent.CLICK
MouseEvent.DOUBLE_CLICK
MouseEvent.MOUSE_DOWN
MouseEvent.MOUSE_MOVE
MouseEvent.MOUSE_OUT
MouseEvent.MOUSE_OVER
MouseEvent.MOUSE_WHEEL
MouseEvent.MOUSE_UP
MouseEvent.MOUSE_DOWN
MouseEvent.ROLL_OVER
MouseEvent.ROLL_OUT
Event.ENTER_FRAME
In addition, there’s a long list of ActionScript 3 bloggers who’s working should help make the migration far smoother. In particular, gskinner and senocular have tons of examples as to the how and why.
August 10th, 2007 by Stephen / 31 Comments
