First, if you don’t know what I’m talking about, check out the news. I think the best explanation comes from Mike Chambers’ Blog and a corresponding post on the Flex Team’s Blog.

Don't panic! Take a deep breath and look at this cute bunny

Not much has changed with the Flash Platform

If you read closely, not that much has really changed. The problem is perception. Let’s review what is going away and why it’s not as crazy as it might sound.

Mobile Flash Player

Adobe is discontinuing work on the mobile Flash Player. I don’t know the numbers of people building Flash content for Android but I suspect it’s not incredibly high. I would also wager that even Air on Android/iOS is still far from critical mass, but Adobe say they will continue to support this. The desktop Flash Player will stay the same and for the foreseeable future continue to surpass HTML5 in features and cross-platform functionality.

Another way of saying this is that the Flash Platform remains the best choice for the tasks that it was already the best choice for. Mobile was never one of these and some applications, like video players, may have lost that title to HTML5. But in cross-platform, rich-media, deeply interactive experiences on the web, Flash is still ahead of the competition.

Flex is still here

Adobe is discontinuing its support for the Flex SDK. However, it will stay around as an open source project (it was already open source.) It may never get better than it is already, which so far has been good enough to become the platform of choice for many Flex developers.

Flex cannot get any worse than the next version 4.6, which you were probably looking forward to until today. And you know what, that’s okay. We don’t need to be so obsessed with the next thing that we change careers because the next next thing has an uncertain future. I happen to know of some projects that are still using Flex 3 and will probably never upgrade. Why? The user doesn’t know the difference between mx and spark skins.

It may also get better after being untethered from Adobe and in hands of the Flex Community. In other words, we’re in charge now. The Spoon community, who is inheriting the Flex project, already have plans to make a version 5.x.

Fear itself

The real issue now is the way the public will preceive this news. This announcement has sapped the confidence of a lot of people, customers and developers alike. In my opinion, it’s not the time for us to decry Adobe as evil jerks. It is a time for us as experts to try to help our clients, companies and the public to make sense of the news. It’s time to remember that Flash is just a tool in the arsenal of an interactive developer. In fact, Flash’s popularity, due to largely political reasons, has already been on the decline for a while now. But, it will certainly be dead if the Flash users themselves don’t believe in it.

The next time a client wants an awesome, interactive video, 3D puzzle game, website thing I will still recommend Flash. I don’t want to have him tell me “it has to be HTML5″ because he read online that “Flash is dead.” In fact, I think it’s our job to talk about its strengths and its weaknesses in a totally objective way. We should all dwell in the middle ground between Adobe zealotry and jumping on the next bandwagon.

Your next job

I feel hopeful that the shit will not hit the fan, at least not immediately. That being said, I am always an advocate of looking at other technologies and keeping those abstract coding skills honed. Good developers are in a prime position to port our skills to whatever platform comes next, and those skills are almost always in demand. Even HTML5 (JavaScript) apps share a very similar language with AS3 (really AS1). I was able to pick up JQuery and build my first HTML5 project in a matter of a day or two.

As Mike Chamber’s writes:
“I think it is a HUGE opportunity for the Flash community. As browser support for richer content and motion graphics improves, so will demand for designers and developers who have experience working with motion graphics on the web. The Flash community has been doing this type of work on the web for over a decade and is uniquely qualified to fill demand for similar work in the browser. I don’t think it is a coincidence that some of the most cutting edge motion graphics work being done in HTML5 today is being done by developers and agencies with extensive experience in Flash (such as Grant Skinner, Branden Hall, Big Spaceship, etc…).”

Joel Hooks adds some great notes on this in his blog post. I’d like to also add HAXE, Java, C# and Dart to the list of languages that you should be able to pick up with little effort.

The Community

In LA, our local Flex group shut down abruptly after this news was released. I personally feel this was very hasty indeed and wrote a letter about it upon which this blog post was based. I see that a lot of people are really pissed and their identities are in question. If you’re in this position, I would suggest instead of jumping ship, why not continue to talk about how this will impact our jobs and what skills we can port to other platforms. If there really are people out there who are going to lose their jobs over this, and I think it’s too soon to say, we should still be able to support each other as a community.

Even with all this positivity, I still have to agree with @neurofuzzy “Anyone who has ‘Flash’ in your job title, scratch it out and write ‘Interactive.’” It’s something we should have all done a long time ago because I believe we are more than just Flash dudes.

I’d love to hear your thoughts on all of this. Please leave comments. It will be very interesting to look back on this post in 6 months and see whether I was right to keep a cool head or being terribly naïve.

But resource bundles can’t help you in every scenario. I often find myself needing to construct a sentence with live data inserted. For this, the resource strings are less helpful. For example, how would you write:

"At " + time + ", you received a message from " + userName + "."

With resource strings, you would have to do something like

at=At
message=, you received a message from
period=.

Which completely negates the whole point of using resource bundles. What to do?

Token replacement

What I really wanted was a way to inject data into the string. I’ve seen this done by use of tokens in other languages like Objective-C so I thought I’d give it a try. The result was surprisingly lightweight.

