Tip: Calculating Correct FullScreen Values

So the project I'm currently working on includes all types of video players and one of the options (as is normal these days) is going to fullScreen mode. Normally you would use the Capabilities class to grab the screenResolutionX and screenResolutionY values in your code and react to it with whatever code you needed to (at least that was what I have historically done). I run a 24" Dell widescreen monitor connected to my 15" Macbook Pro. The Dell is my primary monitor and I use the MBP monitor as a secondary monitor for panels and such. When I go into fullScreen mode on my Dell (primary monitor), everything works fine. However, if I then go into fullScreen mode on my MBP by moving my browser over and testing that, the screen enlarges to the size it once was on my 24" Dell. As you can see, this poses a big problem because you can't see anything under a certain amount of pixels (in my case, half the video and my controls). But there is a very simple solution to this madness.

Here is the code I was originally using to go fullScreen (not exactly the same but shortened here for brevity):

Actionscript:
  1. this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleScreenResized, false, 0, true);
  2.        
  3. function handleScreenResized($evt:FullScreenEvent):void
  4. {
  5.     if ($evt.fullScreen)
  6.     {
  7.         this.width = Capabilities.screenResolutionX;
  8.         this.height = (Capabilities.screenResolutionY - this.controlsHeight);
  9.        
  10.         if (!this._model.showPlaylist) this.startPlaylistCheck();
  11.     }
  12.     else
  13.     {
  14.         this.width = this._model.playerWidth;
  15.         this.height = this._model.playerHeight;
  16.     }
  17. }

Again, this only works properly on your main monitor as Capabilities pulls the info for the width/height of your main display. To correct this, we use the following:

Actionscript:
  1. this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleScreenResized, false, 0, true);
  2.  
  3. function handleScreenResized($evt:FullScreenEvent):void
  4. {
  5.     if ($evt.fullScreen)
  6.     {
  7.         this.width = this.stage.fullScreenWidth;
  8.         this.height = (this.stage.fullScreenHeight - this.controlsHeight);
  9.        
  10.         if (!this._model.showPlaylist) this.startPlaylistCheck();
  11.     }
  12.     else
  13.     {
  14.         this.width = this._model.playerWidth;
  15.         this.height = this._model.playerHeight;
  16.     }
  17. }

By using the Stage class and its fullScreenWidth and fullScreenHeight properties, you can get the width/height of the screen that the stage/browser is currently on. This is a very handy little thing to remember so that even if you don't develop with dual screens you aren't penalizing people who do use dual screen setups in your code (and I know a few people who use their second screen as their browser screen).

Here is a little quick tidbit to also remember about this technique ripped straight from the documentation:

Note: If the user has the opportunity to move the browser from one monitor to another between retrieving the value and going to full screen size, the value could be incorrect. If you retrieve the value in an event handler that sets Stage.displayState to StageDisplayState.FULL_SCREEN, the value will be correct.

This is why I wrapped my code into the handler and after that is set is where you want to execute whatever you need to based on stage sizing.

Again, a simple little tip but it's one of those things that before today I never really put much thought into.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

3 Comments

good stuff

I've been searching for this very solution for a year now. Thanks.

posicionamiento web SEO | Posicionamiento web | Posicionamiento en buscadores: SEO y Posicionamiento Web buscadores. Consultoría de ... bit.ly/w1ZI2t 5:49 PM Dec 31st, 2011 ...scribe.twitter.com/Posicionate_Web/status/153291618659745793...

SEO | Posicionamiento web | Posicionamiento en buscadores: SEO y Posicionamiento Web buscadores. Consultoría de ... bit.ly/w1ZI2t 5:49 PM Dec 31st, 2011 ...scribe.twitter.com/Posicionate_Web/status/153291618659745793...

Leave a comment

(required)

(required)