Flash VideoFlash Video

Flash ActionScript Flash ActionScript 3.03.0

Introduction toIntroduction to

Thomas Lövgren, Flash developer

thomas.lovgren@humlab.umu.se

Introduction to Flash Introduction to Flash Video Video

Lecture OutlineLecture Outline

In this lecture we’ll discuss and practice the following topics:In this lecture we’ll discuss and practice the following topics: Introduction to Flash videoIntroduction to Flash video Import dialogue/create video fileImport dialogue/create video file Video componentVideo component Video classes, methods & eventsVideo classes, methods & events Coding a basic video applicationCoding a basic video application Video functions & featuresVideo functions & features FullScreen viewFullScreen view WebcamWebcam Streaming (Flash Media Server)Streaming (Flash Media Server)

Video

Flash VideoFlash Video IntroductionIntroduction: : Most people now access the web using Most people now access the web using

high-bandwidth connections, and web designers and high-bandwidth connections, and web designers and developers are standardizing on the Flash video (FLV) developers are standardizing on the Flash video (FLV) format. Video plays directly in the page through Adobe format. Video plays directly in the page through Adobe Flash Player, without requiring additional plug-insFlash Player, without requiring additional plug-ins

Flash Player supports Flash Player supports Two different video file formats: Two different video file formats: FLVFLV and and F4VF4V Video compressed in H.264 (MPEG-4 Part 10), and audio Video compressed in H.264 (MPEG-4 Part 10), and audio

compressed using AACcompressed using AAC

Audio in Flash Video files is usually encoded as MP3Audio in Flash Video files is usually encoded as MP3 Load Flash video into the application: A way to Load Flash video into the application: A way to

optimize the system (reduce file size)optimize the system (reduce file size)

Video

Video in FlashVideo in Flash Flash Video Flash Video is a technique for dynamically loading video into is a technique for dynamically loading video into

the application – there are two specific techniques for this:the application – there are two specific techniques for this: StreamingStreaming: ex. with Flash Media Server, long clips possible, : ex. with Flash Media Server, long clips possible,

jump to specific positions in stream (no loading process)jump to specific positions in stream (no loading process) Progressive downloadingProgressive downloading: Short clips (ex. YouTube), loading : Short clips (ex. YouTube), loading

processprocess Flash Video can be created and modified for example by: Flash Video can be created and modified for example by:

Sorenson SqueezeSorenson Squeeze Flash CS3/Flash CS4 (File/Import/Import Video )Flash CS3/Flash CS4 (File/Import/Import Video ) Note! Note! Check settings: size/resolution, framerate, encoding, sound etcCheck settings: size/resolution, framerate, encoding, sound etc

Recommended framrate for Flash video: 30 frames/secRecommended framrate for Flash video: 30 frames/seco Video (.avi, wma, quicktime etc) can also be embedded in the Video (.avi, wma, quicktime etc) can also be embedded in the

application/timeline (not recommended)application/timeline (not recommended)

Video

Flash Video playerFlash Video player

There are basically two different techniques for There are basically two different techniques for creating the Flash video player:creating the Flash video player: Video Componenet with skinVideo Componenet with skin

Place a Video Component on stage, and set up Place a Video Component on stage, and set up the path to the clip (the video component the path to the clip (the video component could also be attached/set-up by code)could also be attached/set-up by code)

ActionScript-based video ActionScript-based video (more options)(more options)

Create/program the entire Video player by Create/program the entire Video player by code: Total control, design and improved code: Total control, design and improved functionalities and posibillities etcfunctionalities and posibillities etc

Video

Let’s go to the Import and Create video file part...Let’s go to the Import and Create video file part...

Import video in FlashImport video in Flash(create a Flash video file)(create a Flash video file)

The Video Import (dialogue) in Flash, is quite well The Video Import (dialogue) in Flash, is quite well developed – it allows us to import different kinds of developed – it allows us to import different kinds of video formatsvideo formats

To import a video file, and create a Flash video file To import a video file, and create a Flash video file (flv) in CS3, we first select:(flv) in CS3, we first select: 1) Main Menu: File/Import/Import Video1) Main Menu: File/Import/Import Video 2) Then we select the video/file path2) Then we select the video/file path 3) Next step: Select 3) Next step: Select Progressive download from a web Progressive download from a web

ServerServer 4) Then we set-up the Video Encoding part4) Then we set-up the Video Encoding part 5) Last we can select a skin for our player5) Last we can select a skin for our player 6) Click ok6) Click ok

Video

Video ComponentVideo Component

For using the built-in For using the built-in Video Compoenent Video Compoenent in CS3:in CS3:1) Drag an instance of the FLVPlayback component from 1) Drag an instance of the FLVPlayback component from

the Component Library and place it on stage (or use thethe Component Library and place it on stage (or use the

import dialogue)import dialogue)

2) Select the component, and go to the properties panel2) Select the component, and go to the properties panel

