Adobe MAX 2006 - Creating Flash Content for Consumer Electronics

2006 Adobe Systems Incorporated. All Rights Reserved.1

MAX 2006 Beyond BoundariesScott Janousek

Flash/Mobile Developer

Creating Flash Content for Consumer Electronics (MD201W)

October 23-26, 2006

Please turn all devices to Silent Mode.


Developing with Flash for six years

Now working for Schematic (Boston office)

Began Flash Lite in 2004

Now working with Flash Lite 1.1, 2.x

Coauthor on a Flash Mobile book

Certified Flash Lite 1.1 Instructor

About Me

SCOTT JANOUSEK

Flash/Mobile Developer

My Blog: http://www.scottjanousek.com/blog/

Resources: http://www.scottjanousek.com/max/


Who is this session for:

Those interested in developing for Flash Enabled Portable Consumer Electronics

Session Agenda The Flash Platform and Device Capabilities Overview

Creating Content for Portable Devices: U10, Clix, E10, viliv p1, and PSP

Testing Content

Deploying Content

The Future of Flash Mobile on Consumer Electronics

Q & A

Session Goals

Gain exposure to Flash Enabled Portable Consumer Electronics

Learn how to start creating content for these devices using Flash

Understand some of the development challenges you will face

Session Overview


Device Convergence – it’s getting harder to distinguish between devices!

Flash Enabled Portable Consumer Electronic Devices PMP’s: IRiver U10, Clix, E10, and viliv p1

Other Devices: PSP, Kodak Easy Share One, Leapster Leapfrog

We will cover Flash enabled PMP’s in this session

Portable Consumer Electronic Devices

Handsets and PDA’s More Expensive

Mass Market Appeal

Application Focus

Network Connected

PMP’s (Portable Media Players)

(Usually) Lower Cost

Mass Market Appeal

Entertainment Focus

(Typically) No Network Connection


Flash Lite 1.1

Flash Lite 2.x

Flash SDK (Flash 6,7)

Flash Platform - Consumer Electronic Devices

Flash Professional 8

Flash Lite 1.1 CDK

Flash Lite 2.x CDK

Flash Lite 2.0 Update for Flash Professional 8

Flash SDK

Manufacturers license the Flash Player source code

FLASH MOBILE PLAYERS TOOLS

PRODUCTS AND SERVICES FLASH ENABLED CONSUMER DEVICES

Non-portables

Portables

Portable Media Players


Flash Enabled Portable Consumer Electronics

PMP’s and other Devices


Why use Flash? Speed to Market

Reusability

Portability

Rapid Prototyping

Benefits of Flash across Consumer Devices

Embedded Navigation User Interfaces

Creating Flash Content Wallpapers, Screensavers,

Themes

Games

Applications

Ubiquity of Flash

Compelling User Interfaces

Better User Experiences

Growing Flash Mobile Developer Community


Note: Capabilities subject to change as firmware updates occur on devices.

Device Capabilities Matrix

External Movies (.swf) Yes Yes Yes Yes Yes

Image LoadingYes (.jpg)

Yes(.jpg)

Yes(.jpg)

Yes(,jpg)

Yes(.jpg)

Sound Type event event event eventevent, streaming

Audio Formats ADPCM, MP3 ADPCM, MP3 ADPCM, MP3 ADPCM, MP3PCM, ADPCM,

MP3

Flash Video No No No No No

Local Data Access Yes

(.txt) N/A N/A

Yes(.txt)

Yes (.txt, .xml)

Remote Data Handling No No No NoYes

(.txt, .xml)

Persistent Data StorageYes

(custom)Only Flash Lite 1.1

Only Flash Lite 1.1

Yes(custom)

Yes (Shared

Objects)

Network Access No No No NoYes

(WiFi)

Flash Player Version Flash Lite 1.1 Flash Lite 2.0 Flash Lite 2.0 Flash Lite 1.1 Flash 6

ActionScript Flash 4/5 Hybrid ActionScript 2.0 ActionScript 2.0 Flash 4/5 Hybrid ActionScript 1.0

