At Clock we typically spend our time developing JavaScript and PHP, however, occasionally Flash presents itself as the most suitable platform for certain components. To avoid the need of installing a separate authoring environment (and even the license fees associated with some of the official Adobe IDE‘s) I sought to empower my text editor Sublime Text 2 with the ability to compile SWF‘s.
Choosing to use a minimalist development environment is invariably going to bring about some limitations, of these I find the most noticeable to be the lack of debugging tools. While I will suggest some means to allow you to receive trace statements to debug your application, if you‘re developing large and complex applications you may want to consider some other free alternatives: Flash Develop.
Download Flash Compiler and .swf viewing software
If you don‘t have any kind of flash authoring environment installed, you‘re going to need to download some software:
- A version of the Flex SDK is needed to compile your application (Version: if you‘re not sure, the Adobe Flex SDK is likely to be appropriate)
- You‘ll probably want an SWF debug projector to enable you to run your SWF‘s on the desktop and provide stack trace output.
- Additionally one of the Plugin content debuggers will be useful for access stack traces in the browser.
You‘ll notice that the first two of these applications don‘t come with any kind of installer, it‘s up to you where you want them, (as a Windows 7 user) I extracted them both into C:\Program Files (x86)\Flex SDK\
Configuring MXMLC as a Build System in Sublime Text 2
Now you‘ve got your Flex SDK extracted you‘ll want to set it as what‘s known in Sublime Text as a build system.
In Sublime‘s menu, access: Tools > Build System > New Build System…
Replace the default build script with the following:
{
"cmd": [
"C:\\Program Files (x86)\\Flex SDK\\bin\\mxmlc.exe",
//"-o", "${project_base_name}.swf",
"${file}"
],
"selector": "source.actionscript"
}
Save this file in Sublime‘s ActionScript package directory, which for Windows 7 users will be located in C:\Users\[username in here]\AppData\Roaming\Sublime Text 2\Packages\ActionScript\, and restart Sublime. You should now be able to build your flash projects using F7 or Ctrl + b and using the aforementioned SWF projector you‘ll be able to launch your fresh SWF from your file system.
Sublime‘s Build System Notes
The selector option will make sublime choose our new build system automatically when you build directly from the source view of an ActionScript file. In the example above you‘ll see that my Windows file system requires me to escape the directory separator. You‘ll have to modify this path if you‘re on a different Operating System or you selected a different place for your Flex SDK to live. One thing which caught me out was providing additional command line parameters to Sublime, they must be provided as per the -o option above. Individual option flags and their attribute must be placed into separate elements in the cmd array for Sublime to execute them correctly. I‘ve left in the above example as a reference to this.
Hello World
As requested, here is a little Hello World to test your compiling powers:
package {
import flash.display.Sprite;
import flash.text.TextField;
// import flash.external.ExternalInterface;
public class HelloWorld extends Sprite {
public function HelloWorld () {
// ExternalInterface.call("console.log(‘ding‘)");
var mytextfield:TextField = new TextField();
mytextfield.text = "Hello World!";
addChild(mytextfield);
}
}
}
Debugging Your Flash Applications in a JavaScript Console
Now we‘ve cut the Flash IDE out of the equation, you‘ve actually lost your Flash console meaning your trace() statements aren‘t going to get shown anywhere, even the flash player debuggers can only output stack traces. The most suitable way I found to output debugging information was by embedding my .swf in a webpage and outputting data to the browsers console. By utilising Flash‘s ExternalInterface class you‘re able to invoke javascript functions, more specifically in Firefox the FireBug console, or Chrome‘s native javascript console.
After importing the class into your application you can simply call the console like so: ExternalInterface.call("console.log(‘ding‘)");
This does, however, rely on the fact that you‘re running your SWF in a browser and importantly that your console is loaded before you call it (Embedding usingSWFObject will help avoid errors relating to this).
If you‘re Debugging needs go very far beyond this, then its probably time to install a more integrated development environment with native debugging and profiling support.
Refrences and Recommended IDE‘s
- http://sublimetext.info/docs/en/reference/build_systems.html - Sublimes Build Properties
- http://www.arulraj.net/2010/08/flash-player-debugger-in-ubuntu.html - Installing the Plugin content debugger on Ubuntu
- http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page - Flash Develop IDE
- http://fdt.powerflasher.com/ - FDT, Eclipse based IDE