Flash & AS3 info, source, & experiments
Flash
C U at the “Adobe on AIR tour” in Seattle
Jul 9th
I’m headed to the Adobe on AIR tour in Seattle tomorrow. If anybody else is going to be there that wants to hook up and exchange geek talk, drop me a comment or an e-mail…
Organizing your AS and FLA Files in Large Development Environments
Jun 13th
I lead an ever-growing team of Flash developers at a company called DigiDeal. We create electronic poker tables that go in casinos. Our goal is to pump out new games as often as possible. Since most casino games are just a variation of some “base level” game (such as Poker, Blackjack, Baccarat, etc), inheritance and code re-use is extremely important to us. Whenever possible, everything we create is broken into modular components with a good API. The “modules” can be as simple as a playing card or bet chip. But they can also be fairly complex such as a chip compilation linker, which takes care of creating multiple chip groups (one for your personal bank and [n] others depending on the number of distinct bet types in the given game), and allows them to interact with each other, send chips flying across the screen, color up the chips, balance the chips, and do various other animations. These “modules,” as I’m calling them, consist of a MovieClip/Sprite stored in the Flash Library and a linked AS class file.
Let’s say I get a spec for some new variation of a Blackjack game that I’m supposed to develop. My ideal goal for development would be as follows:
- Create a new .fla and the associated Document Class.
- Copy in all of the previously developed modules into the Flash Library or Stage as needed.
- Re-skin these modules where necessary.
- Write an inherited class for any of the modules that do not exactly fit my current needs.
- Import all of the necessary module packages in the Document Class.
- Utilize their API’s (properties, methods, and events) to get the game running as desired.
This, of course, is nothing new or exciting in the normal development world. But there is a unique organization problem in Flash. You have to organize, not just your .as files (package tree) and any associated images, sounds, and/or videos, but you also have to organize your Flash Library MoveClips. There are a couple of ways that this could be done.
You could create a single “modules.fla” which kept every component that you might ever need in a single file. Then, whenever you started a new project, you would just get everything that you need all from one place. This might be a great solution if you don’t have many modules. But what if you have over 200 modules and the .fla gets over 300 MB? Try opening and saving a 300 MB file in Flash. Personally, I’m not a fan of my mouse cursor turning into an hour glass for an extended period of time. Not to mention the repository ramifications if you only wanted to modify a single one of these modules or if multiple developers wanted to work on multiple modules simultaneously.
So, naturally, a better solution is to save each module in its own .fla. The question just becomes, how do you organize these .fla’s?
You could save them all at the root of the package tree. The benefits? You never have to set a class path and you’re guaranteed that the module you are looking for is somewhere located in a single folder. The downfalls? The module you are looking for is somewhere in a single folder. But good luck finding it quickly or efficiently if you have a ton of .fla’s.
So, it seems a better solution is to have these modularized .fla’s in their own folder tree. But how should this be organized? You could come up with some arbitrary folder organization structure that makes sense to you. But then let’s say that you just hired Joe Developer and he found the .as file for a module that he wants to use in a new game. Now although the folder tree that you created for your .fla files seems brilliant in your own eyes, Joe Developer might happen to have trouble understanding it. Now you have to spend extra time training Joe, when a more intuitive solution could take care of this for you.
A better idea would be to have some sort of organizational congruency between your .as files, .fla files, image files, sound files, and video files. For me, and ideal situation would be to navigate to a single folder and it would have everything that I need or is used by the module all in one location. Trust me, you will save yourself tons of time training the new people or remembering ‘where the heck you put that’ down the road if everything is in one place.
So, this is the approach that I went with:
Each level of the major inheritance tree has a folder called “modules.” Within it, there may be a few sub folders, but eventually there is a leaf node folder with the same name as the class that it contains. For illustration purposes, let’s say we had a module called “MyModule.” Inside the MyModule folder, there will be three things:
- The actual .as file for the class (MyModule.as)
- A folder called “resources”
- A folder called “sample”
Any images, sounds, or videos used by MyModule will be stored in the “resources” folder. Easy to find, easy to update.
The “sample” folder will contain MyModuleSample.fla and MyModuleSample.as. This will be the .fla and corresponding Document Class needed to quickly test/alter the module. MyModuleSample.fla will have a folder within its Flash Library called MyModule. The goal is that this folder can be copied out of the Library of the sample and pasted into any other desired .fla as a single, self-contained module.
I’m sure some people might scrutinize me for having .fla’s intermixed with my .as files, but this organization has proven very intuitive for new hires and has made it very easy for them to copy the packaged up Flash Library stuff into a new project. It has also saved me from having multiple folder trees open in my OS or having to move up and down the folder trees more frequently.
As a side benefit, this has made repository management much easier as well. Let’s say I modified multiple modules in various locations, but I only want to commit one of them. I can commit just the MyModule folder and it will grab exactly the files that I want committed along with it–no more, no less.
Hope this helps. Let me know your thoughts…
Bitmap and Sprite Conversion in ActionScript 3
Jun 8th
I got tired of writing the Bitmap and Sprite Conversion code in AS3 multiple times and finally decided I’d write a small utility that would easily do this for me.
Usage:
Let’s say you have some some Sprite on the stage called _mcSprite that you want to become a bitmap, then you would do the following:
[as]var tmpBitmap:Bitmap = DisplayConverter.spriteToBitmap(_mcSprite);[/as]
DisplayConverter.bitmapToSprite() is also included. Both functions include an optional second parameter if you wish to enable smoothing.
Get the open source class here.
Update:
I just realized that the spriteToBitmap function did not maintain the transparency of the original. This is because the BitmapData constructor defaults the fillColor to opaque white instead of transparent. This can be fixed by setting the alpha byte of the ARGB hex code to “00″ instead of “FF”. For example:
[as]var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);[/as]
The class in the download link above has been updated with this issue resolved.
FlashCS3 Class Path Oddities
Jun 2nd
I just spent the last 30 minutes wanting to pull an Office Space on my computer. It all boiled down to odd behavior related to setting the class path in Flash CS3. Allow me to save you from a similar frustration:
Let’s say I have an .fla located in “com.natejc.display.utils”. Since I’ll be using other classes in different packages, I set my class path to “..\..\” to get me back to the “com.natejc” level.
Now let’s say that this .fla contained a MovieClip in the Library that was linked to a class called “ImageLoader” in the “com\natejc\display\utils\” folder. So, I naturally set the linkage properties of this MC to “com.natejc.display.utils.ImageLoader”. Upon compiling, Flash kicks out the following error message:
5001: The name of package ‘com.natejc.display.utils’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. C:\src\com\natejc\display\utils\ImageLoader.as
What!? Yes it does! They match perfectly!! Well, I finally discovered that if I moved the ImageLoader.as file to any other location and changed the linkage appropriately, everything worked great.
Conclusion: If a class lives in the same location as the .fla file, the linkage is always simply the class name without any package prefix, regardless of what your class path is set to or how deep the file actually exists within this path.
However, this means that the movieclip in my library can never be copied and pasted into a different library without someone remembering to change the linkage. C’mon Adobe, even if it is in the same folder, I should still be able to utilize my class path and specify the full package in my MovieClip Linkage.
FlashDevelop 3 Beta review
Jun 1st
On Tuesday (May 22, 2007), Mika Palmu, Philippe Elsass, and Nick Farina made an alpha release of the next installment of my favorite ActionScript editor, FlashDevelop. Somehow, I missed that they released the beta last night!
I tip my hat to the guys that made it. Considering it’s a free editor, it’s pretty darn good. I have a few rants and items on my wish list that I’ll get into in a moment; but all in all, these guys could easily sell this product and yet they offer it for free. I’m surprised Adobe hasn’t hired them to save their horrible IDE in Flash CS3 (yeah, yeah, it’s improved… but for a company of their size and the number of years that Flash has under its belt, it should be significantly better than it is). Anyway, if you like and actively use the product, you should support them. If you are still using the Flash IDE to write your code, please, make your life easier and install FlashDevelop.
There is finally expanded keyboard shortcut support to allow utilization of keys such as ALT and PageDown.
Viewing multiple code files simultaneously in a split screen mode is even easier which can be seen here:
The Find & Replace is much better than it was in v2, but I wish it had a “replace within selection” option…
The code snippets have all been moved to individual external files. The best part is that they are now language specific! This means that I can have two different snippets, with the same name, but with completely different functionality depending on the language that I’m currently working in. There are a few $(EntryPoint) parameter oddities within snippets, but I expect they will fix this before the final release. Unfortunately, my biggest desire for FlashDevelop, more than anything else, still hasn’t been implemented. That is support for custom snippet parameters that can be changed in a popup dialog on the fly with default values. The SE|PY ActionScript IDE (also a great editor done by Alessandro Crugnola) has offered this feature for quite a while. See the screen shot below for how it works:
Configuring many FlashDevelop settings (but not all) or installed plugins is much easier with the new settings GUI:
The code completion is outstanding. The crash recovery seems to work fairly well (but I noticed a couple of oddities). The new integrated browser works okay, but it is in dire need of forward and back buttons (I wouldn’t even use this browser if it weren’t for the one click access it has to the online FlashDevelop documentation wiki).
All in all, FD is still my favorite (free) AS editor, and FD3 is a nice next step. If they add support for custom snippets, I would be as happy as Google was to locate E.T.
Flash Player 9 Local swf Security
May 30th
Let’s say you had an external settings file that you wanted to load using the following code:
[as]protected var _loader:URLLoader = new URLLoader();
_loader.addEventListener( Event.COMPLETE, function():void { trace(“settings.txt was loaded successfully”); } );
_loader.load( new URLRequest(“settings.txt”) );
[/as]
You finish writing your class, save your fla, and compile. After compilation completes, the code above properly trace s “settings.txt was loaded successfully” (assuming settings.txt actually exists in the proper location). Yay, it worked!
However, if you were to immediately run this swf file a second time, you would not see this trace statement. “Why not!?” you may ask in complete frustration after trying for 20 minutes to figure out what the heck is going on and have a few less hairs on your head and a few more in your clenched fists (or maybe that’s just what happened to me).
By default, when you compile any class using the Flash IDE, it is automatically “trusted,” but for this single execution of the swf file that immediately follows the compilation only. All other flash files run from your local system, by default, are not trusted. This means that they cannot access external assets (such as text files) or communicate using the network. This may seem frustrating when you’re developing, but since the capabilities of the FP are growing so much, this is a very good thing or hackers would be going crazy and everyone would be very ticked at Adobe.
In order for local swf’s to have further privileges, they must be “trusted.” There are two main ways to “trust” a swf:
- Add the swf or folder containing the swf to the Global Security Settings panel
- Add the swf or folder containing the swf to the FlashPlayerTrust.
The first method can be completed by doing the following:
- Run any swf file.
- Right click on the swf file and choose “Settings”
- Click on the “Privacy” tab and click on “Advanced…”
- This should bring up a Flash Player Settings Manager website (note that steps 1-3 can be skipped by directly accessing this site).
- On the left-hand pane, click “Global Security Settings Panel“
- Click on “Edit locations…” and then “Add location…”
- Choose the file or folder that you wish to “Trust” and press “Confirm”
The second method can be completed by doing the following:
- Open the FlashPlayerTrust folder on your computer.
- Windows: system\Macromed\Flash\FlashPlayerTrust
- For example: C:\windows\system32 \Macromed\Flash\FlashPlayerTrust
- Mac: app support/Macromedia/FlashPlayerTrust
- For example: /Library/Application Support /Macromedia/FlashPlayerTrust
- Linux: /etc/adobe/FlashPlayerTrust
- Windows: system\Macromed\Flash\FlashPlayerTrust
- Create a new text file (any text editor should do) and call it whatever you want, but with a .cfg extension.
- Add the absolute path of the file or folder that you wish to to the text file.
- Save the text file.
Note that the locations listed above are for trusting flash content for all users. If you wish to trust content only for a specific user, use the following FlashPlayerTrust locations:
- Windows: app data\Macromedia\Flash Player\#Security \FlashPlayerTrust
- For example: C:\Documents and Settings\JohnD \Application Data\Macromedia\Flash Player \#Security \FlashPlayerTrust
- Mac: app data/Macromedia/Flash Player/#Security /FlashPlayerTrust
- For example: /Users/JohnD/Library/Preferences /Macromedia/Flash Player /#Security/FlashPlayerTrust
- Linux: usr data/adobe/FlashPlayerTrust
- For example: /home/JohnD/adobe/FlashPlayerTrust
For further information, see the flash_player_9_security.pdf white paper.
Animated Cursor
May 25th
Hopefully things will slow down at work so I can get back to the tutorials. In the mean time, check out the best animated cursor I have ever seen (and I typically can’t stand most animated cursors). It was created by www.1-click.jp, but I hosted it here in-case they ever move it.
PowerCursor – Flash Tactile mouse cursor response?
May 23rd
Check this out:
“Tactile sensations like stickiness, roughness, pressure, volume or mass can be experienced in a graphical user interface without resorting to special force feedback devices. Powercursor uses a technique called ‘visually simulated force feedback’ to evoke the tactile experience.”
Pretty cool concept. Not sure how practical it really is, but I can think of a few creative uses and a couple of unique flash games that would be fun to use it in. It’s all in AS2, but I doubt it would be very hard to port to AS3. Nice concept. Check out the examples here.
ActionScript 3 Data Structures
May 18th
I’ve been longing to re-create the Zelda Arena game I created a while back in AS 3 (under a different title so I don’t get sued by Nintendo), and actually finish the project (feature-complete) and post it online where multiple people could go up against each other on a single server. My dreams for the game might be larger than my spare time allows (it seems like I don’t even know what ‘spare time’ means lately), but I think I’ll take a shot at it and see what happens.
In order to do it properly and write some decent AI, I’ll need some good Graph and Tree data structures written in ActionScript 3. I was about to pull out all of my old C++ code for these structures that I wrote back in college and port ‘em over, until I noticed Michael Baczynski of Polygonal Labs did all the work for me! He called it AS3 Data Structures for Game Developers and, so far, has included the following structures:
- Multi-Dimensional Arrays (2d and 3d, native)
- Queue
- Stack
- Tree
- Binary Tree
- Binary Search Tree
- Hash Table
- Linked Lists
- Heap
- Priority Queue
- Graph
- Bit Vector
Although I haven’t begun to use them extensively yet, all of the features that I desire seem to be there. The code looks pretty good, both from an efficiency and a design pattern point of view. Everything has ASDoc supported comments. He even has a nice tutorial on using the Tree Class and it seems he might be adding more tutorials later. Nice work Michael!
You can download the structures here:
FLV Video Player Review
May 17th
I had reason to run a downloaded flv file on my local system today. I tried three different players in the following order:
- Flash Video Player by FlashGuru
- Apollo Flash Video Player by Mutationevent.com,
- FLV Player 1.3.3 by Martijn de Visser
The first two both installed just fine, but when I double clicked my .flv file, the respective player started up and then nothing happened. So I moved on from those players in about 30 seconds.
The third player by Martijn de Visser installed easily and played my flv file when I double clicked on it first try! It has a nice, very simple interface, with a couple of basic features (such as zoom 1x, 2x, load file, load url, etc). The player certainly is lacking in advanced features and the author is aware of this and created a spot to post your wishlist for v2 features. However, that was back in April ’06 and he hasn’t blogged much since then, so the project might be abandoned–I can’t tell. Either way, this basic player serves its purpose well. Download it here:
Tweener Transition CheatSheet
May 16th
Have you ever wished you could have all of the different Tweener transition types (based on the Robert penner easing equations) on a single cheatsheet? I have too. So, I finally got around to making said cheatsheet. Enjoy.
Seven2 Interactive & Spokane FPUG
May 11th
I live and work in Spokane, Washington, USA. Recently, I’ve been dreaming of having a SFPUG (Spokane Flash Platform User Group); but after trying hard to hire some good Flash developers for my current employer (DigiDeal), I was convinced that all of the good Flash developers in my somewhat-smaller-city were already working with me…
And then, out of nowhere, in steps a company I had previously never even heard of, Seven2 Interactive. They’re a Spokane based outfit that has done some very nice work for some pretty big namers, such as Nintendo, MTV, Cingular, etc. I met up with the two founders today, Tyler & Nick, over sushi. It seems like these guys are as cool as their company’s work is. The inside of Seven2′s office was very stylish–they even had three conference rooms named Rock, Paper, & Scissors–rad. Cool facility, cool view, and even a cool game room. It’s good to see impressive Flash & design work coming from Spokane.
My dream for having a SFPUG has been renewed. Anyone else in the area that’s interested? Drop me a comment…
Flash, UML & gModeler Review
May 10th
I started looking for different UML tools today to use for my next project. I wanted something free. I remember seeing a couple done in Flash in the past, so I figured I’d try those out. I came across three of them:
- gModeler – Done by Grant Skinner and his team in Flash. Free to use.
- gliffy – Done in Flash. Does many other diagrams besides UML. Looks slick. But it’s only free to try (3 free diagrams).
- Saffron – Done by Samuel Agesilas in Flash/Apollo. Looks very nice, but it’s not out yet. I can’t wait to try it. If you read this Samuel, I would love to be on the private alpha!
So, I decided I would go with gModeler to see how it panned out. Here’s my review:
Strengths:
- It’s free.
- It’s very easy to figure out. Without any documentation, I was up and running in about 5 minutes.
- It has most of the features I was looking for. I could create class objects, add properties, methods, and events. It has an “inspector” that allows for further details of the class such as method parameters and documentation. It was easy to link compositions, aggregations, dependencies, inheritance, etc.
- It allows you to save your document online, or export/import the corresponding XML to and from your local machine (not directly, of course, since Flash doesn’t support direct saving of files, but it gives the XML which can be pasted into a text editor and saved locally).
- You can zoom in and out.
Weaknesses:
- The project was created in 2003. I think it may have been abandoned.
- No undo command. This is by far my largest complaint; it really slows down overall productivity.
- Tab focus is sometimes awkward. For example, when I was in the “inspector” adding parameters, I had the parameter name in focus and I wanted to specify the parameter type, so I pressed Tab. Although it applies a highlight to the Type field, it does the same to the “Short Description” field as well. I started typing, and it replaced my short description text. I tried to undo, but no such functionality.
- It has a really slick code documentation feature, but it’s not up to date. It didn’t use ASDoc tags, such as @param.
- The Inspector is something that I would access very often. It’s annoying that it takes two clicks to get to it. There should be a toolbar icon that gives direct access.
- There were a few keyboard shortcuts that I discovered by randomly pressing keys, but I didn’t notice any documentation for what they are. Toolbar hints that list the shortcut would be very handy. It would also be nice if they were more consistent with the Flash IDE; for example, the arrow tool should be “v” instead of “1″.
- You could not copy things by pressing [CTRL]+[C].
Overall Opinion:
It seems like it wouldn’t take that much to make this tool a great free tool that I would actively use. But, the current weaknesses are too great for me to consider using it for the long run. So, unless Grant and his team happen to make some updates, I’ll keep searching for a new, free, UML tool. Any suggestions?
Registered Socket Functions
May 3rd
Now that you know how to dynamically cast variables at runtime, we can create a very cool static class I dub RegisteredSocketFunctions. The purpose of this class is to allow any function to be “registered,” which, by doing so, allows global access to the function directly.
The goals of the RegisteredSocketFunctions class:
- Any function in any class can be very easily “registered.”
- Once registered, any function in any class can be executed, maintaining all parameter functionality.
- Any implied or direct usage of the “this” expression in the executed function will be interpreted properly.
Here’s the API:
[as]
/**
* Adds a new function to the list of available socket function calls.
*
* @param sFName Socket function call string reference name.
* @param funcReference A Function reference to the actual function.
* @param thisObject A reference to the object that should be the “this” object when this function is executed.
*
* @usage RegisteredSocketFunctions.registerFunction(“myTestFunction”, myTestFunction, this);
*/
public static function registerFunction(sFName:String, funcReference:Function, thisObject:Object):void
[/as]
[as]
/**
* Removes a function from the list of registered socket function calls.
*
* @param sFName The socket function call that should be removed.
*
* @usage RegisteredSocketFunctions.unregisterFunction(“myTestFunction”);
*/
public static function unregisterFunction(sFName:String):void
[/as]
[as]
/**
* Executes a Function that was previously registered using registerFunction with the name sFName.
*
* @param sFName The string reference name of the function that is to be executed.
* @param argArray The optional list of parameters that should be executed with the function.
* @param thisObject The optional object to which the Function referenced by sFName is applied. The “this” operator for the executed function will be thisObject if thisObject is non-null; otherwise, it will be the thisObject specified when registerFunction was called.
*
* @return Returns whatever value (if any) is returned by the function being called.
*
* @usage RegisteredSocketFunctions.registerFunction(“myTestFunction”, [var1, var2]);
*/
public static function executeFunction(sFName:String, argArray:Array = null, thisObject:Object = null):*
[/as]
Example:
Let’s say you have the following class
[as]
package
{
import com.natejc.utils.communication.RegisteredSocketFunctions;
public class RSFTestClass
{
private var _sName:String;
private var _nAge:uint;
public function TestClass()
{
RegisteredSocketFunctions.registerFunction(“testFunc”, testFunc, this);
} // END CONSTRUCTOR
public function testFunc(sName:String, nAge:uint):String
{
this._sName = sName;
this._nAge = nAge;
trace(“Hey ” + _sName + “, I can’t believe you’re ” + String(_nAge) + ” years old!”;
return sName + String(nAge);
} // END FUNCTION testFunc
} // END CLASS TestClass
} // END PACKAGE
[/as]
Then any other class in any other function could execute testFunc by doing the following:
[as]
var s:String = RegisteredSocketFunctions.executeFunction(“testFunc”, ["Joe Mama", 90]);
trace(s);
// which traces:
// Hey Joe Mama, I can’t believe you’re 90 years old!
// Joe Mama90
[/as]
Caution:
This class is intended to allow execution of functions across a network (which we will be discussing further later). Although this may seem like a cool, time saving way to allow classes all over your code interact with each other, doing so is definitely poor coding practice. Just like in real life, a child should never have command over its parent
. Having said that, if your project is due in 1 hour and you don’t have time to write all of the event handling that you should write, well, congratulations; you just found a class that will encourage your bad habits…
Download: RegisteredSocketFunctions.as

