creating flash content for multiple screens
DESCRIPTION
Presentation on how to create Flash content for multiple screens, mainly using Flash Professional CS5.TRANSCRIPT
©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
©2010 Adobe Systems Incorporated. All Rights Reserved.
2
Digital Explosion Across Multiple Screens
Consumer Electronics
Personal Computers
Mobile Phones
©2010 Adobe Systems Incorporated. All Rights Reserved.
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%
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Design ConsiderationsDesign Considerations
©2010 Adobe Systems Incorporated. All Rights Reserved.
7
Context
©2010 Adobe Systems Incorporated. All Rights Reserved.
Screens
©2010 Adobe Systems Incorporated. All Rights Reserved.
9
44px
≠≠
Finger
©2010 Adobe Systems Incorporated. All Rights Reserved.
10
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Usually, a finger comes with a hand
©2010 Adobe Systems Incorporated. All Rights Reserved.
Native keyboard
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash for Multiple ScreensFlash for Multiple Screens
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 10.1Flash Player 10.1
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 10.1
Designed For New Platforms
Greater Performance
Enhanced Rich Media Support
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Technology Partners
Open Screen Project
Content Partners
©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:
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
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;
}
©2010 Adobe Systems Incorporated. All Rights Reserved.
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;}
©2010 Adobe Systems Incorporated. All Rights Reserved.
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"; }
©2010 Adobe Systems Incorporated. All Rights Reserved.
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 }}
©2010 Adobe Systems Incorporated. All Rights Reserved.
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)
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
AIR on MobileAIR on Mobile
©2010 Adobe Systems Incorporated. All Rights Reserved.
© 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
©2010 Adobe Systems Incorporated. All Rights Reserved.
AIR Packaging & Distribution Workflow
.ipa
.air (swf, jpg, mp3)
.air
.apk
.exe
.dmg
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash Professional CS5Flash Professional CS5
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash for AndroidFlash for Android
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash CS5 AIR for Android Extension
Create, install and launch an .apk using Flash Professional CS5
.apk
©2010 Adobe Systems Incorporated. All Rights Reserved.
OptimizationOptimization
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Reuse objects!
©2010 Adobe Systems Incorporated. All Rights Reserved.
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…
©2010 Adobe Systems Incorporated. All Rights Reserved.
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)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Graphical optimizations
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
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();}
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
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();}
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
VideoVideo
©2010 Adobe Systems Incorporated. All Rights Reserved.
Video performance problems
■ Inappropriate video encoding■ Inefficient video player
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
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
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flex on Mobile?Flex on Mobile?
©2010 Adobe Systems Incorporated. All Rights Reserved.
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?
©2010 Adobe Systems Incorporated. All Rights Reserved.
ResourcesResources
©2010 Adobe Systems Incorporated. All Rights Reserved.
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