Section 14.2. Flash on the Run


14.2. Flash on the Run

Just as the Flash Player exists for desktop delivery via browser plug-ins and standalone players, so too can Flash be distributed on many mobile devices. The catch to creating Flash content for mobile devices is that the player technology for these devices lags behind the players used in desktop environments. While desktop users can use Flash Player 8 at the time of this writing, some PDA and handheld users can only play Flash 5 or Flash 6 content. Other devicesprimarily cell phonescan only run a new version of the Flash Player called Flash Lite, which is roughly equivalent to Flash Player 4.

Even with the technology gap, which continues to close, it's pretty impressive how ubiquitous Flash playback is becoming. With the right planning, you can effectively develop content that can be played on virtually every Flash-enabled device that exists, numbering in the hundreds of millions.


Warning: With that lofty goal in mind, be sure to test early and often on all target devices to avoid surprises, as platform differences are inevitable. Testing from the outset allows time for product redesign, if necessary.

The last two projects of this chapter will be basic image viewers of sorts. You will make a slide show for use on a PocketPC device, and a New York City Tourism guide that includes descriptive text with images for use on a Flash Liteenabled cellular phone.

14.2.1. Flash Player for Mobile Devices

Although the functionality of this project will be extremely simple due to space limitations and the need for tutorial clarity, the PocketPC platform allows you to use technology compatible with Flash Player 6. Other platforms (including the CLIÉ, Palm OS, a few Nokia smart phones, and others) also have Flash players, but some can only accommodate Flash 5compatible content. Be sure to identify your target device and confirm its player support before beginning any project.

To create your slide show, you'll take advantage of Flash's templates and skins:

  1. Choose File New and choose the Templates tab to access the "New from Template dialog box.

  2. Choose PDAs from the Category list in the dialog box, then choose "Windows Mobile - Full Screen" from the Templates list.

  3. Initially, you will see a fairly standard Stage, although smaller than the normal Flash default. However, in your Library is a device skin to help you see what your content will look like when running on a device in your target audience. In this case, the device skin is derived from the Hewlett-Packard iPAQ 5400.

  4. Create a new layer at the bottom of the timeline, and call it device. Drag the Library bitmap to the Stage, as seen in Figure 14-4, and position it so that it surrounds the Stage.

    Figure 14-4. The iPAQ 5400 skin for the "Windows Mobile - Full Screen" template

  5. Next, take advantage of a fabulous trick that will make your authoring easier without affecting your final output. Double-click the layer icon of the device layer, and select Guide for the layer type. This will prevent the layer from exporting to .swf when the file is published. Now you can design your interface with the device in mind, without worrying about the size of your template. To prevent accidental selection, lock this layer when you've positioned the art to your satisfaction.


Note: The guide layer was originally created to allow you to use things like ruler guides and placeholder assets to help you align and position content. However, since the layer is not included when the .swf is published, you can put any helpful content you wish in a guide layer. You can even temporarily disable layers that you intend to keep and use in your final content, just by converting them to guide layers until you need them again.
14.2.1.1. Buttons for mobile devices

With your skin in place, you can move on to creating the interface buttons. This may seem routine by this point, but there are a couple of nuances that you must consider when developing buttons for mobile devices.

