Chapter 9

The Designer-Developer Workflow

Whether you're a designer or developer, it's an exciting time to get into mobile development, a young industry that is full of potential and opportunity. But the mobile development industry does face the same challenges that other software development projects face, those of communication and workflow. Figure 9–1 pokes fun at communication and interpretation issues in a software project.The cartoon isn't a far cry from how many companies work. A project could have many actual requirements, yet most of the people involved will articulate only those requirements that concern or interest them.

images

Figure 9–1. “How projects really work” from www.projectcartoon.com1 licensed under Creative Commons Attribution 3.0 Unported License: http://creativecommons.org/licenses/by/3.0/

__________

1 “How projects really work”, http://www.projectcartoon.com, July 24, 2006

There are many places where the project can break down. A smart workflow can really help alleviate these pain points, so that what the client asked for is what the designer designs and what the developer executes. But first it is essential to understand the roles of the designer and developer, as well as the tools they use.

The Visual 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. The designer 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 two-way street, as the client's input is taken into account as well. The designer also adjusts the visual design for the developer's needs. Sometimes the developer can foresee technical challenges that the designer isn't aware of, in which case they can and should collaborate on ways to solve the problem. Sometimes the collaboration is just clarification of how things work. Other times it can lead to a compromise between design and technical limitations.

“Design is the conscious and intuitive effort to impose meaningful order.”

–Victor Papanek, designer and educator

Starting in 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 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 tune designs for real-world conditions.

Tip For more information, see www.adobe.com/products/devicecentral.html

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 (see Figure 9–2).

images

Figure 9–2. Launching a new Fireworks document from Device Central CS5; the Captivate and Fireworks file formats have been added since Device Central CS4.

  1. Click the file type you want to create from the column on the right (see Figure 9–3) to start a new project. The message in the center states, “To start, please select device(s) in the ‘Text Devices’ panel.”
  2. Click the Browse button, located in the upper right corner. This will display a list of devices to create and test against (see Figure 9–3).
    images

    Figure 9–3. Browse devices in the device library and sort by name, display creator rating or search for a specific device.

  3. Select the device to test against, and drag it to the Test Device panel.
  4. Double-click the device name to view the device details (see Figure 9–4).
    images

    Figure 9–4. Click and drag the device to the Test Devices panel to add it to the devices to test against

  5. 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, click Create in the upper right-hand corner (see Figure 9–5).
images

Figure 9–5. Double-click the device profile from the Test Devices panel. Click Create in the upper right to create a new document based on that profile.

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 helpful Device Central is when it comes to profiling devices and simulating how content will look. This helps speed the design workflow and sure does beat buying many different devices.

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 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 images 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(see Figure 9–6).
images

Figure 9–6. Previewing a design on a Samsung Galaxy S in Device Central, with Indoor Reflections selected

Creating Custom Profiles

There are several reasons 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.
  2. If you've moved your panels, you can always restore the default by choosing Window images Workspace images Reset Browse.
  3. Right-click the Flash Player 10.1 32 320×480 Multitouch profile, and select Create Editable Copy (see Figure 9–7).
  4. Type a new name for the profile—for example, type “My_Multitouch_320×480”—and click OK.
images

Figure 9–7. Creating an editable copy of a profile

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

On the 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 time-saver 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.

TIP: For more information, see www.adobe.com/products/photoshop.html

Once the design is created in Photoshop (Figure 9–8), 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.

images

Figure 9–8. An app design created in Adobe Photoshop CS5, complete with a shape layer, text, and smart objects, just to name a few

Photoshop to Flash Professional Workflow

One exciting feature introduced in Flash Professional CS3 is the ability to import PSD files (Figure 9–9). On import, Flash Professional gives you the ability to determine how you want 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.

images

Figure 9–9. The original Photoshop file, imported into Flash Professional; each layer can be imported differently, maintaining text, shape layers, and even layer effects.

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 to serve as a guide while creating all parts as vector elements in Flash Professional.

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 its own Photoshop file and exporting the appropriate file type (Figure 9–10).

