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

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

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. ☺

Platform Overview

CHUMBY
Front Back

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

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

What is the Chumby? (cont)
HARDWARE SOFTWARE/CONTENT CRAFTS
• HACK IT • DEVELOP • CUSTOMIZE
• MOD‐ify IT • CREATE • PERSONALIZE
• INNOVATE

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/

Flash, Widgets,
Capabilities

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

“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)

Chumby Control Panel

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

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!

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

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

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

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

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 \"mute\"
_setLCDMute = ASnative(5,20); // set the value of the LCD \"mute\"
_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 \"bent\" flag (0/1)

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

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

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

Widget Configurators
• Text input = a Chumby “chore”
• Widget Configurator is:
– Flash UI
– widget parameters (i.e. variables)
– “Customize” option within widgets in channels

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)

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’ ] );

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

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/

Tips & Tricks
• Chumby + Ming
• Chumby Easter Eggs
– Copy SWF to Bootable USB
– Remote Development via NFS
… more contained in the Chumby WIKI

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

• 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

• 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

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

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

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

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

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!

Thanks for
attending!