creating mobile content using flash
DESCRIPTION
Learn how to create Flash content for Android devices, including web page content as well as apps.TRANSCRIPT
![Page 1: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/1.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/2.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/3.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/4.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/5.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Design Considerations
![Page 6: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/6.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/7.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. 7
44px
Design for Real Hand Sizes
![Page 8: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/8.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/9.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/10.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Native Keyboard Placement
![Page 11: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/11.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Screens and Orientation
? ?
?
![Page 12: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/12.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Optimization
![Page 13: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/13.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/14.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/15.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 10.1
![Page 16: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/16.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/17.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Testing and Simulation: Device Central
![Page 18: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/18.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/19.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Mulitouch Accelerometer Orientation Microphone Keyboard Geolocation Camera GPS
✔ ✔ ✔ ✔ ✔
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Two Clients
![Page 20: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/20.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/21.jpg)
©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](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/22.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Demo
![Page 23: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/23.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Resources
![Page 24: Creating Mobile Content Using Flash](https://reader031.vdocuments.mx/reader031/viewer/2022013118/54b7027f4a7959943a8b4613/html5/thumbnails/24.jpg)
©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)