Tutorial: Playing video in Flash (ActionScript 3



Tutorial: Playing video in Flash (ActionScript 3.0)

Other tutorials on my page describe ways of selecting which video to play from an archive, including the use of data kept in MySql databases using php and determining the video from the average color picked up by a camera. In this tutorial, I describe the basics. The first application plays one specific video. The second displays for the viewer a choice of two videos, described by text in a Static text field.

These applications all assume that the video files are of type .flv. To obtain a video of that type, you can use the Adobe Flash Video Encoder program. Pay attention to the settings. If download time is an issue and/or the replay is to be on a small screen, then consider going down to less resolution. Experiment!

Playing one video

Open up the Flash environment and create a new Flash file (ActionScript 3.0). Click on Window/Components, scroll down to Video, and drag FLVPlayback to the Stage. Immediately erase it! This is a quick way to get this symbol in the Library. The ActionScript in Frame 1 will create an instance and cause it to be displayed.

Click on the first and only frame in the Timeline and then Window/Actions. Here is my code:

|import fl.video.*; |Brings in the necessary classes |

|var flv:FLVPlayback; |Declares flv to be of datatype FLVPlayback |

|flv = new FLVPlayback(); |Creates a new FLVPlayback object and assigns it to flv |

|flv.source = "dickey2.flv"; |Assigns the filename and extension to the source property |

| |of flv |

|flv.x = 10; |Positions the playback horizontally and |

|flv.y = 10; |… vertically |

|addChild(flv); |Adds the flv to the Display list, which means it will be |

| |displayed! |

This code is executed when the Flash movie clip is loaded. You must save the .fla file in the same folder as the .flv movie for this to work. You can test this within the Flash environment (Control/Test Movie). You also can Publish and then open up the created .html file that loads the .swf file.

Playing a choice of videos

If you have a small set of videos and want to give the viewer a choice, here is a way to do it.

On the Stage, create 2 Static text fields with text describing the video clips. Next to each on, add a button. I used Window/Common Libraries/Buttons and picked a button that had the standard triangular arrow. Each of the buttons needs an instance name and I used these names in the coding to determine which video clip: the names were playbtn0 and playbtn1. The screen shot shows the name of the top button:

[pic]

As was the case in the single play example, you must make sure the FLVPlayback is in the Library. Do what was described in the first example or open up the Library (Window/Library) and then click on Window/Components and scroll down to Video and drag the FLVPlayback to the Library panel.

In this example, the code is similar to the previous case. Some of the code is in a function that is set up to be the event handler for both (all) the buttons. The determination of which button is done using a calculation on the name of the button which, in turn, is calculated using the event parameter. An array holds the names of all the video clips. This technique is called using parallel structures: the array elements are listed to correspond to the buttons.

Here is the ActionScript for the first and only frame. You place it clicking on the frame in the timeline and then Window/Actions.

|import fl.video.*; |Bring in the necessary classes |

|var flv:FLVPlayback; |Declares flv to be of datatype |

| |FLVPlayback |

|var clips:Array = [ |Set up clips to hold the names of |

| |the video clips |

| "dickeybrook.flv", | |

| "sumo.flv" | |

| ]; | |

| | |

|flv = new FLVPlayback(); |Create a new FLVPlayback object and|

| |assign to the flv variable |

|flv.x = 10; |Position flv horizontally and |

|flv.y = 150; |… vertically to be below the text |

| |fields |

|addChild(flv); |Add flv to the Display list |

| | |

|playbtn0.addEventListener(MouseEvent.CLICK,playit); |Set up event handling for playbtn0 |

| |button |

|playbtn1.addEventListener(MouseEvent.CLICK,playit); |Set up event handling for playbtn1 |

| |button |

|function playit(ev:Event) { |The playit function responds to |

| |either button being clicked |

| var clipname=clips[parseInt(ev.target.name.substr(7,1))]; |Use the ev object to get the name |

| |of the target of the event. Use |

| |substr to extract '0' or '1'. |

| |Convert this to a number. Use this |

| |number to index the clips array |

| flv.source = clipname; |Assign the clipname to be the |

| |source of the flv. This means this |

| |video clip will be played. |

|} | |

Try this out with your own video clips. Again, you need to save the .fla file in the same folder as the .flv files. You probably can use this approach for a few more, maybe 5.

The playback object competes for screen space with the text and buttons, so you may need to modify the positions and also provide for a way to remove the play back object (use removeChild) when the clip completes. This can be done using

flv.addEventListener(PLETE, removeflv);

where removeflv is a function that performs actions to remove the play back object. You will need to move the addChild(flv); statement to be in the playit function.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download