Mobile and Devices Developer Center

Creating video content for mobile devices

With the release of Flash Lite 3.0, the future of Flash applications on mobile devices becomes more promising. The next generation of mobile devices makes it possible for developers to build some really amazing apps, due to the increasing number of mobile devices that support Flash Lite or (in some cases) the new features in Flash Lite 3.0.

Flash Lite 3.0 includes new features and enhancements and extends your ability to create many types of mobile content—including screensavers, wallpapers and stand-alone applications. In this article, I'll focus on the new extended feature for FLV support. This new feature allows users to play FLV video content locally, from an HTTP location or streaming, from Flash Media Server. Flash Lite 3.0 also supports the same video codecs (On2 VP6 and Sorenson Spark) that you'll find in the Flash authoring environment.

In this article, I'll provide examples of how to create video content for mobile devices. We'll focus on two strategies: The 3GP mobile video format and FLV video format. The examples in this article focus on playing video content locally.

Along the way, I'll also point out the workflow integration between CS3 products and offer recommendations on using the tools included in Creative Suite 3 to create mobile video content without requiring any other third-party applications.

As we get started, I'll illustrate how you can navigate files and resources using Adobe Bridge. I'll describe the process of using Flash to create the video content and then I'll provide instructions for encoding the video into FLV format using either Flash or Adobe After Effects. I'll also show you how to use After Effects to create 3GP mobile video formats and how to create a Flash Lite file that includes video content. At the end, I'll demonstrate how to test your mobile content using Adobe Device Central.

Requirements

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

Flash CS3 Professional

• Try
• Buy

After Effects CS3 Professional

• Try
• Buy

Flash Lite 3 update for Flash CS3 Professional

• Download

Flash Lite 3 update for Adobe Device Central

• Download

Developer edition of the Flash Lite 3 Player on Adobe Labs

• Download

Sample files:

• fl2fl3_video.zip (ZIP, 3K)

Prerequisite knowledge

To get the most out of this article, it is recommended that you have some prior experience working with Flash CS3 Professional, general knowledge of Flash Lite applications and understand the basic concepts of working with Adobe Bridge and Device Central. If you plan on using After Effects to convert videos to 3GP format, it is helpful if you are familiar with the After Effects working environment. 

Managing content with Adobe Bridge

Adobe Creative Suite 3 includes deep integration between products. Adobe Bridge 2 makes it easy to manage resources on your local machine and open each file in its default program. In this section, we'll navigate to a Flash animation and open it in Flash using Bridge. Follow these steps:

1. Open Adobe Bridge and navigate to the animation file (adobe_logo_start.fla) in the sample files folder.

2. Double-click the file or right-click and choose Open With > Adobe Flash CS3 (see Figure 1).

   

   Figure 1. As you navigate your local directories, the right panel of Adobe Bridge displays information about the selected file

Creating 3GP video for Flash Lite 2.0

Many devices available today support Flash Lite 2.0. In this example we'll see how easy it is to create 3GP mobile video content for Flash Lite 2.0 applications:

1. Open Adobe After Effects. By default the program opens a new project. Choose File > Save and name your new project adobe_logo.aep.
2. Create a new composition. Right-click (control-click on Mac) the project window. Choose Composition > New Composition from the context menu.

3. Use the Composition Settings dialog box to configure the options (see Figure 2). After updating the settings, click OK.

    

   Figure 2. Update the settings for your new composition using the values shown

4. Import a SWF animation to the project. Choose Import > File and navigate to select the adobe_logo_start.swf file located in the sample files folder. Click OK.
5. Drag the SWF file from the Project window to the Stage. After doing so, you'll see a new layer appear in the Timeline panel.

6. In the Timeline panel, extend the working area to match the length of the SWF animation by dragging the bar at the end of the work area to the right. Reposition the end of the work area to the same location on the timeline where the animation layer ends (see Figure 3).

   

   Figure 3. Use the Timeline panel to redefine the work area of the composition to match the start and end points of the imported SWF animation

Since we're using After Effects, we'll take advantage of the 3D effect feature to add depth to the animation before exporting it. In this section, we'll see how to apply the 3D effect and create timeline animation. Follow these steps:

1. Convert the 2D layer to 3D layer. Right-click (Control-click on Mac) the SWF animation on the Stage. In the context menu that appears, select 3D layer.
2. Extend the layer properties. Click the arrow next the layer and choose Extend > Transform.
3. Click the Stopwatch icon located next to the Orientation layer to set the first keyframe.
4. Move the playback head to the middle of the layer of the timeline. Set the Y value to 180 degrees by updating the second text field next to the Orientation property.

5. Move the playback head to the end of the layer in the timeline. Set the Y value here to 359 degrees (see Figure 4).

   

Figure 4. Update the 3D layer of the SWF animation with keyframes containing the beginning and ending Y positions

Now we're ready to export our video animation as a 3GP mobile video using the Export 3GP video feature. Choose File > Export to access the 3GP Export Settings dialog box, where you can select settings for the following options:

