Animate a Flying Bird using Illustrator and Flash, Part 1

In this two-part tutorial, J. Schuh demonstrates how to animate a flying bird using Illustrator and Flash. In Part 1, he goes over the process of creating the vector assets in Illustrator.

If you want to follow along with the tutorial, the source files from J Schuh are available for download. Click here for the Illustrator file and click here to download jpegs.

This video requires Adobe Flash Player.

Visitor Comments »

 

Looking forward to part 2.

 

Comment by Loren | December 2, 2008 @ 2:56 pm

 

[...] Jay Schuh – Animate a Bird in Illustrator – Part 1 [...]

 

Pingback by Iron Man & Me | | Layers Magazine | December 2, 2008 @ 3:10 pm

 

Great job. Clear narration and nice pencils for the bird. Looking forward to part 2.

 

Comment by Marc | December 2, 2008 @ 7:04 pm

 

Jay…. GREAT stuff….

 

Comment by Craig Thompson | December 3, 2008 @ 6:55 am

 

Hi Jay, your tutorial is starting out pretty good but, I have a question. Why use illustrator to do the tracing of the original drawings and then move them to Flash?

Some years ago I purchased some Flash tutorials from Justin at Cartoon Smart and one was on drawing in Flash. In the tutorial Justin brings a pencil sketch into Flash and starts out using shape fills and the selection tool to create a cartoon character from the sketch, at no time in the tutorial did he ever use the pen tool. All fills and strokes were manipulated using the selection tool and the ability to change a stroke to a fill made it easy to change the strokes shape by dragging them into position using the selection tool.

The process of shaping fills and strokes just using the selection tool in Flash seems to be easier than manipulating fills and strokes using the pen tool and the selection tools in Illustrator.

So not to confuse the people that are new to Illustrator, Photoshop, and Flash, the pen tool is one of the most important tools that you want to learn and master.

Thanks
Scott Rudy

 

Comment by Scott Rudy | December 3, 2008 @ 10:38 am

 

Hey Scott, thanks for the great feedback.

The short answer is that it is a workflow issue. I have been using Flash since about v2 and Illustrator (until lately) has always allowed me better control over the creation of my initial drawings. (NOTE: I edit the heck out of them once I get them into Flash)

Also from a practical stand point when I hire interns or art students to help in asset creation I have found it is easier to have them work in Illustrator then port their work over to Flash.

Just as there is more than one way to skin a “rat” (that is for the cat lovers out there) there is more than one way to create content for flash.

I totally agree about what you said about the pen tool. The pen tool is totally useful especially if you are dealing with Masks in just about any Adobe program! So the process has made myself and the folks that have worked with me really good at using the pen tool.

Thanks again for the feedback!

J.

 

Comment by J. Schuh | December 3, 2008 @ 10:54 am

 

hello, great video and just the example I am looking for. just want to thank you for the time u spendt on this. when is part 2 out?
And yes,. there are many different ways to do one thing in illustrator/photoshop etc. I dont mind watching how you did it!

 

Comment by Erik from Norway | December 3, 2008 @ 8:51 pm

 

[...] video tutorial demonstrates how to animate a flying bird using Adobe Illustrator and Flash. Part 1 goes over the process of creating the vector assets in Illustrator, Part 2 shows how to animate the [...]

 

Pingback by Best of the Web – December 2008 | zbStudio.net | December 31, 2008 @ 8:11 pm

 

Hey!ive noticed that its a few differences between flash CS3 n 4. maybe you can help me with a question since my teacher doesnt know how it works. its really simple but I’m a beginner! Ok, if I wanna make for examlpe a ball to bounce in cs 3 ive learned 2 do to do it with a new layer with a guide line n then connect them, but when i tried on CS4 the part of connecting the layers doesnt work. You might even know an easier way to do this? I wourd really appreciate if you would and can help me?It’s a school project to do a small flash movie…thank you/Sofia

 

Comment by Sofia | February 11, 2009 @ 12:32 pm

 

Hi… I must be missing something here… When I try to play the video, I get the first minute or two, then it flashes to an ad, and the tutorial never comes back!
I don’t have the same problem with part 2, it downloads and plays just fine…
Any thoughts?

 

Comment by Debra Hansen | March 31, 2009 @ 10:39 pm

 

[...] Flying Bird Tutorial [...]

 

Pingback by Let that bird fly away. | Syntactical Error | April 7, 2009 @ 9:22 pm

 

You are the digit Bob Ross

 

Comment by Heather | April 24, 2009 @ 5:59 pm

 

Debra, I have the same issue here.
I just downloaded the latest flash, but still it doesnt play.

 

Comment by Frank Bacchus | July 30, 2009 @ 9:00 pm

 

[...] Animate a Flying Bird [...]

 

Pingback by 30 Tutorials for Designing Fun and Creative Characters | Vandelay Design Blog | October 12, 2009 @ 5:06 pm

Leave us a comment

Comments RSS | TrackBack URI

Back to Top

 
 
Advertisement
Creative Suite Tutorials
  1. Photoshop Photoshop
  2. Illustrator Illustrator
  3. Indesign Indesign
  4. Dreamweaver Dreamweaver
  5. Fireworks Fireworks
  6. Premiere Premiere
  7. Flash Flash
  8. After Effects After Effects
  9. Lightroom Lightroom
  10. Acrobat Acrobat

Get the latest tips, tricks and news delivered straight to your inbox.

From our Partners
Subscribe to Layers Magazine
 
 
 
  • Back to the Layers Magazine Homepage
  • Creative Suite Tutorials
  • Layers Magazine
  • Reviews on top products
  • Layers Magazine Reader Forums
  • Subscribe to Layers Magazine