I've customized the player a ...I've customized the player a bit to support text overlays on the video clip. I've got the code in working order to support multiple text overlays. You can give it a location in pixels, percents or direction (left, middle, right, top, bottom). The text get repositioned and resized proportionately when the video is resized (or a new video gets loaded with different dimensions). The code is pretty rough right now, but I even have it hooked into javascript, so you can add/update the overlays through js as you need to. I figured I'd share it with you, since I've seen some people request such features. Here are the directions and code to use this:
1. Open the mediaplayer.fla file.
2. (Adding the font to use allowing transparency) Right-click in the Library area and select "New Font...". Name the font "OverlayFont" and select whatever font you want to use for the overlays. Check the "Bold" box. Click "OK". Right-click the new "OverlayFont" item in the library and select "Linkage...". Check the boxes for "Export for ActionScript" and "Export in first frame". Make sure the Identifier is set to "OverlayFont". Click "OK".
3. (Setup overlay code in first from of .fla file) Click the first frame of the script layer and press F9. Add the following code after the line that reads "com.jeroenwijering.players.MediaPlayer.main();":
var overlayBaseSize = (infoBase == undefined) ? 300 : parseInt(infoBase); // Base text size
var overlayPadding = (infoBuffer == undefined) ? 0 : parseInt(infoBuffer); // Padding around overlays
var overlayAlpha = (infoAlpha == undefined) ? 60 : parseInt(infoAlpha); // Transparency
// Text overlays
var textOverlays = new Array();
// Font style
var overlayFontFormat:TextFormat = new TextFormat();
overlayFontFormat.bold = true;
overlayFontFormat.font = "OverlayFont";
overlayFontFormat.color = 0xFFFFFF;
overlayFontFormat.size = 8;
// Position an overlay on the video
function setOverlay(idx, txt, alignment)
{
var overlayFound = false;
// See if overlay exists
for(var i in textOverlays)
{
if(textOverlays[i].idx == idx)
{
// Update existing overlay
overlayFound = true;
if(txt != "")
{
textOverlays[i].txtField.text = txt;
textOverlays[i].txtField.setTextFormat(overlayFontFormat);
}
if(alignment != "") textOverlays[i].alignment = alignment;
}
}
// Overlay not found, create it
if(!overlayFound)
{
var tmpObj = {};
var tmpTF = _root.createTextField("tmp", 100+textOverlays.length, 0, 0, 0, 0);
tmpTF.embedFonts = true;
tmpTF._visible = false;
tmpTF.autoSize = true;
tmpTF._alpha = overlayAlpha;
tmpTF.text = txt;
tmpTF.setTextFormat(overlayFontFormat);
tmpObj.idx = idx;
tmpObj.txtField = tmpTF;
tmpObj.alignment = alignment;
textOverlays[textOverlays.length] = tmpObj;
}
}
// Optimal width for movie
var alphaWidth = overlayBaseSize;
// Initialize overlays
var lastVidWidth = -1;
function initTextOverlays()
{
if(Stage.width == lastVidWidth) return;
lastVidWidth = Stage.width;
for(var i in textOverlays)
{
// Scale text depending on size
var scale = 100 * Math.round(_root.player.display.video._width / alphaWidth);
textOverlays[i].txtField._xscale = textOverlays[i].txtField._yscale = scale;
// Make sure we have a proper alignment
var coords = textOverlays[i].alignment.split(",");
if(coords.length != 2)
{
coords[0] = "l";
coords[1] = "t";
}
// Set horizontal position
switch(coords[0].toLowerCase())
{
case "l":
textOverlays[i].txtField._x = _root.player.display.video._x + overlayPadding;
break;
case "m":
textOverlays[i].txtField._x = _root.player.display.video._x + ((_root.player.display.video._width - textOverlays[i].txtField._width) / 2);
break;
case "r":
textOverlays[i].txtField._x = _root.player.display.video._x + _root.player.display.video._width - textOverlays[i].txtField._width - overlayPadding;
break;
default:
var hBasePos = _root.player.display.video._x;
var hMultiple = 1;
if(coords[0].indexOf("*") > -1)
{
// Start from the right of the video
hBasePos = _root.player.display.video._x + _root.player.display.video._width;
coords[0] = coords[0].strreplace("*", "");
hMultiple = -1;
}
// Something else, like number/percent coordinates
var hAdjust = 0;
var numVal = coords[0].strreplace("%", "");
if(coords[0] != numVal)
{
// Percentage value
numVal = numVal / 100;
hAdjust = _root.player.display.video._width * numVal;
//textOverlays[i].txtField._x = _root.player.display.video._x + (_root.player.display.video._width * numVal);
}
else
{
// Number val
hAdjust = numVal;
//textOverlays[i].txtField._x = _root.player.display.video._x + numVal;
}
// Position overlay
textOverlays[i].txtField._x = hBasePos + (hAdjust * hMultiple);
break;
}
// Set vertical position
switch(coords[1].toLowerCase())
{
case "t":
textOverlays[i].txtField._y = _root.player.display.video._y;
break;
case "b":
textOverlays[i].txtField._y = (_root.player.display.video._y + _root.player.display.video._height) - textOverlays[i].txtField._height;
break;
default:
var vBasePos = _root.player.display.video._y;
var vMultiple = 1;
var vAdjust = -1 * textOverlays[i].txtField._height;
if(coords[1].indexOf("*") > -1)
{
// Start from the bottom of the video
vBasePos = _root.player.display.video._y + _root.player.display.video._height;
coords[1] = coords[1].strreplace("*", "");
vMultiple = -1;
vAdjust = 0;
}
// Something else, like number/percent coordinates
var numVal = coords[1].strreplace("%", "");
if(coords[1] != numVal)
{
// Percentage value
numVal = numVal / 100;
vAdjust += _root.player.display.video._height * numVal;
}
else
{
// Number val
vAdjust += numVal;
}
// Position overlay
textOverlays[i].txtField._y = vBasePos + (vAdjust * vMultiple);
break;
}
// Make sure text isn't out of bounds
if(textOverlays[i].txtField._x < _root.player.display.video._x + overlayPadding) textOverlays[i].txtField._x = _root.player.display.video._x + overlayPadding;
if(textOverlays[i].txtField._x + textOverlays[i].txtField._width > _root.player.display.video._x + _root.player.display.video._width - overlayPadding) textOverlays[i].txtField._x = _root.player.display.video._x + _root.player.display.video._width - textOverlays[i].txtField._width - overlayPadding;
if(textOverlays[i].txtField._y < _root.player.display.video._y + overlayPadding) textOverlays[i].txtField._y = _root.player.display.video._y + overlayPadding;
if(textOverlays[i].txtField._y + textOverlays[i].txtField._height > _root.player.display.video._y + _root.player.display.video._height - overlayPadding) textOverlays[i].txtField._y = _root.player.display.video._y + _root.player.display.video._height - textOverlays[i].txtField._height - overlayPadding;
textOverlays[i].txtField._visible = true;
}
}
String.prototype.strreplace = function(pattern, replacement)
{
return this.split(pattern).join(replacement);
}
4a. (Reposition overlays when a new video starts) Open the FLVModel.as file. At the end of the the setStart() function after the line that reads "loadedInterval = setInterval(this,"updateLoaded",100);" add the following code:
// Reset overlays when a new video starts
_root.lastVidWidth = 0;4b. At the end of the updatePosition() function right before the line that reads "};" add the following code:
if(currentPosition > 0) _root.initTextOverlays();
5. (Allowing the overlays to change size) Open the DisplayView.as file. At the end of the scaleClip() function after the line that reads "tgt.mc.gotoAndPlay(tcf);" add the following code:
// Reset size of overlays
_root.lastVidWidth = 0;6. (Sending javascript event for overly) Open the AbstractView.as file. Add the following function at the end of the file just before the last line that reads "}":
/** Add/update overlay **/
private function overlaySetInfo(idx:String,txt:String,alignment:String) {
_root.setOverlay(idx, txt, alignment);
};7. (Adding the javascript callback) Open the JavascriptView.js file. Add the following code after the line that reads "ExternalInterface.addCallback("sendEvent",this,sendEvent);":
ExternalInterface.addCallback("setOverlay",this,overlaySetInfo);
That's it for the setup. Sorry for the length of steps. I know the code is still a little junked up. If anyone has suggestions on better places to put this code, please let me know. I just did the bulk of it from the script layer on the first frame for speed of develpment time. The main function we'll be working with is the newly created setOverlay() function:
setOverlay(idx, txt, alignment) - Takes 3 parameters:
idx - The id assigned to the overlay so you can reference it later
txt - The value of the text to overlay
alignment - The position of the overlayThe alignment is any comma separated combination of the following in the form "x,y":
directions (l/m/r,t/b) - These translate to left/middle/right, top/bottom
examples of directions:
"l,t" - Top left corner
"m,b" - Bottom middle
"r,t" - Top right corner
pixel values (x) - Any integer value for location coordinates
examples of pixel values:
"0,0" - Top left corner of the video
"100,0" - 100px from the left side at the top of the video
"50,50" - 50px down and 50px to the right
percentage values (x%) - Any percentage value for location
examples of percentage values:
"50%,50%" - Positions halfway vertically and horizontally
"10%,80%" - 10% from the left, 80% from the top
ANY combination of these values will work. Here are some more examples of possible alignments:
"l,50%" - Halfway vertically on the left side of video
"50,b" - 50px to from the left and on the bottom
An additional * may be used to indication that the supplied value should start from the right or bottom of the video. Here are some examples:
"l,*50" - Left of the video 50px from the bottom
"*30%,*10" - 30% from the right of the video and 10px from the bottom
"*25,*25" - 25px from the right and 25px from the bottom
So the alignment setting is VERY versitile in terms of the coordinates it can accepts. Here are some methods to using the overlays on your videos:
Method 1: (Adding/updating overlay by hard-coding the .fla file) Add this code to the first frame in the script layer:
setOverlay("overlay1", "Hello World", "l,t");
setOverlay("overlay2", "More text", "m,*20");This will position "Hello World" in the top left corner of the video and "More text" in the center 20px from the bottom. You can change the "Hello World" text using this:
setOverlay("overlay1", "Some new text", "");
This keeps the same placement location of the overlay and just changes the text that is displayed. You can also change the placement of the overlay like this:
setOverlay("overlay1", "", "r,b");
This moves the overlay to the bottom right and keeps the text it was previously displaying.
Method 2: (Adding/updating overly using javascript) You can using this same code inside javascript on a page to add/update overlays. Here's how:
thisMovie('yourSWF').setOverlay('overlay1', 'Hello World', 'l,t');
The javascript calls can be used the same way as the ActionScript shown above.
Hopefully you aren't too scared of the length of this setup/tutorial. Let me know if you have problems getting this to work. I'll try to setup an example page sometime soon. I'll post back when I get one up.
VERY nice! Thanks for sharing.