This document provides an agenda and summary of an Adobe Flash on Mobile & Devices event held on October 10, 2009. The agenda includes introductions, a discussion of the Adobe Flash Platform for mobiles and devices, a presentation on Flashlite design and development, hands-on activities to create a first Flashlite application, and tips and tricks for Flashlite development. It also covers extending applications with Flashlite mashups, general mobile design guidelines, and demos. The document aims to educate attendees on mobile development with Flash and Flashlite through presentations and activities.

1. October 2009 EventAdobe Flash on Mobile & DevicesDebashish PaulAdobe Systems, Bangalore10th October, 2009

2. AgendaIntroductionAdobe Flash Platform for Mobiles & DevicesFlashlite Design & Development – Things to knowHands OnCreate, Test & Deploy your first Flashlite applicationTips & Tricks for Flashlite developmentExtending the contextCreate the first Flashlite mash up applicationGeneral mobile design guidelinesDemosCompelling & Engaging ContentApplication IdeaResources & 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 Pervasive98% of internet-enabled PCs in the world run Flash85% of the Alexa top 100 websites are using Flash80% of all video on the web is FlashMore Recently…94% of the internet connected PCs worldwide have installed Flash Player 10200million AIR installs and growing…

5. Flash on Devices – Types of devicesSet-top boxesMobile PhonesPersonalized DevicesEmbedded Devices

6. Flash on Devices – Mobile Phones

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

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

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

10. Flash Mobile Evolution2009 – 201x… “Flash 10.1”2008 – 201x… Flash Lite 3.x2006 – 2007… Flash Lite 2.x2004 – 2005… Flash Lite 1.xBefore 2004… Pocket PC Flash Era

11. Flash Mobile Content VerticalsUI/PersonalizationWeb-BrowsingApplicationsData Services

12. AuthoringTestingPackagingDeploymentAdobe Mobile Products & ToolsAdobe CS4(or other IDEs)Device CentralAdobe Mobile PackagerFlashlite Players

13. Adobe Flash CS4 IDE

14. Adobe Device Central CS4

15. Adobe Mobile Packaging

16. Flashlite 3.1 RuntimeEssentially working with “Flash 8”Development is done in Actionscript 2.0Features over Flashlite 3.0:Improved web-browsing, 91% of top 500 sitesFlash 9 (AS2 only) supportLocal Connection / HTML text / getURL _target / CSS Support / WmodeH.264 support* / Improved video support (smoothing, seek)Improved memory handling for imagesMP3 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 VideoFlash 1.x/2.x/3.x … and soon Flash 10Supported Device Platforms = Dozens of OEMsLots going on in the “Flash World”

20. Why Use Flashlite?Rapid Development CycleApply Your Flash Web ExperienceConsistent Runtime Environment Between HandsetsActionScript 2.0 based on ECMAScript (JavaScript)Rich MediaYou Control User Interface / Application ExperienceHuge Development Community

21. Design BasicsCreationTools

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

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

24. Design BasicsUI Components1st Party: Nokia Flashlite, Sony Ericsson3rd 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 PracticesWireframe and/or paper prototypeDesign lots of prototypes (pieces of apps)Use Adobe Fireworks for compositionsLearn the design consideration for your targetReuse UI components when possible

26. Development BasicsThe Flash PlatformThere are lots of great software to use

27. Development BasicsIDE : Flash Professional CS4Eclipse or other open source IDEsWhich Actionscript version?AS 1.0 : Simple Games, Screensavers + Wallpapers, Custom User InterfacesAS 2.0: Complex Apps, Web Service Integration, Data, APIsFlashlite community frameworks:Feather Framework, Shuriken

28. Development Basics – Flashlite APIsNative: fscommand2()1st Party: Nokia Series 60 Platform ServicesSony Ericsson Project CapuchinQualcomm BREW Mobile Platform3rd PartyKuneriliteSWFPackJanusFlyerIf you want to tap into GPS, Accelerometer, bluetooth, camera, etc you must extend Flash Lite

29. Development Basics – fscommand2()NetworkGetMaxSignalLevel - 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 BatteryStatusGetBatteryLevel - 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 idGetPlatform- series 40, s60, etc. GetDevice - Returns a device identifier GetDeviceID - IMEI code Memory & VolumeGetTotalPlayerMemory - Maximum heap memory size GetFreePlayerMemory - Heap memory size available GetMaxVolumeLevel - The device's maximum volume level GetVolumeLevel - Current volume level Locale, Date & TimeGetLanguage - The locale ID GetLocaleLongDate - Long date format of current locale GetDateWeekday - Current weekday GetLocaleTime - Current time

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

32. Development: Best PracticesFirst prototype pieces of app and then version 1.0Use AS2.0 frameworks for larger projects1st and 3rd party UI components for reuseUse 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 BallSetting up the Flash CS4 IDE for mobile developmentCreate an actionscripted bouncing ball animationAdd Interactive SoundPublish and test the content

35. Tips & Tricks !

36. Trick-1: Using TemplatesFlash CS3 comes with a number of starter templatesBREW handsetsConsumer devices (iRiver, Chumby)Global handsets (Nokia, Windows Mobile)Japanese handsets (KDDI, NTT DoCoMo, Softbank)Sets up stage, player version and frame rateCan also start from within Device Central to get a similar resultSet up your own base FLA file and save as a template

