Video Background resizing on browser window resize .

i wonder how the background video size is being changed in the below mentioned website on browser resize .
http://www.endlesseye.com/

my current working demo is
http://jeddahcrm.com/3points_web_demo/index_.html

this is a sample video which i am using as my background.
http://jeddahcrm.com/3points_web_demo/videos/BalotTopView1.flv

my current wok is in as2 , any clues even in as3 will be helpful ,
brainhaxAsked:
Who is Participating?
 
Jakob_ECommented:
Hi Brainhax,

In continuance of your previous post (http://www.experts-exchange.com/Q_25803594.html) here is an updated version of the document class. You'll need three aditional classes
(see attached) placed in the same folder as the DocumentClass.as. I also attached a
flv for testing copy that to a folder named flv inside the build folder.
 
Hope you'll consider staying with AS3 ;)

Best,
Jakob E


package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.display.StageQuality;
    import flash.display.StageDisplayState;
    import flash.display.BitmapData;
   import VideoPlayer;    import MetadataEvent;    import VideoEvent;

    public class DocumentClass extends Sprite {
        private static const MIN_WIDTH:Number=760;
        private static const MIN_HEIGHT:Number=420;
        private var _video:VideoPlayer;
        private var _playlist:Array;
        private var _playlistIndex:int;
        private var _gridOverlay:Sprite;  
        private var _boxA:Sprite;// Top left  
        private var _boxB:Sprite;// Top right
        private var _boxC:Sprite;// Bottom left
        private var _boxD:Sprite;// Bottom right
        private var _boxE:Sprite;// Bottom center
        private var _aspectRatio:Number;// Variable holding the aspect ratio of your video
       
        // ==================================================================
        // Constructor
        // ==================================================================
        public function DocumentClass():void {
            super();
           
            // Stage set up
            stage.align=StageAlign.TOP_LEFT;
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.quality=StageQuality.BEST;
            stage.displayState=StageDisplayState.NORMAL;
            stage.frameRate=30;
            trace(loaderInfo.loaderURL)

            // Video
            _video=new VideoPlayer();
            _video.smoothing=true;
            _video.loop=true;
            _video.addEventListener(MetadataEvent.METADATA_RECEIVED,aspectRatioHandler,false,0,true)
            _video.play("../flv/endlesseye.Endless_Eye_Productions.flv")
           
            // Carate a looping playlist
            // Remove the _video.play() above and outcomment lines below
            // _video.addEventListener(VideoEvent.STOPPED_STATE_ENTERED,playlistHandler,false,0,true)
            // _playlist=["../flv/GabelSt-option1.flv","../flv/Fisherman.flv","../flv/Corniche-Fireworks.flv"]
            // _playlistIndex=0;            
            // playlistHandler(null);
           
            // Set default aspect ratio 21/9
            _aspectRatio=2.3333;
           
            // Video grid overlay
            _gridOverlay=new Sprite();
            _gridOverlay.alpha=0.7
           
            // Boxes
            _boxA=new Sprite();
            _boxA.graphics.beginFill(Math.random()*0xffffff,0.75);
            _boxA.graphics.drawRect(0,0,270,245);
            _boxA.graphics.endFill();
            _boxB=new Sprite();
            _boxB.graphics.beginFill(Math.random()*0xffffff,0.75);
            _boxB.graphics.drawRect(0,0,385,325);
            _boxB.graphics.endFill();
            _boxC=new Sprite();
            _boxC.graphics.beginFill(Math.random()*0xffffff,0.75);
            _boxC.graphics.drawRect(0,0,470,50);
            _boxC.graphics.endFill();
            _boxD=new Sprite();
            _boxD.graphics.beginFill(Math.random()*0xffffff,0.75);
            _boxD.graphics.drawRect(0,0,125,50);
            _boxD.graphics.endFill();
            _boxE=new Sprite();
            _boxE.graphics.beginFill(Math.random()*0xffffff,0.75);
            _boxE.graphics.drawRect(0,0,445,35);
            _boxE.graphics.endFill();

            // Assemble
            addChild(_video);
            addChild(_gridOverlay)
            addChild(_boxA);
            addChild(_boxB);
            addChild(_boxC);
            addChild(_boxD);
            addChild(_boxE);

            // Add resize eventlistener and call draw to handle the initial size
            stage.addEventListener(Event.RESIZE,draw,false,0,true);
            draw(null);
        }


        // ==================================================================
        // Set movie aspect ratio and update layout by calling draw()
        // ==================================================================
        private function aspectRatioHandler(e:MetadataEvent):void{
            if(e.info.hasOwnProperty("width")&&e.info.hasOwnProperty("height")){
                _video.removeEventListener(MetadataEvent.METADATA_RECEIVED,aspectRatioHandler,false)
                _aspectRatio=e.info.width/e.info.height;
                draw(null);
            }
        }
       
        // ==================================================================
        // Playlist
        // ==================================================================
        private function playlistHandler(e:VideoEvent):void{
            var url=_playlist[_playlistIndex];
            _video.play(url);
            _playlistIndex++;
            _playlistIndex=(_playlistIndex==_playlist.length-1)?0:_playlistIndex;
        }
       

        // ==================================================================
         // Position and size display objects
        // ==================================================================
        private function draw(e:Event):void {
            var sw:Number=stage.stageWidth;
            var sh:Number=stage.stageHeight;

           // Scale video                        _video.width=Math.max(sw,MIN_WIDTH)            _video.scaleY=_video.scaleX/_aspectRatio            if(_video.height<sh){                _video.height=Math.max(sh,MIN_WIDTH/_aspectRatio);                _video.scaleX=_video.scaleX*_aspectRatio            }            // Round values to avoid odd pixel values            _video.width=Math.round(_video.width);            _video.height=Math.round(_video.height);            // Center position video            _video.x=Math.round(Math.max((sw-_video.width)/2,0));            _video.y=Math.round(Math.max((sh-_video.height)/2,0));

            // Position Boxes in relation to stage borders (or mimumum width/height)
            _boxA.x=30;
            _boxA.y=30;
            _boxB.x=Math.round(Math.max(sw,MIN_WIDTH)-(_boxB.width+30));
            _boxB.y=_boxA.y;
            _boxC.x=_boxA.x;
            _boxC.y=Math.round(Math.max(sh,MIN_HEIGHT)-_boxC.height);
            _boxD.x=Math.round(Math.max(sw,MIN_WIDTH)-(_boxD.width+30));
            _boxD.y=Math.round(Math.max(sh,MIN_HEIGHT)-_boxD.height);
            _boxE.x=Math.round(_boxD.x-(_boxE.width+20));
            _boxE.y=Math.round(Math.max(sh,MIN_HEIGHT)-_boxE.height);
           
            // Draw grid overlay
            var bmd:BitmapData=new BitmapData(2,2,true,0xff000000)
            bmd.setPixel32(1,1,0x00000000)
            _gridOverlay.graphics.clear()    
            _gridOverlay.graphics.beginBitmapFill(bmd,null,true,false)
            _gridOverlay.graphics.drawRect(0,0,sw,sh)
            _gridOverlay.graphics.endFill()
        }
    }
}
DocumentClass.as
VideoPlayer.as
VideoEvent.as
MetadataEvent.as
endlesseye.Endless-Eye-Productio.flv
0
 
