Buttons, Buttons

Suppose we'd like to add more buttons, say, pause, next and previous? You'd need to make a new overlay.png with whatever buttons you wanted and move all the buttons around to do that. So we'll go a different route. Instead of a overlay background, we'll use individual button images.

Again, you'll need some images, so here they are:

play.png  pause.png  stop.png



Right click and save images to the "test" folder.

Now open up your "imagelist.txt", clear all the code, and add this code:

play.png
pause.png
stop.png

Open up your "setup.as" and make the following changes:

/* Comment out these lines */
//overlay.setSkin('overlay_png');
//overlay.move(0,0);

//AssetManager.registerBitmapDataAsset(new BitmapData(17,17,true,0x65ff0000), 'bttn');
/* Change the following */
btnPlay.setSkin('play_png');
btnPlay.move(0,0);
btnPause.setSkin('pause_png');
btnPause.move(17,0);
btnStop.setSkin('stop_png');
btnStop.move(34,0);
So now your setup.as should look like this:

AssetManager.registerBitmapDataAsset(new BitmapData(2,2,false,0xaaaaaa),'under');
underlay.setSkin('under');
underlay.setSize(_width,_height);
underlay.move(0,0);

setDisplay(10,10,_width-20,_height-20,0x000000);

//overlay.setSkin('overlay_png');
//overlay.move(0,0);

//AssetManager.registerBitmapDataAsset(new BitmapData(17,17,true,0x65ff0000), 'bttn');

btnPlay.setSkin('play_png');
btnPlay.move(0,0);
btnPause.setSkin('pause_png');
btnPause.move(17,0);
btnStop.setSkin('stop_png');
btnStop.move(34,0);

Open KoolMoves and save file as 'SWF/Flash Movie'. Close KoolMoves. Open up your "test.html." Your buttons are there, but since the buttons are black and there is no overlay to use as a background, they get hidden a bit by the display. So we'll make a new overlay like we made the underlay. Open up the "setup.as" again. We're now going to move and change some things to get better looking buttons.

/* Change this */
//overlay.setSkin('overlay_png');
//overlay.move(0,0);

//AssetManager.registerBitmapDataAsset(new BitmapData(17,17,true,0x65ff0000), 'bttn');

/* To this */
AssetManager.registerBitmapDataAsset(new BitmapData(5,5,false,0xffffff), 'over');
overlay.setSkin('over');
overlay.move(0,0);
overlay.setSize(51,15);

Open up your "test.html" and you should have three buttons. And a fully functional KoolMoves Media Player. Not functional enough you say? Well let's carry on!