Wednesday, October 28, 2009
Your SWF as a Screentime Screensaver - Fullscreen Playback Effects
When developing a Screentime Flash screensaver you may need to make adjustments to your content to eliminate or minimize unwanted display effects caused by fullscreen playback. Depending on the size and aspect ratio of your SWF, your content may appear scaled, distorted, letter boxed, and/or cropped. This sample attempts to explain fullscreen playback effects and how to address them.
By default Screentime plays your SWF fullscreen using the Stage scaleMode property set equal to 'showAll'. If your SWF’s size is not equal to the size of the screen, your content will scale to fit the screen. If the aspect ratio of your SWF is different than the screen’s aspect ratio, you will see your background color letter box or pillar box your content. This SWF demonstrates these issues.
There are a variety of ways to minimize or eliminate these fullscreen playback effects. The design decisions you make will depend on your content and preferences. Here are a few solutions to consider.
General Solution
As a general rule we recommend your Flash Stage be as large as possible with an aspect ratio of 1.5 (width = 1.5 * height). Depending on your content and preferences you may need a more specific solution.
How large is large? If scaling is not an issue for you, pick a comfortable size. If scaling is an issue, consider your target audience. The global screen resolution usage stats for Oct. 2009 (http://www.w3counter.com/globalstats.php) are shown below.
1 1024x768 30.44%
2 1280x800 20.07%
3 1280x1024 11.90%
4 1440x900 8.66%
5 1680x1050 5.79%
6 800x600 4.54%
7 1152x864 2.65%
8 1366x768 2.15%
9 1920x1200 2.04%
10 1280x768 1.55%
Why choose an aspect ratio of 1.5? From the numbers above we calculated user aspect ratio stats shown below. The average aspect ratio is 1.45 and we averaged up.
1 1.33 37.63%
2 1.6 36.56%
3 1.25 11.90%
4 1.67 1.55%
5 1.79 2.15%
More Specific Solutions:
1) Big Stage - noScale: don’t want to write code, don’t want content to scale.
If you do not want your content to scale and do not want to write code to adjust for scaling and distortion, make you Stage larger than your target screen and set your Stage.scaleMode to be “noScale”. Your SWF will appear centered on the screen and will play with it’s original size and shape.
If your SWF is larger than the screen, the edges will be cropped. If your SWF is smaller than the screen, you will want to match the background color to the edge color of your SWF content to minimize possible letter boxing.
This solution requires one line of ActionScript for the scaleMode property assignment (shown below). This code needs to on the timeline before your content is displayed.
ActionScript
Stage.scaleMode = “noScale”; // maintain original size
Fullscreen Effects
Scaling: No.
Distortion: No.
Letterboxing / Pillarboxing: Yes, when SWF height or width is smaller than corresponding monitor dimension.
Cropping: Yes, when SWF size > monitor size.
2) Stretch to Fit - exactFit
If your content is eye-candy vector graphics where scaling & a little distortion is no big deal, this is your solution. Pick a stage size and aspect ratio that is representative of your average user - we recommend and aspect ratio 1.5. Set Stage.scaleMode to be “exactFit”. Your SWF will stretch to fill the screen.
This solution requires no ActionScript other than the Stage.scaleMode assignment.
To compensate for distortion due the the difference in aspect ratio between the Stage and the screen resolution you can apply a scale factor to your movie clips, however, this can be tricky.
ActionScript
Stage.scaleMode = “exactFit”;
Fullscreen Effects
Scaling: Yes, when SWF size ≠ monitor size.
Distortion: Yes, when SWF aspect ratio ≠ monitor aspect ratio.
Letterboxing / Pillarboxing: No
Cropping: No
3) Letterbox - showAll: scaling is OK, you want easiest solution possible.
This is the easiest solution as it requires no coding. Your SWF will automatically scale to fit the screen. If the Stage and screen resolution do not match, there will be letter boxing or pillar boxing. You can minimize the boxing effect by using an Stage aspect ratio that fits your average user and by matching the background color to the edge color of your SWF content.
ActionScript
Stage.scaleMode = "showAll"; // default setting, so no actionscript is required.
Fullscreen Effects
Scaling: Yes, when SWF size ≠ monitor size.
Distortion: No
Letterboxing / Pillarboxing: Yes, when SWF aspect ratio ≠ monitor aspect ratio, background color visible.
Cropping: No
4) Cropping is Kosher - noBorder: Don’t like the letterbox and distortion.
If letter boxing and distortion are problems, this may be your choice. Your SWF will scale to fill the screen without distortion. You can minimize cropping by using an Stage aspect ratio of your average user.
ActionScript
Stage.scaleMode = “noBorder”; // fill screen without distortion, cropping likely
Fullscreen Effects
var noBorder_comment = "Scaling: Yes, when non-cropped dimension of SWF and monitor are equal.
Distortion: No.
Letterboxing / Pillarboxing: No.
Cropping: Yes, when SWF aspect ratio ≠ monitor aspect ratio.
Labels: fullscreen, Screensaver
Subscribe to Posts [Atom]