Mobile workflows using Fireworks CS5 and Device Central CS5

As mobile devices, platforms, and app stores proliferate, it's more important than ever to have the latest device information at your fingertips. Adobe Fireworks CS5 is integrated with Adobe Device Central CS5, enabling you to leverage handset data and work more productively from inception to final launch of your mobile project.

In this tutorial I'll show you how to harness the power of Fireworks combined with Device Central in these common workflows:

• Launch new documents with the right display size and screen orientation
• Preview your mobile project (website, widget, application, and more)
• Create custom device profiles

Device Central CS5 is a good place to start when embarking on a new mobile project. When you launch Device Central, a welcome screen appears (see Figure 1).

Figure 1. Launching a new Fireworks document from Device Central CS5 (click to watch the demo)

As you can see, two new links—Captivate File and Fireworks File—have been added since Device Central CS4:

1. Click Fireworks File to start a new project. In addition to a plain gray screen with the message "No Devices Selected", in the upper left corner you'll see the Test Devices panel, which shows the default devices organized by Flash Player runtime version.

Figure 2. Selecting the multitouch 320 × 480 device

2. In the Test Devices panel, click the Flash Player folder to populate the center panel with the device profiles listed inside.
3. In the center panel, click once on the Multitouch 320 × 480 device to select it
4. Click Create to launch your new document in Fireworks CS5. (Alternatively, you can double-click individual profiles in the center panel instead of clicking Create.)

As you can see, the new Fireworks document is automatically set to the correct display size and screen orientation for your target device. Now you're ready for the fun part—creating your mobile content!

Recently, a friend and colleague had this to say about Fireworks CS5 on Twitter:

"...My vote for most under-appreciated Adobe app (and my fave design tool)."
— @bryanrieger

I cannot overstate how versatile this application is, nor how much it can increase your productivity. Although demonstrating each key feature is beyond the scope of this article, I would like to mention some of my favorites.

In terms of organization and productivity, one of my favorite Fireworks features is the ability to create multiple pages with varying dimensions, screen orientations, and even document resolutions all in a single file. This means that you can easily work on portrait and landscape layouts at the same time, which is really handy when targeting multitouch devices and using the accelerometer. You can even save application icons alongside your main content in the same file. No other Adobe product does this.

Other features that really increase productivity include:

• Master pages
• Shared layers
• Symbols
• Document library (where your symbols are stored)
• Custom commands
• 9-slice scaling

If you're designing for mobile devices, there are points in the process where you may want to preview your work in the context of an actual handset. The quickest and easiest way to do this is to launch a preview from within Fireworks:

1. Select the page in Fireworks that you would like to preview in Device Central.
2. Click File > Preview in Device Central (see Figure 3).
3. As you view your work in Device Central, you can change device skins by double-clicking different device profiles from the Test Devices panel.
4. You can also adjust the lighting or reflections using the Display panel in Device Central to test your content under different lighting conditions.

Figure 3. Previewing a single layout across multiple devices (click to watch the demo)

If you want to interact with your content and record the results for your colleagues or clients to review, here's an alternative workflow:

1. In Fireworks choose File > Export.
2. In the Export dialog box, select All Pages (see Figure 4) and click Export.
3. From Device Central, choose File > Open and then select index.html (or your start page).
4. Use your mouse to click hotspots or links within your prototype.

Figure 4. Selecting All Pages as an export option to generate a quick prototype that you can preview in Fireworks

In Device Central you can also take snapshots as you go to quickly create a storyboard or paper prototype—without writing a single line of code. Click Save to publish your snapshots as an HTML package (see Figure 5) that you can share instantly with colleagues and clients over the web.

Figure 5. Publishing your snapshots as an HTML package

There are several reasons why you may want to create custom device profiles:

• You notice discrepancies between what is displayed in the Emulation workspace on the desktop and what you see on an actual device
• You want to modify the device skin for presentation purposes (for example, to remove or add an operator logo)
• You manufacture devices and need to create a new profile (once the device ships, the custom profile can be distributed to the community)

The first step in creating custom profiles is making a copy of an existing device profile to use as a template. I recommend picking something as similar as possible to the custom profile you want to make. The more similarities between the original profile and your custom one, the less work you'll have to do in editing individual data points later.

In this tutorial I suggest using the Multitouch 320 × 480 device profile from the default Flash Player group, but you can use any of the profiles from the online device library:

1. In Device Central, click Browse (in the upper right hand corner) so that you are in the Browse workspace.

   Note: If you've moved your panels, you can always restore the default by choosing Window > Workspace > Reset Browse.

2. Right-click the Flash Player 10.1 32 320×480 Multitouch profile and select Create Editable Copy (see Figure 6).
3. Type a new name for the profile—for example, type My_Multitouch_320x480—and click OK.

Figure 6. Creating an editable copy of a profile

Important: If you plan to share your custom profiles with the community, give them names that are both unique and descriptive. Also, fill out all of the fields as completely as possible. This is an obvious best practice to help grow an accurate and complete dataset for the mutual benefit of the entire community.

At right you should now see a circle with a pencil just above the device skin indicating the profile is now editable. Similarly, when you hover the pointer over any of the attributes, such as Input Controls or Languages, the same pencil icon appears. If an attribute does not display a pencil icon on hover, it is not editable.

