Flash Video Flash ActionScript 3.0 Introduction to Thomas Lövgren, Flash developer

Introduction to Flash Video  Lecture Outline In this lecture we’ll discuss and practice the following topics: Introduction to Flash video Introduction to Flash video Import dialogue/create video file Import dialogue/create video file Video component Video component Video classes, methods & events Video classes, methods & events Coding a basic video application Coding a basic video application Video functions & features Video functions & features FullScreen view FullScreen view Webcam Webcam Streaming (Flash Media Server) 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: 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: Flash Video can be created and modified for example by:  Sorenson Squeeze  Flash CS3/Flash CS4 (File/Import/Import Video ) Note! Check settings: size/resolution, framerate, encoding, sound etc Note! Check settings: size/resolution, framerate, encoding, sound etc Recommended framrate for Flash video: 30 frames/sec Recommended framrate for Flash video: 30 frames/sec o 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 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 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 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: To import a video file, and create a Flash video file (flv) in CS3, we first select: 1) Main Menu: File/Import/Import Video 1) Main Menu: File/Import/Import Video 2) Then we select the video/file path 2) Then we select the video/file path 3) Next step: Select Progressive download from a web Server 3) Next step: Select Progressive download from a web Server 4) Then we set-up the Video Encoding part 4) Then we set-up the Video Encoding part 5) Last we can select a skin for our player 5) Last we can select a skin for our player 6) Click ok 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 the Component Library and place it on stage (or use the import dialogue) 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) 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 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 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 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 Video Note! It’s recommended that we also uses Events/functions to check for Async Errors etc for Async Errors etc

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 Video- related 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 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)  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, high- quality 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 Video