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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.