Animation domination

ANIMATION DOMINATIONFeaturing...

Monday, November 15, 2010

...well sorta

Turns out McFarlane isn’t a big fan of flash...

But you should be...


http://www.youtube.com/watch?v=W5fZlZLgsrc

http://www.youtube.com/watch?v=W5fZlZLgsrc

And here’s why...

The Family Guy flash spoof


http://vimeo.com/groups/9228/videos/8286622

http://vimeo.com/groups/9228/videos/8286622

But no, seriously...

Journalists are using Adobe illustrator to create their animation.

Then bringing it into Flash to make it move.


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.


http://www.ojr.org/ojr/stories/050922mcadams/

http://www.ojr.org/ojr/stories/050922mcadams/

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


http://www.picture-projects.com/

http://www.picture-projects.com/

http://www.nytimes.com/packages/khtml/2005/07/17/opinion/20050717_NORTHKOREA_FEATURE.html

http://www.nytimes.com/packages/khtml/2005/07/17/opinion/20050717_NORTHKOREA_FEATURE.html

http://graphics8.nytimes.com/packages/html/politics/2004_ELECTIONRESULTS_GRAPHIC/index.html

http://graphics8.nytimes.com/packages/html/politics/2004_ELECTIONRESULTS_GRAPHIC/index.html

http://www.elmundo.es/documentos/2004/03/espana/atentados11m/graficos.html

http://www.elmundo.es/documentos/2004/03/espana/atentados11m/graficos.html

http://www.sonicmemorial.org/sonic/public/index.html

http://www.sonicmemorial.org/sonic/public/index.html

http://chicago.everyblock.com/crime/

http://chicago.everyblock.com/crime/

http://www.interactivenarratives.org/

http://www.interactivenarratives.org/

http://www.californiaconnected.org/tv/archives/406

http://www.californiaconnected.org/tv/archives/406

http://www.pbs.org/pov/mostdangerousman/photo_gallery_whistleblowers.php

http://www.pbs.org/pov/mostdangerousman/photo_gallery_whistleblowers.php

http://www.jenfriedberg.com/

http://www.jenfriedberg.com/

Here’s how it works: Illustrator


Here’s how it works: IllustratorUh...What’s Illustrator?


Here’s how it works: IllustratorA vector graphics

editor.

Uh...What’s Illustrator?



editor.


A what?



editor.


A what?

Vector graphics are based on

math.



editor.


A what?

Vector graphics are based on

math.

You can change the size without

changing the quality of the image.


Ohhhhh....I get it


Ohhhhh....I get itOh like

Photoshop!



Photoshop!No! Photoshop is for graphic digital

manipulation. and is not vector. It’s bitmap.





Illustrator is for typesetting & logo

graphics






graphicsAnd animation?






graphicsAnd animation?

Yes. But not us. We’re old school.

%$#%$ Seth!


How do I use it?


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.


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.


Pros and Cons


Pros and ConsPros:

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.


Pros and ConsPros:

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.


Here’s how it works: Flash


Here’s how it works: FlashUh...What’s a flash

timeline?



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?





the stage.


Layers? Stage? They sounds

familiar





the stage.


Layers? Stage? They sounds

familiar

Yeah, Chandler and Dan taught you those. Remember? Kit Kat

bars...?


Haha...Kit Kat bars...


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.







Ok.






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.

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.


Also, to more efficiently organize your work, you can create

multiple folders which helps on larger projects.




What’s a frame?




What’s a frame?

It’s a unit of time. There’s 3 types: Key frames- “Stand

alone” framesFrames- An expansion of the

keyframesBlank keyframes- Clear stage




What’s a frame?




Oh. Is it time to go?




What’s a frame?




Oh. Is it time to go?

No. Shut-up, I’m almost done.


How do I use it?


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.


Pros and Cons


Pros and ConsPros:

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.


http://robertnyman.com/2009/03/02/adobe-flash-pros-and-cons/


Pros and ConsPros:





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.




Pros and ConsPros:





Cons:




Whatever. Can we play

now?




Pros and ConsPros:





Cons:




Whatever. Can we play

now?

Yes! Oh snap, Johnson hates

exclamation points!




In Class Playtime


In Class Playtime

Turn to your computer, open Illustrator and Flash and listen up!


Animation domination

Self Improvement

Transcript of Animation domination