Hack 74 External Script Editors

Flash MX Professional 2004 comes with an editor capable of editing external files, but the standard edition of Flash MX 2004 does not. Increase your productivity with an external editor whether writing ActionScript, JavaScript, XML, or CSS.

Flash has supported the ability to include external ActionScript (.as files) since Flash 5. In both Flash 5 and Flash MX, external ActionScript files could be included using the #include directive. In Flash MX 2004 and ActionScript 2.0, the #include directive is still supported but it is often unnecessary.

The following paraphrases some important points on external ActionScript files from the book Essential ActionScript 2.0, by Colin Moock, which covers the subject in great detail.

In ActionScript 2.0, a class definition (defined with the class keyword) must reside in an external plain-text file. The external file must have an .as extension matching the class name (case sensitivity matters!) and can contain only one class definition. For example, the Box class must be stored alone in a file named Box.as.

ActionScript 1.0 had no formal class statement; classes were defined using the function statement, as in:

function Box ( ) {

}

ActionScript 1.0 class definitions were allowed to be stored in a frame or even on a button or movie clip but were conventionally stored in external .as files and brought into the SWF using the #include directive. In ActionScript 2.0, the class code in external .as files is incorporated into the SWF the first time the class is used.

So, for example, the following ActionScript 2.0 code, which constructs a Box class instance using the new operator, causes the compiler to automatically incorporate the code from Box.as into the SWF:

var someVar:Box = new Box( );

So, in short, if you are using ActionScript 1.0, you should put your class definitions in external .as files, and in ActionScript 2.0, it is mandatory that you do so.

In order to find the external .as class files, the ActionScript 2.0 compiler looks in the classpath or in a package specified via the import statement. You can add a folder to the ActionScript 2.0 classpath under EditPreferencesActionScriptLanguageActionScript 2.0 Settings. (Under the Classpath section, click the plus sign (+) to add a new directory to the classpath.)

Classes that extend the MovieClip class can be associated with a movie clip symbol by setting the linkage properties under Linkage in the Library panel's pop-up Options menu. To export a movie clip subclass, select the Export for ActionScript checkbox in the Linkage Properties dialog box and specify the class name (without the .as extension) in the AS 2.0 Class field of the same dialog box.

If you are using Flash MX 2004, you'll need an external text editor to write .as files, and even if using Flash MX Professional 2004 (which includes an external file editor), you might want something more full-featured.

SciTE|Flash is a popular text editor for dedicated ActionScripters, and it is also useful for writing the text, XML, JavaScript, CSS, and other files that the professional Flash developer needs. You can use it to write server-side scripts in languages such as Perl or PHP, as well.

