Advanced Flash Components

Working with Events: Adding Advertisements

Updated: Jan 31, 2008 Views: 3630

Description: In this tutorial we will show the ability to add advertisements to play before videos load from media list using custom nodes.

Components Used in this Tutorial: Media List AS3.0 and FLV Player (AS 3.0) Basic Skins.

Completed Project:

Complete Code:

import com.afcomponents.events.MediaListEvent;
import flash.events.MouseEvent;
import fl.video.VideoEvent;

var adVar:Boolean;

//Handle List Load
function onListInit(event:MediaListEvent) {
    myPlayer.source = myList.getItemAt(0).ad;
    myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
    adVar=false;
}
myList.addEventListener(MediaListEvent.XML_LOAD_COMPLETE, onListInit);

//Hand Mouse Click
function onListItemSelected (event:MouseEvent) {
    myPlayer.source = event.target.ad;
    adVar=false;
}

// play next item on complete
function onPlayerComplete(event:VideoEvent) {
    if (adVar==true) {
        myList.selectNextItem();
        myPlayer.source = myList.getSelectedItem().ad;
        adVar=false;
    } else {
        myPlayer.source = myList.getSelectedItem().data;
        adVar=true;
    }
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);

Set-Up and Add Content Using XML

Before you begin make sure that you have successfully installed the component inspector have been able to load content into the Media List component using XML. Also make sure that you give your Media List an instance name of myList. Your preview images for the Media List should be stored in Path and the video (flv) should be stored in Data.

For this example, we also need a field where we will store the path to our ad video. For this example, we will create one called ad. If you need more information about how this is done please see our Adding Custom Nodes in XML tutorial for more information.

<ad>advar.flv</ad>

Setting Up FLV Player with Code

For this tutorial, we also need to drag an instance of the FLV Player on the stage and connect it using ActionScript. Please see our tutorial on connecting the Media List to our FLV Player for more information. The following is the complete code from that tutorial:

import com.afcomponents.events.MediaListEvent;
import flash.events.MouseEvent;
import fl.video.VideoEvent;

//Handle List Load
function onListInit(event:MediaListEvent) {
    myPlayer.source = myList.getItemAt(0).data;
    myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
}
myList.addEventListener(MediaListEvent.INITIALIZE, onListInit);

//Hand Mouse Click
function onListItemSelected (event:MouseEvent) {
    myPlayer.source = event.target.data;
}

// play next item on complete
function onPlayerComplete(event:VideoEvent) {
    myList.selectNextItem();
    myPlayer.source = myList.getSelectedItem().data;
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);

Plan for ActionScript

Now, we just edit the ActionScript with a few changes to allow this to play ads before the video is played.

The first change is that we will want to create a variable in which will control whether an or normal video is played on a video complete.
We want to update our initialization to play an ad on start and set our ad variable so we get the correct video to play on complete.
Similarly, we want to update our mouse click function to play an ad first and also update our ad variable;
Lastly, we need to update our on complete function with a conditional that will play the next video based on our ad variable.

Adding Ad variable

As mentioned in our plan above, we will use an variable to control what is the next video played when a video or ad finishes playing. We will use a Boolean variable (true / false). We will set this variable to true when the next to be played is an ad, and false when the next video is not an ad.

var adVar:Boolean;

Update the Media List Initialize Function

Our next step is update our media list initialization function with two changes. First, we need to change the source of our movie player to play an ad. Second, we need to update our adVar to false so that our next video played is not an ad.

//Handle List Load
function onListInit(event:MediaListEvent) {
    myPlayer.source = myList.getItemAt(0).ad;
    myList.addGenericItemEventListener(MouseEvent.CLICK, onListItemSelected);
    adVar=false;
}
myList.addEventListener(MediaListEvent.XML_LOAD_COMPLETE, onListInit);

Setting up the Ad to Play after each video

Similarly to our initialization function, we need to update our source of our flv player and update the adVar so that after the ad finishes another ad is not played.

//Hand Mouse Click
function onListItemSelected (event:MouseEvent) {
myPlayer.source = event.target.ad;
adVar=false;
}

Update on Video Complete Function with Conditional Controlling the Next Video Played

Lastly, we need to update on function that is called after a video has completed playing. In the function is where we test our adVar that we have been updating and have that control what video is next and whether we play an ad or regular video next.

The first part is when an ad is to be played and we test with checking whether the adVar is true. If it is that means that we want to select the next video, set our video source to the ad for this next video and update our adVar so that after this video finishes another ad isn't played.

// play next item on complete
function onPlayerComplete(event:VideoEvent) {
    if (adVar==true) {
        myList.selectNextItem();
        myPlayer.source = myList.getSelectedItem().ad;
        adVar=false;
    } else {
        myPlayer.source = myList.getSelectedItem().data;
        adVar=true;
    }
}
myPlayer.addEventListener(VideoEvent.COMPLETE, onPlayerComplete);

The second part in our conditional will be called if adVar is logically not true or in other words false. Since we don't want an ad to play but rather our video for this object, we will set our player's source to our video stored in the data field and then update our adVar so that an ad will play before the next video.

AFComponents.com