Sie sind auf Seite 1von 9

Tutorial: Playing video in Flash (ActionScript 3.

0) using
radio buttons and controls (skin)
These notes explain how to set up radio buttons to play different video clips (.flv files)
with controls for pause, seek and mute. A set of controls is called a skin and there are
built-in skins you can use. Hopefully, this along with the other tutorial will help you add
the playing of video clips to your own applications.

The opening screen

When the viewer clicks the first round button, a video clip starts to play. A set of controls
is under the video display. I have clicked on the stop button before doing the screen
capture.
The critical parts of this application are
 Obtaining video clips and converting to the flv format
 Setting up the radio buttons and registering the event handling
 Setting up the flash video playback object using ActionScript and
 Identifying the skin for the controls
 Uploading the application to a server

Video Clips

You can (must) acquire a video clip on your own. You may, for example, make a video
with a digital camera and upload it to your computer. You may choose to (and be able) to
do some editing. In any case, for this type of application, it is necessary to have a video
of file type .flv. The Adobe CS3 suite includes Adobe Flash CS5 Video Encoder. The
Adobe CS5 name for the same application is Flash CS5 Media Encoder. This application
can take in videos of many different types and produce a version of the video in flv. The
screen shot shows the Video Encoder after I have clicked on Add… and browsed to a
video clip in the avi format.
The process is not instantaneous and the time is proportional to the length of the video.
Notice the Settings indicate Flash 8 Medium Quality, the default. You can change this be
clicking on Settings.
Click on the dropdown menu up/down arrows to see choices. Remember that higher
quality means larger file size and longer download time.

Click on Start queue to start the process. You will see the video playing [slowly]. The
Status will have a check mark when it is complete. There will be a new file of type .flv,
same name as the original file, in the same folder.

Radio Buttons

Radio buttons are built-in components of Flash. Typically, two or more radio buttons are
defined as a group. Only one of a group can be selected at a time.

To get a radio button on the Stage, open Windows, click on Components. The screen shot
shows the Components panel:
Drag Radio Button to the Stage. ADOBE CS3: In the Properties panel, click on
Parameters. For this application, I changed the groupLabel to choices, the label to
Hudson Trail and the value to dickey2.flv. ADOBE CS5: Use Component Inspector.

I dragged a second radio button to the Stage, and changed the groupLabel to choices, the
label to Lego Robots and the value to sumo.flv. The effect of the label setting is obvious
from looking at the buttons on the Stage. The effect of the other things will be clear after
describing the code.
As with other Flash applications, I need to write code that connects an event to an event
handler. This is done first by setting up a variable that will hold information on the radio
button group, then coding a addEventListener call, and then writing a function. The code
is

var rg:RadioButtonGroup = RadioButtonGroup.getGroup("choices");

rg.addEventListener(MouseEvent.CLICK,whichbutton);

