I recently worked on a website that contains a “talking” video along six different sections, each with its own video.

The challenge was to create a custom event class to assign and handle actionscript cue points.
One other aspect worth pointing out was the loader, which needed to be a circular mask that reveals
the layer below in a “clock wipe” or “pie chart” type of transition.

As easy as it may sound, drawing such shape, or actually making the animation, needed some attention.
After some research, I figured that you actually need to to draw a segment from the center out.
The next segment will be adjacent to the previous one but slightly offset within a circle.

This example uses a percentage variable in an ENTER_FRAME event, but it can be used upon a PROGRESS_EVENT of some sort:

package src{

    import flash.display.*;
    import flash.events.*;

    public class CircleLoader extends MovieClip{

        private var circleLoader:MovieClip;
	private var percentage:Number = 0;

        public function CircleLoader() : void{

	    trace("//---> CircleLoader");
            circleLoader = new MovieClip();
            addEventListener(Event.ADDED_TO_STAGE, init);

        };

        private function init(event:Event) : void{

            removeEventListener(Event.ADDED_TO_STAGE, init);
            addChild(circleLoader);
            circleLoader.radius = 80;
            addEventListener(Event.ENTER_FRAME, circleEnterFrame);

        };

        public function circleEnterFrame(event:Event) : void{

	    percentage = (percentage + 1);
	    MovieClip(this.parent).tLoader.text = String(percentage.toFixed(0));
	    if (percentage > 100){
		    //removeEventListener(Event.ENTER_FRAME, doMask);
		    percentage = 0;
	    }

            var endAngle:Number;
            var startAngle:Number;

            if (!isNaN(percentage)){
                graphics.clear();
                endAngle = 2 * Math.PI * percentage / 100;
                startAngle = 0;
                if (endAngle != startAngle){
                    graphics.lineStyle(2, 0, 0.5);
                    graphics.beginFill(0x003299, 0.5);
                    graphics.lineTo(-circleLoader.radius, 0);
                    CircleSegmentTo(0, 0, startAngle, endAngle, -circleLoader.radius, 1);
                    graphics.lineTo(0, 0);
                    graphics.endFill();
                }
            }

        };

        public function CircleSegmentTo(x, y, a1, a2, r, dir) : MovieClip{

            var diff = Math.abs(a2 - a1);
	    var divs = Math.floor(diff / (Math.PI / 4)) + 1;
	    var span = dir * diff / (2 * divs);
	    var rc = r / Math.cos(span);
	    graphics.moveTo(x + Math.cos(a1) * r,y + Math.sin(a1) * r);
	    for (var e = 0; e < divs; ++e){
		    a2 = a1 + span;
		    a1 = a2 + span;
		    graphics.curveTo(x + Math.cos(a2) * rc,
                                               y + Math.sin(a2) * rc,
                                               x + Math.cos(a1) * r,
                                               y + Math.sin(a1) * r);
	    }

	    return this;
        };

    };//end class
};//end package

So, for the actionscript cue point event I created a class named “CueEvent.as” which holds a string as a parameter to differ from other objects of the same class.

From up-down understanding of the hierarchy, my Main class instantiates a FLVPlayer class and adds a listener of type “VIDEOCUE” (public property in my CueEvent class):

Main.as:

public var mVideo:FLVPlayer;

mVideo.addEventListener("VIDEOCUE", cuePointHandler);

private function cuePointHandler(event:CueEvent) : void{
      var e:* = event;
      trace(" Cue point is: " + e.option);
      if (e.option == "innovative"){ }
};

The FLVPlayer class contains a FLVPlayback instance to load up and play the video.
All that needs to be done is add a listener and the cue points to the FLVPlayback instance:

1. Add the built-in MetadataEvent.CUE_POINT
2. Add each cue point event using the addASCuePoint method passing two parameters (time, name)
3. In the callback function for the listener dispatch the custom event rather than a simple Event object:

We need the name assigned to the FLVPlayback instance in the Main class (cuePointHandler of the Main class) in order to make decisions for each cue point.

FLVPlayer.as:

public var mVideo:FLVPlayback;

mVideo.addASCuePoint(10.36, "innovative");

mVideo.addEventListener(MetadataEvent.CUE_POINT, cuePointHandler);

private function cuePointHandler(event:MetadataEvent) : void{
      dispatchEvent(new CueEvent(CueEvent.VIDEOCUE, String(event.info.name)));
};

Finally, the custom event class has two important properties.
One string to be the type of event (VIDEOCUE) and another one to hold the name of the cue point.

CueEvent.as:

package src{

    import flash.events.*;

    public class CueEvent extends Event{

        private var _option:String = "none";
        public static const VIDEOCUE:String = "VIDEOCUE";

        public function CueEvent(param1:String, param2:String) : void{

	    super(param1, true);
            _option = param2;
            return;

        };

        public function get option() : String{

            return _option;

	};

        override public function clone() : Event{

            return new CueEvent(type, _option);

	};

    };//end class
};//end package

Remember, CueEvent is a public class that extends the Event class used in the FLVPlayer class without being a instance variable inside of FLVPlayer.as.
We simply dispatch the event: dispatchEvent(new CueEvent(CueEvent.VIDEOCUE, String(event.info.name)));

The Main class instantiates the FLVPlayer class in a variable. That’s how it is structured.

When running the file, your player should start and when the playhead reaches the exact time you assigned
in the addASCuePoint method you will have an event triggered in your Main class with the name of your cue point event.

All this helped me understand better the way custom events work and on top of that,
I associated actionscript cue points for FLV playback passed up to your the level.

For each cue point added I receive its name and decide on which graphics to instantiate and animate.
For the Intro video I added these cue points:

mVideo.addASCuePoint(10.36, “innovative”);
mVideo.addASCuePoint(11.75, “tools”);
mVideo.addASCuePoint(13.13, “support”);
mVideo.addASCuePoint(22.68, “board”);
mVideo.addASCuePoint(24.41, “moveboard”);
mVideo.addASCuePoint(27.84, “dynamic”);
mVideo.addASCuePoint(29.53, “easy”);
mVideo.addASCuePoint(31.12, “innovativetech”);
mVideo.addASCuePoint(32.84, “intuitive”);
mVideo.addASCuePoint(34.51, “advisor”);
mVideo.addASCuePoint(36.02, “compensation”);
mVideo.addASCuePoint(44.34, “switch”);
mVideo.addASCuePoint(46.06, “pull”);
mVideo.addASCuePoint(47.51, “servicesolutions”);
mVideo.addASCuePoint(49.01, “productssolutions”);
mVideo.addASCuePoint(50.75, “insightsolutions”);
mVideo.addASCuePoint(52.16, “websolutions”);
mVideo.addASCuePoint(53.82, “compensationsolutions”);
mVideo.addASCuePoint(69.87, “out”);
mVideo.addASCuePoint(73.31, “discover”);
mVideo.addASCuePoint(75.91, “end”);

You can view the project running on my server.
Sunlife Solutions