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
Intel is an American multinational corporation and technology company headquartered in Santa Clara, California, in the Silicon Valley. It is the world's second largest and second highest valued semiconductor chip maker based on revenue after being overtaken by Samsung, and is the inventor of the x86 series of microprocessors, the processors found in most personal computers (PCs). Intel supplies processors for computer system manufacturers such as Apple, Lenovo, HP, and Dell. Intel also manufactu...
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understa...
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...
Apptio fuels digital business transformation. Technology leaders use Apptio's machine learning to analyze and plan their technology spend so they can invest in products that increase the speed of business and deliver innovation. With Apptio, they translate raw costs, utilization, and billing data into business-centric views that help their organization optimize spending, plan strategically, and drive digital strategy that funds growth of the business. Technology leaders can gather instant recomm...
OpsRamp is an enterprise IT operation platform provided by US-based OpsRamp, Inc. It provides SaaS services through support for increasingly complex cloud and hybrid computing environments from system operation to service management. The OpsRamp platform is a SaaS-based, multi-tenant solution that enables enterprise IT organizations and cloud service providers like JBS the flexibility and control they need to manage and monitor today's hybrid, multi-cloud infrastructure, applications, and wor...
The Master of Science in Artificial Intelligence (MSAI) provides a comprehensive framework of theory and practice in the emerging field of AI. The program delivers the foundational knowledge needed to explore both key contextual areas and complex technical applications of AI systems. Curriculum incorporates elements of data science, robotics, and machine learning-enabling you to pursue a holistic and interdisciplinary course of study while preparing for a position in AI research, operations, ...
In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and Bi...
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...
The Japan External Trade Organization (JETRO) is a non-profit organization that provides business support services to companies expanding to Japan. With the support of JETRO's dedicated staff, clients can incorporate their business; receive visa, immigration, and HR support; find dedicated office space; identify local government subsidies; get tailored market studies; and more.
Tapping into blockchain revolution early enough translates into a substantial business competitiveness advantage. Codete comprehensively develops custom, blockchain-based business solutions, founded on the most advanced cryptographic innovations, and striking a balance point between complexity of the technologies used in quickly-changing stack building, business impact, and cost-effectiveness. Codete researches and provides business consultancy in the field of single most thrilling innovative te...