1. DL manuals
  2. MACROMEDIA
  3. Other
  4. FLASH 8-DEVELOPING FLASH LITE 2.X
  5. Applications

MACROMEDIA FLASH 8-DEVELOPING FLASH LITE 2.X Applications

Other manuals for FLASH 8-DEVELOPING FLASH LITE 2.X: Applications

Summary of FLASH 8-DEVELOPING FLASH LITE 2.X

  • Page 1

    Developing flash lite applications.

  • Page 2

    Trademarks 1 step robopdf, activeedit, activetest, authorware, blue sky software, blue sky, breeze, breezo, captivate, central, coldfusion, contribute, database explorer, director, dreamweaver, fireworks, flash, flashcast, flashhelp, flash lite, flashpaper, flash video endocer, flex, flex builder, f...

  • Page 3

    3 contents introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 what’s new in flash lite authoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 4

    4 contents chapter 5: testing flash lite content (flash professional only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 overview of flash lite testing features (flash professional only) . . . 63 using the flash lite emulator (flash professional only) . . . . . . . . . . . 66 f...

  • Page 5

    5 introduction this manual describes how to develop applications for mobile devices using macromedia flash lite. You can use various modes of navigation for different devices and how to work with text and fonts. This manual also describes how to manage the runtime memory available to flash lite appl...

  • Page 6

    6 introduction guide to instructional media the flash lite documentation package includes the following media to help you learn how to create flash lite applications: ■ getting started with flash lite provides an overview of flash lite technology and developing flash lite content for mobile devices....

  • Page 7

    7 1 chapter 1 creating interactivity and navigation macromedia flash lite 1.0 and flash lite 1.1 support user interaction through the device’s keypad, or through a stylus or touch-screen interface on devices that provide one. There are two ways to add key-based interactivity to a flash lite applicat...

  • Page 8

    8 creating interactivity and navigation keys supported by flash lite in addition to the alphanumeric keys available on standard telephones, most mobile devices feature a five-way keypad, which let users navigate and select items on the device’s display as well as the left and right soft keys. A devi...

  • Page 9

    Using tab navigation in flash lite 9 using tab navigation in flash lite on desktop flash applications, the tab and shift+tab keys let users switch keyboard focus among objects on the screen. The object that has focus responds to further keypresses. In flash lite, the arrow keys on the device’s five-...

  • Page 10

    10 creating interactivity and navigation each navigation mode discussed in the following sections references a sample file that you can view in the flash lite emulator. Each sample file consists of the same three-by-three grid of buttons, as shown below. The only difference between the sample files ...

  • Page 11

    Using tab navigation in flash lite 11 about the focus rectangle by default, flash lite draws a yellow rectangle around the button or input text field that has focus. The focus rectangle lets the user know which object on the screen will respond when the user presses the device’s select key. For exam...

  • Page 12

    12 creating interactivity and navigation if your application contains input text fields, macromedia recommends that you do not disable the focus rectangle, as it provides the only visual clue that an input text field has focus. For example, the following image shows an input text field that has the ...

  • Page 13

    Handling key events (flash professional only) 13 handling key events (flash professional only) in addition to using tab navigation between buttons and input text fields, a flash lite application can also respond to arbitrary keypress events. Not all devices and content types support all device keys....

  • Page 14

    14 creating interactivity and navigation the following table lists the actionscript keypress event that flash lite generates in response to the user pressing a key on the device: creating a key catcher button (flash professional only) if your application must handle several different keypress events...

  • Page 15

    Handling key events (flash professional only) 15 to create and use a key catcher button: 1. Create a new document from the flash lite 1.1 series 60 template, and save it as keycatcher.Fla. For more information on creating documents from the flash lite templates, see “using flash lite document templa...

  • Page 16

    16 creating interactivity and navigation 9. Test the application by selecting control > test movie. Press the four arrow keys on the emulator’s keypad to make the circle move around the stage. For another example of using a key catcher button, see “creating a simple menu using movie clips (flash pro...

  • Page 17

    Handling key events (flash professional only) 17 3. Open the library panel (window > library) and drag an instance of the movie clip symbol named menu item clip from the library panel to the stage. This movie clip contains two keyframes, or visual states: one for the menu item’s initial, unselected ...

  • Page 18

    18 creating interactivity and navigation 6. Assign the instance names of menu_2 and menu_3 to the middle and lower movie clips, respectively. The numeric suffix appended to each instance name lets you dynamically refer to each movie clip in code, which you’ll add shortly. 7. Using the text tool, cre...

  • Page 19

    Handling key events (flash professional only) 19 12. Open the library and drag an instance of the button named key catcher to the stage. Next you’ll attach event handler code to this button that handles user keypress events and update the user interface. 13. With the button selected on the stage, op...

  • Page 20

    20 creating interactivity and navigation 15. Select control > test movie to test the application in the emulator. To interact with the menu, click the up and down arrow keys on the emulator with your mouse, or press the corresponding arrow keys on your keyboard. Handling button events (flash profess...

  • Page 21

    Handling button events (flash professional only) 21 6. Type the following code in the actions panel: on(press) { trace("you pressed button 1"); } on(release) { trace("you released button 1"); } on(rollover) { trace("button 1 has focus"); } on(rollout) { trace("button 1 lost focus"); } 7. Drag anothe...

  • Page 22

    22 creating interactivity and navigation 11. Test the application in the emulator (control > test movie). Watch the messages in the output panel as you press the up and down arrow keys on the emulator’s keypad. Creating a simple menu using buttons and tab navigation (flash professional only) this se...

  • Page 23

    Handling button events (flash professional only) 23 3. In the timeline (window > timeline), select the layer named menu buttons. 4. Drag an instance of the news button symbol from the library panel to the stage. 5. Repeat step 4 for the sports and weather buttons. 6. Align the three buttons vertical...

  • Page 24

    24 creating interactivity and navigation 10. In the actions panel, type the following code: on(rollover) { status = "press to select news" } on(press) { status = "you selected news" } this code assigns some text to the dynamic text field when the user rolls over the news menu button. 11. Select the ...

  • Page 25

    Handling button events (flash professional only) 25 15. Select control > test movie to preview the application in the emulator. Click the down arrow key on the emulator with your mouse (or press the down arrow key on your computer’s keyboard) to navigate between menu options; to select a menu item, ...

  • Page 26

    26 creating interactivity and navigation using the soft keys (flash professional only) a device’s soft keys are multifunctional keys that use the device’s display to identify their purpose at any moment. For example, in the following application, labels above the soft keys indicate that the user can...

  • Page 27

    Using the soft keys (flash professional only) 27 for example, consider the following setsoftkeys command call: fscommand2("setsoftkeys", "options", "exit"); the following image shows the result of this command on an application running on an actual device in normal (not full-screen) mode: if you ena...

  • Page 28

    28 creating interactivity and navigation 3. In the timeline, select the content layer. 4. Using the text tool, create a static text field named left (or text of your choice) and position it in the lower-left corner of the stage, above the left soft key on the device. 5. Create another static text fi...

  • Page 29

    Using the soft keys (flash professional only) 29 10. In the actions panel, type the following code: fscommand2("setsoftkeys", "left", "right"); fscommand2("fullscreen", true); the two parameters of the setsoftkeys command—left and right, in this case— specify the labels that flash lite displays abov...

  • Page 30

    30 creating interactivity and navigation.

  • Page 31

    31 2 chapter 2 working with text and fonts this chapter describes how you can add static and dynamic text fields, and add input text fields to your macromedia flash lite applications. This chapter contains the following topics: about text in flash lite . . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 32

    32 working with text and fonts about font rendering methods in flash lite to render text on a device’s display, flash lite can either use fonts that are available on the device or use font data that is embedded in the swf file. Device fonts have the advantage of smaller swf file sizes but give less ...

  • Page 33

    About text in flash lite 33 3. In the property inspector, in the var text box, type namevar. The value that you enter must be a valid variable identifier—the first character must be a letter, underscore (_), or dollar sign ($), and each subsequent character must be a letter, number, underscore, or d...

  • Page 34

    34 working with text and fonts using input text fields input text fields in flash lite, like dynamic text fields, let you get and set their contents at runtime with actionscript. In addition, input text fields let flash lite applications get user input using the device’s generic input text dialog bo...

  • Page 35

    Using input text fields 35 the flash lite emulator mimics the features of the text input dialog box when you test your application in the flash authoring tool. The following image shows the text input dialog running in the emulator: ‘ for an example of using an input text field in an application, se...

  • Page 36

    36 working with text and fonts for example, when a user edits a single line input text field, the device’s input text dialog box displays a single line input text box. The input text box scrolls horizontally if the user enters more characters than can display. The following image shows a device’s in...

  • Page 37

    Using input text fields 37 restricting character input you can use the setinputtexttype command to restrict the characters that the user can enter in the text input dialog box. For example, suppose an application contains an input text field for the user to provide a numeric value, such as their age...

  • Page 38

    38 working with text and fonts font rendering methods in flash lite flash lite can render text field fonts in any of the following ways: use fonts that are available on the device you can apply a font to a text field that you know is available on the device, or you specify one of the three generic d...

  • Page 39

    Flash lite rendering quality and anti-aliased text 39 to select a font rendering method for a text field: 1. Select a text field on the stage. 2. In the property inspector, select one of the following options from the font rendering method pop-up menu: ■ select use device fonts to have flash lite us...

  • Page 40

    40 working with text and fonts flash lite renders anti-aliased text using vector representations of font outlines. If you want anti-aliased text to appear as smooth as possible, you should set the player’s rendering quality to high. Rendering quality affects all vector content on the screen, not jus...

  • Page 41

    Embedding font outlines in swf files 41 to embed font outlines for a dynamic and input text field: 1. Select the dynamic or input text field on the stage. 2. In the property inspector, select bitmap (no anti-alias) or anti-alias for animation from the font rendering method pop-up menu. 3. Click the ...

  • Page 42

    42 working with text and fonts text field example application (flash professional only) this section describes how to create a simple application that uses static, dynamic, and input text fields. The application asks the user (using text in a static text field) to provide their name (using an input ...

  • Page 43

    Text field example application (flash professional only) 43 8. Select window > common libraries > buttons to open a library of prebuilt button symbols. 9. In the buttons library, double-click the circle buttons folder to open it. 10. Drag an instance of the symbol named “circle button - next” to the...

  • Page 44

    44 working with text and fonts 15. Select control > test movie to test the application in the emulator. A. Press the down arrow on the emulator’s keypad to give the input text field focus. B. Press the select key on the emulator to open the emulator’s text input dialog box, and type your name using ...

  • Page 45

    Creating scrolling text (flash professional only) 45 c. Press ok to close the input text dialog box. D. Press the down arrow key on the emulator’s keypad again to give focus to the button, and press the select key. Creating scrolling text (flash professional only) flash lite 1.1 supports the scroll ...

  • Page 46

    46 working with text and fonts to create a scrolling text field and control it with actionscript: 1. In flash, create a new document from the flash lite 1-1 - symbian series 60 device template. For more information about creating documents from device templates, see “using flash lite document templa...

  • Page 47

    Creating scrolling text (flash professional only) 47 9. Create a new button symbol, and add an instance of it to the stage or in the area off the stage. This button acts as key catcher button, and it doesn’t need to be visible to the user. For more information about creating key catcher buttons, see...

  • Page 48

    48 working with text and fonts.

  • Page 49

    49 3 chapter 3 working with sound macromedia flash lite 1.1 supports device sounds and standard, or native, flash sound. This chapter describes what you must do to incorporate sound with your applications on mobile devices. This chapter contains the following topics: about sound in flash lite . . . ...

  • Page 50

    50 working with sound event and stream (synchronized) sound flash lite 1.1 supports event and stream (synchronized) sound. Event sounds play independently of the timeline and continue to play until either the end of the sound buffer has been reached, or the sound is stopped using actionscript. Event...

  • Page 51

    Using device sound (flash professional only) 51 the timeline in the flash authoring tool displays sound waveforms, as the following image shows. Waveforms for sounds that are linked to external device sounds are colored green; waveforms for sounds that are not linked to external device sounds are co...

  • Page 52

    52 working with sound 5. In the timeline, select the layer named content in the timeline. 6. Drag the button symbol named play from the buttons library to the stage. 7. Double-click the new button to open it edit mode. The timeline changes to show the button’s frames named up, over, down, and hit. 8...

  • Page 53

    Using device sound (flash professional only) 53 c. Browse to the flash_install_dir/tutorials and samples/samples/flash lite/sound/ and select the file named hi_hat.Mid. I d. Click ok. 13. Select control > test movie to start the flash lite emulator and test your swf file. In the emulator, press the ...

  • Page 54

    54 working with sound the following image shows how the application might look in flash: when the user select the button, the sound on frame 10 plays. This technique requires that the device sound be attached to the same frame specified in the gotoandplay() function. For instance, in the example dis...

  • Page 55

    Using device sound (flash professional only) 55 to create a sound bundle file: 1. Open the flash lite sound bundler application (flashlitebundler.Exe) located in the flash 8 install folder (for example, boot drive/program files/ macromedia/flash 8/ flashlitebundler.Exe). The sound bundler appears as...

  • Page 56

    56 working with sound 5. Click save bundle to save the fls file. 6. To exit from the sound bundler, right-click on the sound bundler window and select exit. The next step is to add the sound bundle (fls) file to your flash document. The process is the same as adding standard device sounds to flash d...

  • Page 57

    57 4 chapter 4 optimizing content for performance and file size this chapter provides tips and techniques for optimizing your flash lite for file size and performance. This chapter contains the following topics: swf file size and memory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 58

    58 optimizing content for performance and file size animation guidelines when creating animated content for a mobile phone, it is important to consider the phone’s cpu limitations. The following guidelines can help prevent your flash lite content from running slowly: ■ flash lite can render vector g...

  • Page 59

    Performance optimization 59 bitmap versus vector graphics when you create content for mobile devices, it is sometimes preferable to use bitmaps instead of vectors because they require less cpu power to animate. For example, a road map of a large city would have too many complex shapes to scroll and ...

  • Page 60

    60 optimizing content for performance and file size 4. In the compression pop-up menu, select one of the following options: ■ select the photo (jpeg) option for images with complex color or tonal variations, such as photographs or images with gradient fills. This option produces a jpeg format file. ...

  • Page 61

    Device speed and frames per second 61 optimizing actionscript because of cpu limitations, use the following guidelines when developing actionscript for flash lite content used on mobile phones: ■ keep the actionscript as simple as possible. ■ limit the number of loops that you use and the amount of ...

  • Page 62

    62 optimizing content for performance and file size.

  • Page 63

    63 5 chapter 5 testing flash lite content (flash professional only) macromedia flash professional 8 includes a flash lite emulator that lets you test your application in the authoring tool as it will appear and function on an actual device. When you’re satisfied with the application running in the e...

  • Page 64

    64 testing flash lite content (flash professional only) the flash lite emulator lets you preview your flash lite content as it will function and appear on an actual device. The emulator also contains controls that let you select a different test device, and change the level of debugging information ...

  • Page 65

    Overview of flash lite testing features (flash professional only) 65 the device settings dialog box lets you select the test devices and flash lite content type that you are targeting. The test devices that you select are available for you to test against in the flash lite emulator. Each combination...

  • Page 66

    66 testing flash lite content (flash professional only) using the flash lite emulator (flash professional only) the flash lite emulator lets you preview your application within the flash authoring tool. This section contains the following topics: ■ “interacting with the emulator (flash professional ...

  • Page 67

    Using the flash lite emulator (flash professional only) 67 you can use your mouse to click directly on the flash lite emulator’s keypad, or use the following equivalent keyboard shortcuts: ■ the arrow keys (left, right, up, down) map to the arrow keys on the emulator’s five-way keypad. ■ the enter o...

  • Page 68

    68 testing flash lite content (flash professional only) if you haven’t yet selected any test devices before testing your application, the test device pop-up menu says , and flash displays a warning message where the emulator normally appears. To open the device settings dialog box and select your te...

  • Page 69

    Using the flash lite emulator (flash professional only) 69 for more information about selecting your test devices, see “selecting test devices and flash lite content type (flash professional only)” on page 76 . Setting emulator debug options (flash professional only) the flash lite emulator can send...

  • Page 70

    70 testing flash lite content (flash professional only) zooming and rotating the flash lite emulator (flash professional only) you can rotate the flash lite emulator, as well as zoom in and out on its contents. Rotating the emulator is useful if the content in your application is meant to be viewed ...

  • Page 71

    Using the flash lite emulator (flash professional only) 71 for example, the following two images show the same content—a simple vector shape. The image on the left show the content as viewed in the flash lite emulator at normal magnification level. The image on the right shows a portion of the same ...

  • Page 72

    72 testing flash lite content (flash professional only) about screen size and available stage size (flash professional only) each combination of target device and flash lite content type determines, among other things, the available screen area that a flash lite application can occupy. The available...

  • Page 73

    Using the flash lite emulator (flash professional only) 73 ■ the actionscript debugger ■ the view > show redraw regions menu command ■ the controller toolbar (window > toolbarsf > controller) flash lite features not supported by the emulator (flash professional only) the emulator doesn’t support all...

  • Page 74

    74 testing flash lite content (flash professional only) flash lite error and warning messages (flash professional only) there are two types of error messages that the flash lite emulator generates while you test your content. One type of message appears only in the emulator; the other occurs in the ...

  • Page 75

    Flash lite error and warning messages (flash professional only) 75 the following table lists all the errors that occur in the flash lite player, including error numbers, the short descriptions that appear in the error dialog box, and the longer descriptions that appear in the output panel: error num...

  • Page 76

    76 testing flash lite content (flash professional only) selecting test devices and flash lite content type (flash professional only) you use the device settings dialog box to select the test devices and content type for your flash lite application. When you preview your application in the flash lite...

  • Page 77

    Selecting test devices and flash lite content type (flash professional only) 77 2. In the device settings dialog box, select the content type for your application from the content type pop-up menu. The content type that you select corresponds to the flash lite player configuration that your content ...

  • Page 78

    78 testing flash lite content (flash professional only) 4. To view information about a device, select the device in either the available devices or test devices pane. The lower edge of the device settings dialog box displays the device’s model name, available stage area, and supported flash lite pla...

  • Page 79

    Flash lite content types (flash professional only) 79 the following table lists and describes all the flash lite content types available as of this writing. As discussed in “flash lite 1.X availability” in getting started with flash lite, most of the content types are only available in a specific ge...

  • Page 80

    80 testing flash lite content (flash professional only) image viewer use the image viewer application that lets the user manage and preview multimedia files on the device, including swf files. Ntt docomo (japan only) incoming call uses flash lite to display an animation when the user receives a call...

  • Page 81

    Determining platform capabilities (flash professional only) 81 determining platform capabilities (flash professional only) each combination of target device and flash lite content type defines a set of available flash lite features, such as navigation type, supported device sound formats, or input t...

  • Page 82

    82 testing flash lite content (flash professional only) loadvars indicates how frequently flash lite processes loadvariables() function calls. Valid values are as follows: oneperkey : only one loadvariables() call is allowed for each keypress. Oneperkeyperframe : only one loadvariables() call is all...

  • Page 83

    Determining platform capabilities (flash professional only) 83 keyset indicates what key events are supported by flash lite on the device. For more information about handling key events, see “handling key events (flash professional only)” on page 13 . Valid values are as follows: all : all key event...

  • Page 84

    84 testing flash lite content (flash professional only).

  • Page 85

    85 appendix warning and error messages (flash professional only) this appendix lists the possible information and warning messages that the flash lite emulator might generate while your testing your flash lite application. For more information about these warning messages, see “setting emulator debu...

  • Page 86

    86 warning and error messages (flash professional only) ftpa005 the call to geturl for url was ignored because there was more than one request per keypress. Flash lite allows only one geturl() function call per keypress; the emulator detected that there was more than one geturl() so only the first c...

  • Page 87

    Flash lite emulator error and information messages (flash professional only) 87 ftpa017 the call to loadvariables for url was ignored because there was more than one request per keypress. Your application made multiple loadvariables() function calls during a single keypress event. Flash lite allows ...

  • Page 88

    88 warning and error messages (flash professional only) ftps012 event sound was ignored because it was not associated with a keypress. In flash lite 1.0, a sound can play only in response to the user pressing a key on their device. For more information, see “triggering device sounds in flash lite 1....

  • Page 89

    Flash lite emulator error and information messages (flash professional only) 89 ftps029 fscommand2 command- name command found. The emulator detected the specified fscommand2() command. Ftps030 fscommand2 command- name command not supported in the emulator, please test it on the device. The emulator...

  • Page 90

    90 warning and error messages (flash professional only) ftps037 smaf sounds not supported for the selected content type on this device. The emulator detected a smaf device sound, which is not supported by the selected content type on this device. Ftps038 the call to startvibrate was ignored because ...

  • Page 91

    Flash lite emulator error and information messages (flash professional only) 91 ftps069 smaf(ma-5) sounds not supported for the selected content type on this device. The emulator detected a smaf (ma-5) device sound, which is not supported by the selected content type on this device. Ftps070 mfi soun...

  • Page 92

    92 warning and error messages (flash professional only) ftps105 this swf is not in flash lite format. Your application attempted to load a swf file whose version was not in the flash lite format; flash lite can load other flash lite swf files or flash 4-formatted swf files, only. Ftps106 mouse event...

  • Page 93

    93 index a application modes, in flash lite 78 b button events about 20 handling 20 c content types in flash lite, described 78 d device settings about 76 selecting test devices and content type 76 device sound about 50 adding 51 triggering in flash lite 1.0 53 e embed font outlines about 40 how to ...

  • Page 94

    94 index m menus creating with buttons 22 creating with movie clips 16 n native sound, about 56 navigation. See tab navigation o optimizing actionscript 61 animation performance 58 bitmap graphics 58, 59 bitmap versus vector graphics 59 file size 57 frames per second 61 memory 57 performance 57 p pl...