Adobe MAX 2006 - Creating Flash Content for Consumer Electronics

MAX 2006 Beyond Boundaries Scott 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: IR iver 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

Evaluate available Flash capabilities for your target devices
Note: Capabilities subject to change as firmware updates occur on devices. Device Capabilities Matrix P1 External Movies (.swf) Yes Yes Yes Yes Yes Image Loading Yes (.jpg) Yes (.jpg) Yes (.jpg) Yes (,jpg) Yes (.jpg) Sound Type event event event event event, streaming Audio Formats ADPCM, MP3 ADPCM, MP3 ADPCM, MP3 ADPCM, MP3 PCM, 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 No Yes (.txt, .xml) Persistent Data Storage Yes (custom) Only Flash Lite 1.1 Only Flash Lite 1.1 Yes (custom) Yes (Shared Objects) Network Access No No No No Yes (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 Standalone Standalone, Themes Standalone Browser (.HTML, .swf)

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: All results are approximate and do no reflect performance under all possible conditions. Performance Benchmarks P1 NOTE: Flash Lite Benchmarks generated by: http://www.flashmobileforum.org/capabilities/ NOTE: PSP Flash Benchmarks generated by FPS Speedometer Flash framerate incloop randomnum substring primenum switchtime vectortime bitmaptime FL 1.1 14 fps 0.00 0.29 0.00 2.05 0.00 4700 (70% IDE) 3430 (96% IDE) FL 1.1 15 fps 0.47 0.00 0.3 3.48 0.00 5300 (62% IDE) 3190 (104% IDE) FL 2.0 15 fps 0.63 0.00 0.34 4.37 0.00 4290 (77% IDE) 3240 (102% IDE) FL 2.0 15 fps 0.64 0.00 0.34 4.36 0.00 3230 (102% IDE) 3230 (102% IDE) 6 18-24 fps N/A N/A N/A N/A N/A N/A N/A

Processor Speed
Memory
Screen Size
Input and Navigation
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 Constraints Screen 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 U10 status = fscommand2(“GetPersistentData”, “/:MyVarValue1”); //-- get # of images status = fscommand2(“Get”, “Picture”, “Total”, “/:totalimages”); //-- get image path status = fscommand2(“Get”, “Picture”, “Path”, totalimages, “/:imagepath”); //-- file paths on the U10 loadVariables(“file://system/t.txt”); loadMovieNum(“file://Photo/t.jpg”,1); //-- file paths on the Clix, E10 loadMovieNum(“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 */ }

Alien Invasion
IRiver Clix game
Development Time: 3 days
Flash Lite 2.0
ActionScript 2.0
OOP (Object based style)
IRiver U10 and Clix Code Walkthroughs
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 Lite 2.0
ActionScript 2.0 Support
Supports UI Themes and Standalone Flash Content
IRiver E10 Device Limitations and Constraints Screen 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) Target FPS: 15-20 (depending on content) Network Connectivity: None Content Testing/Deployment: USB cable transfer (or use emulator)

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 Lite 1.1
Custom API to access low level device features (MMI)
viliv p1 Device Limitations and Constraints Screen 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 Target FPS: 15-20 (depending on content) Network Connectivity: None Content Testing/Deployment: USB cable transfer (or use emulator) 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 p1 retVal = 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 Constraints Screen 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) Target FPS: 18-24 (depending on content) 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 code
if ( 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!
Processor Speed
Memory
Screen Size and Resolution
Input and Navigation
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_address] http://www.scottjanousek.com/max/
My Contact Info:
FOR MORE INFO: http://www.flashmobilegroup.org/ (IRiver Content Creation Category!)

Adobe MAX 2006 - Creating Flash Content for Consumer Electronics

by guestd82c1e on Sep 27, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 5

Statistics

Adobe MAX 2006 - Creating Flash Content for Consumer Electronics — Presentation Transcript