Not sure how
good this code is (in absolute terms), but it seems to work pretty well as is.
I wrote this in May as an experiment and never completely finished it.
Requires a MovieClip in the Library exported to Btn.
Inside Btn, there is a textfield named "buttonLabel".
ActionScript Code:
import flash.display.*;
import flash.events.*;
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.events.*;
import com.greensock.loading.*;
import com.greensock.loading.display.*;
import com.greensock.loading.data.*;
LoaderMax.activate([VideoLoader]);
// liquid GUI
stage.addEventListener(Event.RESIZE, onResize);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var sw:Number;
var sh:Number;
var swCenter:Number;
var shCenter:Number;
// app data
var links:Array =
[
"video1.flv",
"video2.flv",
"video3.flv",
"video4.flv",
"video5.flv",
];
var videos:Array = new Array();
var buttons:Sprite = new Sprite();
// the video object
var currVid:VideoLoader;
var prevVid:VideoLoader;
// track the current and previous video Sprite container
var currDisplay:ContentDisplay;
var prevDisplay:ContentDisplay;
var mute:Btn;
var muted:Boolean;
var buttonX:Number = 0;
var index:int = 0;
var pad:Number = 5;
// load each video in the links array, one at a time
var loaders:LoaderMax = LoaderMax.parse(links,
new LoaderMaxVars()
.maxConnections(1)
.onComplete(parentComplete)
.onChildComplete(childComplete),
new VideoLoaderVars()
.autoPlay(false)
.x(stage.stageWidth/2)
.y(stage.stageHeight/2)
.width(400)
.height(300)
.centerRegistration(true)
.scaleMode("proportionalOutside")
.smoothing(true));
// append the server directory to the links
loaders.prependURLs("videos/");
loaders.load();
function childComplete(e:LoaderEvent):void
{
videos.push(e.target);
// Btn is a MovieClip in the Library
// Btn contains a dynamic textfield "buttonlabel"
var b:Btn = new Btn();
b.id = index;
b.buttonMode = true;
b.mouseChildren = false;
b.addEventListener(MouseEvent.CLICK, onClick);
b.buttonLabel.text = "video" + index.toString();
b.buttonLabel.autoSize = TextFieldAutoSize.LEFT;
b.x = buttonX;
buttons.addChild(b);
buttonX = buttons.width + pad;
index++;
}
function parentComplete(e:LoaderEvent):void
{
// load first video
prevVid = videos[0] as VideoLoader;
prevVid.playVideo();
prevDisplay = prevVid.content;
// build mute button
mute = new Btn();
mute.buttonLabel.autoSize = TextFieldAutoSize.LEFT;
mute.buttonMode = true;
mute.mouseChildren = false;
mute.addEventListener(MouseEvent.CLICK, toggleSound);
mute.x = mute.y = 0;
resetMute();
addChild(prevDisplay);
addChild(buttons);
addChild(mute);
// tween the alpha for the first video and the buttons
TweenMax.allFrom([prevDisplay, buttons], 1, {onStart:onResize, alpha:0}, .1);
}
// toggle muted/unmuted
function toggleSound(e:MouseEvent):void
{
var vol:Number;
var t:String;
if(!muted)
{
t = "unMute";
vol = 0;
}
else
{
t = "Mute";
vol = 1;
}
mute.buttonLabel.text = t;
TweenMax.to(prevVid, 1, {volume:vol});
muted = !muted;
}
// utility function that resets the mute button to initial state
function resetMute():void
{
muted = false;
mute.buttonLabel.text = "Mute";
}
function onClick(e:MouseEvent):void
{
resetMute();
prevVid.pauseVideo();
removeChild(prevDisplay);
prevVid = videos[e.target.id] as VideoLoader;
prevVid.gotoVideoTime(0, true);
currDisplay = prevVid.content;
currDisplay.alpha = 1;
addChild(currDisplay);
TweenMax.from(currDisplay, .5, {width:prevDisplay.width, ease:Linear.easeInOut});
TweenMax.from(currDisplay, .5, {delay:.5, height:prevDisplay.height, ease:Linear.easeInOut});
prevDisplay = currDisplay;
onResize();
}
// reposition elements when the browser window is resized
function onResize(e:Event=null):void
{
sw = stage.stageWidth;
sh = stage.stageHeight;
swCenter = sw / 2;
shCenter = sh / 2;
buttons.x = swCenter - buttons.width/2;
prevDisplay.x = swCenter;
prevDisplay.y = shCenter;
mute.x = prevDisplay.x - prevDisplay.width/2;
mute.y = prevDisplay.y + prevDisplay.height/2;
}