1 Reply Latest reply: May 8, 2008 8:12 PM by KuanKuan RSS

    FLV - Full screen toggle on video window click

    Nickels55 Community Member
      Messageboard 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:

      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.