Click to See Complete Forum and Search --> : attaching dynamically caption file to FLV


juju360
08-27-2009, 02:56 PM
i completed the tutorial: "Create an XML Video Player Using ActionScript 3.0"

http://republicofcode.com/tutorials/...mlvideoplayer/

but then i need to have each FLV have it's own caption.

how can i dynamically attach the caption file to the corresponding FLV file

thank you, i appreciate help
julio

Eye for Video
08-29-2009, 09:50 AM
Is the caption part of the playlist or is the caption only displayed when it’s corresponding FLV file selected and played.
Exact details will of course depend on how your xml file is set up and how you are building your array but here is a pattern to follow (example is AS2). To display as part of the playlist (all captions display at same time):
First create the dynamic text box and give it an instance name. If that text box is inside another movie clip, be sure to drill down to it when you attempt to display the text.
Next in your AS create a new variable of the type array for the captions, something like this:
var ssx:XML = new XML();
ssx.ignoreWhite = true;
var captions:Array = new Array();
var urls:Array = new Array();
Then, as you load the arrays, be sure to push in the captions along with any other variables:
ssx.onLoad = function(success){
if (success) {
var ss:Array = ssx.firstChild.childNodes;
for (i=0;i<ss.length;i++) {
captions.push(ss[i].attributes.caption);
urls.push("thumbs/" + ss[i].attributes.url);
}
Rest of function goes here…
}You now have a url array and a caption array. Then display the dynamic text for each url with something like this in the function above (where Rest of function goes here..).
play15.pl1.thumb1.loadMovie(urls[0]);
play15.pl1.pltxt1.text = captions[0];
play15.pl2.thumb2.loadMovie(urls[1]);
play15.pl2.pltxt2.text = captions[1];
play15.pl3.thumb1.loadMovie(urls[2]);
play15.pl3.pltxt1.text = captions[2];
}
else
{
trace("XML file failed to load. Please try again later.");
}
}
ssx.load("slga_selections.xml");So reading through the code above goes something like this:
Create a caption variable, “push” the attribute “caption” into that array, and then display the text from the array in each of the dynamic text boxes.
First element of caption array ….play15.pl1.pltxt1.text = captions[0];
Second element of caption array… play15.pl2.pltxt2.text = captions[1];
Etc.
XML looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<pictures>

<picture caption="2008 SLGA Holiday Bazaar, proceeds to benefit local Food Bank"
url="08_holiday_bazaar.jpg" />
<picture caption="What we learned at the Lavender Conference, Tom and Madeline Wajda"
url="tom_100.jpg" />
<picture caption="4th International Lavender Conference Kicks Off"
url="social.jpg" />
To display a caption only when a particular video is chosen, follow the same basic steps as above but only display the currently selected array element. Something like this:
captions_txt.text =captions[videoList.selectedIndex]
There are a number of good tuts available at:
www.gotoandlearn.com
www.flashkit.com
and
http://www.flashcomguru.com/tutorials/flv_list.cfm
Best wishes,
Eye for Video
www.cidigitalmedia.com

juju360
09-01-2009, 01:06 PM
the caption only displayed when it’s corresponding FLV file selected and played. not sure how what you gave me is gonna load every time a thumbnail is clicked and plays a FLV. it seems the way they connected the SkinOverPlaySeekMute.swfis.

in case you want to see a working version:
http://republicofcode.com/tutorials/...mlvideoplayer/


HERE'S ALL THE AS: (done in as3)

import fl.video.*;

var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var video_x:Number;
var video_y:Number;
var my_videos:XMLList;
var my_total:Number;

var main_container:Sprite;
var thumbs:Sprite;
var titles:Sprite;
var my_player:FLVPlayback;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);

thumb_width = myXML.@THUMB_WIDTH;
thumb_height = myXML.@THUMB_HEIGHT;
thumbs_x = myXML.@THUMBS_X;
thumbs_y = myXML.@THUMBS_Y;
video_x = myXML.@VIDEO_X;
video_y = myXML.@VIDEO_Y;
my_videos = myXML.VIDEO;
my_total = my_videos.length();
makeContainers();
callThumbs();
makePlayer();
}

