Flash Sizing Zen: Making Adobe Flash Fit On Mobile Devices
TECHNICAL PAPERFlash sizing Zen: Making Adobe Flash fit onmobile devicesBy Allen EllisonSolutions Architect, AdobeNovember 2010
2010 Adobe Systems Incorporated. All rights reserved.If this white paper is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may beused or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system,or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please notethat the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe SystemsIncorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in thisguide.This article is intended for US audiences only.Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.Adobe and the Adobe logo, ActionScript, Flash, and Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/orother countries.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. Notice to U.S. Government End Users. The Software and Documentation are “CommercialItems,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms areused in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, theCommercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b)with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the UnitedStates. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equalopportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974(38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmativeaction clause and regulations contained in the preceding sentence shall be incorporated by reference.
SUMMARYYou might be surprised when you attempt to access your own website on a smartphone and discover that your content is not laid out as you had envisioned; and asyou try to alter your content so that it’s displayed equally well on the desktop as it ison a smart phone or tablet, you will discover that there are some challenges toovercome.This white paper reviews the necessary steps to identify the device and its capabilitiesthat the user has on hand, circumvent the phone’s browser “features” that areintended to make legacy desktop content accessible via the phone, and review otherchallenges to create a seamless, predictable experience between the user and yourcontent.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 1
TABLE OF CONTENTSSummary . 1Table of Contents . 2Introduction . 3Display Modes . 3Full-screen mode . 3Leaving full-screen mode . 5Embedded mode . 6HTML TIPS for Mobile-Optimized Flash Content . 7Flag your content as mobile-tailored . 7Lock the width on Android. 8Don’t cache . 8Use SWFObject 2 . 8Get rid of the address bar . 9Go full-screen on selection . 9Scaling and Aligning Content . 13Choose a scaling mode appropriate for your content . 13Align your content relative to the browser/screen . 14Device Orientation . 15Locking your content into landscape mode . 15Locking your content into portrait mode . 16Listen for changes in full-screen mode . 17Listen for resize events . 18Sizing Your Content Appropriately . 19Additional Notes . 20What’s Next? . 21Appendix A: Avoid Transcoding. 22Appendix B: Mobile View vs. Desktop View . 23Device detection in HTML . 23Device detection in Flash . 24About the author . 24Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 2
INTRODUCTIONWhen you bring Flash games and content to the multi-screen web using Adobe Flash Player 10.1, it can be a challenge to display your content consistently across devices as youintended—in terms of size, orientation, alignment, interactivity and full-screen behavior. Thisbecomes even more complex when you take web tablets into consideration.Obstacles to creating a consistent and usable experience include mobile content transcoders,mobile devices that behave in certain ways to make a web experience really intended fordesktop systems accessible to mobile users, inconsistent use of HTML tags and meta-tagsacross device families, and user-configurable browser or device settings.This document walks you through the steps necessary to eliminate the various potentialpoints of variation so that you can create an experience that scales gracefully betweendesktop and mobile browsers. The sample ActionScript 3 project call TestStage, createdwith Adobe Flash Builder 4, exemplifies many of the key concepts conveyed in thisdocument.DISPLAY MODESThere are two primary display modes that Flash Player 10.1 supports on mobile devices:embedded (default) and full-screen. They both have their pros and cons and it’s quitepossible that you might want to use both within the same in-browser experience.Full-screen modeWhen navigating to a new URL that contains Flash content, mobile devices never enter fullscreen mode automatically. Any of the following user interactions will invoke full-screenmode: If the content would ordinarily invoke full-screen mode on the desktop (e.g., theHTML object/embed tag contains the parameter allowFullScreen "true" and abutton or key-initiated event sets the stage.displayMode to true), then full-screenmode will also be initiated on mobile devices. All of the full-screen securityrestrictions/features apply. If the object tag contains the parameter fullScreenOnSelection that is set to true,then the content will go full-screen when users select the content (and do this byFlash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 3
tapping on the content area). Note that fullScreenOnSelection functionality isindependent of the allowFullScreen parameter. The user will receive a hint thattapping the content will make it go full-screen, and once selected, all of the standardfull-screen security features apply. If users do a long-tap over the content area (when not already in full-screen mode),they will be presented with an option to make the content go full-screen, regardlessof the state of allowFullScreen. Long-tap has no effect when in full-screen mode. Thisis no way to disable this functionality, however. We recommend that you avoid tryingto put any long-tap functionality in your content unless you’ve taken the necessarysteps to know whether or not the application is in full-screen mode. Once users selectthe full-screen option, the content goes full-screen and all of the standard full-screensecurity features apply (such as no keyboard input).Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 4
Leaving full-screen modeThe browser will leave full-screen mode when any of the following happen: The user hits the back button (on Android devices) or initiates an equivalentgesture on non-Android devices or devices without a back button. The content that is currently full-screen sets the display mode to normal, whetheror not this was user-initiated. The content’s ActionScript (and presumably the wrapper’s JavaScript) attempts tonavigate to a new URL. Incidentally, we recommend against attempting to launchthe URL in a new window because this can result in some undesirable behaviorOnce the user has left full-screen mode (thereby returning to embedded mode), reselectingthe content (even if fullScreenOnSelection "true") will not have any effect, unless yourefresh the page or navigate away and back. Because of this, we recommend that you makegaming content pause the game when it detects that the player has exited full-screen mode.Full-screen mode offers the following benefits: Maximum utilization of the device’s screen real estate is guaranteed Since user interaction is required to invoke full-screen mode, you can be sure that thecontent is always selected Your content will receive DPAD and trackball events, if applicable You can lock the screen into landscape mode (although not in portrait) You can ensure that your content is sized appropriately, regardless of orientation You don’t have to be concerned with gesture ambiguity – which can result in yourcontent missing some touch-related events (and, in many touch-related events, beingslow to respond)Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 5
Full-screen mode has the following drawbacks: You cannot access the device’s physical or virtual keyboard while in full-screen mode(but note that you can access the virtual keyboard only when a TextField has focusanyway) HTML content will not appear in full-screen mode (although JavaScript will continueto work), which may affect some ad management frameworksEmbedded modeBy default, when the user navigates to a new URL that contains one more pieces of Flashcontent, that content is, by default, in embedded mode. There is a variation on embeddedmode that is sometimes referred to as “selected” or “focused” mode. All this means is thatthe user has selected the content by tapping on its content area. When this happens, thecontent area briefly flashes to indicate that it has received focus.Selected/focused content has the following advantages over regular embedded content: Higher precedence than other Flash content – if the device runs short on memory forexample, other Flash content will be jettisoned first It receives keyboard and DPAD/trackball events It can receive a greater variety of gesture interactionsUsing JavaScript, you can ensure that your content is automatically selected, although this willnot automatically result in the content going full-screen, even iffullScreenOnSelection "true".You would place the following JavaScript in the body’s onLoad method, where“YourFlashMovie” is the name assigned to the HTML tag that corresponds with the ie").focus();Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 6
HTML TIPS FOR MOBILE-OPTIMIZED FLASH CONTENTFlag your content as mobile-tailoredThe following steps will ensure that phones interpret your content as being developed withmobile in mind:1. Use the XHTML Basic 1.1 Document Type.2. Use the standard XHTML Document Namespace and languageattribute(s).3. Specify the UTF-8 character encoding.4. Use the text/html MIME type – unless you are implementing this asserver-side script and can determine the accept request-headercontains application/xhtml xml.We recommend the following code template: ?xml version "1.0" encoding "UTF-8"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic sic11.dtd" html xmlns "http://www.w3.org/19999/xhtml" lang "en"xml:lang "en" head meta http-equiv "Content-Type" content "text/html;charset utf-8" / . /head /html for the following reasons: It avoids Verizon Transcoding (see Appendix for more details) It avoids mislabeling the content as WAP It uses one of the W3C standard XHTML subsetsFlash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 7
Lock the width on AndroidYou can specify the width to match the device’s screen: meta name "viewport" content "target-densitydpi device-dpi,width device-width, user-scalable no"/ You can also specify the width in pixels, such as: meta name "viewport" content "target-densitydpi device-dpi,width 480, user-scalable no"/ It’s worth noting that there are other viewport attributes which Android appears to ignore (orthat there are special requirements like they all must be present): initial-scale, minimumscale, and maximum-scale.Don’t cacheDon’t cache (while in development). Unless you like manually clearing your cache every timeyou look at your content, add the following meta tag to your head section: meta http-equiv "CACHE-CONTROL" content "NO-CACHE" We recommend removing that tag once you’re in production.Use SWFObject 2SWFObject 2 can simplify the process of embedding Flash (SWF) content, allow you to reachmore customers gracefully, and easily detect whether or not the user has the right FlashPlayer version installed. You can download the source and documentation from the officialSWFObject page: SWF("/swf-path/yourContent.swf", "theGame","480", "678", "10.1.61", "/swf/expressInstall.swf",flashvars, params, attributes);For more information about SWFObject 2, read Detecting Flash Player versions andembedding SWF files with SWFObject 2 on the Adobe Developer Connection.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 8
Set the width and heightOn the Nexus One, 480 x 678 pixels is the size of the screen after subtracting the browserchrome. This isn’t critical if you’re using the resizing code because it’ll get reset soon enoughby the resize method in JavaScript.Alternatively, for certain types of content you can set the width and height both to 100%—inthat case, the resize method may prove to be un-necessary. You can also explicitly specify thewindow.innerWidth and window.innerHeight properties in HTML/JavaScript.Get rid of the address barIt’s simple:window.scrollTo(0,1);We do not recommend this approach, however, if your SWF content occupies the entirewindow and listens for Mouse move events. This might result in the user being unable toscroll the address bar back into view, which would be frustrating. While the user can hit theback button to get to the previous page that did not block using the address bar, and it canresult in a bad impression.On a related note, be extraordinarily careful about manipulating the browser’s navigationhistory, as this could provide additional obstacles to the browser’s back button working in aconsistent way.Go full-screen on selectionAllow your content to go full-screen the first time the user taps on it by setting the followparameters when embedding the SWF:fullScreenOnSelection "true"Note that while allowFullScreen works on desktop and mobile devices, fullScreenOnSelectionis specific to mobile instances of Flash Player. Also, it works whether or not allowFullScreen istrue.Note: Full-screen mode is subject to the same security restrictions as on the desktop. Namely,you don’t have access to the keyboard, but can still detect DPAD/trackball events which act(like the up, down, right, and left arrow keys).Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 9
The fullScreenOnSelection parameter applies only the first time the user selectsyour content while in embedded mode. If for some reason the user backs out offull-screen mode and then selects your content, the content will not go fullscreen. We recommend that you detect the case where the user backs out of full-screenmode (by watching the Stage resize events). Pause the game if they exit fullscreen mode; when they hit the resume button, just re-invoke full-screen modeexplicitly using ActionScript (associated with the click event).Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 10
Ensure that the user is presented with the option to install Flash Player. If youforego SWFObject, be sure that the user has a way of being redirected toAdobe.com to get Flash Player: noscript object classid "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width "480" height "678" id "testStage" param name "movie" value "testStage.swf" / param name "quality" value "high" / param name "bgcolor" value "#ffffff" / param name "allowScriptAccess" value "sameDomain" / param name "allowFullScreen" value "true" / !--[if !IE] -- object type "application/x-shockwave-flash" data "testStage.swf"width "480" height "678" param name "quality" value "high" / param name "bgcolor" value "#ffffff" / param name "allowScriptAccess" value "sameDomain" / param name "allowFullScreen" value "true" / p Either scripts and active content are not permitted to run orAdobe Flash Player version 10.1.0 or greater is notinstalled. /p a href "http://www.adobe.com/go/getflashplayer" imgsrc "http://www.adobe.com/images/shared/download buttons/get flash player.gif" alt "Get Adobe Flash Player" / /a /object /object /noscript Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 11
Resizing exampleThis example handles sizing issues in both portrait and landscape mode (thanks to DanSkilken from SonicSwap): script type "text/javascript" var iw window.innerWidth;var ih window.innerHeight;function resizeHandler(){ var scrolling false;iw window.innerWidth;if(iw 480) {window.scrollTo(0, 1);setTimeout("resizeSWF();",800);} else {resizeSWF();}}function th ").height window.innerHeight;}window.onresize resizeHandler;window.onload resizeHandler; /script This code example does not scroll out the address bar in portrait mode, but does so inlandscape mode.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 12
SCALING AND ALIGNING CONTENTChoose a scaling mode appropriate for your contentIn the object/embed tag, you can set the scale parameter to one of the following: showall ensures that all content that fits the stage is visible (default behavior) exactfit stretches/distorts content (almost never desirable) noborder always fills the available area, but frequently you lose some of your contentaround the border noscale requires that some type of liquid layout solution is implemented so that youcan keep text readable, icons recognizable, and make the best use of the availablescreen real estate (although it is not trivial to implement, this is the best possiblerecommendation for multi-screen content).Alternatively, you can accomplish the same thing dynamically in ActionScript by setting thestage.scaleMode property to StageScaleMode.SHOW ALL, StageScaleMode.EXACT FIT,StageScaleMode.NO BORDER or StageScaleMode.NO SCALE respectively.Of course, if you’re using SWFObject, you can pass the scale in with the other parameters.For example:var params {id: "flashcontent", name: "flashcontent",menu: "false", allowFullScreen: "true",fullScreenOnSelection: "true", scale:"showall", salign:"middle"};Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 13
Align your content relative to the browser/screenThere are two object/embed parameters that apply here: align (specifies where the areadetermined by the width and height is aligned in relationship to the browser boundaries)which can take the values l, r, and t or middle, which specify that the SWF content is alignedagainst the left, right, or top borders, respectively (or default, is centered). If the width andheight are both 100%, then the align value should have no effect. In addition, it should haveno effect when in full-screen mode.There is also the scale alignment (salign) parameter (specifies where the stage content isrelative to the width and height specified in the object/embed tag) which can take the valuesl, t, r, tl, and tr as well as b, bl, br (the default value is not yet determined). This parameterstill applies in full-screen mode or if either/both the width and height are 100%. Thisparameter does not apply, however, if the scale mode is set to exactfit.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 14
DEVICE ORIENTATIONLocking your content into landscape modeSome gaming content is orientation-neutral (the UI is roughly square), while a majority ofgaming content seems to be desktop-biased (landscape) although there are certainly anumber of games that play better in portrait mode.The orientation API is not available now but is on the roadmap for a future release. In theinterim, a compromise solution can solve the need for gaming content that benefits frombeing locked into the landscape orientation.To force landscape mode, you simply need to include a video object if you are using FlashCS4 or Flash CS5. Using ActionScript, you can also instantiate a video object and attach it tothe stage. You don’t need to do anything further with the video object. When (and onlywhen) your content goes full-screen it will automatically lock into the landscape orientation,as a general rule. However, if you specify using FullScreenSourceRect dimensions that areindicative of portrait mode (height width), then the content orientation will not be lockedin:video:Video new Video();private function MyClassicChessGame() {super();addChild(video);}Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 15
Locking your content into portrait modeAlthough you can lock your content into landscape mode, there is no similar feature forportrait mode. However, you can achieve a similar result by locking the stage into landscapeorientation and then repositioning and rotating your content to reorient it, as shown:Assuming that all of your visible game content is in a Sprite called game, you could do thefollowing:game.rotation -90;game.y stage.fullScreenHeight;Remember that the DPAD and trackball are going to report their data assuming thelandscape orientation, so you will need to explicitly translate the events—up arrow becomes aright-arrow event, etc.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 16
Listen for changes in full-screen modeTo detect when your content enters or leaves full-screen mode, you can listen for aFullScreen event:import flash.events.FullScreenEvent;function fullScreenChange(event:FullScreenEvent):void {if(event.fullScreen) {// entered full screen} else {// leaving full screen}}function init():void {stage.addEventListener(FullScreenEvent.FULL SCREEN, fullScreenChange);.}See the section, “Working with full-screen mode,” in the Programming ActionScript 3 for Flashonline documentation for more information.We recommend that games, upon detecting that the user has left full-screen mode, pausethe game, and that the resume button then re-invokes full-screen mode—particularly if youare attempting to lock in the orientation, because the orientation cannot be locked when it’sdisplayed as embedded content.Keep in mind that the fullScreenOnSelection and the FullScreen overlay may introduceadditional complexity in your full-screen management mode. (In other words, the contentmight go full-screen as a result of something other than the user hitting the play button.)One common mistake that mobile game developers make is to assume that the user willenter or leave full-screen mode only during game play. They might leave or enter full-screenmode while the splash screen is up, while reading the instructions, during the game’s “lobby”or “start game” state, during game play, or during recap/high-scores review—and, of course,when the game has been paused for other reasons.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 17
Listen for resize eventsBecause mobile users cannot resize their browser, if you get a resize event it means that oneof two things have happened (aside from getting a resize event on initialization): either theuser has entered/exited full-screen mode, the phone’s orientation has changed, or both.To get started, register to listen for a Stage resize event:import flash.events.Event;public class YourFlashMovie extends Sprite {protected var w:uint;protected var h:uint;function onResize(event:Event):void {if(w! stage.stageWidth h! stage.stageHeight) {w stage.stageWidth;h stage.stageHeight;if(w h) orientation ORIENTATION LANDSCAPE;else orientation ORIENTATION PORTRAIT;}}function init():void {stage.addEventListener(Event.RESIZE, onResize);.}}Sometimes the resize event is triggered as a result of a FullScreen event. You can usuallymake this determination by comparing the stage’s stageWidth and stageHeight to thestage’s fullScreenWidth and fullScreenHeight values. If they match, you’re in full-screenmode. If not, you’re in embedded mode.Note: You will receive resize events only if stage.scaleMode is set toStageScaleMode.NO SCALE.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 18
SIZING YOUR CONTENT APPROPRIATELYThe diagram below represents some common mobile screen specifications that you shouldexpect. This should, in general, give you an idea of what to aim for in terms of hit areas andfont sizes to ensure that your content is readable.Flash Sizing Zen: Making Adobe Flash fit on mobile devicesPage 19
On a Nexus One device, the available height for browser content after subtracting thenotification bar and browser chrome is 678 pixels (out of 800). If you don’t want to changethe aspect ratio of your content once it goes full-screen on a Nexus One, create your contenttargeting 480 x 480, then choose 406 x 678 for the object/embed area (assuming you don’tgo with 100%/100%) and then specify “showall” for your scale mode. You may lose somequality in text and images when in the browser, but in full-scre
Flash Sizing Zen: Making Adobe Flash fit on mobile devices Page 4 tapping on the content area). Note that fullScreenOnSelection functionality is independent of the allowFullScreen parameter. The user will recei
exploration we will read Zen texts, ruminate upon Zen myths, contemplate Zen art, listen to Zen music, examine Zen meditation, and analyze Zen objects. As we can see, “Zen” has come to represent a lot of things. “Zen” is the Japanese pronunciation of Chinese character meaning “meditation” 禪, pronounced chán.
ZEN Fuze ZEN Shape PHASE 3 SUPPLEMENTS ZEN Fuze ZEN Shape (if goal is to burn fat) ZEN Fit PHASE 1 SUPPLEMENTS ZEN Fuze ZEN Prime CUT CLEAN FLUSH BURN SCULPT RESTORE REPROGRAM DIVERSIFY ENERGISE phase 1 phase 2 phase DETOX 3 LOSE THE BLOAT IGNITE MELT YOUR BELLY THRIVE LIVE YOUR LIFE WEEK 1 7 days WEEKS 2–4 21 days
Adobe, the Adobe logo, Acrobat, Adobe Audition, Adobe Bridge, Adobe Device Central, Adobe OnLocation, Adobe Premiere, Adobe Premiere Pro, Adobe Technical Communication Suite, After Effects, Contribute, Captivate, Creative . Downloading updates from in-house update server on client machines running AAMEE 2.0 or later
Adobe Version Cue CS4 Adobe CreAtive Suite 4 deSign StAndArd Combines: Adobe InDesign CS4 Adobe Photoshop CS4 Adobe Illustrator CS4 Adobe Acrobat 9 Pro Plus Adobe Bridge CS4 Adobe Device Central CS4 Adobe Version Cue CS4 deSign
Two ways to start Flash -Click Start All Programs Adobe Flash CS3 Professional -Double-click Flash program icon (if on desktop) Actions you can perform from the Start page -Open recently used files or create a new document -Take a quick tour of Flash Flash program window has various components New Perspectives on Adobe Flash CS3 10
ZEN Fuze protein shake Use only water; add ice for desired consistency. Optional ZEN Shape Take ZEN Shape and Zen Fit 30 minutes prior to drinking shake. Lunch 85 grams Fresh Tuna 28 grams Low-Fat Mayonnaise 1 Slice of Whole Wheat Bread Dill Relish, Salt and Pepper MidAfternoon ZEN Fit Drink ZEN Fit 30 minutes before meals.
2 bottles of ZEN Prime 1 box of ZEN Fit Watermelon 1 box of ZEN Fit Fruit Punch 1 bag of ZEN Fuze Vanilla Bliss 100CV 1 bag of ZEN Fuze Chocolate Dream 1 ZENBODI Shaker Bottle 1 ZEN Brochure Jeunesse Product Catalog BASIC SHARE JNS AND FLY 314,80 inkl. MwSt. inkl. MwSt.
Black holes are physical objects in space, just like everything else we see in the night sky. But they pack so much mass into so small a space that not even light can escape their gravity. Radiation Cone Black Hole Accretion Disk. Known black holes fall into two classes: Stellar mass: 5 to tens of times the Sun’s mass Supermassive: 100,000 to billions of times the Sun’s mass .
