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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

MoMo Oct Event

594
views

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
594
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
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
    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 !