• File format: This setting defines the output video file format. For the purposes of this exercise, we'll choose the 3GPP file format and the Video option to define the output type (see Figure 5).
• Video format: Select MPEG-4 as the video compression format.
• Data rate: This value is represented in kilobits per second. Set the value here to 64 to restrict the available bandwidth and ensure the best quality playback.
• Image size: This option allows you to choose the dimensions of your output video. Since we've already built our video composition based on a size that will fit on mobile devices, we will use the Current option.
• Frame rate: This setting defines the frame rate of the video. In this example, the best choice is to use the Current option to use the same frames per second as the source file.
• Video Option button: This optional setting offers the ability to select sequence markers to help recover packet loss for streaming video. If you are working with longer compositions, adding markers can help improve playback of the video.

Figure 5. Update the selections in the 3GP Export Settings dialog box to match the values shown

Adding video content to a Flash Lite 2.0 file

In this section we'll create a Flash Lite 2.0 file using Adobe Device Central and we'll select the corresponding mobile device profile to use for testing the File Lite content. In this example, we'll use the Nokia N95 profile to build our Flash Lite video file. Follow these steps:

1. Open Adobe Device Central. Select File > New Document In > Flash.
2. Choose Flash Lite 2 as the Player Version. Browse the available devices and select N95 for the Nokia manufacturer. The Device Profiles tab lists the device capabilities. The New Document tab displays the device screen dimensions and the Flash content types supported by the selected device.
3. Click Create to open a new Flash Lite 2.0 file in Flash.
4. After Flash launches, open the Library panel by choosing Window > Library.
5. Click the Library panel menu and choose New Video to create new video object. Name the video flashlite2_video and set the Type to Video (ActionScript-controlled). Also make sure that the option to Bundle source in SWF for mobile and devices is selected.
6. Click the Import button to browse and select the source file of the 3GP video that the video container will display.
7. Drag the video placeholder from the Library to the Stage. While the video object is selected, assign it an instance name of mobileVideo in the Instance Name field of the Property inspector.

8. Create a new layer in the Timeline and name it actionscript. Select Frame 1 of the actionscript layer, then select Window > Actions to access the Actions panel. Type or copy/paste the following code into the Script window to control playback of the video programmatically:

   fscommand2("SetSoftKeys", "Home", "Pause");
   mobileVideo.play();
   var playing:Boolean = true;
   
   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 == true) {
               mobileVideo.pause();
               playing = false;
               rightSoftKeyLabel.text = "Play";
              } else {
               mobileVideo.resume();
               playing = true;
               rightSoftKeyLabel.text = "Pause";
              }
        }
   };
   Key.addListener(myListener);
   
   mobileVideo.onStatus = function(infoObject:Object) {
        var code = infoObject.code;
        if (code == "completed")
       {
            playing = false;
            rightSoftKeyLabel.text = "Replay";
        }
   };
   stop(); 

Creating FLV video content for Flash Lite 3.0

There are several ways to create a video file in FLV format. You can use After Effects to export an animation as FLV video. You can also use the Flash Video Encoder that is included with Flash CS3 Professional to encode video files into the FLV format.

First we'll explore using Flash and the Flash Video Encoder to create FLV video files for use on mobile devices. To begin, we'll need to export a Flash animation as QuickTime video. Follow these steps:

Note: If you've worked with previous versions of Flash and attempted to export QuickTime video in the past, you may have noticed that the exported videos did not include any animation nested inside movie clips. The new QuickTime Export feature included in Flash CS3 has been updated—animation located inside movie clip symbols is now exported and included in the MOV file.

1. Open the adobe_logo_start.fla file from the sample files folder. Choose File > Export > Export Movie and choose the QuickTime video format.

2. The QuickTime Export Settings dialog box appears. Update the settings for your QuickTime movie (see Figure 6). Click OK.

   

   Figure 6. Update the settings in the QuickTime Export Settings dialog box as shown in the screenshot above

3. Open Flash Video Encoder. Click the Add button and choose the adobe_logo_start.mov file created in the previous step. Selecting the file will add it to the Queue list (see Figure 7).
4. Click the Settings button to access the encoding options. In the Video tab choose ON2VP6 as the video codec. Choose Medium from the quality menu and click OK.

5. Click Start Queue to start the process of converting your QuickTime video to FLV format.

   

   Figure 7. Click the Add button to browse for the QuickTime file using the Flash Video Encoder

The second method for creating FLV video files involves exporting the FLV file from Adobe After Effects CS3 Professional. Follow these steps:

1. Launch After Effects. Open the adobe_logo.aep file from the sample files folder.
2. Choose Export > Flash Video (FLV) to invoke the FLV Video Export Wizard.

3. The FLV Video Export Wizard includes four tabs:

   • The Encoding Profiles tab allows you to choose the quality of your exported FLV content. You can save the profile presets you create for reuse and you can also open an existing profile to streamline the encoding process.
   • The Video tab allows you to choose the video encoder and the video quality. For this example we'll select the ON2VP6 encoder and choose Low from the Quality menu.
   • The Audio tab allows you to choose the setting to encode audio. Since our animation does not include audio, we'll uncheck the Encode Audio checkbox.
   • The Crop and Resize tab allows you to crop your animation or resize its dimensions. We'll leave this as is for this example.
