FLV - Full screen toggle on video window click
Nickels55 Oct 12, 2006 9:40 AMMessageboard heroine Urami posted some code on how to make an
FLV go from normal size to full screen with the press of the up and
down arrow keys. This was news to me! Since I am much better at
hacking code then creating it on my own, I decided this needed to
be modified to having the user click of the video instead of using
the arrow keys. Easier said then done....
I present you the result of a few days of hair pulling code busting:
Full Screen Toggle Test
There are no directions on the page, just click on the movie window to make it full screen, and again to go back to normal.
This will only work on videos that are 480x360 (4:3 ratio). You will have to adjust the code if you want to use this on other sized videos. Here is the altered code:
To make this all work do the following:
1. View source of my html page, copy and paste it or save it as your own html paeg. Rename the swf file to your flash file's swf name.
2. Create a Flash file sized at 480x400. The extra 40 pixels are for the controller under the movie.
3. Place an FLVplayback component on the upper left (0,0) corner stage and give it an instance name of player
4. Create an invisible button, place it anywhere on the stage in it's own layer and give it the instance name of inv
5. Create an actions layer and paste in the above code.
Thanks again to urami for teaching me something new, and for providing the foundation for many more tests on creating a flash movie that toggles from small to full screen.
Hope this helps someone out there.
Any enhancements to the above code is not only welcomed, but encouraged.
I present you the result of a few days of hair pulling code busting:
Full Screen Toggle Test
There are no directions on the page, just click on the movie window to make it full screen, and again to go back to normal.
This will only work on videos that are 480x360 (4:3 ratio). You will have to adjust the code if you want to use this on other sized videos. Here is the altered code:
quote:
x=1; //Indicator to see if button is pushed
resizer = new Object;
resizer.onResize = function(){
(isOriginal) ? setOriginal() : setFullScreen();
}
Stage.addListener(resizer);
Stage.align = "TL";
Stage.scaleMode = "noscale";
var isOriginal:Boolean = true;
onLoad = function(){
setup();
resizer.onResize();
}
function setup() {
original_width = 480; // this is for a 480x360 movie with a skin
original_height = 400; // this is the 360 height + 40 height of the controller skin
inv._width = original_width; // this sets the invisible button width = with of movie
inv._height = original_width*.75; // this sets the invisible button height = 4:3 ratio of width
player.maintainAspectRatio = true; //keeps movie from skewing
player.autoSize = false; // i will control size
player.contentPath = "Chapter5.flv"; // loads flv file
setOriginal();
}
//Invisible Button Code
inv.onRelease = function(){
if(x==1){
setFullScreen(); //fires movie enlarging function
x=0} // resets indicator
else{
setOriginal(); //fires movie shrink function
x=1;} // resets indicator
}
//Resize Small
function setOriginal(){
isOriginal = true;
player.setSize(original_width,original_height); //resets movie size to original settings from above
player._x = (Stage.width/2)-(original_width/2) // resets movie location back to being centered
player._y = (Stage.height/2)-(original_height/2);
inv._x = (Stage.width/2)-(original_width/2); // resets button location back to being centered
inv._y = (Stage.height/2)-(original_height/2);
inv._width = original_width; //resets invisible button size to original settings from above
inv._height = original_width*.75;
}
//Resize Full Screen
function setFullScreen(){ //main function to make movie bigger
isOriginal = false;
player._x = 0; // puts movie at upper left corner of browser
player._y = 0; // puts movie at upper left corner of browser
inv._x = 0; // puts button at upper left corner of browser
inv._y = 0; // puts button at upper left corner of browser
inv._width = Stage.width; //sets button to be fullscreen in width
inv._height = Stage.width*.75; //sets button to be fullscreen in height on a 4:3 ratio to width
player.setSize(Stage.width, Stage.height ); //sets player to be fullscreen
}
To make this all work do the following:
1. View source of my html page, copy and paste it or save it as your own html paeg. Rename the swf file to your flash file's swf name.
2. Create a Flash file sized at 480x400. The extra 40 pixels are for the controller under the movie.
3. Place an FLVplayback component on the upper left (0,0) corner stage and give it an instance name of player
4. Create an invisible button, place it anywhere on the stage in it's own layer and give it the instance name of inv
5. Create an actions layer and paste in the above code.
Thanks again to urami for teaching me something new, and for providing the foundation for many more tests on creating a flash movie that toggles from small to full screen.
Hope this helps someone out there.
Any enhancements to the above code is not only welcomed, but encouraged.

