I freakin love Flint

I finally got a chance to work with Flint for a project I’m working on and its just amazing how well thought out of a particle system it is. With a little time you can take regular boring animations and really put them over the top. With just a few lines of code I was able to add particle trails to the missile and asteroid animations I’m working on:

[SWF]http://www.chrisrebstock.com/stuff/flintexample/FlintExample.swf, 400, 400[/SWF]

If you can’t see the swf above, click here.

The code is really straightforward too. Here is the code for the missile trail particle emitter:

It basically boils down to a few simple steps:
- create an emitter
- create a counter for your emitter to determine how many particles are released per second
- create a velocity for particles released, which entails determining a zone for how they are released (check the zones package in the Flint source to see all different types of shapes for how you emit your particles)
- create an image for your individual particles
- add actions to your emitter, which is how you customize the movement, color, style and other aspects of the particles
- create a renderer sprite to hold the particles emitted, which you usually want to be a separate and stationary sprite
- call the start() method on the emitter and animate the emitter if you need to move it

The source code also mentions some key optimizations I plan to take advantage of once I get the time. One important one is limiting the size of your renderer Sprite. You can see in my code I made it the entire size of the screen, its better to only make it the size that you’ll need to show all the particles being emitted.

Here is the full source file.

Tweenlite can tween frames backwards (against the timeline)

My buddy Zach discovered it, awesome find!

Yup… If you are currently on frame 20 of a movieclip and you fire this tween code, you will tween backwards to frame 1. Easing is even supported, very nice.

Papervision3D Rubik’s Cube!

To use this swf, just click on the arrows to turn the faces of the cube, and drag the mouse to turn the whole cube:

A friend of mine and I were joking one day that the least accessible interface around would require you to solve a Rubik’s cube before you could click a button or interact with it. Later that day I read an article on Papervision3D and the idea came to me to create a Rubik’s cube in Papervision3D. I thought it would be a great way to learn more about Papervision3D and something fun to work on. I had arrows for the top and bottom face of the cube, but it was just too much on the screen and was difficult to see much in the 3/4 overhead view with those arrows in too.

I ended up learning more about coordinate systems and arrays than I did about Papervision, but it was still a blast. At any rate, I plan to keep adding to it over time. I’d like to have the initial configuration load from XML and I also plan on writing a class to check to see if the cube has been solved after each move. All of that will have to wait though, since I just got my invite into Google’s Appengine and I’m really psyched to learn some more about it!

Loader for Actionscript Flex Builder and FDT Projects

Since I started using Flex Builder to code Flash projects, one of the major hurdles I’ve had to deal with is how to get Flash based assets into Flex Builder. To accomplish this end, I’ve created a multi loader library that lets you load one or more SWF files at runtime. These SWF’s are then registered into the Application domain and any exported symbols in them become available.

This is really just an extension on the concept discussed by BigSpaceship and others in the past. You load one or more SWFs, then access the movie clips contained within them via the getDefinitionByName method. The main benefit of this library is that you can with one line load one or more SWFs and the class acts much the same as a single loader. You can still add all the same events to it that you would a normal Loader object, and the class manages the individual loading of the SWFs. This makes it super easy to create a preloader that works no matter how many SWFs you are loading. The percentage is actually accurate regardless of how many SWFs are being loaded as well.

This project I’ve uploaded shows a simple usage of it, and it breaks down pretty quickly (The loader source can be found as a flex builder project archive here, and the standalone swc can be downloaded here:

You can see here that once you declare it, you can add the event listeners and then pass as many SWFs as you want to the load function. All of them will be seperately stored and loaded for you automatically. For the purposes of the ProgressEvent function, the bytesTotal and bytesLoaded properties of the ProgressEvent are treated as if you are loading one large SWF, the size of all the swfs combined. This way the percentage is accurate for any preloader percentage displays that need to listen to the ProgressEvent.

Also note that we’re listening for Event.INIT, and not the Event.COMPLETE. Since we’re waiting for the loaded SWFs to be registered to the application domain we need to make sure that they have been registered and all of their internal elements are available before we attempt to access them. Once all of the SWFs are loaded, its easy to access their internal symbols:

You should also take a look at the FLA’s in the project to get an uderstanding of how to create the symbols. Note that I use the “com.view.assets” prefix in front of the actual symbol name, if you look in the FLA you’ll find that same prefix on the exported symbol name. If all the symbols that are to be imported at runtime are named in this same way, its much easier to keep them organized. Once the getDefinitionByName method returns, the variables will have references to the MovieClips inside the SWF with the proper name. They are MovieClips and as such can be treated exactly like a MovieClip with no adverse side effects. So there you have it, a simple class for loading multiple SWFs into an actionscript project, and you get to minimize your time spent in Flash CS3.

To import the swc into your project, first move the swc into a folder that won’t get deleted, (I usually make a libs folder on the top level of the project folder). Then just right click on your projects root file, then click on properties. Once the properties window pops up, click on the Actionscript Build Path option.

Then select the library path button at the top. From there, the add swc button should be visible, click it and browse to your swc. Once you’ve successfully linked to the swc you only need to import the right classes to use them:

There is still the hurdle of how to best organize and manage these symbols once they’ve been imported. Some friends and I have been working on some classes to help optimize that process as well. Once they get to a certain point I’ll add them to the library and post the new source up here.

Creating a projector file with a FlexBuilder Actionscript project

There is no way to do it inside of FlexBuilder, but luckily its still pretty easy to do it in the Flash Player. Just open up the flash application (if you have FlexBuilder installed it will be under Applications/Adobe Flex Builder 3/Player/, under Windows the path is the same except you substitute C:/Program Files in the place of Applications. Once you open that, go to the file menu and click open to browse to your swf.

Open it, and if you don’t get some ridiculous security sandbox error, you should be able to go to the file menu again and click create projector.

Pretty neat little trick if you can’t stand doing much of anything in the Flash IDE but still need a projector file. Other applications like MDM’s Zinc will do roughly the same as well, if you’re willing to fork out the cash.