Developing Flash Lite Widgets 
  for the Chumby Platform
          Scott Janousek
  http://www.scottjanousek.com/blog/
Seminar Agenda

•   Introductions
•   Platform Overview
•   Flash, Widgets, Capabilities
•   Walkthrough(s)
•   Wrap Up & QA 
Introductions
About Me
•   Flash, Flash Lite, and recently: Flex & Air
•   Community, blogging, training
•   Coauthor, speaker, enthusia...
Non‐PC Flash Portfolio
• Mobile (Partial)   • Chumby Widgets


                        Personal Blog RSS Feed, BlackJack, ...
I ♥ Gadgets/Devices

• Suffering from mild “Gadget Addiction”
• iRiver, Nokia, LG, PSP, DS Lite, Chumby, & more
• A few de...
Platform Overview
CHUMBY

Front            Back
Hardware Specifications
•   350 MHz ARM Processor
•   64 MB SDRAM
•   3.5” LCD color touchscreen display
•   2 external US...
What is the Chumby?
•   “Glance‐able” Consumer Electronic Device
•   Linux Based
•   Open Platform
•   Non‐Portable*
•   W...
What is the Chumby? (cont)
HARDWARE         SOFTWARE/CONTENT   CRAFTS
  • HACK IT      • DEVELOP            • CUSTOMIZE
  ...
How/Where can I get one?
• Currently shipping only in U.S.
• Not a global product (yet)
• Purchase ($179.95 USD)
  – http:...
Flash, Widgets, 
  Capabilities
Chumby Widgets
• Flash Lite 3 SWFs
• Delivered OTA (over‐the‐air) from Chumby Network
• Widget Configuration SWFs
  – Cust...
“Channels”
•
• Channel is simply a container for widget(s)
         15 seconds   15 seconds      5 seconds   2 minutes


 ...
Chumby Control Panel
User Input
• Touch Screen
   – 320 x 240 3.5” color display
• Accelerometer
   – Force and movement in X,Y,Z
• Toggle/Bend...
Flash Lite 3 on Chumby
• Based on Flash 8 Player
• Performance improvements over Flash Lite 2.x
• Integrated Development E...
Flash Development Tools
• Commercial
 – Adobe Flash CS3 (& Device Central)
   • http://www.adobe.com/products/creativesuit...
Flash CS3 Target Publish Settings
Flash 8 and ActionScript 2       Flash Lite 3 and ActionScript 2
• Easy, no updates requ...
fscommand2 API
Command                        Return Value     Command                Return Value
FullScreen             ...
Properties
Command           Return Value
_compoundSound         1
_capEmail              0
_capLoadData           1
_capM...
Sensor API
Sensor          ActionScript
Touchscreen     _rawX = ASnative(5,10); // get the last raw touchscreen X coordina...
Widget Security
• Flash Lite 3 sandbox
  – Based on Flash 8 Security
  – Crossdomain.xml
  – Publish Settings
     • Netwo...
Working with Audio
• Supported format:
  – MP3
• Usage:
  – Embedded on timeline
  – Attaching from library
  – Loading fr...
Working with Flash Video
• Flash Lite 3 supports native Flash Video
• Utilize custom objects:
   – Video, NetStream, NetCo...
