Schemaphic Systems Blog

Sharing experiences in Flash, Flex and AIR

Quick customize FLVPlayback captioning

with 2 comments

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 = 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 = 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
{;,_a);, _y , _w, _h);;

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";

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?


    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.

      Deepanjan Das


      July 28, 2010 at 2:17 PM

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: