Whether you’re a designer or developer, it’s an exciting time to get into mobile development.  A relatively young industry that is full of potential and opportunity.  But it does face the same challenges that other software development projects face, that of communication and workflow.  Figure 9-1 pokes fun at communication and interpretation issues in a software project.
The cartoon in isn’t a far cry from how many companies work.  There can easily be a lack of communication and effective workflow between the project manager, the designer, the developer and the customer.  There are many places where the project can break down. A smart workflow can really help alleviate these pain points so what the client asked for is what the designer designed and is also what the developer executed.  But first it is essential to understand roles of both the designer and developer as well as the tools they use.

The Designer’s Role

The role of the designer is to understand the needs of the client, translate those to the application, and create visual designs for it.  He then needs to repeate this process through iterations.  He discusses with the client how the application should work, how the GUI works to accomplish user stories, and why it works that way.  This is a 2 way street as the client’s input is taken into account as well.  He also adjusts the GUI for my needs.  As the the engineer responsible for creating our application, I’ll run into challenges that I couldn’t have foreseen.  I’ll then give Dean a call, explain my challenges, and discuss ways to solve it.  Sometimes these are compromises, sometimes these are just me getting clarifications on how things are supposed to work.

“Design is the conscious and intuitive effort to impose meaningful order” – Victor Papanek, designer and educator

Adobe Device Central

Adobe Device Central simplifies the creation of content for mobile phones, tablets, and consumer electronic devices. It allows both designers and developers to plan, preview, and test mobile experiences. You can access the latest available device profiles through the dynamically updated online device library and simulate display conditions like backlight timeout and sunlight reflections in the context of device skins to better tune designs for real-world conditions.  Learn more about Device Central.

Using Device Central

Adobe Device Central CS5.5 is integrated with most design programs including Photoshop, Illustrator, Fireworks and Flash, enabling you to leverage handset data and work more productively from inception to final launch of your mobile project.

Creating a New Document from Device Central

Device Central CS5.5 is a good place to start when embarking on a new mobile project. When you launch Device Central, a welcome screen appears.

Click the file type you want to create from the column on the right (see figure 9.10) to start a new project. The message in the center states, “To start, please select device(s) in the ‘Text Devices’ panel.”  Select the Browse button located in the upper right corner.  This will display a list of devices to create and test against. Select the device to test against and drag it to the Test Device panel. Double-click the device name to view the device details.

Selecting a device in the Device Library. Click and drag the device to the Test Devices panel to add it to the devices to test against.
Once you’re ready to create a new file based on the selected profile, double-click the profile from the Test Devices listed on the left side.  Then, select Create from the upper right hand corner.

The new document is automatically set to the correct display size and screen orientation for your target device. Now you’re ready to create your mobile design. It cannot be overstated how versatile Device Central is, nor how much it can increase your productivity.
In terms of organization and productivity, one popular Fireworks feature 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 except Fireworks does this.

Previewing Content in Device Central

When 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 Photoshop, Illustrator, Flash or Fireworks.

1. In Photoshop, select File > Save for Web & Devices…
2. In the lower left corner select Device Central…
3. You will now be able to see how your design might look on various devices.
4. As you view your work in Device Central, you can change device skins by double-clicking different device profiles from the Test Devices panel.
5. You can also adjust the lighting or reflections using the Display panel in Device Central to test your content under different lighting conditions.

Creating custom profiles

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.

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.
3. Type a new name for the profile—for example, type My_Multitouch_320x480—and click OK.

Note that if you plan to share your custom profiles with others, 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.

Adobe Photoshop

Adobe Photoshop CS5 has a strong focus on photography but is also used to create application designs due to its extreme flexibility for design creation and image editing. Adobe Photoshop CS5 has breakthrough capabilities for superior image selections, image retouching, and realistic painting; and a wide range of workflow and performance enhancements.  Learn more about Adobe Photoshop.

Once the design is created in Photoshop, the next step in the workflow would be to bring these graphics into Flash Professional or Flash Builder for further development.  This can be done by exporting each image separately, or importing the Photoshop file (.psd) directly into Flash Professional.

Photoshop to Flash Professional Workflow

One exciting feature introduced in Flash Professional CS3 was the ability to import PSD files (figure 9.9). On import, Flash Professional gives you the ability to determine how you wan to import each layer.  For instance you can import a text layer as editable text in Flash Professional.  Shape layers can be converted to editable shapes in Flash Professional as well.  Even movie clips can be created from raster graphics complete with instance names. Layers in Photoshop can appear as layers in Flash Professional, complete with layer effects that are still editable. Even the position of items can be maintained.  The final result is a complete design in Flash Professional, ready to be animated and further developed for mobile.

Although importing a Photoshop file is extremely easy and helpful, you do have to watch out for a couple of things.  Be aware of the larger file size when importing many layers and consider consolidating them.  For instance, if you have multiple graphics on different layers that make up the background, consider merging those layers in Photoshop before it is imported.  Also, consider drawing vector elements in Flash rather than importing them.  This will give you more control when editing.  If it helps you can even import one graphic from Photoshop that will then be served as a guide while creating all parts as vector elements in Flash Professional.

For instance, if a Photoshop file is fairly complex, with multiple layers that make up the background, consider consolidating those layers into one background layer.  The general rule is that if the graphic doesn’t move see if you can merge it with other graphics.

Photoshop to Flash Builder Workflow

Flash Builder doesn’t import a Photoshop file the way Flash Professional does. Instead, separate images need to be exported from Photoshop. This is most effectively done by separating each element into a separate Photoshop file and exporting the appropriate file type (figure 9.10).

In Photoshop, the best way to export graphics is using the Save for Web and Devices option under the File menu.  This gives you the ability to select the format you want to export as well as see its quality.  In Flash Builder you can then import the appropriate file type whether it’s a JPG, GID, PNG, SWF, or FXG.

Graphic File Formats

There are basically four different file types you can use in Flash apps.  The one you choose depends on the content of the graphic:

• PNG-24 (Portable Network Graphics, 24 bit depth) Probably one of the most popular graphic file type because it allows for varying levels of transparency and it allows for 24-bit color.  There is also a PNG-8 that doesn’t allow for transparency but the file size is even smaller since the color depth is 8 bit (256 colors).
• GIF (Graphics Interchange Format)  An 8-bit file format allowing for as many as 256 colors, which keeps the file size small.  Because of the limited number of colors, GIFs are suitable for sharp-edged line art and flat colors, such as logos. Conversely, the format is not used for photography or images with gradients. GIFs can be used to store low-color sprite data for games.  GIFs can be used for small animations as well, since they can contain multiple frames.  GIF files can also have transparency, but not varying levels of transparency like a PNG-24 file.  Either the pixel in a GIF is opaque or transparent.
• JPEG (Joint Photographic Experts Group) JPG files are commonly used for photographic images. It has lossy compression which means images can be compressed leading to smaller file size with some potential image quality loss.  Compressing images to JPG is a fine balance of maintaining image quality while keeping the file size small.
• FXG (Flash XML Graphics) The XML-based graphics interchange format for the Adobe Flash® Platform enables designers to deliver more editable, workable content to developers for web, interactive, and RIA projects. FXG is planned as a graphics interchange format for cross-application file support.  It is XML-based and can contain images, text, and vector data.  Flash Professional, Fireworks, and Illustrator can all create FXG files.  These files can then be used in Flash Professional or Flash Builder.

All these file formats can be created from most image editing programs. The program used depends largely on what the designer is most comfortable with, but if we take a more objective look you’ll notice each programs has particular stengths when it comes to mobile Flash development.

Adobe Illustrator

Adobe Illustrator helps designers create vector artwork for virtually any project. Illustrator has sophisticated drawing tools, natural brushes, and a host of time-savers built in when it comes to vector image editing.  Illustrator CS5 allows users to create and align vector objects precisely on the file’s pixel grid for clean, sharp raster graphics. Users can also use raster effects such as drop shadows, blurs, and textures and maintain their appearance across media, since the imagery is resolution independent.  This makes Illustrator a great place to start creating graphics regardless of the output. Learn more about Adobe Illustrator.

Illustrator to Flash Professional Workflow

With illustrator you can create mobile designs and convert the individual graphics to movie clip symbols. Each instance of a symbol can have an instance name just like in Flash. The movie clip symbol instances can be copied and pasted into Flash Professional. Flash maintains the movie clips and even the instance names.

Adobe Fireworks

Adobe Fireworks CS5 software provides the tools you need to create highly optimized graphics for the web or virtually any device. Fireworks allows you to create, import, and edit both vector and bitmap images.

Fireworks to Flash Builder Workflow

Once graphics are created in Fireworks they can be exported as most popular graphic formats including the FXG and MXML formats specifically for Flash Builder.  Exporting as the XML-based FXG format helps ensure rich application designs are converted precisely for Adobe Flash Builder. Both are XML-based formats that can contain vector graphics and text that can be opened and edited in Flash Builder (see figure 9.15).  Bitmap-based images are referenced externally.

FXG and MXML created files open in Flash Builder.  Note the reference to text on line 12 as well as the text label properties on lines 5-7. Bitmap images are external from the file. Learn more about Adobe Fireworks.

The Developer’s Role

From a technical perspective the developer is at the most basic level expected to be able to translate designs and technical specifications into an actual functioning application. Additionally, the differentiating skills that separate the good developers from the typical developer are many. However, some of the important ones are below:

• Developing Understanding – Nearly anyone can blindly follow the instructions laid out for them, however, good developers make it a point to understand what they’re doing so that they can identify potential issues and opportunities for improvement at every turn.
• Mastery of Structures and Algorithms  – In software development there isn’t any one “right” way to do things since the same problem can be solved dozens of ways. However, there are ways that are “more right”. Mastering structures means that the problem is solved in the most straightforward manner no matter what the language.
• Specialization — Specialization demonstrates initiative to learn more and to grow which can help to separate a developer from the pack. Mobile specialization makes the developer a valuable employee and resource to any company.

The Developer’s Toolbox

Developers have a relatively limited toolbox. They are expected to be able to use the development environment including compiler and debugger for the language or languages they’ve chosen as well as a handful of the common tools that every member of a development team is expected to know how to use. These tools are typically integrated into one platform that functions as both a compiler and debugger. This is typically the same tool that was used to learn the language so learning a development environment isn’t typically a big challenge. The following development environments are commonly used for mobile Flash development:

Adobe Flash Professional

Adobe Flash Professional CS5.5 is the industry-leading authoring environment for producing expressive interactive content and is the one tool that both designers and developers share. ActionScript® is the coding language that is used and can be written inside the binary FLA file format, which can contain graphics, sounds, fonts, animations, and sometimes video that the designer has added.  Code Snippets were introduced in Flash Professional CS5 and can be used to speed development. ActionScript can also be written in external ActionScript files (.as) which is common to do for the Document class and other object classes.  Often it depends on the project type to determine where ActionScript will be written.  For smaller projects writing ActionScript in the FLA is fine. For larger projects many developers prefer the external ActionScript files to help organize their code.
Flash Professional CS5.5 includes on-stage symbol rasterization to improve rendering performance of complex vector objects on mobile devices. Also, more than 20 new code snippets have also been added, including ones for creating mobile and AIR applications.  Source-level debugging is also possible on Adobe AIR® enabled devices that are connected with a USB cable, running content directly on the device.  Learn more about Adobe Flash Professional.

Flash Professional Workflow

The designer would often either create graphics in Flash Professional or import them from other sources .  The FLA could be used as a prototype in meetings to help discuss with the client, and/or it can be used as the final source.  The net result is as follows:

1. Client request an application
2. Designer creates initial design
3. Designer gives developer an FLA or graphic files
4. Developer programs design and incorporate graphics from Designer’s FLA, or imports designer’s graphic files
5. Client requests changes
6. If design changes, Designer sends new graphic files
7. Developer updates application with new graphics/animations

Flash Builder 4.5

Adobe Flash Builder 4.5 (formerly Adobe Flex Builder) is an Eclipse based development tool for rapidly building expressive mobile, web, and desktop applications using ActionScript and the open source Flex framework. Flash Builder 4.5 allows developers to build standalone Flex/ActionScript applications for one or more mobile platforms (Android, BlackBerry, or iOS). Design and Code views support mobile development using mobile-ready components. Test mobile applications on the desktop using a mobile Adobe AIR runtime emulator, or test on locally connected mobile devices using a one-click process to package, deploy, and launch.  Developers can deploy, package, and sign required resources as platform-specific installer files for upload to a mobile application distribution site or store.

Flash Builder Workflow

Flash Builder can import many popular graphic file formats (see figure 9.17). The content should determine what type of file will be used.  For photography, JPG can be used.  If there is animation, an SWF file would be needed.  The file format that probably has the most flexibility is the FXG file format.  It is an XML based format that exposes a lot of the content, enabling the developer to edit further or enable dynamic changes if needed.

Using Flash Builder the Flex framework, things are slightly different from the FLA workflow.  First off, there is no FLA.  Flex is just like traditional web development.  All of your files are in a folder, and it’s up to the developer to organize them, and check all of them into source control (if one is being used).  The code is also exposed and organized in appropriat folders as well, either as MXML (Flex Framework) files or AS (ActionScript) files.  As such, Designers currently have no way to easily play in their own design “sandbox”, like they could using their own FLA using Flash Professional.  This has both pros and cons.  The pros are that no designer can edit what a developer has done.  The con is the designer cannot check out his or her design.  It is up to the developer’s skillset and preference to determine whether a Flash Builder or a Flash Professional workflow will be used.

Workflow Can Make or Break a Project

A great workflow can really make the difference between a project succeeding and a project failing. You can have the best designers and developers on a project, but if they can’t effectively work together and exchange ideas and assets all could easily be lost.  What the designer envisioned might not be what the developer executed and what he project manager explained might not have been what was originally asked for in the first place.  You can easily see where a project can break down in many places.  A good workflow can alleviate many pain points in a process and can easily determine whether a project is a success or not.