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 CS5Video 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);

}