Creating Fireworks Panels – Part 2: Advanced Custom Panel Development

Sizing, Positioning, and Scaling Panels

When you first open a panel, Fireworks displays it at the size specified by the SWF document that makes up the interface. Users can resize custom panels all they want in Fireworks, but not smaller than the original size of the SWF. By default, when a panel is scaled, Flash Player scales the SWF to match the dimensions of the panel window. As a result, your panel interface may grow unattractively beyond its designed size. At times this may be desirable, but often it is not.

Luckily, Flash allows you to prevent a SWF scaling with the player area by using ActionScript. You can achieve this by setting the scaleMode property of the Stage object to "noScale", as follows:

Stage.scaleMode = "noScale";

A panel SWF with a scale mode of "noScale" will retain its original size despite the size of the panel window, centering itself in whatever area the panel provides.

However, it is not typical that a panel will center itself within the area of the panel. As you may notice with the Align or Auto Shape Properties custom panels, they are positioned instead at the top left of the panel area. Again, using the Stage object in ActionScript, you can allow for this by setting the align property to "TL" (for top left):

Stage.align = "TL";

Something else you may notice about most panels is that they are the same width—around 200 pixels or so. This allows them to fit alongside other docked panels at the side of the Fireworks workspace. If any panel were too wide, the other panels would have to stretch to match its width. When creating your own panels, keep your panel's width at around 200 pixels.

The Annotations panel was designed to be as small as possible, while still being functional. It uses scaleMode and align to make sure it remains fixed to the top left of Flash Player and does not scale. Add the scaleMode and align property definitions to the ActionScript layer in the Annotations FLA and publish a SWF to test it in Fireworks (see Figure 3).

Figure 3. Annotations panel elements positioned at the top left and unscaled

Top-left alignment and no scaling may become your preference for panel interfaces, but there are additional options available to you. I like to think that a well designed panel makes full use of the available Flash Player space provided by the panel window. For example, the contents of the Layers panel resizes horizontally with the size of the panel window and can even scale down vertically to be smaller than its contents. Although the Layers panel is not itself a custom SWF panel, its behavior can mimic your custom panels.

Scaling panels relies on the ActionScript Stage.onResize event to detect when the available size of the player has changed. When that event is called, the SWF moves and scales the elements in the interface to match the new size:

Stage.addListener(this);
function onResize(){
  // resize your movie
}

The more elements within your Flash interface, the more complex the onResize event handler because it needs to take the scaling of most, if not all, of those elements into consideration.

There are seven elements in the Annotations panel that are each going to be sized with the interface (see Figure 4):

1. User name label (user_label)
2. Edit user name button (edituser_button)
3. Annotations text area (annotations_ta)
4. Save button (save_button)
5. User last edited label (editeduser_label)
6. Time last edited label (editedtime_label)
7. Face movie clip (face_mc)

Figure 4. Elements of the Annotations panel

Each element moves or scales based on either the size of Flash Player or another element within the interface. For example, the annotations text area scales horizontally to the right based on the player's width but scales vertically based on the location of the Save button. The Save button moves vertically based on the position of the last user's edited label, which is based on the position of the date-last-edited label, which is based on the position of the bottom of Flash Player.

You could base the annotations text area off of the height of Flash Player. However, if an element between the annotations text area and the player's edge changes in size, the annotations text area would not be able to compensate for that, and there might be an overlap. Because some elements are based on the size of others, you need to make sure to adjust elements with dependencies last. That means positioning and sizing the Save button before the annotations text area.

Because of the not-so-robust nature of the UI components in Flash, an additional check is needed within the onResize event. Despite the fact that the user cannot manually scale a panel window to be smaller than the dimensions of the SWF it's playing, that does not mean that the panel won't ever be smaller than those dimensions. In fact, there are certain conditions in Fireworks where panels are resized to unexpected sizes internally when collapsed. Although this is not visible to the user, it can wreak havoc on your Flash components because many UI components will break if they are inappropriately sized. To prevent this from happening, include a condition in your onResize event handler that makes sure the scaling size does not fall below that of the movie at its smallest size. For the Annotations panel, the sizes for the height and width are 150 and 160 pixels, respectively.

Also, when a SWF is loaded into a Fireworks panel, the onResize event is not immediately handled. You may want to force a call to onResize when the movie starts so that it can display the panel interface correctly when opened:

Stage.addListener(this);
function onResize(){
   var PADDING = 5;
   var width = Math.max(150, Stage.width);
   var height = Math.max(160, Stage.height);
   face_mc._width = width;
   face_mc._height = height;
   
   edituser_button.move(width - edituser_button.width - PADDING, PADDING);
   
   user_label.move(PADDING, PADDING);
   user_label.setSize(edituser_button.x - PADDING*2, null);
   
   editedtime_label.setSize(width - PADDING*2, null);
   editedtime_label.move(PADDING, height - editedtime_label.height);
   editeduser_label.setSize(width - PADDING*2, null);
   editeduser_label.move(PADDING, height - editedtime_label.height - editeduser_label.height);
   
   save_button.move(width - save_button.width - PADDING, editeduser_label.y - save_button.height - PADDING);
   
   annotations_ta.move(PADDING, user_label.y + user_label.height + PADDING);
   annotations_ta.setSize(width - PADDING*2, save_button.y - (edituser_button.y + edituser_button.height) - PADDING*2);
}
onResize();

Notice that a PADDING variable is used to help control padding within the interface. Using a variable like this makes it easier to perform adjustments in spacing elements. Add this code to the ActionScript layer in the Annotations FLA, publish the SWF, and then test the panel in Fireworks. The interface now stretches to meet the size of the panel (see Figure 5).

Figure 5. Annotations panel elements scaled to fit the panel width

Page 3 of 10

Previous Page

Next Page