Now of course, video is not right for every situation. In fact improperly using video in an app or including it when you shouldn't, can create a miserable user experience. We certainly don't want that, so it's very important to plan ahead and make sure your project lends itself well to incorporating video in the first place. Take a look at this Sony site. It is a fantastic example of how video can be used to enhance the experience of a site. Right away you can tell the video is clean and well edited. This is a critical first step in using video on your site or in your app. Low quality or poorly edited video will turn off your users faster than a blink tag. Get it right. If video isn't your thing, hire someone to help you. It is better to have no video at all than to use video that is poor quality. Next you'll notice that there are a few different ways to interact with the video itself as well as items within the video. In this article, we're going to cover how to add these elements to your application.

Here's the final version of what we're going to build in part one. Let me take a moment to say a big thank you to Josh Reed from Reed Multimedia for shooting and editing this clip together for me. It's short and sweet but demonstrates a couple of interactive elements we can take a look at. First off though, let's take a quick look at how Josh setup the video file.

Video Setup

The video clips were captured and edited in Adobe Premiere. After that, they were brought into After Effects where the clips could be color graded and time-remapped to enhance the action. Finally, the audio design was created in Soundbooth and then brought back in to After Effects. The After Effects composition was then rendered out using the F4V (H.264) format. The default settings would work fine, but to reduce file size and increase download time, we changed the default bitrate settings. The bitrate settings for these videos were VBR, 1 Pass with a target bitrate of 1.5 and a maximum bitrate of 3. Increasing the bitrate will result in better video quality, but also increases file size, and as a result could have a significant impact on download time. Be sure to include audio output if you wish, by checking the box in the main options window. The audio was output with the following settings: 44.1khz, 16 bit, and stereo.

Tying It All Together

Cue points are the key to making this all work. So what's a cue point? As the name suggests, cue points are points in your video that dispatch events, specifically the CuePointEvent. You create listeners to wait for these events to fire and then handlers to execute whatever code you want when they do. There are three types of cue points, Navigation, Event and ActionScript. In this article we're only going to be dealing with ActionScript cue points but here's a quick definition of each courtesy of Adobe.

As you can see, different circumstances require different cue point types. Personally, I tend to use ActionScript cue points most often for the simple reason that you can add them in your code. Many times you may not have the luxury of adding the cue points during the render process so this is your only option. If you know ahead of time that you are going to be using cue points in your project and you are able to be involved in the video production process there are some advantages to adding your cue points during the render process. Most notably they offer more precise timing capabilities.

There is one thing to note before we start looking at some code. The way you setup and handle cue points is a little different between Flash and Flex so keep that in mind as you plan your project. We're going to cover the Flex method in these examples. Okay, let's get to it. The setup is pretty simple. The main application only contains a VideoDisplay component tied to a progress bar to show the progress of the movie. We also have a Canvas container that holds our seek point images that we will use to jump to a specific point within the video.

Let's start by taking a look at the VideoDisplay component. There are a couple things to point out here.

<mx:VideoDisplay id="vidPlayer"
	source="assets/videos/michael.f4v"
	cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
	x="37" y="27" 
	width="720" height="480"
	borderStyle="solid" borderColor="#3E3E3E" borderThickness="3"
	click="onVidPlayerClick(event);"
	playheadUpdate="onPlayheadUpdate(event);"/>

Most of the stuff there is pretty standard, ID, height, width, source etc .... The one attribute to note is the cuePointManagerClass. This needs to be set so the VideoDisplay component knows how to handle the cue points. You can write your own or use the standard on like I did here. I also setup a couple event handlers for clicks and the playheadUpdate which keeps our progress bar in sync.

Now we need some cue points to pass in to our player. These are up in the init() function. You could either load your cue points dynamically from an XML file or database or hard code them as I've done here.

[Bindable]
private var _cpArray:Array = new Array();
			
private function init():void
{
 	_cpArray.push({name:"showFightCard1", time:2, type:"actionscript"});
 	_cpArray.push({name:"hideFightCard1", time:8, type:"actionscript"});
 	_cpArray.push({name:"showFist", time:16, type:"actionscript"});
 				
 	vidPlayer.cuePointManager.setCuePoints(_cpArray);								
 	
 	vidPlayer.addEventListener(CuePointEvent.CUE_POINT,onCuePoint);
}

The cue points are passed to the VideoDisplay component as an array of objects, so here we are just pushing cue point objects to the array. There isn't anything magical about these objects. They simply contain a name you can use to identify which cue point is firing, the time you want the event to fire, in seconds, and the type. After the array is finished we pass it to our player using the setCuePoints method of the player's cuePointManager class. Finally we add an event listener to the player to watch for our cue point events.

