1 / 16

Flash Video

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

amity
Télécharger la présentation

Flash Video

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Introduction to Flash ActionScript 3.0 Flash Video Thomas Lövgren, Flash developer thomas.lovgren@humlab.umu.se

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

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

  4. 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) Video

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

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

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

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

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

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

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

  12. 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(); }

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

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

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

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

More Related