Next, you can edit the device profiles directly from Device Central CS5:

1. Hover the pointer over Languages; the pencil icon appears, indicating this attribute is editable.
2. Click Languages and select the languages you want to display.
3. Click the check mark to confirm your selection.

The languages you selected should now be displayed in your custom profile.

Repeat these steps to edit all of your custom device profile information right from within Device Central. This easy and direct method of editing profile data from the interface is a real timesaver and a vast improvement over earlier versions. However, there is one edit that can't be performed from the interface—the device skin.

In the next section, I'll explain how to change it back from the 5-way nav (the default) to that of the generic multitouch device. This process may also come in handy later if you need to edit or create new skins for client review.

Each time you install a device profile from the online library, Device Central copies several XML files to your machine. This is also where any changes you make to profile information are stored. When you copied an existing profile, the XML copy lost its link to the graphics that make up the multitouch skin. (Adobe is aware of this and is fixing it for the next release.)

Unfortunately, the path to device skins is not available via the user interface. So the first step is locating the XML file where you can make the necessary change. The XML file you need to edit is located within the Devices folder on your machine. To locate the Devices folder refer to the following paths:

• Mac OS: HD|Users|[User]|Library|Application Support|Adobe|Adobe Device Central|Devices
• Windows XP: C:\Documents and Settings\[User]\Local Settings\Application Data\Adobe\Adobe Device Central CS5\Devices
• Windows 7 and Vista: C:\Users\[User]\AppData\Local\Adobe\Adobe Device Central CS5\Devices

Within the Devices folder the XML file for the new profile will have a randomly generated name—for example, cx_115236455135.xml. If you don't see it right away, try sorting by the date/time stamp to identify the XML file that was most recently created.

After you've located the file, follow these steps to restore the skin:

1. Open the XML file in a text editor (or Dreamweaver).
2. Search for the <skinDesc ref=""/> tag. You'll find it around line 70, just after the </displays> and </coredata> ending tags. As you can see by the empty quotes, the new profile has lost its link to the generic multitouch skin already installed on your computer. When this reference is missing, Device Central automatically uses the default skin, which is the 5-way nav.
3. Type Generic_Multitouch_320x480_Main in the quotes within the skinDesc tag:

Note: If you've copied a device profile other than multitouch, you can use this same technique. Simply open the original XML file (the one belonging to the device profile used to generate an editable copy), locate the skin description reference tag, and copy and paste this reference back into the empty <skinDesc ref=""/> of your new XML file.

4. Save your changes.
5. Close Device Central and restart it to view your new profile with the generic multitouch skin displayed.

As you can see, when making an editable copy of a device profile, you're really duplicating an XML file that contains a vital link to a folder of graphics that make up the device skin.

If you want to further edit the graphics that comprise the actual skin, I recommend that you employ the same technique as used before: make a copy of the folder containing the skin art you want to change, rework the graphics inside, then make sure your custom XML file points to this new folder using the skin description tag, for example:

With Device Central CS5 it is easy to share your custom profiles with colleagues, customers, and the global designer/developer community. Follow these steps:

1. Make sure you are still in the Browse workspace in Device Central.
2. Right-click your custom profile and select Share Device Profile (see Figure 7).
3. Type your Adobe login credentials and click OK.

Figure 7. Sharing a custom profile from within Device Central

Once you've logged in successfully, the new profile is automatically uploaded to the server.

As you make further changes to custom profiles you've shared online, be sure to click the upload icon (see Figure 8) so that the latest changes are sent to the server. Custom profiles are not automatically synchronized, which gives you to the opportunity to test them adequately before distributing them to a wider audience.

Figure 8. Clicking the upload icon to republish the modified version

Important: When sharing device profiles, only the XML file is copied to the server. If the main XML file refers to custom graphics or other files on your system, these items will not be included in this operation. (That is, if you've created custom device skins to go with a custom profile, they will not be uploaded to the server.)

If you want to remove device profiles that you've published to the online library, simply follow these steps:

1. In Device Central, make sure you're in the browse workspace.
2. From the Filter panel, click the Shared Filter to identify the profiles you've shared.
3. From the Devices Library on the right, click the profile you want to remove.
4. Choose Devices > Withdraw Device Profile.

Note: Removing a shared profile from the online library does not delete it from community members' local machines, nor prevent further use of the profile. So, I recommend publishing only those device profiles that you've tested thoroughly and deemed fit for public consumption. If you want to share proprietary profiles with colleagues or vendors, for example, this is best done over a private network.

In this tutorial, I've described several new mobile workflows using Fireworks CS5 and Device Central CS5. By using these workflows you can leverage device profile information and automate common tasks. More importantly, you can reduce production time and focus on creating your content.

If you'd like to see these workflows in action, check out the screen-based tutorials I created for this article (linked to throughout the article).

Check out these related links to resources in the community:

• Fireworks template for Android (PNG)
• DroidSans/DroidSans-Bold.ttf (fonts for Android)
• Smartphone templates (PSD; includes Android, HTC Dream, HTC Hero, iPhone, Motorola Droid, Nexus One, and Palm Pre)
• Interaction design using Fireworks (Adobe TV)
• Rapid prototyping in Fireworks (Adobe TV)