momo oct event

White Master

Replace witha graphic

5.5” Tall & 4.3” Wide

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1

October 2009 Event

Adobe Flash on Mobile & Devices

Debashish PaulAdobe Systems, Bangalore10th 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

200 million AIR installs and growing…

®


Flash on Devices – Types of devices

Mobile Phones

Set-top boxes

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 Adobefor the Open Screen

Project

®


Flash Mobile Evolution

Before 2004… Pocket PC Flash Era

2004 – 2005… Flash Lite 1.x

2006 – 2007… Flash Lite 2.x

2008 – 201x… Flash Lite 3.x

2009 – 201x… “Flash 10.1”

®


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

Creation Tools

®


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 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?

®


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

Battery Status GetBatteryLevel - Returns the device's battery level GetMaxBatteryLevel - Returns the device's maximum battery level GetPowerSource - Charging or on battery

®



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

®



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” forevents:

on (keyPress "<PageDown>") { }

on (keyPress "<PageUp>") { }

on (keyPress "< Down >") { }

on (keyPress "<Up>") { }

on (keyPress "<Right>") { }

on (keyPress "<Left>") { }

on (press) { }

Flash Lite 2.x

var SoftKeys: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.

®



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

®



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.

®



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

®



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

®



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.

®



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.

®



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

®



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

®



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 !

momo oct event

Technology