Exporting multiscreen app assets with Fireworks CS5

Additional Requirements

To complete this tutorial you will need to install the following software and files:

Mixtikl 2

• Try
• Buy

When developing an app or game that suits direct scaling to a range of form factors—or when drawing a custom interface using multiple sliced bitmap images—you'll find that Adobe Fireworks CS5 is a powerful tool for generating the assets you need. If you have a project with a set of master assets that you need to slice, resize to fit a number of screen sizes, and then export to high-quality bitmap images, then this article is for you.

In this tutorial, I'll describe some of the approaches that I have found work well—using a combination of layers, states, and pages and one set of Fireworks master assets to create some of the 150 required assets for each of 13 different screen sized skins for Mixtikl, a 12-track generative music and loop mixing system for iPhone/iPod touch, iPad, Windows Mobile, Mac OS, and Windows PCs—with versions in development for Android, bada, Symbian, MeeGo (all via our Airplay port), and the Antix Game Player.

To follow along with the instructions provided in this article, download and open the sample file folder linked below. Uncompress the folder and open mixer_screen_assets.png in Fireworks CS5.

There are a number of key things you should considering when starting your multiscreen Fireworks project. I've highlighted some best practices for dealing with these areas below.

Canvas size

Screen sizes change, so it is important to plan ahead. If you make your original master canvas big enough, when you rescale you'll have enough information to let the rescaling algorithms in Fireworks work their magic. This is especially true if you are incorporating bitmap images in your design, such as background images exported from Photoshop.

Vectors or bitmaps

Whenever possible, use vector assets. Vectors are independent of screen size and therefore are much easier to work with when resizing.

Layers and sublayers

Due to the way button states are named in the export process, I find it easiest to use the States panel to show or hide objects on shared layers. This strategy utilizes states as a layer organization mechanism, so that you can then export your assets from the different states. Be sure to group your key assets in layers (not sublayers) because you cannot show or hide sublayers in the States panel—only layers.

Slices

Fireworks supports only one slices layer per page, and the slices must not overlap. If your app has multiple screens and your assets tend to occupy similar positions on the screen (or you simply have a lot of assets), you'll find it is easiest to create several Fireworks master files (we had six PNG files for Mixtikl, and this sample project focuses on just one of those masters). If Fireworks supported multiple independent Web Layers, then you could keep all your assets in the one file, which would be great.

If you need to export slices that depend on different layer visibilities, you may find it helps to rearrange the order of your slices and visually group them to make them easier to select.

Orientation and resizing

When creating your master file, set up the canvas for your preferred orientation. If your design must work in both portrait and landscape orientation, be aware that your assets will be stretched when you resize them; this is simply a fact of life. However, if your master canvas is large enough, then the excellent Fireworks rescaling algorithms will have enough data to downscale and even upscale any raster images as necessary.

Symbols and 9-slice scaling guides

Reusable symbols in your design can be a great timesaver, especially for buttons. However, when resizing a symbol down to a small size (for the small screen version), you may see some unintended effects unless you enable and lock the 9-slice scaling guides check boxes in the Convert to Symbol dialog box. Although a full discussion of 9-slice scaling is outside the scope of this article, you can use the sample file provided on the first page of this article to see how to access this setting. Follow these steps:

1. Open the file named mixer_screen_assets.png in Fireworks.
2. Access the Layers panel. Show and unlock the EQ Overlay layer, expand it, and select the sublayer named button – ok.
3. Press Command+Shift+G (Mac) or Control+Shift+G (Windows) to ungroup it. You can then double-click the same button symbol on the Canvas (the one with the check mark on it), and you'll enter Symbol Editing mode where you can see the 9-slice scaling guides.
4. Click the left pointing arrow icon in the top left corner to return to the main canvas, and then collapse, hide, and lock the EQ Overlay layer.

Keyboard shortcuts

If you are exporting a lot of graphics, you'll likely want to use keyboard shortcuts to perform tasks you'll use repeatedly. In Fireworks CS5, you can set up custom keyboard shortcuts as desired. There two standard keyboard shortcuts I use all the time: Command+G (Mac) or Control+G (Windows) to group assets and Command+Shift+G (Mac) or Control+Shift+G (Windows) to ungroup assets.

There are also two keyboard shortcuts I use all the time that not included as standard in the Mac installation of Fireworks (although they are included with the Windows version).To add the custom keyboard shortcuts in the Mac version of Fireworks, follow these steps:

1. Select Fireworks > Keyboard shortcuts.
2. Next to the Current set menu, there is a Duplicate button that you can click to create a duplicate set. Duplicate the current set of keyboard shortcuts and then enter a name for the new set. (It is a best practice not to override the default settings, in the event you ever want to use them again).
3. In the Keyboard Shortcuts dialog box, while the Commands menu is set to Menu Commands, use the interface below to select Modify > Canvas > Image size.
4. In the Shortcuts section, press the Plus (+) button to create a new shortcut, press the key combination you want to use and then click the Change button.

I created two keyboard shortcuts using this method, as shown below:

• Modify > Canvas > Canvas size: Control+Shift+C
• Modify > Canvas > Image size: Control+Shift+I

Experiment with adding your own keyboard shortcuts to see how you can increase your productivity and reduce repetitive stress.

In this section, you'll learn how to export the background screen for the application. The master PNG file is displayed with the guides overlaid (see Figure 1).

The central area contains the main mixer background; slices are highlighted in light green and guides are displayed in light blue. At the moment, there is currently one page (which you'll resize later) that has a total of five different states. In this article, you'll select the different states to export either screen backgrounds or slices. Notice that the first three states are named as PNG files. This is intentional because these states are designed to be exported as full screen PNG background graphics, rather than sliced assets.

Tip: You can toggle the display of guides on and off by pressing Command+; (Mac) or Control+; (Windows). Turn the visibility of slice guides on and off by selecting View > Slice Guides.

Sharing to states

Use the States panel to select the first state called mxr_background.png. Click the Layers tab to see that all of the layers in this file are shared to states (see Figure 2).

This setting is indicated by a small filmstrip icon to the right of each layer. Using the States panel, you can select different states that have individual layer's visibility turned on or off. I find that the practice of sharing layers to states makes it easy to keep track of all the UI elements across the states.

To access the state sharing settings for a layer, you must first unlock the layer (click the lock icon), and then right-click the layer to see the Share layer to states option; a dot next to the option in the menu indicates that it is enabled.

Exporting a background graphic

You'll begin by exporting the master background (mxr_background.png). This corresponds to the state of the same name, and it should be exported without slices.

To export the background image, follow these steps:

1. Select File > Export > Image Preview, or press the keyboard shortcut Command+Shift+X (Mac) or Control+Shift+X (Windows).
2. Use the menu on the left side to select the image quality (PNG 24-bit in this case, but later you'll use PNG 32-bit to export slices that require transparency).
3. Click the Export button.

Tip: If you press the OK button instead of Export, you are setting the export format to the selected asset, which can be handy if you want to export a single slice by right-clicking it and choosing Export Selected Slice. That workflow does not give you the option to set the export format, so you'll find it is helpful to save the export settings ahead of time (see Figure 3).

Ensure that the filename is correct and you use the following settings:

• Export: Images Only
• Slices: None
• Pages: Current Page
• Current State Only check box (enabled)

Press the Export button to export the PNG background file.

Although this sample project is only working with one page, you may later decide to duplicate your pages. At that point, if you do not set the Pages menu to Current Page, you will end up exporting more files than expected (see Figure 4).

If desired, you can return to the States panel, select each one of the two remaining png-named states (ply_background.png and mxt_fx_eq.png) and export them as background images to the folder that contains the background screens for your project.

Tip: If you name a state the same name as the desired filename for your background image, it makes it easy to copy the state's name and paste it into the filename field (when you choose File > Save As).

Keyboard shortcuts do not exist to enable or disable the check box options and Fireworks does not always seem to remember the last settings applied in the Export dialog box. Therefore, if you are exporting a significant quantity of images (especially if you are exporting all of your multiscreen assets in one work session), be prepared for a lot of mouse action and be very careful to check that the settings in the Export dialog box are correct before clicking the Export button. Otherwise, when you begin placing the background screen images and various slice images you've exported into different directories (to organize your project assets), you may find that you've exported a bunch of unwanted assets from all states to the export directory—and it can be time-consuming to identify and delete the unwanted assets later.

When working on the Mixtikl project, I found that when I selected and exported specific button states, the export naming feature for states in Fireworks didn't generate files with the naming conventions our team was using. Additionally, the project required that I export a number of background images from states in the one master PNG file, and I found it difficult to determine the corresponding button state, layer, and export settings to apply to export the desired assets. I decided to find another approach. Luckily, Fireworks is very flexible.

Since we were only using two state image toggles (on and off), I realized that I could have one button state fixed in the background image and one as a button overlay, which made it easier to select the state for the button overlay slice exports; I also used this strategy when exporting some of the other general overlay assets.

However, since the slices cannot overlap, it means that if you need to export buttons with four different states, while also exporting a complex UI from a single Fireworks PNG file, you'll have to plan strategically.

In the next section, you'll see this technique in practice. In the States panel, select the state named button overlays (see Figure 5).

The button overlays state contains button overlays, as well as a number of other UI indicators, on a transparent canvas. Since the project requires that they have transparent backgrounds, you'll export them as 32-bit PNG slices with the transparency option. (Previously you exported the background image using the non-transparent 24-bit PNG format.)

Exporting all slices

Open the Layers panel (click the Layers tab) and then unlock and select the Web Layer at the top to select all of the slices in the button overlays state. Click the arrow icon to expand the Web Layer and see the slice names (see Figure 6).

Notice that all of the slices are named using the name of the asset that will be exported, including the file type, such as mxr_stop.png.

Export the files again (choose File > Image Preview) to open the Image Preview dialog box. This time, set the format to PNG 32-bit. Click Export, and use the settings shown below in the Export dialog box (see Figure 7).

Ensure that you have selected the settings shown above before you click Export. The Save As field value does not matter because this time you are exporting a range of slices and not a single image. Each slice's name will be used as the exported image's filename.

Exporting specific slices

In this project, there were a couple of slices that had to be exported as non-transparent overlays. Of course, in the previous step you could have manually selected only the slices that you wanted to export and then exported that subset. However, the slices in the Web Layer are not yet in a specific order, and the process of choosing the non-transparent slices would have involved some evaluation and identification before making the selections.

It is possible to put slices in sublayers in order to group them for easy selection. However, if you want to resize duplicate pages to export resized assets (see the next section), you'll find that there is a very important reason not to do this. When you duplicate a page, its slice names are not retained. The workaround is to copy the Web Layer from your Master Layout Page and paste it into your duplicate page (after first deleting the Web Layer of that duplicate page). But, if you do that, the names of sublayers are not retained. So, I've found that the best practical approach is to rearrange the order of the slices in the Web Layer to place related slices close to each other. If you only have a few related slices that need to be exported differently (such as transparent vs. non-transparent backgrounds), then you can place these slices at the top or bottom of the Web Layer to make them easy to select.

Since you previously selected all of the slices in the button overlays state (state 4) and exported them, including two slices that you don't need (because the next two you'll export do not have transparent backgrounds) the next part involves overwriting those two slices with the correct versions that come from state 5, named "mute button overlay". Use the States panel to select mute button overlay, and then use the Layers panel to select the two slices that contain the assets that will not be transparent: mxr_button_mute.png and mxr_track_pan.png (see Figure 8).

You can select these two slices using one of two methods:

• Press and hold the Shift key while clicking the slices you want on the canvas
• Press the Command key (Mac) or the Control key (Windows) and select the two slices in the Web Layer list

After selecting the two slices, choose File > Image Preview as you did before—or press the keyboard shortcut Command+Shift+X (Mac) or Control+Shift+X (Windows)—using the same export settings shown in Figure 3 to overwrite these two slices. In the dialog box that asks if you want to continue and replace the existing files, click OK.

When it comes to creating and exporting assets for multiple screen sizes, the multiple page functionality supported by Fireworks CS5 makes it a powerful tool. You can duplicate a Master Layout Page, resize it as desired, and then export the resized assets. When you are dealing with multiple screen sizes, the support for stepping through history and creating commands in Fireworks makes it a lot easier, too. If you have multiple screen sizes to support (our Mixtikl project supports 13 screen sizes at last count, each with 150 assets) and you change your master design often, you can really appreciate the time savings here.

Although Fireworks makes it easier, there are a number of things to consider. One caveat is that slice names are not retained in the page duplication process. Another consideration is that there does not seem any way to automate the export process of the files themselves; exporting the files requires a great deal of mouse and keyboard action.

Duplicating and renaming the Master Layout Page

The Master Layout Page is the location where you make all of your design changes. It is the page that you duplicate and then resize. If, after you have resized for all your screen size variations, you need to make changes to your Master Layout Page, it is necessary to resize them all again. This is where scripts and commands are extremely useful. Follow these steps:

1. Open the History window (choose Window > History).
2. Click the Options Menu (tiny arrow icon) in the upper right corner. In the Options menu that appears, select Clear History to clear any previously recorded history.
3. In the Layers panel, unlock and expand the Web Layer. Select all of the slices by clicking the Web Layer, and then copy all of the slices by pressing Command+C (Mac) or Control+C (Windows).
4. In the Pages panel, right-click the Master Layout Page (640 × 832 master) and select Duplicate Page from the menu options (see Figure 9).

5. Click the Layers tab for this new page, and select the Web Layer. (Notice that all of the slices have been renamed as Slice). Select any of the highlighted slices on the canvas and press the Delete key to delete the slices.
6. Press Command+V (Mac) or Control+V (Windows) to paste in the slices from the Master Layout Page, which use the desired slice names. As I mentioned previously, you cannot use this process to paste the sublayers and use their names from the Master Layout Page because sublayer names are not retained when pasted.
7. Back in the Pages panel, double-click the duplicated page's name (the page name that says "copy") and rename it, like this: 320x480. It's a best practice to rename it using the screen dimensions you'll be using to resizing page (such as 320 pixels by 480 pixels).
8. For the duplicated page, choose Modify > Canvas > Image Size. Enter the new desired image dimensions (320 × 480), making sure that the check box next to Constrain Proportions is not checked (otherwise the graphics will only be stretched in a linearly fashion). Also make sure that the Current Page option is checked—otherwise all of your pages, including your Master Layout Page, will be resized. This can be a disaster if you accidentally resize all of your pages and don't notice it in time to undo it. Leave all other default settings and click OK (see Figure 10).

After following these steps, all of the page assets and slices are resized along with the page canvas and you can see the smaller version displayed.

Now repeat these steps to create another screen size (such as 480 pixels × 320 pixels):

1. Duplicate your Master Layout Page again. Follow Steps 4–8 listed previously to see which steps to repeat in the Command file you'll create in the next section.
2. In the History panel, select the top item, hold down the Shift key, and select the last item to select all of the entries (see Figure 11).

3. Click the Options menu (tiny arrow icon) and choose the option Save as Command.
4. In the Save Command dialog box that appears, enter a name for the new command, such as test. Click OK.

The command you just saved will appear under the Commands menu, at the bottom of the list of commands. (For example, you could choose Commands > test, because now test is displayed as the last item in the list of commands.)

In this next part, you'll open and edit the test command:

• Mac OS: [User]/Library/Application Support/Adobe/Fireworks CS5/Commands/test.jsf
• Windows: C:\Documents and Settings\User\Application Data\Adobe\Fireworks CS5\Commands\test.jsf

Note: The exact location of the Commands folder varies from system to system. It also depends on whether you want the panel to be available just to your user profile or to all users. Command Panels folders are located in the Configuration folder in the Fireworks application folder and also in your user specific Fireworks configuration folder. If needed, use your system to find the file named test.jsf.

Open the test.jsf file with a text editor, such as Dreamweaver CS5.

Now that you are looking at the history captured in the command, you can see why it was necessary to duplicate and resize two screens; this strategy helps you see what you need to copy and then duplicate in this file to make it easy to set up a multiple page resizing command. Follow these steps:

1. Duplicate the highlighted section for each new screen size you want to add (see Figure 12). For example, after copying and pasting the duplicate set of history, locate the line .setPageName (1, "480x320"); and edit the 480 x 320 value in the quotes to the new desired dimensions. In the line .setDocumentImageSize({left:0, top:0, right:480, bottom;320}, update 480 and 320 to use the new screen sizes.

2. Save the text.jsf file in the same location and close it.
3. Back in Fireworks, close the Fireworks file named mixer_screen_assets.png.
4. In Fireworks, choose File > Open Recent to open the same PNG file again.
5. Choose Commands > test.jsf to run the command you just edited. After the process is complete, look in the Pages panel to see that all of the new resized pages (that you added) are created for you (see Figure 13).

Now the only remaining task is to export the resized assets you need, as described in the previous two sections of this article.

Where to go from here

Hopefully the tips and best practices outlined in this article have illustrated how you can leverage the features in Fireworks CS5 to resize and export UI assets. This sample project utilizes a source file that was used in a real product. It is my goal to pass on the strategies that I have found to work well when exporting assets, and show how to create and edit a custom command to automate the process of resizing UI elements to fit other screen sizes.

If you have the budget, resources, and time available, it's likely that you'll want to customize your app or game design to support screen orientation, and maybe even develop your project for a number of different screen sizes. Fireworks is a great tool for laying out application UIs and for exporting the sliced assets. Even if you are restricted by budget, resources, and time and need to target multiple form factors, Fireworks does a fantastic job of resizing UIs from a single master design.

Many developers also use Fireworks to prototype interactive UI designs by using hotspots and states. The provided sample file includes a number of states which manage layer visibility. You can experiment with this process by inserting hotspots and linking them to the corresponding states. This enables you to storyboard your UI workflows and then export the page as an interactive PDF to test the usability. To learn more about using hotspots to create UI prototypes, I recommend reading Interaction design and rapid prototyping with Fireworks by David Hogue.

You might also want to play with Mixtikl to see the latest user interface in action—possibly even at different screen sizes (it regularly changes as we try out different things). Or you might just wish to test the application for fun and to get ideas for your own projects.