1. October 2009 EventAdobe Flash on Mobile & Devices Debashish Paul Adobe Systems, Bangalore 10th October, 2009

2. Agenda Introduction Adobe Flash Platform for Mobiles & Devices Flashlite Design & Development – Things to know Hands On Create, Test & Deploy your first Flashlite application Tips & Tricks for Flashlite development Extending the context Create the first Flashlite mash up application General mobile design guidelines Demos Compelling & Engaging Content Application Idea Resources & Questions

3. How many people… Have an iPhone?/Nokia?/Android device or Blackberry? Have other portable or mobile device? Have more than one mobile device? Have downloaded & installed a mobile application? Are new to mobile development? / Have created a mobile application? iPhone developers? Android? Adobe Flash Mobile developers?

4. Flash is Pervasive 98% of internet-enabled PCs in the world run Flash 85% of the Alexa top 100 websites are using Flash 80% of all video on the web is Flash More Recently… 94% of the internet connected PCs worldwide have installed Flash Player 10 200million AIR installs and growing…

5. Flash on Devices – Types of devices Set-top boxes Mobile Phones Personalized Devices Embedded Devices

6. Flash on Devices – Mobile Phones

7. Flash on Devices – A Billion Devices One Billion Flash Enabled Devices by 2009

8. Flash on Devices – Smartphones with Flash HTC Hero (Android) Sony Ericsson Idou Palm Pre (WebOS)* Nokia N97 (Symbian s60)

9. Flash on Devices – Big Daddy ? ? Adobe Flash Professional CS5 will have a new compiler to help package SWF content into a native iPhone application RIM (Research In Motion) has partnered with Adobe for the Open Screen Project

10. Flash Mobile Evolution 2009 – 201x… “Flash 10.1” 2008 – 201x… Flash Lite 3.x 2006 – 2007… Flash Lite 2.x 2004 – 2005… Flash Lite 1.x Before 2004… Pocket PC Flash Era

11. Flash Mobile Content Verticals UI/Personalization Web-Browsing Applications Data Services

12. Authoring Testing Packaging Deployment Adobe Mobile Products & Tools Adobe CS4 (or other IDEs) Device Central Adobe Mobile Packager Flashlite Players

13. Adobe Flash CS4 IDE

14. Adobe Device Central CS4

15. Adobe Mobile Packaging

16. Flashlite 3.1 Runtime Essentially working with “Flash 8” Development is done in Actionscript 2.0 Features over Flashlite 3.0: Improved web-browsing, 91% of top 500 sites Flash 9 (AS2 only) support Local Connection / HTML text / getURL _target / CSS Support / Wmode H.264 support* / Improved video support (smoothing, seek) Improved memory handling for images MP3 Streaming support** * Requires OEM porting to chipset ** Requires licensing from MPEG

17. What can you do with Flashlite?

18. Things to know for Flashlite Design & Development

19. Flash Mobile & Devices – Basic Things .SWF = Flash Content .FLV = Flash Video Flash 1.x/2.x/3.x … and soon Flash 10 Supported Device Platforms = Dozens of OEMs Lots going on in the “Flash World”

20. Why Use Flashlite? Rapid Development Cycle Apply Your Flash Web Experience Consistent Runtime Environment Between Handsets ActionScript 2.0 based on ECMAScript (JavaScript) Rich Media You Control User Interface / Application Experience Huge Development Community

21. Design Basics CreationTools

22. Design Basics Wireframing * Mobile Device Wireframe made by BitTube is a nice Omnigraffle stencil

23. Design Basics Prototyping Not everything has to work, but a proof of concept is a nice thing to have

24. Design Basics UI Components 1st Party: Nokia Flashlite, Sony Ericsson 3rd Party: Feather Framework (FL 2.x), Adobe XD UI Components (FL 1.1/FL2.x) Why to reinvent the wheel over and over again?

25. Design: Best Practices Wireframe and/or paper prototype Design lots of prototypes (pieces of apps) Use Adobe Fireworks for compositions Learn the design consideration for your target Reuse UI components when possible

26. Development Basics The Flash Platform There are lots of great software to use

27. Development Basics IDE : Flash Professional CS4 Eclipse or other open source IDEs Which Actionscript version? AS 1.0 : Simple Games, Screensavers + Wallpapers, Custom User Interfaces AS 2.0: Complex Apps, Web Service Integration, Data, APIs Flashlite community frameworks: Feather Framework, Shuriken

28. Development Basics – Flashlite APIs Native: fscommand2() 1st Party: Nokia Series 60 Platform Services Sony Ericsson Project Capuchin Qualcomm BREW Mobile Platform 3rd Party Kunerilite SWFPack Janus Flyer If you want to tap into GPS, Accelerometer, bluetooth, camera, etc you must extend Flash Lite

29. Development Basics – fscommand2() Network GetMaxSignalLevel - Maximum network signal level GetSignalLevel - Current signal level GetNetworkConnectionName - The name of the active network GetNetworkConnectStatus - Connection status GetNetworkGeneration - 2g 3g etc. GetNetworkName - Name of the current network GetNetworkRequestStatus – Status of the most recent HTTP request GetNetworkStatus - Home network or roaming BatteryStatus GetBatteryLevel - Returns the device's battery level GetMaxBatteryLevel - Returns the device's maximum battery level GetPowerSource - Charging or on battery

30. Development Basics – fscommand2() Platform & Device id GetPlatform- series 40, s60, etc. GetDevice - Returns a device identifier GetDeviceID - IMEI code Memory & Volume GetTotalPlayerMemory - Maximum heap memory size GetFreePlayerMemory - Heap memory size available GetMaxVolumeLevel - The device's maximum volume level GetVolumeLevel - Current volume level Locale, Date & Time GetLanguage - The locale ID GetLocaleLongDate - Long date format of current locale GetDateWeekday - Current weekday GetLocaleTime - Current time

31. Development Basics – fscommand2() Using Device Capabilities ExtendBacklightDuration - Extends the on time of the backlight FullScreen - Forces the application to fullscreen mode StartVibrate - Starts vibration StopVibrate - Stops vibration User Interaction SetFocusRectColor - Color of the focus rectangle SetInputTextType - Alpha, numeric, etc. SetSoftKeys - Remaps device's softkeys ResetSoftKeys - Resets softkeys to default Quit- Causes the Flash Lite Player to stop playback and exit

32. Development: Best Practices First prototype pieces of app and then version 1.0 Use AS2.0 frameworks for larger projects 1st and 3rd party UI components for reuse Use Flashlite “Extenders” to tap APIs (GPS, etc) (Accelerometer Demo) Use Flash Professional CS4 for highly visual apps

33. Break time !!

34. Hands On – I: Bouncing Ball Setting up the Flash CS4 IDE for mobile development Create an actionscripted bouncing ball animation Add Interactive Sound Publish and test the content

35. Tips & Tricks !

36. Trick-1: Using Templates Flash CS3 comes with a number of starter templates BREW handsets Consumer devices (iRiver, Chumby) Global handsets (Nokia, Windows Mobile) Japanese handsets (KDDI, NTT DoCoMo, Softbank) Sets up stage, player version and frame rate Can also start from within Device Central to get a similar result Set up your own base FLA file and save as a template

37. Trick-2: Optimizing Animation Create efficient animation to optimize performance Remove unnecessary points from vectors Use fills instead of strokes (convert lines to fills) Try to animate using ActionScript if possible instead of tweening Try to avoid heavy use of alphas, even in static backgrounds Test on real handsets, or at the very least simulate performance in Device Central