Let's take a look at what happens when one of our events fires. The first interaction we have in the video is a fight card that drops down from the top of the display. Now the video editor could have built this in After Effects just as easily if not more so, but what happens when that data changes? If that data is "baked in" then the video would need to be re-rendered after each update. This could be a very tedious and time consuming process. By adding this functionality in Flex we've significantly cut down on the complexity of making such updates. It gets cut down even further if we pull the data in dynamically from an external source.

private function onCuePoint(e:CuePointEvent):void
{
 	switch(e.cuePointName) 
 	{
  		case "showFightCard1" :
  			loadFightCard(1);
  			break;
  		case "hideFightCard1" :
  			hideFightCard();
  			break;
  		case "showFist" :
  			showFist();
  			break;
  		case "hideFist" :
  			hideFist();
  			break;
  	}
}

The onCuePoint function is our event handler function. It expects one parameter of type CuePointEvent which we can use to retrieve data about the cue point being fired. In this case we just need to know the name, which we run through a switch statement and call the corresponding function accordingly. In this case we're looking for the the "showFightCard1" cue point. When it fires we call the loadFightCard function and pass it the card number. That function basically creates a new FightCard component, sets some parameters, adds it to the stage and tweens it into view. This all should begin two seconds into the video as specified in the "showFightCard1" cue point object.

private function loadFightCard(cardNo:Number):void
{
 	var fc:FightCard = new FightCard();
 	fc.cardNo = cardNo;
 	fc.x = 465;
 	fc.y = 38;
 	fc.height = 0;
 	
 	this._currentFightCard = new FightCard();
 	this._currentFightCard = fc;
 	
 	this.addChild(fc);
 	
 	var t:GTween = new GTween(fc,.4,{height:125});
 	t.play();
}

The "fist button" gets added in much the same way.

1. Listen for the proper cue point
2. Route through the event handler to the proper function
3. Execute the function

_fist.addEventListener(MouseEvent.CLICK,onFistClick);

private function onFistClick(e:MouseEvent):void
{
 	vidPlayer.pause();
 	flash.net.navigateToURL(new URLRequest("http://www.grandrapidsmixedmartialarts.com/"));
}

Lastly, let's cover how to jump to a specific point within our video. When the application loads you'll notice two small buttons on the progress bar. These buttons represent points in time in the clip. Clicking on one jumps us directly to that point. If you remember when we discussed navigation cue points I mentioned that they offer more accurate timing capabilities because it inserts a keyframe in the video itself. This is a nice feature but sadly one that is not available to us since we're using the VideoDisplay control as you cannot seek to embedded cue points with this control. Never fear however, we can still achieve the same effect. In our init() function we add an event listener to our video player to tell us when the metadata for our video has been loaded.

vidPlayer.addEventListener(MetadataEvent.METADATA_RECEIVED,loadSeekPoints);

Once we have that information we can load our seek points.

private function loadSeekPoints(e:MetadataEvent):void
{
 	var arSeekPoints:Array = new Array();
 	arSeekPoints.push({name:"point1", time:21});
 	arSeekPoints.push({name:"point2", time:36});
 	
 	for each(var obj:Object in arSeekPoints)
 	{
  		var sp:SeekPoint = new SeekPoint();
  		sp.seekPointName = obj.name;
  		sp.seekPointTime = obj.time;
  		sp.source = "assets/images/point.png";
  		sp.buttonMode = true;
  		sp.useHandCursor = true;
  		sp.addEventListener(MouseEvent.CLICK,seekToPoint);
  		sp.y = 2;
  		sp.x = (((sp.seekPointTime/e.info.duration) * 720)-7);
  		spContainer.addChild(sp);
  	}				
}

This function is not unlike the others we've used to add items to our stage. We start with an array of seek point objects that contain the name and time we want to seek to in seconds. Obviously in a real application if we had several seek points we'd want to load these dynamically but this works for the demo. Next we loop through our array, creating our seek point objects and positioning on the stage. You'll notice each object has a click handler that points to our seekToPoint function.

private function seekToPoint(e:MouseEvent):void
{
 	if(this._currentFightCard != null) hideFightCard();
 	
 	vidPlayer.playheadTime = e.currentTarget.seekPointTime;
}

This function is pretty simple. It starts by checking to see if the fight card is on the stage and if so, it hides it. This is necessary because we are seeking past the cue point in our video that hides the card. Without this check the card would remain visible for the rest of the video.

if(this._currentFightCard != null) hideFightCard

The next line seeks to our new time in the video. Our seek point objects have a seekPointTime property that we can access through the event object. We set the playHeadTime property of our video player to this value and voila. That's it.

vidPlayer.playheadTime = e.currentTarget.seekPointTime;

As you can see the concepts and process for adding interactive video to your applications is not very difficult. Now that you have the knowledge, only your imagination can limit the possibilities of how to use it. Just remember, video is not a good option for every site or application. Just because you can, doesn't mean you should. Use these new tricks wisely.