10 May 2010
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:
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:
Figure 2. Selecting the multitouch 320 × 480 device
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)."
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:
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:
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:
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:
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:
Note: If you've moved your panels, you can always restore the default by choosing Window > Workspace > Reset Browse.
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:
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:
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:
<skinDesc ref=""/>tag. You'll find it around line 70, just after the
</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.
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.
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:
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:
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: