devxlogo

Extending Flash MX 2004, Part 3: Using History and Flash Panels for Faster Development

Extending Flash MX 2004, Part 3: Using History and Flash Panels for Faster Development

eet the History Panel and read how it can help you learn the basics of JSFL. I will also show you how to make your own Panels based around Flash Movies that can be opened in the IDE.

The Flash MX 2004 IDE contains a History panel at Window ?> Other Panel ?> History.

The History panel tracks every interaction you make with the Flash MX 2004 IDE. Each interaction is listed as a separate action and stored in reverse chronological order. At any time you can select one or more actions you previously performed and replay them.

So for example, if I were to draw a rectangle, and then later delete that rectangle, I can draw it again in exactly the same place and at the same size by simply selecting the Rectangle action from the History panel and then clicking the Replay button. Or, alternately, you can replay it by right-clicking the action and selecting the Replay Steps option from the dropdown list that appears (see Figure 1).

When you Undo a change you have made in Flash MX 2004, using File ?> Undo (CTRL + Z), that particular action is then removed from the History panel. The opposite is true, when you then choose to Redo that action, because you didn’t mean to Undo it in the first place, File > Redo (CTRL + Y). The action is then added to the bottom of the actions list in the History panel.

The History panel makes it really easy for anybody just starting out with the JSAPI to build commands that automate particularly tedious or common tasks. The process of creating a Command file within the History panel is fairly straightforward. To start, clear the History panel (use the ‘Clear History’ item from the History menu).

Figure 1. Instant Replay: Right-click an item in the History Panel and select Replay Steps to repeat (redo) a change previously made.

Now perform a sequence of actions in the Flash MX 2004 IDE that you want to use regularly. Select the group of actions you performed in the History panel and then click the disk icon in the bottom right hand corner. Enter a name for your Command and then click the OK button.

You now have yourself a new Command in your Command menu, which, when selected, will execute and perform that particular sequence of actions. The .jsfl file has been created for you, and saved into the correct directory for the Command menu.

There are technical limitations with the History panel?some of the interactions you make with the Flash MX 2004 IDE cannot be replayed. You will recognize these as they have a red X in the corner next to the icon for that action.

The History panel can also display the JSFL actions required to perform a particular interaction within the Flash MX 2004 IDE. This comes in handy when trying to learn how to make Flash do something with the JSAPI. So, for example, if you wanted to know which function to use to add a new layer to the current timeline using JSFL, you can tell the History panel to expose the function calls, by changing the view settings (see Figure 3).


Figure 2. Customize Your History: Select a series of items in the History Panel, click the Disk icon and enter a name for your new Command.
 
Figure 3. Changing History: Change the view settings in your History panel to get more details on JSFL actions.

Then you can add a new layer to the timeline manually, which will add a new action to the list in the History panel. You can then copy that function call by right-clicking it in the History list and selecting Copy Steps.

You now have the JSFL code in your clipboard, which you can then paste directly into any text editor (see Figure 4).

Figure 4. Copy Steps: Copy function calls by right-clicking it in the History list and selecting Copy Steps.

Flash Panels
As I mentioned earlier, it is possible to add new panels to the Flash MX 2004 IDE. You can create your own panel by simply creating a Flash movie and then saving it into the correct directory:

Windows XP or Windows 2000:C:Documents and SettingsLocal SettingsApplication DataMacromediaFlash MX 2004ConfigurationWindowSWFWindows 98:C:WindowsApplication DataMacromediaFlash MX 2004ConfigurationWindowSWFMacintosh 0SX:Hard Drive/Users//Library/Application Support/Macromedia/Flash MX 2004//Configuration/WindowSWF/

Open the panel by selecting it from the Window ?> Other Panels menu. The name associated with the panel you have created and thus displayed in the Other Panels menu is simply the name of the .swf file you placed in the WindowSWF directory. When you select your panel from the menu, your Flash movie is automatically displayed inside a panel, and the size of the panel is automatically determined by the size of your Flash movie.

So for example, I have created a Flash Movie and named it Auto Save.swf. I then save that Flash Movie into the WindowSWF directory. The next time I re-start Flash MX 2004, a new option, Auto Save, has appeared in the Other Panels menu:

When I select the new Auto Save option. A new panel opens, which contains my Flash Movie.

Figure 5. Auto Save: A new panel containing a Flash Movie that can be opened from the Window > Other Panels menu.

ActionScript and JSFL
Flash movies that run in the Flash MX 2004 IDE can execute a string of JSFL using a special ActionScript function. Which means that your Flash panels and XML2UI dialog boxes that contain Flash movie controls can modify/update the Flash document from a Flash movie. The JSFL code you execute can also return a value back to ActionScript. The ActionScript function is called MMExecute, and it can be used anywhere in your Flash movie.

The syntax is simple:

MMExecute("yourStringOfJSFL");

For example, I can create a new panel, as above, and in the Flash movie for that panel, I can execute a string of JSFL that will delete a layer when a button is pressed.

Here is the ActionScript to do it:

MyButton.addEventListener("click",this)This.click=function(){  MMExecute("flash.getDocumentDOM().getTimeline().deleteLayer();")}

When the button is pressed, the MMExecute function passes the JSFL string as an argument to the Flash MX 2004 JSAPI Interpreter, which then runs the JSFL code in exactly the same way that a Command is run.

It is also possible to access the value of a JSFL property because the MMExecute function will return a value. So if I wanted to check that the computer running my Flash panel is currently connected to the Internet, I could use the following ActionScript:

HasInternetConnection=MMExecute("flash.isConnectedToInternet");

In the above code, the ActionScript variable ‘hasInternetConnection’ will contain a Boolean value that it received from the JSAPI Interpreter.

MMExecute will wait for a return value before it runs the next line of code in your ActionScript.

It is recommended that if you want to execute a large JSFL script from ActionScript, you should place the JSFL script in an .jsfl file and then use the ‘flash.runScript’ function to execute the JSFL script within that file.

Here is an ActionScript function that will execute the JSFL code within a .jsfl file:

function executeLargeJSFLScript(fileURI){		return MMExecute("fl.runScript('"+fileURI+"');")} 

And you can use it like this:

executeLargeJSFLScript("file:///C:/myscript.jsfl");

Notice, that the fileURI in the above example, doesn’t contain backslashes; it contains forward slashes and a file:/// protocol prefix.

The following would be incorrect:

executeLargeJSFLScript("C:myscript.jsfl");

This is a common mistake. All the functions that are exposed in the JSFL scripts?that accept a fileURI as an argument, such as ‘flash.saveDocumentAs’?require the string to contain a file:/// protocol prefix and to contain forward slashes instead of backslashes.

One really useful implementation of MMExecute would be getting a Flash movie that is running in the Flash MX 2004 IDE to work with regular expressions. As ActionScript doesn’t support regular expressions, it is possible to send them the JSAPI Interpreter using MMExecute and the return value(s) will be returned to ActionScript.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist