Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Images, Sound, and Video > About using FLV video > Creating a video banner

Creating a video banner

Video content within banners and other Flash advertisements is often used for advertising, such as showing Flash movie previews or television advertisements. The following example shows how you might create a video instance and add ActionScript in a FLA file to create a banner advertisement that contains video.

To create a video banner:

1. Create a new Flash document called vidBanner.fla.
2. Select Modify > Document.
3. Change the dimensions of your FLA file, type 468 in the width text box and 60 in the height text box.
4. In the Library panel (Window > Library), select New Video from the Library options.
5. In the Video Properties dialog box, name the video symbol and select Video (ActionScript controlled).
6. Click OK to create a video object.
7. Drag the video object from the Library panel to the Stage to create a video instance.
8. With the video object selected on the Stage, type my_video in the Instance Name text box in the Property inspector (Window > Properties > Properties).
9. With the video instance still selected, type 105 in the width text box and 60 in the height text box in the Property inspector.
10. Drag the video instance to a position on the Stage, or use the Property inspector to set its x and y coordinates.
11. Select Frame 1 in the Timeline, and open the Actions panel (Window > Actions).
12. Add the following code to the Actions panel:

    var my_nc:NetConnection = new NetConnection();
    my_nc.connect(null);
    var my_ns:NetStream = new NetStream(my_nc);
    my_video.attachVideo(my_ns);
    my_ns.setBufferTime(5);
    my_ns.play("http://www.helpexamples.com/flash/video/vbanner.flv");
    

13. Select Insert > Timeline > Layer to create a new layer, and name it button.
14. Select the Rectangle tool in the Tools panel.
15. In the Colors section of the Tools panel, click the pencil icon to select the Stroke color control.
16. Select No Color, which disables the rectangle's outline.
17. Drag the pointer diagonally across the Stage to create a rectangle.

    The size of the rectangle does not matter because you'll resize it by using the Property inspector.

18. Click the Selection tool in the Tools panel then click the rectangle on the Stage to select it.
19. With the rectangle still selected, type 468 in the width text box and 60 in the height text box in the Property inspector. Then change the X and Y coordinates (X and Y text boxes) to 0.
20. With the rectangle selected on the Stage, press F8 to change the rectangle into a symbol.
21. In the Convert to Symbol dialog box, type invisible btn in the Name text box, select Button, and then click OK.
22. Double-click the new button on the Stage to enter symbol-editing mode.

    The rectangle is currently on the first Up frame of the button you created. This is the Up state of the button--what users see when the button is on the Stage. However, you want the button to not be visible on the Stage, so you need to move the rectangle to the Hit frame, which is the hit area of the button (the active region that a user can click to activate the button's actions).

23. Click the keyframe at the Up frame, and hold down the mouse button while you drag the keyframe to the Hit frame.

    You can now click in the entire banner area, but there is no visual appearance of the button on your banner.

24. Click Scene 1 to return to the main Timeline.

    A teal rectangle appears over the banner area, representing the invisible button's hit area.

25. Select the button you created, open the Property inspector, and type inv_btn in the Instance Name text box.
26. Select Frame 1 on the Timeline, and then type the following code in the Actions panel:

    inv_btn.onRelease = function(){
        getURL("http://www.adobe.com");
    };
    

27. Make other modifications to the banner, such as adding graphics or text.
28. Select Control > Test Movie to test the banner in Flash Player.

In this example, you created a banner and resized its dimensions to the established, standardized dimensions that the Interactive Advertising Bureau specifies. For information on standard advertising dimensions (and many other useful guidelines), see the Interactive Advertising Bureau's Standards and Guidelines page at www.iab.net/standards/adunits.asp.

Despite standardized guidelines, ensure that you confirm the advertising guidelines for the advertising service, client, or website that you're advertising with first. If you submit your banner to an advertising company, make sure the file meets a specified file size, dimension, target Flash Player version, and frame-rate guideline. Also, you might have to consider rules about the kinds of media you can use, button code you use in the FLA file, and so on.

Flash CS3