Mobile Me(dia)
Shawn Van Every Shawn.Van.Every@nyu.edu
Spring 2008
H79.2690.1
Week 9 - Flash Lite
Flash Lite Introduction
Flash is a relatively newcomer to the mobile development scene but it has made some big waves already. Since there is a large community of developers and designers who use Flash in their daily lives, being able to run Flash based applications on mobile phones is a big deal.
Aside from that, Flash, due to it's history is a pretty strong fit for mobile development, it has a small footprint, the apps are small, it is somewhat close to a write once run anywhere type of platform and so on. It is also very strong in some areas that Java has been weak such as animation and media playback.
In our ongoing quest to utilize the mobile device as media centric device, it is worthwhile to look at Flash, especially now that Flash Lite 3 supports FLV content (the seeming format of choice for web based video) along with MPEG-4 (variants such as 3gp and 3g2 depending on the device).
Currently Flash Lite 3 does not come pre-installed on many devices (perhaps the N95 8GB model) but can be downloaded for free from Adobe: Download Adobe Flash Lite 3 Developer Edition (This is an application that must be installed on the phone.)
To author for Flash Lite 3 you need to use Flash CS3 or greater. You can auther for previous versions of Flash Lite using previous versions of Flash but you loose out on many of the goodies that Flash Lite 3 offers.
Hello World with Flash Lite (using Flash CS3)
- Open Flash CS3 (Professional)
- New File, Flash File (Mobile)
- Choose Flash 3 device, set Player Version to Flash Lite 3.0, ActionScript 2.0, Standalone Player
- Click "Create"
- This opens up Flash with the settins for publishing to that device (any Flash Lite 3 phone
- In the Tools panel, select the "T" for text and click on the workspace. Type in "Hello World".
- Make sure in the properties panel that it is "Static Text"
- Under "Control" select "Test Movie" and it will open in the emulator portion of the Device Central application.
- Following that, back in the Flash program you can publish and send it to your phone for testing
More Information
Mobile and Devices Developer Center
Getting Started with Adobe Flash Lite
Book: Foundation Flash Applications for Mobile Devices
Flash Lite Video Player
This describes how to make a video player in Flash Lite 3.
- Create a Flash document as described above.
- In the Library panel, select "New Video", leave it's default name and make sure "Video (ActionScript-controlled)" is selected. Don't select Bundle source in SWF since we are going to loading from the network.
- Drag the new item into your workspace and position it where you would like.
- Select it and in the properties panel give it an instance name such as "test_video" (if you want it to work out of the box with the actionscript we are using below).
- Create a new layer and select the actions panel
- In that panel, paste in the below actionscript code which is commented.
- Following that, test and publish as above...
ActionScript Code
stop(); // Stop the animation on this frame
// fscommand2 function allows lower level access to the device
// SetSoftKeys sets the softkey of the device to be used by flash
// http://livedocs.adobe.com/flashlite/2/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000353.html
// All of the fscommand2 possibilities:
// http://livedocs.adobe.com/flashlite/2/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000353.html
fscommand2("SetSoftKeys", "", "Exit");
// A good example:
// http://www.metah.ch/blog/2006/08/23/meeting-fscommand2-with-flash-lite-20/
// Objects for opening the video stream
var ncVideo:NetConnection ;
var ns:NetStream;
// A variable for checking the playback progress
var check:Number;
// Object with onKeyDown function to test the softkey pressed
var tmpObj:Object = {};
tmpObj.onKeyDown = function():Void{
if (Key.getCode() == ExtendedKey.SOFT2) {
fscommand2("Quit");
return;
}
// Get the actual key pressed, chr turns it from ASCII to a number
var index:Number = chr(Key.getCode());
// Make sure it is a number and in the range we want
if(!isNaN(index) && (index >= 1 && i <= 2)){
// 0 to 1
index = index - 1;
// Call the playVideo function
playVideo(index);
}
if(!check)clearInterval(check);
check = setInterval(getTimeInfo, 300, ns, video_txt);
}
Key.addListener(tmpObj); // Tell flash to call our tmpObj.onKeyDown function
// Here is our playVideo function
function playVideo(video_index:Number):Void
{
// Give the path to the video based on the passed in video_index
if (video_index == 0)
{
// An FLV video which uses NetConnection and NetStream
// Initialize the NetConnection object if it isn't already
if(!ncVideo)
{
ncVideo = new NetConnection();
ncVideo.connect(null);
}
// Initialize the NetStream object if it isn't already
if(!ns){
ns = new NetStream(ncVideo);
}
ns.play("http://openvlog.mobvcasting.com:80/posts/attachment_1153009234_348.3gp.flv");
test_video.attachVideo(ns); // Tell our video object to play that video
}
else
{
// A 3GP video, doesn't uses NetConnection or NetStream, just the player object
// Don't use netstream and netconnection for 3gp/mp4 or non-flv content
test_video.play("http://openvlog.mobvcasting.com:80/posts/attachment_1153009234_348.3gp");
}
//test_video.play("http://openvlog.mobvcasting.com/posts/attachment_1186624834_963.3gp.flv");
}
function getTimeInfo(ns:NetStream, txt:TextField):Void{
txt.text = "Playing video: " + Math.round(ns.time);
}
More Information
Creating video content for mobile devices
Flash Lite 3 video capabilities
How to play FLV videos from YouTube using Flash Lite 3
Authoring mobile video content for Flash Lite 2.x