I created this utility that lets you use tokens (delimited by % signs) that can be replaced by live data when you retrieve the resource. Using this class, the example above would look more like this:

receivedMessage=At %time%, you received a message from %userName%.

// then in your code
trace(ResourceStringUtil.getResoureceStringWithTokens("receivedMessage", {time: "11:49", userName: "Mims"}));

// displays
At 11:49, you received a message from Mims.

Here’s the source code Feel free to use it and modify it for your purposes.

Now that you’ve been through 3 exhaustive tutorials on ant for flex, it’s time to use your knowledge you’ve gained to turn your back on the built-in Flex compiler and switch to ant for your builds. This part applies to FlexBuilder (and FlashBuilder) users only although it may apply if you’re using some other eclipse-based plugin. If you’re using another program like TextMate or Flash CSx, you can skip this article.

Replacing the default builder with your ant tasks

The rest of this article will show you how to use your ant build script to perform the building actions found in FlashBuilder.

In FlashBuilder, the following building actions can be executed

• Build Project – Occurs when the user manually builds the project.
• Build Automatically – When the option is checked in the Project menu, the code is automatically build when you save a file. Usually incrementally.
• Clean – ‘cleans’ the project folder by doing a complete, non-incremental build and removing temporary files.

These actions are all called by various actions and handled by one or more builders. In terms of the eclipse SDK, a builder is an XML file that describes how the various build actions will be executed. In FlashBuilder, all of these are set up to use the Flex “builder” by default. You can add new customized builders to supplement these build actions. You can also deactivate the default builder an just use your ant builds instead but you will lose the ability to see inline errors in your code.

In order for this to work however, you need to start out with some solid, well-tested ant tasks.

Step 1 – Create the appropriate ant targets

Create a target in your build.xml for each of the actions listed above. Call each target “build”, “autoBuild”, and “clean”. You can probably start with the “build” target and reuse it for the other two. To write an incremental build target (used for the build-automatically action) there is an example in Part 2 of this article.

Before moving on, please test your build script thoroughly to be sure there are no errors and that your files are compiling correctly.

Note, I’m not going to go into the details here about exactly how to write your ant script. If you’re considering switching to ant as your primary builder then A) your project has special needs that need to be addressed by a custom build script and I don’t know what those needs are and B) you need to know what you’re doing with ant before completely abandoning FlashBuilder’s defaults. I will say, save the fancy stuff for your release build targets and do incremental builds by default since you’ll be running these scripts quite a lot.

Step 2 – Create a builder for your ant build script

1. Open the properties for the project you want to edit. Project -> Properties
2. Select the Builders item in the left menu. You will see that the default builder “Flex” is already set up.
3. Click the New… button. A dialog will come up with templates for the new builder.
4. Choose the “Program” type. (On my configuration, I see an option for “Ant Builder” also which is what I should probably be using, however, I haven’t gotten it to work yet and it doesn’t seem to generate any specific errors when it fails so I gave up and went with Program. If you know how to fix this, let me know!)
5. Name the builder “flexAntBuilder”
6. Set the location field to the ant binary you’re using. If you’re not sure where the binary is located, you can use the command which ant in the command line. Mine is at /usr/bin/ant
7. Set the Working directory to your project’s home directory. If you’re not sure, browse to it.
8. In the arguments field, enter the name of the target you want to run. In this case build.
9. Optional: Click on the Refresh tab. Here you can chose whether to refresh the files in your workspace when the build completes.
10. Click on the Build Options tab. Here, under the “Run the Builder:” heading near the bottom, is where you’re going to set the properties that determine when this particular task is run. For the ‘build’ target, uncheck everything except “During Manual Builds”.
    • For your “autoBuild” target, you’re going to uncheck everything except “During auto builds”
    • For your “clean” target, you’re going to uncheck everything except “After a clean”
11. Repeat steps 1-10 for the other two targets.
12. When all targets are added, optionally uncheck the “flex” builder from the builders menu in your project properties to use the ant tasks exclusively. Now your ant scripts will be used instead of the flex builder.

That’s it! Be sure to test things and make sure you’re not getting any errors.

What to expect from here

So you’ve unchained yourself from the system and are using your ant scripts to build your project. Congratulations, you’re a huge nerd! From this point on, changing the compile settings in the Project Properties dialog (like the build path) may be ineffective. You’ll need to make changes to your build path in the ant file.

The results from your builds will appear in the Console view. Here you can see the progress of builds and check for errors in the code. As I mentioned before, if you deactivate the flex builder you won’t get inline errors in your code any longer.

Finally, adding the new builders will create a new invisible folder in your project’s root folder called .externalToolBuilders where your builder definitions will be kept. You don’t need to do anything with this folder, but be aware that it’s there.

That concludes this 4 part epic post about ant tasks for flex! I hope you found it useful. If you have anything to add, please post comments!

This third installment talks about tips and tricks for using ant with version control systems.

Defining external properties for each user

