Creating Flash Content for Mobile Devices

The Flash Platform
For Multiple Screens

Paul Trani ptrani@adobe.com www.paultrani.com @paultrani
©2010 Adobe Systems Incorporated. All Rights Reserved.

Digital Explosion Across Multiple Screens

Consumer
Electronics
Mobile
Phones

Personal
Computers

2

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


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

7

Screens


Finger

44px
≠

9

Usually, a finger comes with a hand

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

Native keyboard


Flash for Multiple Screens


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


Flash Player 10.1


Flash Player 10.1

Designed For New Platforms Greater Performance Enhanced Rich Media Support


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


Open Screen Project
Technology Partners 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 ﬂ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;

}


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)


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


AIR on Mobile


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.

AIR Packaging Distribution Workflow

.air

.exe
.air
(swf, jpg, mp3)

.dmg

.ipa

.apk


Flash Professional CS5


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


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

  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)


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;

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


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


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


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 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)


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?


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


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


Creating Flash Content for Mobile Devices

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Creating Flash Content for Mobile Devices

Similar to Creating Flash Content for Mobile Devices (20)

More from paultrani

More from paultrani (12)

Recently uploaded

Recently uploaded (20)

Creating Flash Content for Mobile Devices

Editor's Notes