Mobile and Devices Developer Center

Flash Lite 3 video capabilities

Video is arguably the most compelling media found today on the web. The new trend is to create web applications that use video as a means in the social network jungle to easily broadcast yourself. Video on mobile devices represents a new challenge for both device manufactures and developers. Flash Lite 3 opens an amazing new world to mobile developers.

Mobile Web 2.0 exists in the definition of Web 2.0 but it dramatically changes the way people use the content. For the most part, we are consumers of content created, produced, and edited from traditional media providers for classic "screens" like cinema, TV, PC, etc. With the Mobile Web 2.0, the user becomes also a producer of content because they can supply content and can interact with the content with rating, comments, etc.

The role of the video in this scenario is very important because now we can really create mobile applications that work like "classic" web applications that use video.

Flash Lite 3 adds new capabilities and brings itself as one of the most compelling platforms because it is able to create something more than a classic mobile TV. With Flash Lite 3 you have several options for playing back video:

• Local playback from the devices memory
• HTTP playback from web server
• Streaming results from Flash Media Server

Flash Lite 3 adds support for Flash video (FLV) that is rendered directly in the Flash Lite player rather than by the device, so you no longer need to be concerned about whether your target devices support a particular video format. The Camera class and recording video are not supported by Flash video with Flash Lite 3. The video codecs supported by Flash Lite 3 are:

• On2 VP6
• Sorenson

In this article I will focus on the local playback of an FLV file directly from a Flash Lite 3 application.

Requirements

To complete this tutorial, you will need to install the following software:

Flash CS3 Professional

• Try
• Buy

Flash Lite 3 player

• Download the developer edition of the Flash Lite 3 player

Flash Lite 3 Update for Flash CS3 Professional

• Download

Flash Lite 3 Update for Device Central CS3

• Download

Sample files:

• fl3_video_app.zip (ZIP, 124K)

Creating a sample video application

When creating this sample application, I didn't used any external classes because my aim with the application is to show how easy it is to start using the FLV format in a mobile application. Use the following steps to create application. For your reference completed version application is included in the sample files for this article, which are linked above.

1. First of all open Flash CS3 and select File > New.

2. Select the Flash File (Mobile) option and click OK to create a new Flash mobile file. When you select this kind of file, Flash opens Device Central CS3 from which you can now select the Flash Lite 3 player (see Figure 1) and select a device under the Flash Lite 3 branch (see Figure 2).

   

   Figure 1. Creating a new Flash mobile file in Device Central CS3

   Note: At the time of writing of this article, only generic Flash Lite 3 profiles are available. Once devices from original equipment manufacturers (OEMs) start to ship, those device profiles will be available in a future device profile updates.

3. Expand the Flash Lite category in the Available Devices panel and select a generic device. You will need two FLV videos to complete this exercise, so select a device with the same dimensions as your video file.

   

   Figure 2. Selecting a device under the Flash Lite 3 branch

4. Click the create button. The new file will open in Flash.
5. Save your FLA file with a name of your choice.
6. Open the Library panel (Control + L on Windows/Command +L on Mac).

7. In order to add a new video instance to the library, select New Video from the Library panel's pop-up menu from the top right corner of the panel (see Figure 3).

   

   Figure 3. Adding a new video instance to the library

8. Leave the symbol name Video 1 and click OK.
9. Drag the instance of the video onto your stage, and assign to it the instance name test_video in the Property inspector.
10. Put two samples FLV files in a folder named video placed at the same level of the FLA file.
11. In order to complete the user interface of this sample application, put two new TextField instances in a separate layer on the stage. One instance contains the instruction text "Press the key 1 or 2 in order to start the play back of a FLV video" and the other one is a dynamic TextField with the instance name video_txt used by the application in order to show the name of the video and the position of the playhead, in seconds.

12. Create a separate layer and name it actions. You will put the code you need for this application in this layer. First of all you have to map the soft key text in order to show the string "Exit" upon the right soft key. Select frame 1 of the actions layer and open the Actions panel (Window > Actions). Enter the following code in the actions panel.

    fscommand2("SetSoftKeys", "", "Exit");

13. Next declare two variables in order to store an instance of the NetConnection class and an instance of the NetStream class that are now supported by Flash Lite.

    var ncVideo:NetConnection ;
    var ns:NetStream;

    This sample application is able to reproduce FLV files inside the video instance and show the name of the video and the position of the playhead in seconds. In order to complete these things you need to declare an Array with the paths and names of the video and a variable used in order to store a reference to a setInterval call used to check the playhead position. Enter the following code.

    Note: You will need to change walk.flv and lake.flv as well as the names in the following code to the names of your FLV files and the appropriate descriptor text.

    var check:Number;
    var videos:Array = [{path: "video/walk.flv", name: "Walk Video"}, {path: "video/lake.flv", name: "Lake Video"}];

14. As I have said, the application will show a video when the user presses key 1 or 2 of the device. In order to handle the press of the key, you need to declare an object, define the onKeyDown event on it, and register it as a listener for the keyboard. Add the following code.

    var tmpObj:Object = {};
    tmpObj.onKeyDown = function():Void{
            ..................
    }
    Key.addListener(tmpObj);

15. In the body of the onKeyDown function, you need to handle the press of the right soft key or the press of  key 1 or 2 in order to launch the video. The body of the function contains these instructions:

    if (Key.getCode() == ExtendedKey.SOFT2) {
              fscommand2("Quit");
              return;  
    }
    var index:Number = chr(Key.getCode());    
    if(!isNaN(index) && (index >= 1 && i <= 2)){
        index = index - 1;
        playVideo(videos[index].path, videos[index].name);      
    }

    The playVideo function accepts two arguments. The first one is the path of the video and the second one is the name of the video.

16. In the body of the function, first of all you check if the NetConnection and NetStream instances are initialized, and then start the reproduction of the video file attaching it to the video instance you have placed on the stage.

    if(!ncVideo){
        ncVideo  = new NetConnection();
        ncVideo.connect(null);        
    }
    if(!ns){    
        ns = new NetStream(ncVideo);  
    }   
        ns.play(file);
        test_video.attachVideo(ns);

17. At the end of this function, you control if the check variable is initialized and launch an interval that is the responsible of the time check performed on the video.

    if(!check)clearInterval(check);
        check = setInterval(getTimeInfo, 300, ns, name, video_txt);

18. The code is self explanatory. The getTimeInfo function contains only the instruction you need in order to populate the dynamic TextField instance you placed on the stage with the name of the video and the playhead position in seconds.

    function getTimeInfo(ns:NetStream, nm:String, txt:TextField):Void{ 
         txt.text = "Playing video: " + nm + " " + Math.round(ns.time);     
     }

Now you are ready to test the application with Adobe Device Central.

Testing the application

If you are new to mobile development, you have to carefully consider the testing phase of your development process and test the application as much as possible on your target device. Adobe provides you with Device Central in order to simulate the functionality of your application on a rich set of devices.

When you test your application in Device Central, you'll be surprised about the capabilities offered from this software (display panel, memory panel, performance panel, etc.) and from its behavior with Flash video files. You are able to get a very accurate preview of you mobile video application simply by exporting your FLA file (Control + Enter) and using the keyboard of the selected device (see Figure 4).

Figure 4. A preview of the mobile video application

Improving the application

If you want to improve the user experience of this sample application you may apply some interesting features of Flash Lite and video.

As I have already said, the Flash Lite 3 player now supports FLV files and you can treat your video instance as classic video. For this reason you can apply support for transparent overlays (alpha channels) and rotation on the video instance.

1. Open the file again and save it with a new name.

2. In the FLA create a new movie clip that contains a video instance named test_video and use this movie clip to create a motion tween with an alpha effect (see Figure 5).

   

   Figure 5. Creating a motion tween with an alpha effect

3. In order to keep your source file clean and tidy, put this tween in a separate movie clip and place it on the stage removing the video instance that you have placed on it in the previous example.

4. Give to this movie clip the instance name videoHolder_mc and modify the ActionScript contained in the playVideo function in order to set the ns variable of the clip and start the playback of its timeline.

   videoHolder_mc.ns = ns;
   videoHolder_mc.play();

5. Now export your SWF file and enjoy yourself with the rotation and the alpha channel contained in the movie clip applied to the video instance.

Where to go from here

In this article you have learned the basic concepts behind the new video capabilities of Flash Lite 3, and what you need to load a local video and apply an alpha channel. Now it is time to start to work on your video applications and take all the advantage of the new video capabilities of Flash Lite 3 that open a new world to all developers. With this release of Flash Lite 3, you don't need to worry about the video supported in your target devices—and you can benefit from all the terrific features of Flash video.

About the author