Draw and Animate a Rocket Ship - Tech4Learning, Inc. 5 - Draw and Animate a... · Introduction...

Recipes4Success ®

You can use the drawing tools and path animation tools in Frames to create illustratedcartoons. In this Recipe, you will draw and animate a rocket ship.

© 2012. All Rights Reserved. This Material is copyrighted under United States copyright laws.Tech4Learning, Inc. is the exclusive owner of the copyright. Distribution of this material is governed bythe Terms and Conditions of your license for the Recipes4Success. Unlicensed distribution is strictlyforbidden.

Draw and Animate a Rocket ShipFrames 5 - Drawing Tools

Recipes4Success www.recipes4success.com © 2012 Tech4Learning, Inc.

Contents

Introduction 3Draw a Rectangle 4Resize a Shape 7Draw a Triangle 8Fill a Shape with Color 11Move an Object 12Duplicate a Shape 13Change the Layer 16Draw a Circle 17Use the Pencil Tool 21Fill with a Gradient 23Save 26Group and Rotate a Shape 27Change the Canvas 30Add a Path Animation 32Change Frame Duration 34Make a Movie 35Conclusion 38

Draw and Animate a Rocket ShipFrames 5 - Drawing Tools


Introduction

Click the Frames icon on the Dock.

Frames will open.

You will see a blank frame.

of 39Draw and Animate a Rocket ShipFrames 5 - Drawing Tools


Draw a Rectangle

Click the Tools button on the toolbar.

Click the Shape tool on the Tools panel select the rectangle.



Move the cursor over the frames.

The cursor will change to a crosshair.

Move the cursor near the middle of the canvas.



Click and drag the cursor down and to the right.

Let go of the mouse button.

You will see a gray rectangle.



Resize a Shape

You can resize a shape.

You will see eight blue handles around the rectangle.

Move the cursor over the middle handle on the right.

The cursor will change to two arrows.

Click and drag the handle to resize the rectangle.

Uncheck the Stroke box in the Shape options on the Tools panel.



The black stroke around the shape will disappear.

Draw a Triangle

Click the Shape button on the tools panel.

Select the triangle from the Shape Options.



Move the cursor over the frames.

The cursor will change to a crosshair.

Move the cursor over open space next to the rocket ship body.



You will see a gray triangle.



Move the cursor over one of the corner blue handles.

Click and drag to resize the triangle so that it is as wide as the rectangle.



Fill a Shape with Color

You can fill a selected shape with color.

Click the Color box near the middle of the tools panel.

You will see a color palette.

Click a bright red color on the left side of the palette.



The triangle will fill with red.

Move an Object

You can move shapes on the frame.

Move the cursor over the middle of the triangle.

Click and drag the triangle to the top of the rocket ship.




Duplicate a Shape

You can duplicate a shape.

Click the triangle if you do not see the handles.

Click the Duplicate button on the toolbar.



This will make a copy of the triangle.

Click and drag the triangle to the bottom of the rocket ship.



Click and drag a blue corner handle to make the triangle bigger.

Click and drag to center the triangle at the bottom of the rocket.



Change the Layer

You can change the layer of shapes in a drawing. The bottom triangle is on top of therocket ship because you added it last.

Click the bottom triangle if you do not see the handles.

Go to the Options menu and choose Send to Back.

This will put the triangle behind the body of rocket ship.

You can resize the triangle to fit using the blue handles.



Draw a Circle

You can draw a circle as a window on the rocket ship body.

Click the Shape tool on the Tools panel and choose the circle.



Move the cursor over the rocket ship body near the top triangle.





You will see a circle.



Move the cursor over the middle of the circle.

Click and drag it to the place you want it on the rocket ship body.

Click the Color box in the middle of the tools panel.

Click a dark gray color from the color palette.



You will see the color change.

Use the Pencil Tool



You can draw freehand shapes with the Pencil tool. You will use the Pencil tool to drawfreehand flames coming out of the bottom of the rocket.

Click the Pencil tool on the toolbar.

Move the cursor below the rocket ship.

Click and drag to draw flames.


You will see the flames drawn with the same fill and stroke as the previous shape.



Fill with a Gradient

You can fill a shape with a gradient. A gradient is a fill that changes from one color toanother.

Click the Select tool on the Tools panel.

Click the flames to select them.



Click the Fill pull-down menu and choose Linear Gradient.

Click the color box on the left and choose a yellow color from the palette.

Click the color box on the right and choose an orange color from the palette.



You will see the gradient in the flame shape.

Go to the Options menu and choose Send to Back.

This will put the flames behind the rocket ship.

Click the canvas away from the rocket ship.



Save

You can save a Frames file so that you can work on it during multiple sessions.

Click the Save button on the toolbar.

You will see the Save Animation As dialog.



Type a name for the file.

You will see this name in the File name field.

Click the Save button.

Group and Rotate a Shape

You can group a series of shapes together.

Go to the Edit menu and choose Select All. This will select all the shapes in the rocketship.

Click the Group button on the toolbar.



The nodes on each shape will disappear and the outline of the shape will change.

You will see a blue circle at the top of the rocket ship.

Click and drag this rotate handle to rotate the rocket ship.




Move the cursor over one of the corner handles.

Click and drag if you want to resize the rocket ship.

Click the canvas away from the rocket ship.



Change the Canvas

You can change the color of the canvas behind the rocket ship.

Click the Fill pull-down menu on the tools panel and choose Linear Gradient.



You will see a white to gray gradient on the background.

Click the Color box on the left and choose black on the color palette.

Click the Color box on the right and choose a dark blue on the color palette.

You will see a gradient behind the rocket ship.



Add a Path Animation

While Frames can easily do stop motion and frame-by-frame animation, you can alsoadd animation using a path.

Click the rocket to select it.

Click the Animate check box on the tools panel.

You will see a dotted red line and arrow on the rocket.



Move the cursor over the red arrow at the end of the path and click and drag to changeit.

The rocket will animate from its starting point to the arrow, so you may want toreposition the rocket too.



Click the Play button on the toolbar to watch the animation.

Change Frame Duration

The rocket will animate along the path for the duration of the frame.

The duration is currently set to 0.5 seconds.



Click and drag the Duration slider to make the frame longer.

Click the Play button on the toolbar to watch the animation.

Make a Movie

You can export the animation as a movie file you can share with other people.

Click the Project button on the toolbar.

Move the mouse over the Export option and then click the Movie option.



You will see the Save Movie As dialog.



Type the name you want for the file in the File name field.

Click the Save button.

Frames will create the movie.

When it is finished, you will see a Finished Exporting dialog.



Click the Launch button to watch the movie.

Go to the File menu and choose Quit to close the movie player.

Go to the File menu and choose Exit to close Frames.

Conclusion

Congratulations! You drew a rocket ship in this Recipe. You learned how to:

Draw a rectangle

Resize a shape

Draw a triangle

Fill a shape with color

Change the layer of a shape

Draw a circle

Draw a line

Change the stroke

Draw a freehand shape

Fill with a gradient



Change the canvas

Save

Publish



Draw and Animate a Rocket Ship - Tech4Learning, Inc. 5 - Draw and Animate a... · Introduction...

Documents

Transcript of Draw and Animate a Rocket Ship - Tech4Learning, Inc. 5 - Draw and Animate a... · Introduction...