Creating an Actionscript based AIR project in Flex Builder

The majority of the work I do is pure ActionScript, and doesn’t require the Flex framework. Its inevitable that someday one of these ActionScript projects will need to go local. In the past Zinc would have been the choice, but even the first version of AIR beats it considerably. So what do you do if you have an ActionScript project you want to do in AIR? It turns out that Flex Builder doesn’t have an option to create an ActionScript based AIR project. Luckily I’m not the only person who has run into this problem, there is an entry in the Adobe bug system detailing this exact issue. In the comments, there is a post that details exactly how to set up an ActionScript based AIR project in Flex Builder.

All you need to do is create a new Flex project, and change a file extension right before finishing set up. Once you name the project, click next. After you select the output directory, click next again and in the source path screen change the extension on the main application file from mxml to as.

After the project is created, you need to add code to have the project do anything (even create a window). Since its not done by default, here is some code to create a simple window:


var mainWindow : NativeWindow = new NativeWindow( new NativeWindowInitOptions() );
mainWindow.activate();


Thats it, thanks to Laurenţiu Lozan for the solution!

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:


var smoke : Emitter = new Emitter();

smoke.x = 75;
smoke.y = 500;
smoke.start( );


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.


TweenLite.to( yourClip, 1, { frame:1, ease:fl.transitions.easing.None.easeNone } );


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!

Open Source Actionscript Based Project Utility Library on Google Code

As promised in the last post, I’ve uploaded an open source library coded by myself and a few friends. The library is intended for Actionscripters creating Flash experiences who prefer to work in Flex Builder or FDT. If you think the Flash CS3 coding environment sucks, then this library is for you!

Here is a high level overview of the current utilities

externalassets:

I’ve wrote several posts about this, but I feel like I haven’t even scratched the surface of how cool building Flash experiences in this way is. The basic gist is that you create your assets in Flash CS3, export them in a SWF, with the symbols with the export as actionscript linkage property set and a custom class name set. You then load them into your Actionscript project in Flex Builder using the AssetLoader class (only one line of code to load one or more SWFs). Once loaded you access the symbols via the AssetFinder class, which returns them as MovieClips. Using this method, you can dramatically reduce the size of the initial loading of your Flash experience, since you can load SWFs as you need them. You can also enforce a strict separation of visual assets and application control. No matter how the buttons change as long as their frame labels stay the same and the symbol is exported under the same class name your code doesn’t have to change at all. Also, since your project is based out of Flex Builder, you can use Subclipse as a version control app directly in your coding application! The FLA’s can be just a small part of your total project, and can be version controlled as well. For really small projects this is probably overkill, but for a medium to large size experience you’ll find the extra effort involved to set up a project in this way pays dividends when the inevitable torrent of changes or bugs come along at the eleventh hour.

displayextended:

This library was written by a good friend of mine and fellow member of this open source project, Zach, and it contains classes that help extend the Sprite class and wrap the MovieClip class. Basic functionality is automated such as buttons, build in and out sequences, and it even can chain multiple build in or out sequences. Most importantly it works in conjunction with the AssetLoader and AssetFinder and is intended to act as a wrapper for MovieClip assets loaded in from external SWFs.

To download the library, just click:

http://actionscripterutilities.googlecode.com/svn/trunk/

in your favorite SVN utility (Subclipse is the shit if you’re using Flex Builder or FDT).

If you would like to contribute, submit a bug, submit a feature request, or just yell at someone, just shoot me a mail at crebstock [at] gmail [dizzot] com.