How-To: Rockstar Flash Programming [AS3] · Jun 1, 06:45 AM

Rockstar Flash programming is about making cool stuff with the least amount of work. Rockstars need time for tequila shots, uncontrollable fornication, and role playing games. They don’t have time to code their own tweening solutions, or 3d libraries. The main focus of this article is to recommend a set of tools, frameworks, and utility libraries that work really well and will save you time if you’re not using them already. I’ll also cover how to approach loading assets into Flash (an unglamorous topic that does not receive nearly enough attention) to make your site as fast as possible.

Stop Hacking Flash

It’s taken some time for me to stop looking at ActionScript as a Flash Hack and take it seriously as the primary Flash frontier. I’m left wondering what the heck took me so long. The good news is that for Windows users, it costs nothing extra. The answer is free and has been for quite some time, FlashDevelop. One word: code hinting. [Todo: alternatives for Mac users] The code hinting in FlashDevelop will save you so much time you’ll actually want to donate some dough to the creators for their wonderful creation.

Never reinvent the wheel

At all costs, avoid reinventing the wheel. For example, there are sloshes of tutorials about how to use the Loader class built-in to AS3. By all means, read them. Then go download a library that does it all for you. Don’t bother actually getting your hands dirty typing Loader into your code a thousand times (yuck!).

Use SVN

To us common folk, SVN used to be an overly complicated, command-line way to download the latest version of a code repository. These days on Windows, however, SVN is a breeze. All you need to do is download and install a free program called TurtoiseSVN. Then simply right-click on a folder in Windows Explorer and click SVN Checkout… in the popup menu. For example, to get the latest version of Papervision3D create a folder somewhere called Papervision3D, right-click that folder, chose SVN Checkout… and for URL enter http://papervision3d.googlecode.com/svn/trunk/. After you have performed checkout once, you can always upgrade to the latest version, just right-click on the Papervision3D folder and chose SVN Update. (It’s always a good idea to make a temporary backup of a code repository before performing an update in case there are changes that break your code.)

Use PureMVC

You need a framework. Face it, you might tell everyone around you that you’re a programming God, but in reality you suck. You get lazy and mix different types of programming logic together that you shouldn’t, and then you start using the Flash debugger. Oh darn, debugging flash is damn near impossible. So, download some PureMVC examples, as well as all the PureMVC documentation, and stare at it for a couple of days and you’ll emerge from the rabbit hole zen-like. It just plain makes sense to combine OOP with a framework.

Get PureMVC via SVN: http://as3-puremvc.rubyforge.org/svn/

Use GoASAP

ASAP, as in “ActionScript Animation Platform”. This package looks to be evolving right quick, as all the generous AS3 library coders out there realize how great it is. It’s very similar to PureMVC in that the package itself is a really small chunk of code. While you can use GoASAP as a basis to create your own animation library, don’t. Most people are going to download GoASAP and then download a library built on GoASAP to take care of common Actionscript tasks, such as tweening. Eventually, if you find yourself needing a really custom solution, basing that solution on GoASAP will save you time.

Get GoASAP via SVN: http://goasap.googlecode.com/svn/trunk/

Use BulkLoader

I just like the simplicity of this package. There are several loaders out there for AS3, but BulkLoader is the one I like right now. Truth is there is also a good loader built on GoASAP but there’s nothing that says once you start using GoASAP, every library you incorporate into your project has to be based on it.

Use Tweego for GoASAP

This little library doesn’t get much lip service. Tweego is a tweening library built on GoASAP. It’s has a pleasant syntax and boasts some sexy benchmarking numbers. Give it a shot if you’re not already married to Tweener, or some such thing.

Use Papervision3D

Probably one of the most compelling reasons to use Flash on a website today is how darn well it handles 3D. Several 3D packages really shine: PV3D, Away3D, Sandy. They’re all free. PV3D happens to be really popular and there are a decent number of examples out there to learn from. Humans like shiny colors and cool animation. Regardless of the product you’re selling—be it your stuff, your dog, your brain, your coolness—your website needs to engage your viewership. 3D is a very effective tool to achieve this.

