Build Applications Faster with SWCs Chris Black
Overview <ul><li>Asset overview
Beyond the button
Examples </li><ul><li>Images
Components
Vector art </li></ul><li>Summary </li></ul>
What's an Asset? <ul><li>An image, animation or graphical element used in creating an application.
Examples: </li><ul><li>JPEG, PNG, GIF
Vector art
SWF animation or interactive components </li></ul></ul>
How are they used? <ul><li>Designs are created in Photoshop, Illustrator and Fireworks
Flash IDE and Flash Catalyst (coming soon) for asset production
Flash Builder 4 (Flex Builder 3), and Flash Develop  for coding </li></ul>
Why are they Important? <ul><li>Flash CS4 + Code = BAD
Flash Builder  </li><ul><li>Flex Framework great for existing components (buttons, grids, drop downs...)
Time consuming for new components
ActionScript only projects + Flash IDE = AWESOME
Use the right tool for the job </li></ul></ul>
Types of Assets <ul><li>Loaded Assets </li><ul><li>Small initial footprint
Many loading stages
Larger apps and dynamic content </li></ul><li>Embedded Assets </li><ul><li>Larger footprint
Single loading stage
Smaller apps and core content </li></ul></ul>
Beyond the Button http://www.ammap.com http://www.greensock.com/
Images in SWCs <ul><li>Compress transparent PNGs
Simplify code
Upcoming SlideShare
Loading in...5
×

Build Applications Faster with SWCs

1,287

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,287
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Build Applications Faster with SWCs

  1. 1. Build Applications Faster with SWCs Chris Black
  2. 2. Overview <ul><li>Asset overview
  3. 3. Beyond the button
  4. 4. Examples </li><ul><li>Images
  5. 5. Components
  6. 6. Vector art </li></ul><li>Summary </li></ul>
  7. 7. What's an Asset? <ul><li>An image, animation or graphical element used in creating an application.
  8. 8. Examples: </li><ul><li>JPEG, PNG, GIF
  9. 9. Vector art
  10. 10. SWF animation or interactive components </li></ul></ul>
  11. 11. How are they used? <ul><li>Designs are created in Photoshop, Illustrator and Fireworks
  12. 12. Flash IDE and Flash Catalyst (coming soon) for asset production
  13. 13. Flash Builder 4 (Flex Builder 3), and Flash Develop for coding </li></ul>
  14. 14. Why are they Important? <ul><li>Flash CS4 + Code = BAD
  15. 15. Flash Builder </li><ul><li>Flex Framework great for existing components (buttons, grids, drop downs...)
  16. 16. Time consuming for new components
  17. 17. ActionScript only projects + Flash IDE = AWESOME
  18. 18. Use the right tool for the job </li></ul></ul>
  19. 19. Types of Assets <ul><li>Loaded Assets </li><ul><li>Small initial footprint
  20. 20. Many loading stages
  21. 21. Larger apps and dynamic content </li></ul><li>Embedded Assets </li><ul><li>Larger footprint
  22. 22. Single loading stage
  23. 23. Smaller apps and core content </li></ul></ul>
  24. 24. Beyond the Button http://www.ammap.com http://www.greensock.com/
  25. 25. Images in SWCs <ul><li>Compress transparent PNGs
  26. 26. Simplify code
  27. 27. Quickly change global compression
  28. 28. Harder to version control </li></ul>
  29. 29. Slide Show <ul><li>Imagine a slide show with cross fading images, XML configuration and a loading indicator.
  30. 30. How many lines of code would this take?* </li></ul>
  31. 31. Slide Show Pro
  32. 32. Slide Show Pro Live Demo
  33. 33. Component Advantages <ul><li>Use components built for Flash
  34. 34. Quick and easy
  35. 35. Code completion </li></ul>Slide Show Pro
  36. 36. Snowboard Demo
  37. 37. Snowboard Demo Constructor Parse Board Art
  38. 38. Snowboard Demo Snowboard
  39. 39. Snowboard Advantages <ul><li>Vector art
  40. 40. Layering
  41. 41. Components
  42. 42. Code completion </li></ul>
  43. 43. Things to Watch Out For <ul><li>Class conflicts </li><ul><li>Font conflicts can cause major headaches
  44. 44. Don't duplicate class definitions between SWC and Flash Builder </li></ul><li>Asset organization </li><ul><li>Break down folders and Flash files
  45. 45. Think ahead </li></ul></ul>
  46. 46. Types of Assets
  47. 47. SWCs <ul><li>Advantages </li><ul><li>Code completion
  48. 48. Vector art
  49. 49. 9-slice scaling
  50. 50. Timeline code is executed
  51. 51. PNGs are compressed
  52. 52. Visual placement
  53. 53. Linkage support </li></ul></ul><ul><li>Disadvantages </li><ul><li>Larger file size
  54. 54. Hard to debug </li></ul></ul>
  55. 55. Embedded SWF <ul><li>Advantages </li><ul><li>Vector art
  56. 56. 9-slice scaling
  57. 57. PNGs are compressed
  58. 58. Visual placement
  59. 59. Linkage support </li></ul></ul><ul><li>Disadvantages </li><ul><li>Larger file size
  60. 60. Timeline code is not executed
  61. 61. No code completion
  62. 62. More code
  63. 63. Requires two frames* </li></ul></ul>
  64. 64. Embedded SWF Live Demo
  65. 65. Loaded SWF <ul><li>Advantages </li><ul><li>Smaller app footprint
  66. 66. Vector art
  67. 67. 9-slice scaling
  68. 68. PNGs are compressed
  69. 69. Visual placement
  70. 70. Timeline code executed* </li></ul></ul><ul><li>Disadvantages </li><ul><li>More code
  71. 71. No linkage support!
  72. 72. No code completion </li></ul></ul>
  73. 73. Images <ul><li>Advantages </li><ul><li>Version control
  74. 74. Flash not required </li></ul></ul><ul><li>Disadvantages </li><ul><li>Lots of files
  75. 75. Harder to compress
  76. 76. No vector art
  77. 77. More code </li></ul></ul>
  78. 78. Flex Module <ul><li>Advantages </li><ul><li>Smaller initial footprint
  79. 79. Code completion
  80. 80. Encapsulate code and assets </li></ul></ul><ul><li>Disadvantages </li><ul><li>Requires Flex
  81. 81. Must still embed assets with another method </li></ul></ul>
  82. 82. Summary <ul><li>SWCs are great
  83. 83. Use the right tool for the job
  84. 84. Think ahead </li></ul>
  85. 85. Resources <ul><li>Adobe Livedocs
  86. 86. http://www.ammap.com
  87. 87. http://www.greensock.com/
  88. 88. Blackcj.com
  89. 89. Snow
  90. 90. Vector Art
  91. 91. http://slideshowpro.net/ </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×