Flash Content Types Standalone StandaloneStandalone,

ThemesStandalone

Browser (.HTML, .swf)

P1

Evaluate available Flash capabilities for your target devices


Note: All results are approximate and do no reflect performance under all possible conditions.

Performance Benchmarks

Flash framerate incloop randomnum substring primenum switchtime vectortime bitmaptime

FL 1.1 14 fps 0.00 0.29 0.00 2.05 0.004700

(70% IDE)3430

(96% IDE)

FL 1.1 15 fps 0.47 0.00 0.3 3.48 0.005300

(62% IDE)3190

(104% IDE)

FL 2.0 15 fps 0.63 0.00 0.34 4.37 0.004290

(77% IDE)3240

(102% IDE)

FL 2.0 15 fps 0.64 0.00 0.34 4.36 0.003230

(102% IDE)3230

(102% IDE)

P1

Flash Lite 1.1 Capabilities Benchmark application

Interpretation of Results What do these results tell us? How do these devices perform at various tasks? What target frame rate is appropriate?

NOTE: Flash Lite Benchmarks generated by: http://www.flashmobileforum.org/capabilities/

6 18-24 fps N/A N/A N/A N/A N/A N/A N/A

NOTE: PSP Flash Benchmarks generated by FPS Speedometer


1. Processor Speed

2. Memory

3. Screen Size

4. Input and Navigation

5. Content File Size

Top 5 Portable Device Limitations

Always consider:

Avoid “surprises” by researching your device capabilities and/or limitations!

Create “Proof of Concept” (PoC) content for your target device(s)


Personal Media Players by IRiver and Reigncom (Korean)

U10 was first generation. Clix is the “successor”

Flash Implementation U10: Flash Lite 1.1

Clix: Flash Lite 2.0

Supports ActionScript 2.0

IRiver u10 and Clix

Development Limitations and ConstraintsScreen Size: 320 x 240 pixels

Processor: Comparable to Low End Pentium Desktop

Memory: 5120 KB

Input & Navigation:4-way (U,D,L,R) and 2 soft keys (+/- volume controls)

Target FPS: 15-20 (depending on content)

Network Connectivity: None

Content Testing/Deployment: USB cable transfer (or use emulator)


Additional fscommand2’s available on IRiver devices

File Paths

IRiver U10 and Clix API

//-- set volume level status = fscommand2(“Set”, “Vol”, value);

//-- set “cookie” … remember no Shared Objects on the IRiver U10 status = fscommand2(“SetPersistentData”, “myVarValue1=a&myVarValue2=b”);

//-- get “cookie” … remember no Shared Objects on the IRiver U10status = fscommand2(“GetPersistentData”, “/:MyVarValue1”);

//-- get # of imagesstatus = fscommand2(“Get”, “Picture”, “Total”, “/:totalimages”);

//-- get image path status = fscommand2(“Get”, “Picture”, “Path”, totalimages, “/:imagepath”);

//-- file paths on the U10loadVariables(“file://system/t.txt”); loadMovieNum(“file://Photo/t.jpg”,1);

//-- file paths on the Clix, E10loadMovieNum(“file://Flash Games/t.swf”, 1);


No “enter” key for IRiver devices

U10 and Clix use Direct-Click UI

Directional Keys:

Soft Keys mapped to volume controls

With the Clix you can take advantage of Key Listener Objects

IRiver Device Keys

//-- keys for the U10, Clix & E10 (U,D,L,R)on( keyPress “<LEFT>” ) { /* LEFT */ }on( keyPress “<RIGHT>” ) { /* RIGHT */ }on( keyPress “<UP>” ) { /* UP */ }on( keyPress “<DOWN>” ) { /* DOWN */ }

//-- set softkeys in order to use them retVal = fscommand2( “setSoftKeys”, “+”, “-” ); //-- these would be attached to a “KeyCatcher” Button on( keyPress “<PAGEDOWN>” ) { /* - Volume */ } on( keyPress “<PAGEUP>” ) { /* + Volume */ }

if ( Key.IsDown( Key.LEFT ) ) { /* Key object supported for Clix */ }


