Download pdf - Creating Flash Content for Mobile Devices

©2010 Adobe Systems Incorporated. All Rights Reserved.

The Flash Platform For Multiple Screens

Paul Trani [email protected] www.paultrani.com @paultrani

©2010 Adobe Systems Incorporated. All Rights Reserved. 2

Digital Explosion Across Multiple Screens

Consumer Electronics

Personal Computers

Mobile Phones


Flash Player on most smartphones shipping in 2012, >250M cumulative

Source: Strategy Analytics smartphone forecast (January 2010) and Adobe adoption estimates

0

50

100

150

200

250

300

350

2009 2010 2011 2012

Total Smartphones Smartphones with Flash Player

Mill

ions

of Sm

artp

hone

s

9%

35%

53%


Agenda

1.  Design considerations

2.  Flash and screens

3.  Flash best practices

4.  Flex on mobile?

5.  AIR on mobile devices

6.  Resources


Design Considerations


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


Context


Screens


44px ≠

Finger


Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Usually, a finger comes with a hand


Native keyboard


Flash for Multiple Screens


Adobe® Flash® Media Server Family Adobe® BlazeDS Adobe® LiveCycle®

Data Services

Flash Platform Overview

Applications, Content and Video

MULTISCREEN CONTENT AND APPLICATIONS

CLIENT RUNTIMES

Adobe® Flash® Player Adobe® AIR®

SERVERS & SERVICES

Adobe® Flash® Professional CS5

Adobe® Flash® Catalyst™

Adobe® Flash® Builder™

Adobe® Creative Suite 5

TOOLS


Flash Player 10.1


Flash Player 10.1

Designed For New Platforms Greater Performance Enhanced Rich Media Support


 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

Flash Player 10.1


Technology Partners

Open Screen Project

Content Partners


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


Accelerometer

import flash.sensors.Accelerometer; import flash.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;

}


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; }


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"; ��}��


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�� }��}


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)


  HTTP streaming   Content protection   Peer-assisted networking   Buffered stream catch-up   Stream reconnect*   Smart Seek*   Fast Switch*   Microphone Access+   Dynamic frame rate+

Media Support

* FMS server + Desktop only


AIR on Mobile


© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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


AIR Packaging & Distribution Workflow

.ipa

.air (swf, jpg, mp3)

.air

.apk

.exe

.dmg


Flash Professional CS5


What’s New In Flash Pro CS5

Expressiveness  New Text Engine*  Spring for Bones*  New Deco tools*

Enhanced Scripting   Flash Builder Integration   Code Snippets Panel   Custom Class Introspection

Improved Productivity   XML based FLAs   Share assets via FXG   Video improvements

*Not ideal for mobile


Flash for Android


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


Flash CS5 AIR for Android Extension

Create, install and launch an .apk using Flash Professional CS5

.apk


Optimization


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


Reuse objects!


Text

 Use opaque background over transparency  Avoid TLF  Test different anti-aliasing technics (animation, bitmap text...)   Avoid frequently-updated text

Lorem Ipsum dolor…


Redraw Regions

Text   If an object's properties are animated, its bounding box is a redraw region   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)


Graphical optimizations


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


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;

//If the layout is vertical if (stage.stageWidth < stage.stageHeight) { //Adjust graphics }

} setPosition();

stage.addEventListener(Event.RESIZE, resizeLayout); function resizeLayout(e:Event):void {

setPosition(); }

800p

x

480px

800px

480px


Display Objects

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

  Use the appropriate type of display object  getSize(); will return object size


Freeing MovieClips

Text Alpha? RemoveChild? Visible? 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(); }


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


Video


Video performance problems

■  Inappropriate video encoding ■  Inefficient video player


Video encoding format

Preferred Alternate Video codec H.264 Constrained Baseline

Profile, up to 30 fps On2 VP6 Simple Profile or 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 (audio and video)

500 kbps (350 kbps for On2 VP6 and Sorensen Spark)

350 kbps 100 kbps

Max resolution 480 x 320 320 x 240

Max audio bit rate 160 kbps (128 kbps for On2 VP6 and Sorensen Spark)

64 kbps 32 kbps


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


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

Flex on Mobile?


Resources


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