Schemaphic Systems Blog

Sharing experiences in Flash, Flex and AIR

Quick customize FLVPlayback captioning

with 2 comments

//imports
import fl.video.FLVPlaybackCaptioning;
import fl.video.CaptionChangeEvent;
import fl.video.CaptionTargetEvent;
import flash.text.TextField;
import flash.text.TextFormat;

//on caption text-field creation complete, CaptionTargetEvent is dispatched;
//So all formatting of the captioon text field can be done here.
function onCaptionTargetCreated( event:CaptionTargetEvent ):void
{
    tf = event.target.captionTarget as TextField;//gets hold of the textfield within FLVPlaybackCaptioning component
    tf.selectable = false;
    tf.wordWrap = true;
    tf.multiline = true;
    tf.defaultTextFormat = format;
    tf.background = false;
}

//on caption change event handler; this gets fired based on FLVPlayback cuepoints
function onCaptionChange(event:CaptionChangeEvent):void
{
    tf = event.target.captionTarget as TextField; //gets hold of the textfield within FLVPlaybackCaptioning component
    if (tf.text != "" && captioning.showCaptions){
        captionBaseCreate( video.x, tf.y, video.width, tf.textHeight + 20, backgroundColor, backgroundAlpha );
    }
}

//creates the background for caption text
function captionBaseCreate(_x:Number, _y :Number,  _w:Number, _h : Number, _c:uint,_a:Number):void
{
    captionBase.graphics.clear();
    captionBase.graphics.beginFill(_c,_a);
    captionBase.graphics.drawRect(_x, _y , _w, _h);
    captionBase.graphics.endFill();
}

//
var backgroundColor:uint = 0x000000;
var backgroundAlpha:Number = 0.6;

var format:TextFormat = new TextFormat();
format.align = "left";
format.font = "Arial";
format.bold = true;
format.size = 20;

var captioning:FLVPlaybackCaptioning = new FLVPlaybackCaptioning();
captioning.autoLayout = false;
captioning.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
captioning.addEventListener(CaptionTargetEvent.CAPTION_TARGET_CREATED, onCaptionTargetCreated);

captioning.flvPlayback = video;
captioning.source = "caption.xml";
captionBase.addChild(captioning);
Advertisements

Written by Deepanjan Das

July 13, 2010 at 1:47 PM

2 Responses

Subscribe to comments with RSS.

  1. Thanks for the AS3 code. This has helped me a lot. I’m just having trouble with captionBase?

    As I have incorporated this into my project the transparent panel is drawn above the textfield of the captioning component.

    Would you have any source files you could share?

    Mark

    July 28, 2010 at 1:47 PM

    • Hello Mark,
      You need to add the captioning component after adding the transparent panel. That way the captioning text field will be over the panel.
      Hope this helps.
      If you can share your code where you have added the two, I can help you more.

      Cheers
      Deepanjan Das

      deepanjandas

      July 28, 2010 at 2:17 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: