Creating Flash Content for Mobile Devices

Flash Player on most smartphones shipping in 2012, >250M cumulative 350 Total Smartphones 300 Smartphones with Flash Player Millions of Smartphones 250 200 53% 150 100 35% 50 9% 0 2009 2010 2011 2012 Source: Strategy Analytics smartphone forecast (January 2010) and Adobe adoption estimates ©2010 Adobe Systems Incorporated. All Rights Reserved.

Design considerations for Touch UI Design for immediate access Keep gestures smart and simple Leverage clear mental models Design for real hand sizes Touch feedback is key www.idlemode.com ©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Platform Overview MULTISCREEN CONTENT AND APPLICATIONS TOOLS Applications, Content and Video Adobe® Flash® Adobe® Flash® Professional CS5 Catalyst™ CLIENT RUNTIMES Adobe® Flash® Builder™ Adobe® Flash® Player Adobe® AIR® SERVERS & SERVICES Adobe® Creative Suite 5 Adobe® Flash® Media Adobe® LiveCycle® Adobe® BlazeDS Server Family Data Services ©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Player 10.1   Just released!   The only consistent runtime for connected devices   Targeting desktops, mobile phones, netbooks, tablets, and the Digital Home   Runtimes will be available over-the-air through marketplaces and Adobe.com ©2010 Adobe Systems Incorporated. All Rights Reserved.

Designed for New Platforms Brings full Flash Player feature set to devices Mobile-ready features that take advantage of native device capabilities:   Mobile text input   Multi-touch and gestures   Accelerometer input   Geolocation   Optimized SWF management for mobile   Sleep mode   Graphics hardware acceleration   H.264 video hardware decoding ©2010 Adobe Systems Incorporated. All Rights Reserved.

Accelerometer import ﬂash.sensors.Accelerometer; import ﬂash.events.AccelerometerEvent; Accelerometer.isSupported; var accel:Accelerometer = new Accelerometer(); accel.addEventListener(AccelerometerEvent.UPDATE, update); function update(e:AccelerometerEvent):void { e.accelerationX; e.accelerationY; e.accelerationZ; } ©2010 Adobe Systems Incorporated. All Rights Reserved.

Gestures cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom); function onZoom(e:TransformGestureEvent):void { cell.scaleX *= e.scaleX; cell.scaleY = cell.scaleX; } cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate); function onRotate(e:TransformGestureEvent):void { cell.rotation += e.rotation; } ©2010 Adobe Systems Incorporated. All Rights Reserved.

Geolocation var geo: Geolocation; if (Geolocation.isSupported) { geo = new Geolocation(); geo.addEventListener(GeolocationEvent.UPDATE, updateHandler); geo.setRequestedUpdateInterval(10000); } else { log.text = "Geolocation feature not supported"; } ©2010 Adobe Systems Incorporated. All Rights Reserved.

Hardware Keys stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true); function onKeyDown(event:KeyboardEvent):void { //Back Key if (event.keyCode == 94) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff } //Menu Key if (event.keyCode == 95) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff } } ©2010 Adobe Systems Incorporated. All Rights Reserved.

Greater Performance Improvements in:   Rendering/scripting performance   Start-up time   Battery and CPU optimizations   Hardware acceleration of graphics and video   Memory utilization and management Memory usage reduction (often by 50% of more) ©2010 Adobe Systems Incorporated. All Rights Reserved.

Media Support   HTTP streaming   Content protection   Peer-assisted networking   Buffered stream catch-up   Stream reconnect*   Smart Seek*   Fast Switch*   Microphone Access+   Dynamic frame rate+ * FMS server + Desktop only ©2010 Adobe Systems Incorporated. All Rights Reserved.

Adobe AIR for smartphones (and tablets)   Everything Flash Player 10.1 has and then some   Adobe AIR allows developers to build standalone applications using Flash   Public support from RIM and Motorola   First mobile operating system to be supported is Android   Provides Flash developers access to app stores © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ©2010 Adobe Systems Incorporated. All Rights Reserved.

What’s New In Flash Pro CS5 Expressiveness Enhanced Scripting Improved Productivity  New Text Engine*   Flash Builder Integration   XML based FLAs  Spring for Bones*   Code Snippets Panel   Share assets via FXG  New Deco tools*   Custom Class Introspection   Video improvements *Not ideal for mobile ©2010 Adobe Systems Incorporated. All Rights Reserved.

Creating an Android App: Setup  Get the Android SDK: http://developer.android.com/sdk Allows you to create and install apps on your device   Android - SDK Manager to install packages etc.   ADB – Android Device Debugger installs apps on your device   DDMS - Dalvik Debug Monitor for desktop simulation.  Join the AIR Prerelease http://labs.adobe.com/technologies/air/   Get AIR for Android runtime .apk installed   Get the AIR for Android Extension for Flash CS5 to make apps ©2010 Adobe Systems Incorporated. All Rights Reserved.

Graphics   Consider bitmaps over vectors   Keep bitmaps as small as possible   Minimize number of vectors   Test your animations with different qualities of Stage Avoid, if possible:   Filters   Blend modes   Transparency   Perspective distortion ©2010 Adobe Systems Incorporated. All Rights Reserved.

Text  Use opaque background over transparency  Avoid TLF  Test different anti-aliasing technics (animation, bitmap text...)   Avoid frequently-updated text Lorem Ipsum dolor… ©2010 Adobe Systems Incorporated. All Rights Reserved.

Redraw Regions   If an object's properties are animated, its bounding box is a redraw region Text   Objects that overlap the redraw region are redrawn See which areas of your movie are refreshed every frame.   Test Movie. View > Show Redraw Regions   Right-click > Show Redraw Regions (debug player only) ©2010 Adobe Systems Incorporated. All Rights Reserved.

It’s all about Timing   Set frame rate as low as possible   Dynamically adjust frame rate   Use enterFrame event when necessary   Consolidate into a single handler instead of multiple ones Avoid, if possible:   High-frequency timers   UpdateAfterEvent ©2010 Adobe Systems Incorporated. All Rights Reserved.

Horizontal? Vertical? Both?  Content should dictate orientation, but don’t forget about the keyboard.  Consider adjusting content based on layout: stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; function setPosition():void { vidHolder.x = stageWidth/2 - vidHolder.width/2; vidHolder.y = stageHeight/2 - vidHolder.height/2; 800px //If the layout is vertical if (stage.stageWidth < stage.stageHeight) { //Adjust graphics } } setPosition(); 480px 480px stage.addEventListener(Event.RESIZE, resizeLayout); function resizeLayout(e:Event):void { 800px setPosition(); } ©2010 Adobe Systems Incorporated. All Rights Reserved.

Display Objects   Use the appropriate type of display object  getSize(); will return object size Objects that aren’t interactive, use Shape(); trace(getSize(new Shape())); // output: 216 Interactive but no timeline? Use Sprite(); trace(getSize(new Sprite())); // output: 396 Need animation? Use Movieclip(); trace(getSize(new MovieClip())); // output: 416 ©2010 Adobe Systems Incorporated. All Rights Reserved.

Freeing MovieClips Alpha? RemoveChild? Visible? Text Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event. runningBoy.addEventListener(Event.REMOVED_FROM_STAGE,deactivate); function deactivate(e:Event):void { e.currentTarget.removeEventListener(Event.ENTER_FRAME,handleMovement); e.currentTarget.stop(); } ©2010 Adobe Systems Incorporated. All Rights Reserved.

Bitmap Caching cacheAsBitmap - the object is rendered into an offscreen bitmap Automatically used when:   Object overlaps a redraw region and the object is unchanged (except position) Bitmap caching issues:   Uses a lot of memory (width * height * 4 bytes)   Objects with cached bitmaps are more expensive to change Don’t use cacheAsBitmap when:   Animating object’s size   Animating position of object’s child ©2010 Adobe Systems Incorporated. All Rights Reserved.

Video encoding format Preferred Alternate Video codec H.264 Constrained Baseline On2 VP6 Simple Profile or Profile, up to 30 fps Sorensen Spark, up to 30 fps Audio codec AAC-LC, 44.1 kHz, stereo MP3, 44.1 kHz, stereo Wi-Fi 3G EDGE/1x-RTT Combined bit rate 500 kbps 350 kbps 100 kbps (audio and video) (350 kbps for On2 VP6 and Sorensen Spark) Max resolution 480 x 320 320 x 240 Max audio bit rate 160 kbps 64 kbps 32 kbps (128 kbps for On2 VP6 and Sorensen Spark) ©2010 Adobe Systems Incorporated. All Rights Reserved.

Video Player Don’ts ■  Minimize redraw region during video playback ■  Reduce frequency of non-video updates (i.e. move playhead once per second) ■  Avoid graphics that overlap the video (video controls, transparent overlay) ■  Set x and y to be on pixel boundary No transformations ■  No rotation, skew, perspective projection ■  No cacheAsBitmap, filters, scrollRect, z ■  No color transforms, alpha No other activity ■  No ActionScript timers or enterFrame handlers ■  No callbacks registered with NetStream ■  Stop all timelines ©2010 Adobe Systems Incorporated. All Rights Reserved.

Flex on Mobile? Challenges: Performance of the SDK, Different screen sizes and densities. Solution: Slider - the Flex Mobile Framework   Optimizes both the performance and user experience   New mobile development capabilities:   Managing application “screens”   Resolution-independent layout   New user interface components designed for mobile form factors ©2010 Adobe Systems Incorporated. All Rights Reserved.

Resources ■  Adobe TV ■  Optimization guides: ■  Flash Player optimization for mobile devices ■  Optimization for the iPhone ■  AIR best practices for mobile devices ■  Ads optimization ■  Technical articles: ■  http://www.adobe.com/devnet/flashplayer/articles/ fplayer10.1_hardware_acceleration.html ■  http://www.RIAgora.com ■  http://www.paultrani.com ■  http://www.gotoandlearn.com ■  http://www.flashmobileblog.com ©2010 Adobe Systems Incorporated. All Rights Reserved.

http://www.mobilerevamp.org	182
http://flashmobile.scottjanousek.com	66
http://www.slideshare.net	1
http://cc.bingj.com	1

Creating Flash Content for Mobile Devices

by paultrani on Jun 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 250

Statistics

Creating Flash Content for Mobile Devices — Presentation Transcript