Flash video
1 / 16

Flash Video - PowerPoint PPT Presentation

  • Uploaded on

Introduction to. Flash ActionScript 3.0. Flash Video. Thomas Lövgren, Flash developer thomas.lovgren@humlab.umu.se. Introduction to Flash Video . Lecture Outline In this lecture we’ll discuss and practice the following topics: Introduction to Flash video

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Flash Video' - amity

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Flash video

Introduction to

Flash ActionScript 3.0

Flash Video

Thomas Lövgren, Flash developer


Introduction to flash 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


Streaming (Flash Media Server)


Flash video1
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 in flash
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 )

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)


Flash video player


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...

Import video in flash create a flash video file
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 component


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

Actionscript based video coding a video player


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

Actionscript based video coding the player


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


    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

Play pause fast forward coding the player


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:


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


Metadata status captions coding the player


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 receivedescriptive 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

Fullscreen view


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();





  • 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

Streaming live streaming


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

Streamin application


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

Streaming system


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