IqAndreasCommented:
That effect is actually quite simple, and is done in two parts.

First, they set the stage so that instead of automatically zooming to whatever size the window is, the "stage.scaleMode" is set, so that the contents won't automatically zoom, but will always stay the same size.

Here is some further reading on "Stage.scaleMode", and a quick Google search should return many more tutorials.
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/display/Stage.html#scaleMode

Second, they listen for if the stage resizes, update the position and size of all items on stage based on the new size of the stage. I have attached some sample code that you can place directly onto the timeline. When you change the size of the window, the video (named "my_video" in the example) should automatically resize to fit the entire stage.

Just ask if you have any questions regarding the code, or if you would like more information.

Cheers,
Andreas
import flash.display.StageScaleMode;
import flash.display.StageAlign;

stage.scaleMode = StageScaleMode.NONE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, onResize);

//Run the onResize function immediately
onResize();


function onResize(ev:Event = null)
{
   my_video.height = stage.stageHeight;
   my_video.width = stage.stageWidth;
}

Open in new window

0
 
IqAndreasCommented:
<i>Hm... I wonder where the edit button is...</i>

Anyway, the code I posted is for ActionScript 3, however, I'm sure there is a similar system in place for ActionScript 2. If you would like, I can search for an AS2 solution as well.

However, if possible, I would really recommend that you give AS3 a try. It is faster, more efficient, and has a lot more capabilities than AS2. If you need a few tutorials to get started, I can dig up a few links for you.

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
brainhaxAuthor Commented:
thanks IqAndreas , i will try to convert ur mentioned as3 to as2 for my project .. and will get back with problems or success story :)
0
 
brainhaxAuthor Commented:
Jakob_E ! you r the best ,
your solution works like a charm , and i am happy liquid layouting instead of my demo
http://jeddahcrm.com/3points_web_demo/index_.html
and getting interested in to as3 .

here is a part of the actual design , i hope that our decision for a liquid lay-outing will be best in this website case

thanks a lot for writing so much lines for me , i became a big fan of urs ,

Cheers .
Raja

v3.05.06.jpg
0
 
brainhaxAuthor Commented:
simply awsome
0
 
Jakob_ECommented:
Hi Raja,

I hope there is always a better solution - thats why I develop.
But at my point now this is how I would do it :)

The design looks good and I would sure like to see it live can I
ask you to post a link when you are done ?

If any questions you are always welcome  

Best,
Jakob E
0
 
brainhaxAuthor Commented:
yap sure i will post the link once its completed and live :)

regards
raja
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.