You got to play with CS3? I'm jealous!

Hmm crashes to desktop here
(firefox 2.003 flash 9.0.16)

The DFXP file format for the captions is here http://www.w3.org/TR/ttaf1-dfxp/ . You can use MAGpie (http://ncam.wgbh.org/webaccess/magpie/) to create those files manually or AST (http://www.automaticsync.com/caption/webcaption.ht...) to create them automatically.

You cannot do this without Flash CS3 unless you write your own captioning loader/parser/display logic in Flash 8 for example. As I mentioend elsewhere, check the flash CS3 live docs for details on the captioning component

I've specified my own custom Movieclip for the CC text to display in.

I tried stepping through that sequence a half dozen times and never could get the captions to show themselves. It seemed that the caption button on the recommended skins was never hot, never had the green ring around it. I finally found a little tutorial on the AST (Automatic Sync Technologies) site that did work with CS3 and DFXP.

here`s a tool for creating the captions online:

subtitle-horse.org is an online subtitle creator tool for flv videos. you don`t need to have a software installed and you can
also transform different formats like srt to timedtext (e.g.)

it's really designed to be used alongside video in FLV format. But you could quite easily build an application that offers this type of functionality for other content too.

I couldn't get the cc background to be semi transparent.
And the styling part in the xml file has no effect.
Can you please tell how you did that?
Thanks

Any way to begin the captions in the toggled off state? I think the component for AS2 had a toggled state for the captionButton...
I'm not seeing anythhing like that for AS3.

I was looking for a solution on how to solve this also, except when I pasted that code into my action script, I'm getting errors. Am I supposed to paste this exact code in:

import fl.video.VideoEvent;
// listen for when the skin has loaded into the
// FLVPlayback component (myFLVPB). When that
// happens call the skinLoaded handler
myFLVPB.addEventListener(VideoEvent.SKIN_LOADED, skinLoaded);
// The skinLoaded event handler will set showCaptions
// to false after the FLVPlaybackCaptions component (myFLVCP)
// has associated itself with the CaptionButton in the skin function
skinLoaded(event:VideoEvent):void {
myFLVCP.showCaptions = false;
}

Can someone help please?

has anyone found an answer to this yet? i'd be very grateful for help on this.

thank you!

Thank you, Yesi!!! Beautiful job on this. Yes, please send me your FLA file. My email is carol.clark@digidentist.com

Carol

Hi starofriches,

Thanks for your comment. I just sent you the FLA and XML file. Please let me know if you have a problem opening it. It's a Flash CS3.

Sorry but I haven't worked with playlists and captions at the same time. Just in case, if you don't know there is a really good flash player that deals with everything (captions, skins, one final link, etc). It's here http://www.jeroenwijering.com/?item=JW_FLV_Media_P... I used it a lot when I have an FLV video to include. I couldn't use it for the project I'm attaching because I needed an extra final flash slide with multiple call of actions, so I couldn't integrate it. Otherwise, I would use it. You can see samples and a wizard where you can see what you can do with the player http://www.jeroenwijering.com/?page=wizard

I have projects on my site using this player: http://www.parature.com/customers.aspx The red icon on the right, "Customer video clips - Watch now", use a playlist and the single "Video Clip" links next to the customer quotes (right side), play a single video.

Good luck!
Yesi

Hey Carol,

I'm not sure if you have been able to solve this problem yet, but I created an flv playlist controlled by xml that can do exactly what you want. it will autoplay through all the nodes in the xml with a simple change.

As for the user input data to write the xml, I pulled in C# dev to handle that :-p.

view it here http://www.joycemeyer.org/ourministries/broadcast/...

Okay, my last post was not very clear. Here is all of the code for an xml player with playlist and captions:

import fl.video.*;
import flash.display.*;
import flash.events.Event;
import flash.text.TextField;

var flvControl = vid_mc.myVid;
var videoList:Array = [];
var vidCover:Array = [];
var vidCaption:Array = [];

