Expanded Skin in progress (feedback?)

[blanius]

Here's the new skin I've been working on.
http://bretlanius.com/flash/lab/example.html

It has a single visualization at the moment.
It has pull out ID3 tag panel
It has Fullscreen toggle.

I welcome feedback in general and especially in regards to the added features.

Thanks to Wilburt again for making such a great skinable player. All the features you see on this skin are contained in the skin.

The only manual thing to do is adding support for the fullscreen into the HTML tags.

[Nightcap]

Well, what do you want me to say Bret? I like the skin and I like that it has a visualization. Having several visualizations would even be nicer ;), but it's a good start. The full screen option was a big (literally!) surprise and may come in handy. I never gave that much thought until now.

It's a good looking player and it will be a great extension to the existing KM media players.

[w.brants]

Nice work Bret !

[blanius]

Nightcap, still working out some other visualizations but the hard part is making the option of several within the skin. That requires me to make all objects via script. But I'm working on it.
Haven't decided if the id3 panel should pull out like it does now which compromises the fullscreen. I suppose I might try to make it work differently in Fullscreen as opposed to not.... I don't know :( can't decide.

[w.brants]

Haven't decided if the id3 panel should pull out like it does now which compromises the fullscreen.
The next flash player update (Flash Player 9 Update 3) that is already available as a public beta ( http://labs.adobe.com/downloads/flashplayer9.html ) supports a stage property to set the rectangle that will be scaled to full screen. I suggest using that.Stage.fullScreenSourceRect = new flash.geom.Rectangle(0, 0, Stage.width, Stage.height);
Stage.displayState = 'fullScreen';

[blanius]

Very Interesting......

[Nightcap]

Nightcap, still working out some other visualizations but the hard part is making the option of several within the skin. That requires me to make all objects via script. But I'm working on it.
Haven't decided if the id3 panel should pull out like it does now which compromises the fullscreen. I suppose I might try to make it work differently in Fullscreen as opposed to not.... I don't know :( can't decide.
My remark about the visualizations was in jest, but having a few available makes the player all the more attractive.
Possibly the ID panel could come down from the top of the player when in fullscreen mode? It may not be what you had in mind, still it's better than having no ID panel. :)

[blanius]

The current test I've got going is when in FS the id3 panel is an overlay and in normal it's a pullout and using the Beta player and the new code, in FS it's just the player window. The challenge is that the code got complicated quickly just to move the id3 panel in two different ways. I can handle it but it would be better if I could programaticly change the state of the button. Any way it's coming along.

[Nightcap]

I'm sure it will turn out great despite the challenges. Keep us informed. :)

[w.brants]

Bret,

Inspired by the work you did I also tried to create a visualization.
http://www.geboortegrond.nl/soundscape/
The main concern to me is if the cpu load isn't getting to high. How do you keep it low ?

[blanius]

so far I've keep them simple. First one just uses lineTo can clear() and the other one I have working just is a variation with curveTo. I'm working on the next one and playing with the idea of fiddling with a color matrix

[w.brants]

fiddling with a color matrix
That might work out pretty nice. A color matrix doesn't take much time to render and has a lot of possibilities.

[Stoke Laurie]

Can you let me know how are you accessing which variables to create the visualisation.

[blanius]

onFD=function(a){//a is array of 9 to 12 elements, I think is the range from 0-10
for (x=0;x<=a.length;x++){
//here we can use a[x]
}
}

[w.brants]

Actually the range for each array item is 0 - 15 .

[Stoke Laurie]

Thanks for your replies guys, but still in the dark, perhaps if Brett were to submit his first example to Koolexchange, we could have a greater understanding and then get on with the fun bit of creating the graphics.

[blanius]

On my laptop at the moment. On shoots nearly daily till late next week so not getting much done, but if I get a free moment I'll put the test player up that I demoed (http://www.bretlanius.com/flash/lab/mediaVisuals.html) right this moment it's 12:45 am and just got in from a 13+ hour shoot on the stage for a fence company DVD

[Nightcap]

Get some sleep DVD dude. :)

[blanius]

Here's the code for the one visualization

mediaplayer1.onFD(a){
start=30
if (a.length){
mc4.clear()
mc4.moveTo(start,0)
c=randRange(0x000000,0xffffff)
for (x=1;x<=a.length+1;x++){

mc4.lineStyle(2, c, 100, false, "none", "square", "miter", 8)
mc4.lineTo(start*x-1,-a[x-1]*25)

}

}
}//end onFd


Mc4 is just empty holder that I draw on.
Also it uses the function

function randRange(min,max){
var randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}


The new code is a little different as I'm building inside of the skin. Still working this out.

[blanius]

I've worked pretty hard on this and hesitated to share it so be nice y'all
Here's what it looks like so far.
http://bretlanius.com/flash/lab/example.html
Requires Beta 9 flash player to get all the features.

Here's the LOAD.AS so far for the expanded skin. You won't be able to use this directly without my graphics that match the code but should start you in the right direction



MovieClip.prototype.easeTo=function(x,y,speed){
this.onEnterFrame= function(){
this._x += (x-this._x)/speed;
this._y += (y-this._y)/speed;
}

}//end easeTo Function

function randRange(min,max){
var randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}//end randRange function

pl_item_up = new flash.display.BitmapData(260,20,true,0);
pl_item_down = pl_item_up.clone();
pl_item_over = pl_item_up.clone();
pl_item_up.fillRect(new flash.geom.Rectangle(0,1,260,18),0xd0808080);
pl_item_down.fillRect(new flash.geom.Rectangle(0,1,260,18),0xd0c07000);
pl_item_over.fillRect(new flash.geom.Rectangle(0,1,260,18),0xd0a07840);
vslider = new flash.display.BitmapData(4,180,false,0x808080);
drag = new flash.display.BitmapData(8,8,false,0xc0c0c0);
pl_bg = "playlist"
pl_bg._x-=20


//create id3panel

id3bg = flash.display.BitmapData.loadBitmap(prefix + 'id3panel');
this.createEmptyMovieClip("id3panel", this.getNextHighestDepth());
id3panel.attachBitmap(id3bg, 2, "auto", true);
id3panel.createTextField('info',this.getNextHighes tDepth(),15,15,250,200)
id3panel.info.multiline = true;
id3panel.info.wordWrap = true;
id3panel.info.selectable=false;
id3panel.info.html=true;
id3panel.info.mouseWheelEnabled=true;
id3panel.swapDepths(-10)
id3panel.out=false
id3panel._visible=true

//Create Visualizer
//visbg = flash.display.BitmapData.loadBitmap(prefix + 'visualsBG');
this.createEmptyMovieClip("vmc", this.getNextHighestDepth());
//vmc.attachBitmap(visbg, 2, "auto", true);
vmc._x=5;
vmc._y=5;
vmc._visible=false;

/*
* Need to decide how to preload the visualizers and build the child clip for this so that the user
* can selecet from a couple of visuals
*/

setUnderlayImage(0,0,'underlay');
setDisplay(10,10,309,230);
setScaleMode(0,false);//0 (scale to fit), 1 (scale and crop) or 2 (crop).
setInfoScroll(1,_sans,14,0xb2480b,false,3);
setTimelineSlider(80,250,'',1,2,1,'sliderFill',0,6 ,170,'pSlide','pSlide','pSlide');
setVolumeSlider ( 260, 250, 'volFill', 0, 0,-1, 'volfill', 2, 5, -40, 'volSlide', 'volslide', 'volSlideOver' )
setTimer(250,280,'_sans',11,0xf0f0f0,true,true);
setPauseButton(35,255,'pause','','pauseOver');
setPlayButton(35,255,'play','','playOver');
setPrevButton(5,255,'prev','prev','prevOver');
setNextButton(50,255,'next','next','nextOver');
setPlButton(300,270,'pls','plsO','plsO',true);
setUserButton ( 1,290,220, 'id3', 'id3D', 'id3',true)
setUserButton ( 2,275,245, 'fullScreen', 'fullScreenD', 'fullScreen',true)//fullscreen
setUserButton ( 3,300,250, 'vis', 'visD', 'vis',true)//Visualizations

setListDisplay(20,20,pl_bg,null,null,null,8,10,180 ,pl_item_up,pl_item_down,pl_item_over,'_sans',11,0 xffffff,true,'left',280,15,vslider,2,0,-180,drag,null,null,true);
pl_underlay.swapDepths(7);

plSelClose=true;

setListVisibility(false);

setExternalPlaylist ( 'playlist.txt', 0 )

this.createTextField('txt1',getNextHighestDepth(), 10,280,200,40);

txt1.multiline=false;
txt1.selectable=false;


onPlay=function(nr,fname){
txt1.text=fname.slice(fname.lastIndexOf('/')+1,fname.lastIndexOf('.'))
vmc.clear()
ext=fname.substr(fname.lastIndexOf('.')+1)
fname=fname.slice(0,fname.lastIndexOf('.'))

if (ext!='mp3' && ext!='fd'){
id3panel.info.htmlText="<b></b>id3 Not Available for\n"+ext+" Files</b>"

}

}

onUserButton=function(nr,down){

if(nr==1){//id3
if (Stage.displayState=="fullScreen"){

id3panel._visible=!id3panel._visible;
}else{
id3panel.out=!id3panel.out
if (id3panel.out){
id3panel.easeTo(325,0,5)
}else{
id3panel.easeTo(0,0,5)
}

}
}
if(nr==3){//vis
vmc._visible=!vmc._visible

}
if (nr==2){//Fullscreen toggle
Stage.fullScreenSourceRect = new flash.geom.Rectangle(0, 0, 360, Stage.height);
if (down==true){
Stage.displayState="fullScreen"
id3panel.swapDepths(99)
if(id3panel.out){
id3panel.out=false;
id3panel._visible=false;
id3panel._x=0;

}
}else{
id3panel.swapDepths(-10)
id3panel._visible=true
id3panel.out=true;
id3panel._x=0;
Stage.displayState="normal"
}

}

}
onID3=function(){//id3 2 tags only
if(id3.TIT2){
txt1.text=id3.TIT2;
}
this.id3panel.info.htmlText="<b>Title: </b>"+id3.TIT2+" <b>Track: </b>"+id3.TRCK+" <b>Length: </b>"+id3.TIME+"\n";
this.id3panel.info.htmlText+="<b>Artist: </b>"+id3.TPE1+"\n";
this.id3panel.info.htmlText+="<b>Comment: </b>"+id3.COMM+"\n";
this.id3panel.info.htmlText+="<b>Genre: </b>"+id3.TCON+"\n";

}

onFD=function(a){
/*Lines
c=randRange(0x000000,0xffffff)
if (a.length){
vmc.clear()
vmc.moveTo(40,200)
for (x=1;x<=a.length;x++){
start=40
vmc.lineStyle(2, c, 100, false, "none", "round", "miter", 8)
vmc.lineTo(start+(x*20),200+(-a[x-1]*15))
}//end for

}//end if
*/
//curves
if (a.length){

vmc.clear()


for (x=1;x<=a.length+1;x++){
start=40
c=randRange(0x000000,0xffffff)
vmc.moveTo(40,10)
vmc.lineStyle(2,c,100,false,"none","round","miter",8)
vmc.curveTo((x*30),a[x]*40,280,10)
}//end for
}//endif


}

[w.brants]

Since you are so kind to share your source Bret, I'll also share the source of the visualization I did. It doesn't add buttons to the skin like you did but only adds a visualization. It's a modified load.as file for the OffWhite skin.width = limit(width,173,1024);
height = limit(height,240,768);

hslider = new flash.display.BitmapData(width-52,1,false,0xa0a090);
cdrag = new flash.display.BitmapData(width-66,17,true,0);
tdrag = new flash.display.BitmapData(16,16,true,0);

setUnderlayImage(0,0,'underlay',width,height,new flash.geom.Rectangle(10,200,40,30));
setDisplay(6,23,width-46,height-33,0xf7f9f0);

setInfoScroll(0,'_sans',11,0xa0a090,true,1,9,6,wid th-75,14);
setFD(12,height-14,8,30,2,0xa0a090);

setTimelineSlider(9,height-7,'',0,0,1,hslider,0,0,width-52,tdrag);
setVolumeSlider(width-22,133,'',0,0,0,'volume_fill',1,0,-38,'drag');

setPauseButton(width-32,20,'pause_up','pause_down','pause_over');
setPlayButton(width-32,20,'play_up','play_down','play_over');
setStopButton(width-28,48,'stop_up','stop_down','stop_over');
setNextButton(width-28,74,'next_up','next_down','next_over');
setPrevButton(width-28,99,'prev_up','prev_down','prev_over');
setDragButton(6,5,cdrag);

underlay.filters = [f_shw];

// ** here starts the visualization code **

// rainbow color arrays for 9 and 12 band fd

c9 = [0x630000, 0xbd0000, 0xff0000, 0xff0000, 0xffb500, 0xbdff00, 0x18ff00, 0xa5ff, 0x5a00ff, 0x6b006b];
c12 = [0x630000, 0xa50000, 0xe70000, 0xff0000, 0xff0000, 0xff8c00, 0xffff00, 0x9cff00, 0x18ff00, 0xd6ff, 0x31ff, 0x7b00e7, 0x6b006b];

// create a non visible movieclip to draw on

createEmptyMovieClip('rbow', 99);
rbow._visible = false;

// create a bitmap with the same size as the display object and attach it

rbow_bd = new flash.display.BitmapData(videoholder.w, videoholder.h, true, 0);
videoholder.attachBitmap(rbow_bd, 2);

// init the required matrices and rectangle

matrix = new flash.geom.Matrix();
matrix.createGradientBox(4, rbow_bd.height, -Math.PI / 2);
matrix2 = new flash.geom.Matrix(1, 0, 0, 1, rbow_bd.width - 4, 0);
rect = new flash.geom.Rectangle(rbow_bd.width-2, 0, 2, rbow_bd.height);

// add a glow to the normal fd bars

fdsp.filters = [new flash.filters.GlowFilter(0xf7f9f0, 1, 16, 16)];

// process the frequency data

_onFD = function(a){
if (a.length){
rbow_bd.scroll(-1, 0);
rbow_bd.fillRect(rect, 0);
alphas = [0];
ratios = [0];
i = 0;
while (i < a.length){
i++;
alphas[i] = a[i] * 4;
ratios[i] = 255 * i / a.length;
}
rbow.clear();
rbow.beginGradientFill('linear', this['c'+a.length], alphas, ratios, matrix);
rbow.moveTo(0, 0);
rbow.lineTo(0, rbow_bd.width);
rbow.lineTo(4, rbow_bd.width);
rbow.lineTo(4, 0);
rbow.endFill();
rbow_bd.draw(rbow, matrix2);
} else {
rbow_bd.fillRect(rbow_bd.rectangle, 0);
}
}

[Stoke Laurie]

Thanks very much guys, I'll work on your examples and see if I cant repay with some work of my own.