37. Trick-2: Optimizing AnimationCreate efficient animation to optimize performanceRemove unnecessary points from vectorsUse fills instead of strokes (convert lines to fills)Try to animate using ActionScript if possible instead of tweeningTry to avoid heavy use of alphas, even in static backgroundsTest on real handsets, or at the very least simulate performance in Device Central

38. Trick-3: Flagging Device CapabilitiesCreate efficient code by accessing only the features of the device that are availableCheck for system capabilities for features such asSound support and the different supported sound formatsVideo support and file formatsVibrationEnhances your SWF file’s portability across multiple handsetsif (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 DevicesSet stage size for the average screen sizeAllow 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 screenSome devices will scale differently –so test!

40. Trick-5: Frameworks for Key catchingFlash Lite 1.1You can use one button that “listen” forevents:on (keyPress "<PageDown>") { }on (keyPress "<PageUp>") { }on (keyPress "< Down >") { }on (keyPress "<Up>") { }on (keyPress "<Right>") { }on (keyPress "<Left>") { }on (press) { }Flash Lite 2.xvarSoftKeys: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 DesignTry 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 functionalityUse graphical devices such as “arrow heads” to show when, and in which direction, the user should scroll through content or screensMake 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 AccessFree service offered by Forum NokiaAllows you to test your content on real devices remotelyAbility to test of different Nokia S60 devices with different Flash Lite player versionsGreat to test memory issues on real deviceGreat to test fscommand2Number of device is limitedhttp://forum.nokia.com/main/technical_services/testing/rda_introduction.html

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

44. Lunch Time !

45. Hands On – II: FlickrLiteData/Image LoadingXML ParsingKey NavigationPre-LoaderLayout

46. Designing Engaging Mobile Experiences

47. The Mobile Context is RelevantRecognize the context and manner of mobile interactions and offer experiences that are appropriate for mobileMobile 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 RelevantUser-CentricIt should be dependableconsistently solve user’s problems, and do so effortlesslyWhen designed properly, these experiences understand the task, the environment, and the audienceThey recognize less is often more and that just because you can, doesn't mean you should

49. The Mobile Context is RelevantFittingSpace is extremely precious on devicesIf onscreen affordance doesn’t help communicate how users will interact with the content and interface, it is a barrier to themMobile experiences are most valuable when they are straightforward and clearly represent their purposeThe presentation as a whole should be glanceable – designed to be read and understood quicklySuperfluous material should be avoidedIcons should be bold and simpleText should be large, readable and digestibleItems 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 UsersMobile 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 directlyWhen 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 UsersEstablish 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 distractionsUser focus should be implemented in a simple, clear and consistent way across interfacesActions should be intuitive and naturalUsers shouldn’t have to think hard about what options are available to themConsider taking advantage of the 5-way and keypad by mapping key presses to actions with spatial and directional significanceThe interaction required by the UI should be both visually and reflexively intuitive to the user

52. Capture and Guide UsersMaintain ContextIt is critical for the user to recognize where they are and what they can doMoving from screen to screen can be disorienting if the context changes radically or oftenMaintain context by expanding the view of content in place instead of jumping between pagesUse animation to help reinforce physical interactions, display new functionality and content, and ease dramatic changes in contextAs much as possible, keep interaction models consistent even when the content switches between very different tasksLet the user leverage their experience and knowledge of previous interactions as they find new ones

53. Capture and Guide UsersPreview and deliverIdeally, users should have a sense of what result of an action will have before they commit to itPreviews are a valuable tool for helping them determine what to expectSurfacing information in a contextual manner will help users make effective, efficient decisionsOnce a decision is made, it is equally important to support a strong sense of response and offer immediate feedback to the userEngaging experiences must be fast, responsive and unmistakable

54. Differentiation is a FeatureEngaging 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 FeatureStylizeThe 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 FeatureDemonstrate BrandMobile users are ready and willing to engage with their favorite brands on their phonesMobile experiences that can faithfully represent brands will be more engaging for users who are hungry for authentic experiencesThough brands have a choice of posting their products with carriers, putting them into distribution, or going it alone, they are choosing engaging mobile experiencesThey 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 FeatureDeep customizationOne size of mobile experience does not fit allPersonalization is not new, downloadable ringtones and backgrounds are no longer enoughUsers are demanding much more than simple aesthetic customizationServices and features must be available on-demandEngaging experiences must deliver tailored content and subscriptions, enable personalized work flows, and surface essential functionalityContent must recognize user’s individual needs and learn their behaviors; even adapt and growEngaging mobile experiences must come alive

58. Differentiation is a FeatureFresh & DynamicThe mobile user's attention span is a fragile commodity, easily lost if not stimulatedNetwork latency is a significant barrier between users and contentEngaging mobile content must be timely and relevant, immediately available and easily accessibleHowever, simply making sure content is available is not enough. Mobile content cannot be flat and boringIt must make use of rich media, video, audio, high-fidelity graphics and animation to captivate, excite and entertain

59. Demo time !

60. Resources !

61. ResourcesBooksFoundation Flash for Mobile Devices2006, Friends of EDAdvancED Flash on Devices: Mobile Development with Flashlite and Flash 10Aug 2009, Friends of ED/ApressLinkshttp://www.adobe.com/products/flashlite/http://www.adobe.com/devnet/devices/ www.biskero.org/

62. questions ?

63. Thank you !