Guide for Supporting Screen Orientation with Full-Screen Flash Player Content

Authored by David Kim

Prior to version 15, Flash Player (FP) did not provide notification of change in screen orientation.  Starting with FP version 15 (FP 15), notification of screen orientation will be provided through triggering of a resize event if the FP content is playing in full-screen.  Also, FP 15 will allow the Stage.fullScreenSourceRect property to be set even while in full-screen and have the setting take effect without a display state change.  FP contents that support full screen playback should be modified to react to the resize events that are triggered when the screen orientation changes.

Content playing in full screen mode

When Stage.fullScreenSourceRect is defined
If Stage.fullScreenSourceRect is defined, the width and height of Stage are fixed. Thus, when the screen orientation changes, the interchanged width and height ratio of the screen become mismatched with that of the Stage.

The four figures below show Flash content in full screen mode before and after screen orientation changes.

Figure 1: Full screen landscape view with Stage.fullScreenSourceRect set to landscape ratio

Figure 1: Full screen landscape view with Stage.fullScreenSourceRect set to landscape ratio

Figure 1 and Figure 3 show Flash content that is initially made full-screen in landscape view and portrait view respectively.

Figure 2: After screen orientation change from Figure 1

Figure 2: After screen orientation change from Figure 1

In Figure 2, the control bar and video occupy only the middle portion of the screen.   Figure 2 also shows landscape full-screen content after the screen orientation change to portrait mode and the Stage is scaled to fit into full screen portrait view.

Figure 3: Full screen portrait view with Stage.fullScreenSourceRect set to portrait ratio

Figure 3: Full screen portrait view with Stage.fullScreenSourceRect set to portrait ratio

A comparison of Figure 2 and Figure 3 shows a difference whereby Flash occupies a part of the screen in Figure 2 but occupies the whole screen in Figure 3.  In detail, in Figure 3 the control bar is placed at the bottom of the screen and video at the middle of the screen, thus occupying the whole screen.

Figure 4: After screen orientation change from Figure 3

Figure 4: After screen orientation change from Figure 3

Figure 4 demonstrates a more drastic mismatch between the content Stage and the device screen, which occurs when a portrait full-screen content is shown in a landscape view.

When Stage.fullScreenSourceRect is not defined

If Stage.fullScreenSourceRect is not defined and the content uses NO_SCALE scale mode, the width and height of the Stage change when screen orientation changes and the Stage.resize event is dispatched to the content.  However, if the content does not re-layout the content in response to the Stage.resize event, portions of the content could be clipped.

Figure 5: Full screen video in landscape mode, Stage.fullScreenSourceRect is not defined.

Figure 5: Full screen video in landscape mode, Stage.fullScreenSourceRect is not defined.

Figure 6: After screen orientation change from Figure 5

Figure 6: After screen orientation change from Figure 5

Figure 7 Overlapped view of Figure 5 and 6

Figure 7 Overlapped view of Figure 5 and 6

Figure 8 Overlapped view of full screen portrait video after screen orientation change to landscape mode

Figure 8 Overlapped view of full screen portrait video after screen orientation change to landscape mode

If content uses scale mode other than no scale mode (i.e., exact fit, no border or show all), the width and height of Stage does not change when the screen orientation changes. Thus, in this scenario, unintended content distortion does not occur necessarily but is still possible. Appropriate testing and modification may be needed for such content.

Content is playing in normal mode (embedded mode)

In normal mode, Flash content occupies the same width and height of Stage and screen even when screen orientation changes. Clipping or other distortions of FP content do not happen in normal mode. A notification of screen orientation change is not provided when the content is playing in normal mode.

The following examples demonstrate the modifications that are needed for full-screen FP contents to function correctly on devices that support multiple screen orientations.

If content defines Stage.fullScreenSourceRect

public class StageExample extends Sprite {
 
   public function StageExample() {
      stage.addEventListener(Event.RESIZE, resizeHandler);
   }
 
   public function goToFullscreen() {
      stage.fullScreenSourceRect =
      new Rectangle(0, 0, myWidth, myHeight);
      stage.displayState = StageDisplayState.FULL_SCREEN;
   }
 
   private function resizeHandler(event:Event):void {
      switch(stage.displayState) {
      case StageDisplayState.NORMAL:
         // Check stage.width and stage.height and layout objects
         break;
      case StageDisplayState.FULL_SCREEN:
         // Check stage.fullScreenWidth and stage.fullScreenHeight
         // Set stage.fullScreenSourceRect to new width and new height
         // It is recommended that the ratio of new width and new
         // height is much the same with that of stage.fullScreenWidth
         // and stage.fullScreenHeight for the best utilizing of 
         // full screen
         stage.fullScreenSourceRect =
         new Rectangle(0, 0, newWidth, newHeight);
         // place objects within new width and new height 
         break;
      }
   }
}

If content does not define Stage.fullScreenSourceRect

public class StageExample2 extends Sprite {

   public function StageExample2() {
      stage.addEventListener(Event.RESIZE, resizeHandler);
   }

   public function goToFullscreen() {
      stage.displayState = StageDisplayState.FULL_SCREEN;
   }

   private function resizeHandler(event:Event):void {
      switch(stage.displayState) {
      case StageDisplayState.NORMAL:
         // Check stage.width and stage.height
         // layout objects within stage.width and stage.height
         break;
      case StageDisplayState.FULL_SCREEN:
         // Check stage.fullScreenWidth and stage.fullScreenHeight
         // layout objects within stage.width and stage.height
         // re-layout is more important if scale mode is no scale
         break;
      }
   }
}

One Response to Guide for Supporting Screen Orientation with Full-Screen Flash Player Content

  1. shaji t j says:

    good