IRiver U10 and Clix Code Walkthroughs

Alien Invasion

IRiver Clix game

Development Time: 3 days

Flash Lite 2.0

ActionScript 2.0

OOP (Object based style)

Mad Bomber

IRiver U10 game

Series 60 port to U10

Porting Time: 1 day

Flash Lite 1.1

Timeline driven (Flash 4 style)


U10 development template included in Mobile Device Update #4

Translated U10 Flash Lite Authoring Guidelines

Adobe Devnet: Articles on creating content for the IRiver U10 (Flash Lite 1.1)

Adobe White paper: Optimizing Content for Flash Lite 2.0 (Clix)

U10 and Clix Resources


Personal Media Player by IRiver and Reigncom (Korean) The Korean equivalent of a iPod Nano!

Flash Implementation Flash Lite 2.0

ActionScript 2.0 Support

Supports UI Themes and Standalone Flash Content

IRiver E10

Device Limitations and ConstraintsScreen Size: 128 x 128 pixels

Processor: Comparable to Low End Pentium Desktop

Memory: 5120 KB (same as U10 and Clix)

Input & Navigation: 4-way (U,D,L,R), 2 soft keys (+/- volume controls)





IRiver E10 Design and UI Walkthroughs

MAX 2006 Btamin Korean service distributes these mini

apps

“Brain Vitamins”

Think “Relaxation tapes”

Ambient animation and sound

Utilizing Flash Lite 1.1

Flash Lite Theme Popular in Korea

Customized User Interface skins

Theme .fla

Personalize sound, graphics, etc.

Utilizing Flash Lite 2.0


Unofficial IRiver E10 MDP (Mobile Device Profile)

Adobe Devnet White paper: Optimizing Content for Flash Lite 2.0

IRiver E10 Resources


Personal Media Player by Yukyung Technologies (Korean)

viliv p2 will ship in South Korea soon

Flash Implementation Flash Lite 1.1

Custom API to access low level device features (MMI)

viliv p1

Device Limitations and ConstraintsScreen Size: 480 x 272 pixels (widescreen)

Processor: Comparable to Low End Pentium PC

Memory: Comparable to the u10

Input & Navigation:8-way (U,D,L,R and diagonals) and Enter key




API: Custom fscommand2 support


fscommand2( “Quit” ); is not supported

Custom fscommand2’s (MMI) Examples:

viliv p1 API

//-- Use this to exit. Must have label named Event@shoot on timeline

loadMovie( “main”, 0 );

//-- Some custom commands for viliv p1 (there are device specific!)fscommand2(“GetVars”, “system”, “gettime”); fscommand2(“GetVars”, “system”, “getdate”); fscommand2(“GetVars”, “setting”, “time”, “settime”, c0, c1);fscommand2(“Getvars”, “setting”, “skin”, ”getskin”,””);fscommand2(“GetVars”, “service”, “cube”, “loadpoint”, “”);fscommand2(“GetVars”, “service”, “cube”, “savepoint”, comboNo, point, “”);fscommand2(“GetVars”, “service”, “cube”, “open”, eval(“/:song"), “”);fscommand2(“GetVars”, “service”, “cube”, “play”, eval(“/:song"), “”);fscommand2(“GetVars”, “service”, “cube”, “pause”, eval(“/:song"), “”);fscommand2(“GetVars”, “service”, “cube”, “close”, eval(“/:song"), “”);fscommand2(“GetVars”, “service”, “cube”, “playtime”, eval(“/:song"), “”);fscommand2(“GetVars”, “service”, “cube”, “close”, eval(“/:song"), “”);fscommand2(“GetVars”, “service”, “serviceclose", “”);


viliv p1 Device Keys

//-- keys for the viliv p1 (Enter,U,D,L,R and “diagonals”)on( keyPress “<LEFT>” ) { /* LEFT on the touch wheel */ }on( keyPress “<RIGHT>” ) { /* RIGHT on the touch wheel */ }on( keyPress “<UP>” ) { /* UP on the touch wheel */ }on( keyPress “<DOWN>” ) { /* DOWN on the touch wheel */ }on( keyPress “<ENTER>” ) { /* ENTER on the touch wheel */ }on( keyPress “1” ) { /* “North West” on the touch wheel */ }on( keyPress “3” ) { /* “North East” on the touch wheel */ }on( keyPress “7” ) { /* “South East” on the touch wheel */ }on( keyPress “9” ) { /* “South West” on the touch wheel */ }

//-- softkeys are NOT supported on the viliv p1retVal = fscommand2( “setSoftKeys”, “left”, “right” ); //-- won’t work!


viliv p1 Walkthroughs

Fish Tank

Navigation Sample

Flash Lite 1.1

8-way Navigation via touch wheel

“KeyCatchers” utilized

Flash Timeline based approach

Fire Flies

Performance Testing Sample

Flash Lite 1.1

Utilizes Moock’s FPS Speedometer

ActionScript based


viliv p1 Tips, Tricks, and Resources

Unofficial viliv p1 MDP (Mobile Device Profile)

Flash Lite 1.1 Authoring Guidelines (Korean)

loadMovie( “main”, 0 ); and “@eventshoot” label to quit out of content

Decompile existing .swf’s to investigate API and custom capabilities


Portable Game Console

Flash Implementation in Firmware Update 2.7+ Flash Player 6 (via custom SDK)

Embedded Browser Flash Player: HTML, SWF

ActionScript 1.0 Support

PSP (Sony Playstation Portable)

Device Limitations and ConstraintsScreen Size: 480 x 272 pixels (widescreen)

Processor:Comparable to Speed of a Pentium PC

Memory: Roughly 1.5 MB Available

File Size: Keep file size to 1.5 MB

Input and Navigation:Mouse (analog stick), Keys: 4-way (U,D,L,R), Text Input (via onscreen keyboard)


Network Connectivity: WiFi

Content Testing/Deployment: USB cable transfer, memory stick


PSP Flash 6 Features

Not Supported Clipboard - Text copy, cut and paste features

are not supported.

Video - The playback of video data such as H.263, Sorenson Video or Motion JPEG is not supported.

Context menu - Context menu display, control or the features that are normally included in them are not supported.

Printing - Print out feature is not supported.

Live Connect - The communication feature between JavaScript and Flash Player plug-ins is not supported.

FCS/FMS (Flash Media Server) - A connection to FCS/FMS, or features that requires it are not supported.

XMLSocket - Continuous connection and communication with the server using the XMLSocket feature is not supported.

Mouse - Analog stick and the Enter button work as one-button mouse. Pointer movement, click and drag & drop features are supported.

Keyboard - The directional keys work as the up, down, left, right cursor keys of a keyboard.

Character Input - Supports character input in the text boxes using the on-screen keyboard.

Font - Supports device font. The applicable scope of the font size and style are same as the Internet Browser.

Sound - Supports PCM, ADPCM and MP3 audio/sound playback for the speaker and headphone.

Supported


Mouse like functionality with analog stick and Enter key

Drag and Drop is supported

4 Way navigation is supported (Up, Down, Left, Right)

x Button acts as an Enter Key for buttons

∆ Button mapped to Full Screen toggle

○ Button exits the PSP WebBrowser

PSP Device Keys and Analog Stick

onMouseDown = function() { /* analog stick and ○ Button */ }onRelease = function() { /* analog stick ○ Button */ }

function myOnKeyDown(){ switch ( Key.getCode() ) { /* Codes: 38 is UP, 40 is DOWN, 37 is LEFT, 39 is RIGHT */ }}var myListener_obj = new Object();myListener.onKeyDown = myOnKeyDown;Key.addListener( myListener_obj );


Flash not preinstalled. Installed with update 2.7+ … users must enable it!

Flash Satay (embedded HTML tag)

<object type="application/x-shockwave-flash" data="c.swf" width=”480" height=”272"><param name="movie" value="content.swf" /></object>

<embed type="application/x-shockwave-flash” src=”c.swf" width=”480" height=”272"/>

Client Side versus Server Side detection methods

