CONTENT CREATION GUIDELINES
| So now that you know what the Flash Player for Pocket PC is, what it can and cannot do, and what devices it can run on, it's almost time to dig in and start creating some great content. But first, let's review some of the guidelines for creating content. After that, we'll put it all together and create an application. Movie SizeWhen starting Flash, it's usually a good idea to set the movie size right away. To set the size of the movie, choose Modify, Modify Document (see Figure 2.2). In most cases you'll need to set the dimensions to 240x240 (this allows the address bar in Pocket IE to be activated, but the scroll bars will not be visible). Or set the dimensions to 240x263, which assumes that the address bar will not be visible. After a few years of deploying content to Pocket PCs, we've found that most users have the address bar down by default and 240x240 is the safest bet. Later on we'll show you how to use a template to make this easier. Figure 2.2. Setting the document properties. If you need the extra 23 pixels, be sure to include instructions to the users, which could be something like this: "If the scroll bars are visible, go to the View menu in Pocket IE, uncheck Address Bar and then press the Refresh button." This of course is pretty confusing and most users will just try to look at your content with big scroll bars, which is often undesirable. If your application's dimensions are too large and will always require scrolling, you can modify the Registry in the Pocket PC to reduce the size of the scroll bars from 20 pixels to something smaller. See the "Advanced Topics" section in this chapter for changing Registry settings on the Pocket PC. Frames Per SecondLater on in this chapter we'll dig into how fast these little Pocket PCs can run Flash content. Running at 206MHz on a StrongARM processor you can expect 8 to 15 frames per second to be the consistent playback rate. As a general rule, you should set your frames per second to 12 to ensure the most consistent playback. Now that we're all set up, let's talk about the user interface elements when creating content for the Pocket PC with Flash. The User InterfaceWith Flash for the Pocket PC it's sometimes a challenge to create interface elements that are familiar but also do not confuse the user. For example, a home button in your application may be confused with the home button in Pocket IE. If your application is a portable version of a desktop application or web site the user has already used, be sure you're not simply resizing the interface and assets, but optimizing the content for the Pocket PC.
One of the major differences (or challenges) between user interaction on a device (as opposed to the desktop) is that when users are interacting with a device, they're often in "application-mode" and don't think the content you've created is a web site. It's important to manage those expectations in the applications you create. One of the common phrases you'll hear throughout this chapter is "self-documenting." This means that the interface should be obvious when the user interacts with it. People want to spend time using your application, not learning it. Can your application be handed to a variety of users and can they immediately start using it? Having clearly marked buttons isn't always the sure-fire way to accomplish this. Ideally, after creating your application, break down what tasks are to be performed and test with a group of users to obtain feedback. Usability doesn't mean a bunch of gray buttons with labels on all of them. Usability means a common sense approach to application design. Take a look at ATMs, video game consoles, and appliances where there are limited methods of input and what ways the developers have solved those issues. With Flash for the Pocket PC, the primary way to input information is a stylus. Take a look at other applications on the Pocket PC, as well as Palm applications, for a well rounded view of what developers have created for scrolling lists, icons, buttons, pop-down lists, and other user interface elements. Also, Flash for Pocket PC isn't the best tool for everything, really. For example, many applications may consist of a Flash menu system and branch off to HTML pages with large amounts of text. Flash isn't best suited for displaying full screens of text and performance can be dramatically affected. Try to avoid more than three or four paragraphs of texts if possible. Flash can link to HTML pages using the getURL actions and HTML pages can link directly to pages with Flash applications; often the best applications are a combination of the two. Pocket Internet Explorer cannot support pop-up windows, so be sure to provide links directly to the page or have some type of device detection scheme.
Intros Don't Do ThemOkay, don't use intros, ever. Unless there's an amazing reason to have an intro, it's not needed. Does a user need to see an intro to Microsoft Word before he starts using it? No. So there's a good chance your application does not need one as well. But let's say you had to, and in some cases such as gaming, entertainment, design portfolios, and branding exercises an intro is desired. Be sure to use a cookie so that if the user does decide to skip the intro, that information is recorded. See Chapter 8 for more information on using cookies with Flash. Build OnceIf you've used Flash on a regular basis, you're quite familiar with the Symbol Library. The Library allows developers to store assets that can be used without re-creating the content and thus increasing file size. The nature of Flash allows developers and designers to reuse assets very easily, and when working on a desktop project, it's often possible to reuse many of the same symbols, graphics, and movie clips for the device applications created. When planning and strategizing projects, break the content into as many standalone pieces as possible. Each reusable piece saves time and can positively impact development, QA, and authoring time. Some good examples you're bound to use over and over (trust us on this): zoom in and zoom out buttons, scroll bars, progress bars, loading screens, pop-down lists, date and time widgets, radio buttons, forms, keyboards, sliders, volume buttons, and VCR-style controls. Between the examples in this book, Macromedia Exchange (www.macromedia.com/exchange), and the flashenabled.com site, many of these are already available. Input MethodsThe Pocket PC supports various methods of input: stylus, software keyboards, hardware keyboards, hardware buttons, and also voice commands with third-party software. The stylus is similar to a mouse in function, but operates like a pen or pencil. Function keys on the Pocket PC are not supported; try to avoid using those when possible. Also try to avoid creating content that requires a key press when possible because popping up the keyboard causes scroll bars to appear over your content (see Figure 2.3). Figure 2.3. Some input methods on the Pocket PC cause scroll bars to appear and cover the content. ButtonsThere are two major considerations with creating buttons on the Pocket PC using Flash. First, there is not a pointer or mouse, so everything is considered a mouse click. There aren't rollover states; in fact these should be removed since a rollover state will "stick." The other important consideration is defining the hit state size. Be sure to make larger-thannormal hit states for the buttons. On the desktop, having to click a few more times is not perceived as a performance issue; on the Pocket PC it would be. Also be sure (when possible) that the buttons can be activated with a finger because that is a commonly used method of input. Because the Pocket PC, or any PDA for that matter, will always have a less powerful processor and be dependant on batteries, try to avoid blinking, pulsing, rotating, or animated buttons when possible unless it's necessary to the application. Basically, anything that is CPU intensive. Also, stop loops and animation when they are no longer needed. Many applications created on the Pocket PC will work with other applications on the device, such as email, PIM, calendars, and so on. If you're going to use icons to represent these applications, try to use icons the user is familiar with. If you're going to use icons to represent functionality, such as send, email, next, back, and so on, try to use well-recognized icons or icons based on often-used iconography, if possible.
Right-Click MenuPressing and holding down with the stylus in non-hit areas (areas without a button) will cause the right-click menu to appear in your application (see Figure 2.4). There are two settings for menu items in the Flash Publish settings: Show Menu On or Off. Figure 2.4. The Flash Player menu. Although it appears the menu can be turned completely off, it cannot. Even with the off setting it will still display "About Macromedia Flash." To turn off the menu completely (in some cases it may be a requirement for a project), place an invisible button under the content area. To disable the right-click menu:
"Stacking" the DeckBecause we pretty much only have 240 pixels of both width and height to work with, it's important to have a strategy for displaying information in a useable way. If you've ever developed content for cell phones you may be familiar with the "deck" model. Basically, much like a stack of cards, only one "card" or screen is viewed at any given time. Scrolling could kill a processor, and because Flash needs to move shapes, animations, and more, it's best not to scroll to avoid sluggish performance. Also, unlike the desktop, the Pocket PC cannot pop open new windows inside Pocket Internet Explorer. Most of the examples in this chapter, as well as this book, use the deck model to create the space needed for the content and applications (see Figure 2.6). Figure 2.6. Stacked example, currency calculator. One of the many benefits of using Flash for Pocket PC development is that Flash has a built-in deck model from using scenes, to keyframes, to built-in next and back navigation aids, the authoring environment enables you to create applications fairly easily. Progress IndicatorsSome applications for the Pocket PC will be transferred over a wireless network and others will be loaded from a variety of storage cards. In most cases, you will not know how the content will be accessed, and in some cases, at what speed it may be necessary to create a loading screen. You don't want the user to get a blank screen with no clear indication of what's going on. In some cases where the movie is very large, a progress indicator is needed, in other cases a flashing loading screen will do, and in others a game such as tic-tac-toe may help to pass the time. Ideally, the best loading schemes are the ones that users never notice. FormsIf your application requires submitting data through forms, it might make sense to use Flash for the Pocket PC. There are some cases where it makes sense, but in most cases using forms inside HTML forms are usually more effective. Flash does offer acceptable support for forms and for creating elements normally found inside forms, such as drop-down lists, radio boxes, and so on. With pen-based input it may be okay to use Flash, but there are some instances where the user may have a hardware keyboard plugged into the Pocket PC and tabbing between fields in Flash is fairly tricky. For more information on the tab order of the Flash Player visit: www.macromedia.com/support/flash/ts/documents/tab_order.htm. One challenge with Flash on the Pocket PC is when developers and designers create custom forms, the users don't always recognize these somewhat form-like interface elements as forms. There are some things you can do when creating forms inside Flash to help the user with the forms you have created. Try to put a blinking cursor in the first entry field by using the following ActionScript from these steps on an editable text field:
Another tactic is to label the form with a button or label that states "Please fill out this form." When possible try to make web forms in Flash look like web forms in HTML it'll make the application more usable and less confusing. One clear advantage of Flash is its ability to submit form data to a server without (re)loading a page. (We like to refer to that as a destructive refresh.) For example, you can have a shopping cart, wireless application, or other data-submitting application and the data can be posted without the page going completely away and a new page loading back in. Fonts and TextThis is perhaps the most important part of your Flash applications and content for the Pocket PC. Flash will anti-alias fonts by default on the desktop and that's usually okay. For a device it's important to know what fonts look good on the screen, which native fonts can be taken advantage of, and when to use other fonts such as pixel fonts for super crisp text display.
Pocket PC 2002 includes the built-in fonts you see in Figure 2.8. Figure 2.8. The Pocket PC 2002 built-in fonts. When possible, use these fonts when authoring. Also, when using these, check Use Device Fonts in the Text Options panel (Window, Properties), as you see in Figure 2.9. Figure 2.9. Using device fonts in the Properties panel. When installing the Microsoft Reader for desktop or laptops, these fonts are included when installing the Reader application. To download the Microsoft reader for desktop visit: www.microsoft.com/reader/download.asp. It's worth noting that ClearType does not work on the device fonts inside Flash on the Pocket PC, even when using forms, and the fonts are device fonts. For more information on ClearType visit: www.microsoft.com/typography/cleartype/default.htm. Small Fonts are Blurry and Hard to Read on Pocket PCs in FlashSmall fonts can become blurry in the Flash content on the device, making them difficult to read. By default, text used in Flash is anti-aliased. Anti-aliasing is also referred to as smoothing. Anti-aliasing makes bitmaps and vector graphics display better onscreen, but can make small fonts unreadable in most cases, particularly on devices. One solution is to use an input text field instead of a type block. Text used in text fields does not anti-alias by default. To use an input text field, highlight a text field on the stage and select Input Text (Window, Properties). An input text field displays small text much crisper than a type block. Additionally, using text fields to display text will decrease file size, because font outlines are not enclosed in the rendered movie. It's important to note that you'll need to block the user from being able to input text with an invisible button or similar method. Another technique is to use static text but to use the Use Device Fonts option (Windows, Properties). Depending on the type of application you're creating, the user may want to select text and cut and paste to other applications on the Pocket PC. To make text selectable, check the Selectable box in the Text Options panel. This technique should only be used with the included fonts on the device, such as the included fonts with the Pocket PC (Tahoma, Courier, Bookdings, and Frutiger). As previously stated, Flash is usually not the best medium for displaying large amounts of text, and other media, such as HTML, plain text, Microsoft Reader, Adobe Acrobat, or word processor documents, should be considered. Pixel FontsOne of the best solutions is to use pixel or bitmap fonts. These fonts work well at small sizes because they do not anti-alias. See Chapter 4 for a complete discussion of how to use, and even make, bitmap fonts.
Colors on the Pocket PC and FlashOne of the main reasons businesses and consumers are attracted to the Pocket PC is because of its ability to display rich content, such as images and video. All current Pocket PC 2002 devices can display at least 4,096 colors. However, most display 65,535 colors. The grayscale Pocket PCs cannot run the Flash Player. Be sure to check the device manufacturer to see how many colors are supported by the device(s) you're targeting. Because not all Pocket PC devices have the same display color depths, as a developer/ designer you should be aware of the device limitations. You can be assured that the colors you use from the two color ramp files available on the accompanying CD-ROM will display correctly on devices that can only display 12-bit color (4,096 colors). One of the color ramp files is a color rainbow and the other is a grayscale gradient. There is not much of a need to worry about a palette when targeting devices that display 16-bit (65,535) color.
When choosing colors and palettes for Flash applications for the Pocket PC, choose highly contrasting colors when possible. The tiny displays are not as advanced as desktop monitors and often have low contrast ratios. Use graphics that have a high contrast ratio between colors and that have crisp edges in the details of the picture. We will go over when and how to use bitmapped graphics in the "Importing a Sequence of Bitmap Images" section. Vectors and OptimizationThe way Flash works (both on the desktop and Pocket PC) is that you're basically getting the recipe of the cake and baking it on-the-fly. This is much faster than trying to jam a big cake down a small pipe, like a 28.8 modem. That said, the more recipes you get, the slower things can get. Because the processors of these Pocket PCs (206MHz) are less than half as powerful than most desktop machines, the processor of the device can be easily taxed when rendering graphics and animations. The more curves in your application, the more processor cycles it will take to display your content. Limiting the number of curved sections of your shapes and content inside your Pocket PC application will not only reduce the file size, but will also reduce the processor utilization of the application. Flash has a built-in optimizer to help do this.
Many applications for the Pocket PC might not need all the assets created in Flash. For example, mapping applications are often displayed better and perform more acceptably when importing a GIF. There are a few reasons for this. Flash doesn't need to draw every line, shape, and curve of the map; the GIF is not anti-aliased (smoothed). There are some drawbacks; zooming in and out will make the map appear chunky, so you may want to consider another version of the map for when the user zooms in or out. In some cases, images or transparent versions of the object you plan to move may be better to use for animations. For large animations with large amounts of motion it's often a good technique to smooth motions and keep the static areas crisper, with more curves. Also, in some cases, it's acceptable to create a "blurred" bitmap of an object in motion to make the Flash shape appear more fluid. Please check out Chapter 6, "Creating Motion Graphics and Character Animation for the Pocket PC Using Flash," for more information. Image CompressionFlash has built-in global compression settings in the Publish Settings area (File, Publish Settings). To control JPEG compression, in the Publish Settings, Flash tab, adjust the JPEG Quality slider or enter a value (see Figure 2.11). Figure 2.11. The Publish Settings image compression. Lower image quality produces smaller files; higher image quality produces larger files. Try different settings to determine the best trade-off between size and quality. Imported GIFs are not compressed; they retain their compression settings from import. Usually after an application is complete, it's common to export two to three versions with different compression settings to compare the quality on each device. Often you can reduce the file size by 20 30% without any noticeable quality loss. You can compress graphics on a Pocket PC more than the desktop without noticeable image quality loss because the lower quality screens Pocket PCs have as compared to their desktop picture tube / LCD monitors. This is one of the few times a poorer quality screen can be used as an advantage.
Multimedia ElementsOn to the good stuff the stuff dreams are made of. Well, at least the dreamy rich multimedia elements that make a Pocket PC more than just an organizer when using Flash. SoundThe Flash Player for Pocket PC is an ideal way to deploy portable music videos, mobile entertainment, learning applications, help systems, language aids, and animations, while also protecting the content by embedding links and purchase information right in the content (see Figure 2.12). Figure 2.12. Multimedia content with sound in Flash for the Pocket PC. Do plan carefully when thinking of putting all the multimedia content inside your Flash application on the Pocket PC. Sometimes, it's better to use multiple applications together, such as the Windows Media Player for video and music. For most Pocket PC application-based content, less sound is often better unless the application specifically relies on it. Playback of sound requires large amounts of processing power to uncompress sound data and it also consumes precious power resources. Compressed sound is much like a folded up piece of paper; the more it's folded, or compressed, the greater the effort to unfold it. Most Pocket PC users have the sound muted or it's turned on and off based on the power settings at the time. It's important to provide instructions to the user if the Flash movie requires the use of sound. Test the device to determine playback quality of the sounds that are to be used and that require very clear playback. Often the tiny speakers of the Pocket PC, as well as not so great headphones, might not be ideal for your application. Also, some Pocket PCs have the speaker underneath the directional pad, which can muffle sound. The Flash Player for Pocket PC supports volume adjustment as well as panning from right channel to left channel (the user may need headphones for that feature as most devices only have one built-in speaker). On the Flashenabled.com/book web site we've included volume and balance components to use with your application. Because most users will not want to manage sound in two places, your application and the device's settings, it's not recommended you create your own volume and balance controls unless it's for a standalone Flash application for the Pocket PC. The user must also have the volume turned on for these components to work; Flash for Pocket PC cannot turn on the volume if the device is muted. Using Sound Inside Flash for the Pocket PCFlash can import audio to use with your Pocket PC applications in the following formats: AIFF, WAV, and MP3. Generally, AIFF is for Macs, WAV for PCs, and MP3 is universal. For the most part, developers usually use MP3s inside Flash for authoring due to its quality and high compression ratio. Getting audio from sources requires an audio capture/compression program such as SoundEdit, Sound Forge, QuickTime, and so on. After you get your sound into the format that you want, you're ready to import it into Flash. It's a good idea to start out with the best quality sound when importing the sounds into Flash. The initial compression settings do not matter until the Flash is compiled and the sound setting in the Publish area are applied (File, Publish Settings). To import a sound into Flash, use the File, Import menu; when imported the sound is placed in the Library (Window, Library). The sound can be used as a streaming sound track on stage or for an event-based sound such as a button click. In most cases you'll want to set the sound to stream for sync'ed playback (see Figure 2.13). Figure 2.13. Imported sound set to stream. You can use the built-in editing tools inside Flash to manage and edit many of the sounds you import. But, it's often better to do a majority of your sound editing outside Flash in a tool specifically designed for sound. Flash allows looping, which means you can take a small file and loop it many times to give the appearance of a continuous sound (see Figure 2.14). This saves on file space on the device and/or download times, but it can be really annoying to the user. Make sure to provide a "mute all sounds" button when possible. Figure 2.14. Sound looping.. To kill all sounds, add the following ActionScript to a button in your Pocket PC application: on (release) { stopAllSounds (); } To add a sound to a button in Flash, add a new layer above the button frames. Then, while symbol editing, create a keyframe above the down frame and add a sound to that frame by dragging it from the library (see Figure 2.15). Figure 2.15. The sound will play when the button is clicked on the Pocket PC. In Publish Settings, you can specify the sound setting of the final Flash application (see Figure 2.16). Set the Sound to MP3, 16 kbps, Mono. Figure 2.16. The Publish Settings dialog box.. You can also set the sound setting of each sound by double-clicking the sound in the sound library. This displays the Sound Properties dialog box for the selected sound (see Figure 2.17). Figure 2.17. The Sound Properties dialog box.
Which Sound Compression Is Best for Flash for the Pocket PC?Most developers use some variation of MP3 compression in mono for web delivery. In general, for the Pocket PC a bit rate of 24 kbps, Mono, and Fast compression is a good balance between quality and file size. The most common compression settings are these:
Don't forget, although MP3 sound is very small, it does take up precious processor cycles. Because of this, in some cases ADPCM sound compression may work better for your application. Be sure to perform proper testing and observe file sizes to find the acceptable compromise. Also, there are many resources that are specifically dedicated to sound and Flash. Check www.newriders.com as well as www.macromedia.com on a regular basis. AnimationWe dedicated all of Chapter 6 to animation. The following are some general tips and guidelines. Because you are always trying to conserve processor cycles and power, it's often best to avoid large amounts of animation, tweening, and motion graphics when possible. Also avoid intensive visual effects. This includes large masks, extensive motion, alpha blending, and complex vectors, such as extensive gradients. That's not to say you should use animation at all. In fact, Flash for the Pocket PC is one of the best (and only) ways to animate content on the Pocket PC. The other key benefit, Flash runs on PCs, Macs, Linux, and beyond so the work you create isn't a "one off." For some projects, you may want to use ActionScript to animate your content, but intense ActionScript can also drain a processor, so be sure to explore combinations of tweens, keyframe animations, and ActionScript-driven movements. If you test frequently, your results will be greatly improved. One last thought on animation, mobile computing, and Flash. At the 2002 Sundance Online Film Festival, 12 of the 26 films are animated. Of those, most were created with Flash. This shows that not only is there content, but also demand. The mobile versions of the content you create will surely have a broad audience. Gaming and InteractivityWe've dedicated Chapter 7, "Creating Interactive Games for Devices Using Flash," to gaming, so be sure to check it before diving into a hardcore game development. Most industry analysts believe that the Pocket PC is so popular because of its enterprise features, business-to-business applications, productivity tools, and so on. But the real reason for the device's popularity is simple: games and lots of them! Well, that probably is not quite true, but most Pocket PC users have a collection of games that helps them get through meetings, elevators, and airports where they are held hostage to your content. According to some estimates, there will be one billion (yes, billion) hours spent in corporate offices playing Solitaire in 2002. As more professionals become mobile professionals, we'll need to fuel their gaming addiction with some portable content. There are many games available for the Pocket PC created in Flash, from adventure and strategy games to old favorites, such as Poker (see Figure 2.18). Figure 2.18. A Poker game for the Pocket PC created with Flash. If you've kept your finger on the pulse of what's to come in the device world, mobile entertainment is one of the killer apps for local and wireless content. In just one month, over 25 million people visited a gaming site, logging 3.1 billion minutes of playing time. Those numbers were substantially higher than they had been three months before, and ten times more than the year prior. As devices get online, you can expect online gaming for the Pocket PC to become ubiquitous. Enter Flash, which is already one of the top tools for creating online games. One challenge with creating Flash games for the Pocket PC is being able to save scores and stats within the game. One method is to house the game online and have the user browse to the online game over a connection. From there you would create the game to store information with a variety of middleware and database solutions. Because that's not always possible and the user may or may not have a connection to the web from his Pocket PC, another method is to use cookies on the device with Flash. For more information on using cookies to save data in Flash, see Chapter 8. |
EAN: N/A
Pages: 178