Managing and Using Assets in Rich Flash Experiences
•Transferir como KEY, PDF•
3 gostaram•811 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (8)
Destaque
Semelhante a Managing and Using Assets in Rich Flash Experiences
Semelhante a Managing and Using Assets in Rich Flash Experiences (20)
Último
Último (20)
Managing and Using Assets in Rich Flash Experiences
- 1. Managing and using assets in your rich flash experiences
- 2. Who @davidortinau davidortinau.com 15 yrs web, interactive, software development Flash, iPhone, .NET, WP7
- 3. What are we talking about • Designers & Developers • Asset Types • Cases Studies • Tools and Techniques • Code Demos • Achieving Glorious Results
- 4. where developers & designers dare to touch
- 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. all your assets are belong to us
- 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. CASE STUDIES
- 10. innerleprechaun
- 11. innerleprechaun
- 12. innerleprechaun
- 13. innerleprechaun
- 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
- 17. • Web Server Farm • PHP / mySql / Serialized VOs • CDN for Media INNERLEPRECHAUN STRATEGY
- 18. • Web Server Farm • PHP / mySql / Serialized VOs • CDN for Media • SWF Loaders INNERLEPRECHAUN STRATEGY
- 19. Tuaca Mod Your Bod
- 20. Tuaca Mod Your Bod
- 21. Tuaca Mod Your Bod
- 22. Tuaca Mod Your Bod
- 23. Tuaca Mod Your Bod
- 24. Tuaca Mod Your Bod
- 25. Tuaca Mod Your Bod
- 26. MOD YOUR BOD ASSETS
- 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. MOD YOUR BOD STRATEGY
- 29. • Web Server Farm • ASP.NET / SQL / AMF • CDN for Media • PNG Crush • Custom Asset Loader using flash.display.Loader MOD YOUR BOD STRATEGY
- 32. • Flash Pro • Flash Builder • FDT • Photoshop • Fireworks TOOLS AND TECHNIQUES
- 33. • Flash Pro • Flash Builder • FDT • Photoshop • Fireworks • Illustrator TOOLS AND TECHNIQUES
- 34. • Flash Pro • Flash Builder • FDT • Photoshop • Fireworks • Illustrator • Many Others TOOLS AND TECHNIQUES
- 35. • SWC • Library loaders • casalib • BSS • BulkLoaders • LoaderMax • BulkLoader • Others • Embedding • CSS Embedding • Flex Component Kit TOOLS AND TECHNIQUES
- 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. SWC Demo
- 38. • http://casalib.org/ • Utility Classes • SwfLoad • LibraryManager CASALIB
- 39. casalib demo
- 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. LoaderMax demo
- 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
- 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. • 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. SUPERSECRET
- 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
Notas do Editor
- 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