Widget Configurators
• Text input = a Chumby “chore”
• Widget Configurator is:
  – Flash UI
  – widget parameters (i.e. va...
Working with Data
• loadVars, loadVariables
• loadMovie
• XML
• XML Socket
• SWX 
   – www.swxformat.org
• Persistent Data...
Chumby Variables
• Think of as Flashvars, or “environmental” variables (as in UNIX)
Widget Parameters
_chumby_chumby_name ...
Some Best Practices
•   _lockroot, or use non absolute path names
•   Enlarge hit areas of button states
•   Use LARGE (an...
My Development Resources
• Chumby wireframe templates (PDF)
  – http://www.scottjanousek.com/blog/2007/11/14/chumby‐wirefr...
Tips & Tricks
• Chumby + Ming
• Chumby Easter Eggs
  – Copy SWF to Bootable USB
  – Remote Development via NFS
  … more co...
Walkthrough(s)
Developing Widgets (Examples)

• RSS Reader (News Reader)
• Video Clock
• Accelerometer
Testing a widget
Off Device                     On Device
• Virtual Chumby               • USB Stick
   – www.chumby.com/m...
• Uploading a Widget
STEPS
1.    Create your widget
2.    Create a 80 x 60 .jpg icon
3.    Login into chumby.com
4.    Got...
• Deploying a widget
STEPS
1. Upload Widget 
   (SWF)
2. Set Widget to 
   “Public” on Widget
   Upload Screen
3. Widget b...
Chumby “Ecosystem”
Thoughts on the ecosystem thus far:

CHUMBY                VIA CONTENT                3RD PARTY HW & Cr...
Chumby Mods & Hacks
• Some Hacks
  – “Chum‐bot”
  – “Chum‐roomba”
  – ER Photo Battery Hack*
• …possibilities are seemingl...
Wrap Up
Announcements
• Global
  – Adobe Devnet Article on Chumby
  – frame27.blogspot.com
     • Chumby games to review? Send’em.
Discussion/Q & A
“Food for thought”
  – Future versions of Flash Lite pushed down OTA 
    (Flash Lite 4???)
  – Flash Cas...
My Contact Info
• MY CHUMBY HANDLE
  – scotttjanousek
• EMAIL
  – scott AT scottjanousek DOT com
• LINKS
  –   www.scottja...
URLS
SOME USEFUL RESOURCES
   –   www.chumby.com
   –   wiki.chumby.com
   –   forum.chumby.com
   –   blog.chumby.com
   ...
Thanks for 
attending!
Upcoming SlideShare
Loading in …5
×

Developing Flash Lite Widgets For The Chumby Platform

16,637 views

Published on

“Learn how to leverage your existing Flash skills to create Flash Lite content such as glanceable info type applications, “ultra” casual games, and much more for this uniquely fun; yet surprisingly powerful; non-PC device platform.

In addition to an introduction to the Chumby platform, we’ll discuss many Flash Lite widget development topics unique to the device; such as: various user input methods, remote data exchange methods, security, multimedia capabilities, API, the Chumby environment & framework; and time permitting; much more.

For good measure, we’ll walkthrough the creation of a simple Chumby widget from initial concept; all the way through design, development, testing, and eventual deployment to the Chumby network. Best practices and some tips & tricks will be discussed.

Depending on time, a Q&A session will follow this seminar to address some of your inner most “chumb-o-sities” (sorry, I mean *curi-o-sities*!).”

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,637
On SlideShare
0
From Embeds
0
Number of Embeds
221
Actions
Shares
0
Downloads
6
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Developing Flash Lite Widgets For The Chumby Platform

  1. 1. Developing Flash Lite Widgets  for the Chumby Platform Scott Janousek http://www.scottjanousek.com/blog/
  2. 2. Seminar Agenda • Introductions • Platform Overview • Flash, Widgets, Capabilities • Walkthrough(s) • Wrap Up & QA 
  3. 3. Introductions
  4. 4. About Me • Flash, Flash Lite, and recently: Flex & Air • Community, blogging, training • Coauthor, speaker, enthusiast, evangelist • Flash Lite 1.1, 2.x, 3.0 • Company • Bio: http://www.scottjanousek.com/About.html • Gadget Lover • Psyched about the potentials for Chumby
  5. 5. Non‐PC Flash Portfolio • Mobile (Partial) • Chumby Widgets Personal Blog RSS Feed, BlackJack, Hot Sauce Throwdown (Coming Soon) Kaboom, Chum‐ilities, Chumby Pong Ski Report (Soon), Snake Game, iCanHasCheezBurger
  6. 6. I ♥ Gadgets/Devices • Suffering from mild “Gadget Addiction” • iRiver, Nokia, LG, PSP, DS Lite, Chumby, & more • A few devices* I use on regular basis … * Not to scale. ☺
  7. 7. Platform Overview
  8. 8. CHUMBY Front Back
  9. 9. Hardware Specifications • 350 MHz ARM Processor • 64 MB SDRAM • 3.5” LCD color touchscreen display • 2 external USB 2.0 full speed ports • Stereo 2W Speakers • Headphone output • Accelerometer (“Motion/Force Sensor”) • AC Powered
  10. 10. What is the Chumby? • “Glance‐able” Consumer Electronic Device • Linux Based • Open Platform • Non‐Portable* • Wi‐Fi enabled* • chumby.com portal • Runs “widgets” (aka Flash Lite SWFs) • Flash Enabled ‐ UI and Widgets • Your personalized desk buddy * As shipped – may be modified through hacks and mods
  11. 11. What is the Chumby? (cont) HARDWARE SOFTWARE/CONTENT CRAFTS • HACK IT • DEVELOP • CUSTOMIZE • MOD‐ify IT • CREATE • PERSONALIZE • INNOVATE
  12. 12. How/Where can I get one? • Currently shipping only in U.S. • Not a global product (yet) • Purchase ($179.95 USD) – http://store.chumby.com/
  13. 13. Flash, Widgets,  Capabilities
  14. 14. Chumby Widgets • Flash Lite 3 SWFs • Delivered OTA (over‐the‐air) from Chumby Network • Widget Configuration SWFs – Customize via web • Share widgets via: – Portal Categories – Send directly from Chumby via your “Chum‐lists” • Widget SWFs in “channels” (think T.V.) • Widget Duration – 1 second minimum – Can be customized by user
  15. 15. “Channels” • • Channel is simply a container for widget(s) 15 seconds 15 seconds 5 seconds 2 minutes 5 Widgets in channel “foobar” TIME • 1 or more channels for each chumby • Each widget has a defined playtime internal – one second to FOREVER (user must enable, later)
  16. 16. Chumby Control Panel
  17. 17. User Input • Touch Screen – 320 x 240 3.5” color display • Accelerometer – Force and movement in X,Y,Z • Toggle/Bend Switch – Used for UI/Menu panel navigation • Voice (Microphone support ( through Flash = not yet) ) • Hacks and “mods” also possible
  18. 18. Flash Lite 3 on Chumby • Based on Flash 8 Player • Performance improvements over Flash Lite 2.x • Integrated Development Environment                       – Adobe Flash CS3 + Adobe Device Central • .FLV (“Flash Video”) support • Flash Player updated OTA (over the Air) • Chumby APIs • Flash Lite Development Practices still apply!
  19. 19. Flash Development Tools • Commercial – Adobe Flash CS3 (& Device Central) • http://www.adobe.com/products/creativesuite/ • Open Source –MING • http://ming.sourceforge.net –MTASC • http://osflash.org/mtasc • http://www.mtasc.org
  20. 20. Flash CS3 Target Publish Settings Flash 8 and ActionScript 2 Flash Lite 3 and ActionScript 2 • Easy, no updates required • Unsupported features of  • Need to be aware of  Flash 8 will be disabled constraints of Flash Lite!  • Utilize Device Central • Code Hinting • FL3 Updates needed
  21. 21. fscommand2 API Command Return Value Command Return Value FullScreen ‐1 GetVolumeLevel Number GetDeviceID Unique ID getFreePlayerMemory Number GetNetworkConnectionName ‐1 GetTotalPlayerMemory 12,542 KB GetNetworkConnectionStatus 1 ResetSoftKeys ‐1 GetNetworkGeneration ‐1 GetSoftKeyLocation ‐1 GetNetworkRequestStatus 0 Quit 0 GetNetworkStatus ‐1 getPowerSource 1 GetPlatform “Linux 2.6.16” SetInputTextType 0 GetBatteryLevel 228 SetSoftKeys ‐1 GetMaxBattery 100 StartVibrate ‐1 getMaxVolumeLevel 100 StopVibrate 0 GetSignalLevel Number GetLanguage ‐1 GetLocalLongDate ‐1 GetTimeHours Number GetLocalShortDate ‐1 GetTimeMinutes Number GetLocalTime ‐1 GetTimeSeconds Number GetTimeZoneOffset 0 GetDateDay Number GetDateMonth Number GetDateYear Number GetDateWeekDay Number
  22. 22. Properties Command Return Value _compoundSound 1 _capEmail 0 _capLoadData 1 _capMFI 0 _capMIDI 0 _capSMAF 0 _capSMS 0 _capStreamSound 1 _cap4WayKeyAS 1 $version FL 8,1,52,0
  23. 23. Sensor API Sensor ActionScript Touchscreen _rawX = ASnative(5,10); // get the last raw touchscreen X coordinate  _rawY = ASnative(5,11); // get the last raw touchscreen Y coordinate Display _getLCDMute = ASnative(5,19); // get the value of the LCD quot;mutequot;  _setLCDMute = ASnative(5,20); // set the value of the LCD quot;mutequot;  _setLCDMute(0); // full on  _setLCDMute(1); // dim  _setLCDMute(2); // full off  Speaker _getSpeakerMute = ASnative(5,17);  _setSpeakerMute = ASnative(5,18);  _setSpeakerMute(1);  DC Power _dcPower = ASnative(5,16);  Accelerometer _accelerometer = ['ASnative'](5,60);  version = _accelerometer(0);  timestamp = _accelerometer(1);  currentX = _accelerometer(2);  currentY = _accelerometer(3);  currentZ = _accelerometer(4);  avgX = _accelerometer(5);  avgY = _accelerometer(6);  avgZ = _accelerometer(7);  impactX = _accelerometer(8);  impactY = _accelerometer(9);  impactZ = _accelerometer(10);  impactTime = _accelerometer(11);  impactHints = _accelerometer(12); Bend Sensor _bent = ASnative(5,25); // get the quot;bentquot; flag (0/1)
  24. 24. Widget Security • Flash Lite 3 sandbox – Based on Flash 8 Security – Crossdomain.xml – Publish Settings • Network Access Only • Proxying data – Setup your own server to connect external one – Communicate between Widget and your server • For more info – Adobe Flash 8 Security Whitepaper • http://www.adobe.com/devnet/flashplayer/articles/flash_player_8_security.pdf
  25. 25. Working with Audio • Supported format: – MP3 • Usage: – Embedded on timeline – Attaching from library – Loading from remote server (not streaming) • Toggle – Consider having a toggle – Default to disabled sound state
  26. 26. Working with Flash Video • Flash Lite 3 supports native Flash Video • Utilize custom objects: – Video, NetStream, NetConnection • Suggested Settings: – 12 FPS – Video Data Rate: 220  – Audio 32kbps (mono) or less – Dimensions: 320x240 or smaller • Avoid FLV Media Components (as with mobile devices) • Playback Methods Embedded Progressive Streaming Avoid SWF “Bloat” Recommended Recommended
  27. 27. Widget Configurators • Text input = a Chumby “chore” • Widget Configurator is: – Flash UI – widget parameters (i.e. variables) – “Customize” option within widgets in channels
  28. 28. Working with Data • loadVars, loadVariables • loadMovie • XML • XML Socket • SWX  – www.swxformat.org • Persistent Data – Shared Objects – Widget Configuration Variables – External Database (PHP + MYSQL, etc)
  29. 29. Chumby Variables • Think of as Flashvars, or “environmental” variables (as in UNIX) Widget Parameters _chumby_chumby_name Name assigned to Chumby by owner (Ex: “Sue”) _chumby_widget_instance_id Unique GUID assigned to each widget instance (Ex: 12121212‐1212‐1212‐1212‐121212121212) _chumby_user_name Chumby owner username (Example: “scott”) Widget Configuration Variables this[ ‘foobar’ ] Widgets that have a desktop configuration can set  custom variables which each widget instance. Usage: trace( this[ ‘_chumby_chumby_name’] ); trace( this[ ‘foobar’ ] );
  30. 30. Some Best Practices • _lockroot, or use non absolute path names • Enlarge hit areas of button states • Use LARGE (and readable) TEXT • Implement Co‐operative mode • Keep file size small (< 200k) • Avoid lengthy preloaders • Device Central Chumby Profile • Sound should always be optional • Toggled version textfield for each Widget (Ex: v1.20) • More soon … contained in: – Chumby “1‐sheet” PDF reference ‐ Coming Soon
  31. 31. My Development Resources • Chumby wireframe templates (PDF) – http://www.scottjanousek.com/blog/2007/11/14/chumby‐wireframe‐templates‐pdf/ • Chumby Adobe Device Central Profile – http://www.scottjanousek.com/blog/2007/11/22/chumby‐device‐profile‐for‐adobe‐device‐ central‐cs3/
  32. 32. Tips & Tricks • Chumby + Ming • Chumby Easter Eggs – Copy SWF to Bootable USB – Remote Development via NFS … more contained in the Chumby WIKI
  33. 33. Walkthrough(s)
  34. 34. Developing Widgets (Examples) • RSS Reader (News Reader) • Video Clock • Accelerometer
  35. 35. Testing a widget Off Device On Device • Virtual Chumby • USB Stick – www.chumby.com/mychumby – Bootable USB Stick with SWF • NFS • Adobe Device Central – Setup mounted drive – My Chumby Profile • Upload to Chumby Portal – Not Certified! – Single channel – Single widget – Manually Refresh Widget • Send to Friend – “Chumby List” • Send to a 2nd Chumby – 1 for Testing – 1 for Use
  36. 36. • Uploading a Widget STEPS 1. Create your widget 2. Create a 80 x 60 .jpg icon 3. Login into chumby.com 4. Goto Widgets Tab 5. Enter required textfields 6. Set Widget duration 7. Upload Widget (SWF) 8. Upload icon (.JPG) 9. Upload Widget Config (SWF) 10. Set to private (testing) or  public (accessible to all) 11. Virtual Chumby Compatible? 12.   Click UPLOAD WIDGET button
  37. 37. • Deploying a widget STEPS 1. Upload Widget  (SWF) 2. Set Widget to  “Public” on Widget Upload Screen 3. Widget becomes  public ONLY after  being reviewed 4. Once public, users  can add the widget  to channel(s) 5. Users can rate  content once live 
  38. 38. Chumby “Ecosystem” Thoughts on the ecosystem thus far: CHUMBY VIA CONTENT 3RD PARTY HW & Crafts – Inter‐dispersed  – Viral Games – Add‐on  Ad’s within  – eCards components        channels – Custom Data/API (FM Radio, etc) – Device  – Highly Personalized  – Custom Mods? Personalization Content – Arts & Crafts – – Accessories               As a Platform  (charms, etc) Marketing Tool for  existing content – Subscription Based
  39. 39. Chumby Mods & Hacks • Some Hacks – “Chum‐bot” – “Chum‐roomba” – ER Photo Battery Hack* • …possibilities are seemingly endless! Bunnie’s Chum‐bot Chum‐roomba Battery Hack
  40. 40. Wrap Up
  41. 41. Announcements • Global – Adobe Devnet Article on Chumby – frame27.blogspot.com • Chumby games to review? Send’em.
  42. 42. Discussion/Q & A “Food for thought” – Future versions of Flash Lite pushed down OTA  (Flash Lite 4???) – Flash Cast‐like product? (“Distro system”?) – Flash Home‐ like product? (“Dashboards”?) – Adobe AIR apps? (in possible future Chumby’s?) – Intercommunication between chumby’s – 3rd Party Hardware? (… like FM receiver) … your ideas?
  43. 43. My Contact Info • MY CHUMBY HANDLE – scotttjanousek • EMAIL – scott AT scottjanousek DOT com • LINKS – www.scottjanousek.com/blog/ – scottjanousek.mobi – www.flashmobilebook.com – frame27.blogspot.com – www.hookenmobile.com – chumby.scottjanousek.com
  44. 44. URLS SOME USEFUL RESOURCES – www.chumby.com – wiki.chumby.com – forum.chumby.com – blog.chumby.com – www.adobe.com/devnet/devices/chumby.html – chumbylover.wordpress.com – www.flashmobilegroup.org – www.flashmobilebook.com – frame27.blogspot.com – www.flickr.com/groups/chumbychums – www.flickr.com/photos/11410414@N06 – www.scottjanousek.com/blog/2007/11/14/chumby‐wireframe‐templates‐pdf/ – www.scottjanousek.com/blog/2007/11/22/chumby‐device‐profile‐for‐adobe‐device‐ central‐cs3/ • SEARCH FLICKR, YOUTUBE, GOGGLE, ETC FOR MORE … – Fortunately, “chumby” is fairly unique keyword!
  45. 45. Thanks for  attending!

×