Cool Flash Lite™ Wallpaper and S t tScreen saver content

Scott JanousekScott JanousekFlash Mobile Developer

Coauthor, Foundation Flash Applications for Mobile Deviceshttp://www.flashmobilebook.comp //

About MeAbout Me• General Info

– From Boston, Massachusetts, USA, ,– Me = Developer first, Designer second– Working with desktop Flash for six years– Flash Mobile Blogg

• http://www.scottjanousek.com/blog/

• Mobile• Mobile– Started with Flash Lite 1.1 in 2004– Developing with Flash Lite under 1.1, 2.0, 2.1

l h i i i– Flash Lite Training Instructor– Coauthor

• Foundation Flash Applications for Mobile Devices

I M bil d D i– I ♥Mobile and Devices

Wallpaper and Screen saver creation

Animated GifsBit l

Wallpaper and Screen saver creation

SVG Symbian C++/J2ME• Bitmap only• No interactivity• Adobe Photoshop, 

others

• Vector support

• Limited Interactivity

• Adobe Illustrator, 

• Low level graphics

• High Interactivity

• Nokia Tools, othersothersothers

Flash Lite ™• Bitmap and Vector support

• Interactivity  (via ActionScript and Timeline)

• Use Adobe Flash Professional to create the content

Flash Lite Wallpaper and Screen saversFlash Lite Wallpaper and Screen savers

Flash Lite Content TypesFlash Lite Content Types

• What is a Flash Lite content type?SWF file format that runs within a designated runtime environment– SWF file format that runs within a designated runtime environment and context for a specific target mobile device

• Most familiar types are …– Standalone, browser

• Content types that offer device “Personalization”– Wallpaper, Screen saver, Sub‐LCD (“Mini Screen”), othersWallpaper, Screen saver,  Sub LCD ( Mini Screen ), others

• Other content types vary by:– Region

• North America, EMEA, APAC (Japan)

– Device Platform• Nokia Series 40/60, BREW, “Keitai Denwa”, others

– Operator• Verizon, NTT DoCoMo,  others

Toolsets you will use (most likely)Toolsets you will use (most likely)

ADOBE NOKIA

• Adobe Flash Professional 8 or 9 (anticipated later this year)

– Creating the actual Flash Lite ( ll /

• Nokia S40 Theme Studio 2.2/Carbide UI S60 Theme Edition 3.1– for wallpaper/screen saver installation 

via Nokia UI “themes” ( nth)content (wallpapers/screen savers)

• Adobe Photoshop CS2 or CS3 *C ti hi l t

via Nokia UI  themes  (.nth)

• Nokia 3rd Edition Emulator (S40 SDK)– Optional

• Supported Nokia S40/S60 3rd Edition– Creating any graphical assets (bitmaps, etc)

• Flash 8 Mobile Emulator or Adobe Device Central *

• Supported Nokia S40/S60 3 Edition Handset(s)– We will use the Flash Lite 2.0 enabled 

S40 Nokia 5300Adobe Device Central *– Testing Flash Lite content

(* = currently BETA)(  = currently BETA)

Design, Develop, Test, Deploy, EnjoyDesign, Develop, Test, Deploy, Enjoy1. Design and Develop in Flash Professional 8 5. Deploy to Content Provider/Aggregator

4. Package UI Theme (.nth)

6. Users acquire and enjoy

3. Test on target device

2. Test in Emulator (Device Central)

Development ConsiderationsDevelopment Considerations

• Content Type limitationsRestricted API (data loading is disabled for instance) others– Restricted API (data loading is disabled, for instance), others

• Display: Color, Contrast, Position– With wallpapers you must be considerate of other UI elements

• Device Constraints: Performance, Memory, File size– Always keep these in mind in the mobile development world

• Nokia Screen sizes• Nokia Screen sizes– Varies by device and/or platform (S40 vs. S60)

– 240x320, 128x160, 96x65, 176x208, others

• FPS (frames per second)– Typically 16 FPS – depends on target device

• S40/S60 Target Devices• S40/S60 Target Devices– 1.1 versus 2.x … APIs and capabilities

Quick ExampleQuick Example

• Animated Screen Saver Device Indicator– Time to develop: < 1 dayTime to develop: < 1 day– NokiaS40_candle_240x320.fla– Tap available device status properties such as:

• Battery Life Signal Strength Date/Time others• Battery Life, Signal Strength, Date/Time, othersbattery_num = fscommand2( “GetBatteryLevel” );signal_num = fscommand2( “GetSignalLevel” );  

• Some other things to note• Some other things to note:– ActionScript 2.0 (class driven)– Mobile Shared Objects (MSO) are supported for wallpaper/screen 

savers content on Nokia 5300savers content on Nokia 5300– < 100k in size– Vector and Bitmap

D l ith N ki UI Th ( th fil )– Deploy with Nokia UI Theme (.nth file)

• Download source from: www.flashmobilebook.com

Pros and Cons of Flash Lite ll /SWallpaper/Screen savers

Pros ConsPros– Rapid Development– Bitmap and vector support

“I i i ”

Cons– Flash Lite ™ on Nokia Series 

40/60 handsets have some i li it API t i ti f th– “Interactivity”

– Adobe Device Central makes testing easierP t bilit f i ti Fl h

implicit API restrictions for these content types

– Others?– Portability of existing Flash 

animations to devices (with a bit of optimization, etc)

– Portability of contentPortability of content between devices

– Not a step learning curve for designers

– More!

Other cool things to exploreOther cool things to explore• Flash Lite 2.x “Device Video” Screen saver

– Nokia 5300 (FL 2.x) supports “embedded” device video

– Note: Flash Lite 3 will support native Flash Video (FLV)

– Careful of overall file size!

• Screen saver generation: Flash Lite 2 x Drawing API• Screen saver generation: Flash Lite 2.x Drawing API– Dynamically generated ActionScript content vs. Timeline

– Careful of performance and memory usage!

– Spirals.swf screen saver and tiles.swf wallpaper

• Adobe Flash Home ™ – New product announced at 3GSM 2007 conferenceNew product announced at 3GSM 2007 conference

– Dynamic, customizable, personalized  “home screens”

– Estimated rollout later in 2007

f h // d b / b l / l /fl hh /– Info: http://www.adobe.com/mobile/solutions/flashhome/ 

Where to go from hereWhere to go from here• Foundation Flash Applications for Mobile Devices

• http://www.flashmobilebook.com/p

• Legacy Devnet Flash Lite 1.1 Nokia Series 40 articles (3 parts):– http://www.adobe.com/devnet/devices/nokia_s40.html

N ki i l• Nokia tutorial– “Creating Screen Savers for S60 3rd Edition Feature Pack 1 Devices”

• Feature Requests for Flash Lite 3.0q– Remote data access for wallpaper/screen savers (Adobe Flash Home ™)

– Native Flash Video Support (already slated for Flash Lite 3)

Content type check via System capabilities playerType?– Content type check … via System.capabilities.playerType?

– Other features? Submit them to: mobiledeveloper@adobe.com

• Interested in an entire session on this topic, an article? – Contact Adobe at: mobiledeveloper@adobe.com

SummarySummary

• Flash Lite 2.x …brings more interactivity to wallpaper screen saver and other– brings more interactivity to wallpaper, screen saver, and other content types

– Makes it easy to create cool wallpaper and screen savers much more quickly than many other tools availablequickly than many other tools available

• Thanks for attending

• Richard Leggett is up nextgg p