Building the mobile movie application

Fireworks is my preferred tool for creating graphics for mobile applications. Here I outline some of the techniques I used to build the layout and generate the design assets in the mobile application. Hopefully these strategies will come in handy for you as you design your own mobile projects.

Screen size and orientation

When you design a mobile application, it's critical to determine your target device range because different handsets have different screen resolutions. The dimensions can vary greatly (such as 240×320, 176×208, and so on).

Fireworks makes it very easy to set the screen size. Simply select File > New and enter the height and width of the desired canvas. The canvas orientation and the resolution of the pages can be changed very quickly in a single document.

Pages and states

The Pages panel is helpful when you need to create master templates. Just make duplicate copies of the subpages and then edit them as desired. This is a really fantastic option because you can easily create a variety of different designs for a single page (see Figure 7).

Figure 7. Using the Pages panel to create duplicates of subpages

The States panel is a wonderful new feature because it allows you to set up the look and feel of each state in the application (a page may contain different states of the same page). However, when you export the PNG, only the active state will be exported.

Rich symbols

Use rich symbols whenever you plan on duplicating graphic elements. They'll save you a lot of time. When you use rich symbols, you don't need to rework the graphics on each page. Rich symbols in Fireworks are very similar to the symbols (movie clips) in Flash. You can convert any graphic into a symbol by pressing F8. And if you edit or modify the symbol later, all iterations of the symbol's instance will change automatically in every page.

In the mobile movie application I used rich symbols for many elements, including the movie logo, left and right arrow keys graphics, and CD and box elements. Whenever it was necessary to modify the logo, I changed it once and the logo was immediately updated on all the other pages.

Adobe Illustrator integration

You can even import Adobe Illustrator files directly into Fireworks CS4 while retaining the layer structure, text, complex vectors, masks, colors, groups, and images (see Figure 8). Also supported is the ability to convert layers to states. It just got easier to jump between the two programs and copy, open, or import illustrations.

Figure 8. Importing Illustrator files into Fireworks

Testing mobile device designs with Adobe Device Central

With the emulator in Adobe Device Central, you can quickly test your design to see how the application looks on the actual mobile phone. Open your PNG files with Adobe Device Central and choose your target mobile device from the list of handsets. There are many device profiles available, so simply click each device to see how it displays your graphic content. Adobe Device Central allows you to choose from a wide range of handsets, based on manufacturer, screen resolution, or supported versions of Flash Lite (see Figure 9).

Figure 9. Viewing your PNG files as they will appear on targeted handsets using Adobe Device Central

Adobe Device Central doesn't support the display of all layers of your PNG files—only the top pages. For this reason, I recommend exporting each subpage as an individual PNG file (or other web image format). After you export each page separately, open each page individually in Adobe Device Central to review the look and feel of your designs.

Exporting the final design to deliver to clients

After you are finished designing a prototype, you can choose either to export them as an interactive PDF file or as HTML images, allowing great flexibility as you deliver your product designs to your clients.

Interactive PDF files

One of my favorite features in Fireworks CS4 is the ability to link the pages together using the Slice tool. It's a snap to export the designs in PDF format (see Figure 10). Also clients love the ability to review designs as they click through them. Best of all, PDF is a widely used file format that is easy to view with the free Adobe Reader, streamlining the review process considerably. Check out the PDF file I created for this mobile application:

i2fly-movie.pdf (PDF, 1.8 MB)

Figure 10 . Adding password protection to the PDF file

HTML export

Another easy format to export to is HTML. It previews like a charm and is widely accepted by clients. Fireworks generates pure HTML that can be read by most web browsers and HTML editors, such as Dreamweaver. For more information, refer to Exporting HTML and Exporting Fireworks HTML in the Fireworks LiveDocs.

Integration with Adobe Flash

You can also repurpose all of the graphic symbols, elements, and PNG files in Flash CS3 Professional. You can choose to maintain the editability of the pages or import them as a single, flattened bitmap (see Figure 11).

Figure 11. Specifying the editability of paths and text elements as you import each file in Flash

PNG files generated by Fireworks CS4 contain metadata and important file information. When you import those PNG files into Flash, the symbols you created in Fireworks are recognized as symbols in Flash. Vector shapes are recognized as editable paths. Text is also maintained as editable if desired. This is truly a timesaving feature because it allows me to work perfectly with my designs from Fireworks to Flash without any extra effort. The import process also includes many different options that allow you to choose how you want to import the PNG files into Flash.

Where to go from here

As you can see, Firework CS4 includes many workflow benefits that go above and beyond creating rich graphics and rapid prototypes. You can reuse the same graphics to build out different versions of your projects without wasting any time adjusting files. This means you can create one version of the design and use it across many different applications with minimal effort.

To get more information about creating graphic elements with Fireworks CS4, check out these resources:

• Introducing Adobe Fireworks CS4
• Creating an interactive PDF file from a multipage document in Fireworks CS4
• Introducing the new vector manipulation tools in Fireworks CS4

Be sure to visit the Fireworks Developer Center to access sample projects, articles, and tutorials.

Page 3 of 3

Previous Page