SciTE (http://www.scintilla.org/SciTE.html) is a general open source text editor beloved by many high-end coders (it supports Windows and Linux). SciTE|Flash (http://www.bomberstudios.com/sciteflash) is the (Windows-only) ActionScript editor based on SciTE and created by Ale Muñoz from bomberstudios, with a little help from Robin Debreuil. For Mac and Windows alternatives, see the Section 10.3.1 section at the end of this hack.

As of this writing, a Flash MX 2004 version of SciTE|Flash (i.e., one that supports ActionScript 2.0 classes) is planned but has not yet appeared. For those who would like to help the process along, visit http://www.bomberstudios.com/sciteflash/status.php. You can find a set of configuration files that supports ActionScript 2.0 code hinting and colorization for SciTE|Flash at mizubitchy (http://mizubitchy.antville.org/stories/519068).

The SciTE|Flash application has two main panes: editing on the left and output on the right, as shown in Figure 10-1. To jump between the SciTE|Flash panes, press Ctrl-F6.

Figure 10-1. The SciTE|Flash editor

SciTE|Flash's editing controls are fairly self-evident and make writing code in the editor fast and easy. Particularly useful are:

• The collapsible/folding program blocks; each code block is represented in the lefthand margin by a long brace with a + or - circle in the center of it, as shown in Figure 10-2. Clicking this circle allows you to expand/collapse the block, which is very useful for long, modular code, such as class-based .as files.

  Figure 10-2. Expanding and collapsing code blocks in SciTE|Flash

  
  
  

• The ability to format in a number of syntaxes other than ActionScript, including CSS, HTML, JavaScript, plain text, and XML. This allows you to create and edit all the code, data, and formatting files you need in a typical Flash project. All language options are available via the Syntax menu, as shown in Figure 10-3.

Figure 10-3. SciTE|Flash supports the syntax for multiple languages and file formats

• Support for code bookmarks, allowing you to switch between lines within your listing (Ctrl-F2 to toggle bookmarking on or off for the current page, F2 to go to the next bookmark, and Shift-F2 to go to the last bookmark).

• The Edit menu allows you to comment and uncomment multiple lines of code in a single operation. There is also a nifty match braces feature in the Edit menu, allowing you to quickly debug situations in which you have one curly brace too many or too few.

• An autocomplete feature (well, okay, the Flash Actions panel has this, but it is nice to find an external editor that also has it).

• If you close the application with files still open, SciTE|Flash reopens the same files when you next start the application (you wouldn't believe how useful this is until you have tried it for a week!).

• Ability to change case (uppercase, lowercase, mixed case, etc.).

When using SciTE|Flash to write ActionScript 1.0 code (or ActionScript 2.0 code if you use the updated configuration files from mizubitchy), save your ActionScript classes in external .as files.

To test your script, open a new FLA and attach a script on frame 1 that includes the external .as file, such as:

#include "test.as"

Using a relative path allows the Flash compiler to find the external .as file, provided it is in the same folder as the .fla file. You can also specify a fixed path such as:

#include "c:\Documents and Settings\Sham B\Desktop\test.as"

If you are writing timeline code, you may prefer to copy and paste it into the timeline, but using an #include statement ensures that the latest version is pulled from the external .as file each time you recompile the FLA.

Furthermore, using an #include statement allows you to test and debug your script from SciTE|Flash!

To jump to Flash and view the running SWF in the Test Movie window, select ToolsTest Movie from SciTE|Flash's menu bar.

To capture the output from Flash's Output panel in SciTE|Flash's Output pane, select ToolsCapture Output from SciTE|Flash's menu bar. Flash enters Test Movie mode but doesn't receive window focus or become maximized because the output is being sent to SciTE|Flash.

To both test the movie and capture output, select ToolsTest and Capture Output from SciTE|Flash's menu bar. The SciTE|Flash window stays in front, but the Flash authoring tool enters Test Movie mode and becomes maximized. This is my preferred mode of working when developing long scripts.

SciTE|Flash also supports a command-line interface. The right pane in SciTE|Flash acts as both the Output pane and command-line text-input area. Click on the right pane to enter command-line mode, or press Ctrl-F6 to toggle between code-editing (left pane) and command-line (right pane) modes. You can press Shift-F5 at any time to clear text that may be present in the Output pane.

To test the SWF and capture output, type the following on the command line:

flush.exe-w

Final Thoughts

Developers who need a fast and light external editor to write code-heavy applications should give SciTE|Flash a whirl. It's blindingly fast for those who find the Flash Actions panel claustrophobic for long scripts (the SciTE|Flash code folding really helps navigate mammoth scripts). It is also much lighter weight than Dreamweaver whose external editor is overkill if you just want to write a bit of XML.

Of course, SciTE|Flash isn't the only external editor in town. Other popular editors include SE|PY (http://www.sephiroth.it/python/sepy.php), a free, open source editor supporting both Mac and Windows, and PrimalScript (http://www.sapien.com/primalscript.htm) starting at $179 (a 30-day fully functional trial version is available). Both editors offer ActionScript 2.0 code completion and an ActionScript 2.0 class browser.