4. Click OK to begin the process of exporting the After Effects composition to FLV format.

Adding video content to a Flash Lite 3.0 file

As mentioned previously, Flash Lite 3.0 allows you to play FLV content from the device's local memory, HTTP location or streaming from Flash Media Server. In this section, I'll describe how to play FLV video content locally from the device's local memory. Follow these steps:

1. Open Adobe Device Central. Select File > New Document In > Flash.
2. Select Flash Lite 3.0 as the Player Version. Since most devices do not yet support Flash Lite 3.0 yet, only the generic Flash Lite 3.0 profiles are available. Choose the first generic profile: Flash Lite 3.0 16 240x320. The Device Profiles tab lists the device's capabilities. The New Document tab displays the device screen dimensions and the Flash content supported by the selected device.
3. Click Create to open a new Flash Lite 3 file in Flash.
4. In Flash, open the Library panel by choosing Window > Library.
5. Click the Library panel menu and choose New Video to create new video object. Name the video object video_flv and set the Type to Video (ActionScript-controlled).
6. Select Insert > New Symbol to create a new movie clip. Name the symbol video_control and specify the type as movie clip. Once it is created, drag the symbol from the Library onto the Stage. While the symbol is selected, assign the name video_mc in the symbol's Instance Name in the Property inspector.
7. Drag the video placeholder inside the movie clip and name the instance video_play.

8. Create a new layer in the Timeline and name it actionscript. Select Frame 1 of the actionscript layer then select Window > Actions to access the Actions panel. Add the stop(); code to Frame 1. Back in the Timeline, select Frame 2 of the actionscript layer. Return to the Actions panel again and type or copy/paste the following code into the Script window to control playback of the video programmatically:

   video_play.attachVideo(str);
   
   stop(); 

9. Add the following code to the second frame of the actionscript layer in main timeline to connect to the FLV video from the local device memory and control the video with the mobile soft keys:

   fscommand2("SetSoftKeys", "", "Exit");
   
   var conVideo:NetConnection;
   var str:NetStream;
   
   var check:Number;
   var videos:String = "test01.flv";
   
   var tmpObj:Object = {};
   
   stop();
   tmpObj.onKeyDown = function():Void  {
        if (Key.getCode() == ExtendedKey.SOFT2) {
             fscommand2("Quit");
             return;
        }
        if (Key.getCode() == ExtendedKey.SOFT1) {
             playVideo(videos);
        }
   };
   Key.addListener(tmpObj);
   function playVideo(file:String):Void {
       if (!conVideo) {
            conVideo = new NetConnection();
            conVideo.connect(null);
       }
        if (!str) {
            str = new NetStream(conVideo);
       }
   str.play(file);
       video_mc.str = str;
       video_mc.play();

   Note: This code assumes that the FLV video and the Flash SWF file are located in the same folder. If you wish to relocate the FLV file to a different location, you can update the code to specify the FLV file's path.

Testing Flash Lite video files in Device Central

Flash offers the option to test your application on the selected device profile by choosing Control > Test Movie. Since we've selected a mobile device profile, Flash opens Adobe Device Central, which is essentially an emulator for the mobile device. In addition to emulating your project as it will display on the selected device, Device Central provides detailed information about the mobile device's capabilities, memory, performance, status, etc. in the right panel and in the left top Device Set panel. You can save your favorite devices or add a new device set to help streamline your workflow.

The emulator in Device Central gives you the interactivity needed to test your file on the mobile device (see Figure 8) by simulating the mobile device functionality—including the key navigations. The only action the emulator does not support is the fscommand, which must be tested directly on the device. However, it is always recommended that you test your application or animation on an actual mobile device as the final testing process, in addition to using Device Central to test the content.

Figure 8. Use Adobe Device Central to test your video content in the selected device profile

Where to go from here

The Flash Lite industry is quickly growing due to the new features available and the increasing number of devices that support Flash. Flash Lite development opens new horizons for many new application ideas. It is an exciting time for mobile developers and with practice you can find a niche working with the newest trends of the market and new mobile customers. To research further, check out the Flash Lite 3.0 features and enhancements.

Also be sure to check out the following two articles to get a deeper understanding of the Flash Lite 2.0 and 3.0 ActionScript used to load video inside Flash Lite applications:

• Authoring mobile video content for Flash Lite 2.x  (by Nick Hippe)
• Flash Lite 3 video capabilities (by Giorgio Natili)

In addition to the articles listed above, here are some other useful articles that concern with working with video content in Flash Lite and using Adobe Device Central:

• Flash Lite 3 web browsability support guidelines for web developers (by Adobe)
• How to play FLV videos from YouTube using Flash Lite 3 (by Rosario Conti)
• Creating your own custom device profile for Adobe Device Central CS3 (by Anant Parekh)

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author