Flash: Video

Flash includes a 'lite' version of the Sorenson video codec, Sorenson Spark (on a Macintosh), which is a very effective compression tool for digital video. Windows includes a range of codecs such as Indeo and Microsoft's own.

Start a new Flash document and insert a new layer called 'video'. Locate a suitable video source and use FIle/Import/Import to Stage to start the Video Import wizard.

From the first screen of the wizard choose 'Embed video in Macromedia Flash Document' and click Next.

Choose 'Import the Entire Video' and Next.

Choose an appropriate compression profile from the list or create a new one according to the amount of compression you require. Try DSL/Cable 256 Kbps for now (higher bandwidths will generate less compression).

From the drop-down list under Advanced settings choose Create new profile, which opens the Advanced Settings panel. This panel allows you to change the settings of the video according to the correction you think might be required to hue, saturation, contrast, etc. You can also crop the video by a number of pixels or scale it by a percentage value. The last two options concern what the video clip will be imported into - a movie clip is appropriate so it can be controlled by ActionScript - and the source of any audio.

Give the import profile a name and add a description if required. The time taken to import the video will depend on the length of the clip and the speed of your computer. At the end of the process Flash prompts you to add extra frames to the Timeline, which you accept.

Save the Flash document and publish the .swf file - it should have shrunk in size considerably from the original source. If the quality is not acceptable then repeat the process with a higher quality.

Compressing Video within Flash

To process the video within Flash import a video clip to the stage as before. Choose File/Export/Export Movie and complete the dialogue boxes according to your computer and preferences for codec. This should result in a smaller file than the original. You could also use video editing software for all this.

Video in Flash Pro

Flash MX 2004 Pro includes some extra tools for processing video. One feature is the ability to keep a video clip external to the .swf file so the video can be streamed and does not need to loaded in its entirety before it starts to play.

Locate a video clip in the Library (use Import if necessary), right click it and choose Properties. This opens the Embedded Video Properties dialogue box. Click on Export to create a .flv (Flash video) file with a suitable name. On returning to the Embedded Video Properties box the size of the video can now be seen, along with the time. This version of the video clip should be much smaller than the one that you started out with.

To add this .flv video clip to a Flash document proceed as follows.

In a new document choose Window/Development Panels/Components. Expand the Media Components and drag a MediaDisplay component on to the stage. Set the size of the component to appropriate pixel dimensions in the Properties panel. Select the Parameters tab in the Properties panel for the component and click on 'Launch Component Inspector' (this can also be done though Window/Development Panels/Component Inspector).

Choose the Parameters tab of the Component Inspector and enter the name, using the full path, in the URL field. Make sure the Automatically Play and Use Preferred Media Size options are ticked.

Test the movie and then publish it so it can be embedded in a web page.

The video may be jerky at first but it should play smoothly all the way through if you refresh the page (the video file will now be in the cache). The video will certainly play far more successfully in this mode than in its original raw state and better even than when it was compressed. The .flv file will still be quite large, depending on the length of the video but the use of the media component means that it will stream successfully into the web page. The .swf file that controls the .flv video will be quite small, in stark contrast to a .swf file that contained a standard compressed video clip.

Playing Video Through a Graphic Mask

Before we play video through a mask let us see how to make a very simple mask over a static image.

Create a new Flash document and add a graphic image. Add a new layer and call it 'mask' - this layer should be above the original layer. Draw a shape of the mask layer such as a circle with a grey fill.

Right click on the mask layer and choose 'Mask' from the pop-up menu. This will cause the mask layer to display the mask icon and the layer below it will be indented to show the effect of the mask. The shape on Layer 1 now acts as the mask over the image. Note that the layers are automatically locked, masking will not work if the layers are not locked. This can be used to make an image fit any shape.

You could set the mask here to a movie symbol and have it move around over the image below, revealing it in 'torch light' fashion. To do this undo the Mask setting on the mask layer, lock layer 1 and set the circle to a grouped symbol of type movie clip. Double-click the circle to edit it and set up its motion around the screen using keyframes in the timeline and Motion Tween. Click on 'Scene 1' and reset the mask layer to a Mask. When the movie is tested the mask should move along the path you defined (you could use a path to direct the movement of the 'torch').

Masking Video

Start a new Flash project. In layer 1 draw a circle with a grey fill and black border - this will be the video playback area. You could use any other polygon or more complex drawing such as a TV or part of a graphic image such as a window or a cinema screen. Name the layer 'screen'.

Add a new layer called 'video'. In the library open the Options menu and choose 'New Video'. Drag the video object onto the screen and size it so it just covers the circle. In the Instance name box in the Properties panel name the video 'my_video'. Drag the video object away from the circle while you do some editing.

Add two further layers called 'mask' and 'border'. Copy the fill from the circle in the screen layer and use Paste in Place to paste it over the circle. The Mask property will later turn this object into the visible area of the mask layer so the video will play through it. Lock this layer.

Copy the border from the screen layer and paste it in place in the border layer. This will ensure that the border is visible when the video is playing. Lock this layer and the screen layer as well.

Drag the video back over the circle/play area. Make sure the video layer is immediately under the mask layer. Right click the mask layer and choose 'Mask' - the mask layer's icon changes to a mask and the video layer is indented below it. (You can also use Modify/Timeline/Layer properties.)

Create a new layer and call it 'actions'. Add the following code:

var my_conn:NetConnection = new NetConnection;
my_conn.connect(null);
var my_stream:NetStream = new NetStream(my_conn);
my_video.attachVideo(my_stream);
my_stream.setBufferTime(5);

btn1.onRelease = function() {
 my_stream.play('doggy.flv');
}
btn2.onRelease = function() {
 my_stream.close('doggy.flv');
}

This code sets up a connection to a NetConnection object and then connects it to the server using the connect method. It then sets up a NetStream object on the server and attaches the video object (created earlier) to this. The buffer time is set to 5 seconds to give smooth playback.

The play function is connected to a button on the stage and there is also a stop button.

We could add other pieces of video into the code tied to the play button, including movie clips that we have made ourselves. One possibility here would be to create a short movie clip of static 'fuzz' before a video plays, giving the appearance of a TV tuning in to a channel. You will see many such effects introduced into film and video to create an impression of old film stock, filming under difficult conditions, simulation of early technology and so on.

Home