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.

Animation domination

494 views

Published on

  • Be the first to comment

Animation domination

  1. 1. ANIMATION DOMINATION Featuring... Monday, November 15, 2010
  2. 2. ANIMATION DOMINATION Featuring... Monday, November 15, 2010
  3. 3. ...well sorta Turns out McFarlane isn’t a big fan of flash... But you should be... Monday, November 15, 2010
  4. 4. ...well sorta Turns out McFarlane isn’t a big fan of flash... But you should be... Monday, November 15, 2010
  5. 5. And here’s why... The Family Guy flash spoof Monday, November 15, 2010
  6. 6. And here’s why... The Family Guy flash spoof Monday, November 15, 2010
  7. 7. But no, seriously... Journalists are using Adobe illustrator to create their animation. Then bringing it into Flash to make it move. Monday, November 15, 2010
  8. 8. Examples to get you motivated Who in the J-World is using it? "[Flash] allows us to put together audio, video, still pictures and text in a single format and put it out as an executable file. There’s not much else that really allows us to do that across platforms,” said Jim Ray, a multimedia producer on the broadband team at MSNBC.com. “It provides a way to distribute a variety of media without having to download different programs. It’s the only program that can do it all,” said Jen Friedberg, a staff photographer at the Fort Worth Star-Telegram. “For producing graphics online, it’s the tool of choice,” said Juan Thomassie, a senior designer at USAToday.com. Monday, November 15, 2010
  9. 9. Links to the Pros Picture-projects New York Times 1 and 2 El Mundo Sonic Memorial Project Every Block Interactive Narratives California Connected PBS Jen Friedberg Interactive Monday, November 15, 2010
  10. 10. Here’s how it works: Illustrator Monday, November 15, 2010
  11. 11. Here’s how it works: Illustrator Monday, November 15, 2010
  12. 12. Here’s how it works: Illustrator Uh...What’s Illustrator? Monday, November 15, 2010
  13. 13. Here’s how it works: Illustrator Uh...What’s Illustrator? Monday, November 15, 2010
  14. 14. Here’s how it works: Illustrator A vector graphics editor. Uh...What’s Illustrator? Monday, November 15, 2010
  15. 15. Here’s how it works: Illustrator A vector graphics editor. Uh...What’s Illustrator? Monday, November 15, 2010
  16. 16. Here’s how it works: Illustrator A vector graphics editor. Uh...What’s Illustrator? A what? Monday, November 15, 2010
  17. 17. Here’s how it works: Illustrator A vector graphics editor. Uh...What’s Illustrator? A what? Monday, November 15, 2010
  18. 18. Here’s how it works: Illustrator A vector graphics editor. Uh...What’s Illustrator? A what? Vector graphics are based on math. Monday, November 15, 2010
  19. 19. Here’s how it works: Illustrator A vector graphics editor. Uh...What’s Illustrator? A what? Vector graphics are based on math. You can change the size without changing the quality of the image. Monday, November 15, 2010
  20. 20. Ohhhhh....I get it Monday, November 15, 2010
  21. 21. Ohhhhh....I get it Monday, November 15, 2010
  22. 22. Ohhhhh....I get it Oh like Photoshop! Monday, November 15, 2010
  23. 23. Ohhhhh....I get it Oh like Photoshop! Monday, November 15, 2010
  24. 24. Ohhhhh....I get it Oh like Photoshop! No! Photoshop is for graphic digital manipulation. and is not vector. It’s bitmap. Monday, November 15, 2010
  25. 25. Ohhhhh....I get it Oh like Photoshop! No! Photoshop is for graphic digital manipulation. and is not vector. It’s bitmap. Illustrator is for typesetting & logo graphics Monday, November 15, 2010
  26. 26. Ohhhhh....I get it Oh like Photoshop! No! Photoshop is for graphic digital manipulation. and is not vector. It’s bitmap. Illustrator is for typesetting & logo graphics Monday, November 15, 2010
  27. 27. Ohhhhh....I get it Oh like Photoshop! No! Photoshop is for graphic digital manipulation. and is not vector. It’s bitmap. Illustrator is for typesetting & logo graphicsAnd animation? Monday, November 15, 2010
  28. 28. Ohhhhh....I get it Oh like Photoshop! No! Photoshop is for graphic digital manipulation. and is not vector. It’s bitmap. Illustrator is for typesetting & logo graphicsAnd animation? Monday, November 15, 2010
  29. 29. Ohhhhh....I get it Oh like Photoshop! No! Photoshop is for graphic digital manipulation. and is not vector. It’s bitmap. Illustrator is for typesetting & logo graphicsAnd animation? Yes. But not us. We’re old school. %$#%$ Seth! Monday, November 15, 2010
  30. 30. How do I use it? Monday, November 15, 2010
  31. 31. How do I use it? Monday, November 15, 2010
  32. 32. How do I use it? 1) Master the pen tool: Click once where you want the line to start, then where you want it to end. As you make anchors, the pen tool stays active until you close the path. If it isn’t closed, you can add points anywhere by clicking. Monday, November 15, 2010
  33. 33. How do I use it? 1) Master the pen tool: Click once where you want the line to start, then where you want it to end. As you make anchors, the pen tool stays active until you close the path. If it isn’t closed, you can add points anywhere by clicking. 2) To end- controlling curves with control points: Select the convert anchor point tool Click the desired anchor. Drag the anchor so that point control appears. Stretch the curves. Monday, November 15, 2010
  34. 34. Pros and Cons Monday, November 15, 2010
  35. 35. Pros and Cons Monday, November 15, 2010
  36. 36. Pros and Cons Pros: 1.! Advanced vector art means you lose less of the quality no matter how big the art gets or how small. 2.! Gradients and tools have come a long way. 3.! Using color and trace illustration is easier with Illustrator for going from print to web. 4.! Compatible with other Adobe software. 5.! There is a cheaper student version. 6.! Clean interface that’s very similar to that of Photoshop or Flash. 7.! Newer versions use less RAM. 8.! The "scalability" of the art. 9.! It makes relatively small files. You can make them smaller to preserve the crispness, more so than in Photoshop. Monday, November 15, 2010
  37. 37. Pros and Cons Pros: 1.! Advanced vector art means you lose less of the quality no matter how big the art gets or how small. 2.! Gradients and tools have come a long way. 3.! Using color and trace illustration is easier with Illustrator for going from print to web. 4.! Compatible with other Adobe software. 5.! There is a cheaper student version. 6.! Clean interface that’s very similar to that of Photoshop or Flash. 7.! Newer versions use less RAM. 8.! The "scalability" of the art. 9.! It makes relatively small files. You can make them smaller to preserve the crispness, more so than in Photoshop. Cons: 1.! You have to think like a vector artist to work in illustrator. 2.! Transparency can be complicated if you don't practice. 3.! Most people don't get past the stroke & fill aspect of illustrator. 4.! Has a steep learning curve, as with most vector drawing programs. 5.! It also gives an image with a crisp, clean "vector" look to it, which some people dislike. 6.! Illustrator’s anti-aliasing of text looks better than Photoshop’s. The downside is that Illustrator can’t do mouse-overs for slices. 7.! Illustrator has another annoying feature slash bug that every beginner must stumble over. The page looks great in pixel preview but when using Save For Web, the text anti-aliasing looks very bad. If you apply the Rasterize filter with anti-aliasing set to “Hinted” to a text- object, the generated GIFs will match the pixel-preview. Monday, November 15, 2010
  38. 38. Here’s how it works: Flash Monday, November 15, 2010
  39. 39. Here’s how it works: Flash Monday, November 15, 2010
  40. 40. Here’s how it works: Flash Uh...What’s a flash timeline? Monday, November 15, 2010
  41. 41. Here’s how it works: Flash Uh...What’s a flash timeline? Monday, November 15, 2010
  42. 42. Here’s how it works: Flash The timeline is composed of layers and frames. It’s used to chronologically control the properties of the objects placed into the stage. Uh...What’s a flash timeline? Monday, November 15, 2010
  43. 43. Here’s how it works: Flash The timeline is composed of layers and frames. It’s used to chronologically control the properties of the objects placed into the stage. Uh...What’s a flash timeline? Monday, November 15, 2010
  44. 44. Here’s how it works: Flash The timeline is composed of layers and frames. It’s used to chronologically control the properties of the objects placed into the stage. Uh...What’s a flash timeline? Layers? Stage? They sounds familiar Monday, November 15, 2010
  45. 45. Here’s how it works: Flash The timeline is composed of layers and frames. It’s used to chronologically control the properties of the objects placed into the stage. Uh...What’s a flash timeline? Layers? Stage? They sounds familiar Monday, November 15, 2010
  46. 46. Here’s how it works: Flash The timeline is composed of layers and frames. It’s used to chronologically control the properties of the objects placed into the stage. Uh...What’s a flash timeline? Layers? Stage? They sounds familiar Yeah, Chandler and Dan taught you those. Remember? Kit Kat bars...? Monday, November 15, 2010
  47. 47. Monday, November 15, 2010
  48. 48. Monday, November 15, 2010
  49. 49. Haha...Kit Kat bars... Monday, November 15, 2010
  50. 50. Haha...Kit Kat bars... Monday, November 15, 2010
  51. 51. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Monday, November 15, 2010
  52. 52. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Monday, November 15, 2010
  53. 53. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Ok. Monday, November 15, 2010
  54. 54. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Ok. Monday, November 15, 2010
  55. 55. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Ok. Each layer has its own name, properties and stacking order. You can create multiple layers, and place them in various orders since they are movable to help with organizing your work. Monday, November 15, 2010
  56. 56. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Ok. Each layer has its own name, properties and stacking order. You can create multiple layers, and place them in various orders since they are movable to help with organizing your work. Monday, November 15, 2010
  57. 57. Um.Yeah.When building a timeline, you insert your images or content into the layers section on the left- hand side to build the timeline. Haha...Kit Kat bars... Ok. Each layer has its own name, properties and stacking order. You can create multiple layers, and place them in various orders since they are movable to help with organizing your work. Ok. Monday, November 15, 2010
  58. 58. Monday, November 15, 2010
  59. 59. Monday, November 15, 2010
  60. 60. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. Monday, November 15, 2010
  61. 61. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. Monday, November 15, 2010
  62. 62. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? Monday, November 15, 2010
  63. 63. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? Monday, November 15, 2010
  64. 64. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? It’s a unit of time.There’s 3 types: Key frames- “Stand alone” frames Frames- An expansion of the keyframes Blank keyframes- Clear stage Monday, November 15, 2010
  65. 65. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? It’s a unit of time.There’s 3 types: Key frames- “Stand alone” frames Frames- An expansion of the keyframes Blank keyframes- Clear stage Monday, November 15, 2010
  66. 66. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? It’s a unit of time.There’s 3 types: Key frames- “Stand alone” frames Frames- An expansion of the keyframes Blank keyframes- Clear stage Oh. Is it time to go? Monday, November 15, 2010
  67. 67. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? It’s a unit of time.There’s 3 types: Key frames- “Stand alone” frames Frames- An expansion of the keyframes Blank keyframes- Clear stage Oh. Is it time to go? Monday, November 15, 2010
  68. 68. Also, to more efficiently organize your work, you can create multiple folders which helps on larger projects. What’s a frame? It’s a unit of time.There’s 3 types: Key frames- “Stand alone” frames Frames- An expansion of the keyframes Blank keyframes- Clear stage Oh. Is it time to go? No. Shut-up, I’m almost done. Monday, November 15, 2010
  69. 69. How do I use it? Monday, November 15, 2010
  70. 70. How do I use it? Monday, November 15, 2010
  71. 71. How do I use it? 1) Generally, you set your object or content on each frame so it creates an animation. 2) The “playhead” of the timeline allows you to view your content and the correlating frame. 3) And you can personalize the way you view the frames. The frame view button allow you to change the way your frames are displayed. 4) When working with frames, you click on the tiny white boxes of the frames and right click to insert your content. Monday, November 15, 2010
  72. 72. Pros and Cons Monday, November 15, 2010
  73. 73. Pros and Cons Monday, November 15, 2010
  74. 74. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Monday, November 15, 2010
  75. 75. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Monday, November 15, 2010
  76. 76. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Monday, November 15, 2010
  77. 77. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Monday, November 15, 2010
  78. 78. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Whatever. Can we play now? Monday, November 15, 2010
  79. 79. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Whatever. Can we play now? Monday, November 15, 2010
  80. 80. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Whatever. Can we play now? Monday, November 15, 2010
  81. 81. Pros and Cons Pros: 1.! Cross-platform compatibility: Flash is supported on roughly 95% of Web browsers. 2. Flash was originally an animation tool, and it can enhance the experience of animations, transitions and music. 3. It has become the “de facto way” to show videos (YouTube, Vimeo) because of its compressing and packaging abilities. Unlike QuickTime and MediaPlayer, Flash movies don’t require an OS-dependent plugin. 4. Vector graphics look smoother and more attractive. Cons: 1. If you don’t optimize Flash, most applications and websites take a long time to download due to size. 2. The back button functionality in a Flash site is disabled. 3. Search Engines can’t read a flash sites or movies. Some people have duplicate HTML sites or movies to get around this. 4. Flash requires a plug-in and some companies don’t allow them on company computers. Whatever. Can we play now? Yes! Oh snap, Johnson hates exclamation points! Monday, November 15, 2010
  82. 82. In Class Playtime Monday, November 15, 2010
  83. 83. In Class Playtime Turn to your computer, open Illustrator and Flash and listen up! Monday, November 15, 2010

×