Flash Friday
Opinion DisclaimerQuick tip Ctrl+3
So lately I’ve been teaching myself how to use the Vim editor. If you know anything about Vim you know it is all about efficiency of keyboard usage. The more I’ve used Vim, the more I don’t want to move my hand to my mouse if I don’t have to. It’s not that I’m lazy, I just want to challenge myself to be more efficient.
If you’ve been reading my blog lately you may have read about me using embedded fonts via Resource Bundles. One problem I’ve always had with embedded fonts in Flash Builder is that some builds they work and some they don’t. I’m guessing its part of the incremental compilation process because doing a Project–>Clean… seems to fix the problem. It works but then I have to move my hand all the way over to my mouse to make it happen. I needed to find a good keyboard shortcut, for some reason I wanted it to be a default key binding.

Enter CTRL+3
There are shortcuts for Flash Builder common features but Project–>Clean… isn’t one of them. Eclipse has an interesting Keyboard Shortcut in CTRL+3 – Quick Access. The Quick Access shortcut allows you to hit the shortcut then just start typing the name of the feature you want to use – and there is a big list available to you in Eclipse. A bonus to the Quick Access shortcut is that the last feature you used can be used by hitting return. So to set up a shortcut for Project–>Clean there are just a couple steps.
- Hit Ctrl+3
- type ‘Clean…’ then press enter
Now you can trigger a Project–>Clean… with just Ctrl+3 and Enter. The default for me is to clean all projects and I usually only have one project open at a time so I just enter through that as well.
Really, you can use this with just about any feature you’d like. Once you use it, the feature goes into your Quick Access list. Then its as easy as an arrow up or down (or a few keystrokes to type the action name) to get the feature back to the top of your list and use it.
For me this is one of the hidden gems of Flash Builder. You get this for free for using Eclipse. There’s plenty more where that came from too. Are there some hidden gems you use all the time? Please share them in the comments below. Flash Fridays are all about sharing knowledge with the community so that we become better developers.
Setting up Resource Bundles
In last week’s Flash Friday post I wrote about using resource bundles to handle embedded fonts. I also left out any instructions about how to set up your project to use resource bundles, instead telling the reader to search the interwebs. I also said I would provide one of my own instructions so here it is.
Project Setup
Your project needs to be able to find your resource bundles so they need to live in your source path. You could place the bundles in the same folder as your source code, but I find that feels a little disorganized. Instead create a folder for your resource bundles and add it to your source path.
In other tutorials they talk about using resource bundles for localization. If that is the case you can add the files as follows. I’ll assume you are using the en_US locale, otherwise replace all instances of en_US with the locale you are using.
- create folder path in your project of: locale\en_US
- add the source folder locale\{locale}
- add the following to your compiler arguments: -locale=en_US
Now you can place your resource bundles in the locale\en_US folder.
Property Files
Resource bundles are sometimes referred to as property files because you create them in files with a .properties extenstion. The part before the extension is the bundle name, and you would use that to get the information you wanted. For example, you you had a bundle named fonts you would create a file called fonts.properties. If you were paying attention to my previous article you probably saw me use this same bundle name.
Inside the property file
The property file is fairly simple. It is just a key/value pair separated by an equal sign(=). A simple resource bundle that stores text strings might be called text.properties and look like the following.
# text.properties hello=Hello World! goodbye=Good-bye cruel world!
You can look back at my font embedding article to see how I embedded fonts. You can use the same method to embed anything that you can embed using the Embed metatag.
Using the properties in the file
The first thing you need to do is add the Resource Bundle metatag somewhere in your project. You only need to use it once per project for every bundle you are going to use. However, once you do this it gets compiled into the project, even if you don’t use the resources. So I would recommend using it in the class(es) that use(s) the bundle.
[ResourceBundle("fonts")] public class MyFontsBundleUsingClass { ...
Then to use the resources you just need to get an instance of the ResourceManager use one of its functions to get the resource. Here is an example for grabbing a String from my text.properties file I created earlier.
var resources:IResourceManager = ResourceManager.getInstance(); var hello:String = resources.getString("text", "hello"); var goodbye:String = resources.getString("text", "goodbye");
- Of course you can get more than just strings from a property file. Just choose from the following list of functions in the IResourceManager interface.
- getString
- getBoolean
- getInt
- getUint
- getNumber
- getStringArray
- getClass
- getObject
And that is my basic primer on using ResourceBundles in actionscript projects. In the grand tradition of this line of posts I am leaving out many important bits of information. Loading resource bundles at runtime is one of them. I’ll leave that as a web search exercise for the reader until I write an article on that in the future. If there are other bits of information you would like clarity on let me know in the comments.
Under the mask but I didn’t ask – Flash Friday
Masks in the flash IDE are an interesting thing. You may have noticed that masks created in the IDE are not found in the normal “mask” property found on a movieclip. This is because it isn’t a normal mask. The mask is working on a layer instead of on a single DisplayObject. This little quirk causes some interesting behavior that you may never have noticed before.

If you have a MovieClip with a mask as a top layer of the timeline there is some strange behavior when you addChild to that MovieClip. The added content gets placed under the mask. Wait! What? The added content gets placed under the mask. You may not have noticed this behavior in the past because you may never have done it, you may not have your item cut off by the mask or you just might not have been able to figure out why you couldn’t see your item. However, it is happening.
[ad#Google Adsense]
Another twist on this phenomenon is that if the mask isn’t the top layer but your remove the items that are on the top layer then add a DisplayObject. Well, in that scenario your new DisplayObject is also placed under this “Layer Mask”. I found this out today when I had a top layer above a mask that was a TextField. For a localization project I’m working on I had to wrap the field in a wrapper class that then gets added back where the textfield was. I was trying to figure out why the textfield was now appearing like it was under the mask. The answer…because it now was.
So how did I deal with this? How can you deal with this if you find it happening? First off, it might be an easy thing to just restructure your timeline so the mask isn’t on top. If that isn’t possible, the hack easy fix is to add a blank MovieClip symbol to the layer above the mask layer. That is what I did for this asset and all is well.

I haven’t extensively tested this but my guess is the quirk may exist if you add something to any layer right above a “Layer Mask” it will placed under the mask. Is this something you have experienced? How have you worked around it? Have you used it for any type of effect?
I don’t believe you really want to count on this behavior for anything as I don’t believe I’ve seen it documented anywhere. Someone at Adobe might read my blog
and decide this isn’t appropriate behavior they might fix it in Flash Player 20 or something.
Flash Friday – Version Control
When I first started my Flash Friday posts I wanted to write about the whole flash ecosystem. At the time I thought about Flash, Actionscript, Flex, Flex/FlashBuilder and a few other tools. Recently, I have realized that the ecosystem is much larger than just flash. For people to truly be well rounded flash and actionscript developers who make every other flash and actionscript developer look good its important to know about these non-flash things. One of the most important things to any developer is version control.
On the surface, version control seems simple enough. Save files in a way that allows me to go back in time if I make a mistake or forgot what I did in the past. Many people, a past version of myself included, think that’s all there is to version control and thus us backup folders or file naming conventions to achieve this goal. I am writing this article because version control is way more than just this and definitely more important. For those who really master it you can actually save yourself quite a bit of time.
Why learn version control
If version control is more than backing up files what is it? I’m glad you asked. Version control is a way to safely and elegantly work with multiple people on a project. The multiple people include people in the same office or people on the other side of the world. It also includes the multiple yous that you wish you could create so that you could finish that cool new feature but you just can’t take the time to hunker down and get it done all at once.
Version control is and/or allows:
- Saving a history of your work as it evolves
- Keeping track of who did what
- Trying things out that you might throw away
- Without breaking working code
- Keeping a history of that as well
- Working on a file without worrying if somebody else is
- Taking someone else’s work in a different direction ( forking )
What should you learn
- SVN – The most popular centralized version control system
- Lots of great tools makes it easier to include artists in the version control system
- GIT – A very popular up and coming distrubuted version control system
- Branching and Merging
- Become a master at this for whichever version control systems you learn and it will make your professional life much simpler.
Tools
- Subclipse – a great eclipse SVN plugin you can use with Flashbuilder or FDT
- EGit – a similar eclipse plugin for Git
- TortoiseSVN/TortoiseGit - two great sell extensions for version control in Windows explorer.
- GitHub – If you are working with Git this is a great place to start putting your code. Lots of straightforward how-tos
- Books – I’ve found the following two books to be extremely helpful in learning SVN and Git
Final Notes
I mentioned SVN and GIT because they are currently in such wide use. However, version control concepts can be learned from any version control system. If your company or project is using something else, such as CVS or Mercurial, learn it and master as much of it as you can. I can’t stress enough how important it is to master branching and merging. Get good at this and task switching will be much easier so you’ll be able to working on many projects at once.
What are your thoughts on version control? What problems have you had? What successes have you had?
Flash Friday Refactored – IS_IN
A while back I wrote a proof of concept isIn functionality injector that seemed to work fairly decently. I even wrote some tests for it that it passed with flying colors. Being a proof of concept I never really used it and never ran into the danger of using that functionality.
Recently I downloaded the trial for FDT and since it doesn’t have the same type of FlexUnit integration that FlashBuilder 4 has I had to get my tests working differently. When I got the tests up an running my tests for the isIn functionality blew up in spectacular fashion. They didn’t just fail, the took the whole unit test display down with them. This was the same class and tests that passed cleanly before. What happened?
It turns out messing with the prototype of Object to solve a problem is like fighting fire with a nuclear explosion. It will probably work but cause serious problems throughout the system. So, following the test driven development methodology of red, green, refactor I saw that it was a time for a refactor. Well that and it was now a red test that I wanted to make green.
I came up with a solution that I think is better. It is more flexible than before, since you can select the class you want to add the functionality to. Even better, you can remove the functionality after you add it. Since I’ve begun to move my code over to GitHub you can find the new code over at https://github.com/darylducharme/Ducharme-Media-Code/tree/master/src/cc/ducharme/utils. The new test class is available at https://github.com/darylducharme/Ducharme-Media-Code/blob/master/test-src/utils/IsInTests.as
You may notice that the last test - dictionaryEnumerationTest() at this time – is new. This is the test that checks the problem that I found that was not being tested before. If you are writing tests and find a hole in your tests later, it is always recommended to add new tests to keep you from having the same problem in the future.
Hopefully, someone out there can learn from my mistakes on this occasion. Also, the new isIn class and its static functions are a whole lot more useful than what I had written before. Perhaps someone out there can put it to good use. What do you think?
Flash Friday – Robotlegs Context
A few weeks back I wrote an article saying that I was just starting to work with AS3 Signals and the Robotlegs framework at my new job. Since then I have written a post about AS3 Signals and now it is time to write about Robotlegs. Since there is so much to write about with regards to Robotlegs I had to break out one chunk to discuss.
In working with the framework, reading lots of documentation and finding it central in the diagram above, I thought it best to start with the Context class in the Robotlegs framework.
Robotlegs is an MVCS framework similar to Pure MVC that relies on metadata based dependency injection. On the surface the first cool thing is that you can use the Inject metatag to populate class fields automagically. More automagic part of the framework is that mediators automatically get created when the view they are mediating gets added to the stage. Finally it has a very elegant central event dispatcher and Command pattern model that you barely need to do anything to get working. All this is possible because of the Context.
Getting [Inject] to work
// It really is just this easy [Inject] public var obj:MyClass;
Most of the power of Robotlegs comes from the use of the Inject metatags letting the framework. However, the framework can’t inject anything until it knows what to inject. This is almost entirely done in the Context and I am going to go through the main functions here. Keep in mind that all these methods also have their inverses to undo these acts but I’ll let you look those up on your own. For now I’ll keep it simple and we can get to more advanced usages in other articles.
Injector methods
injector.mapValue is used when you already have a class instantiated and you want to use that object as a singleton in this application context. The basic format is: injector.mapValue(whenAskedFor:Class, useValue:Object) and might look like this:
var myObject:MyClass = new MyClass(); injector.mapValue( MyClass, myObject );
If you want to do something similar without first instantiating the object, you can use mapSingleton. The format for that is: injector.mapSingleton( whenAskedFor:Class ) and the above example would be changed to this.
injector.mapSingleton( MyClass );
injector.mapClass is used when you want the injector to create a new instance of a class every time it is asked to inject that class somewhere. The format for this function is injector.mapClass( whenAskedFor:Class, instantiateClass:Class ) and if we decided against using a singleton for MyClass instances the above examples would become:
injector.mapClass( MyClass, MyClass );
That last one may seem wierd because you type MyClass twice. However, this is because you could pass in any class that extends MyClass for the instantiateClass parameter ( or implements it if it were an interface ).
Once you’ve used one of these 3 commands ( or some of the others I can talk about at another time ) on all the values you want to inject in your application, anytime the framework creates or manages a class object it will have the information it needs to do just that. So how do you go about getting Robotlegs to create a class object? Automagic mediators are a perfect example.
Automagic Mediators
In Pure MVC like architectures the Mediator classes handle communication between their views and the rest of the application. Since Robotlegs is an MVCS framework based on Pure MVC this is a perfect opportunity to have the framework create the mediator for you. From the Context class you only have to write something similar to:
mediatorMap.mapView( MyView, MyViewMediator );
In this MyView is a view class and MyViewMediator is the mediator designed for it. Now the application will automagically create a MyViewMediator object when any MyView object is added to the stage and inject a reference to the MyView object into it. It will also destroy the MyViewMediator object just as magically when the MyView object gets removed from the stage. I can write much more about this in an article on the Mediator/View relationship that I plan to write in the near future.
Since Robotlegs creates the mediator it can easily inject what it needs to after it creates the class. Another class type that Robotlegs creates are Command classes.
Events, Commands and tying it all together
Robotlegs uses a centralized event dispatcher throughout to keep the model, view, controller and service sections decoupled from each other and yet tying them together at the same time. One major part of the centralized dispatcher is triggering Commands. If you’ve read this far, I thank you and I’m guessing you already know about the Command pattern.
To set up the command pattern in the your Robotlegs Context class just use the following format. commandMap.mapEvent( eventType:String, commandClass:Class ) which might look like this:
commandMap.mapEvent( MyCustomEvent.SOMETHING_IMPORTANT, DoSomethingImportantCommand );
Now, whenever a class in the framework dispatches the SOMETHING_IMPORTANT custom event the DoSomethingImportantCommand will be created and executed. As a bonus, the specific instance of MyCustomEvent can be injected into the command with a single line:
[Inject] public var event:MyCustomEvent;
Conclusion
So this article did not have had any sexy embedded SWF files that use Robotlegs. However, this framework’s strength is not about sexy SWF files but its ease of use which should make creating that sexy file go quicker. The context file is the heart of Robotlegs and using the few methods I’ve written about here you can use it to make a fairly robust application linked together with dependency injection.
I’ve purposely left a lot out of this post. This is because I just want to wet your appetite to give it a shot as well. Also, I’d like to hear what kind of questions come up for you in the comments. Finally, I could write a lot more just about the context class and favoring configuration over convention( well sort of ), but it would just turn into a mess of words and I’d be surprised if you read this far anyway. If you did, thank you. I’d love to hear what you think of Robotlegs if you’ve tried it out or even if you’ve decided not to.
Flash Friday – AS3 Signals Basics
A short while back I mentioned a couple new open source projects I started working with at my new job. One of those projects was AS3 Signals. Since I’ve begun using it I’ve really grown to like it and I wanted to explain why. Hopefully my explanation of why will also include enough of the how.
First off, have been a big fan of the AS3 event model since it came out with flash player 9. It, like many other AS3 updates, was much cleaner than the ways we were doing things in AS1/2. However, there have always been a few things that have bugged me just a little about the native event model.
I have to look at documentation to see what events a class object fires.
I can’t count the number of times I am looking into a new framework, or even native classes, and I hope it fires an event but I can’t just tell by code completion alone. Worse yet, sometimes important events don’t even get documented so I have to search through source code to see what gets dispatched. On the flip side, if I’m writing custom classes I don’t like writing documentation. I like my code to be readable like a good book, if at all possible. The AS3 event model forces you to read and write documentation. How could AS3 Signals clear up this problem though?
AS3 Signals clears up the problem of needing the documentation by having you create individual signals as objects in a class. This allows the programmer the opportunity to name the signal appropriately, thus making it easy to understand for the user of this class. Thus eliminating the requirement for documentation.
Let’s give a simple example. Let’s say you have a class that loads an external file and isn’t ready until that file is loaded and parsed. With AS3 Signals this is a relatively simple process.
First create the signal in the class:
public var becameReady:Signal; public function MyFileLoader( url:String ):void{ becameReady = new Signal(); // you can come up with your own code here. }
Now anyone wanting to use the MyFileLoader class can see that you have a signal called becameReady. Hopefully they can tell from just that info what it does. Or perhaps you can come up with better naming. Either way this is an improvement.
Event types are strings
Strings are flexible and easy to read ( such as in a trace or error message ). The other problem is that they are not type safe and I’ve had times where event type naming collisions do happen. AS3 signals takes care of this problem by both solving and circumventing the problem.
AS3 Signals circumvents the problem by having you create separate ISignal objects for each type of event you would have dispatched in the past. Even though they are all of type ISignal, they are each distinct fields on an object. For example, if I had a class controlling a form, some of its signals might look like this:
public var submitClick:NativeSignal; public var clearClick:NativeSignal; public var completed:Signal;
AS3 also solves the problem by having event type checking, if you are working with the native event model. I haven’t worked much with this at this point so I won’t get into this in this article. If you’d like to know more about this comment below and I can write about it in a future article.
Custom events and event dispatcher classes take too much code for the simplest task
We’ve all been there, we want to make a custom events for a project but we have to write a whole new class to encapsulate what we need. Also, if we want to dispatch these events from a class that doesn’t extend EventDispatcher we need to make sure to implement IEventDispatcher. Sure, these are relatively simple tasks but they take time and you are writing code that reeks of duplication.
As you have seen above, it is really simple to create a “custom” signal. Just define and initialize a new signal. Dispatching it is just as easy.
public var somethingHappened:Signal; private function init():void { somethingHappened = new Signal(); } private function doSomething():void { // custom code that does something ;) somethingHappened.dispatch(); }
Too make the signal more custom you can send as many objects as you want in the dispatch call. I’ll leave that as an exercise for the reader ( or you can exercise the comments section and I’ll show you what I mean below ).
If you just want to listen once you have to write extra code
The native event model doesn’t make it easy to listen once. Perhaps you want to listen to a view’s close button for just one click. With the native event model you have to remember to call removeEventListener in you event handler or else your program may not work as expected and it will likely create a nasty memory leak. AS3 Signals simplifies the process with the addOnce() call.
private function init():void { doSomething(); view.closeButtonClick.addOnce( onCloseButtonClick ); } private function onCloseButtonClick(){ view.close(); }
The previous addOnce call was so minor you might not have noticed it in the code. Really, that’s all it takes. Signals are really quite easy to clean up.
Cleaning up listeners is difficult
When trying to find memory leaks, the first thing I look for is calls to addEventListener. They are usually the major culprit because it is so easy to lose track of which listeners were added to an object and for which event type. As you saw above, Signal objects have a built in mechanism for removing listeners after a single call if you want. They also have a simple way to remove all listeners from themselves, the aptly named removeAll function.
function close():void { closeButtonClick.removeAll(); otherSignal.removeAll(); }
Conclusion
This article was much longer than I thought it would be. If you made it this far, thank you for reading. I hope you see how AS3 Signals is an improvement over the native event model. Once you start using Signals you’ll likely find yourself using events less and less. The event model is still core to AS3 though so there are some good ways to use them together. I plan to write a ( hopefully shorter ) article on using AS3 Signals with the native event model in the future. If you have any questions, comments or requests regarding AS3 Signals please let me know in the comments below.
Robotlegs and Signals
Just a short note for this, the first Flash Friday post of 2011. Just last week I started a new job in the social game space. It is a very exciting opportunity to work with some new people and learn new things. One thing to learn is the code base that they use, some which is open source. Two OS projects that I am now working with that I’ve never worked with before have caught my eye. These two projects are Robotlegs and Signals.
First there is Robotlegs, an MVCS framework that is similar to PureMVC but if you’ve used any MVCS framework ( such as Cairngorm ) the concepts are similar. Robotlegs is cool because it does a really good job of keeping classes well decoupled through the use of metatags and injection. If you code any games or rich internet applications with flash I highly recommend giving it a look to see what you can use from it.
Second is AS3 Signals. Signals is an Observer pattern framework that you can use instead, or in conjunction with, the actionscript event model. I’ve been a fan of the observer pattern for a while, using the AsBroadcaster class back in AS2. When AS3 came around I relished in its event model, not because it was perfect but because it was better than using AsBroadcaster ( or rolling your own setup ). Signals improves upon some of the shortcomings of the AS3 event model in a few different ways.
All in all these are the two big new frameworks I am using at my new gig and I plan to share some lessons as I learn them. There is also much more that I’ll learn about as well and I plan to share them as well. For now, check out Robotlegs and AS3 Signals and see what bits of them you can use or just get some good ideas for your own code. I hope if you do you’ll share them in the comments.
Have you used either of of these frameworks? What do you think? Any gotchas you need to watch out for? I’d love to hear what you’ve encountered in the comments below.





Find Me Elsewhere