Transcript
Page 1: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

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

Creating Mobile Content Using Flash Professional CS5

Page 2: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Creating Mobile Content

Take advantage of the proliferation of Flash by creating experiences that are optimized for multiple screens.

•  Design considerations •  Optimization techniques •  Device specific capabilities

Page 3: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Player Penetration by 2012

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

hones

9%

35%

53%

Page 4: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Smartphones with Flash Player 10.1

Unofficial List!

• Nexus One • Motorola Droid 2 • Motorola Droid X • Motorola Droid • HTC Desire • HTC Legend • HTC Incredible • HTC Wildfire • HTC Aria • Samsung Galaxy S • Palm Pre

Page 5: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Design Considerations

Page 6: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Design Considerations for Touch UI

Keep gestures smart and simple

Leverage clear mental models

Touch feedback is key

www.idlemode.com

Page 7: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved. 7

44px

Design for Real Hand Sizes

Page 8: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved. 8

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

Placement

Page 9: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved. 9

Text and Context

 14pt font size  San serif (Arial, Helvetica, Verdana)  High contrast (black on white, white on black)  Use opaque background over transparency

Page 10: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Native Keyboard Placement

Page 11: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Screens and Orientation

? ?

?

Page 12: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Optimization

Page 13: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Graphics

  Consider bitmaps over vectors   Minimize number of vectors   Test with different qualities of Stage

Avoid, if possible:   Filters   Blend modes   Transparency   Perspective distortion

Page 14: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

ActionScript Optimization

  Set frame rate as low as possible   Dynamically adjust frame rate   Consolidate into a single handler   Use GPU accelerated Bitmap Transformations (cacheAsBitmapMatrix)   Bitmap Blitting

Page 15: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Flash Player 10.1

Page 16: Creating Mobile Content Using Flash

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

  Multi-touch and gestures   Accelerometer input   Geolocation   Mobile text input   Optimized SWF management for mobile   Sleep mode   Graphics hardware acceleration   H.264 video hardware decoding

Page 17: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Testing and Simulation: Device Central

Page 18: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Publishing

Flash Player: In the Browser

AIR: Beyond the Browser  Build standalone applications using Flash

 Everything Flash Player 10.1 has and then some

 First mobile operating system to be supported is Android

 Provides Flash developers access to app stores

Page 19: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Mulitouch Accelerometer Orientation Microphone Keyboard Geolocation Camera GPS

✔ ✔ ✔ ✔ ✔

✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

Two Clients

Page 20: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Packaging & Distribution

.ipa

.air (swf, jpg, mp3)

.apk

.exe

.dmg

.air (swf, jpg, mp3)

Page 21: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

AIR for Android: 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

Page 22: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Demo

Page 23: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Resources

Page 24: Creating Mobile Content Using Flash

©2010 Adobe Systems Incorporated. All Rights Reserved.

Resources

■  [email protected] ■  www.adobetv.com ■  http://www.paultrani.com ■  www.bytearray.org ■  http://www.RIAgora.com ■  http://www.flashmobileblog.com ■  http://www.gotoandlearn.com ■  http://www.blackcj.com

DROID Does Flash hosted by Adobe & Motorola Thursday, September 16, 2010 from 6:00 PM - 9:00 PM (PT)


Recommended