Creating Flash Content for Mobile Devices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Creating Flash Content for Mobile Devices

on

  • 4,909 views

Learn how to publish to Flash Player 10.1 and Android devices (Nexus One etc). ...

Learn how to publish to Flash Player 10.1 and Android devices (Nexus One etc).
You'll get an understanding of all the ins and outs of the features in Flash Player 10.1 (gestures, accelerometer) and learn how to optimize your content for mobile devices.

Statistics

Views

Total Views
4,909
Views on SlideShare
4,565
Embed Views
344

Actions

Likes
6
Downloads
123
Comments
0

4 Embeds 344

http://www.mobilerevamp.org 275
http://flashmobile.scottjanousek.com 67
http://www.slideshare.net 1
http://cc.bingj.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The chart speaks for itself, today there are countless numbers of mobile phones and consumer electronics. As more and more of these devices become connected to the Internet, users of these devices are demanding access to their favourite services and applications online
  • // Design for immediate access Touch screens allows users to jump from point A to point B with a single tap, influencing the ways we design interactions and screen layouts. Recognizing that the user can move much more quickly through the interface, it is essential to streamline the UI and make core navigation very clear. 2// Keep gestures smart and simple The touch experience is one of direct manipulation — something everyone has experience with. Our physical world is based on direct manipulation and users naturally bring that mindset to a touch experience. Therefore it’s important when implementing gestural controls to make them simple and intuitive. In other words, the foundation of the UI should respond exactly as a user would expect, making taps and flicks essential ingredients. Additional gestures, beyond flicks and taps can certainly be utilized, just recognize that additional gestures may not be naturally discoverable. Use a redundant button and make the gesture a shortcut to the same functionality. These additional gestures require explicit instruction so the user may take advantage. It’s important to distinguish between global, system-level gestures and local, app-level gestures. In many ways, it is the global gestures that are necessary to keep the UI intuitive and straightforward. Once inside an application context, you may educate users about unique gestures that add to the touch vocabulary while in the application, so long as the gestures do not negate or confuse the global gestures. 3//  Leverage clear mental models The touch experience is an intimate interaction with the content and UI space. There is an opportunity to transport the user into an interface world that is governed by common rules of physical motion like inertia, bounce and gravity that build and reinforce expectations when the user touches, flicks, or drags interface elements. Dimensionality and/or a sense of physicality may help offset the experience of interacting with the flat aspect of the screen, when feedback may be minimal. Transition animations used throughout the device experience help confirm that an action has taken place, and may give users a greater sense that they have gone “deeper” into an application context, or shifted over to a parallel task. When used, transitions should recede — they shouldn’t call dramatic attention to themselves. Simple and quick motions keep the user focused on the task at hand, rather than loud or long special effects that move them from point A to point B. There are no focus states or hover states to cue users in, so iconography and other touchable elements should stand out clearly from page content. The notable exception is T-Mobile’s G1, which uses a trackball and touch input. In this instance a hover state can be mistaken for an an active state as users flip between mental models going from trackball to touch input and back. Further, a hardware key used for Home, Back, or Menu may be an effective model to let the user feel they are leaving the current on-screen context to access another. 4// Design for real hand sizes Fingers come in all sizes so ensure that the interface is designed for real people. This has an impact on both the sizing of interface elements and the objects that surround them. For example, when designing for a QVGA resolution, 45-48 pixel hit targets are ideal for the average finger. Tolerances between buttons are driven by the size of the button and the likelihood of accidentally hitting an adjacent element. Generally speaking, the smaller the buttons, the bigger the gaps needed between buttons. Because of this principle, there is usually some tolerance flexibility on the edge of the screen, because the finger is only partially on screen and makes for an easier target. Many in-dash automobile navigation systems successfully use this method. Hit targets are directly proportional to the screen resolution. Therefore on-device testing becomes critical, to measure the actual size of the resulting interface. A common goal for touchable elements is 10 millimeters minimum, regardless of resolution. 5// Touch feedback is key User are mobile, and will often be using their mobile devices under compromised and distracted conditions. Without clear feedback, the user must focus more attentively at the task on screen, which may directly conflict with the real-world task they are simultaneously trying to achieve. All touch is not the same; technology plays a key role. The responsiveness of the UI, and whether the screen uses pressure or capacitive touch will influence the level of feedback needed in the interface. Visual, audible and/or tactile feedback will allow them to more attentively focus on what’s most important. The finger is a blunt instrument, often obscuring the target a user is touching. Creating a visual feedback system that takes this into account is essential, as visual feedback is the one critical type of feedback that is necessary in a touchable environment. Often, visual feedback that is still visible after the user has released their touch may be equally useful to guide a user through an interface. Audible feedback is often used as a secondary mechanism when visual feedback might not be noticed. However one must proceed with caution when adding audible feedback to mobile devices, because these are often turned off by the user. When creating audible cues, specific ranges of sounds are recommended to cut through the din of the user’s natural environment. Haptic feedback can offset the difficulty some users face in transitioning from a key-based device to a flat touchscreen. The haptic response can give the user an illusion that a key has been pressed by utilizing a small vibration under the user’s finger. While vibration technology can account for a spectrum of tactile experiences that are available to the UI designer, one must also recognize that the user may opt to turn off this feedback to conserve battery life.
  • Why is mobile different? Usage patterns are different: indoors and outdoors, on the go and stationary, interruptions and multi-tasking, Wide range of environment: dark, light, quiet, crowded Apps can be context/location aware...
  • 44px is a good guideline for the size of hit targets A tap finger is not a click Double click to edit something Make sure to react on tap (highlight, etc…)
  • Setup your layout so that important elements are not obscured by the finger or the hand.
  • Think how the keyboard will interact with your UI elements: text field, buttons. Position them so they don’t get covered, or adjust your layout when the keyboard is activated The keyboard will hide part of the screen when sliding
  • New generations of tools, framework, client and servers enable designers and developers to push the limits of what is possible on the web. Runtimes – consistent, enable authoring once without rewriting many times. Flash Player, AIR across computers and devices
  • Target mobile operating systems: Android Microsoft Windows Phone 7 Palm webOS Symbian S60 V5 * **. This release also supports Windows 7 and Mac OS X 10.6 (“Snow Leopard”) desktop operating systems.
  • Target mobile operating systems: Android Microsoft Windows Phone 7 Palm webOS Symbian S60 V5 * **. This release also supports Windows 7 and Mac OS X 10.6 (“Snow Leopard”) desktop operating systems.
  • OSP partners to date are listed here – close to 70 industry leaders in the mobile, PC, and TV space Span all key parts of the value chain Chipset/silicon vendors World’s leading handset and device OEMs Carriers Content providers We’ve added many new members to the OSP since MAX – continuing to see strong participation by technology partners. Now focus has recently shifted to seeing a lot more energy on the content partners, who are working with the developer beta of our runtimes to make sure their content works, and to provide improved experiences for those using devices on the Flash Platform.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text. Multi-touch and gestures Create multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android. Accelerometer input A new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile (Mobile only) Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage. Sleep mode (Mobile only) The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player. Graphics hardware acceleration (Mobile only) A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices. H.264 video hardware decoding Flash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text. Multi-touch and gestures Create multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android. Accelerometer input A new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile (Mobile only) Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage. Sleep mode (Mobile only) The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player. Graphics hardware acceleration (Mobile only) A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices. H.264 video hardware decoding Flash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text. Multi-touch and gestures Create multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android. Accelerometer input A new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile (Mobile only) Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage. Sleep mode (Mobile only) The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player. Graphics hardware acceleration (Mobile only) A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices. H.264 video hardware decoding Flash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text. Multi-touch and gestures Create multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android. Accelerometer input A new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile (Mobile only) Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage. Sleep mode (Mobile only) The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player. Graphics hardware acceleration (Mobile only) A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices. H.264 video hardware decoding Flash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Mobile text input A virtual keyboard is automatically raised and lowered in response to focus changes on text fields when editing text on mobile devices supporting a virtual keyboard to enable unobstructed and intuitive text editing. The focused text field is centered in the visible region of the page and appropriately zoomed/scrolled to ensure it is not obscured by the virtual keyboard. Upon screen rotation, incoming calls, or other system events, any already existing text input is retained. The virtual keyboard works with TextField but does not currently work with the Text Layout Framework or other Flash Text Engine text. Multi-touch and gestures Create multi-touch aware content for a wide range of devices and multi-touch capable machines running Microsoft Windows 7. Interact with multiple objects simultaneously or work with native gestures, such as pinch, scroll, rotate, scale and two-finger tap. Multi-touch support in Flash Player 10.1 is not available for Android. Accelerometer input A new Accelerometer class allows developers to read acceleration values in X, Y and Z axes from native device accelerometer sensors in ActionScript. Optimized SWF management for mobile (Mobile only) Flash Player 10.1 optimizes SWF loading and playback for mobile CPU and memory limitations to provide a better user experience. Instances are loaded or deferred based on SWF priority, visibility and available memory and CPU resources to enable more immediate browsing experiences without waiting for every SWF on a page to load. Developers can indicate SWF priority through a new HTML parameter, hasPriority. Deferred instances are loaded after the HTML page load is complete, and offscreen and invisible instances are started when they become visible. Flash Player will also automatically pause SWF playback it is not in view or the foreground application, for example when a call is received or alarm goes off, to reduce CPU utilization, battery usage and memory usage. Sleep mode (Mobile only) The Flash Player timer slows down when the mobile device goes into screen-saver or similar mode to reduce CPU and battery consumption on mobile devices. The timer returns to the default setting when a wake-up event is triggered. There is no interruption in audio/video playback. Incoming phone calls pause Flash Player. Graphics hardware acceleration (Mobile only) A GPU-based vector renderer replaces the software renderer on smartphones and other mobile devices, resulting in faster rendering performance for more expressive user experiences while consuming less power. Supports hardware acceleration of all rendering, including vector graphics, bitmaps, 3D effects, filters, color transforms, alpha, device and embedded text, Saffron type, and cacheAsBitmap. Implementation of graphics hardware acceleration will be dependent on the graphics silicon vendor of the device. This feature is not available for Android devices. H.264 video hardware decoding Flash Player 10.1 introduces hardware-based H.264 video decoding to deliver smooth, high quality video with minimal overhead across supported mobile devices and PCs. Using available hardware to decode video offloads tasks from the CPU, improving video playback performance, reducing system resource utilization, and preserving battery life. H.264 video hardware acceleration is not supported on the Nexus One at this time.
  • Flash Player 10.1 includes a number of media quality of service improvements and is ready to take advantage of upcoming media delivery technologies to provide new ways to deliver rich media experiences and create new business models. With new HTTP streaming and content protection features, premium audio and video content can be securely delivered within the browser. Streaming performance is enhanced with improved support for live events, buffer control and peer assisted networking. Network context-aware services, like adaptive frame rate, will enable smooth, uninterrupted media playback and improved resource utilization on mobile devices. Content protection (Desktop only; output protection Windows only; requires Adobe Flash Access 2.0 SDK expected to be available the first half of 2010) Media protected using the upcoming Adobe Flash Access 2.0 SDK can be played back securely in Flash Player 10.1 to support a wide range of business models, including video-on-demand, rental, and electronic sell-through, for streaming as well as download. Using industry-standard cryptography, Adobe Flash Access 2.0 and Flash Player 10.1 provides a robust environment to protect content so it remains safe from tampering or capture throughout its lifecycle. Flash Player 10.1 supports output protection on Windows, enabling content providers to specify requirements for protection of analog and digital outputs, providing additional safeguards against unauthorized recording. Note: Encrypted content cannot be hardware accelerated in this release of Flash Player. Peer-assisted networking (requires Stratus ) The RTMFP protocol now supports groups, which enables an application to segment its users to send messages and data only between members of the group. Application level multicast provides one (or a few) -to-many streaming of continuous live video and audio live video chat using RTMFP groups. HTTP streaming (expected in the first half of 2010) HTTP streaming enables delivery of video-on-demand and live streaming using standard HTTP servers, or from HTTP servers at CDNs, leveraging standard HTTP infrastructure and SWF-level playback components. The addition of HTTP streaming will enable expanded protocol options to deliver live and recorded media to Flash Player, including full content protection for HTTP streamed video with Flash Access 2.0. Stream reconnect (Requires FMS 3.5.3 server) Stream reconnect allows an RTMP stream to continue to play through the buffer even if the connection is disrupted, thereby making media experiences more tolerant of short term network failures and enabling non-disruptive video playback. When a connection is re-established the stream resumes playback. Developers can add re-connection logic in ActionScript to re-establish server connection and resume streaming without any disruption in the video. Smart seek (Requires FMS 3.5.3 server) Smart seek allows you to seek within the buffer and introduces a new "back" buffer so you can easily rewind or fast forward video without going back to the server, reducing the start time after a seek. Smart seek can speed and improve the seeking performance of streamed videos and enable the creation of slow motion, double time, or “instant replay” experiences for streaming video. Buffered stream catch-up Buffered stream catch-up allows developers to set a target latency threshold that triggers slightly accelerated video playback to ensure that live video streaming stays in sync with real time over extended playback periods. Fast Switch (formerly Dynamic Streaming enhancements) (Requires FMS 4 server) The Dynamic Streaming capability introduced in Flash Player 10 and FMS 3.5 is enhanced to improve switching times between bitrates, reducing the time to receive the best viewing experience for available bandwidth and processing speed. Users no longer need to wait for the buffer to play through, resulting in a faster bitrate transition time and an uninterrupted video playback experience, regardless of bandwidth fluctuations. Microphone Access (Desktop only) Access binary data of the live and continuous waveform coming from the microphone to create new types of audio applications, such as audio recording for transcoding, karaoke, vocoder voice manipulation, sonographic analysis, pitch detection, and more. Dynamic frame rate (Desktop only) Automatically manage and throttle frame rates and CPU usage for background content to improve performance when multitasking.
  • Text engine Code snippets panel Spring for bones Builder integration (after FB)
  • Get the Android SDK: http://developer.android.com/sdk Allows you to create and install apps on your device (Android SDK Manager, ADB, DDMS etc.)
  • Text engine Code snippets panel Spring for bones Builder integration (after FB)
  • If the project displays a great deal of individual graphical elements that will never animate, consider replacing them with a pre-rendered bitmap graphic—using a static image to create the desired texture. When a filter is applied to a display object, Flash Player creates two bitmaps in memory. These bitmaps are each the size of the display object. When modifying one of the properties of a filter, both bitmaps are updated in memory to create the resulting bitmap. This process involves some CPU processing and the two bitmaps can use a significant amount of memory. Keep bitmaps as small as possible. Bitmaps that are downsampled at runtime because they are drawn at a smaller size than their native resolution are a waste of speed, memory, and bandwidth. Do not use DisplayObject.cacheAsBitmap on content that changes often, as this practice also causes increased overhead.
  • Another simple way to optimize memory is to reuse objects and avoid recreating them whenever possible.
  • Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event. The movieclip still runs, but it is not rendered. To handle this situation correctly, listen to the proper events and remove eventlisteners, to prevent CPU-intensive code from being executed:
  • One key to understanding how to improve application performance is to understand how the Flash Platform runtime executes code. The runtime operates in a loop with certain actions occurring each “frame.” A frame in this case is simply a block of time determined by the frame rate specified for the application. Avoid high-rate ActionScript timers; also avoid using many different timers in the same project. Keep SWF frame rate as low as possible. If necessary, set the frame rate of the Stage dynamically as needed. Flash Player 10.1 RC: limitation à 60 FPS.
  • One key to understanding how to improve application performance is to understand how the Flash Platform runtime executes code. The runtime operates in a loop with certain actions occurring each “frame.” A frame in this case is simply a block of time determined by the frame rate specified for the application. Avoid high-rate ActionScript timers; also avoid using many different timers in the same project. Keep SWF frame rate as low as possible. If necessary, set the frame rate of the Stage dynamically as needed. Flash Player 10.1 RC: limitation à 60 FPS.
  • FB profiler uses getSize(). Since FP 10. ActionScript 3.0 includes a large set of display objects. One of the most simple optimization tips to limit memory usage is to use the appropriate type of display object. For simple shapes that are not interactive, use Shape objects. For interactive objects that don’t need a timeline, use Sprite objects. For animation that uses a timeline, use MovieClip objects. Always choose the most efficient type of object for your application. All primitive types except String use 4 – 8 bytes in memory. There is no way to optimize memory by using a specific type for a primitive:
  • Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event. The movieclip still runs, but it is not rendered. To handle this situation correctly, listen to the proper events and remove eventlisteners, to prevent CPU-intensive code from being executed:
  • If the project displays a great deal of individual graphical elements that will never animate, consider replacing them with a pre-rendered bitmap graphic—using a static image to create the desired texture. When a filter is applied to a display object, Flash Player creates two bitmaps in memory. These bitmaps are each the size of the display object. When modifying one of the properties of a filter, both bitmaps are updated in memory to create the resulting bitmap. This process involves some CPU processing and the two bitmaps can use a significant amount of memory. Keep bitmaps as small as possible. Bitmaps that are downsampled at runtime because they are drawn at a smaller size than their native resolution are a waste of speed, memory, and bandwidth. Do not use DisplayObject.cacheAsBitmap on content that changes often, as this practice also causes increased overhead.

Creating Flash Content for Mobile Devices Presentation Transcript

  • 1. The Flash Platform For Multiple Screens Paul Trani ptrani@adobe.com www.paultrani.com @paultrani ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 2. Digital Explosion Across Multiple Screens Consumer Electronics Mobile Phones Personal Computers 2 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 3. Flash Player on most smartphones shipping in 2012, >250M cumulative 350 Total Smartphones 300 Smartphones with Flash Player Millions of Smartphones 250 200 53% 150 100 35% 50 9% 0 2009 2010 2011 2012 Source: Strategy Analytics smartphone forecast (January 2010) and Adobe adoption estimates ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 4. Agenda 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.
  • 5. Design Considerations ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 6. 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 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 7. Context 7 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 8. Screens ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 9. Finger 44px ≠ 9 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 10. Usually, a finger comes with a hand 10 ©2010 Adobe Systems Incorporated. All Rights Reserved. Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
  • 11. Native keyboard ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 12. Flash for Multiple Screens ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 13. Flash Platform Overview MULTISCREEN CONTENT AND APPLICATIONS TOOLS Applications, Content and Video Adobe® Flash® Adobe® Flash® Professional CS5 Catalyst™ CLIENT RUNTIMES Adobe® Flash® Builder™ Adobe® Flash® Player Adobe® AIR® SERVERS & SERVICES Adobe® Creative Suite 5 Adobe® Flash® Media Adobe® LiveCycle® Adobe® BlazeDS Server Family Data Services ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 14. Flash Player 10.1 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 15. Flash Player 10.1 Designed For New Platforms Greater Performance Enhanced Rich Media Support ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 16. Flash Player 10.1   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 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 17. Open Screen Project Technology Partners Content Partners ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. 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.
  • 22. 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.
  • 23. 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.
  • 24. Media Support   HTTP streaming   Content protection   Peer-assisted networking   Buffered stream catch-up   Stream reconnect*   Smart Seek*   Fast Switch*   Microphone Access+   Dynamic frame rate+ * FMS server + Desktop only ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 25. AIR on Mobile ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 26. 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. Adobe Confidential. ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 27. AIR Packaging & Distribution Workflow .air .exe .air (swf, jpg, mp3) .dmg .ipa .apk ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 28. Flash Professional CS5 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 29. What’s New In Flash Pro CS5 Expressiveness Enhanced Scripting Improved Productivity  New Text Engine*   Flash Builder Integration   XML based FLAs  Spring for Bones*   Code Snippets Panel   Share assets via FXG  New Deco tools*   Custom Class Introspection   Video improvements *Not ideal for mobile ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 30. Flash for Android ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 31. 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.
  • 32. Flash CS5 AIR for Android Extension Create, install and launch an .apk using Flash Professional CS5 .apk ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 33. Optimization ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 34. 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 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 35. Reuse objects! ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 36. Text  Use opaque background over transparency  Avoid TLF  Test different anti-aliasing technics (animation, bitmap text...)   Avoid frequently-updated text Lorem Ipsum dolor… ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 37. Redraw Regions   If an object's properties are animated, its bounding box is a redraw region Text   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.
  • 38. Graphical optimizations ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 39. 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.
  • 40. 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; 800px //If the layout is vertical if (stage.stageWidth < stage.stageHeight) { //Adjust graphics } } setPosition(); 480px 480px stage.addEventListener(Event.RESIZE, resizeLayout); function resizeLayout(e:Event):void { 800px setPosition(); } ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 41. Display Objects   Use the appropriate type of display object  getSize(); will return object size 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 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 42. Freeing MovieClips Alpha? RemoveChild? Visible? Text 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.
  • 43. 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.
  • 44. Video ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 45. Video performance problems ■  Inappropriate video encoding ■  Inefficient video player ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 46. Video encoding format Preferred Alternate Video codec H.264 Constrained Baseline On2 VP6 Simple Profile or Profile, up to 30 fps 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 500 kbps 350 kbps 100 kbps (audio and video) (350 kbps for On2 VP6 and Sorensen Spark) Max resolution 480 x 320 320 x 240 Max audio bit rate 160 kbps 64 kbps 32 kbps (128 kbps for On2 VP6 and Sorensen Spark) ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 47. 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.
  • 48. Flex on Mobile? ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 49. 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 ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 50. Resources ©2010 Adobe Systems Incorporated. All Rights Reserved.
  • 51. 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 ©2010 Adobe Systems Incorporated. All Rights Reserved.