• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
MoMo Oct Event
 

MoMo Oct Event

on

  • 1,151 views

 

Statistics

Views

Total Views
1,151
Views on SlideShare
1,075
Embed Views
76

Actions

Likes
0
Downloads
29
Comments
0

2 Embeds 76

http://momob.in 74
http://www.mobilemondayorlando.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    MoMo Oct Event MoMo Oct Event Presentation Transcript

    • October 2009 EventAdobe Flash on Mobile & Devices
      Debashish Paul
      Adobe Systems, Bangalore
      10th October, 2009
    • 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
    • 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?
    • 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…
    • Flash on Devices – Types of devices
      Set-top boxes
      Mobile Phones
      Personalized
      Devices
      Embedded Devices
    • Flash on Devices – Mobile Phones
    • Flash on Devices – A Billion Devices
      One Billion Flash Enabled Devices
      by 2009
    • Flash on Devices – Smartphones with Flash
      HTC Hero (Android)
      Sony Ericsson Idou
      Palm Pre (WebOS)*
      Nokia N97 (Symbian s60)
    • 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
    • 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
    • Flash Mobile Content Verticals
      UI/Personalization
      Web-Browsing
      Applications
      Data Services
    • Authoring
      Testing
      Packaging
      Deployment
      Adobe Mobile Products & Tools
      Adobe CS4
      (or other IDEs)
      Device Central
      Adobe Mobile Packager
      Flashlite Players
    • Adobe Flash CS4 IDE
    • Adobe Device Central CS4
    • Adobe Mobile Packaging
    • 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
    • What can you do with Flashlite?
    • Things to know for
      Flashlite Design & Development
    • 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”
    • 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
    • Design Basics
      CreationTools
    • Design Basics
      Wireframing
      * Mobile Device Wireframe made by BitTube is a nice Omnigraffle stencil
    • Design Basics
      Prototyping
      Not everything has to work, but a proof of concept is a nice thing to have
    • 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?
    • 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
    • Development Basics
      The Flash Platform
      There are lots of great software to use
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Break time !!
    • 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
    • Tips & Tricks !
    • 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
    • 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
    • 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
      }
    • 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!
    • 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);
    • 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?”
    • 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
    • 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
    • Lunch Time !
    • Hands On – II: FlickrLite
      Data/Image Loading
      XML Parsing
      Key Navigation
      Pre-Loader
      Layout
    • Designing Engaging Mobile Experiences
    • 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.
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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
    • 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.
    • 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.
    • 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
    • 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
    • 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
    • Demo time !
    • Resources !
    • 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/
    • questions ?
    • Thank you !