Adding Flash Video to a Mobile Application

Adding Flash Video toa Mobile Application

In this unit, you will learn how to use the Flash video capabilities (FLV) of the Flash Lite player.

Objectives

After completing this unit, you should be able to:•Understand how to create FLVs using the Flash CS Video Encoder

•Understand how to build FLVs for use in the Flash Lite player

•Display FLVs in the Flash Lite player using ActionScript

Using Flash Video in Flash Lite

Flash Lite 2.x supported only device video, which means it relied on the actual mobile device to decode and render video. The old player was limited by the video formats supported by a specific device.

Flash Lite 3.0 adds support for Flash Video (FLV) using versions of the ON2 and Sorenson codecs optimized for mobile devices. FLV video 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! As long as the device has Flash Lite 3.0, FLV video will render.

Understanding Digital Video

Digital video is encoded and decoded through a CODEC which stands for compression/decompression. It is possible to embed Flash Video files directly into a SWF but this greatly increases file size and is best for very short videos..

•Each streaming solution uses a unique CODEC

•Flash Lite 3.0 uses version of the ON2 and Sorenson CODECs

•The size of the video is dependent on the quality, higher quality takes requires larger file sizes

•Quality can also be determined by the frame rate, data rate, and the CODEC used

Understanding Flash Video

Flash Video (FLV) is a binary format that is compressed for distribution across mobile devices and the internet.

Flash video:

•Can be played on a layer or inside of a movie clip

•Within a movie clip

•Can be scripted

•Controlled just like any other object in a SWF file

•Embedded with cue points

•The FLV format automatically compresses video

Understanding Streaming Video

Streaming video is the distribution of real time or recorded content using the data capabilities of the device.

•The Flash Video file is transferred using a server application

•The Flash Video is displayed in the Flash Lite player

•Buffering is used to store enough data for the stream to start playing and finish through completion

Understanding Streaming Video

•For limited scalability, progressive download can be used to distribute FLVs with just a web server.

•Video can be streamed using the Adobe Flash Media server

•Streaming services can be out sourced to a content delivery network such as VitalStream or Akamai

Understanding Flash Video in Flash Lite

There are several Flash video features available in Flash CS3 but not available in Flash Lite:

•RTMPT and RTMPS connections are not supported in Flash Lite; only RTMP is supported. If you attempt to connect to a Flash Media Server using an HTTP tunneling protocol (RTMPT) or SSL (RTMPS) connection, your connection defaults to an RTMP connection

•Two-way communication between clients is not supported; only one-way communication is supported in Flash Lite.

Understanding Flash Video in Flash Lite

•Multiple Flash Media Server connections are supported, but may be of limited use on mobile devices due to device limitations

•The recording of video is not supported in Flash Lite

•Alpha channel video is not supported in Flash Lite. The ON2 codec used for Flash on the desktop supports an alpha channel, but the version used for Flash Lite 3.0 does not.

•The FLVPlayback components are not supported in Flash Lite 3.0.

Understanding Flash Video in Flash Lite

•The ActionScript Camera class, which is used in the desktop version of the Flash Player to connect to a user's local camera and broadcast the video, is not supported in Flash Lite.

Using the Adobe Flash CS3 Video encoder

Flash Video can be created from other video formats by using the Adobe Flash CS3 video encoder that ships with Adobe Flash CS3 or FLV can be outputted directly from many products such as Adobe AfterEffects, Adobe Premiere, or Apple Final Cut Pro.

Using the Adobe Flash CS3 Video encoder

The encoding profiles in the video encoder are based on the Flash Player version which determine the level of compression. Both are compatible with Flash Lite 3.0

Flash Video Codec Setting

Using the Adobe Flash CS3 Video encoder

The text box below the selected profile allows you to review the settings for encoding the video including:

•Flash Player version

•The CODEC being used

•The Video bit rate

•The Audio encoding

Flash Video Encoding Settings

Importing Flash Video

You can use the import video wizard in Flash CS3 to import FLV files into a mobile application. A new video symbol that is linked to your FLV file will be created in the library, and you can add this symbol to a timeline.

Importing Flash Video

Video added in this way is embedded in the SWF and will increase the file size of your SWF and is not recommended except for very small clips.

Walkthrough 1: Encoding Video

•Encode video with the Flash 8 video encoder

•Explore and change the setting necessary

•Convert a video to several Flash video files of appropriate bandwidth

Advanced Encoding Settings

Videos can have different movement, colors, effects, audio and a host of other differences. In order to achieve the best performance on a mobile device, each video should be tweaked individually and the advanced encoding settings, as shown below, allow this.

Understanding Data Rates

The data rate controls the amount of data transfer per second and can affect the quality of Flash video. If it is set too low, not enough information will be processed by the Flash Lite player for smooth video. If it is set too high, you will be wasting very limited bandwidth with no quality increase. The following formula can be used to calculate data rates.

datarate(bps) = width * height * color depth * fps

/ compression

Understanding Data Rates

A video with a width of 320, a height of 240, a color depth of 24, and a frame rate of 15 with a compression of 60 would have a data rate of 461 kilobytes per second.

When you change the quality of the video, using the drop down list, the data rate will change automatically. You can also create custom settings.

Understanding Frame Rates

The frame rate is the number of frames that appear per second in the video. In the advanced encoding settings, you can choose or enter a value. The higher the frame rate, the better quality of the video though the difference may not even register to the human eye. On mobile devices, this may be negated by the device CPU power as well as bandwidth limits imposed by the carrier. A lower frame rate is usually ideal on mobile devices because it will reduce the file size and it will be balanced by device bandwidth and CPU power.

