Flash

In this article I will explain how Flash Panels fit into the grand scheme of extending Flash MX 2004. We'll also discuss some of the benefits and pitfalls you may encounter when using Flash Panels in your day to day work.

Through this tutorial, you'll create your very own Flash Panel to control the rotation of Movie Clips on the stage using standard Flash MX 2004 components, a hefty sprinkling of ActionScript and some tips and tricks along the way. I hope you'll come away from this tutorial feeling empowered to create your own Flash Panels, and to explore the capabilities and possibilities of Flash MX 2004 - and your own mind!

Before we set out on this extensibility trip, let me point out a couple of resources that will be invaluable in your pursuit of Flash Panel excellence:

• Flash MX 2004 JavaScript Dictionary: An invaluable bible that contains nearly all the Flash API information that you'll ever need. (www.macromedia.com/support/documentation/en/flash/#flashjsdict)
• JSFL File API: Not included in the Flash MX 2004 JavaScript Dictionary; functionality added in Flash MX 2004 7.2 udpater. (www.macromedia.com/devnet/mx/flash/articles/jsapi.html)

The creation of Flash Panels for use in Flash MX 2004 basically hinges around the understanding and use of the JSAPI (JavaScript API). It's based on a Document Object Model (DOM), which allows both Flash Documents and the internal functions of Flash MX 2004 to be accessed via simple JavaScript-based commands.

Since the release of Flash MX 2004, many JSFL (Flash JavaScript) commands, Flash Panels and custom tools have been created to help automate tasks and add custom interfaces to complex controls that directly influence feedback in the Flash authoring environment. Most of these are easily found via search (use 'JSFL commands' or 'Flash Panels' as your keywords).

If you're comfortable with ActionScript, pushing the boundaries to develop your own custom commands and panels is hardly a leap of faith - it's a small step forward. As the JSAPI is based around the Netscape JavaScript API and Flash's Document Object Model, developing and writing Flash JavaScript should be a natural progression.

By their very nature, Flash Panels are exported SWF files. However, they're subtly different from the standard JSFL files that are used to create commands, as they utilise a wrapper function called MMExecute(). This allows interaction between the compiled SWF and the Flash MX 2004 API.

Consider the following line of JSFL, which returns the current width of the first selected item on the stage:

var objectWidth= fl.getDocumentDOM().selection[0].width;
In order to gain the same functionality within your SWF Panel,
this code needs to be changed as follows:
var objectWidth=MMExecute("fl.getDocumentDOM().selection[0].width");

If we examine the code contained within the MMExecute ("JavaScript String"), we'll note that it's exactly the same piece of Flash JavaScript we saw above. The only difference is that it's now encapsulated within the wrapper. The MMExecute() function takes the Flash JavaScript string as a single argument and passes it to the Flash API. It's then processed and a return value is optionally given. This value can then be assigned to a variable.

Flash Panel Location
All the major Flash Panels can be found in one simple location within the authoring environment. Simply select 'Window > Other Panels >' to access it in Flash MX 2004.

When you're creating Flash Panels and testing in the live environment, keep the following locations in mind. These are the folders in which Flash MX 2004 locates the custom panels:

Windows 2000 or Windows XP
Drive:\Documents and Settings\user\Local Settings\Application Data\
Macromedia\Flash MX 2004\language\Configuration\WindowSWF
Windows 98
Drive:\Windows\Application Data\Macromedia\Flash MX 2004\language\
Configuration\WindowSWF
Mac OS X
Drive:/Users/userName/Library/Application Support/Macromedia/Flash MX
2004/language/Configuration/WindowSWF

We will make use of these directory locations later, when we test and deploy the extension.

Inspiration
Sometimes when you're working, you suddenly think 'Gee, wouldn't it be quicker if I could automate [Insert Task Here]?' More often than not, the answer is usually, 'Yep, it'd be great to automate that task ...but how on earth do I do it?'

Enter: Flash Panels... Actually, it's not just the automation of tasks that warrants the creation of Flash Panels; the need for can stem from any of the following (and some other) requirements:

• Automation: Automate often laborious and time consuming tasks within Flash MX 2004 (Code Addition, Timeline Effects)
• Speedier Access: Quicker access to menu hidden commands
• GUI Control: Add a GUI to control real-time effects (rotation, scaling, position etc)

The creation of a Flash Panel can be a daunting task, which is why you need a clear goal for the panel before you begin. Once you decide specifically what you want the panel to do, you're already most of the way to creating the panel (apart from the obvious coding and hooking into the interface).

The next step is to sketch the process flow of the command (how it all works) either on paper, or in a text editor of your choice.

Note: when I'm working in Flash, I always keep next to me a notebook that's dedicated to ideas/workarounds. Sometimes, as you're working away, a need or idea will spring into your mind that you can automate, speed up, or add an interface to, in order to make your life - and those of your colleagues - easier. Keep a list of these ideas so that those fleeting thoughts are never lost and everyone may benefit from the creation of your time-saving panel!

In the example that we're about to create, we will use a single instance of the NumericStepper component to control the rotation of Movie Clips. Consider the following diagram, which shows the command process flow of the command we're about to create in Flash MX 2004: