BFPUG Flash Lite 2.0 slides

Flash Lite 2.0 DISCLAIMER: Views are those of Scott Janousek and Alessandro Pace and not necessarily those of Adobe Incorporated “… a developer’s perspective”

Introductions
Welcome to the third Boston Flash Platform User Group (BFPUG) meeting!
Today’s Presenters:
Scott Janousek (Flash Architect/Flash Mobile Developer)
Alessandro Pace (Mobile Architect)
Organizations:

Attendance Sheet
There should be an attendance sheet floating around
This will be used ONLY to:
Contact you about future mobile events such as this one
Gauge your level of interest in mobile technology
Nothing else!
Feel free to add your name & info, or skip it

Agenda
Flash Mobile
Flash Lite 1.1 and 2.0
Flash Lite 2.0 Feature Set
Key
Video
Sound
MSO
XML
Drawing API
Text
and more …
2.0 Walkthroughs and Demos
Best Practices
What’s Next?
QA

It’s a mobile world after all …
Millions of mobile users and devices worldwide !

Quick Terminology for Mobile
1.1/FL 1.1 = Flash Lite 1.1
2.0/FL 2.0 = Flash Lite 2.0
FL = either Flash Lite 1.1 or 2.0
“ Softkeys” = pageup & pagedown
Joystick = direction button (UDLR)
Content = Flash Lite Apps/Games/etc
Asset = graphic, sound, video, etc
Device = cell phone, PDA, PMP, other “electronics”
Symbian OS = phone operating system
“ Desktop Flash” = Flash Player on a PC/MAC/etc
APAC = Asian Pacific Region

Future Splash, Flash Player 1.0 - Flash Player 8.5
Brief History of Flash Mobile
Pocket PC Flash (< 2003)
Flash Lite 1.0 (circa 2003, R.I.P?!)
Flash Lite 1.1 (circa 2004)
Flash Lite 2.0 (2005)
Flash Mobile “Products”
Flash Cast (Europe, Japan)
Flash for Devices
Cell phones! PDA’s (PPC)!
Leap Frog Leapster (Flash 5)
VILIV P1 (1.1)
Kodak Easy Share Camera (1.1)
iriver U10 (1.1) … XBOX 360, Song airline display, many more devices!
Flash Mobile Synopsis

Flash Lite Implementation
Standby
Wallpapers
Standalone
Browser
Others …
Flash Lite 1.0, 1.1, 2.0
Animation
Wallpaper (Huge sellers in Japan)
Ringtones (Huge sellers in Japan)
Applications and Games
Websites (40% i-Mode sites in Japan have Flash Lite content)
Flash Lite Capabilities

Flash Lite supported mobile devices
Flash Lite Devices:
http://www.macromedia.com/mobile/supported_devices/
Handset Manufacturers
Nokia Series 40 and 60
Sony Ericsson
Samsung
NEC
… more (LG, BenQ, Motorola? just announced at 3GSM)
Operators
NTT DoCoMo (Flash Cast)
KDDI
Vodafone KK
T-Mobile (News Express)

Some Flash Lite enabled phones

Sample Flash Lite Content
Content you can create with Flash Lite 1.1
2006, All content Copyright Scott Janousek & Alessandro Pace

Adobe Flash Lite Exchange (1.1 content)

Mobile Challenges
Mobile design and development is NOT desktop only “smaller”
Considerations:
Screen size (176x208, 320x208,320x240, etc)
Color Depth
Connectivity
Security
CPU / Memory
Usability
Bandwidth
No device uniformity - feature set divergence
Deployment, distribution, selling content
Aggregators, OTA, network operators, viral, other methods …
Mobile economies outside APAC
Europe … US?
There is exists a “diversity of mobile needs” throughout the world

Flash Mobile Emulator is part of Flash 8 Professional
Download Flash Lite 2 Update
Allows you to develop & test device content directly within Flash IDE!
Flash Mobile Emulator

Flash Lite 1.1 vs. Flash Lite 2.0
Flash Lite 1.1
Flash 4/5 “Hybrid”
Pre AS 1.0 Flash 4 ActionScript .. tellTarget, setProperty, etc.
Limited feature set
Performance
Flash Lite 2.0
Flash 7
ActionScript 2.0 support (partial)
More powerful feature set
Performance versus 1.1? No official benchmarks (yet)
2.0 is not perfect. Still in Beta!
Report all bugs to the Mobile Engineering Team at Adobe

Flash Lite 2.0 is BETA Software!
Flash Lite 2.0 is BETA Software!

XML
Device Video
Mobile Shared Objects
Drawing API
Text enhancements
Dynamic asset loading
New FSCommand2
Key Object
System.capabilities
OOP
Functions
… and more !
Flash Lite 2 ActionScript is NOT desktop ActionScript 2.0 !
Flash Lite 2 is partially AS 2.0 compliant
Think Mobile! Simplicity = K.I.S.S … Components just aren’t going to work!
IMPORTANT NOTES:

Flash Lite 2 Architecture

What Flash Lite 2.0 Doesn’t Do
Some Flash Lite Features NOT available in 2.0
No .FLV playback - only device video supported
Some AS 2 classes N/A - only partial AS 2 support
No XMLSocket - must still use “polling” methods
No communication between Flash Media Server
No Flash Remoting/AMF Support - use LoadVars, LoadVariables, XML object
No support for CSS with TextFields
Masking with device fonts
Bitmap smoothing while rendering at high quality
For more limitations … check the docs!
Mobile is a different ballgame. Not every desktop feature makes sense in it!
Adobe doesn’t want to “bloat” the Flash Lite player with complication (yet)
Overall, 2.0 is a step forward in the evolution of Flash Lite

Flash Lite 2.0 versus competitors
J2ME, Python, C++, BREW, others …
How does Flash Lite 2.0 compare?
Pros - powerful, low learning curve, media rich feature set, rapid development
Cons - not preinstalled on devices yet - still in beta
What is 1.1 good at?
Wallpapers, ringtones, games, etc.
What are people doing with Flash Lite 2.0?
Testing, proof of concepts, apps, games, demos, no one aggregating content yet
Speculation: FL 2.0 will be useful for?
business apps, games, custom UI’s
everything in 1.1 ecospace only “better”, easier to build
Media rich applications (images, video, sound)

Should I learn 1.1 … when 2.0 is out?
2.0 is out … 1.1 is dead, right?
Wishful thinking, but answer is No!
Why?
1.1 is just now getting preinstalled on devices
1.1 is a smaller footprint and can be installed on more devices
1.1 content is huge in APAC region (specifically Japan)
There are no preinstalled 2.0 devices at this time. Optimistic: 2006, Realistic 2007
There are monetary reasons for knowing 1.1. Developing, maintaining, fixing existing content = basic ecosystem for 1.1
1.1 is a great stepping stone to designing and developing for mobile - there is a lower entry barrier
2.0 is still “experimental”, meaning it is on the labs = Beta
1.1 is still important in the Flash Mobile Platform. Don’t dismiss it just yet!
Our recommendation … learn 1.1 and 2.0
Flash Lite Mobile Developer Certification = Flash Lite 1.1

Walkthrough and Demos

Obligatory Hello World Example
//-- hello world example
createTextField( "helloworld_txt", this.getNextHighestDepth(), 0, 0, 100, 10 );
helloworld_txt.text = "hello world!";
trace( helloworld_txt.text );
This could be achieved in 1.1 - using setProperties(), assign vars, etc … so nothing new …
However, being able to set text properties on the helloworld_txt dynamic instance IS new.
//-- access to textfield object and properties
helloworld_txt.textColor = 0x000000;
Easier to manage (dynamic) text instances now
size, textColor, textExtent, etc
We talk about FL 2.0 text enhancements later …

