Introduction to
Flash ActionScript 3.0
Flash Video
Thomas Lövgren, Flash developer
thomas.lovgren@humlab.umu.se
Video
Introduction to Flash Video

Lecture Outline
In this lecture we’ll discuss and practice the following topics:









Introduction to Flash video
Import dialogue/create video file
Video component
Video classes, methods & events
Coding a basic video application
Video functions & features
FullScreen view
Webcam
Streaming (Flash Media Server)
Video
Flash Video
Introduction: Most people now access the web using high-bandwidth connections,
and web designers and developers are standardizing on the Flash video (FLV)
format. Video plays directly in the page through Adobe Flash Player, without
requiring additional plug-ins
 Flash Player supports

 Two different video file formats: FLV and F4V
 Video compressed in H.264 (MPEG-4 Part 10), and audio compressed using
AAC
 Audio in Flash Video files is usually encoded as MP3
 Load Flash video into the application: A way to optimize the system
(reduce file size)
Video
Video in Flash


Flash Video is a technique for dynamically loading video into the
application – there are two specific techniques for this:
 Streaming: ex. with Flash Media Server, long clips possible, jump
to specific positions in stream (no loading process)
 Progressive downloading: Short clips (ex. YouTube), loading process
Flash Video can be created and modified for example by:
 Sorenson Squeeze
 Flash CS3/Flash CS4 (File/Import/Import Video )


o
Note! Check settings: size/resolution, framerate, encoding, sound etc
Recommended framrate for Flash video: 30 frames/sec
Video (.avi, wma, quicktime etc) can also be embedded in the
application/timeline (not recommended)
Video
Flash Video player
 There are basically two different techniques for creating the
Flash video player:
 Video Componenet with skin
Place a Video Component on stage, and set up the path to
the clip (the video component could also be attached/set-up
by code)

ActionScript-based video (more options)
Create/program the entire Video player by code: Total
control, design and improved functionalities and posibillities
etc

Let’s go to the Import and Create video file part...
Video
Import video in Flash
(create a Flash video file)


The Video Import (dialogue) in Flash, is quite well developed – it
allows us to import different kinds of video formats
To import a video file, and create a Flash video file (flv) in CS3, we
first select:






1) Main Menu: File/Import/Import Video
2) Then we select the video/file path
3) Next step: Select Progressive download from a web Server
4) Then we set-up the Video Encoding part
5) Last we can select a skin for our player
6) Click ok
Video
Video Component
 For using the built-in Video Compoenent in CS3:
1) Drag an instance of the FLVPlayback component from
the Component Library and place it on stage (or use the
import dialogue)
2) Select the component, and go to the properties panel
3) Set-up the Path to the video clip (it’s also possible to
select a skin in this dialogue)
4) Export & Play the clip!
 It’s also possible to add the component
to stage and style it by code
Video
ActionScript based video
(Coding a video player )
 There are a couple of classes, methods, and events that are useful for
us while working with/programming our Flash video player
 The Video Class: The Video Object plays either: Recorded Flash
(progressive or streaming FLV) video files stored on a server or locally,
or live video captured from a user's computer
• Video(w, h), attachNetStream(), attachCamera() etc
 The NetConnection Class: Creates a connection between a Flash
Player and the web server/local file system or Flash Media Server
• NetConnection(), connect(), close(), asyncError etc
 The NetStream Class: Opens a one-way streaming connection made
available by a NetConnection object
• attachVideo(), paus(), play(), seek(), time(), onMetaData(), onStatus() etc
Video
ActionScript based video
(coding the player)
 Here is an example of creating an ActionScript based video
application (just with the basic playing functionality)
//create a video object on stage
var my_video:Video = new Video();
//create a netconnection object, direct playing video form server
var my_nc:NetConnection = new NetConnection();
my_nc.connect(null); //open connection
//create a netstream object for the video stream
var my_ns:NetStream = new NetStream(my_nc);
my_ns.client = this; //assign client object properties
//attatch the netstream to the video object
my_video.attachNetStream(my_ns);
addChild(my_video); //add to display list
my_ns.play("nero_720x480_tt.flv"); //play the clip

Note! It’s recommended that we also uses Events/functions to check
for Async Errors etc
Video
Play, pause & fast forward
(coding the player)
 For basic functions like play, pause, fast forward we can simply
add the buttons and event handler/functions like:
//add listeners to buttons, call handler/functions
play_btn.addEventListener(MouseEvent.MOUSE_DOWN, playVideo);
pause_btn.addEventListener(MouseEvent.MOUSE_DOWN, pauseVideo);
//handler/function for playing video
function playVideo(event:MouseEvent):void{
my_ns.play("cuepoints.flv"); //video clip
}
//handler/function for pausing the video
function pauseVideo(event:MouseEvent):void{
my_ns.pause(); //use netstream pause method
}
_______________________
//for fast forward: we can use a condition inside a frame loop like:
if(fastForward){
my_ns.seek(my_ns.time + 1.5); //fast forward
}
Video
MetaData, Status & Captions
(coding the player)
 There are a couple of more interessting features for the Videorelated classes that can be useful, for example:
 onMetaData: When a Flash video playing, it’s possible to receive
descriptive information embedded in the file like: duration, width,
height etc
 onStatus: Dispatched when a NetStream object is reporting its
status or error condition
 CuePoints: We can also add/embed cuePoints into the video file at
specific positions, these can be accessed like:
my_ns.client.onCuePoint = ns_onCuePoint //call function
 Captions: Text-captions for a Flash video can be set up for
example in a XML file, than we can access it like:
cap = new FLVPlaybackCaptioning(); //create the caption object
cap.source = "../captions/nero_timed_text.xml"; //get data
Video
FullScreen View
 For FullScreen View functionallity - we first need to add a line in
the HTML file (2 places)
<param name=”allowFullScreen” value=”true” />
 Programing of the toggle function for displaying video in
FullScreen, can be done like this in the FLA file (Main stage):
import flash.display.StageDisplayState;
function goFullScreen():void{
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState=StageDisplayState.FULL_SCREEN;
} else {
stage.displayState=StageDisplayState.NORMAL;
}
}
toggleScreen_btn.addEventListener(MouseEvent.CLICK, toggleScreen)
function toggleScreen(event:MouseEvent):void{
goFullScreen();
}
Video
Webcam
 By using the Camera class, we can attach a Webcam and broadcast a
cam-stream in the applcation (local connection)
 Here is a code example of this (there are a couple of parameters we
can use for optimizing)
var my_video:Video = new Video(320, 240); //create video object
var my_cam:Camera = Camera.getCamera(); //detect/get camera
//higher image quality, lower motion quality
my_cam.setQuality(0, 100); //bandwidth, quality
my_cam.setMode(320, 240, 30, true); // w, h, video fps, favor area
my_video.attachCamera(my_cam); //attach camera to video object
addChild(my_video); //add to display list
Video
Streaming & live-streaming
 The Flash Media Streaming Server software streams protected, highquality live and on-demand video
 By using the FMS we can play long video-streams (without any
loading), with functions like: Fast seek, jump to position, start
stream at a specific position, select a part of a stream, detect user
bandwidth etc
 The FMS also supports a technique for multi-way applications,
including webcam chat, video blogging, multiplayer games etc
Video
Streamin Application
 Here is an example of a Flash-based streaming application, programmed
for/connected to FMS and a database/admin interface
 The application has functions like: cuePoint system, search & sorting,
statistics info, sv and eng languages, mailing functions etc
Video
Streaming System
 Example of a Flash-based streaming system using Flash Media Server:
Streaming, live-streaming, webcam-conference applications
programmed for/conneted to a database/admin interface