var xmlLocation:String = "";

var b:Number = 0;
var myVar:Number = 0;
// I am using the browser to query videos and to control other .swf files that relate to this player
if(root.loaderInfo.parameters.myVar > 0)
{
   myVar = root.loaderInfo.parameters.myVar;
}

// load a variable xml file ***<item><xmlFile><url>YOUR_XML.xml</url></xmlFile></item>
var settingsXML:String = "settings.xml";
var loadSettings:URLLoader = new URLLoader();
var requestSettings:URLRequest = new URLRequest(settingsXML);
loadSettings.load(requestSettings);
loadSettings.addEventListener(Event.COMPLETE , settingsLoaded );
function settingsLoaded(event:Event):void
{
   var theSettings:XML = new XML (loadSettings.data);
   xmlLocation = theSettings.xmlFile.url;
   
   // what to do with the requested xml file
   var xmlURLLoader:URLLoader = new URLLoader();
   var xmlURLRequest:URLRequest = new URLRequest(xmlLocation);
   xmlURLLoader.load(xmlURLRequest);
   
   xmlURLLoader.addEventListener(Event.COMPLETE , dataLoaded );
   function dataLoaded(event:Event):void
   {
      var theXMLData:XML = new XML (xmlURLLoader.data);
      var a:Number = theXMLData.videoData.video_path.length();
      
      while (b < a)
      {
         //display videos in these date ranges
         var startDate = new Date(Date.parse(theXMLData.videoData.videoStartDate[b]));
         var endDate = new Date(Date.parse(theXMLData.videoData.videoEndDate[b]));
         var today = new Date();
         
         if(startDate <= today && today <= endDate)
         {
            // video location
            videoList.push( theXMLData.videoData.video_path[b] );
            // still image for video
            vidCover.push( theXMLData.videoData.video_cover[b] );
            // xml file location for video
            vidCaption.push( theXMLData.videoData.video_caption[b] );
         }
         b++;
      }
      
      // set up flvControl
      flvControl.autoPlay = false; // set to true if you want it to loop
      flvControl.source = videoList[ myVar ];
      flvControl.skin = "SkinUnderPlaySeekCaption.swf"; // use the skin of your choice
      flvControl.skinBackgroundColor = 0x000000;
      flvControl.skinBackgroundAlpha = 1;
      flvControl.skinAutoHide = false;
      //flvControl.skinScaleMaximum = 2.5; // I do not fully understand
      flvControl.addEventListener(VideoEvent.SKIN_LOADED, skinLoaded);
      
      // set up captionControl
      with(caption_grp)
      {
         captionControl.flvPlayback = flvControl;
         captionControl.source = vidCaption[ myVar ];
         captionControl.autoLayout = false;
         captionControl.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
      }
      
      function onCaptionChange(event:CaptionChangeEvent):void
      {
         var caption_sprite:* = event.target.captionTarget;
         var flvControl:FLVPlayback = event.target.flvPlayback;
         
         // move caption_sprite
         caption_sprite.y = 180;
         caption_sprite.x = 10;
      }
      
      function skinLoaded(event:VideoEvent)
      {
         caption_grp.captionControl.showCaptions = false;
      }
      
      // set up cover
      var coverIMGPathVar:String = vidCover[ myVar ];
      var CILdr:Loader = new Loader();
      var CIURLReq:URLRequest = new URLRequest ( coverIMGPathVar );
      CILdr.load( CIURLReq );
      CILdr.contentLoaderInfo.addEventListener(Event.COMPLETE , CILoaded);
      function CILoaded(event:Event):void
      {
         coverIMGbox.addChild( CILdr.content );
      }
      
   }
}

flvControl.stop();
flvControl.volume = 1;

