Rants,Raves and Ruminations

It never ceases to amaze me how many people ask for an easy way to get Flash video up on their pages. If you use Flash CS3, the entire process is code-free. Assuming you have an FLV file handy, here's how:

1. Launch Flash CS3 and open a new ActionScript 3.o document.
   
   
2. When the new document opens select Window>Components to open the Components panel.
   
   
3. Open the Video components and drag a copy of the FLVPlayback component to the stage. When you release the mouse you will most likely see a black square with an FLV icon and a skin under the square.

Image 1: The component and a skin are on the stage

4. To ensure everything will work, save the open Flash document to the same folder as the video.
   
   
5. Select the Component on the stage and click the Parameters tab in the Component Inspector. The Parameters determine how the component will play the movie, what video is being played and even the skin and skin color to be used to control the video.
   
   
6. Seeing as how there already is a skin, let's give the user the opportunity to play the video. Double click the true value in the autoPlay parameter and change it to false.
   
   
7. The next step is to determine the skin.Double click the skin value in the skin parameter to open the Select Skin dialog box.

You get to make a few choices here. If you just want the video and no controller, select None from the Skin pop down. If you do wish to have a controller, your choices are to have the skin Over or Under the video.

Over is a dangerous choice because the user needs to roll over the video to reveal the skin. If there is something in the first frame of the video, in a web page, that video may be mistaken for an image.

8. From the skin pop down select SkinUnderAllNoFulNoCaption.swf. This just ignores adding the Full Screen and Captioning buttons to the controller. You will notice you are being told the minimum width for this controller is 280 pixels. This isn't an issue because the video I am using is 320 pixels wide by 240 pixels high.
   
   
9. Click the Color chip to open the Color Picker and select a skin color.
   
   
10. Click OK to close the Select Skin dialog box.
    

Image 2: A skin and a skin color are set in the Component's skin parameters.

11. Scroll down the parameters to the source parameter. Double click the value to open the Content Path dialog box.
    
    
12. Click the browse button- it looks like a folder- and navigate to the folder containing the FLV.
    
    
13. Double click the FLV to select it check the path. If you see a path like the one shown in Image 3, you are in for a world of "hurt". This tells you that you haven't saved the fla to the same folder as the FLV. That value will get "hard-wired" into the swf and the odds are about 135% the video will not play.

Image 3 : If you see a path to the FLV click Cancel and save the FLA to the same folder as the FLV.

Image 4: If you see this, life is a wonderful thing!

14. Click OK to close the dialog box, save the FLA and test the movie. You should be in the video game!

Image 5: The test is a success.

If you are planning to add this to a web page you need to trim off the extra space. Just be aware there is a really big "gotcha" here so pay attention:

1. Select Modify>Document and when the Document Properties dialog box opens, click the Contents radio button. Click OK to accept the change.

Now here is the gotcha ... and it is a doozy. The stage shrunk to the size of the component but the skin is hanging off the stage. This means you will lose the skin if you try to embed the swf into a web page.

1. Return to the Document Properties dialog box and set the height value to 285. Click OK. You should see a piece of the stage under the skin's shadow.

If you are going for an exact fit with a skin that is under the video, always give yourself an extra 45 pixels of height to accommodate the skin.

At this point you can save and publish the SWF. Just keep in mind that the SWF, the FLV and the Skin.swf files must be in the same directory.

There you have it.... code free Flash Video.