3) Set-up the Path to the video clip (it’s also possible to 3) Set-up the Path to the video clip (it’s also possible to

select a skin in this dialogue)select a skin in this dialogue)

4) Export & Play the clip!4) Export & Play the clip!

It’s also possible to add the componentIt’s also possible to add the component

to stage and style it by codeto stage and style it by code

Video

ActionScript based video ActionScript based video (Coding a video player )(Coding a video player )

There are a couple of classes, methods, and events that There are a couple of classes, methods, and events that are useful for us while working with/programming our are useful for us while working with/programming our Flash video playerFlash video player

The Video ClassThe Video Class: The Video Object : The Video Object plays either: plays either: Recorded Recorded Flash (progressive or streaming FLV) video files stored on a Flash (progressive or streaming FLV) video files stored on a server or locally, or live video captured from a user's server or locally, or live video captured from a user's computercomputer• Video(w, h), attachNetStream(), attachCamera() etcVideo(w, h), attachNetStream(), attachCamera() etc

The NetConnection ClassThe NetConnection Class: Creates a connection : Creates a connection between a Flash Player and the web server/local file between a Flash Player and the web server/local file system or Flash Media Serversystem or Flash Media Server• NetConnection(), connect(), close(), asyncError etc NetConnection(), connect(), close(), asyncError etc

The NetStream ClassThe NetStream Class: : Opens a one-way streaming Opens a one-way streaming connection connection made available by a NetConnection objectmade available by a NetConnection object• attachVideo(), paus(), play(), seek(), time(), onMetaData(), attachVideo(), paus(), play(), seek(), time(), onMetaData(),

onStatus() etconStatus() etc

Video

ActionScript based video ActionScript based video (coding the player)(coding the player)

Here is an example of creating an Here is an example of creating an ActionScript ActionScript based based video application (just with the basic video application (just with the basic playing functionality)playing functionality)

//create a video object on stage//create a video object on stagevar my_video:Video = new Video();var my_video:Video = new Video();

//create a netconnection object, direct playing video form server//create a netconnection object, direct playing video form servervar my_nc:NetConnection = new NetConnection(); var my_nc:NetConnection = new NetConnection(); my_nc.connect(null); my_nc.connect(null); //open connection//open connection

//create a netstream object for the video stream//create a netstream object for the video streamvar my_ns:NetStream = new NetStream(my_nc); var my_ns:NetStream = new NetStream(my_nc); my_ns.client = this; my_ns.client = this; //assign client object properties//assign client object properties

//attatch the netstream to the video object //attatch the netstream to the video object my_video.attachNetStream(my_ns); my_video.attachNetStream(my_ns); addChild(my_video); addChild(my_video); //add to display list //add to display list

my_ns.play("nero_720x480_tt.flv"); my_ns.play("nero_720x480_tt.flv"); //play the clip//play the clip

Video

NoteNote! It’s recommended that we also uses ! It’s recommended that we also uses Events/functionsEvents/functions to check to check for Async Errors etcfor Async Errors etc

Play, pause & fast Play, pause & fast forwardforward

(coding the player)(coding the player) For basic functions like play, pause, fast forward For basic functions like play, pause, fast forward we can simply add the buttons and event we can simply add the buttons and event handler/functions like:handler/functions like:

//add listeners to buttons, call handler/functions//add listeners to buttons, call handler/functionsplay_btn.addEventListener(MouseEvent.MOUSE_DOWN, playVideo);play_btn.addEventListener(MouseEvent.MOUSE_DOWN, playVideo);pause_btn.addEventListener(MouseEvent.MOUSE_DOWN, pauseVideo);pause_btn.addEventListener(MouseEvent.MOUSE_DOWN, pauseVideo);

//handler/function for playing video//handler/function for playing videofunction playVideo(event:MouseEvent):void{function playVideo(event:MouseEvent):void{

my_ns.play("cuepoints.flv"); my_ns.play("cuepoints.flv"); //video clip//video clip}}

//handler/function for pausing the video//handler/function for pausing the videofunction pauseVideo(event:MouseEvent):void{function pauseVideo(event:MouseEvent):void{

my_ns.pause(); my_ns.pause(); //use netstream pause method//use netstream pause method}}

______________________________________________//for fast forward: we can use a condition inside a frame loop like://for fast forward: we can use a condition inside a frame loop like:if(fastForward){if(fastForward){

my_ns.seek(my_ns.time + 1.5); my_ns.seek(my_ns.time + 1.5); //fast forward//fast forward}}

Video

MetaData, Status & MetaData, Status & CaptionsCaptions

(coding the player)(coding the player) There are a couple of more interessting features for There are a couple of more interessting features for the Video-related classes that can be useful, for the Video-related classes that can be useful, for example:example:

onMetaDataonMetaData: When a Flash video playing, it’s possible : When a Flash video playing, it’s possible to to receivereceive descriptive information embedded in the file descriptive information embedded in the file like: duration, width, height etclike: duration, width, height etc