Method #1 - client-side//-- JavaScript detection codeif ( navigator.userAgent.indexOf('PlayStation Portable') != -1 ) {/* PSP! */}

Method #2 - server-side//-- PHP detection code UA: Mozilla/4.0 (PSP (PlayStation Portable); 2.00)if (strstr($_SERVER['HTTP_USER_AGENT'], 'PlayStation Portable')) {/* PSP! */}

Sample Detection Code

Flash Player Detection for the PSP


PSP Walkthrough and Demo

“Space Paddle”

Flash 6 for PSP

Development Time: 1 day

Flash Timeline driven

Utilizing ActionScript 2.0

Uses Event Sounds

Can be run as standalone SWF or within HTML

Game uses the analog stick for game play


Remember that file:/ is used to target assets, not file://

loadMovieNum( “file:/F/test.swf”, 1 );

Think with a Flash Lite 2 mentality (it’s not a Flash Player 6 Desktop Player!)

Some known issues: The size of the content should be within 1.5 MB

With external files, load completion must be confirmed

The device font has 5 sizes, same as the Internet Browser

Mouseout event may not occur in certain circumstances

Restrictions when deep nesting occurs with ActionScript

Frame rate between 18-24 fps

PSP Web Design (for developing HTML portal sites) http://jefte.net/psp/sony-psp-web-design-primer/

http://www.brothercake.com/site/resources/reference/psp/

PSP Tips, Tricks, and Resources


CDK’s are not available (yet) for: IRiver (U10, E10, Clix)

PSP

Physical USB cables can be tedious for Consumer Electronic Device development

Unofficial Mobile Device Templates Created and distributed by members of the

Flash Mobile Developer Community

Not certified, nor 100% tested

“Ad Hoc” (meaning temporary)

They save crucial development time

Downloads http://www.scottjanousek.com/max/

http://www.flash4mobile.de/

Always test iteratively on actual physical devices!

Testing Content


No support for.sis (Symbian installer files)

Deploy content as Standalone .swf’s or compressed (.zip) files

PSP Wi-Fi allows for Web based portals (HTTP + .html + .swf)

“Viral Marketing”

Distribute content directly to Aggregators Smashing Ideas

IRiver U10, Clix

Newgrounds PSP

IRiver U10, Clix, E10

Pre-installing content before device shipment Start relationship with Device Manufacturers and/or Content

Providers

Deploying Content


Current Trends Flash (Lite) User Interfaces

Games

Wallpapers, Screensavers and Themes

Other Applications

Upcoming Flash Lite enabled Consumer Devices

What are some potential future trends?

The Future of Flash on Consumer Electronics

viliv p2 (Flash Lite 2.0) Chumby (Flash Lite 2.0)


Summary

We covered the U10, E10, Clix, viliv p1, and PSP

Walked through a few examples of demo content

Talked about device capabilities, limitations, APIs

Remember these essentials when developing!

1. Processor Speed

2. Memory

3. Screen Size and Resolution

4. Input and Navigation

5. Content File Size

Testing and Deployment of Content

Discussed Current Trends and the Future of Flash on Consumer Electronics

Conclusion: Flash provides both a powerful platform and rich toolset for rapid content creation on Consumer Electronic Devices!


Adobe Mobile and Devices

http://www.adobe.com/mobile/

Mobile and Devices Forum

http://www.adobe.com/cfusion/webforums

flashdevices.net (Bill Perry)

http://www.flashdevices.net/

Resources

Flash Lite Groups

http://groups.yahoo.com/group/flashlite/

Adobe MaD User Group (Boston)

http://www.flashmobilegroup.org/

Additional Resources and URLs

http://www.scottjanousek.com/max/


Thanks for attending!

Feedback Survey

Check out the other Mobile sessions

Questions?

Q & A

Scott Janousek - Flash/Mobile Developer

Personal:[email protected]://www.scottjanousek.com/max/

My Contact Info:

FOR MORE INFO: http://www.flashmobilegroup.org/

(IRiver Content Creation Category!)


Technology

Adobe MAX 2006 - Creating Flash Content for Consumer Electronics