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. 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. 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. Here’s how it works: Illustrator
Monday, November 15, 2010
11. Here’s how it works: Illustrator
Monday, November 15, 2010
12. Here’s how it works: Illustrator
Uh...What’s
Illustrator?
Monday, November 15, 2010
13. Here’s how it works: Illustrator
Uh...What’s
Illustrator?
Monday, November 15, 2010
14. Here’s how it works: Illustrator
A vector graphics
editor.
Uh...What’s
Illustrator?
Monday, November 15, 2010
15. Here’s how it works: Illustrator
A vector graphics
editor.
Uh...What’s
Illustrator?
Monday, November 15, 2010
16. Here’s how it works: Illustrator
A vector graphics
editor.
Uh...What’s
Illustrator?
A what?
Monday, November 15, 2010
17. Here’s how it works: Illustrator
A vector graphics
editor.
Uh...What’s
Illustrator?
A what?
Monday, November 15, 2010
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. 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
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. 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. 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. 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. 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. 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
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. 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
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. 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. Here’s how it works: Flash
Monday, November 15, 2010
39. Here’s how it works: Flash
Monday, November 15, 2010
40. Here’s how it works: Flash
Uh...What’s a flash
timeline?
Monday, November 15, 2010
41. Here’s how it works: Flash
Uh...What’s a flash
timeline?
Monday, November 15, 2010
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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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
60. Also, to more efficiently
organize your work, you can create
multiple folders which helps on
larger projects.
Monday, November 15, 2010
61. Also, to more efficiently
organize your work, you can create
multiple folders which helps on
larger projects.
Monday, November 15, 2010
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. 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. 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. 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. 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. 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. 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
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
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. 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. 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. 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. 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. 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. 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. 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