Building Video thumbnail component
OK Here's what I'm up to.
http://bretlanius.com/flash/km7stuff/thumbtest.html
I've managed to create a component that is a thumbnail for making a table of them as a kind of playlist for a media player.
It's working so far
Code:
/**
* @author Bret Lanius
* @version 0.1
* class Intended for use with Koolmoves 7 Media player component.
* vthumb(imageURL,videoURL,infoText,xSize,Ysize);
*/
package com.bretlanius.ui {
import net.stevensacks.preloaders.CircleSlicePreloader;
import com.calypso88.Pic;// doc at http://www.calypso88.com/?page_id=94
import gs.TweenMax;
import gs.easing.*;
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.text.TextField;
import flash.text.TextFormat;
public class vthumb extends Sprite
{
public var vURL:String ;
public var info:String;
public var t:TextField = new TextField();
public var preloader:CircleSlicePreloader = new CircleSlicePreloader();
//var tween:TweenMax = TweenMax.to(t, 0, { alpha:0 } );
public function vthumb(title:String,imageURL:String,videoURL:String,infoText:String,xSize:Number,ySize:Number):void {//set defaults
vURL = videoURL;
info = infoText;
//get image load into image
preloader.x = xSize/ 2;
preloader.y = ySize/ 2;
addChild(preloader);
var p:Pic = new Pic(imageURL);
p.addEventListener(Pic.LOADED, onLoaded);
p.alpha = 0;
p.scaleX = .4;
p.scaleY = 0;
addChild(p);
addEventListener(MouseEvent.ROLL_OVER, showTitle);
addEventListener(MouseEvent.ROLL_OUT, hideTitle);
//create Info panel and load text into it
var tformat:TextFormat = new TextFormat();
tformat.size = 12;
tformat.align = "center";
t.alpha = 0;
t.background = true;
t.border = true;
t.multiline = true;
t.wordWrap = true;
t.selectable = false;
t.width = xSize;
t.height = ySize;
t.defaultTextFormat = tformat;
t.text = title;
addChild(t);
}
public function getURL():String
{
return vURL;
}
public function getInfo():String
{
return info;
}
public function showTitle(e:MouseEvent):void
{
//t.alpha = .8;
//tween.setDestination("alpha", .8);
TweenMax.to(t, 1.5, { alpha:.8 } );
}
public function hideTitle(e:MouseEvent):void
{
//t.alpha = 0;
//tween.setDestination("alpha", 0);
TweenMax.to(t, 1.5, { alpha:0 } );
}
private function onLoaded(e:Event):void
{
removeChild(preloader);
TweenMax.to(e.currentTarget, 1, {scaleX:.6,scaleY:.6,alpha:1,ease:Bounce.easeOut});
}
}//end class
}//end Package
And the code in my test so far it's mostly working fine (NOTE:there is alot of test code in there not doing anything, like the XML loader)
Code:
/*
Video player using XML loaded thumbnails in Scrollpane
Bret Lanius
bret@bretlanius.com
Requires Koolmoves (koolmoves.com)
*/
import com.bretlanius.ui.vthumb;
import km.components.*;
import km.display.*;
var myXML:XML=new XML();
var myLoader:URLLoader=new URLLoader();
myLoader.load(new URLRequest("videos.xml"));
myLoader.addEventListener(Event.COMPLETE,onComplete);
function onComplete(e:Event):void{
//myXML=e.target;
trace(e.target.data is XMLList);
}
function fn(cell:SimpleTableCell):void {
cell.content = new vthumb("My Title\nShort test Video","C0030174.jpg","test"+cell.col+"-"+cell.row+".flv","The <b>description</b> of the video Clip goes here",80,160);
cell.content.addEventListener(MouseEvent.CLICK,click);
//cell.content.label.text = 'Cell ' + cell.col + ',' + cell.row;
//ScriptedSkin.applyTo(cell.content);
}
var table:SimpleTable = new SimpleTable();
table.onCellCreate = fn;
table.setSize(330, 330,4,4);
table.move(20, 20);
//table.colWidths = [.25, .25, .25, .25];
//table.rowHeights = [.25, .25, .25, .25];
table.cellPadding = 0;
//table.cell(1,0).span(2,1);
table.update();
addChild(table);
/*
var sp:ScrollPane = new ScrollPane();
ScriptedSkin.applyTo(sp);
sp.setSize(350,200);
sp.setContent(table);
sp.x=30;
sp.y=30;
addChild(sp);
*/
function click(e:MouseEvent){
txt1.htmlText=e.currentTarget.getURL();
txt1.htmlText+=e.currentTarget.getInfo();
}
function trace(s:String):void{
debug.text+=s+"\n";
}
Now I'm thinking the right thing is to make yet another component that uses this one that is the table already with the end goal would be that you'd create this playlist table of thumbnails add it to your movie and pass it an XML of information that it then creates the table full of thumbnails.
Anyone have any input?