We all scream for full-screen!

I recently developed a video player component for one of our clients. The idea was to implement a wrapper for Flex’s built-in VideoDisplay component that would include play/pause/stop buttons, a slider that would both allow scrubbing and show download progress, and a button to toggle full-screen mode. The basics came together fairly quickly, but I hit some snags when adding full-screen functionality. I had already used full-screen mode in another project (I found this post very useful in that case), but the video player’s full-screen needs posed a greater challenge. Here are some lessons learned, so you can scream for full-screen and not frustration:

• If you want just one component (the video player, in my case) to go full-screen, rather than full-screen for the whole app, you can use:
  

  Application.application.stage.fullScreenSourceRect = new Rectangle( stageX, stageY, width, height );

  Only the area defined by that rectangle will be visible in fullscreen mode.

• Stage.fullScreenSourceRect interprets its rectangle in terms of the stage’s coordinate space. The component you want to display in full-screen mode has its location defined in terms of its parent container’s coordinate space. In most cases, you’ll have to convert from one coordinate space to the other, so use something like:
  

  var myStageLocation:Point = fullScreenMe.localToGlobal( new Point( fullScreenMe.x, fullScreenMe.y ) );

  where fullScreenMe is the component you want to show in full-screen mode.

• Full-screen mode wasn’t playing nice with my app’s constraint-based layout. When I switched to full-screen, it looked like the constraints were being re-evaluated to fit the new dimensions of the display area. After losing a lot of time trying different fixes, this is what solved the problem:
  

  Application.application.stage.scaleMode = StageScaleMode.NO_BORDER;

  With that in place, all of the layout elements stayed where they belonged when switching from normal mode to full-screen. Incidentally, I believe this step is not necessary if you’re using a fixed layout.

• If you use StageScaleMode.NO_BORDER when switching to full-screen mode, you should undo that when switching back:
  

  Application.application.stage.scaleMode = StageScaleMode.NO_SCALE;

  It’s not enough to set this in the listener for your view-mode-toggle button, because the user might return to normal mode without hitting that button. You need to set scaleMode = StageScaleMode.NO_SCALE whether the user hits the toggle button, ESC, ctrl-alt-delete, or whatever other action returns the display to normal mode. Set a listener

  Application.application.stage.addEventListener( FullScreenEvent.FULL_SCREEN, handleFullScreenChange );

  And then in handleFullScreenChange() you can deal with Stage.scaleMode

• If in full-screen mode, the aspect ratio of the rectangle you sent to Stage.fullScreenSourceRect doesn’t match the aspect ratio of your display, Flex uses colored “bars” as filler to make up the difference. If you don’t like the color of the bars, change the backgroundColor of your app.

Click the screenshot to open a demo app, including view source: