Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

JavaScript and Flash Panels

Increasing productivity and empowering innovation

Macromedia products are ever more extensible in the 2004 releases. They make it easier for developers to create custom tools and extension scripts and then package those scripts and interfaces to distribute to their fellow designers and developers. Distribution comes in a few ways; in this article I discuss the use of JavaScript and Flash panels for use in Fireworks and Flash, and briefly cover the use of MXPs, the file format used in the Macromedia Extension Manager tool to allow developers to install extensions.

Although Dreamweaver is arguably more powerful in making use of such panels for coding purposes, Fireworks and Flash are a good pair to compare because one is currently a developer-oriented tool while the other one is designer focused...depending on who you ask, obviously. After reading this article, you'll have two distinct paths through which you can utilize the information.

The reasoning behind creating such tools deserves investigation. First, there are a lot of things developers and designers do that are unique to each company, each process or project, and almost always each developer. Realizing this, Macromedia has opened up the functionality of their products, allowing them to be scripted to be used in different ways, to be extended with custom menus and/or functionality blended with current functionality, and to automate repetitive tasks. Real-world examples include adding a custom tool to be used in the tools palette, adding an auto-color panel that automatically gives you a color scheme with swatches based on your color choice, and batch processing of images with custom settings. These not only allow you to get your job done faster, but also empower you to take matters into your own hands when there is certain functionality you need, or just plain want, that the application doesn't currently provide.

Now that you have your reasons, what tools are available? Most of Macromedia's products support extension through scripting in some way. Fireworks and Flash have a very similar JavaScript API that they expose to allow you to call application features through code. The code is a form of JavaScript and is procedural in nature. You can write functions and variables like you would in ActionScript, but there is really no point to OOP in terms of writing scripts. Because Fireworks has had its scripting engine longer, it comes with more example scripts upon first installation. There are more on Macromedia's site and on the Net; they're called commands and are saved as text files. For Fireworks the file format is .jsf, and for Flash the file format is .jsfl. You can use any text editor for either, but Flash has two advantages: Flash will provide code hints for the Flash JSAPI, and if you install the FWCommandComponents, an MXP found in the Extending Fireworks folder on the Studio MX CD, it'll install the code hints for Fireworks as well. These scripts can be run in a few ways. In Fireworks, you go to the Commands menu and select Run Command. This will open a dialogue and allow you to choose the JSF file to run. In Flash, you select Commands and choose Run Command, and through the same process pick your JSFL file.

If you have commands that you use often you can save them in the Commands folder, and when you reboot your programs they will be available as menu choices in your Commands menu. The Command folder for each respective program is where your Macromedia products are installed. In Fireworks on Windows XP, it's:

C:\Program Files\Macromedia\Fireworks MX 2004\Configuration\Commands

In Flash:

C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Commands

If scripts call each other via the runScript command and you don't provide a file path, as long as they are both in the Commands folder you're good to go. Additionally, placing scripts in here in Fireworks allows you to use them in batch commands (File>Batch), which you can then save as a script. You can see how this gets powerful quickly. Say you're exporting your image with very specific format, color, and matte color information, and you decide to place in a script because you're doing this often for your project. You can then make a batch command in Fireworks once you place said script in the Commands folder, and you can utilize the command you just made to batch a bunch of images using the same command, all in one fell swoop.

Now, that's uber-powerful...but uber-procedural, too. Flash panels provide a GUI to that functionality. By making a Flash movie with some new code, you can have that Flash movie control the IDE as well as call other commands and/or scripts. They appear in a normal Fireworks or Flash window and are accessible in Fireworks via Window> [Name of panel], and in Flash by Windows>Other Panels>[Name of panel]. A great example of this in Fireworks is the Align panel, which comes preinstalled. It is a Flash panel, written in Flash, that utilizes the Fireworks JSAPI to align whatever element on your document you've selected. For those coders who are intimate with auto-shapes and some of the bitmap effects you can do in Fireworks, creating an effects window is another way a Flash panel will allow you to deploy such an extension. Flash examples include the NetConnection Debugger, used for debugging Flash Remoting and Flash Communication Server, and a panel I created, the Key Tool, which shows you the keycode and ascii of the last key clicked. In Fireworks, they can also be used as modal dialogues.

Flash panels are made available by the Window SWF folder. On Windows XP, in Fireworks, it is:

C:\Program Files\Macromedia\Fireworks MX\Configuration\Command Panels

In Flash it is:

C:\Program Files\Macromedia\Flash MX 2004\en\First Run\WindowSWF

Communicating from a Flash SWF to Fireworks or Flash is done via the MMExecute command. This command takes a JSAPI function as a string and runs it:

MMExecute("fl.runScript(\"my command.jsfl\");");

Same for Fireworks:

MMExecute("fw.runScript(\"my command.jsfl\");");

Notice two things. The Flash one utilizes "fl" in front of the command. This is how you write the JSAPI for Flash, while you use "fw" in Fireworks. You can also use "flash" for Flash, but who wants to type all that? The second thing to notice is the escape characters used to put quotes (") in the parameter of the JSAPI function. This can get tedious, but I'll show you how to get around it (no, not single quotes, that doesn't work).

For multiline statements that you deem unnecessary for an external script, you can do:

var str = "";
str += "var doc = fl.getDocumentDOM();";
str += "for(var p in doc){";
str += " fl.trace(p + \": \" + doc[p]);";
str += "}";

However, there is a much better way to write the code. You can do one of two things. When writing Fireworks Flash panels, you can install the FWCommandComponents, which have wrapper methods for just about every Fireworks function, so instead of writing this:

var path = MMExecute("fw.appPatternsDir;");

you can do this:

var path =fwapi.getAppPatternsDir();

I've also written my own wrapper that does the same thing, but has two benefits:

  1. It uses one function to deal with the function calls, therefore reducing overhead with all of those predefined functions.
  2. You can register for events because Fireworks, not Flash (currently), has the added benefit of generating events if you have a function registered for it in your SWF. The events are detailed in the Extending Fireworks PDF. This helps your Window SWF, in Fireworks anyway, to react to changes in the IDE. For example:
var b = {};
b.owner = this;
b.onFwStopMovie = function(){
var so = SharedObject.getLocal("settings");
so.data.favoriteColor = this.owner.selectedColor;

Additionally, you can use the same API for Flash. So instead of:

MMExecute("fl.runScript(\"my command.jsfl\");");

you can do:

flapi.runScript("my command.jsfl");

While developing a Window SWF, it is easiest if you set your Publishing Settings to have the SWF publish straight to the directory from which Fireworks and Flash actually pull the SWF. On Windows XP, in Fireworks, this is:

C:\Documents and Settings\[user]\Application Data\Macromedia\Fireworks MX 2004\Command Panels

In Flash:

C:\Documents and Settings\[user]\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\WindowSWF

That way, you publish once, reboot Fireworks and/or Flash, and from then on can just close the Flash panel, publish, and then re-open it to test your updates.

Finally, to publish your work for ease of installation, updates, and uninstalling, using an MXP file is the best way to distribute it. MXPs are installer programs that run in Macromedia's Extension Manager. This program should already be installed if you're running any of the MX or MX 2004 products, Studio, or some of the version 4 products, although it never hurts to update your copy. This program allows installation and management of extensions to Macromedia products. Most Macromedia users have no idea they even have the program, but double-clicking the file will open the product if they do have it installed. A user can then uninstall your extension, toggle it on or off, and gleen information about how to use it. The files you want to install as well as where are defined in an MXI file; this file is an XML document that determines that information, and you can learn how to use the tags either by reading the MXI specifications PDF or looking at your currently installed extensions. For example, in Fireworks on Windows XP:

C:\Program Files\Macromedia\Fireworks MX\Configuration\Extensions

The MXI Specifications PDF is available at http://download.macromedia.com/pub/exchange/mxi_file_format.pdf.

You use the Macromedia Extension Manager to package your MXP file, and then you can just distribute your MXP as your installation file.

As you can see, extending Macromedia products with your own functionality and GUI is made easy by the exposed JSAPI of both Fireworks and Flash, as well as the ability to create a GUI utilizing a SWF generated by Flash and have it utilize the JSAPI.

More Stories By Jesse Randall Warden

Jesse R. Warden, a member of the Editorial Board of Web Developer's & Designer's Journal, is a Flex, Flash and Flash Lite consultant for Universal Mind. A professional multimedia developer, he maintains a Website at jessewarden.com where he writes about technical topics that relate to Flash and Flex.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

IoT & Smart Cities Stories
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DSR is a supplier of project management, consultancy services and IT solutions that increase effectiveness of a company's operations in the production sector. The company combines in-depth knowledge of international companies with expert knowledge utilising IT tools that support manufacturing and distribution processes. DSR ensures optimization and integration of internal processes which is necessary for companies to grow rapidly. The rapid growth is possible thanks, to specialized services an...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...