Creating Flash Content for Mobile Devices

The Flash Platform For Multiple Screens

Paul Trani ptrani@adobe.com www.paultrani.com @paultrani

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

2009 2010 2011 2012

Total Smartphones Smartphones with Flash Player

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

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

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

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

.air (swf, jpg, mp3)

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

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!

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

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

■  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

Technology

Programming Flash Devices - DigChip IC database

Flash Lite in Nokia Devices

Creating Learning Objects With Macromedia Flash MX

Creating intelligent devices

USB Flash Memory HOWTO - Linux Documentation Project · USB Flash Memory HOWTO i. Table of Contents 12. ... Flash memory devices come mainly in the form of small, portable devices

Flash on Mobile Devices: An Introduction to Flash Lite

Creating Multiscreen Apps using Adobe Flash Platform

Creating Successful Flash Games

NO FLASH PHOTOGRAPHY - NO RECORDING DEVICES

Flash on Devices: An Overview

Creating Your First Flash Professional CS5 Document

Data storage devices and flash memories

Data Remanence in Flash Memory Devices

Creating Flash Content for Multiple Screens

Creating a Web Banner in Flash

Flash Memory Guide - Kingston Technology · 4. Creating a File Allocation Table (FAT) or other directory. To enable Flash devices to conveniently store and access customer files,

FRA: a flash-aware redundancy array of flash storage devices

Creating a Poem Using Flash

Flash for Mobile Devices

Creating a Flash Website 1