Managing and Using Assets in Rich Flash Experiences

1,777 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
1 Comment
3 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
1,777
On SlideShare
0
From Embeds
0
Number of Embeds
227
Actions
Shares
0
Downloads
18
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide



  • sometimes there’s a developer involved in the concept phase. Hopefully there is. I love this part of the project. It’s where I get to help introduce useful, helpful technology and solutions that can make a measurable business impact.

    It’s a common decision all developers need to make, and it’s something that should be of interest to both developers and designers. This is where the hand-off occurs with most assets, and interactivity has a significant impact on how those assets need to be provided and implemented. There are quite a few options and many developers I speak with only know and use 1 or 2.
  • sometimes there’s a developer involved in the concept phase. Hopefully there is. I love this part of the project. It’s where I get to help introduce useful, helpful technology and solutions that can make a measurable business impact.

    It’s a common decision all developers need to make, and it’s something that should be of interest to both developers and designers. This is where the hand-off occurs with most assets, and interactivity has a significant impact on how those assets need to be provided and implemented. There are quite a few options and many developers I speak with only know and use 1 or 2.
  • sometimes there’s a developer involved in the concept phase. Hopefully there is. I love this part of the project. It’s where I get to help introduce useful, helpful technology and solutions that can make a measurable business impact.

    It’s a common decision all developers need to make, and it’s something that should be of interest to both developers and designers. This is where the hand-off occurs with most assets, and interactivity has a significant impact on how those assets need to be provided and implemented. There are quite a few options and many developers I speak with only know and use 1 or 2.
  • sometimes there’s a developer involved in the concept phase. Hopefully there is. I love this part of the project. It’s where I get to help introduce useful, helpful technology and solutions that can make a measurable business impact.

    It’s a common decision all developers need to make, and it’s something that should be of interest to both developers and designers. This is where the hand-off occurs with most assets, and interactivity has a significant impact on how those assets need to be provided and implemented. There are quite a few options and many developers I speak with only know and use 1 or 2.
  • sometimes there’s a developer involved in the concept phase. Hopefully there is. I love this part of the project. It’s where I get to help introduce useful, helpful technology and solutions that can make a measurable business impact.

    It’s a common decision all developers need to make, and it’s something that should be of interest to both developers and designers. This is where the hand-off occurs with most assets, and interactivity has a significant impact on how those assets need to be provided and implemented. There are quite a few options and many developers I speak with only know and use 1 or 2.






  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • Used a media caching solution to speed delivery of assets

    Content was data driven

    Timeline animation would play intro, location in, load leprechaun, play audio, upon audio complete finish leprechaun animation, end location, and then outro
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.

  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.
  • show demo, view timeline, and discuss how this was worked out.















  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team
  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team
  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team
  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team
  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team
  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team
  • there are a variety of tools and techniques available to use to assist in managing assets

    choose tools that
    a) make you productive
    b) work well with a team


  • 1) Show Flash Pro setup
    2) Show FDT setup
    3) Direct Beaker
    4) Extended Beaker
    5) Wrapped Beaker

  • 1) Simple SwfLoad
    2) Embedded swf
    3) LibraryManager

  • Demo on my blog

    What is LoaderMax:
    load xml, swf, images, data, video, audio, css
  • Flex only
    Embed assets are compiled into the initial SWF
    Can load just the source or specify a symbol’s linkage identifier
  • Asked friends for some great stories of tackling these challenges.

    These stories represent a good symbiotic workflow between dev and design








  • 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

    ×