Creating Flash Content for Multiple Screens

©2010 Adobe Systems Incorporated. All Rights Reserved.

The Flash PlatformFor Multiple Screens

The Flash PlatformFor Multiple Screens

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


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

Mill

ion

s of

Sm

art

ph

on

es

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

1. Design considerations

2. Flash and screens

3. Flash best practices

4. Flex on mobile?

5. AIR on mobile devices

6. Resources


Design ConsiderationsDesign Considerations


7

Context


Screens


9

44px

≠≠

Finger


10

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

Usually, a finger comes with a hand


Native keyboard


Flash for Multiple ScreensFlash for Multiple Screens


Adobe® Flash® Media Server

FamilyAdobe® BlazeDS

Adobe® LiveCycle®

Data Services

Flash Platform Overview

Applications, Content and Video

MULTISCREEN CONTENT AND APPLICATIONS

CLIENT RUNTIMESCLIENT RUNTIMES

Adobe® Flash® Player

Adobe® AIR®

SERVERS & SERVICESSERVERS & SERVICES

Adobe® Flash® Professional CS5

Adobe® Flash®

Catalyst™

Adobe® Flash® Builder™

Adobe® Creative Suite 5

TOOLSTOOLS


Flash Player 10.1Flash 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 MobileAIR 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 CS5Flash Professional CS5


What’s New In Flash Pro CS5

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

Enhanced ScriptingFlash Builder IntegrationCode Snippets Panel Custom Class Introspection

Improved ProductivityXML based FLAs Share assets via FXGVideo improvements

*Not ideal for mobile


Flash for AndroidFlash 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


OptimizationOptimization


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

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 transparencyAvoid TLFTest different anti-aliasing technics (animation, bitmap text...) Avoid frequently-updated text

Use opaque background over transparencyAvoid TLFTest 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)

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 verticalif (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 objectgetSize(); will return object size


Freeing MovieClips

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


VideoVideo


Video performance problems

■ Inappropriate video encoding■ Inefficient video player


Video encoding format

Preferred AlternateVideo codec H.264 Constrained Baseline

Profile, up to 30 fpsOn2 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-RTTCombined 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?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?


ResourcesResources


Resources

■ Adobe TV■ Optimization guides:

■ Flash Player optimization for mobile devices■ AIR best practices for mobile devices■ Ads optimization

■ http://www.RIAgora.com■ http://www.paultrani.com ■ http://www.flashmobileblog.com ■ http://www.gotoandlearn.com