Flex and AS3 Development Using SublimeText2
Written by Simon Bailey
The radiant ray of sunshine known as @stevecarpenter asked me kindly to document the steps required to run a Flex or AS3 project using the impressive text editor Sublime Text 2 (ST2).
Why Sublime Text 2?
I have been and remain, a huge advocate of Intelli J IDEA and as far as IDE’s go I personally feel it’s the best hands down! However, over the past year or two the amount of Ruby, JS, HTML and CSS project code I wrote rose sharply and I found I used ST2 more and more. Eventually any remaining AS3/Flex projects sneaked their way into being edited within ST2 also.
I have been well aware of the advancement of other similar editors or browser based equivalents but I remain with ST2 for a couple of reasons. Firstly it does pretty much everything I need it to do and the range of packages fill in any holes that ST2 reveals. My second reason is that regardless of many other text editors emerging I want the one I use to be second nature in my daily development. It is so easy to get distracted by every new fangled text editor released but I find so much time get’s wasted on learning how to use each one efficiently. Text editors are no stranger to AS3 development and plenty of devs out there have been coding using Vim, TextMate, etc and also using tools such as Project Sprouts (more on Project Sprouts generators and using it with Afred App). I am not arguing for or against any editing software, each to their own, if you wanna know why I stuck with ST2…
Here are (some) of the perks
Using one editor for your development is going to be an obvious plus, as you learn the key bindings you will be busting out lines of code at a rapid pace till the cows come home. ST2 loads fast due to far fewer overheads in comparison to some of the heavy weight IDE’s. As well as loading fast it runs nippy as hell and I am yet to see the spinning beach ball! I find there are far fewer distractions within the editor itself and less UI distraction makes for a far more constructive environment in my opinion (bonus it looks sweet). There is an amazing community surrounding ST2 and pretty much any question you may have can either be answered there if it hasn’t already. Configuration is so easy it’s stupid, JSON config files…thats it! Search and find is so much easier and better than all IDE’s I have used in the past, ⌘ + P (cmd + P) and your off.
Here are (some) of the downsides
Depending on what you want it certainly does not have all the bells and whistles of the IDE’s. I have heard people mention git integration in IDE’s is now pretty impressive, however, if you really don’t like using git on command line or something like Tower, then the sublime-text-2-git package is freakin’ awesome. Some people may argue that there are less autocomplete options in a text editor compared with a meaty IDE, there are arguments against using autocompletion and I am happy using it to a degree personally but there is an autocomplete feature in ST2 plus shed loads of packages for the language of your choice. There are a few more over heads when it comes to building or compiling admittedly and depending on community support you may find there is some work to be put in to get your project up and running, which leads me nicely onto….
Setting up ST2 for AS3 development
Heads up:
- Most of the article small examples are OS X based but ST2 is cross platform so this is all easily transferable I am sure…
- These are simple sublime build files for quick examples as I use a build system, they run on the open main app file. Updates to the gist would be welcomed to improve this :)
- There is an example project at the bottom of this article
Download one of the AS3 packages, either the port of the rock solid TM bundle originally created by Simon Gregory, or an alternative AS3 package. The former package comes with a Rake file for compilation and offers various other tasks. The latter doesn’t have a buildfile, but it’s easy to write your own and compile the SWF using ⌘ + B (cmd + B). Simply navigate to your ST2 preferences > Browse Packages and then find the ActionScript 3 directory and add the contents of this gist to a new file named actionscript.sublime-build (change the SDK location to where the SDK is on your machine). Once you have compiled your SWF you can then run the SWF within the Flash Player using Shift + ⌘ + B (shift + cmd + B).
Setting up ST2 for Flex development
Feel free to download this Flex package. Once again there is a gist you can write to a new file named flex.sublime-build (change the SDK location to where the SDK is on your machine). This flex.sublime-build offers further mxmlc configuration using a config.xml file which is should be located in the root of your project. You can find the default flex-config.xml in your Flex SDK at the following location: sdk-4.5.0.20967/frameworks/flex-config.xml to use as a point of reference and further configurable options available.
For further information regarding mxmlc compilation and linking libraries please see my previous post linking libraries in flex using mxmlc.
Build systems
Both of the above gists can be improved and are not perfect, but if you want greater control over your project builds then I absolutely recommend a build system. The infinitely talented Dominic Graefen conducted a small survey on build systems and the results can be read here. Dominic is also the man behind Buildr-as3 which is the tool I am recommending for Flex builds. The reason why I am recommending Buildr-as3 over my other fave Project Sprouts is I struggled ages ago with getting Project Sprouts to compile headlessly on a CI server and I also found that configuration and setup for a Flex build was slightly less trouble. Also Dominic and I spent quite a lot of time together going through mxmlc compilation using Buildr-as3 and he added some great improvements over the months. If you do want to stick with the more verbose alternative ANT which I am aware is quite popular for Flex projects due to the integration in Flex Builder, then please be sure to check out my Ant-Funk git repos.
Buildr-AS3
To install Buildr-as3 simply read this post on Dominic’s blog, be sure to install the latest pre-release version of Buildr-as3 by running the following command:
gem install buildr-as3 -v "0.2.30.pre"
Next create a buildfile in your project root and copy the contents of this buildfile gist. The example buildfile I wrote should cover most of the options you will configure on projects and include:
- Customising src directory layout.
- Customising test directory layout.
- Adding SWC libs.
- Custom compilation location.
- Running tests using FlexUnit.
- Specifying Flex SDK version.
- Additional compiler arguments.
- Additional src path locations.
- Locale configuration.
- Conditional compiler definitions.
Feel free to ask about any other configuration options.
Now lets run Buildr-as3 from within ST2, navigate to your ST2 preferences > Browse Packages and create a new directory named Buildr-as3 and create a new file named buildr-as3.sublime-build and copy the contents of the following buildr-as3.sublime-build gist. This sublime-build is configured to run using rbenv, there are however, rvm instructions out there to help ammend my gist accordingly.
If you now hit ⌘ + B (cmd B) in a project configured and with an updated buildfile you should see your SWF get’s compiled. Be aware, due to Buildr-as3 using Maven (the only downside in my opinion) it will first download the relevant Flex SDK and libraries.
LiveReload
@stevecarpenter went on to ask me about launching the browser. This could be configured, ST2 also has an excellent sidebar package where you can preview in a browser. I like LiveReload and there is also a package for LiveReload. I have heard it’s not 100% perfect i.e. it doesn’t always reload the page or crashes ST2 but in the majority of my development I have found it works a charm. Expect the browser to refresh automatically when you recompile your SWF, job done!
Debugging
A few options are:
- Using FDB.
- Firebug in FireFox.
- A super simple app I wrote for local or remote logging (no breakpoints/stack traces) named Beaver (nuff said)!
Example project
I have created an example sublime flex project on github you can download and run in ST2.