Key Object
Detecting device key events in 1.1 versus 2.0
In 1.1 … resorted to using the “keycatcher” buttons
FL 2.0 = we now have the Key object!
Key object, addListener, Key.UP, etc.
this.onKeyDown = function() { //-- key event handling }
Key.addListener( this );
SoftKeys (LSK/RSK) MUST be 2.0 compliant. UDLR - 1.1 via keycatcher
Assign Key object to:
_root
movieclip
listener object
use onEnterFrame and isDown() event

Device Key Examples
Uses directional keys (ULDR) to move character around
Vertical Shooter Type Game
FL 2.0 hitTest() method … 1.1 = custom conditional logic
Walkthrough - DEMO

Device Video in 2.0
3GP, 3GP2, MPEG-4 Video = Mobile “video standards”
1.1 - launch external player to play .3gp video files or “fake” video with .jpg’s
Device Video introduced in 2.0 … No native playback support (.FLV, etc)!
FL2 = Video Object (partial support)
Video.play(), Video.pause() are new commands
Embed video into swf or load video for playback
“ Bundled” Video - video_vid.play( “symbol://myvideo1_vid” );
NOTE: You must have QuickTime installed to test within Mobile Emulator!
video_vid.play( “myvideo.3gp” )
video_vid.play( “file://myvideo.3pg” );
video_vid.play( “http://www.macromedia.com/ocean.3pg” ); //-- ???
Video in under 10 minutes - DEMO

Device Video
Not all devices support codec: System.capabilities.videoMIMETypes[ ]
if ( System.capabilities.videoMIMETypes[ “video/3gpp” ] ) { //-- blah }
Video object in FL2:
video.play(), video.stop(), video.pause(), video.resume(), video.close()
Things that don’t work:
video.attachVideo(), video.clear(), video.deblocking(), video.height, video.width, video._visible, can’t adjust volume
External video – use rtsp:// protocol, carrier/firewall issues
Walkthrough - DEMO

Follow up on Device Video
Device video is a great new feature … but not perfect yet
FL 2.0 Video Limitations
No rotating or skewing of video
No synchronization with timeline
No compositing or blending video with other assets
No sound control for video playback
Simultaneous video playback = BAD
The old quality versus size dilemma
Can’t load massive video files (keep them small)
Loading external http:// bound videos is complicated: Operator support, open ports (RTSP), bandwidth
Looking forward to having streaming .flv sometime in the future
Flash Media Server + Flash Lite in FL 3.0? Who knows!

Sound in Flash Lite 2.0
Flash 1.1: device sounds, embedding sounds in .swfs and using loadMovie()
Flash Lite 2.0 = Sound Object
Native vs. Device Sound
Sound Bundler Tool (.fls files)
We now have access to:
loadSound(), attachSound(), new Sound(), setPan(), setTransform(), properties, etc
Device audio (MIDI, Mfi, MP3)
System.capabilities.AudioMIMETypes[ ] - array contains all supported
Device Audio Synchronization with animation: _forceframerate
No streaming with loaded sounds, ONLY event sounds
Challenges and limitations with Audio (no .mp3 native, no speech codec, matching sample rates)
Sound Walkthrough - DEMO

Build a simple MP3 player for a device in less than 10 minutes!
Uses Sound object
Supports stop, play, and replay functionality
Pulls ID3 tag data and displays info
MP3 Player Walkthrough - DEMO
Is a fully fledged iTunes possible? Not yet, possibly next release?
Simple MP3 Player

BREAK
BREAK
( Meet back here in 10 minutes )
Questions in the meantime?

Mobile Shared Objects (MSO)
With FL 1.1 had to use write2file.exe or other 3rd party software to load/save persistent data to device
FL 2.0 = Shared object … think “super” cookie
MSO = Flash Shared Objects with some differences
Limitations and distinctions:
MSO size
Other swf’s cannot access data
Must use a listener object to report back after saving data
MSO don’t work in your device “inbox” (read-only)
Can store basic Flash objects: Numbers, Strings, Boolean, Arrays, etc
Effective uses for MSO’s … what to store, when
Some devices support their own persistent data. iriver u10 has it’s own device API (Flash Lite 1.1).

MSO Example
Simple Color save example
Cycle through random colors and last hex color is saved to MSO
Code Code Walkthrough - DEMO
XD Team has a short tutorial up at their blog
MSO’s are good for saving preferences and similar data
Other uses? … trial based apps … username/password, stock quote data, high scores for a game, etc.

MSO Methods and Properties
Very similar to desktop Shared Objects
var myMSO:SharedObject = sharedObject.getLocal( “message” );
SharedObject.addListener( “message”, messageLoaded );
function messageLoaded( myMSO:SharedObject ):Void {
message_txt.text = ( myMSO.getSize != 0 ) ? myMSO.data.message : “”;
}
Other methods and properties:
.data (remove .data and you have “non-permanent” vars in MSO)
.getLocal(), .getSize(), .clear(), .flush(), .getMaxSize(), onStatus(), addListener(), removeListener()
Use delete statement to remove variables from an MSO:
delete myMSO.data.message;

C'est la Vie … tellTarget() .. finally, full path targeting
1.1 = tellTarget() type Flash 4 addressing of movieclip assets.
tellTarget( “/mymovie_mc” ) { //-- blah }
FL 2.0 = AS2 = full dot syntax compatibility!
_root.mymovie_mc.setHeader( “test”);
_root.mymovie_mc._alpha = 50;
_parent.mymovie_mc._alpha = 100;
this._alpha = 0;
Everything works as expected:
this. syntax, _root, _parent, _lockroot
You can now target button instances on the timeline
Remember that deep nesting of movieclips is still not so great an idea
Always keep in mind you are developing for mobile .. so every bit of memory counts
MovieClip object!

XML with Flash Lite 2.0
Very close to desktop API (consult API docs)
var myXML_xml:XML = new XML( “<test/>” );
trace( myXML_xml.childNodes[0].nodeName );
//-- etc, etc
Limitations
Memory - keep XML small
Want to keep XML “light” and “sparse”
External XML based webservices and data!
myXML_xml.load( “test.xml” );
XML versus using flat text files
If you are using just 1 value … does it make sense to store XML?
Anything you can store in XML, you could also store in text file!
Benefits for code reuse between 1.1 and 2.0 content?
Walkthrough - DEMO

SetInterval
//-- using setInterval to display some text 
var numbersAreBad_str:String = "4 8 15 16 23 42 ";
for ( var i:Number = 0; i < 3; i++ ) { numbersAreBad_str += numbersAreBad_str; }
var numbersID = setInterval( displayNumbers, 50 );
var count_num:Number = 0;
function displayNumbers():Void {
b adnumbers_txt.text = numbersAreBad_str.substring( 0,count_num );
i f ( ++count_num > numbersAreBad_str.length ) {
c ount_num = 0;
}
}
Use setInterval for:
delaying actions
simulating a “pause”
replacing a 1.1 frame based loop
Intervals below 50 milliseconds … Performance!
Walkthrough - DEMO
Essentially same as desktop Flash

Drawing API
Very close to Desktop Flash Drawing API
Not everything is supported
Limitations:
Performance (CPU), Memory (RAM)
Remember devices don’t handle gradients too well
Applications in FL 2.0
Dynamic charts
Custom UI
Games
More!
onEnterFrame() + Drawing API = ?
Peter Baird’s “Stock Chart Viewer”
Best undocumented feature of Flash Lite 2.0?
Walkthroughs - DEMO

Dynamic Asset Loading
Sound, graphics, video
FL 2.0 now has MovieClipLoader object. Previously 1.1 only had LoadMovie/LoadMovieNum
attachMovie() and createEmptyMovieClip now exists also. Previously only duplicateMovieClip and “static” holder clips.
Loading of .jpg, .gif, .png, .swf now possible. No longer restricted to .swf jpg embedding workaround
videoMimeType, audioMimeType and imageMimeType arrays
Walkthrough - DEMO

Loading Dynamic Images
In 1.1, loading images was done by embedding graphics/assets into external .swf’s and using loadMovie()
Flash Lite 2.0 now introduces image support for: .gif, .jpg, .png, .swf and supported device formats.
System.capabilities.imageMIMETypes[ ]
if ( System.capabilties.imageMIMETypes[ “image/png” ]) { //-- blah }
image_mc.loadMovie( “image1.jpg” );
Limitations:
1.1 - one asset load per frame
2.0 - You can now load up to 5 images per frame (with 10 open connections possible)
MovieClipLoader object is now available as well

Text enhancements
1.1 very restrictive in text usage: only static, dynamic, input text, scrolling text
FL 2.0 = TextField objects
var mytextField:textField = this.createTextField( “test_txt”, this.getHighestDepth(), 0, 0, 100, 20 );
2.0 introduces a version of TextFormat object (partial support)
Ability to dynamically change (some) font properties
Unicode Text Encoding = multi-lingual support = Globalization
Limitations:
“ Flash Type” not supported
Text formatting only supports: color, size, bold, italic
Device text cannot be masked, used as a mask, or rendered with transparency
No CSS support
Flash components: label, textarea, textinput not supported
Textfield and textformat objects partially supported
Partial support for HTML formatting and textformat properties
Other limitations …
Walkthrough - DEMO

FSCommand2
FSCommand is an API for Flash and the “outside world”
Allows you to make external calls from within Flash
fscommand( “FullScreen”, true );
FSCommand2 is a new API specifically for Flash Lite
status = fsCommand2( “setSoftKeys”, “left”, “right” ); //-- 1.1 and 2.0 command
Flash Lite 2.0 adds to existing fsCommand2 set with the following additions:
//-- extends the backlight for x seconds, so it stays on longer
status = fsCommand2( “ExtendBacklightDuration”, 45 );
//-- by default, focus rect is yellow as on desktop
_focusrect = true;
status = fsCommand2( “setFocusRectColor”, 255, 0, 0 );
You can also set more than two softkeys in Flash (up to 11)
See Flash Lite documentation for all commands available …
Not all fscommands are supported across all devices
Device capability matrix

Flash Lite 2.0 Error Codes
Even after rigorous device certification, errors can and do happen
New errors codes … they are different than 1.1 codes
//-- Flash Lite 2 Errors
1: Out of memory
2: Stack limit reached
3: Corrupt SWF data
4: ActionScript stuck
5: (there is no error code)
6: Bad image data
7: Bad sound data
8: Root movie unloaded
9: (there is no error code)
10: URL too long
11: Insufficient memory to decode image
12: Corrupt SVG data
13: Insufficient memory to load URL
14: Problem Loading URL (?)
Try and catch statements work … but what’s the point?
Errors non-graceful - errors fail through to device for display
Better error handling in next release of Flash Lite would be nice

Object Oriented Programming for Flash Lite 2.0
1.1 meant a Flash 4/5 hybrid model … tellTarget(), etc
2.0 = AS 2.0 objects
var myObject_obj:Object = new Object();
myObject_obj.x = 0;
var myObject2_obj:Object = { x: 0 }
Strict Data Typing now possible:
var myNumber_num:Number = 0; //-- must be a number
Procedure vs. Object Based programming
Just because you can … doesn’t mean you always should!
Object oriented programming in FL 2.0 (mention Talbot’s talk)
Hybrid Flash Lite 1.1/AS 2.0 approach?
Use Arrays instead of Objects for storage
Walkthrough - DEMO

“Ball Drop”
Size 11k
Click and to drop the the ball from a random coordinate
Tween class (AS 2.0) – using objects
Device vs. Desktop … “fluidity” … how well does this perform?
Doing this in 1.1 would involve using a few more “tricks”
Walkthrough

Flash Lite 2.0 “Best Practices”
Most 1.1 practices still valid
Download the Flash Lite 1.1 Reference Sheet
http://www.scottjanousek.com/downloads/fl_onesheet/fl_onesheet.pdf
Adobe Lab’s FL 2.0 Best Practices
http://labs.macromedia.com/wiki/index.php/Flash_Lite
“ Developing Flash Lite 2.0 applications” and “Getting Started with Flash Lite” documentation
Sample Content provided … other people’s work, blogs
“ Trial and Error” on devices

Flash Lite 2.0 - What’s in the “pipeline”?
Flash Lite 2.0 still in Beta … more testing/fixing to do?
More sophisticated content possible than previously in 1.1
Content that takes advantage of the new dynamic media loading features, video, sound, etc.
Applications that “remember” settings, preferences, etc. Subtle features to add more easily
New devices on horizon that need a custom FL 2.0 based UI?
Pushing more manufacturers to get Flash Lite 2.0 preinstalled onto devices
Thinking about Flash Lite 2.0 more as part of Flash Platform and not just an afterthought
Flash Lite 2.0 enabled phones and devices !?

NEIA Mobile Guide
Ongoing mobile project for NEIA students to get involved in …
Building using Flash Lite either 1.1 or 2.0
Student credit? … portfolio piece for students
Looking for content, graphics, video
Interested in helping to create this?
Contact Scott Janousek

Summary
Lots of 1.1 preinstalled phones to hitting the market !
FL 2.0 is a step in the right direction
Flash Lite 2.0 pre-installed devices = 2007?
Lots of deals for Adobe (BenQ/Motorola?/LG) at recent 3GSM conference
Is 2006 the year for (flash) mobile?
Nokia 6120 (1.1) Sony Ericsson W900i (1.1) Iriver u10

Thinking Ahead
What is the roadmap for Flash Lite?
Desktop Flash and Flash Lite convergence … 2007, 2008?
FL 3.0? - no announcement yet. Likely 2007-2008
MMI - man/machine interface
Mobile + Flex? … “not a product yet”
Flash Media Server and mobile media integration? (Japan only?)
Resituate Pocket PC Flash? Flash 7 based PPC Flash??
More sophisticated mobile ecosystem for Flash Lite

Q & A
Q & A
What are your questions?

Resources and Information
Flash 8 Professional - http://www.macromedia.com/flash8
Flash Mobile @ Adobe - http://mobile.macromedia.com/
Flash Mobile group - http://www.flashmobilegroup.org
Flash Mobile Forum - http:// www.flashmobileforum.org /
Yahoo Flash Mailing List (FlashLite@yahoogroups.com)
Flash 2 Mobile Update - http://labs.macromedia.com/
Scott Janousek - http:// www.scottjanousek.com/blog /
Alessandro Pace - http://www.biskero.org/
Flash Lite Exchange !
If you are a developer and want to get a free Flash Lite 2.0 player … go to the
labs site, or send an email to Bill Perry: bperry AT adobe.com

Where do I get started?
Adobe Flash 8 Professional
1.1 or 2.0 development?
Flash Lite 2.0 Update from Adobe Labs Site
http://labs.macromedia.com/
Flash Lite 2.0 Player from the Adobe Store ($10 … or free if you link to it from the labs site?)
Flash Lite 2.0 Authoring guidelines, prebundled documentation, sample code, and tutorials.
Flash Lite 2.0 capable phone
… check the supported devices page at: http://mobile.macromedia.com/
An idea and some time to implement it …

Thank you!
Slides will be available shortly!
Special thanks to:
NEIA (New England Institute of Art) - http://www.aii.edu/
BFPUG (Boston Flash Platform User Group) - http://www.bfpug.com/
Project-a-phone - http://www.project-a-phone.com/
Adobe Flash Mobile Group – http:// www.flashmobilegroup.org
Adobe Mobile Team - http://mobile.adobe.com/
For more questions, comments, etc, send email to:
s cott AT scottjanousek.com or biskero AT gmail.com

BFPUG Flash Lite 2.0 slides

by JustinTimb

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

BFPUG Flash Lite 2.0 slides Presentation Transcript