Get Papervision3D via SVN: http://papervision3d.googlecode.com/svn/trunk/

Use Go3D for GoASAP

So while you’re adding some uber-sweet 3D you’re going to end up doing some tweens in 3D space. Well there’s a 3D solution for GoASAP called Go3D. Here’s an example tween that performs a rotation of a Plane (myPlane) around the Y-Axis:

  1. var t3:Tween3D = new Tween3D(myPlane, [Value.rotationY(180)], my_flip_duration, Easing.easeInOutQuint);
  2. t3.addEventListener(GoEvent.COMPLETE, onFlipDone);
  3. t3.start();
  4. Download this code: /files/code.rockstar.1.txt

Get Go3D via SVN: http://goplayground.googlecode.com/svn/trunk/JohnGrden/GO3D

Make Loading as Fast as Possible

One of my pet peeves about Flash is how long it can take to load before you see something. This is because so often flash websites load all the media content and programming logic before you are allowed to do anything. The problem with this is that you can’t assume that everyone is on the same type of DSL/Cable connection that you are using. Internet connection speeds range a large gammot, and while you might actually want to assume that most of your visitors are on broadband, not all broadband is made equal. Wireless broadband, for instance can range from blazing-fast DSL-like speeds to speeds in the 30-50kbps range when the user is in a poor reception area. To decrease your website bounce rate (the rate at which users navigate away from the first page they visit without visiting any other pages), media should be presented to the user as soon as it becomes available.

Fast Loading Requires Separation of Data Loading and Component Logic

To simplify matters, it’s quite common in the Flash-component world for specialized view components (for example, a custom text scroller) to take care of loading the data or media. The problem with this is when you have a bunch of components and you’re trying to manage loading the data with all of them at the same time, things start to get messy. The loading of data/media should really be a separate task in and of itself. The data/media should then be passed on to the component in some form (BitmapData, String, Object, Array, XML, etc.)

Loading Example

This is not a full-working example, but rather a piece of code to illustrate how Loading can be accomplished. Doing it this way, what you can end up with is a main SWF file with nothing except for code embedded inside. All of your images, MovieClips, Buttons, etc. are loaded from external files. Loading text, XML, and images is pretty trivial. Loading assets from SWF files requires a little bit more effort and forethought as to how you structure your loading paradigm. (We’re using BulkLoader here, but other loading libraries work similarly)

  1. public class AppMain {
  2. import com.myname.MyClass;
  3. import br.com.stimuli.loading.*;
  4.  
  5. private var loader:BulkLoader;
  6. private var myContext : LoaderContext;
  7. private var AppMain_assets_mc:MovieClip;
  8. private var myThing:MyClass;
  9.  
  10. private function init():void {
  11. loader = new BulkLoader("AppMain");
  12. myContext = new LoaderContext(false, ApplicationDomain.currentDomain);
  13.  
  14. loader.add("AppMain_assets.swf", { context: myContext } );
  15. loader.add("TextFile.css", { type: "text" } );
  16. loader.add("SomeImage.jpg");
  17.  
  18. loader.addEventListener(BulkLoader.COMPLETE, onAllItemsLoaded);
  19.  
  20. loader.start();
  21. }
  22.  
  23. private function onAllItemsLoaded(evt : Event) : void {
  24. AppMain_assets_mc = loader.getMovieClip("AppMain_assets.swf");
  25. myThing = new (getClass(AppMain_assets_mc, "com.myname.MyClass"));
  26. }
  27.  
  28. private function getClass(lib_mc:MovieClip, classLib:String):Class {
  29. return lib_mc.loaderInfo.applicationDomain.getDefinition(classLib) as Class;
  30. }
  31. }
  32. Download this code: /files/code.rockstar.2.txt