Since not everyone’s machine is the same and letting everyone build a project is a major reason to use ant, it’s good to avoid hard coding paths to files within your build.xml file. As such, I use a lot of <property> tags to set up paths and such. But you also don’t want to have several people constantly editing your build.xml because it could get broken or out of sync. Oh no! What do we do!?

Luckily, ant lets you define a set of properties in an external file. This is a simple text file containing name=value pairs and commented using #. By default, the recommended filename is build.properties. Here’s an example:

build.properties and version control

If you’re working with multiple people, you are probably using a version control system like svn. If you are and you want to avoid people accidentally checking in a build.properties file there are a couple of simple tricks. First, create a copy of build.properties and call it built.properties.template and check that into the repository. Then each user can make a local copy called build.properties. You can also add build.properties to the ignore list for your folder using SVN so that noone will accidentally check it in. Run svn pe svn:ignore and add build.properties to the list. Finally, if you need to make sure that your users have a local copy of build.properties, there’s a task for that!â„¢

Adding SVN tasks

As I work with SVN quite a lot, I found that including SVN in my builds can be quite useful. For example you could:

• Update your working copy when doing a clean build.
• Check in a release build automatically.
• Export your source code without those pesky .svn files to be included in a zip file.
• Include the revision number of the working copy as a constant definition in the code using conditional compiliation.

To do this, you’ll need to first download the SVN tasks for ant. They can be found on the Tigris.org website. Please note, that these tasks are a part of SubClipse, which is a free interface for working with Subversion from within Eclipse. I don’t know if the tasks will work without subclispe, but if you haven’t used it, I’d definitely recommend trying it out anyway. By the way, if you use CVS, there are already tasks included in ant. Once they’re downloaded, add the task .jars to the libs/ant folder in your project. You’ll need to use another <typedef> tag in your build script to get these to work. Here’s an example snippet that simply runs an update on the working copy. You can see all the available commands in the svnant documentation.

That’s it for part 3. In Part 4, I’ll talk about setting up a builder for your ant file in FlashBuilder.

In this part, I get more nitty-gritty about working with flex’s ant tasks.

Using the flex ant tasks

I spent quite a lot of time making tweaks to get my scripts to use the Flex tasks and hopefully, now you won’t have to. In the end, there’s very little benefit to using the official Flex ant tasks over using a generic <exec> task (a type of ant task that simply runs an executable file with nested <arg> tags for command line arguments) and if you’re having trouble with them, I’d recommend abandoning the flex tasks and using $lt;exec>. The main thing I had trouble with was getting the <taskdef> tag to work correctly.

For those new to ant, a <taskdef> tag is a required tag that defines a third-party ant task within the build.xml file. It associates a task name with a .jar file (compiled from the java code for the task). In the case of flex tasks, the java file is typically located within your flexbuilder sdk directory. On my mac, that’s here:

/Applications/Adobe\ Flash\ Builder\ Plug-in\ Beta\ 2/sdks/${SDK_VERSION}/ant/lib

Where ${SDK_VERSION} is your target sdk version (e.g. 4.0.0). There are a few ways to load additional tasks into your build.xml file. All of them require you to reference the .jar’s location somehow and then define a new task using <taskdef>.

1. Copy the .jar file for the task into ant’s lib directory. I don’t personally like this option because it makes it very difficult to switch between different versions of the sdk. Also, it requires all users of the script to copy the files on their local machines. (You can also add it to ~/.ant/lib to control the libraries on a user level)
2. Reference the .jar file’s location using a command line argument -lib. Even worse than the first option since it requires each user to add the library manually every time the build script is run.
3. Include the .jar’s location inside the build script. It took me a long time to figure this one out since I didn’t see it in the manual for ant, but it’s certainly my preferred method for adding tasks. It allows you to keep everything self contained within the build.xml so changing the location of the .jar is as simple as setting a property in the build script.

When using the 3rd option, you then have the question of where is the best place to put the .jar files you want to link to. There are two options that make sense to me.

1. The best place to put non-core tasks required by your build (for a Flex project) is in ${project_home}/libs/ant. This allows you to check your tasks into a repository along with your other referenced files (like .swc files).
2. Optionally, for the flex tasks you could reference the .jar file directly in the sdk folder. Use this option if the version number of the SDK doesn’t matter. If it does matter, use the first option. I use this option in my snippet below.

Linking to the official Flex ant tasks

Here’s a sample of my flex task definition along with some path definitions that point to various parts of Flex. I said this was a no B.S. guide so if you paste this snippet into your build script, you should be able to use the Flex tasks.

Using the tasks

Now we have the <typedef> in place and we can actually create a task to compile something. Again, I’m not going to go into all the details of what targets are all about or go into all the details about the flex compilers. There are plenty of other tutorials about that. Instead, I’ll show you a basic target to build an mxml file that is adequate for 95% of projects. Note: you may need to edit the properties defined in these scripts so that they point to the right paths for your project.

The toughest part about using these tasks is the seemingly arbitrary words that they expect for the attribute names of some tags (like using path-element in the <source-path> tag but dir in the <library-path> tag). Now the same but this time building a library SWC.

Making an incremental build

By default, FlexBuilder uses incremental builds when compiling your source code (except for clean builds). This is a very useful feature of the compiler because it saves time by only compiling the parts of your code that have changed since the last build. You can create an incremental build simply using ant by defining a second task that adds a flag for incremental building like so. Note that allows you to run other targets from within a target.

What about ASDocs?

Even though there are tasks for asc, compc, mxmlc, and generating HTML wrappers, they didn’t bother to include an asdoc task (actually, they did in Flex SDK 4.0.0). But that’s okay! As I hinted at earlier, you can still use the task to run this (as you can for all the other commands) and not only that, it’s way easier to set up than the official flex tasks! In fact, the only reason that I can think of to use the flex tasks is that they would automatically use the windows or mac version of the executable depending on your platform. Here’s an example for asdoc.

That concludes part 2. In Part 3, I’ll talk about working with version control systems in ant.

After spending hours wrangling with my ant build script and finally making everything work correctly, I am convinced of two things:

1. ant is a very powerful tool for compiling code but it can also do so much more.
2. The support for ant for flex online is abysmally frustrating.

So, I’d love to share with you some of the tips I’ve picked up after tweaking my script to the point where it finally worked!

Introducing ant

First of all, let me introduce the basics of what ant is. I couldn’t really say it better than the thousands of nameless editors of WikiPedia.

Apache Ant is a software tool for automating software build processes. It is similar to Make but is implemented using the Java language, requires the Java platform, and is best suited to building Java projects.

The most immediately noticeable difference between Ant and Make is that Ant uses XML to describe the build process and its dependencies, whereas Make has its Makefile format. By default the XML file is named build.xml.

Ant is an Apache project. It is open source software, and is released under the Apache Software License.

So in short, ant lets you use an XML based script to run a series of commands typically used to build software projects. It was originally designed to be “for Java, in Java” but it’s popularity and ease of use has created interest beyond the Java community. For flex, ant can be used for compiling ActionScript and Flex projects into SWFs, creating SWC files, generating documentation with ASDocs, and other actions associated with compiling.

There are a lot of great tutorials online that can cover the basics of how ant works so I’m not going to go into a general overview in this article. Instead, I’m going to try to focus on some of the practical aspects of getting a build set up when working with Flex. However, here are some links to the official ant documentation some helpful tutorials for the basics:

Ant Basics tutorial

Another basics tutorial (this time for Flex)

Official Flex documentations

Ant Folklore

After the jump, I’ll get into some of the ways that ant can be useful for Flash and Flex projects.

Applications for Flex users

Is ant right for you? It depends. For most cases, using the standard Run and Debug functions in FlashBuilder or Flash will be completely sufficient. However, if you work on a large development team or on a project with a complicated build process, it might save the group a lot of headache. Here’s a list of situations where I think Flex ant tasks can be helpful.

• Whenever your project requires you to make adjustments to the standard build process. For example, when you need to add additional flags to your compiler string.
• For Flex projects that are distributed widely, e.g. open source projects, where the configuration of the users’ dev environment is unknown. Build scripts allow users of various versions of FlexBuilder, FDT, or Flex SDK users on different operating systems to all be able to compile a project with more or less the same settings.
• If running or building your project requires you to configure options in the command line or to run a local server.
• For building release versions of an app and for deploying your app. For example, compiling, zipping and copying an app to a server using FTP.
• When you’re a total nerd and you want to use ant just so you can say you did it.

Beyond Compiling

One of the main benefits of using ant is that I think many people are unaware of is that it can be used for many things beyond running compilers. For example, in KitchenSync, I use a build script to create a temp folder, compile a SWC file into the temp folder, create an SVN export of the source folder into the temp folder, zip the source and SWC and name it with the current version number, then delete the temp folder.

There are loads of core tasks that are already defined within the ant library. They handle all types of common actions in the command line. There are even additional optional tasks that add higher-level functionality like copying files to a server using SSH or validating an XML file. Finally, additional tasks can be added simply by creating a new Java class that is a subclass of org.apache.tools.ant.Task. You probably won’t do this yourself, but there are a number of third-party programs that have created ‘plug-in’ tasks for ant such as SVN.

Once Flex projects became larger and more complex, many users began to look for more customizable options and began using ant. A couple of years back, Adobe released some official ant tasks which can now be found bundled in every version of the Flex SDK. However, as I said before the documentation of exactly how to get these tasks running is vague at best.

In part 2, I’ll talk about the details of getting flex ant tasks running.

• Part 1
• Part 2
• Part 3
• Part 4

XML-Schema (.XSD extension) are documents used to describe the format of XML files. They are similar to DTD (Document type declaration) files but much more powerful.

While working on some XML documents for a Flash site, I stumbled across the XML-Schema editor for Eclipse. The editor shows the XSD as a graphical representation of the model that you’re editing that looks similar to a UML class diagram.

Here’s a great article on how it works.

Benefits of using XSD

As I said, XSD allows you to define the format of your XML document but with much more detail that DTD.

