Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing and Using Assets in Rich Flash Experiences

1,830 views

Published on

My presentation from Flash Camp St. Louis 2010. We discussed SWC, SWF loaders, FDT, casalib, LoaderMax, and sundry other bits.

Visit http://davidortinau.com for code samples.

Published in: Technology
  • Latest Update July 2013 Free Download Link Here:http://www.mediafire.com/download/do3rpswyvbl9sk7/hack_2013
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Managing and Using Assets in Rich Flash Experiences

  1. 1. Managing and using assets in your rich flash experiences
  2. 2. Who @davidortinau davidortinau.com 15 yrs web, interactive, software development Flash, iPhone, .NET, WP7
  3. 3. What are we talking about • Designers & Developers • Asset Types • Cases Studies • Tools and Techniques • Code Demos • Achieving Glorious Results
  4. 4. where developers & designers dare to touch
  5. 5. where developers & designers dare to touch • First there was a concept • Designers create the assets (mostly) • Developers want the assets (mostly) • Fairy dust • Celebration... or crying
  6. 6. all your assets are belong to us
  7. 7. all your assets are belong to us • Video and Audio • Graphics: Raster and Vector • Animations • Interactive Elements: Buttons, Sliders, Component Skins • Data Streams: Custom, Social, News, Real Time Data
  8. 8. CASE STUDIES
  9. 9. innerleprechaun
  10. 10. innerleprechaun
  11. 11. innerleprechaun
  12. 12. innerleprechaun
  13. 13. innerleprechaun
  14. 14. INNERLEPRECHAUN ASSETS
  15. 15. • Main UI • 8 Canned Samples • Intro & Outro animations • 8 leprechauns • 8 location animations • 26 music tracks by location • 26 preview music tracks • 250 voice over tracks INNERLEPRECHAUN ASSETS
  16. 16. INNERLEPRECHAUN STRATEGY
  17. 17. • Web Server Farm • PHP / mySql / Serialized VOs • CDN for Media INNERLEPRECHAUN STRATEGY
  18. 18. • Web Server Farm • PHP / mySql / Serialized VOs • CDN for Media • SWF Loaders INNERLEPRECHAUN STRATEGY
  19. 19. Tuaca Mod Your Bod
  20. 20. Tuaca Mod Your Bod
  21. 21. Tuaca Mod Your Bod
  22. 22. Tuaca Mod Your Bod
  23. 23. Tuaca Mod Your Bod
  24. 24. Tuaca Mod Your Bod
  25. 25. Tuaca Mod Your Bod
  26. 26. MOD YOUR BOD ASSETS
  27. 27. • Video Preloader (and the preloader for that) • 7 Animated Environments • 2 Genders • 3 Poses • 5 Skin Tones • 9 Body Art Patterns (thumbs & actual size) • 27 Accessories (thumbs & actual size) • 270 Bodies MOD YOUR BOD ASSETS
  28. 28. MOD YOUR BOD STRATEGY
  29. 29. • Web Server Farm • ASP.NET / SQL / AMF • CDN for Media • PNG Crush • Custom Asset Loader using flash.display.Loader MOD YOUR BOD STRATEGY
  30. 30. TOOLS AND TECHNIQUES
  31. 31. TOOLS AND TECHNIQUES
  32. 32. • Flash Pro • Flash Builder • FDT • Photoshop • Fireworks TOOLS AND TECHNIQUES
  33. 33. • Flash Pro • Flash Builder • FDT • Photoshop • Fireworks • Illustrator TOOLS AND TECHNIQUES
  34. 34. • Flash Pro • Flash Builder • FDT • Photoshop • Fireworks • Illustrator • Many Others TOOLS AND TECHNIQUES
  35. 35. • SWC • Library loaders • casalib • BSS • BulkLoaders • LoaderMax • BulkLoader • Others • Embedding • CSS Embedding • Flex Component Kit TOOLS AND TECHNIQUES
  36. 36. • Adobe file format for distributing components • A zip-like file • Filesize doesn't matter. A SWC is an external library and you'll only carry into your application what you use. • Why? Portable Strong typing to code against Separation of Design and Code SWC
  37. 37. SWC Demo
  38. 38. • http://casalib.org/ • Utility Classes • SwfLoad • LibraryManager CASALIB
  39. 39. casalib demo
  40. 40. • http://www.greensock.com/loadermax/ • Top Features • Load audio, video, swf, image, data, xml, css • Define in XML and let LoaderMax automatically parse loaders • Added content directly to containers • Set image scaling, proportional cropping, alpha, x, y, rotation, alpha in properties LOADERMAX
  41. 41. LoaderMax demo
  42. 42. .redBigButton{ text-roll-over-color:#fff; font-size:16; font-anti-alias-type:advanced; font-weight:bold; font-family:Arial; font-sharpness:-200; text-selected-color:#fff; /*skins*/ upSkin: Embed(source="assets/embedded/flash/buttons.swf",symbol="btn_red_rest"); over-skin: Embed(source="assets/embedded/flash/buttons.swf",symbol="btn_red_roll"); down-skin: Embed(source="assets/embedded/flash/buttons.swf",symbol="btn_red_click"); disabled-skin: Embed(source="assets/embedded/flash/buttons.swf",symbol="btn_red_rest"); } EMBED SKIN IN CSS
  43. 43. ACHIEVING GLORIOUS RESULTS
  44. 44. LEAGUE OF LEGENDS
  45. 45. LEAGUE OF LEGENDS
  46. 46. LEAGUE OF LEGENDS
  47. 47. • AIR Lobby that manages your profile and runs store • Heavy Bitmaps and animations • Separate company skinned the app with Degrafa • Later converted all skins to Flex Component Kit • Artists provided very detailed Photoshop documents • Developer imported, cutup to Flex Component Kit • Exported a single SWC per component • Reference in project through CSS embedding LEAGUE OF LEGENDS
  48. 48. • AIR app • 300 team members including 100 Flex developers • Entire design provided by a partner company • All Flex Component Kit assets provided as SWC • Referenced in CSS, also provided by partner • Design team can continuously revise assets without interrupting development • A development team member is responsible for integrating any new assets. ENTERPRISE TELECOM APP
  49. 49. SUPERSECRET
  50. 50. • Online MMO • Tons of PNG and SWF assets • Assets produced in Flash Pro published as swc and swf • Swc used for coding and compile time contracts • Swf used for runtime loading • Designers could revise assets without involving developers • Developers only needed to add new assets • All assets managed via custom CMS SUPERSECRET
  51. 51. Contact Me @davidortinau davidortinau.com dave@davidortinau.com

×