Welcome!

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

Related Topics: Adobe Flex

Adobe Flex: Article

Creating Panels in Macromedia Fireworks

When it comes to designing and optimizing web graphics, it doesn't get much better than Macromedia Fireworks

When it comes to designing and optimizing web graphics, it doesn't get much better than Macromedia Fireworks - given its available tools and workflow. However, Fireworks is not necessarily limited to the tools that come with it in the default installation. You can modify the interface to include new, custom panels that unlock hidden functionality, introduce new functionality, or simply improve your workflow.

As a developer and designer, I find such extensions to the Fireworks interface invaluable in helping me quickly and easily obtain my graphics goal. In Part 1 of this tutorial, I will show you how you too can make your own custom panels for Fireworks using Macromedia Flash. Not only will I show you how they are made but I will also cover workflow tips for making panels and techniques to help you successfully debug them.

Understanding SWF Panel Interactions
Custom panels in Fireworks are made with Flash. They consist simply of a Flash SWF file, which Fireworks plays using an internal Flash player embedded within a panel window that looks and operates like any other panel that's native to the application. The SWF provides the panel with its own interface and a means for interacting with Fireworks using ActionScript. If you've ever used the Align panel in Fireworks (see Figure 1), you've seen a custom SWF panel at work.

A custom panel window is capable of receiving commands from the SWF it's playing through ActionScript. One ActionScript command in particular instructs the window to relay information - or, more specifically, a JavaScript command - from the SWF to the main Fireworks application. This command is the MMExecute() command:

MMExecute( JavaScriptCommand:String ) : String;

MMExecute has one parameter, a string representing a Fireworks JavaScript command that is to be sent to Fireworks. When Fireworks receives this command (see Figure 2), it runs it just as though it were on the Commands menu. When the command has completed, MMExecute also returns any result of that command back to Flash in the form of a string. This allows the SWF to react to any command sent by MMExecute if needed.

In its simplest form, MMExecute is about all you need to create a simple panel and use it to interact with Fireworks. You can see how simple it is with the first example, the Create Ellipse panel.

Example 1: The Create Ellipse Panel
This example represents your basic first panel example, similar to "Hello World" examples you might encounter when learning programming languages. Because Fireworks is a graphics editing program and not a new programming language, I will use an ellipse in place of "Hello World."

The Create Ellipse panel creates an ellipse in the current Fireworks document. The panel interface consists of a single button that, when clicked, creates the ellipse. As you might have guessed, MMExecute is used to instruct Fireworks to draw the ellipse when the button is clicked. The code for actually creating the ellipse can be written by hand if you are familiar enough with Fireworks JavaScript programming. But it's easier to extract it from the History panel after you first draw one yourself in Fireworks.

The History panel in Fireworks is much like the history panels in other applications that record your every action, step by step, within the program. In Fireworks, however - as well as other Studio applications such as Flash and Dreamweaver - the History panel records not only your steps but also the JavaScript command(s) used to generate those steps. You can therefore copy the JavaScript associated with any step(s) in your history to the Clipboard and reuse it elsewhere, such as in your custom commands or, as you will see in this example, custom panels.

Creating the Code for the Panel
Here is the procedure to get the code you need to create this panel:

  • Open a new Fireworks 8 document. Within it, draw an ellipse that you would like Create Ellipse to generate for you.
  • In the History panel, find the Ellipse command (see Figure 3), select it, and use the Copy icon to copy the script to the Clipboard.
  • Launch Flash 8 and open the Create Ellipse template.
  • Source Files/Templates/Create Ellipse.fla
  • It should consist of a Button component with the label "Create Ellipse."
  • In Flash, select the Create Ellipse button and open the Actions panel, adding the following script:

on(click){
MMExecute("");
}

In the quote string in the MMExecute call, paste the Fireworks JavaScript command you copied from the History panel in Fireworks (see Figure 4). You should have something that looks like the following:

on(click){
MMExecute("fw.getDocumentDOM().addNewOval
({left:6, top:5, right:98, bottom:61});"); }

Publish your movie to create the SWF. You now have a SWF containing a button that, when clicked, uses MMExecute to send a command to the Macromedia application running the SWF. Ideally this should be Fireworks but simply publishing the SWF does not make Fireworks recognize it as a panel.

Making Fireworks Recognize the SWF
Fireworks recognizes custom panels by scanning for SWF files located in the Configuration/Command Panels folder within the Fireworks installation folder whenever the application launches. Each SWF located there is interpreted as a panel and is listed along with those available in the Windows menu. The name given to the panel in Fireworks is simply the SWF's filename, not including the extension. For your Create Ellipse SWF to be recognized as a panel, you must put it in the Command Panels folder:

  • Locate your Create Ellipse panel's SWF. If you are using the default publish settings for your Create Ellipse Flash document, it should reside in the same folder as the FLA itself.
  • Find the Configuration/Command Panels folder in your Fireworks 8 installation folder.
  • Place a copy of your published Create Ellipse.swf file in the folder:
  • (Windows) C:\Program Files\Macromedia\Fireworks 8\Configuration\Command Panels (Mac OS) Macintosh Hard Drive:Applications:Macromedia:Fireworks 8:Configuration:Command Panels
  • Restart Fireworks.
  • Open the Windows menu and select Create Ellipse.
  • You should now see Create Ellipse.swf within the Fireworks interface as a panel.
  • Create a new Fireworks document.
  • Click the Create Ellipse button (see Figure 5).
You should see a new ellipse created in your Fireworks document. Its size and shape should match exactly the one you created previously in Fireworks in order to get the command code from the History panel.

Workflow Tips for Fireworks JavaScript
The Create Ellipse panel was pretty straightforward. As you begin to make more complex panels, however, it will become important to develop a process that makes creating and testing your panels as painless as possible. This is important because you're not only dealing with two applications but also two programming languages that must interact to make your custom panels work. Developing a good workflow can help make the process run smoothly.

Test Fireworks Scripts in Fireworks First
Although custom Fireworks panels use Flash SWF files to operate, the real functionality of the panel lies within the Fireworks JavaScript code that MMExecute sends to Fireworks from the SWF. When you decide to make a panel, it is often a good idea to start by creating Fireworks JavaScript scripts separately and testing them directly within Fireworks without a panel interface. That way, when you start working in Flash, you can at least know that you are working with functional Fireworks commands.

Dreamweaver 8 happens to be a great editor for creating and testing Fireworks JavaScript files. Although Dreamweaver 8 supports Fireworks JavaScript files, it does not inherently treat them like other JavaScript (.js) files. Included with this tutorial's source files is an extension which allows Dreamweaver to recognize JSF files as normal JavaScript files, providing code coloring and code hints:

  • Open DW_JSFSupport.mxp with the Macromedia Extension Manager.
  • Restart Dreamweaver.
Also included with the source files is another extension, a Command Prompt panel (see Figure 6) for Fireworks. This custom panel provides a very simple text editor for writing and executing Fireworks JavaScript from directly within Fireworks.

Here's how you install the Command Prompt extension:

  • Open FW_CommandPrompt.mxp with the Macromedia Extension Manager.
  • Restart Fireworks.
  • Access the Command Prompt panel from the Window menu in Fireworks.
Use the Fireworks History Panel to Help
As you saw when creating the Create Ellipse panel, having access to the commands created by Fireworks through its History panel is a great time-saver. Use it whenever you can to create commands quickly for your scripts rather than typing them by hand. You may even be able to learn something new by looking at the code generated by the History panel.

More Stories By Trevor McCauley

Trevor McCauley first began working with Macromedia products while attending the University of Maryland, Baltimore County where he instructed classes and taught workshops covering Flash, Director, and Fireworks as an aside to earning a BA in Visual Arts. Currently Trevor works for a small production company developing content for websites and interactive CD/DVD ROMs. In his free time, he develops Flash and Fireworks content for his personal site, senocular.com, and moderates forums on popular Flash-related sites such as Kirupa.com, ActionScript.org, and UltraShock.com.

Comments (1) View Comments

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.


Most Recent Comments
SYS-CON Australia News Desk 02/10/06 11:54:44 AM EST

When it comes to designing and optimizing web graphics, it doesn't get much better than Macromedia Fireworks - given its available tools and workflow. However, Fireworks is not necessarily limited to the tools that come with it in the default installation. You can modify the interface to include new, custom panels that unlock hidden functionality, introduce new functionality, or simply improve your workflow.

IoT & Smart Cities Stories
Discussions of cloud computing have evolved in recent years from a focus on specific types of cloud, to a world of hybrid cloud, and to a world dominated by the APIs that make today's multi-cloud environments and hybrid clouds possible. In this Power Panel at 17th Cloud Expo, moderated by Conference Chair Roger Strukhoff, panelists addressed the importance of customers being able to use the specific technologies they need, through environments and ecosystems that expose their APIs to make true ...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and G...
DXWorldEXPO LLC announced today that "IoT Now" was named media sponsor of CloudEXPO | DXWorldEXPO 2018 New York, which will take place on November 11-13, 2018 in New York City, NY. IoT Now explores the evolving opportunities and challenges facing CSPs, and it passes on some lessons learned from those who have taken the first steps in next-gen IoT services.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...