function makeContainers():void{
main_container = new Sprite();
addChild(main_container);
thumbs = new Sprite();
thumbs.x = thumbs_x;
thumbs.y = thumbs_y;
main_container.addChild(thumbs);

titles = new Sprite();
thumbs.addEventListener(MouseEvent.CLICK, playVideo);
thumbs.addEventListener(MouseEvent.MOUSE_OVER, onOver);
thumbs.addEventListener(MouseEvent.MOUSE_OUT, onOut);
titles.x = thumbs_x;
titles.y = thumbs_y;
thumbs.buttonMode = true;
main_container.addChild(titles);
}
function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){
var thumb_url = my_videos[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.name = i;
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.x = (thumb_width+10)*i;

var thumb_title = my_videos[i].@TITLE;
var title_txt:TextField = new TextField();
}
}
function thumbLoaded(e:Event):void{
var my_thumb:Loader = Loader(e.target.loader);
thumbs.addChild(my_thumb);
}

function makePlayer():void{
my_player = new FLVPlayback();
my_player.skin = "SkinOverPlaySeekMute.swf";
my_player.skinBackgroundColor = 0xAEBEFB;
my_player.skinBackgroundAlpha = 0.5;

my_player.x = video_x;
my_player.y = video_y;
my_player.width = 640;
my_player.height = 480;

main_container.addChild(my_player);
my_player.source = my_videos[0].@URL;
}
function playVideo(e:MouseEvent):void{
var video_url = my_videos[e.target.name].@URL;
my_player.source = video_url;
}
function onOver (e:MouseEvent):void{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.5;
}
function onOut (e:MouseEvent):void{
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}

AND HERE'S THE XML (called playlist.xml)

<?xml version="1.0" encoding="utf-8"?>
<PLAYLIST THUMBS_X="58" THUMBS_Y="430" THUMB_WIDTH="125" THUMB_HEIGHT="70" VIDEO_X="-5" VIDEO_Y="-30" >
<VIDEO TITLE="Whistle Stop Train Tour" THUMB="thumbs/greatplacetowork.jpg" URL="video/video1.flv"/>
<VIDEO TITLE="Obama Weekly Address" THUMB="thumbs/nasa.jpg" URL="video/video2.flv"/>
<VIDEO TITLE="Lincoln Memorial Concert" THUMB="thumbs/stelizabeth.jpg" URL="video/video3.flv"/>
<VIDEO TITLE="Lincoln Memorial Concert" THUMB="thumbs/stelizabeth.jpg" URL="video/video3.flv"/>
</PLAYLIST>

Eye for Video
09-01-2009, 01:40 PM
The link to the working model posted in both posts comes back “Page not Found” so I’m not really sure what it looks like.
But yeah, your player is laid out completely different than the xml array method I was using. Here’s a link to a working model of a custom player with captions for each video. Click through a couple to see captions change.
http://www.cidigitalmedia.com/video.html
Without working all the way through the tutorial, I’m not sure exactly what’s up with your version. Does everything work except the TITLE?
EfV

juju360
09-01-2009, 01:56 PM
ok Lynn, you right, bad link.

i checked url. please take a look at this one:

http://www.republicofcode.com/tutorials/flash/as3xmlvideoplayer/

well, the captions i'm require to incorporate displays on the screen all what the person is saying


thank you for your help buddy
julio

Eye for Video
09-01-2009, 04:02 PM
So you are trying to create something different than the tutorial? I don't see captions of what the person is saying displayed on the screen in the link above.
If captions on the screen is what you are trying to accomplish you should look into using Flash Que points. You can embed these que points into video and have a certain caption appear on the screen whenever that particular spot in the video is reached. You can embed as many or as few as you want.
Goggle for "Flash Que points" to get started on that.
Best wishes,
EfV