First, unlike the buttons found in a desktop environment, buttons created for stylus-based mobile devices do not use rollover states. Since a stylus, or its equivalent, must be in contact with the screen to function, no rollover is possible. Therefore, when designing your buttons for the PocketPC slide show, create Up and Down states, as seen in Figure 14-5, but do not create separate Over states. (It will do no harm, they just won't be used.)

Figure 14-5. Keypad- and stylus-based devices do not use rollover states in buttons


Similarly, remember that you're developing for handheld devices. At times, a user may prefer to use a finger rather than a stylus, and your buttons must accommodate this less-precise mode of selection. Therefore, try to make the Hit states of your buttons as large as possible. The visible states of the buttons do not have to be overly large, rendering your design awkward and clunky. Instead, you can enlarge only the Hit states, which remain invisible to the user. Figure 14-6 shows the Hit state of a button (indicated by the overlapping dark and light colors) that is approximately 150% larger than the visible Up and Down states (indicated only by the lighter color).

Figure 14-6. For handheld devices, make button Hit states as generous as possible to allow activation by finger, rather than stylus, when needed


Now it's time to build the remainder of the application (if you prefer, you can open ipaq_02.fla, which already contains button symbols, and skip to step 5):

  1. Add a new layer above your guide layer and name it buttons.

  2. Create a single arrow- or triangle-shaped button symbol in this layer, following the guidelines for creating buttons for mobile devices discussed previously, and place it in the bottom center of this layer.

  3. Make a copy of the button and use Modify Transform Flip Horizontal to mirror the first button.

  4. Select frame 1 of the Content layer and use File Import to Stage to import the

    Finally, in frame 1 of the ActionScript layer, add the following script. The template provides the first comment and instruction. Follow them with the stop() action to prevent premature frame advances, and then two button handlers:

     // this ActionScript sets your content to be full screen fscommand("FullScreen", true); // stop(); // next_btn.onRelease = function():Void {     if (_currentframe == 3) {         gotoAndStop(1);     } else {         nextFrame();     } }; prev_btn.onRelease = function():Void {     if (_currentframe == 1) {         gotoAndStop(3);     } else {         prevFrame();     } }; 

    The two button handlers in this script are essentially the same. Depending on the button, each click will move the playhead one frame forward or backward until the end of the sequence is reached. At that point, the navigation will loop to the opposite end of the sequence.

  5. If you wish, you may add artwork to an additional background layer to further spruce up your interface. A very basic example of such an effort can be seen in Figure 14-7.

    Figure 14-7. The finished slide show

  6. Save your work and test your file.


Note: If you don't understand the use of the double equals sign, or need any other review on conditionals, see Chapter 7 for more information.

You should be able to use your mouse to simulate the device stylus and move forward and backward through the three sample images. If your file is not functioning properly, compare your work with the ipaq_03.fla sample file provided in the 14 folder on the accompanying CD-ROM.

Of course, this example application is very simple. In the case of the PocketPC device, you can accomplish much, much more because the platform supports files compatible with versions up to and including Flash 6.

How you get your final product onto the target device varies from unit to unit. Typically, you will perform some type of synchronization routine between your desktop and the mobile device. In other instances, you may use a memory card and a desktop card reader to copy the file between machines. Consult the operator's manual for your specific device for more information.

14.2.2. Flash Lite

Flash Lite is a relatively new part of the Flash platform. It is a tiny Flash player designed for inclusion in mobile devices with strictly limited memory capacities and performance limitationscell phones, for the most part.

Flash Lite content-development constraints are more severe than those encountered when authoring for PDAs and other devices that use the full Flash Player. In the latter scenarios, you are restricted to Flash Player 6, or possibly Flash Player 5, compatibility. When using Flash Lite, you must use ActionScript that is, essentially, Flash 4compatible. The difference between Flash 4 and Flash 5 may sound subtle, but ActionScript matured quite a bit between these two versions.

Content Development Kits and New Profiles for Mobile Devices

Most Flash content for mobile devices can be run either inside a tiny browser inside the device, or within a standalone player. Not all devices support both methods, though. To learn more about the specifics of each method, as well as which devices support which features, check out Macromedia's DevNet section covering devices at http://www.macromedia.com/devnet/devices/.

Macromedia also offers Content Development Kits (CDKs) and, in some cases, Interface Development Kits (IDKs) complete with documentation, sample files, and even components designed specifically for mobile devices.

Also, at the time of this writing, Macromedia had just released its first supported devices update to Flash 8. A Flash extension with new and updated profiles can be downloaded from http://www.macromedia.com/software/flash/download/device_profiles/ and installed using the Macromedia Extensions Manager. Keeping your development environment up to date gives you a big leg up when creating new work.


The good news is that newer versions of Flash Lite will be more robust, and it looks like major improvements are on the way. At the time of this writing, Macromedia says that Flash Lite 2 will include:

  • The Flash 7 code base with support for ActionScript 2.0

  • Video playback

  • External XML parsing

  • Local, persistent data on the device

  • Loadable external images and sounds

From Flash 4 to Flash 7 is quite a jump, and many developers are excited about the new feature set. However, several factors suggest that there is still a need for experience with the current version.

First, it is unknown how quickly carriers will adopt the new technology. Second, it is unclear how powerful the new devices will need to be to accommodate Flash Lite 2. If the player size increases substantially, or better processors are required to use it, Flash Lite 2 may not be as widely supported as its predecessors. Finally, there's no information about how existing Flash Lite users can upgrade, if at all. This means that there may continue to be a small, but growing, community of existing users that can't take advantage of new 2.0 content. Finally, at the time being there's no firm release date.

For up-to-date information on Flash Lite, you can check in with the Flash Lite Development Center at http://www.macromedia.com/devnet/devices/flashlite.html. For now, however, get your feet wet with the existing version that ships with Flash 8.

Start by creating a small promotional application that might be used by a New York City tourism group. (This is based on the Café Townsend sample file that is distributed with Flash 8, so if you want more practice, you can review that file as well.)

At any time, if you want to bypass these preliminary steps, you can open nyc_tourism_01.fla to start with a project-ready file. If this is your preference, skip ahead to the "Adding assets" section. To build the file from scratch, follow these steps:

  1. To firmly root yourself in the Flash Lite environment, begin with a template. Create a new file and, whether you use the Flash 8 Startup Screen or the New Document dialog, switch to the Templates section. In the Global Phones category, select the first entry, "Flash Lite 1.1 Symbian Series 60," and click the dialog's OK button. Depending on the features supported by your device, you can create applications that play in the device's web browser or in the Flash Lite standalone player. This project uses the latter approach.


    Note: Unless you have the specifications of a particular device in mind, starting with a template the fastest way to get up and running when developing mobile content. Configured templates have been pre-sized and a compatible version of Flash Lite has been chosen for the most common devices. Also, Macromedia updates device profiles periodically to provide you with additional templates. For more information, see the sidebar "Content Development Kits and New Profiles for Mobile Devices."

    The first thing you will undoubtedly notice is that the Stage size is much smallerobviously, to fit in the smaller displays of mobile devices such as cell phones. Take a look, too, at the File Publish Settings dialog, in the Flash section. You will see that the files version is specified not as ActionScript 2.0 but rather as Flash Lite 1.1.

  2. Use the Modify Document menu command to set your Stage color to black.

  3. You will be adding a few layers of content, so rename the Content layer to header for clarity.

  4. In the header layer, create an application header that says Visit New York City. Use any font you like, but remember that legibility is a major issue on small devices. Think about using a bold, clear typeface such as Arial Black. This banner of sorts should be approximately 1214 pixels tall.

  5. When you are satisfied with your header, lock this layer to avoid additional edits.

  6. Add a new layer above header, and label it buttons. Create a keyframe in frame 10 to confine the content in this layer to the first 10 frames.

  7. In frame 1 of the buttons layer, create two buttons. One should say New York City Info and the other should say Sites to See. For this project specifically, design the buttons any way you like, but they should appear below a y-coordinate of approximately 160. Also, avoid putting them in the extreme lower-left and lower-right corners. These areas are reserved for another purpose that you'll learn about in a moment. (As a design example, the sample file provided uses stacked buttons that fill the width of the screen.)


    Note: If you prefer to build your file step by step but would rather save time by using existing assets, use File Import Open External Library to open the nyc_tourism_01.fla file as a Library. This way, you can choose which assets to create and which to copy into your file when needed.
    Warning: One important thing to remember here is that most cell phones do not use styluses. Instead, they rely on two-way or four-way navigation keys or a joystick that serves the same purpose. To visually link your keypad manipulations with on-screen buttons, rollover states are used to show the progress of the user's actions.Down states may also be designed, but many developers choose not to use them so that the buttons will match the static labels that are typically used to identify the phone's reassignable soft keys (explained in the next step).

  8. Create another new layer called soft key labels above the buttons layer, and create a keyframe in frame 10. After the user leaves the splash screen to view content, this layer will be used for labels that will identify the purpose of the two reassignable under-screen keys on most cell phones. These are called soft keys because they can be programmed to have different purposes. You can see this in action as they are redefined as you navigate through multiple screens of your own cell phone.

  9. In frame 10 of the soft key labels frame, create graphics that label the left key Home and the right key Next. Make these graphics approximately 50 pixels wide and 20 pixels tall, and place them in the extreme lower corners of the Stage. Positioning the graphics this way usually clearly identifies them as labels describing the functionality of the soft keys.

  10. Save your work. Your timeline should now look like Figure 14-8.

    Figure 14-8. The timeline of the New York City Tourism Flash Lite example, as it appears with only buttons included

Now it's time to prepare for content. Your application will display three New York City landmarks and include their names, addresses, and opening hours. The splash page will have two buttons. One will show the application data, and the other will dial the New York City Information Hotline. When viewing the content, the Next button will cycle through the landmarks and the Home button will return to the splash page.

Start with the required text fields:

  1. Create a new layer called site name directly above the header layer.

  2. Create a dynamic text field of approximately 174 x 40 pixels, and position it at approximately (1, 145). Give it a variable name of description. You cannot use an instance name for this project because text field instance names are not compatible with Flash Lite 1.1 (Flash 4 syntax). If you need to review text field variable assignments, see Chapter 7.

  3. Create another new layer above site name and call it info. Create a keyframe in frame 10.

  4. In frame 10 of the info layer, create another text field, this time of approximately 174 x 18 pixels, and position it at approximately (1, 124). Give it a variable name of site.

  5. Configure both fields to use the Arial font at size 12, and choose "Bitmap Text (no anti-aliasing)" from the anti-aliasing menu.

  6. Save your work.

Next, add the frame labels and keyframes you'll need for navigation:

  1. Add a layer directly below the ActionScript layer and call it frame labels. Create a keyframe in frame 10.

  2. Give frame 1 the frame label splash, and give frame 10 the frame label landmarks.

  3. In the ActionScript layer, create additional keyframes at frames 20, 30, and 40.

  4. Add a new layer above the info layer and call it photos. Create a keyframe in frame 10. This layer will hold your splash and landmark photos.

  5. Finally, add a button that you will use to trap the key events sent by the device. You will be using Flash 4 button syntax to trap one key event at a time, so you just need a button of any kindit will reside off-Stage. Keep file size low by avoiding graphics. Try adding a small text field with no anti-aliasing that says key catcher to the Up state.

  6. Save your work. Your timeline should now look like Figure 14-9, and your file should be similar to nyc_tourism_02.fla in the 14 folder of your working directory.

    Figure 14-9. The timeline of the New York City Tourism Flash Lite example, as it appears prior to adding content

14.2.2.1. Adding assets

The final stage in completing your file is to add assets and script them:

  1. From the 14 folder of your working directory, import nyc_tourism_splash.jpg, as well as nyc_01.jpg, nyc_02.jpg, and nyc_03.jpg. You don't want to automatically create keyframes for these images, so use the File Import Import to Library option.

  2. In frame 10 of the photos layer, position the nyc_01 image on the Stage at (0, 120). Select the image and then choose the Modify Convert to Symbol menu command. Make your symbol a movie clip, call it nyc_tourism_mc, and use the 9-point grid icon near the center of the dialog to position the registration point in the upper-left corner of the movie clip.

  3. In frame 10 of the photos layer, add a motion tween. It will likely start off with a dotted line indicating an unfinished tween, because you have not provided a destination keyframe. You'll do that now.

  4. In frame 20 of the photos layer, add a keyframe and position the movie clip at the x-coordinate176. In frame 30, add a keyframe and position the movie clip at the x-coordinate352. Finally, add a keyframe in frame 40 and position the movie clip at528. Your tween should now be complete.

  5. Save your work.

All your labor will soon be realized when you add the scripts to your file:

  1. Start by scripting the splash page. On the "Sites to See" button, add the following script so that it will take you to the landmarks frame when pressed:

     on(press) {     gotoAndStop("landmarks"); } 


    Note: You may be looking at the previous script and asking yourself why you're departing from best practices and putting the script right on the button, like you did way back in Chapter 4. Because you must adhere to Flash Lite 1.1 ( Flash 4compatible) syntax, this is required. Button instance names didn't exist in Flash 4 days, so you can't remotely add an event handler to buttons using Flash Lite 1.1.

  2. On the "New York City Info" button, add the following script:

     on(press) {     site = "Call 311 for NYC Info"     getURL("tel:311"); } 

    The getURL command will attempt to dial 311 (New York's Information Hotline) for you. However, not all phones support this action, so you can put a descriptive string in the site variable to prompt the user to dial the number manually, if necessary.

  3. Now for the ActionScript layer. In frame 1, add the following script:

     stop(); _focusRect = false; fscommand2("resetsoftkeys"); fscommand2("setquality", "high"); fscommand2("fullscreen", "true"); site = "The Greatest City on Earth!"; 

    The first line prevents the movie from playing automatically. The second line prevents the device from highlighting every selection with a rectangle indicating the focus. Lines 3 through 5 issue instructions to the device. Line 3 resets the programming for the soft keys so they can be programmed with your desired functionality. Lines 4 and 5 set the quality to high and tell the standalone player to display full-screen. Finally, the last line adds a string of text to the Stage-bound site variable, displaying it on the screen.

  4. In frame 10, add the following lines of code:

     fscommand2("setsoftkeys", left, right); stop(); site = "Statue of Liberty"; description = "Ferry, Battery Park to Liberty Island. Open 9:30 - 5:00."; 

    The first line sets the functionality of the two soft keys to send PageUp and PageDown events. You will trap these with the aforementioned "key catcher" button in the next step.

  5. On the key catcher button, which you've positioned off-Stage, add the following script:

     on (keyPress "<PageUp>") {     site = "The Greatest City on Earth!";     description = "";     gotoAndStop(1); } on (keyPress "<PageDown>"{     site = "";     description = "";     play(); } 

    Both code segments use button key events to be compatible with Flash 4 syntax. (For more robust key handling, see the "Better Keystroke Detection" sidebar.) The first segment traps the PageUp event sent by the Home button. It clears the description variable, sets the site variable to the splash page text, and navigates to the splash page. The second clears both variables and issues the play() command to override the frame script that has stopped the user in each frame. This navigates the user to the next landmark.

  6. Now, back to the ActionScript layer. In frames 20 and 30, you need scripts that stop user progress and populate the variables, just like you wrote in frame 10:

     //frame 20 stop(); site = "Empire State Building"; description = "34th St. and 5th Ave. Open 9:30 to Midnight."; //frame 30 stop(); site = "Central Park"; description = "59th St. and 5th Ave. Open 24 hrs."; 

  7. Finally, in frame 40, add this last line of code:

     gotoAndStop("landmarks"); 

    This sends the playhead back to the first frame of the sequence so the user can easily page through all the images in a cycle. You needed the duplicate Statue of Liberty because each image tweens in from the right. If you didn't include the first picture again, the navigation script would send the user back to the first image abruptly.

  8. Save your work. Your timeline should now look like Figure 14-10, and your file should compare to nyc_tourism_03.fla.

Figure 14-10. The same timeline seen in Figure 14-9, but after the images and tweens have been added


Well, it took more steps than might have been required if you weren't restricted to Flash 4compatible syntax, but you're all done. You can test your movie now, and you're in for a little surprise.

Because the publish settings (defined by the template) identify the .fla as a Flash Lite file, the .swf will open up in the Mobile Device emulator. Pick a device and test the file using the on-screen keypad. Figure 14-11 shows what your final product might look like on a Nokia 6680.

Figure 14-11. The final NYC Tourism promotion as seen in the device emulator playing on a Nokia 6680


If you enable the output checkboxes on the left, you will receive lots of useful information in the Output window. This includes a warning that fscommand2 actions must be tested on the device, and a warning that the call request may not be compatible with all devices.

Congratulations! You're well on your way to developing Flash content for mobile devices.

14.2.3. What's Next?

By learning about delivering Flash files in ways other than the standard web delivery, you've taken your first major step toward thinking outside the box when it comes to Flash. You've taken this step at a good time, too, because mobile development is a rapidly growing sector of the Flash community.

With that in mind, try to spend as much time as you can keeping abreast of the changes in the mobile authoring space. The next time you consider a mobile device upgrade, think about factoring Flash Lite compatibility into your decision. If you have a compatible device, you can test features that can't be tested in the software-only simulator that ships with Flash.

When you're ready to move on, you'll be embarking on the last chapter of this modest book. Your last experiences within these pages will, ideally, push you further out of your box as you explore custom video and drawing options and learn how to extend Flash's authoring environment.

In the next chapter, you will:

  • Export animations to video format for external video processing

  • Export interactive Flash files to QuickTime format for interactive video playback in the QuickTime Player

  • Use the Drawing API to draw vectors on the fly

  • Build your own component

  • Review your progress by revisiting ActionScript highlights throughout this book

Better Keystroke Detection

In your foray into Flash Lite development, you saw the ancient method of adding a specific key event to a button. This is fine for down-and-dirty solutions, or when technical limitations prevent more elaborate systems, but it's not a practical approach for more mature applications.

The following code takes a quick look at improved keystroke detection using event listeners. (If you need any review on event listeners, see the sidebar of the same name in Chapter 12.)

This example detects the right and left arrow keys, allowing the user to navigate a file with the keyboard:

 // create a generic object to act as a listener keyListener = new Object(); // assign a function to the object's // onKeyDown property keyListener.onKeyDown = function():Void {   // check whether the right or left arrow is pressed.   // check to see if the constant for the RIGHT   // key is down when the keyDown event is sent.   // Test similarly for the LEFT constant.   // Navigate accordingly.    if (Key.isDown(Key.RIGHT)) {      nextFrame();    } else if (Key.isDown(Key.LEFT)) {   prevFrame();    } } // register listener with Key class to detect // key events Key.addListener(keyListener); 

Remember, when your application is running in a web browser, the browser itself might intercept keystrokes. The Flash Player traps keyboard events only if it has mouse focus. Users must click the Stage of a movie before the movie's keystroke handlers will become active. Consider forcing users to click a button before entering any keyboard-controlled section of a movie. This ensures that the Flash Player has keyboard focus.

When keystroke detection is no longer needed, you can improve the file's efficiency, and your coding practices, by removing the listener as follows:

 Key.removeListener(keyListener); 




Flash 8(c) Projects for Learning Animation and Interactivity
Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)
ISBN: 0596102232
EAN: 2147483647
Year: 2006
Pages: 117

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net