SIM1 - Class 04 - 2011

Subject SIM1 - Interactive Media 1
Competencies

BSBINN502A.1 - Build and Sustain and Innovative Work Environment (part 1)
CUFDIG506A.1 - Design Interaction (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/SIM1
                         (username & password = student)

Flash - optimising and using video

Today we will be covering the following topics:

 

Video in Flash

The Flash Player is capable of playing back video. Although it's possible to embed video content within an .swf file, most Flash video content is stored in Flash video files (.flv files) and loaded into the Flash Player at runtime using ActionScript. By loading .flv files at runtime, you have smaller .swf files, more flexible content management, and greater control over the loading and playback of the video content. There are times though when it is useful to import video to the Library, and use it within a movieclip - generally when you have short clips of video that you want to integrate with other media content in the Flash file as we will see today. Importing long video clips with sound into flash can lead to audio synchronisation issues where the sound and image don't match up, so you have to consider a few things when deciding how to work with your video in Flash.

Flash video loaded from .flv files has two faces: progressive download and streaming. Streaming .flv video requires a streaming server, such as Flash Media Server. In contrast, progressive download doesn't require any additional software. However, for the most part, the ActionScript required to work with streaming and progressive download video is identical. The notes today look at how to work with progressive download video and focus exclusively on working with .flv files.

To create an FLV file from your video content, just use the Adobe Media Encoder (it should be part of the Adobe suite of apps) and convert your video file to FLV. Make sure it's the FLV format, not the F4V format because that cannot be imported directly into Flash - although you can use F4V files as external video with Flash. You may have to play around with the settings to get the right properties to suit your requirements. you can try this yourself with most video file formats. If you don't have one handy, grab this sample video file and open it with the Media Encoder.

See Chapter 16. Video in the Actionscript 3.0 Cookbook for a great introduction to video in Flash. (see the E-Book provided for details)

 

Importing Video to the Library

It used to be easier to import video to the Library in previous versions of Flash because you could import a few file formats. Now you can only import FLV files so you must encode your video first.

I like to import video when I use blends and layering with other content in my Flash file - so usually these are artistic, interactive pieces that I am creating. The video files I use are usually short loops without sound. The benefit of importing to the library is that you can then place the video into a movieclip and use AS3 to control and manipulate your movieclip properties.

Exercise 1 - internal video

Import an FLV provided, or use your own if you have one. When the import Video wizard comes up, choose "Embed FLV in SWF and play in timeline". once you have your video in the Library with its related movieclip, you can place a movieclip instance on the stage and give it an instance name.

 

You can set blends and other properties in the properties panel, or use AS3 to change properties like alpha, scale, position etc.

One popular trick is to use the mouse position to create a scrubber effect. you can go to a movieclip frame based upon your mouse position on the X or Y coordinates of the stage:

//vidpaint is the instance name of the movieclip with the video inside
//create an enter frame listener

vidpaint.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
//this function calculates that the 447 frames of the video divided by the stage width of 800 will give us a ratio
//to use with the mouseX position to scrub the video back and forth

var numFrames:Number = 447;
var myRatio:Number = numFrames/stage.stageWidth;
var myPos:Number;
function enterFrameHandler(e:Event):void {
trace(int(stage.mouseX * myRatio));
myPos = int(stage.mouseX * myRatio);
e.target.gotoAndStop(myPos);
}

Try some other property changes with code.

Save and test.

See the SWF
Get the FLA

other fun things to do with internal video in Flash:

 

 

Playing External Video

There are lots of things you can do with external video in AS3 - many more than previous versions of Flash. If you just want to play back a video with normal controls, then you can just use the import video wizard and select the "load external video with playback component" which does all the work for you.
See SWF & FLA for this example. Note the extra SWF file needed for the video playback control "skin" - SkinOverAllNoFullNoCaption.swf. This file gets automatically added to your folder when you select the playback component. It may have a different name depending on which skin you choose. Make sure you upload it to your website with your SWF file and keep them both in the same folder, otherwise the video controls won't work.

But if you want more control over your video to do more creative and interesting things with it, then you can use AS3 & make custom controls. We will try a few things out today in this exercise, although this is really only the tip of the iceberg of what is possible with video in AS3, but it should give you a basis for researching further into scripts that can control and manipulate video in Flash.

What you need to know is that playing external video is different to loading other objects like sound, images and SWF files. You need to use the following objects:

to play and pause video:

Although it's a common mistake, you should not use the play( ) method to resume playback of a paused video. The play( ) method is only used to load and start the initial playback of a video.

When you want to stop a video from playing back, use the close( ) method of the NetStream object that controls the video. When you use the pause( ) method, the video simply pauses and starts playing again (typically when a UI button is pressed by the user), but even when paused, the FLV data continues to download. If you want to completely stop a video from downloading, use the close( ) method, as follows:

videoStream.close( );

To go to different frames of the video, use the seek() method. The seek( ) method requires one parameter to specify the number of seconds from the start of the video to which you want to move the playback. The following example seeks five seconds from the start of the video before starting the playback:

videoStream.seek(5);

 

Exercise 2 - external video

Get a copy of the FLV file provided in class, or use your own if you have one.

Create a new AS3 Flash file and make sure you save it in the same folder as your FLV file.

get a Library button or make a button and place one instance of it on the stage. Give it the instance name "btnSeekNum". Create 1 dynamic text field and 1 input text field on the stage - we will be using the input field to type a number that we want to use as a seek value to jump to a position in the video file. Give them the following instance names:

Place the following code on frame 1 of the main timeline. We will go through each line to identify the functionality. You can play around with this code and try some different things.

//import the relevant classes
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.events.NetStatusEvent;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.ColorMatrixFilter;
//----------------------------
//VIDEO SCRIPTS
//----------------------------

//the path of the video file
var myVideo:String="water7.flv";
var myDuration:Number = 0;
//new NetConnection instance
var videoConnection:NetConnection = new NetConnection();
videoConnection.connect(null);
//new NetStream instance
var videoStream:NetStream=new NetStream(videoConnection);
//new object instance to get metadata info from the video file
var videoObject:Object = new Object( );
//onMetaData event to get duration metadata from video file
videoObject.onMetaData = function(metadata:Object):void {
myDuration = metadata.duration;
};
videoStream.client = videoObject;
//new video instance
var video:Video = new Video();
//add child video to stage
addChild(video);
//negative filter using ColorMatrixFilter (optional)
video.filters = [new ColorMatrixFilter([-1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0])];
//video properties on stage
video.width = 400;
video.height = 300;
//this code centres the video on the stage
video.x=stage.stageWidth/2-video.width/2;
video.y=stage.stageHeight/2-video.height/2;
//attach the video stream to the video object on the stage
video.attachNetStream(videoStream);
//play the external video file through this net stream
videoStream.play(myVideo);
//----------------------------
//LISTENERS & FUNCTIONS
//----------------------------
//place an enter frame event listener on the stage to calculate the time property of the video
//and to loop the video when it is complete

stage.addEventListener(Event.ENTER_FRAME, videoTimeHandler);
function videoTimeHandler(e:Event):void {
txtVideoTime.text=int(videoStream.time)+" of " + int(myDuration) + " seconds duration";
//to loop the video
if (videoStream.time >= myDuration){
videoStream.seek(0);
}
}
//swap children to make sure the text field appears above the video

swapChildren(video, txtVideoTime);
//allow the user to type a number into an input field to jump to that position using the seek() function
btnSeekNum.addEventListener(MouseEvent.CLICK, seekHandler);
function seekHandler(e:MouseEvent):void{
var seekNum:uint = Number(txtSeekNum.text);
videoStream.seek(seekNum);
}

Save and test. Try creating some playback buttons for this video exercise.

see the SWF

get the FLA and the FLV

get the files & code here for today's class.

 

more advanced stuff (further research):

flash and webcams

see my sample file at

http://www.blackaeonium.net/drowned/drowned01.html

or see some of grant skinner's webcam examples at

gskinner - gallery incomplet

and some more examples:

http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking

 

Use the rest of the class to work on Assessment Task 1.