38. Trick-3: Flagging Device Capabilities Create efficient code by accessing only the features of the device that are available Check for system capabilities for features such as Sound support and the different supported sound formats Video support and file formats Vibration Enhances your SWF file’s portability across multiple handsets if (System.capabilities.hasMP3){ //create sound object and attach MP3 sound from library } else { //do something else for sound }

39. Trick-4: Porting Content for Multiple Devices Set stage size for the average screen size Allow the content to bleed off the stage to the size of the largest screen, or at least the size that will resize to cover the largest screen Some devices will scale differently –so test!

40. Trick-5: Frameworks for Key catching Flash Lite 1.1 You can use one button that “listen” for events: on (keyPress "<PageDown>") { } on (keyPress "<PageUp>") { } on (keyPress "< Down >") { } on (keyPress "<Up>") { } on (keyPress "<Right>") { } on (keyPress "<Left>") { } on (press) { } Flash Lite 2.x varSoftKeys:Object = new Object(); SoftKeys.onKeyDown = function() { trace(Key.getCode()); switch (Key.getCode()) { case ExtendedKey.SOFT1 : break; case ExtendedKey.SOFT2 : break; case Key.LEFT : break; case Key.RIGHT : break; case Key.UP : break; case Key.DOWN : break; } }; Key.addListener(SoftKeys);

41. Trick-6: Good UI Design Try and follow the UI conventions of the handset your content is running on –don’t reinvent the wheel! Mimic the Soft Key positions/labels and functionality Use graphical devices such as “arrow heads” to show when, and in which direction, the user should scroll through content or screens Make text clear and easy to read (pixel fonts may NOT be the answer if your content is going to scale across devices) “Are you sure you want to exit?”

42. Trick-7: Testing using Nokia Remote Device Access Free service offered by Forum Nokia Allows you to test your content on real devices remotely Ability to test of different Nokia S60 devices with different Flash Lite player versions Great to test memory issues on real device Great to test fscommand2 Number of device is limited http://forum.nokia.com/main/technical_services/testing/rda_introduction.html

43. Trick-8: Multiple SWF architecture Designing content using multiple SWF Allows you to extend your content capabilities, i.e. multiple levels game Allows you to add media such as images/sound/video

44. Lunch Time !

45. Hands On – II: FlickrLite Data/Image Loading XML Parsing Key Navigation Pre-Loader Layout

46. Designing Engaging Mobile Experiences

47. The Mobile Context is Relevant Recognize the context and manner of mobile interactions and offer experiences that are appropriate for mobile Mobile experiences are all about being a mobile user. We are on the move. We are individuals, yet we want to stay connected. And we’re hungry for some stimulation.

48. The Mobile Context is Relevant User-Centric It should be dependable consistently solve user’s problems, and do so effortlessly When designed properly, these experiences understand the task, the environment, and the audience They recognize less is often more and that just because you can, doesn't mean you should

49. The Mobile Context is Relevant Fitting Space is extremely precious on devices If onscreen affordance doesn’t help communicate how users will interact with the content and interface, it is a barrier to them Mobile experiences are most valuable when they are straightforward and clearly represent their purpose The presentation as a whole should be glanceable – designed to be read and understood quickly Superfluous material should be avoided Icons should be bold and simple Text should be large, readable and digestible Items should be spaced distinctly, such that relationships are clear and obvious Data and information should be lightweight, network friendly and presented in small, relevant bits

50. Capture and Guide Users Mobile users are subject to countless distractions and disadvantages. Screens are small, environments are noisy, networks are undependable, hardware is always a barrier and software is often inconsistent. Great mobile experiences overcome these barriers by recognizing them and addressing them directly When everything is equal, nothing is important. Use techniques like animation and expanding-focus to draw emphasis to the item of attention.

51. Capture and Guide Users Establish clear focus, direction and emphasis Mobile experiences depend on the success of the user being able to find the object of focus quickly and easily despite distractions User focus should be implemented in a simple, clear and consistent way across interfaces Actions should be intuitive and natural Users shouldn’t have to think hard about what options are available to them Consider taking advantage of the 5-way and keypad by mapping key presses to actions with spatial and directional significance The interaction required by the UI should be both visually and reflexively intuitive to the user

52. Capture and Guide Users Maintain Context It is critical for the user to recognize where they are and what they can do Moving from screen to screen can be disorienting if the context changes radically or often Maintain context by expanding the view of content in place instead of jumping between pages Use animation to help reinforce physical interactions, display new functionality and content, and ease dramatic changes in context As much as possible, keep interaction models consistent even when the content switches between very different tasks Let the user leverage their experience and knowledge of previous interactions as they find new ones

53. Capture and Guide Users Preview and deliver Ideally, users should have a sense of what result of an action will have before they commit to it Previews are a valuable tool for helping them determine what to expect Surfacing information in a contextual manner will help users make effective, efficient decisions Once a decision is made, it is equally important to support a strong sense of response and offer immediate feedback to the user Engaging experiences must be fast, responsive and unmistakable

54. Differentiation is a Feature Engaging mobile experiences are ones that stand out from the crowd; they should make us stand out from the crowd. More and more, mobile devices represent identity – from how they look to how they are used. They must be rich, compelling and connect personally to users. They should be exciting, fun and desirable. Build high visual interest. Mobile phones are often seen as a reflection of personal identity. The visual design should be complementary, pleasing and even fashionable.

55. Differentiation is a Feature Stylize The idea of engaging mobile experiences challenges the notion that mobiles devices are mere tools. Phones have increasingly become a reflection of one’s affiliation, purpose and personality – even one’s status in society. So for many, style can trump features. To be engaging, mobile experiences must be fashionable. They must make a statement and offer users a broad palette to express themselves in unique, beautiful and arresting ways.

56. Differentiation is a Feature Demonstrate Brand Mobile users are ready and willing to engage with their favorite brands on their phones Mobile experiences that can faithfully represent brands will be more engaging for users who are hungry for authentic experiences Though brands have a choice of posting their products with carriers, putting them into distribution, or going it alone, they are choosing engaging mobile experiences They are choosing experiences that recognize the value of brand integrity rather than having their content repurposed by not so brand conscious means

57. Differentiation is a Feature Deep customization One size of mobile experience does not fit all Personalization is not new, downloadable ringtones and backgrounds are no longer enough Users are demanding much more than simple aesthetic customization Services and features must be available on-demand Engaging experiences must deliver tailored content and subscriptions, enable personalized work flows, and surface essential functionality Content must recognize user’s individual needs and learn their behaviors; even adapt and grow Engaging mobile experiences must come alive

58. Differentiation is a Feature Fresh & Dynamic The mobile user's attention span is a fragile commodity, easily lost if not stimulated Network latency is a significant barrier between users and content Engaging mobile content must be timely and relevant, immediately available and easily accessible However, simply making sure content is available is not enough. Mobile content cannot be flat and boring It must make use of rich media, video, audio, high-fidelity graphics and animation to captivate, excite and entertain

59. Demo time !

60. Resources !

61. Resources Books Foundation Flash for Mobile Devices 2006, Friends of ED AdvancED Flash on Devices: Mobile Development with Flashlite and Flash 10 Aug 2009, Friends of ED/Apress Links http://www.adobe.com/products/flashlite/ http://www.adobe.com/devnet/devices/ www.biskero.org/

62. questions ?

63. Thank you !