Developing Flash Lite Widgets For The Chumby Platform
-
Upload
scott-janousek -
Category
Technology
-
view
109 -
download
0
description
Transcript of Developing Flash Lite Widgets For The Chumby Platform
![Page 1: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/1.jpg)
Developing Flash Lite Widgets for the Chumby Platform
Scott Janousekhttp://www.scottjanousek.com/blog/
![Page 2: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/2.jpg)
Seminar Agenda
• Introductions• Platform Overview
• Flash, Widgets, Capabilities
• Walkthrough(s)
• Wrap Up & QA
![Page 3: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/3.jpg)
Introductions
![Page 4: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/4.jpg)
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
![Page 5: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/5.jpg)
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
![Page 6: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/6.jpg)
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. ☺
![Page 7: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/7.jpg)
Platform Overview
![Page 8: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/8.jpg)
CHUMBY
Front Back
![Page 9: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/9.jpg)
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
![Page 10: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/10.jpg)
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
![Page 11: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/11.jpg)
What is the Chumby? (cont)
HARDWARE SOFTWARE/CONTENT• DEVELOP
• CREATE
• INNOVATE
CRAFTS
• HACK IT
• MOD‐ify IT
• CUSTOMIZE
• PERSONALIZE
![Page 12: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/12.jpg)
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/
![Page 13: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/13.jpg)
Flash, Widgets, Capabilities
![Page 14: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/14.jpg)
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
![Page 15: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/15.jpg)
“Channels”•• Channel is simply a container for widget(s)
• 1 or more channels for each chumby
• Each widget has a defined playtime internal– one second to FOREVER (user must enable, later)
TIME
5 Widgets in channel “foobar”
15 seconds 15 seconds 5 seconds 2 minutes
![Page 16: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/16.jpg)
Chumby Control Panel
![Page 17: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/17.jpg)
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
![Page 18: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/18.jpg)
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!
![Page 19: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/19.jpg)
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
![Page 20: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/20.jpg)
Flash CS3 Target Publish SettingsFlash 8 and ActionScript 2
• Easy, no updates required
• Need to be aware of constraints of Flash Lite!
Flash Lite 3 and ActionScript 2
• Unsupported features of Flash 8 will be disabled
• Utilize Device Central
• Code Hinting
• FL3 Updates needed
![Page 21: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/21.jpg)
fscommand2 APICommand Return Value
FullScreen ‐1
GetDeviceID Unique ID
GetNetworkConnectionName ‐1
GetNetworkConnectionStatus 1
GetNetworkGeneration ‐1
GetNetworkRequestStatus 0
GetNetworkStatus ‐1
GetPlatform “Linux 2.6.16”
GetBatteryLevel 228
GetMaxBattery 100
getMaxVolumeLevel 100
GetSignalLevel Number
GetLocalLongDate ‐1
GetLocalShortDate ‐1
GetLocalTime ‐1
GetTimeZoneOffset 0
Command Return Value
GetVolumeLevel Number
getFreePlayerMemory Number
GetTotalPlayerMemory 12,542 KB
ResetSoftKeys ‐1
GetSoftKeyLocation ‐1
Quit 0
getPowerSource 1
SetInputTextType 0
SetSoftKeys ‐1
StartVibrate ‐1
StopVibrate 0
GetLanguage ‐1
GetTimeHours Number
GetTimeMinutes Number
GetTimeSeconds Number
GetDateDay Number
GetDateMonth Number
GetDateYear Number
GetDateWeekDay Number
![Page 22: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/22.jpg)
PropertiesCommand 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
![Page 23: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/23.jpg)
Sensor APISensor 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)
![Page 24: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/24.jpg)
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
![Page 25: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/25.jpg)
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
![Page 26: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/26.jpg)
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
![Page 27: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/27.jpg)
Widget Configurators
• Text input = a Chumby “chore”
• Widget Configurator is:– Flash UI– widget parameters (i.e. variables)
– “Customize” option within widgets in channels
![Page 28: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/28.jpg)
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)
![Page 29: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/29.jpg)
Chumby Variables
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.
• Think of as Flashvars, or “environmental” variables (as in UNIX)
Usage:trace( this[ ‘_chumby_chumby_name’] );
trace( this[ ‘foobar’ ] );
![Page 30: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/30.jpg)
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
![Page 31: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/31.jpg)
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/
![Page 32: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/32.jpg)
Tips & Tricks
• Chumby + Ming
• Chumby Easter Eggs– Copy SWF to Bootable USB
– Remote Development via NFS
… more contained in the Chumby WIKI
![Page 33: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/33.jpg)
Walkthrough(s)
![Page 34: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/34.jpg)
Developing Widgets (Examples)
• RSS Reader (News Reader)• Video Clock• Accelerometer
![Page 35: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/35.jpg)
Testing a widget
Off Device
• Virtual Chumby– www.chumby.com/mychumby
• Adobe Device Central– My Chumby Profile
– Not Certified!
On Device• USB Stick
– Bootable USB Stick with SWF
• NFS– Setup mounted drive
• Upload to Chumby Portal– Single channel– Single widget– Manually Refresh Widget
• Send to Friend– “Chumby List”
• Send to a 2nd Chumby– 1 for Testing– 1 for Use
![Page 36: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/36.jpg)
STEPS
• Uploading a Widget
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 duration7. 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
![Page 37: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/37.jpg)
STEPS
• Deploying a widget
1. Upload Widget (SWF)
2. Set Widget to “Public” on WidgetUpload 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
![Page 38: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/38.jpg)
Chumby “Ecosystem”
CHUMBY
– Inter‐dispersed Ad’s within channels
– Device Personalization
– Accessories (charms, etc)
VIA CONTENT– Viral Games
– eCards
– Custom Data/API
– Highly Personalized Content
– As a Platform Marketing Tool for existing content
– Subscription Based
3RD PARTY HW & Crafts
– Add‐on components (FM Radio, etc)
– Custom Mods?
– Arts & Crafts
Thoughts on the ecosystem thus far:
![Page 39: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/39.jpg)
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
![Page 40: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/40.jpg)
Wrap Up
![Page 41: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/41.jpg)
Announcements
• Global– Adobe Devnet Article on Chumby
– frame27.blogspot.com• Chumby games to review? Send’em.
![Page 42: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/42.jpg)
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?
![Page 43: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/43.jpg)
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
![Page 44: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/44.jpg)
URLSSOME 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!
![Page 45: Developing Flash Lite Widgets For The Chumby Platform](https://reader033.fdocuments.in/reader033/viewer/2022051314/54c8a9964a795999668b45b1/html5/thumbnails/45.jpg)
Thanks for attending!