• XSD allows you to type your data (integers, strings, booleans) so that you can better predict what format the xml will be
• It allows the creation of custom types which gives it an object oriented aspect
• You can use all kinds of restrictions for what kind of content can appear within a tag including the number of elements, whether values are required or not, you can even use regular expressions to limit the acceptable values. This is very nice when you’re working with a 3rd party who is generating the XML data.
• Using an XSD file can allow you to automate the validation of an XML file’s format

Once you’ve created your XSD file, you can use the new XML document wizard to create an XML file that links to your schema file. The wizard will automatically populate the XML document with valid data! Furthermore, as you edit the XML file you will get warnings and errors if you go outside the formatting requirements defined in the XSD. For example, if you define a tag <description> as having a maximum length of 128, you will see a visual error if your tag contains more than 128 characters. It’s a great way to forsee problems as you write them.

I hope in the future to write some kind of tool to parse XML based on an XSD file in flash. Apparently, Adobe had created an undocumented Flex feature to validate XML against XSD. Via Misprintt

Installing the XML extensions

Unfortunately, the editor is not installed by default and nstalling software in Eclipse is not very intuitive. I’ve done my best to describe the process here but if you need further help, check this entry.

1. Open Eclipse or FlexBuilder
2. Go to Help>Software Updates… ( > Find and Install for Eclipse 3.3)
   
3. Make sure you have the Europa or Ganymede update sites in the list of update sites:

   Eclipse 3.4 users:
   http://download.eclipse.org/releases/ganymede/
   
   http://download.eclipse.org/releases/europa/site.xml

4. Select the XML and XSD extensions in this screenshot. In Eclipse 3.4 you can search for them, in 3.3 you will have to look through the packages for them manually.
5. Restart Eclipse after the install is complete

Last night, I participated in the Iron Flash competition at the LA Flash Users Group in Venice Beach. As in Iron Chef (my favourite television show), the participants are all skilled Flash users pitted against one another with the goal of creating something interesting within a strict time limit and featuring a common “ingredient”. In this case, the ingredient was a set of pictures of ‘pucks’, specifically, R. Blank’s dog Puck, Puck the faun, Puck from the Real World, and a hockey Puck. We had 3 hours to make something out of any or all of the pictures. My fellow competitors were Jon Ruppel of Hooky Interactive and Ben McMaster (also at Hooky) who both made some awesome stuff in such a short time. UPDATE: All of the entries have been posted on the LAFlash site.

It was a great experience, and not just because OMG I WON!!!

My entry was a video game featuring Puck the dog. I was considering other physics based games involving the hockey puck and the dog somehow. Then I thought of using the dog instead of the hockey puck and somehow that reminded me of the sport beloved in Canada, Curling! The scoring system is a little wonky but if I may say so, it’s not bad for 3 hours work. Here are screenshots (click to link to the game) along with the source code:

Download the source code

Runtime Environment

SWF Files
Swf files are compressed, multipurpose packages designed to contain the following data: raster and vector graphics, video, audio, text, fonts, animation, and actionscript code. Swfs can be loaded at runtime whenever necessary and can use both static and dynamic linking based upon the compiler settings. The runtime environment uses security sandboxes for loaded swf files. The security settings primarily limit the extent of filesystem access and cross-domain access that swf files can use. Adobe has provided the swf file format spec and has recently provided the FLV video format spec and has declared that they will provide the RTMP spec as well.

Flash Player & AVM2
The Flash Player runtime is a very light-weight, virtual machine and handles system calls. The Flash Player includes both AVM1 (AS1, AS2, for Flash versions 1-8) and AVM2 (AS3 for Flash 9,10+) which processes compiled Adobe Bytecode (ABC). The term AVM stands for “ActionScript Virtual Machine”*. The Flash Player uses a Deferred Reference Counting (DRC) mechanism combined with a conservative mark/sweep garbage collector. The Adobe VM uses both JIT compiling and code interpretation and may benefit from compile-time bytecode optimizations based upon compiler input parameters. AS3 computational performance is generally closer to Java than Javascript [source]. The player also maintains a variable framerate that reflects the time consumed for each frame update [source]. Each frame update consists of multiple stages that include internal player processing, rendering, and author script processing. The program framerate is the principle metric reflecting application performance.

Development Environment

Actionscript API
The Actionscript API is divided up amongst the Adobe AIR environment, the Flex environment, and the Flash environment and the Flash Player. The source for all the packages are divided up amongst swc files. Swc files are pre-compiled catalogs of classes and assets. They are similar to swf files but they are used for compile-time dependency resolution. Furthermore, the native swc’s predominantly contain code and not visual assets. An overview of the Actionscript packages is kept up to date in the Adobe Live Docs.

The Flash IDE
The Flash IDE was designed for designers, artists and animators. So, it is equiped with a layer system which reflects the stage display list and a hierarchical timeline which reflects the temporal nature of the runtime. The objects placed on the stage are represented by the timeline and can be “tweened” (using runtime interpolated 2D geometric transformations or custom shape morphs). The same timeline is also used for object creation and destruction. All stage instances are confined to a small set of native data types including: MovieClips, Sprites, Shapes, TextFields, Videos, and Bitmaps. The IDE also has a library that contains source objects for all stage instances and even instances that aren’t used on the stage. Flash projects often have several build targets (compiled swf files) that use parts of the project codebase. After Macromedia was purchased by Adobe, the Flash authoring environment has been updated to provide much better interoperability with the Adobe Creative Suite.

