Flash 8 Professional Video: Alpha Channel and Video Cue Points Example

Screenshot of the Flash 8 Video Alpha and Cue Points example

If my previous post didn't alert you to the fact, I'm a very big fan of the new video functionality in Flash 8 Professional. The new video importer wizard is an amazing workflow enhancer and the new alpha channel and event/navigation cue points features offer a world of creative possibilities for integrating video into Flash sites and applications.

This past Thursday, we held a Flash 8 Special at the London Macromedia User Group wherein Mike Downey did a presentation and a couple of us -- Guy Watson, Richard Leggett, Stephen Downs (Tink) and myself -- took part in a Flash 8 Jam (short 10 minute sessions demonstrating a single new feature.) My topic was Flash 8 Video and I presented a quick-and-dirty example that took me at most fifteen minutes to create.

The sample demonstrates the use of alpha channel video (Betina walks by as the dynamic text field behind her displays constantly changing numbers (which you can select/edit) and event cue points (the pop-up speech bubbles are triggered by them at certain points in the video.) Oh yeah, and notice the drop shadows on the speech bubbles... ooooh, aaaah, ok, moving along now...

Here is the quick-and-dirty code for the example, showing you how to listen for cue point events and handle them:

ActionScript:
  1. // 
  2. // Array of speech bubbles
  3. //
  4. var nextBubbleIndex:Number = 0;
  5. var bubbles:Array = [ bubble1, bubble2, bubble3 ];
  6.  
  7. //
  8. // Listen for cuePoint events on the FLVPlayback component
  9. //
  10. myFlvPlayback.addEventListener ( "cuePoint", this );
  11.  
  12. //
  13. // Event handler: cuePoint
  14. // 
  15. function cuePoint ( eventObj:Object )
  16. {
  17. 	var nextBubble:MovieClip = bubbles [ nextBubbleIndex ];
  18. 	nextBubble.play();
  19.  
  20. 	nextBubbleIndex++;
  21. }
  22.  
  23. //
  24. // Change the text field every frame to create
  25. // flickering random text.
  26. //
  27. function onEnterFrame ()
  28. {
  29. 	var numbersStr:String = "";
  30. 	for ( var i:Number = 0; i < 100; i ++ )
  31. 	{
  32. 		numbersStr += String ( Math.random() );
  33. 	}
  34. 	bgText.text = numbersStr;
  35. }
Note: You can also have the cue points send properties back with the cue point event and I could have used those instead of keeping track of the cue point index manually. The only reason I did it this way was because I had already imported the video without setting event parameters and was pressed for time.

You can download the example files (~1.7MB due to the included FLV.) Thanks go out to Macromedia for letting me use the Betina movie for this.

Comments