This tutorial is a brief introduction to the power and flexibility of utilizing the CuePoint(s) class as part of the new Media component object(s) included with MX2004 Professional. CuePoints are "markers" if you will of timecodes in your streaming media (FLV video or MP3) that fire a broadcast event. You can build a listener object to trigger events based on the "CuePoints" your media has reached.

In this example I will be using CuePoints to remove a preloading animation form the stage once the music has begun playing, I will also show examples of a sort of "closed captioning" as well as using CuePoints to target a MovieClip instance on the stage and have it change frames(states)

TUTORIAL EXAMPLE:


SETTING UP THE STAGE:

First, create several layers and name them similar to the example shown:

STAGE LAYERS DEFINED:

Actions: All the (frame-based) actionScript

dynaText_txt: a dynamic text field

mcContentChanger: a MC instance, stopped on the (blank) first frame, containing several "labeled" frames, this is given in instance name of  "contentChanger_mc" mine looks like this:


mcLoadingAnimation: a simple looping preloader-type animation MC with an instance name of "loadingAnimation_mc"

mcPlayerButtons: a MC instance of some media controller buttons that will pause, stop and play the media that’s streaming into the Media Display component.

Display Component: an instance of the Media Display component on the stage with an instance name of "mediaStreamer"

COMPLETE ACTIONSCRIPT:

(view/download rtd)

stop();
// hide play controller buttons by default
playerButtons_mc._visible = false;
// load media into the component
mediaStreamer.setMedia("http://www.jcolletti.com/Sarah_Brightman-Misere_Mei.mp3", "MP3");
// Adding "cuePoints" to the component ---------------------------
mediaStreamer.addCuePoint("started", 02);
mediaStreamer.addCuePoint("someText1", 10);
mediaStreamer.addCuePoint("someText2", 15);
mediaStreamer.addCuePoint("One", 20);
mediaStreamer.addCuePoint("Two", 25);
mediaStreamer.addCuePoint("Three", 30);
mediaStreamer.addCuePoint("Four", 35);
mediaStreamer.addCuePoint("Five", 40); // Creating the cuePointListener object -------------------------
cuePointListener = new Object();
// perform this function when a cuepoint gets "heard"
cuePointListener.cuePoint = function(eventObject){
        // call the doThisStuff() function with the cuepoint's name
        doThisStuff(eventObject.target.name);
};// end function

// associate/attach the lister to the component
mediaStreamer.addEventListener("cuePoint",cuePointListener);

// doThisStuff() ------------------------------------------------
function doThisStuff(mediaCue){
        switch (mediaCue) {
                case "started":
                dynaText_txt.text = "Music loaded and now playing...";
                loadingAnimation_mc.unloadMovie();
                playerButtons_mc._visible = true;
                break;
                case "someText1":
                dynaText_txt.text = "You are listening to Misere Mei performed by Sarah Brightman";
                break;
                case "someText2":
                dynaText_txt.text = "Next I'm gonna tell a MovieClip instance to change frames and clear this dynamic text field";
                break;
                default:
                dynaText_txt.text = "";
                contentChanger_mc.gotoAndStop(mediaCue);
        }//end switch
};//end function

ACTIONSCRIPT DEFINED:

stop();
playerButtons_mc._visible = false;
mediaStreamer.setMedia("http://www.jcolletti.com/Sarah_Brightman-Misere_Mei.mp3", "MP3");


Hides the player buttons and loads media into the Media Display component, this could just as easy be a path to an FLV video and set the second argument to "FLV"

mediaStreamer.addCuePoint("started", 02);
mediaStreamer.addCuePoint("someText1", 10);
mediaStreamer.addCuePoint("someText2", 15);
mediaStreamer.addCuePoint("One", 20);
mediaStreamer.addCuePoint("Two", 25);
mediaStreamer.addCuePoint("Three", 30);
mediaStreamer.addCuePoint("Four", 35);
mediaStreamer.addCuePoint("Five", 40);


Adding CuePoints to the Media Component instance, provide a name for the CuePoint and a timecode in seconds.

cuePointListener = new Object();
cuePointListener.cuePoint = function(eventObject){
        doThisStuff(eventObject.target.name);
};// end function


Create listener object that listens for the broadcasted event (CuePoint) and passes the name of it to the doThisStuff() function. Admittedly, this is a bit redundant, you could potentially have everything that’s in the doThisStuff() function right here in the cuePointListener object function() but I thought it would be cleaner to break the events to be triggered out into another function and just keep the listener object simply listening.

mediaStreamer.addEventListener("cuePoint",cuePointListener);


this associates (or attaches) the listener object to the Media Display component instance

function doThisStuff(mediaCue){
        switch (mediaCue) {
                case "started":
                dynaText_txt.text = "Music loaded and now playing...";
                loadingAnimation_mc.unloadMovie();
                playerButtons_mc._visible = true;
                break;
                case "someText1":
                dynaText_txt.text = "You are listening to Misere Mei performed by Sarah Brightman";
                break;
                case "someText2":
                dynaText_txt.text = "Next I'm gonna tell a MovieClip instance to change frames and clear this dynamic text field";
                break;
                default:
                dynaText_txt.text = "";
                contentChanger_mc.gotoAndStop(mediaCue);
        }//end switch
};//end function


The doThisStuff() function is set up with case/switch conditionals so we can have the cuepoints potentially triggering different types of events based on their name. The first one "started" reveals the controller buttons and populates the dynamic text field. The next two "someText1" and "someText2" populate the dynamic text field. All other cuepoints will clear the text in the dynamic text field and do a "gotoAndStop(framelabel)" on the MC instance contentChanger_mc.

That’s it! You can use this technique to synch animations to streaming music, do closed captioning on streaming video files etc…