onStatusonStatus: : Dispatched Dispatched when a NetStream object is when a NetStream object is reporting its status or error conditionreporting its status or error condition

CuePointsCuePoints: We can also add/embed : We can also add/embed cuePointcuePoints into s into the video file at specific positions, these can be the video file at specific positions, these can be accessed like:accessed like: my_ns.client.onCuePoint = ns_onCuePoint my_ns.client.onCuePoint = ns_onCuePoint //call function//call function

CaptionsCaptions: Text-captions for a Flash video can be set : Text-captions for a Flash video can be set up for example in a XML file, than we can access it up for example in a XML file, than we can access it like:like:cap = new FLVPlaybackCaptioning(); cap = new FLVPlaybackCaptioning(); //create the caption object//create the caption objectcap.source = "../captions/nero_timed_text.xml"; cap.source = "../captions/nero_timed_text.xml"; //get data//get data

Video

FullScreen View FullScreen View For For FullScreen View FullScreen View functionallity - we first need to functionallity - we first need to

add a line in the HTML file (2 places)add a line in the HTML file (2 places) <param name=”allowFullScreen” value=”true” /><param name=”allowFullScreen” value=”true” />

Programing of the toggle function for displaying Programing of the toggle function for displaying video in FullScreen, can be done like this in the FLA video in FullScreen, can be done like this in the FLA file (Main stage):file (Main stage):

import flash.display.StageDisplayState;import flash.display.StageDisplayState;

function goFullScreen():void{function goFullScreen():void{    if (stage.displayState == StageDisplayState.NORMAL) {    if (stage.displayState == StageDisplayState.NORMAL) {        stage.displayState=StageDisplayState.FULL_SCREEN;        stage.displayState=StageDisplayState.FULL_SCREEN;    } else {    } else {        stage.displayState=StageDisplayState.NORMAL;        stage.displayState=StageDisplayState.NORMAL;    }    }}}

toggleScreen_btn.addEventListener(MouseEvent.CLICK, toggleScreen)toggleScreen_btn.addEventListener(MouseEvent.CLICK, toggleScreen)

function toggleScreen(event:MouseEvent):void{function toggleScreen(event:MouseEvent):void{    goFullScreen();    goFullScreen();

}}

Video

WebcamWebcam By using the Camera class, we can attach a By using the Camera class, we can attach a

WebcamWebcam and broadcast a and broadcast a cam-streamcam-stream in the in the applcation (local connection) applcation (local connection)

Here is a code example of this (there are a couple Here is a code example of this (there are a couple of parameters we can use for optimizing)of parameters we can use for optimizing)

var my_video:Video = new Video(320, 240); var my_video:Video = new Video(320, 240); //create video object//create video object

var my_cam:Camera = Camera.getCamera(); var my_cam:Camera = Camera.getCamera(); //detect/get camera//detect/get camera

////higher image quality, lower motion qualityhigher image quality, lower motion quality

my_cam.setQuality(0, 100); my_cam.setQuality(0, 100); //bandwidth, quality//bandwidth, quality

my_cam.setMode(320, 240, 30, true); my_cam.setMode(320, 240, 30, true); //// w, h, video fps, favor area w, h, video fps, favor area

my_video.attachCamera(my_cam); my_video.attachCamera(my_cam); //attach camera to video object//attach camera to video object

addChild(my_video); addChild(my_video); //add to display list//add to display list

Video

Streaming & live-Streaming & live-streamingstreaming

The The Flash Media Streaming Server Flash Media Streaming Server software software streams protected, high-quality live and on-demand streams protected, high-quality live and on-demand videovideo

By using the FMS we can play long video-streams By using the FMS we can play long video-streams (without any loading), with functions like: Fast (without any loading), with functions like: Fast seek, jump to position, start stream at a specific seek, jump to position, start stream at a specific position, select a part of a stream, detect user position, select a part of a stream, detect user bandwidth etc bandwidth etc

The FMS also supports a technique for multi-way The FMS also supports a technique for multi-way applications, including webcam chat, video applications, including webcam chat, video blogging, multiplayer games etcblogging, multiplayer games etc

Video

Streamin ApplicationStreamin Application Here is an example of a Flash-based Here is an example of a Flash-based streaming streaming

applicationapplication, programmed for/connected to FMS and , programmed for/connected to FMS and a database/admin interface a database/admin interface

The application has functions like: The application has functions like: cuePoint systemcuePoint system, , search & sorting, statistics info, sv and eng search & sorting, statistics info, sv and eng languages, mailing functions etclanguages, mailing functions etc

Video

Streaming SystemStreaming System Example of a Flash-based Example of a Flash-based streaming system streaming system using using

Flash Media ServerFlash Media Server: Streaming, live-streaming, : Streaming, live-streaming, webcam-conference applications programmed webcam-conference applications programmed for/conneted to a database/admin interfacefor/conneted to a database/admin interface

Video