function whichbutton(ev) {
var whichb:RadioButton = rg.selection;
var videoname:String = String(whichb.value);
playvideo(videoname);

The function whichbutton is invoked when any of the radio buttons is selected: the player
clicks the circle. The variable rg holds the radio button information, so rg.selection will
hold a reference to the button clicked. Then whichb.value will hold (in this case) either
dickey2.flv or sumo.flv. I found it necessary to use the function String to force a
conversion of the value to a String. This String will be used as the argument to a function
I wrote and will describe later in these notes.

To use the coding described here requires import statements. These will be shown later.

Flash video playback

To play video clips in Flash, Flash provides a class called FLVPlayback for defining
objects of type FLVPlayback! These can be created during development time, but for this
application I chose to do it mainly in coding. However, the first step is in Flash to go to
Windows, click on Components, scroll down and drag FLVPlayback to the Library.
Alternatively, you can get it into the Library by dragging it to the Stage and erasing it. A
FLVPlayback symbol remains in the Library.

The coding to define an FLVPlayback object starts with a var statement that also
inititalizes the variable:
var flv:FLVPlayback = new FLVPlayback();

This statement can be interpreted as: make flv a variable of type FLVPlayback and
construct a new FLVPlayback object as its value. At this point, the variable does not have
a video clip to play; it does not have a skin; and it is not visible on the screen. These will
be assigned in a function named playvideo.

To set the video clip to be played, we use an assignment statement to the source attribute
of the FLVPlayback object:
flv.source = “dickey2.flv”;

would have the dickey2.flv file played. In the playvideo function to be shown below, the
statement has a parameter on the right hand side of the assignment statement.

The skin attribute is what is needed to assign a set of controls for the video clip. I will
explain that in the next section.

In Flash, objects created using coding need to be made visible by explicitly adding them
to what is termed the display list. This is done using addChild:

addChild(flv);

I also have coding to remove an flv object from the display list. This is in a function I
wrote called removeflv that has the single line removeChild(flv).

Keep in mind that the flv is a global variable. This means it is accessible to these
functions.

This coding requires import statements to be shown later.

Skins

The set of controls on or under a playback object is called a skin. A skin is a .swf file
accessed by FLASH during runtime. You can modify one of the built-in skins if you like.
The files on my Windows PC are in C:\Program Files\Adobe\Adobe Flash
CS5\Common\Configuration\FLVPlayback Skins\ActionScript 3.0.

The files on a MAC are in Macintosh HD:Applications:Adobe Flash CS5: Common:


Configuration:FLVPlayback Skins:ActionScript 3.0.

I looked over the skins and copied it to the folder where I was saving the .fla file. This
meant my code could refer to it just using its name. Lastly, and this is most important, the
swf file must be uploaded along with everything else: see next section.

The skin is assigned to the FLVPlayback object using the skin attribute. In this case, the
line of code is:

flv.skin = "SkinUnderPlayStopSeekFullVol.swf";

The name of the file hints that it will be under as opposed to on top of the video window,
it will have a play button, that turns into a pause. It will have a seek facility: you can
move a slider type control. It has a volume control.
There also is a button for full screen: this is operable only in the Published version. You
need to go to File/Publish Settings. Click on the HTML tab and next to Template, scroll
to Flash Only – Allow Full Screen. You do need to do this for the button on the skin to
work!

Uploading application

After you get this application working in the Flash environment (Controls/Test Movie),
the next step is to File/Publish. This will produce a .html file and a .swf file, along with a
file common to all ActionScript 3.0 applications: AC_RunActiveContent.js. If you
already uploaded this to the same folder on the server when uploading another Flash
application, you do not have to upload it again. You also need to upload all the flv files:
the video clips AND you need to upload the skin file. The list for this application was

choosevideo.html
choosevideo.swf
SkinUnderPlayStopSeekFullVol.swf
dickey2.flv
sumo.flv
AC_RunActiveContent.js

Implementation

The coding, all in frame 1 in the .fla file includes the import statements, the declaration of
the FLVPlayback and the radio group objects, the addEventListener statement, and then
three function definitions. The calling relationship is whichbutton is called as a result of
the addEventListener. The whichbutton function calls playvideo. The playvideo function
has an addEventListener call that sets up the call to removeflv.

import fl.video.*;
import flash.events.Event;
import fl.events.ComponentEvent;
import fl.controls.RadioButtonGroup;

var flv:FLVPlayback= new FLVPlayback();


var rg:RadioButtonGroup = RadioButtonGroup.getGroup("choices");

rg.addEventListener(MouseEvent.CLICK,whichbutton);

function whichbutton(ev) {
var whichb:RadioButton = rg.selection;
var videoname:String = String(whichb.value);
playvideo(videoname);

function playvideo(vname) {
flv.source = vname;
flv.skin = "SkinUnderPlayStopSeekFullVol.swf";

flv.addEventListener(VideoEvent.COMPLETE,removeflv);
addChild(flv);
}

function removeflv(ev) {
removeChild(flv);