Director Tutorials

 

Using Flash Video (FLV) with Director

To play of Flash Video (FLV) in Director, we need to create a SWF 'player'. This tutorial takes you through the steps. The bottom of this page has a template that allows you to dynamically link a FLV to your movie, and so avoids the need to create unique swf players for each FLV you want to include. A second FLV template is available here (one that avoids the flash as the FLV loads).

Grabbing a FLV from YouTube

All video on YouTube is in Flash Video(FLV) format. When you play the video online, it is copied to your browser cache. A simple way of locating and saving the FLV is through a page like YouTube Catcher.

1. Open the YouTube Catcher page and paste the full URL of the YouTube video you want to grab into the URL area.

2.
Click the Download Video button.

3. A Download Link will appear. Click on this and choose to save the file. Give the file a name with the extension .flv.

Creating a FLV by converting an AVI or MOV

If you have a video in AVI or QuickTime (MOV) format, you can convert it to FLV. There are many programs that convert videos into FLV format. We'll look at creating a FLV through Adobe Flash CS3.

1. Open Adobe Flash CS3 Video Encoder

2. Click the Add button and browse for and select your AVI or MOV file.

3.
Click on Settings.

4.
Under the Please select a Flash Video encoding profile line, select the quality level for the FLV. The higher the quality, the bigger the file size. After choosing a quality level (such as Flash 8 - Medium Quality (400kbps), click OK.

5.
Click Start Queue.
And that's it. A FLV will be created.

    


Creating a SWF player to display the FLV in Director

1. Open Adobe Flash CS3 and create a new Flash File (ActionScript 2.0) and save the FLA file

2.
Choose File > Import >Import To Stage, and browse for the FLV file, and select it.

3.
A screen appears asking 'Where is your video file? The On your computer option will be selected. This is correct. Click Next.

4.
Next screen will ask, How would you like to deploy your video? Choose Progressive download from a web server. Click Next.

5.
Next screen will ask what Skinning you would like. This allows you to choose the style to the control bar for the video and where it is placed (over the video or under). Choose a skin and click Next.

6.
Click Finish.
The player will load on screen. Click on it and in the Properties window, you will see the video is 320x240

7. Click the background of the Stage. In the Properties area, you'll see the Size, which will be most likely 550x400 (the default). Click Size and change the dimensions to 320 x 275. I've included extra height for the control bar.

8.
Click the FLV player on the stage and drag it so that it is placed over the centre of the stage.

9.
Choose File > Export > Export Movie. Choose a location, and click Save.

10.
In the settings window, choose Version as Flash Player 8 and ActionScript version as ActionScript 2.0. Press OK.
You now have 2 SWFs. One with the name as saved in step 9, and one which represents the skin. As an example, the skin could be called SteelExternalAll.swf.

11. Import the main SWF into Director. This will be your player. The FLV or the control bar SWF remain as external links to the internal SWF. Therefore, these files must always be bundled with the Director movie.

NOTE

You can use the above process to both create a SWF player and encode a MOV or AVI. After step 4, you would see the Encoding screen as seen in the Video Encoder application.

You can also choose to embed the video in the Flash file so have a single SWF that could be embedded into a Director movie. This is only recommended for short video clips and if you don't have audio, as it could affect synchronisation.

Using a Template

Click here to download a template.
In the above zip, there are a number of files:
flv_playerControlbar.fla - Flash 8 FLA that includes code that will be read by Director to dynamically link to a FLV as well as code to allow Director to control the video via Lingo. This has a Steel External All skin but it can be changed by editing the FLA file.
flv_playerControlbar.swf - SWF created from above file with Skin.
flv_playerNoControlbar.swf - SWF created without a skin.
SteelExternalAll.swf - Steel Skin created when publishing FLA file.
flv_player.dir - Director file as explained below.

Cast Members Inside Director
flv_playerControlbar - The SWF player created.
link SWF to FLV - Sprite behavior that, when dropped onto the SWF player sprite, will allow you to choose an external FLV to link to. Best to insert the FLV name and simply keep the file in the same folder as the Director movie
Wait until end of FLV - Frame behavior that will wait until the FLV is finished playing and will then jump to the next marker when done.

Also included in the Director movie are behaviors to pause/play the FLV and one to rewind it to the start. No FLV is provided.