Adobe MAX 2006 - Creating Flash Content for Consumer Electronics - Presentation Transcript
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!
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)
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 Implementation
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 Implementation
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!
1 comments
Comments 1 - 1 of 1 previous next Post a comment