Walkthrough 2: Using Advanced Encoding Settings

•Tweak the Advanced Encoding Settings for the best performance on a mobile device.

•Test the video

Delivering Streaming Video

Embedding Flash video in the directly in the SWF is generally discouraged because:

•There is a duration limit (16,000 frames) for embedded video

•There can be synchronization issues with embedded video

•The frame rate must be the same as the timeline

•Embedding video can result in very large SWF files

•Video has to be downloaded completely before it will play

•Entire video must fit into the limited RAM of the device

Understanding Progressive download

With progressive download, which is a form of low capacity streaming, you are able to keep the Flash video file (FLV) external to the Flash document. These FLVs can be stored on any HTTP server or on the local file system of the device. In Flash Lite 3.0, there is no security sandbox in place for accessing these FLV files.

In Flash Lite 3.0, you must use ActionScript and the NetConnection classes to display the FLV. The Flash video components are not supported in Flash Lite 3.0.

Understanding Progressive download

With progressive download:

•Playback starts before the file is completely downloaded

•The video starts playing quickly

•The video file and the SWF file remain separate

•The NetStream class is used to play, pause and close

Understanding Progressive download

•Seek is limited to loaded progress point

•There are no duration limits for the video except for the limits of the device.

•Same quality as streaming video

•The video has an autonomous frame rate

•No additional services required

•The entire video must fit into the RAM of the device

Understanding Flash Video Streaming

Streaming Flash video offer a number of advantages over progressive download, including:

•The video starts playing faster

•Streaming uses less device memory (RAM)

•The video can be secured

•Streaming offers better network usage

•Servers can automatically detect bandwidth

•Servers offer ability to track, log and report on the video

Understanding Flash Video Streaming

•The servers offer advanced monitoring

•Server side based programming environment through Flash Media Server (FMS)

There are two ways to stream Flash video:

•Using the Flash Media Server (FMS)

•Using a Flash video Streaming service such as Akamai or VitalStream

Controlling Flash Video with ActionScript

To control the playback of external Flash video files at runtime, use the NetConnection and NetStream ActionScript classes. You use the NetConnection class to establish a connection, and then use the NetStream object to play back streaming video (FLV) files either locally or from a server.

Flash Lite 3.0 supports all of the methods, properties and events documented in the ActionScript 2.0 Language Reference, with the exception of the checkPolicyFile property, which Flash Lite 3.0 does not support.

Using the NetConnection Class

Flash Lite 3.0 supports two NetConnection methods: connect() and close(). The connect() method opens a connection to a server, and the close() method closes the connection that was opened locally or with the server.

Using the NetStream Class

These are the NetStream class methods needed to play FLVs:

•close(): Stops playing all data on the stream, and sets the time property to 0

•pause(): Pauses or resumes playback of a stream.

•play(): Begins playback of an external video (FLV) file.

Using the NetStream Class

•seek(): Seeks the keyframe closest to the specified number of seconds from the beginning of the stream.

•setBufferTime(): Specifies how long to buffer messages before starting to display.

These are the NetStream class properties needed to play FLVs:

•bufferLength: The number of seconds of data currently in the buffer.

•bufferTime: The number of seconds assigned to the buffer by setBufferTime().

Using the NetStream Class

•bytesLoaded: The number of bytes of data that have been loaded into the player.

•bytesTotal: The total size in bytes of the file being loaded into the player.

•currentFPS: The number of frames per second being displayed.

•seek(): Seeks the keyframe closest to the specified number of seconds from the beginning of the stream.

Using the NetStream Class

•time: The position of the playhead, in seconds.

•setBufferTime(): Specifies how long to buffer messages before starting to display.

These are the NetStream class events needed to play FLVs:

•onStatus: Invoked when a status change or error is posted for the NetStream object.

•onCuePoint: Invoked when an embedded cue point is reached while playing an FLV file.

•onMetaData: Invoked when the Flash Player receives descriptive information embedded in the FLV file.

Using the Video class

The existing Flash Lite 2.x Video class has one new method that has been added for Flash Lite 3.0: the attachVideo method, which specifies the stream (source) to be displayed within the boundaries of the Video object created on the Stage. The following code opens a connection to play the video2.flv file, located in the pre created video object on the Stage. Select New Video from the Library panel's options menu to create a new Video object, and give it the instance name my_video.

Using the Video class Code

var connection_nc:NetConnection = new NetConnection();

connection_nc.connect(null);var stream_ns:NetStream = new NetStream(connection_nc);

my_video.attachVideo(stream_ns);stream_ns.play("video2.flv");

Walkthrough 3: Using ActionScript to play progressive or streaming video

•Create a video object on the Stage

•Load the video from the file system using ActionScript

Summary

v

•FLVs can be created from most video formats using the Flash CS3 video encoder

•FLVs can be outputted directly from many products.

•Smaller data and frame rates work better with mobile video.

•Embedding video into a SWF is only good for very short clips.

•Progressive downloading allows you to keep the SWF and the FLV separate and offers better performance than embedding the video.

Summary

•Using a streaming server will offer better video performance and better security.

•The Flash CS3 video components do not work in Flash Lite 3.0

•You should create a video object on the Stage to hold the video stream which is created with ActionScript.

•The NetConnection class creates a connection to the video server.

•The NetStream class allows you to control the video with methods such as play() and pause().