Hacks #61-64

Flash originally started as a low-bandwidth animation tool, but since then Macromedia has added many features that support building graphic user interfaces (GUIs).

In recent years, Macromedia has been promoting Flash as a platform for Rich Internet Application (RIA) development. To that end, Macromedia has enhanced Flash's event-driven language, ActionScript, making it easy to write application code that can respond to user interaction and thus act as "GUI glue"?the thing that holds your interface together and drives it.

The user interface (UI) and navigation can be implemented by using the Flash timeline as a nonlinear series of animation/content sections. In the final Flash site, the user navigates between the sections, each of which represents a different program state (such as different pages in a multipage form), via a simple point-and-click UI. The UI is also easy for the designer to set up with a minimum of scripting. Flash MX Professional 2004 supports new Slides and Forms features (collectively called Screens) to make visual development easier by hiding the timeline paradigm from the developer. Instead, it allows them to develop using a PowerPoint-like or Visual Basic-style authoring metaphor.

Flash MX and Flash MX 2004 provide numerous components [Hack #73], which are UI building blocks, such as combo boxes and radio buttons, that make it easy to build and customize (skin) the UI. Of course you can create your own UI elements, such as buttons [Hack #14] and sliders [Hack #61] .

ActionScript also includes built-in methods to allow interactive control of multimedia streams, such as sound and video, using the Sound, Microphone, and Camera classes.

Regardless, the raison d'etre of Flash is to engage the user. Even when used to conduct business or provide education, your content must be engaging or you will lose existing viewers and fail to attract new ones.

Sometimes, your interface needs to be clear and clean, but in other cases, we need to create something that the user will enjoy using and that will fulfill the promise of over-the-Web rich content. In the end, it is up to you as the site designer or developer to make appropriate choices for your audience based on your business or artistic goals and to adjust your site based on user feedback.

However, this book is not about interface design but about stretching Flash in ways Macromedia might not have foreseen or intended. Therefore, the hacks in this chapter cover several nonobvious uses of UI elements within Flash. Some of them overcome apparent limitations in the UI facilities provided by Flash. But the first hack shows that UIs are not just for the end user, sometimes they can make development easier, too.

Speaking of author-time user interfaces, Flash MX 2004 and Flash MX Professional 2004 support extensibility?the ability to not only configure the Flash authoring environment, but also to modify existing features or add new ones.

The Flash authoring environment can be configured via the JavaScript API (JSAPI) using a dialect of JavaScript specific to the Flash authoring environment, JSFL (which stands for "Flash JavaScript"?yeah, I know the backward acronym is very unsatisfying).

As most web designers know, JavaScript allows access to the web browser's user interface and any open HTML documents using the Document Object Model (DOM). However, unlike the browser-based DOM, the JSFL DOM provides access to the Flash authoring environment user interface and any open FLA documents. Using JSFL and the associated DOM, you can:

  • Access any part of the currently open Flash document (FLA) and programmatically edit it via JSFL. This allows you to create advanced commands (accessible via the Commands menu) that can automate workflows or create new tools.

  • Access the Flash authoring environment user interface, allowing you to create (for example) new tools on the Tools palette. One such tool (the PolyStar tool) can be seen if you click-hold the Rectangle tool.

  • Export a SWF from the Windows command line as described on moockblog (http://moock.org/blog/archives/000058.html).

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 interface, 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 environment 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( ) function 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 single 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 relevant only to author-time customizations and additions. They are not designed for runtime use in the Flash Player.)