Chapter 8, User Interface Elements
#61 Amit’s Dials (Interactive Testing)
As well as the power of the JSAPI, you can also create custom panels and
requesters to allow user interaction between your JSFL scripts and the user,
not only allowing you to run scripts that configure the Flash authoring inter-
face, but also allowing users to customize the operation of the JSFL scripts
themselves! This works via an XML-based language, XML to UI, which
allows you to create custom UIs that appear in the Flash authoring environ-
ment and act as the interface between the user and your JSFL code. You can
also communicate between standard ActionScript and JSFL, so that you can
use a running SWF as part of your user interface. The MMExecute( ) func-
tion allows a running SWF (typically embedded within your XML to UI
interface) to execute JSFL scripts, thus allowing you to create large custom
interfaces that can provide a variety of automated tasks and tools via a sin-
gle custom panel.
In fact, Macromedia used the extensibility features within Flash MX 2004 to
create new features such as Timeline Effects, Behaviors, and the ability to
record macros via the History panel. It will be exciting when third parties
begin to use JSAPI, XML to UI, and MMExecute( ) to customize the Flash
authoring environment and make those modifications available to other
developers. (Note that JSAPI, JSFL, XML to UI, and MMExecute( ) are rele-
vant only to author-time customizations and additions. They are not
designed for runtime use in the Flash Player.)
Amit’s Dials (Interactive Testing) Hack #61
User interface elements need not be limited to runtime use for the benefit of
end users. Use UI elements during development to test various scenarios
Every time I go to a Flash conference, I learn something. Usually, it is some-
thing like how to use Flash MX 2004 components or the FlashCom server.
Occasionally though, I learn a trick or hack that seems innocuous but really
changes the way I work. This is one of those hacks.
During a talk by Amit Pitaru and James Paterson, James said something like,
“Well, I do some freaky animations, and then Amit comes around and says
‘hey, let’s put a dial on this,’ and so we kick it around with the dial for a bit
to see what happens. Once we are happy with it, we make the dial setting
Around the same time, I attended a presentation by the guys who did the
Banja site (http://www.banja.com). Banja is a full and complex adventure
game, so I assumed they wrote some code to define the data for each loca-
tion, but they didn’t. They were using a more complex version of Amit’s
dials. Each location in the game requires data, which they input using lots of
Amit’s Dials (Interactive Testing) #61
Chapter 8, User Interface Elements
offscreen text fields and sliders. Rather than having to update a code section
(or text file) whenever you add a new location, the whole thing is visual and
contained in one file. Once you have drawn the location and filled in the off-
screen text fields and sliders, you are done; no need to change any code.
Let’s see how it works.
First of all, we’ll create a dial, which is just Amit’s name for any adjustable
UI element such as a slider or knob. It need not use Flash’s built-in UI com-
ponents (in fact, we avoid them to keep the filesize small) and it need not be
round like the dials on your oscilloscope (oh, we know you have one in the
For our “dial,” we’ll create a simple slider with a numeric readout. First, cre-
ate a single hairline, 200 units in length, and convert it to a movie clip sym-
bol; place the registration point halfway along the line, as shown in
Figure 8-1. This will act as the line along which our slider’s puck will travel.
Name the symbol
Next, inside the
slider movie clip symbol, insert a new layer and name it
puck. On the new puck layer, create a small 10 × 10 square and make it
into a symbol named
puck with a centered registration point. Then place it
at (-5, -5) and give the on-stage clip the instance name
puck_mc, as shown
in Figure 8-2.
Finally, create a new layer named actions above the default layer, and attach
the following code to frame 1 of the actions layer:
puck_mc.onPress = function( ) {
this.startDrag(true, -100, 0, 100, 0);
this.onMouseMove = _onMouseMove;
Figure 8-1. A hairline with its registration point in the middle
Figure 8-2. The puck_mc clip positioned along the slider

Get Flash Hacks now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.