Adobe Flex Builder
Flex Builder is an Eclipse-based Actionscript IDE for writing and compiling swf files. Flex Builder is primarily designed to build “Flex” projects which can be written in an interface tagging language known as MXML. MXML is a declarative XML langauge used to define interface elements in a project. MXML files provide the “view” in the MVC software design pattern. Flex Builder also provides plenty of useful features like code completion, syntax formatting, active debugging, memory profiling, and project building that expose errors and warnings during development time. Because the Flex framework is not bundled with the Flash Player, Flex projects must statically link to all swc assets specific to Flex which amounts to greater than 500kb. This is very unnatractive for most users, thus Adobe has provided means by which the download can be significantly decreased. Flex Builder is also used to deploy applications for the Adobe AIR platform. Adobe AIR is a desktop runtime that combines webkit with the AVM2 portion of the Flash Player. AIR can be likened to a closed source Java SE runtime but provides a smaller learning curve and greater accessibility than what comes with the Java ecosystem.

Compiler
Since Adobe has launched the Flex platform they have provided free access to their Flex and Actionscript compiler and SDK. They have also provided open source projects under the Mozilla public license. The compiler (mxmlc) provides an impressive amount of flexibility and customization for swf compiling. It can be configured with command line options or a configuration XML file.

* correction 09-12-2009, I had previously stated that the term AVM meant “Adobe Virtual Machine”, this is a mixup. It actually means “ActionScript Virtual Machine”. Thanks dbam.

My current configuration is Mac OS X 5.2 + TextMate 1.5.7 + Flex SDK 4.0.0.3504. I have two shell scripts in place:

1. /usr/bin/mxmlc
2. A TextMate run bundle set to a hotkey, “command + R”
3. I’ve also have my Flex SDK set to the absolute path of: /Developer/SDKs/Flex/4.0.0.3504

This configuration requires a flex-config.xml in the same directory as the AS3 class file that you’re compiling. When you run the TextMate script (or something similar in your Terminal shell) it will compile the filename you pass in and default to using a config.xml which acts as a local flex-config.xml file. All of these can be customized as needed.

Example Flash 10 3D cube rotation:
[kml_flashembed movie="http://www.calebjohnston.com/storage/fl10_examples/01_cube_rotation/CubeRotationExample.swf" height="260" width="410" bgcolor="#FFFFFF" /]

Obviously, the above swf won’t work without Flash player 10 installed.

Download the source here.

I may be in the (rare?) position of being highly interested in two disparate technologies. The first being an online scripting language standard governed by ECMA (used in Javascript & Actionscript). The second, an open standard for real-time rendering governed by the Khronos Group (OpenGL). In recent days these two languages have faced most unfortunate developments. First the ECMA script 4…

On Nov 7, 2006 Adobe announced the contribution of their ECMA scripting engine to the open source community under the name “Tamarin”. Tamarin is also being used as the JS scripting engine for Mozilla Firefox under the name “SpiderMonkey“. It seemed like a good idea at the time of release. But now look at the situation: we have AVM2, directly connected to Firefox AND the ECMA committee –slowing the progress of Actionscript and the Flash Player (and the internet for that matter). Needless to say, this is a disappointment. But it doesn’t end there…

Though having plenty of contributors, the realm of real-time rendering is primarily controlled by Microsoft, Nvida, ATI/AMD, Apple, and (more recently) Intel. Microsoft hasn’t really contributed to the Khronos Group because long ago they decided to pursue their own 3D graphics rendering API known as Direct3D. The evolution of OpenGL has become painfully slow while DirectX and Direct3D are becoming the (de-facto) standard. Finally, the Khronos group promised to improve the long lost API by introducing an object-oriented structure in stark contrast to its current state machine model. That was in October 2007. Last week the specification was finally unveiled and it remains largely the same. Not only is this a big let down, but it will definitely damage all future 3D software and game development releases for non-Windows platforms (including future consoles). Very unfortunate.

DISCLAIMER: Both of these developments are FAR more complex than what this post outlines -and there’s justification behind both developments. But on the whole, they both seem bad for everybody (or just me?).

Actionscript 3.0 and Performance Tuning

AVM2 Overview

There are definitely some big take-aways in these two documents. I would list them here, but then you might not read them for yourself! ;)

The first document is 74 powerpoint slides (prepared by Gary Grossman of Adobe) which is very useful for getting a quick understanding of AVM2 topics such as garbage collection, the benefits of strong typing, the Actionscript byte code (abc) format, the code interpreter and JIT compilation. For an AS3 developer this is a must-read.

The second document is a bit more dense. It contains 108 pages of more formally described underpinnings of the virtual machine. It focuses a lot on how your AS3 code will ultimately be run as processor instructions. Its a great follow-up to the first document. If you’re a geek, I would highly recommend reading this overview.

Take this FLA animation.

As you can see, there is a simple animation using a guide layer and labels on the key frames.

The following SWF uses KitchenSync to control the same ball animation. As you can see, the duration and easing functions of the animation can be controlled. You can even animate backwards!

See it in action.

The source that controls this is here.

package {
	import flash.display.MovieClip;

	import org.as3lib.kitchensync.KitchenSync;
	import org.as3lib.kitchensync.action.*;
	import org.as3lib.kitchensync.action.tweentarget.*;
	import org.as3lib.kitchensync.easing.Bounce;
	import org.as3lib.kitchensync.easing.Cubic;
	import org.as3lib.kitchensync.easing.Linear;
	import org.as3lib.kitchensync.easing.Oscillate;

	/**
	*	Demos the TimelineController which controls the animation of a MovieClip's timeline.
	*/
	public class FlashIntegrationTest extends MovieClip
	{
		protected var test1:MovieClip;

		public function FlashIntegrationTest()
		{
			super();
			// initialize kitchensync.
			KitchenSync.initialize(this, "1.5");

			// add a movieclip from the library
			test1 = MovieClip(new AnimationTest1());
			addChild(test1);

			// define the start and end frame with strings or ints or FrameLabel's
			var startLabel:* = "start";
			var endLabel:* = "end";

			// set up the TimelineController tween target.
			var tweenTarget:TimelineController = new TimelineController(test1, startLabel, endLabel);
			// Animate the ball with a linear ease.
			var tween:KSTween = KSTween.newWithTweenTarget(tweenTarget, "1s", 0, Linear.ease);

			// animate the ball backwards with a bounce tween
			var tween2:KSTween = tween.cloneReversed();
			tween2.duration = "4s";
			tween2.easingFunction = Bounce.easeOut;
			tween2.addTrigger(tween);

			// animate the ball with an oscillator
			var tween3:KSTween = KSTween.newWithTweenTarget(tweenTarget, "10m", "1s", Oscillate.sine);
			tween3.easingMod1 = 0.3;
			tween3.addTrigger(tween2);

			// start the animations
			tween.start();
		}

	}
}

Pretty cool huh? We’re creating a new TimelineController and setting the boundaries of the animation then passing it to a new KSTween object. Each of the three tweens use different parameters and are triggered by the end of the one before it.

You can download the entire thing and play around with it.

Why Bundles Will Give You a New Brain

Eight years ago, I weighed 500lbs. I was getting really high every day. And I was washing my dishes in the bathtub. But thanks to resource bundles, I own a mansion, I’ve got a summer home in Maine, I got an awesome boat, I got a jet pack, and I got a sweet lookin’ wife.

What’s a resource bundle? It’s a set of values that you externalize from your source code in a properties file. And it can be swapped out at compile time or, with Flex 3, at runtime. Think of it like a style sheet for values. Most of the time, these values are text. But without too much hassle, you can use resource bundles to parameterize all types of data.

Resource bundles are probably most useful, and most commonly used for, localization. Localization (pardon the didacticism) is the process of making software comprehensible for multiple regions with different languages or ways of writing. Sometimes you’ll see this term written L10n. For example, in porting your “Hello, world” application for a Japanese audience, you’d probably make it say something like “今日は、世界” instead. Resource bundles are perfect for supporting multiple locales.

This obvious use case, I’m afraid, might have prevented many of you from looking into resource bundles. If resource bundles are for localization, and you’re building a site that doesn’t need to be localized, you might well overlook their benefits, as I did for some time. However, here’s some of the benefits of using resource bundles — even if it’s just one single bundle.

Using resource bundles, you can give every application you write a copy deck. If you’ve worked with almost any client ever, I’m sure you’ve had to make a copy change. Who wants to go digging through source code to find that string? Put all your application’s copy in a resource bundle, and you can not only make these changes with ease, you can deliver source code that anyone can modify easily. (Copy decks are a necessity when using translation services as well.)

You can use resource bundles to store configuration values such as paths, numbers, Boolean flags, debug mode, overrides, etc. You can use a resource bundle instead of a configuration file or static constants.

You can even use resource bundles to reskin applications. Flex lets you parameterize embedded images in resource bundles. Alternately, if you load images at runtime, you can parameterize those URLs in a resource bundle. So, if your code references resources instead of direct embeds, you can change the look of your app by swapping out the bundle with all the image embeds!

Even if you don’t use resource bundles for any sort of behavior, language, or appearance toggling in your application, bundles are a fantastic way to separate code and content and organize related sets of content.

In brief, resource bundles will make your life easier, your program modular, and your project structure tidy!

What a World With Resource Bundles Looks Like

Pretty soon I’ll show you the specifics of how to set up your project to use resource bundles. But before we get into technicalities, let me describe a few formats. There’s a few ways you can use resources, and there’s the property file format to cover as well.

Ok, again pardon the ultimately pedantic example, but let’s say you have a hello world app.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Label text="Hello, world!"/>
</mx:Application>

You clearly wrote this application for an English-speaking audience. And that bias exists in your code. It’s completely tied to your source file! Shame. If you wanted to write a Spanish version, you’d have to go right in and edit your source code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Label text="¡Hola, mundo!"/>
</mx:Application>

