Fireworks Article

Exploring the Demo Current Document command in Fireworks CS3

One of my favorite new features in Adobe Fireworks CS3 is its ability to include several pages in the same document. Not only can this feature help you be more productive with the work you do, but it also spawns new ideas and concepts for Fireworks extensions—in this case, the Demo Current Document command.

Here is what inspired me. When I was ready to discuss my designs with my clients, it wasn't always easy for me to present my Fireworks pages in a format other than separate HTML files and images exported from Fireworks. One common workflow that I and others followed to show clients our designs was to build a small site in Dreamweaver that linked all the mockups together in one place, or even exporting the images and generating a PDF. This process was time-consuming, and did not sit well with us when other firms were bidding on the same project. I thought it would be ideal to be able to view the Fireworks pages as a single presentation with only a couple of clicks.

Enter the Demo Current Document command, which makes it really easy to export your mockups and wireframes into a slick slideshow geared for giving presentations to clients or colleagues. This command has many uses. For example, one document can contain various templates for a website. Maybe you are prototyping a user experience for a specific workflow, or you are using pages to contain several design comps of one template. Pages can even act as a project containing multiple designs such as a banner, column ad, or site design. For more information about using pages, read Using Fireworks CS3 to design effective, interactive website presentations by Hoang Dinh.

Requirements

In order to make the most of this article, you need the following software and files:

Fireworks CS3

• Try
• Buy

Flash Player 9

• Download

Demo Current Document command (v. 1.0)

• Download (ZIP, 112K)

Source code (only for advanced users):

• dcd_source.zip (3.8 MB)

Prerequisite knowledge

You should have a working knowledge of the basic concepts behind vector and bitmap graphics and intermediate to advanced knowledge of ActionScript 2.0 if you decide to customize the presentation command in Adobe Flash CS3 Professional.

Introducing the Demo Current Document command

After you install the Demo Current Document using the Adobe Extensions Manager, you will find it in the Commands menu. Select Commands > Demo Current Document to open the panel (see Figure 1). You use this panel to automatically export pages from the Fireworks document as a lightweight slideshow that you run in the browser using Adobe Flash Player 9 or later.

Figure 1. Demo Current Document panel

Creating a presentation

Here's how you create a slideshow presentation:

1. Select Commands > Demo Current Document

   Note: Make sure you have multiple pages within the document, or the command will only export one page, which is not useful.

2. Select a background color.

3. Click Create Demo and browse for a location to save the presentation files (preferably in a new folder).

   Note: If you select your desktop, all the files will be placed on the desktop.

4. Browse to the location where you saved the presentation, double-click demo_player.htm to start the presentation (see Figure 2), and you're done!

   

   Figure 2. HTML page with Demo Current Document player in full-screen mode

The Demo Current Document player has a simple style that will not get in the way of your presentation. Once the HTML page (demo_player.htm) opens in the browser, the player reads all the data from the generated images.xml file to display the slideshow. Here is a sample generated XML file:

<?xml version="1.0" encoding="UTF-8" ?>
<demo background="000000"
    title="demo_current_document" maxW="706"
    maxH="500" bottomLineBgColor="000000"
    textColor="FFFFFF" lineAlpha="25" >
  <slide pathToImg="page0.jpg" />
  <slide pathToImg="page1.jpg" />
  <slide pathToImg="page2.jpg" />
  <slide pathToImg="page3.jpg" />
  <slide pathToImg="page4.jpg" />
  <slide pathToImg="page5.jpg" />
  <slide pathToImg="page6.jpg" />
  <slide pathToImg="page7.jpg" />
  <slide pathToImg="page8.jpg" />
  <slide pathToImg="page9.jpg" />
  <slide pathToImg="page10.jpg" />
  <slide pathToImg="page11.jpg" />
</demo>

The player then loads the first image and automatically plays the slideshow by default.

Move your mouse pointer to the lower part of the screen to display the navigation strip. Click the Toggle Fullscreen, Prev, Next, Play, or Stop buttons to navigate through the presentation (see Figure 3).

Figure 3. Navigation buttons in the slidedshow

Note: You can also control the slideshow by using the keyboard. Press the Page Up, Page Down, P, S, or left and right arrow keys. Unfortunately, keyboard control doesn't work in full-screen mode because the player blocks all the keyboard events in this mode, for security purposes.

A simple preloader is integrated into the player, so that you can place your slideshow on a web server and view it over a slow or fast connection.

Customizing the player and presentation

If you know ActionScript 2.0 and have the desire and motivation to improve on this command, it shouldn't be too hard for you to edit the included source files. I did my best to make the source code simple and clean for you to customize for your own presentations if you know how to develop in Flash CS3 Professional.

The following is a useful reference to get you started:

Fireworks CS3 API

fireworks_cs3_extending.pdf (PDF, 3 MB)

If you want to study the player in more detail, I recommend reviewing the SlideshowPlayer.as file in the player folder. The code for this class is far from ideal, but it works without errors and I will improve it in the near future.

Once you generate a presentation, you can manually edit it without Fireworks. The images.xml file has a very simple structure, so you should be able to edit it easily by hand. Simply change the names of the loaded image files and also their maximum width (maxW) and height (maxH) setting. If you intend to place the images in a folder within the same directory as the slideshow, make sure you use a valid path for the images or the slideshow will not play properly.

Where to go from here

I have no doubt that this command will help you present your work to clients or even to fellow designers and developers. It's very useful!

Studying the source files is also a simple way to learn and create your own extensions:

• dcd_source.zip (3.8 MB)

In the future I'm going to make an improved Demo Current Document command. Today, for instance, there is no functionality in the page list. Here I could add the ability to sort pages and delete pages from the slideshow. Also, currently there is no easy way to give each slide a different background color.

Some features and improvements that I'm planning to implement include the following:

• Adding a slideshow interval
• Adding thumbnails into the player for slide previews
• Adding a background image
• Adding slide transitions
• Rewriting the code for ActionScript 3.0

About the author