Flash CS3 Documentation

Getting Started with Flash Lite 2.x > Tutorial: Creating a Flash Lite Application > Create the application > Create the video screen

Create the video screen

In this section, you'll add video to the application, as well as ActionScript code that lets the user control playback (play, pause, replay) with the right soft key.

In this tutorial, you'll bundle the device video file in your SWF file's library, although you can also load an external video file from the device's file system or a network address.

1. In Flash, open the file you completed in Create the specials screen.
2. Open the Library panel (Window > Library) if not already open.
3. Open the Library options menu located in the upper-right corner of the Library panel and select New Video.

   The Video Properties dialog box appears.

4. Type a name for the video symbol in the Symbol text box (cafe Video, for example).
5. In the Video Properties dialog box, select the option to bundle the source video in the SWF file, and then click Import.
6. Open the file named cafe_townsend_chef.3gp located at www.adobe.com/go/learn_flt_samples_and_tutorials. On the Samples and Tutorials page, locate, download and decompress the .zip file for your Flash Lite version, and then navigate to the Tutorial Assets folder to access the file.

   If you don't see the video file listed in the Open dialog box (or if you can see it but can't select it), select All Files (*.*) from the Files of Type pop-up menu (Windows), or All Files from the Enable pop-up menu (Macintosh). This action is sometimes necessary because the Flash authoring tool doesn't recognize most device video formats.

   The Video Properties dialog box should appear as follows before you click OK.

   
   
   

7. Click OK to close the Video Properties dialog box.

   A new video symbol appears in your document's Library panel that is associated with the device video file.

   For more information about working with a device video in Flash Lite, see Using device video in Developing Flash Lite 2.x Applications.

8. To add the video object to the Stage, in the Timeline select the keyframe in Frame 51 of the layer named Video, as shown in the following example:

   
   
   

9. From the Library panel, drag the cafe Video object to the Stage.
10. In the Property inspector, type cafeVideo in the Instance Name text box, and set the object's x position to 0, its y position to 45, its Width to 176, and its Height to 144.

    
    
    

11. In the Timeline, select the keyframe in Frame 51 of the layer named ActionScript.
12. Open the Actions panel (Window > Actions) and type, or copy and paste, the following code:

    // Stop timeline, register soft keys, and start video.
    stop ();
    fscommand2 ("SetSoftKeys", "Home", "Pause");
    caféVideo.play ();
    var playing:Boolean = true;
    // Soft key event handler code:
    Key.removeListener (myListener);
    var myListener:Object = new Object ();
    myListener.onKeyDown = function () {
        var keyCode = Key.getCode ();
        if (keyCode == ExtendedKey.SOFT1) {
            gotoAndPlay ("home");
        }
        else if (keyCode == ExtendedKey.SOFT2) {
            if (playing) {
                // If video is playing, pause it,
                // set status variable (playing) to false,
                // and set right soft key label to 'Play'.
                caféVideo.pause ();
                playing = false;
                rightSoftKeyLabel.text = "Play";
            }
            else {
                // If video is paused, resume its playback, 
                // set status variable (playing) to true,
                // and set right soft key label to 'Pause'.
                caféVideo.resume ();
                playing = true;
                righttSoftKeyLabel.text = "Pause";
            }
        }
    };
    // Register listener object:
    Key.addListener (myListener);
    //
    // Video status handler code. 
    //
    caféVideo.onStatus = function (infoObject:Object) {
        var code = infoObject.code;
        if (code == "completed") {
            // If video has finished playing, set playing=false,
            // and set right soft key label to "Replay":
            playing = false;
            rightSoftKeyLabel.text = "Replay";
        }
    };
    

13. Save your work and test the application in the emulator.
14. Select the View Video option on the application's home screen to view the video.

    Try pausing the video by pressing the right soft key, and pressing the same key again to resume playback. When the video completes, you can press the right soft key again to play the video again.

Flash CS3