But, with resource bundles, this is what the one, true, final and never-changing source code could look like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Label text="@Resource(key='message', bundle='copydeck')"/>
</mx:Application>

That’s one way, and indeed my favored way, of accessing resources from a resource bundle. This is going to look for the key message inside the bundle called copydeck.properties, and place its value in the text attribute of this Label instance, thus setting the text. Right now it looks like a lot more to type, but trust me, once you have a site or app with hundreds of lines of text, you are really going to appreciate how this makes your code concise and puts the text all together where it should be!

Note that you can use this @Resource directive in MXML in more places than just text attributes. You could use it to set tooltips, style properties, sizes, all kinds of things!

So let’s take a quick look at this outrageously simple properties file. This file format is really really easy.

#locale/en_US/copydeck.properties
message=Hello, world!
message-size=30

#locale/es_MX/copydeck.properties
message=¡Hola, mundo!
message-size=40

Here we see two copies of the properties file, made for two locales (American English and Mexican Spanish — locales are not just specific to the language but the region as well, but that’s another story). There’s pretty much only three things to know about properties files.

• Key = value. Do I need to explain this? Don’t sweat the whitespace.
• Comments are whole lines that begin with #.
• Properties are one line long unless you end the line with a backtick (\), in which case you can continue on the next line.

In reality, there are alternate formats for the first two rules, but only use that if you really have to be different. There’s something to be said for the naming convention of the bundles. The directory structure I’ll explain a bit later, but know that en_US and es_MX are locale codes, combining a language code and a country code. The name of the file before its .properties extension is going to yield the bundle name itself.

Now, you can skip the whole step of specifying the bundle name by having one properties file per class file, and naming the properties file in parallel with the name of the class using it. If you do this, you can omit the bundle='whatever' attribute of the @Resource directive, but I advise against this. I advocate that you split up your resource bundles by purpose. For example, one recent project I worked on uses a bundle for copy and a bundle for skinning. Another recent project uses one bundle for copy and another for stylesheets.

So I hear you, you’re one of those hardcore doods who uses Flex but prefers to code in AS3. That’s cool, I’m down with that. Or maybe you just have something more interesting to do with those values coming out of resource bundles (configuration variables perhaps). There’s some nice ways of accessing values from resource bundles in code. Maybe looking at this will get you started:

package
{
	import mx.containers.Canvas;
	import mx.controls.Label;

	[ResourceBundle("copydeck")]
	public class View extends Canvas
	{
		public function View()
		{
			super();
			var label:Label = new Label();
			label.text = resourceManager.getString("copydeck", "message");
			label.setStyle("fontSize", resourceManager.getNumber("copydeck", "message-size"));
			addChild(label);
		}
	}
}

If you’re in a class that doesn’t have its own reference to the ResourceManager, like Canvas here does, you can equally well use ResourceManager.getInstance(). Further, there are lots of other cool typed accessor methods you can use. Keep in mind that any bundles you reference in AS3 only must be explicitly included by using [ResourceBundle] metadata tags.

For more information about intermediate techniques like embedding assets and loading/swapping resource bundles at runtime, check out the very good section on localization in the Livedocs.

The Petty Particulars of Putting it to Practice

Now, I’m not going to leave you hanging with just some code examples. There’s a few things you need to know about structuring your Flex projects to take advantage of resource bundles. It’s really not that complicated, though, so not to worry!

First, you should pick a place for your resource bundles to live. Even if I’m only ever making apps for my United States English locale, I still like to make a locale/en_US folder, and place all my properties files inside there. I recommend you do the same.

Now here’s one tricky point. This directory must be one of the source directories in your Flex project. The compiler has to be able to crawl to those properties files, and it stays away from any place you haven’t specified in your build path. Again, even if I only have one locale ever, I like to keep this parameterized. Assuming you used the directory structure above, step one is to add the following directory to your build path:

locale/{locale}

The play-by-play, if you need it: right-click your project, choose Properties. Choose ActionScript Build Path on the left column, choose the Source Path tab, click Add Folder… and enter locale/{locale}.

Finally, Flex Builder is going to get this locale variable from somewhere, and that’s from the arguments sent to mxmlc. Simply add the option

-locale=en_US

to your compiler arguments, or of course, substitute the locale in use. This value will replace the {locale} variable in the source path, and switch mxmlc to use the copies of the properties files in the correct location for the locale (or skin, or whatever…).

Again, the play-by-play. Right click your project, choose Properties. Choose ActionScript Compiler on the left column, and add the option just mentioned to any others that your project requires (if any).

Conclusion

That’s all it should take to get you started with resource bundles! I hope that I’ve convinced you that resource bundles are a fun, safe, and effective way to separate your code and your content, whether your application will be localized and skinned or not! Separate your copy from your code. The next person to touch your code will thank you. If you use MXML with external CSS files and external resource bundles, you might achieve some sort of ultimate code separation enlightenment.

Did I miss anything? Run into any problems? Leave me a comment!