images

Figure 9–10. Individual graphics in separate PSD files ready to be exported as a PNG, JPG, or GIF. Be sure to keep the original PSD file in case changes need to be made later.

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 (Figure 9–11). In Flash Builder, you can then import the appropriate file type, regardless of whether it's a JPG, GID, PNG, SWF, or FXG.

images

Figure 9–11. Exporting a graphic from Photoshop using File images Save for Web and Devices

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)

PNG-24 is probably one of the most popular graphic file types for rich graphics because it allows for varying levels of transparency and 24-bit color. There is also a PNG-8, which 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)

GIF is 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. Every pixel in a GIF is either opaque or transparent.

JPEG (Joint Photographic Experts Group)

JPG files are commonly used for photographic images. This format has lossy compression, which means images can be compressed, leading to smaller file size, but this may cause some loss of image quality. 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 used 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 (see Figure 9–12).

images

Figure 9–12. An FXG file open in Flash Builder that contains vector, text, and bitmap data

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 that each program has its own particular strengths when it comes to mobile Flash development. The FXG format, for instance, is flexible, exposing the various text and vector graphic elements to the developer in Flash Builder. The PNG-24 file format is great when the designer needs pixel-perfect graphics with varying levels of transparency. The JPG format is great if it's a photo with a variety of colors and shades and when transparency isn't needed. Lastly, GIF is great for really flat graphics, like logos.

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 take advantage of 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.

TIP: For more information, see www.adobe.com/products/illustrator.html

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 (see Figure 9–13).

images

Figure 9–13. In Illustrator (left), you can create movie clip symbols that can be copied and pasted directly into Flash Professional (right). Symbols and instance names are maintained.

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 (see Figure 9–14), they can be exported in most popular graphic formats, including FXG and MXML, specifically for Flash Builder. Exporting in the XML-based FXG format helps ensure rich application designs are converted precisely for Adobe Flash Builder. Both FXG and MXML 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.

images

Figure 9–14. Screen design in Fireworks

images

Figure 9–15. 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.

TIP: For more information, see www.adobe.com/products/fireworks.html

The Developer's Role

From a technical perspective, the developer is expected to be able to translate designs and technical specifications at the most basic level into an actual functioning application. Good developers differ from their more average colleagues in many ways. Some of the important ones are as follows:

  • Developing understanding: Nearly anyone can blindly follow the instructions laid out for them, but 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 application architecture: In software development, there isn't any one “right” way to do things since the same problem can often be solved dozens of ways. However, there are usually some ways that are “more right” than others. Mastering well-known data structures and application architectures means that the problem is solved in the most straightforward manner and the application is architected in the most flexible and efficient way possible.
  • Specialization: Specialization demonstrates the will to keep learning and to grow, which helps to differentiate a developer from the pack. A special mastery of mobile development techniques makes the developer a valuable employee and resource to any company.

The Developer's Toolbox

Developers have a limited toolbox. They are expected to know the development environment (including compiler and debugger) for the language or languages they've chosen, as well as a handful of common tools that every member of a development team needs 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 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 routinely done 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 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 been added, including ones for creating mobile and AIR applications. Source-level debugging is possible on Adobe AIR–enabled devices that are connected with a USB cable, running content directly on the device.

TIP: For more information, see www.adobe.com/products/flash.html

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 show the client how the final application will work, and/or it can be used as the final source. The net result is as follows (see Figure 9–16).

  • The client requests an application.
  • The designer creates an initial design.
  • The designer gives the developer an FLA or graphic files.
  • The developer programs the design and incorporates graphics from the designer's FLA, or imports the designer's graphic files.
  • The client requests changes.
  • If the design changes, the designer sends new graphic files.
  • The developer updates the application with new graphics/animations.
images

Figure 9–16. A typical client, designer, developer workflow

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 stand-alone 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 FXG. 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.

images

Figure 9–17. Importing a graphic file into Flash Builder

When using Flash Builder with 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 appropriate folders, 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 with 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.

Summary

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 the 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 failure.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.219.81.43