Your SlideShare is downloading. ×
0
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
MoMo Oct Event
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MoMo Oct Event

610

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
610
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. October 2009 EventAdobe Flash on Mobile & Devices<br />Debashish Paul<br />Adobe Systems, Bangalore<br />10th October, 2009<br />
  • 2. Agenda<br />Introduction<br />Adobe Flash Platform for Mobiles & Devices<br />Flashlite Design & Development – Things to know<br />Hands On<br />Create, Test & Deploy your first Flashlite application<br />Tips & Tricks for Flashlite development<br />Extending the context<br />Create the first Flashlite mash up application<br />General mobile design guidelines<br />Demos<br />Compelling & Engaging Content<br />Application Idea<br />Resources & Questions<br />
  • 3. How many people…<br />Have an iPhone?/Nokia?/Android device or Blackberry?<br />Have other portable or mobile device?<br />Have more than one mobile device?<br />Have downloaded & installed a mobile application?<br />Are new to mobile development? / Have created a mobile application?<br />iPhone developers? Android? Adobe Flash Mobile developers?<br />
  • 4. Flash is Pervasive<br />98% of internet-enabled PCs in the world run Flash<br />85% of the Alexa top 100 websites are using Flash<br />80% of all video on the web is Flash<br />More Recently…<br />94% of the internet connected PCs worldwide have installed Flash Player 10<br />200million AIR installs and growing…<br />
  • 5. Flash on Devices – Types of devices<br />Set-top boxes<br />Mobile Phones<br />Personalized <br />Devices<br />Embedded Devices<br />
  • 6. Flash on Devices – Mobile Phones<br />
  • 7. Flash on Devices – A Billion Devices<br />One Billion Flash Enabled Devices <br />by 2009<br />
  • 8. Flash on Devices – Smartphones with Flash<br />HTC Hero (Android)<br />Sony Ericsson Idou<br />Palm Pre (WebOS)*<br />Nokia N97 (Symbian s60)<br />
  • 9. Flash on Devices – Big Daddy ?<br />?<br />Adobe Flash Professional CS5 <br />will have a new compiler to help<br />package SWF content <br />into a native iPhone application<br />RIM (Research In Motion) has partnered with Adobe<br />for the Open Screen Project<br />
  • 10. Flash Mobile Evolution<br />2009 – 201x… “Flash 10.1”<br />2008 – 201x… Flash Lite 3.x<br />2006 – 2007… Flash Lite 2.x<br />2004 – 2005… Flash Lite 1.x<br />Before 2004… Pocket PC Flash Era<br />
  • 11. Flash Mobile Content Verticals<br />UI/Personalization<br />Web-Browsing<br />Applications<br />Data Services<br />
  • 12. Authoring<br />Testing<br />Packaging<br />Deployment<br />Adobe Mobile Products & Tools<br />Adobe CS4<br />(or other IDEs)<br />Device Central<br />Adobe Mobile Packager<br />Flashlite Players<br />
  • 13. Adobe Flash CS4 IDE<br />
  • 14. Adobe Device Central CS4<br />
  • 15. Adobe Mobile Packaging<br />
  • 16. Flashlite 3.1 Runtime<br />Essentially working with “Flash 8”<br />Development is done in Actionscript 2.0<br />Features over Flashlite 3.0:<br />Improved web-browsing, 91% of top 500 sites<br />Flash 9 (AS2 only) support<br />Local Connection / HTML text / getURL _target / CSS Support / Wmode<br />H.264 support* / Improved video support (smoothing, seek)<br />Improved memory handling for images<br />MP3 Streaming support**<br />* Requires OEM porting to chipset<br />** Requires licensing from MPEG<br />
  • 17. What can you do with Flashlite?<br />
  • 18. Things to know for <br />Flashlite Design & Development<br />
  • 19. Flash Mobile & Devices – Basic Things<br />.SWF = Flash Content<br />.FLV = Flash Video<br />Flash 1.x/2.x/3.x … and soon Flash 10<br />Supported Device Platforms = Dozens of OEMs<br />Lots going on in the “Flash World”<br />
  • 20. Why Use Flashlite?<br />Rapid Development Cycle<br />Apply Your Flash Web Experience<br />Consistent Runtime Environment Between Handsets<br />ActionScript 2.0 based on ECMAScript (JavaScript)<br />Rich Media<br />You Control User Interface / Application Experience<br />Huge Development Community<br />
  • 21. Design Basics<br />CreationTools<br />
  • 22. Design Basics<br />Wireframing<br />* Mobile Device Wireframe made by BitTube is a nice Omnigraffle stencil<br />
  • 23. Design Basics<br />Prototyping<br />Not everything has to work, but a proof of concept is a nice thing to have<br />
  • 24. Design Basics<br />UI Components<br />1st Party: <br />Nokia Flashlite, Sony Ericsson<br />3rd Party: <br />Feather Framework (FL 2.x), Adobe XD UI Components (FL 1.1/FL2.x)<br />Why to reinvent the wheel over and over again?<br />
  • 25. Design: Best Practices<br />Wireframe and/or paper prototype<br />Design lots of prototypes (pieces of apps)<br />Use Adobe Fireworks for compositions<br />Learn the design consideration for your target<br />Reuse UI components when possible<br />
  • 26. Development Basics<br />The Flash Platform<br />There are lots of great software to use<br />
  • 27. Development Basics<br />IDE : Flash Professional CS4<br />Eclipse or other open source IDEs<br />Which Actionscript version?<br />AS 1.0 : Simple Games, Screensavers + Wallpapers, Custom User Interfaces<br />AS 2.0: Complex Apps, Web Service Integration, Data, APIs<br />Flashlite community frameworks:<br />Feather Framework, Shuriken<br />
  • 28. Development Basics – Flashlite APIs<br />Native: <br />fscommand2()<br />1st Party: <br />Nokia Series 60 Platform Services<br />Sony Ericsson Project Capuchin<br />Qualcomm BREW Mobile Platform<br />3rd Party<br />Kunerilite<br />SWFPack<br />Janus<br />Flyer<br />If you want to tap into GPS, Accelerometer, bluetooth, camera, etc you must extend Flash Lite<br />
  • 29. Development Basics – fscommand2()<br />Network<br />GetMaxSignalLevel - Maximum network signal level <br />GetSignalLevel - Current signal level <br />GetNetworkConnectionName - The name of the active network <br />GetNetworkConnectStatus - Connection status <br />GetNetworkGeneration - 2g 3g etc. <br />GetNetworkName - Name of the current network <br />GetNetworkRequestStatus – Status of the most recent HTTP request <br />GetNetworkStatus - Home network or roaming <br />BatteryStatus<br />GetBatteryLevel - Returns the device&apos;s battery level <br />GetMaxBatteryLevel - Returns the device&apos;s maximum battery level <br />GetPowerSource - Charging or on battery <br />
  • 30. Development Basics – fscommand2()<br />Platform & Device id<br />GetPlatform- series 40, s60, etc. <br />GetDevice - Returns a device identifier <br />GetDeviceID - IMEI code <br />Memory & Volume<br />GetTotalPlayerMemory - Maximum heap memory size <br />GetFreePlayerMemory - Heap memory size available <br />GetMaxVolumeLevel - The device&apos;s maximum volume level <br />GetVolumeLevel - Current volume level <br />Locale, Date & Time<br />GetLanguage - The locale ID <br />GetLocaleLongDate - Long date format of current locale <br />GetDateWeekday - Current weekday <br />GetLocaleTime - Current time <br />
  • 31. Development Basics – fscommand2()<br />Using Device Capabilities<br />ExtendBacklightDuration - Extends the on time of the backlight <br />FullScreen - Forces the application to fullscreen mode <br />StartVibrate - Starts vibration <br />StopVibrate - Stops vibration <br />User Interaction<br />SetFocusRectColor - Color of the focus rectangle <br />SetInputTextType - Alpha, numeric, etc. <br />SetSoftKeys - Remaps device&apos;s softkeys<br />ResetSoftKeys - Resets softkeys to default <br />Quit- Causes the Flash Lite Player to stop playback and exit <br />
  • 32. Development: Best Practices<br />First prototype pieces of app and then version 1.0<br />Use AS2.0 frameworks for larger projects<br />1st and 3rd party UI components for reuse<br />Use Flashlite “Extenders” to tap APIs (GPS, etc) (Accelerometer Demo)<br />Use Flash Professional CS4 for highly visual apps<br />
  • 33. Break time !!<br />
  • 34. Hands On – I: Bouncing Ball<br />Setting up the Flash CS4 IDE for mobile development<br />Create an actionscripted bouncing ball animation<br />Add Interactive Sound<br />Publish and test the content<br />
  • 35. Tips & Tricks !<br />
  • 36. Trick-1: Using Templates<br />Flash CS3 comes with a number of starter templates<br />BREW handsets<br />Consumer devices (iRiver, Chumby)<br />Global handsets (Nokia, Windows Mobile)<br />Japanese handsets (KDDI, NTT DoCoMo, Softbank)<br />Sets up stage, player version and frame rate<br />Can also start from within Device Central to get a similar result<br />Set up your own base FLA file and save as a template<br />
  • 37. Trick-2: Optimizing Animation<br />Create efficient animation to optimize performance<br />Remove unnecessary points from vectors<br />Use fills instead of strokes (convert lines to fills)<br />Try to animate using ActionScript if possible instead of tweening<br />Try to avoid heavy use of alphas, even in static backgrounds<br />Test on real handsets, or at the very least simulate performance in Device Central<br />
  • 38. Trick-3: Flagging Device Capabilities<br />Create efficient code by accessing only the features of the device that are available<br />Check for system capabilities for features such as<br />Sound support and the different supported sound formats<br />Video support and file formats<br />Vibration<br />Enhances your SWF file’s portability across multiple handsets<br />if (System.capabilities.hasMP3){<br />//create sound object and attach MP3 sound from library<br />} else {<br />//do something else for sound<br />}<br />
  • 39. Trick-4: Porting Content for Multiple Devices<br />Set stage size for the average screen size<br />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<br />Some devices will scale differently –so test!<br />
  • 40. Trick-5: Frameworks for Key catching<br />Flash Lite 1.1<br />You can use one button that “listen” for<br />events:<br />on (keyPress &quot;&lt;PageDown&gt;&quot;) { }<br />on (keyPress &quot;&lt;PageUp&gt;&quot;) { }<br />on (keyPress &quot;&lt; Down &gt;&quot;) { }<br />on (keyPress &quot;&lt;Up&gt;&quot;) { }<br />on (keyPress &quot;&lt;Right&gt;&quot;) { }<br />on (keyPress &quot;&lt;Left&gt;&quot;) { }<br />on (press) { }<br />Flash Lite 2.x<br />varSoftKeys:Object = new Object();<br />SoftKeys.onKeyDown = function() {<br />trace(Key.getCode());<br />switch (Key.getCode()) {<br />case ExtendedKey.SOFT1 :<br />break;<br />case ExtendedKey.SOFT2 :<br />break;<br />case Key.LEFT :<br />break;<br />case Key.RIGHT :<br />break;<br />case Key.UP :<br />break;<br />case Key.DOWN :<br />break;<br />}<br />};<br />Key.addListener(SoftKeys);<br />
  • 41. Trick-6: Good UI Design<br />Try and follow the UI conventions of the handset your content is running on –don’t reinvent the wheel!<br />Mimic the Soft Key positions/labels and functionality<br />Use graphical devices such as “arrow heads” to show when, and in which direction, the user should scroll through content or screens<br />Make text clear and easy to read (pixel fonts may NOT be the answer if your content is going to scale across devices)<br />“Are you sure you want to exit?”<br />
  • 42. Trick-7: Testing using Nokia Remote Device Access<br />Free service offered by Forum Nokia<br />Allows you to test your content on real devices remotely<br />Ability to test of different Nokia S60 devices with different Flash Lite player versions<br />Great to test memory issues on real device<br />Great to test fscommand2<br />Number of device is limited<br />http://forum.nokia.com/main/technical_services/testing/rda_introduction.html<br />
  • 43. Trick-8: Multiple SWF architecture<br />Designing content using multiple SWF<br />Allows you to extend your content capabilities, i.e. multiple levels game<br />Allows you to add media such as images/sound/video<br />
  • 44. Lunch Time !<br />
  • 45. Hands On – II: FlickrLite<br />Data/Image Loading<br />XML Parsing<br />Key Navigation<br />Pre-Loader<br />Layout<br />
  • 46. Designing Engaging Mobile Experiences<br />
  • 47. The Mobile Context is Relevant<br />Recognize the context and manner of mobile interactions and offer experiences that are appropriate for mobile<br />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.<br />
  • 48. The Mobile Context is Relevant<br />User-Centric<br />It should be dependable<br />consistently solve user’s problems, and do so effortlessly<br />When designed properly, these experiences understand the task, the environment, and the audience<br />They recognize less is often more and that just because you can, doesn&apos;t mean you should<br />
  • 49. The Mobile Context is Relevant<br />Fitting<br />Space is extremely precious on devices<br />If onscreen affordance doesn’t help communicate how users will interact with the content and interface, it is a barrier to them<br />Mobile experiences are most valuable when they are straightforward and clearly represent their purpose<br />The presentation as a whole should be glanceable – designed to be read and understood quickly<br />Superfluous material should be avoided<br />Icons should be bold and simple<br />Text should be large, readable and digestible<br />Items should be spaced distinctly, such that relationships are clear and obvious <br />Data and information should be lightweight, network friendly and presented in small, relevant bits<br />
  • 50. Capture and Guide Users<br />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<br />When everything is equal, nothing is important. Use techniques like animation and expanding-focus to draw emphasis to the item of attention.<br />
  • 51. Capture and Guide Users<br />Establish clear focus, direction and emphasis <br />Mobile experiences depend on the success of the user being able to find the object of focus quickly and easily despite distractions<br />User focus should be implemented in a simple, clear and consistent way across interfaces<br />Actions should be intuitive and natural<br />Users shouldn’t have to think hard about what options are available to them<br />Consider taking advantage of the 5-way and keypad by mapping key presses to actions with spatial and directional significance<br />The interaction required by the UI should be both visually and reflexively intuitive to the user<br />
  • 52. Capture and Guide Users<br />Maintain Context<br />It is critical for the user to recognize where they are and what they can do<br />Moving from screen to screen can be disorienting if the context changes radically or often<br />Maintain context by expanding the view of content in place instead of jumping between pages<br />Use animation to help reinforce physical interactions, display new functionality and content, and ease dramatic changes in context<br />As much as possible, keep interaction models consistent even when the content switches between very different tasks<br />Let the user leverage their experience and knowledge of previous interactions as they find new ones<br />
  • 53. Capture and Guide Users<br />Preview and deliver<br />Ideally, users should have a sense of what result of an action will have before they commit to it<br />Previews are a valuable tool for helping them determine what to expect<br />Surfacing information in a contextual manner will help users make effective, efficient decisions<br />Once a decision is made, it is equally important to support a strong sense of response and offer immediate feedback to the user<br />Engaging experiences must be fast, responsive and unmistakable<br />
  • 54. Differentiation is a Feature<br />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.<br />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.<br />
  • 55. Differentiation is a Feature<br />Stylize<br />The idea of engaging mobile experiences challenges the notion that mobiles devices are mere tools.<br />Phones have increasingly become a reflection of one’s affiliation, purpose and personality – even one’s status in society. <br />So for many, style can trump features. <br />To be engaging, mobile experiences must be fashionable. <br />They must make a statement and offer users a broad palette to express themselves in unique, beautiful and arresting ways.<br />
  • 56. Differentiation is a Feature<br />Demonstrate Brand<br />Mobile users are ready and willing to engage with their favorite brands on their phones<br />Mobile experiences that can faithfully represent brands will be more engaging for users who are hungry for authentic experiences<br />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<br />They are choosing experiences that recognize the value of brand integrity rather than having their content repurposed by not so brand conscious means<br />
  • 57. Differentiation is a Feature<br />Deep customization<br />One size of mobile experience does not fit all<br />Personalization is not new, downloadable ringtones and backgrounds are no longer enough<br />Users are demanding much more than simple aesthetic customization<br />Services and features must be available on-demand<br />Engaging experiences must deliver tailored content and subscriptions, enable personalized work flows, and surface essential functionality<br />Content must recognize user’s individual needs and learn their behaviors; even adapt and grow<br />Engaging mobile experiences must come alive<br />
  • 58. Differentiation is a Feature<br />Fresh & Dynamic<br />The mobile user&apos;s attention span is a fragile commodity, easily lost if not stimulated<br />Network latency is a significant barrier between users and content<br />Engaging mobile content must be timely and relevant, immediately available and easily accessible<br />However, simply making sure content is available is not enough. Mobile content cannot be flat and boring<br />It must make use of rich media, video, audio, high-fidelity graphics and animation to captivate, excite and entertain<br />
  • 59. Demo time !<br />
  • 60. Resources !<br />
  • 61. Resources<br />Books<br />Foundation Flash for Mobile Devices<br />2006, Friends of ED<br />AdvancED Flash on Devices: Mobile Development with Flashlite and Flash 10<br />Aug 2009, Friends of ED/Apress<br />Links<br />http://www.adobe.com/products/flashlite/<br />http://www.adobe.com/devnet/devices/ <br />www.biskero.org/<br />
  • 62. questions ?<br />
  • 63. Thank you !<br />

×