The ability to create extensions is one of my favorite features in Flash Pro. You can extend Flash to include new features and automation in the form of Commands, Panels, and Tools. This series of tutorials will show you how to create your own extensions for Flash. There is a special scripting language that allows you to control Flash, and it is known as JSFL.

JSFL (JS[JavaScript]FL[Flash])

JSFL is a variant of JavaScript specifically written to interact with the Flash authoring environment. Like Actionscript, JavaScript is based on the ECMAScript standard. So, if you have any familiarity with JavaScript, or ActionScript, you will find this knowledge useful in writing JSFL. It should be noted that JSFL and ActionScript are distinct languages with distinct purposes. The latter is compiled into a SWF, and that SWF can play in the ubiquitous Flash Player. Conversely, JSFL code is executed on the spot and is used to control Flash Professional itself. Thus, JSFL can accomplish nearly everything that a user can within Flash, such as create layers, create objects, select frames, manipulate Library items, open files, and save files. Additionally, JSFL allows you to script a few tasks that users cannot normally perform (at least not easily or quickly).

You create a new JSFL script by choosing File > New and selecting Flash JavaScript File in the New Document dialog box. The file extension for a JSFL script is always .jsfl. In this tutorial, you’ll start visually by copying user actions from the History Panel.

The History Panel

The History Panel functions as an advanced undo/redo. This panel also has the capacity to show the JSFL code necessary to duplicate each (enabled) user action.  Follow the steps below to create a JSFL command using the History Panel.

1. Open a new Flash file.
2. Open the History Panel: Window > Other Panels > History.
3. Select the Rectangle Tool and draw a rectangle on the stage.  Notice that this action is recorded in the History Panel.
   
4. Click on the fly-out menu on the top-right of the History panel. Here you can change the display format and tooltip display.
   
   Change the display to show JavaScript in Panel (if it’s not selected already).
   
5. Change to the Selection tool. Select the rectangle on stage and delete it.
6. Grab the slider on the left side of the History Panel and drag it up so that it’s parallel to the original rectangle command. Note that sliding the arrow undid the deletion of the rectangle. This slider functions like an undo and redo.
   
7. Drag the slider down to the deleteSelection command. Now select the original addNewRectangle command and hit the Replay button. This will create a rectangle with the same dimensions as the original rectangle.
   
8. With the addNewRectangle command still selected, hit Copy Steps button in the bottom right of the History Panel.
9. Drag the undo/redo slider to the very top of the History Panel to revert the document to its opened state.
10. Open a new file: File > New. When the New Document dialog appears, choose Flash JavaScript File and click OK.
11. Paste the stored command into the newly opened script, Edit > Paste.
12. Hit the Run Script button within the script editor and return to the Flash document.
    
    Note that a rectangle has been drawn on the stage in the same place and with the same dimensions as the one that was drawn with the rectangle tool. This script can now be modified to do something more useful, like get the document size and draw a rectangle to match the dimensions of the document, or looped to create several rectangles at once.

Saving a Command

To save your JSFL script for later use in Flash, you’ll want to save your script to the Configuration/Commands directory. This will allow you to execute your script using the Commands menu (and optionally, a keyboard shortcut). The first step is to locate the Configuration directory for your installation of Flash.

Locating your configuration directory

To locate your Configuration directory, you can check these common locations, or simply create and run a new JSFL script with the following code:

fl.trace(fl.configURI);

This script will print the location of your Configuration directory in the Output panel. Note that each installation of Flash has its own Configuration directory.

The next tutorial in this series shows you how to use JSFL to manipulate other parts of your Flash document. If you’re interested in learning more JSFL, you can also check out Chapter 4 of Animation with Scripting.

Also in This Series

• Creating Flash Extensions — Pt. 1: Introduction
• Creating Flash Extensions — Pt. 2: The DOM
• Creating Flash Extensions — Pt. 3: Manipulating the Library
• Creating Flash Extensions — Pt. 4: User Interaction
• Creating Flash Extensions — Pt. 5: SWF Panels
• Creating Flash Extensions — Pt. 6: Custom Tools
• Creating Flash Extensions — Pt. 7: Distributing to Others