In this example, the files you end up loading are: AppMain.swf, AppMain_assets.swf, TextFile.css, SomeImage.jpg. We’re mainly concered with the first two. Lets assume that MyClass.as is in the relative path com/myname/MyClass and that AppMain.fla and AppMain_assets.fla are in the base folder. Furthermore, there is an asset in AppMain_assets.fla library that has class linkage to com.myname.MyClass. What interesting thing happens when we compile AppMain.fla and AppMain_assets.fla? Both files compile the MyClass class. This begs the question, when we load AppMain_assets.swf into AppMain.swf, which file’s class actually gets used? The rule is: Classes in the main SWF always override classes in the loaded SWF. Therefore, the MyClass class in AppMain.swf gets used (the MyClass class in AppMain_assets is ignored).

Going back to the example, when we do:

myThing = new (getClass(AppMain_assets_mc, "com.myname.MyClass"));

The library asset in AppMain_assets.fla with linkage class com.myname.MyClass is loaded into our main movie using the com.myname.MyClass compiled into AppMain.swf. The com.myname.MyClass class in AppMain_assets.swf is ignored.

What does all this mean? For starters, we can reduce the file size of AppMain_assets.fla if we prevent the Flash compiler from including com.myname.MyClass. Create a folder relative to the base directory called assets or whatever. Move AppMain_assets.fla to the new folder. You’ll need to change the output file settings in Flash (File->Publish Settings) to reflect this new directory structure. Then recompile: since the Flash compiler won’t find com.myname.MyClass in the assets folder, an empty definition will be compiled in it’s place.

Note: The getClass function is a useful little shorthand for applicationDomain.getDefinition(…) that you may include in any class that handles loading library items in external flash files.

Loading External Code

Now that we’ve explored how easy it is to load external assets like text, images, and library items embedded in SWF files, it begs the question, should we also load code from external SWFs? For large chucks of code this can be very useful, but there are some caveats. Working with the previous example, AppMain_assets.fla should again be in the base folder. In class AppMain, we have to remove the import statement for com.myname.MyClass and change

private var myThing:MyClass;

to

private var myThing:*;

When we compile AppMain.fla, the class com.myname.MyClass is not included in AppMain.swf. However, the class is loaded into AppMain.swf when we do

myThing = new (getClass(AppMain_assets_mc, "com.myname.MyClass"));

Now for the caveats: We don’t get to use strict typing with MyClass objects. Even worse, we don’t get oh-so-yummy code hinting with those objects. To work around this, I compile the externally loaded code into my main SWF early in development and then remove it later on.

Update (6/28/2008): Good news! I discovered that you can exclude libraries from being compiled into your SWF without removing the import statements. Read about Flash CS3 and _exclude.xml here. In the future, I may elaborate on this topic.

Use a CMS (Content Management System)

CMS integration with Flash is something I have already discussed in depth in other articles, so I’ll just gloss over it right now to say that a CMS is really important in any situation where content needs to be updated on a regular or semi-regular basis. When you integrate a CMS with flash, a slew of other features become much easier to implement: SWFAddress integration, SEO (search engine optimization), automatic browser degradation, RSS feeds, and printing functionality.

Alternatives

Please don’t take this article the wrong way, I’m not saying that all of the libraries listed above are the best bar none. Ok, I think that PureMVC and GoASAP are the best at what they do because they are so simple. The rest are just really good choices and I’ll tend to favor any utility library that’s based on GoASAP.

— Pickle

---

Comment

  1. What do u think about hydrotween as 2d and 3d tweening?

    — delizade · Aug 2, 05:44 AM · #

  2. I love HydroTween and have in fact switched from Tweego and Go3D to HydroTween completely. HydroTween has the best syntax of any tweener I have used (of course this is a personal opinion). However, I did not specifically recommend HydroTween in this article because it is still so new. It is pretty solid, though.

    I’m fairly sure that the 3D capabilities of HydroTween will surpass any other tweening library. But these are features that are currently in development. In fact, Donovan just posted an update to the 3D capabilities today (only available via SVN).

    In the realm of 3D tweening, the main difference between HydroTween and other libraries is that HydroTween has a function init3D(renderer, scene, camera, viewport) which causes the 3D scene to be automatically rendered whenever you perform a tween. The main advantage is speed and optimization. But again, it’s a little too early to start using this functionality unless you are willing to be a “tester”.

    — Pickle · Aug 3, 03:27 PM · #

Textile Help