coverVar.buttonMode = true;
coverVar.useHandCursor = true;
coverVar.addEventListener(MouseEvent.CLICK, playRemove);
function playRemove(event:MouseEvent):void
{
   flvControl.play();
   coverVar.visible = false;
   coverIMGbox.visible = false;
   
   // comment for testing
   var gaTracker:String = "javascript: pageTracker._trackPageview(" + vidCover[myVar] + ");";
   var trackGA:URLRequest = new URLRequest( gaTracker );
   navigateToURL ( trackGA, "_self");
}

// gets rid of covers
flvControl.addEventListener( VideoEvent.PLAYING_STATE_ENTERED, playingMovie );
function playingMovie(event:Event):void
{
   flvControl.play();
   coverVar.visible = false;
   coverIMGbox.visible = false;
}

// next movie events
flvControl.addEventListener( VideoEvent.COMPLETE, nextMovie );
function nextMovie(event:Event):void
{
   if (flvControl.playing == false)
   {
      myVar++;
      coverVar.visible = true;
      coverIMGbox.visible = true;

      if (myVar == videoList.length)
      {
         myVar = 0;
      }
      
      flvControl.source = (videoList[ myVar ]);
      flvControl.seek(0);
      
      caption_grp.captionControl.source = vidCaption[ myVar ];
   }
}

// update time
this.addEventListener (Event.ENTER_FRAME, updateNP);
function updateNP(event:Event):void
{
   // time code code...
   var totalSeconds:Number = flvControl.playheadTime;
   var totalSeconds2:Number = flvControl.totalTime;
   var minutes:Number = Math.floor(totalSeconds /60);
   var minutes2:Number = Math.floor(totalSeconds2 /60);
   var seconds = Math.floor (totalSeconds) % 60;
   var seconds2 = Math.floor (totalSeconds2) % 60;
   
   if (seconds < 10)
   {
      seconds = "0" + seconds;
   }
   
   if (seconds2 < 10)
   {
      seconds2 = "0" + seconds2;
   }
   
   timeBox.text = minutes + ":" + seconds;
   timeBox2.text = minutes2 + ":" + seconds2;
}

Please let me know if anyone has questions.

Hmmm... better, I think. It's been a couple of months since I've been involved in this... the code in your last post is for the FLA file, correct? If so, where does it go?

Do you have a sample XML file you can post for us?

Thanks.

Carol

You're the best, Todd!!! Love your last line and the smiley face, too.

I'll have time in a day or two to give this a whirl. Thanks in advance for posting the files for us.

Standing ovation, my friend.

Carol

Hi,
I try your link but I receive:
Error 500 - Internal server error
Please reupload your interesting player.

Thank you very, very much for this, Todd! My question is--how can I reproduce a playlist--or something similar? With thumbnails and text about the video like you've placed on this page?

http://www.joycemeyer.org/ourministries/broadcast/...

The users on the website I'm working on need to be able to see all the videos, select one and then play it--I basically need a similar setup as you have on joycemeyer.org but including captions.

Do you happen to have the source file to include the playlist?

Thank you!

A thousand thank you's, Todd. I'm working on incorporating the code into my existing .fla--and if you happen to have time and are able to, I'd hugely appreciate it if you include a .zip to the code.

I'm still in the process of getting more comfortable w/ ActionScript and a working example is very helpful. Thank you again, Todd, providing this code is very generous of you!!

If I'm understanding correctly, I need an all-in-one version. Basically, I have 7 separate videos along w/ the .xml for captioning them and a thumbnail and full-sized preview for each.

What I'm trying to build is a playlist for the videos, so a user can then pick one and watch. The screen will also need to show a preview image on the load of the page.


So I don't think I'd be querying separate components for that. My player and playlist would function similarly to [but look a little bit different] what you have on: http://www.joycemeyer.org/ourministries/broadcast/...

Visually, my playlist will look more like the one on www.cnn.com They display a list of videos in the "Next Up" box along w/ a thumbnail, Title and time of the video.

Thanks lots! Lorie

Got it! 1001 thank yous, Todd! I'll check it all out tomorrow.