Flash Animation

Flash 8 Animation

Sydney CEO

Prepared by: Kelly Short

Kelly Short

1

Flash 8 Animation

Sydney CEO

Contents

Kelly Short

Section

Page

1

Screen Layout

3

2

Flash Drawing

6

3

Motion Tweening

11

4

Shape Tweening

13

5

Frame by Frame animation

15

6

Movie Clips

19

7

Music

23

8

Publishing

24

2

Flash 8 Animation

Sydney CEO

Screen Layout

Create a new Flash Document

Lists recently opened items

Kelly Short

3

Kelly Short

Toolbar

Properties Bar

Stage

Timeline

Library

Flash 8 Animation Sydney CEO

4

Flash 8 Animation

Sydney CEO

The Timeline Key Frame

Empty Key Frame Empty Frame

Layer Name

Onion Skinning

Scene and Symbol New Layer, Motion Guide, Layer Folder

The Tools Select (V) Free Transform Tool (Q)

Sub Select (A) Gradient Fill (F)

Line Tool (N)

Lasso (L)

Pen Tool (P)

Text (T)

Oval (O)

Rectange (R)

Pencil (Y)

Paintbrush (B)

Ink Bucket Tool (S)

Paint Bucket (K)

Eye Dropper (I)

Erase (E)

Hand Pan(H)

Zoom (Z) Stroke Colour Fill Colour

Black and White, No colour, Swap Colours Tool related Options

Kelly Short

5

Flash 8 Animation

Sydney CEO

Flash Drawing Select the Drawing Tool

The tool related options allows you to draw lines that are automatically straightened or smoothed, or drawn directly as they are drawn

On Straighten

Becomes

On smooth

Becomes

The Ink setting stays the same as what you have drawn Kelly Short

6

Flash 8 Animation

Sydney CEO

Filling In most painting programs, if you had a situation like the one left, and you tried to fill in, you would end up with colour across your entire screen. However, Flash allows you to fill large and small gaps automatically when filling.

Step 1: Select Paint Bucket (K)

Step 2: Select the colour you require

Step 3: Select Close large gaps from the Tool Options

Step 4: Click in the area you wish to fill

Kelly Short

7

Flash 8 Animation

Sydney CEO

Modifying Drawings Selecting edges and lines in Flash MX

• To select a line segment or the fill of an object, use the Arrow tool and click once over the line or fill. • Double clicking on a line will select all the curves in that line. • Choose the selection (Arrow) tool and deselect any shapes or lines that are on the stage. With the selection

• •

arrow, move it over one of the shape edges. The pointer arrow changes when you're over the edge of a shape that hasn't been grouped or made into a symbol. If it's over a curved line or curved edge of a fill, it is a pointer with a curve next to it and will move the curve if you press and drag. Over a corner or endpoint, it is a pointer with a corner, and will move the point or corner maintaining the straight lines. This will pull both stroke and fill alike. To reshape lines and fills, select them. Use the Smooth or Straighten mode from the Modify Menu or from the Options section of the Toolbox. (You can adjust the amount of smoothing or straightening by choosing Preferences from the Edit menu.) Control-drag (Windows) or option-drag (Macintosh) a line to create a new corner point.

Pen Tool If you are familiar with Adobe Illustrator or Photoshop, Macromedia Freehand or Fireworks, you've seen this tool before. The Pen tool allows you to place points and create curves and lines that are repositionable. Exercise to create a straight line:

• Select the Pen tool. • Click once anywhere in the stage window. • Click again, and a straight line is created between the two points.

Exercise to create a curved line: Position the Pen icon where you want it to begin on the stage. Press and hold the mouse and slide in the direction you want the curve to go. You'll see tangent handles that appear that you can also select and reposition. Release, and either repeat or just click where you want the curve to end. Important points about curves:

• • • • • • •

To change a curve point to a corner point (or anchor point), use the Pen tool and just click on the point. To change a corner or anchor point into a curve point, use the sub-selection tool, the option key and drag. To delete a corner point, click on the point with the Pen tool. To delete a curve point, double click on the point. Fewer points means smaller file size. A curve point is a hollow circle. A corner point is hollow square.

http://www.utexas.edu/learn/flash/

Kelly Short

8

Flash 8 Animation

Sydney CEO

Modifying Drawings The free transform tool allows you to modify any drawing. Select the Free Transform tool from the Toolbar and then click on the graphic you wish to modify. Remember to Double click to select both outline and fill Click and drag the corner handles to rotate

Click and drag a side or corner handle out to enlarge or reduce the size

Click and drag a side up and down, or the top across to skew

You can also do this through the modify menu

Kelly Short

9

Flash 8 Animation

Sydney CEO

Text If you are wanting text just to display (not to change or be input) you are creating static text. Select the text tool on the toolbar Change the font and styles here

Change the type to Static

IMPORTANT: If you are taking either the published or working file to another computer that doesn’t have the font that you have used installed, then the default font (usually Arial or System) will replace it. Fonts ARE NOT embedded in flash files.

If you wish to display a not often used font in your flash file, you can Break it Apart. This treats the text as a graphic from that point onward, and you cannot edit the text or font after breaking it apart….In other words, check that it says what you want it to say and it’s spelt right before breaking apart!

Select the text Go to Modify, Break apart This breaks it down to individual words Go to Modify, Break apart again

This converts the text to a picture, and can be edited like one

Kelly Short

10

Flash 8 Animation

Sydney CEO

Motion Tweening • •

Create a new page in Flash. Draw a ball like the one below at the bottom of the stage. For the markings on the ball, you will need to use the smooth option of the pencil

IMPORTANT: Only symbols can be motion tweened, so you must convert to a symbol before tweening

•

Select everything on the frame (ie, the entire ball by clicking on the keyframe in the toolbar

•

Go to the Modify menu and select Modify—> Convert to Symbol

Name the symbol

Select Movie Clip You will now notice two differences. When selected, the ball will have a blue border surrounding it.

The ball will also be a member of the library, if you have it open. If not, you can open it by going to Window—>Library

Kelly Short

11

Flash 8 Animation

Sydney CEO

To Create the Tween: Right click on frame 10 and select Insert Keyframe

InBetween Frames

This should create a timeline that looks

like this:

Keyframe

Keyframe

While in frame 10, select and move the ball to the top half of the stage. This sets the end position of the ball as at the top of the stage.

Select Frame 1, which is where you want the Tween to START Change tween to Motion

Change rotate to CW (clockwise), only if you want your ball to rotate

On CD! Your timeline should now look like this

Kelly Short

12

Flash 8 Animation

Sydney CEO

Shape Tweening Create a new document Using the paintbrush, draw or write something on the stage On the timeline, right click on Frame 10 and select Insert Blank Keyframe. This will insert a keyframe with nothing on it.

In-Between Frames

Keyframe

Keyframe

Draw something different in Frame 10

Kelly Short

13

Flash 8 Animation

Sydney CEO

Go back to frame 1

Select Shape from the Tween Option

Your timeline should now look like this

On CD!

Kelly Short

14

Flash 8 Animation

Sydney CEO

Frame by Frame A walk cycle is created by 4 frames, repeated over

The following parts are created for you to work with in the CD

Recoil Contact

High Point Passing

On CD!

Kelly Short

15

Flash 8 Animation Step 1: Make sure you are in Frame 1 of the SuperSteve Layer

Sydney CEO Step 2: Find the contact folder

Step 3: Click and drag legs, arms and head across to stage

Kelly Short

16

Flash 8 Animation

Sydney CEO

Insert a Blank Keyframe on frame 3 of SuperSteve Layer We are skipping one frame to make it easier.

Select the onion skinning tool to see the previous and next 4 frames

Kelly Short

17

Flash 8 Animation

Check you are on frame 3

Sydney CEO Find the recoil folder and click and drag Steve’s parts across

With onion-skinning turned on, Super Steve should look something like this so far:

Complete the same steps with passing and high point symbols. Once you have completed one cycle, you can copy and paste individual frames to create more cycles. If you want more information on cycles (including drawings of thousands of different cycles, there is a great book by Richard Williams called “The Animators Survival Kit: A manual of methods, principles and formulas for classical, computer games, stop motion and internet animation

Kelly Short

18

Flash 8 Animation

Sydney CEO

Movie Clips

Draw a boat on the stage Select the entire boat and convert to a symbol (Modify—>Convert to symbol) Name it “boat” and make sure that you have “Movie Clip” selected

Notice here, it says “Scene 1”

Your timeline should look like this:

Kelly Short

19

Flash 8 Animation

Sydney CEO

Now, double click on the boat to edit the movie clip

Your timeline should now say “Scene 1 Boat” This means that you are inside the boat symbol

Add another layer by clicking on this button Rename the layer “Smoke by double clicking on its centre

Draw smoke using the paintbrush

Kelly Short

20

Flash 8 Animation

Sydney CEO

Right click and insert a keyframe in the smoke level, as this is what we want to change

Modify the smoke slightly

The boat disappeared in frame 4 because there was no frame in layer 1. Right click on frame 4 in layer 1 and add a frame

Click on Scene 1 to return to the stage

Kelly Short

21

Flash 8 Animation

Sydney CEO

Go to Control—> Test movie to test the boat. The boat should remain stationery, but the smoke should move

In order to move the boat, just motion tween it

Insert a keyframe on frame 25 Move the boat off the screen

Go back to frame 1 and set the Tween property to Motion

Kelly Short

22

Flash 8 Animation

Sydney CEO

Sound Add a new layer and rename it “sound” by double clicking Insert a keyframe where you want the sound to start.

Import the sound to the Library by Going to File—>Import to Library

The sound wave will show in the timeline

Kelly Short

Click and drag the sound onto the stage

23

Flash 8 Animation

Sydney CEO

Publishing Publishing the file converts the project file to an .swf file that can be read on any computer with the free Flash Player

Firstly, go to File—> Publish settings

Converts to a swf file

Creates a HTML file and embeds the swf within

You can also publish individual frames as gif, jpg or png You can also have a self running exe or QuickTime movie.

Kelly Short

24

Flash 8 Animation

Sydney CEO Go to File—>Publish Your files are automatically published and should then be in the same folder as your .fla published file.

Project File HTML File .swf File

Kelly Short

25

Flash 8 Animation

Sydney CEO

Resources Cartoon Smart This is my favourite Flash resource website, they sell video tutorials. There are some free ones on the site for you to download, and I’ve included them on this disk. They are well worth spending the money on, if you have some spare, and they do offer discounts if you want to sign up for the newsletter, including $5 monthly specials. www.cartoonsmart.com Flash Kit This is a comprehensive website of resources and tutorials related to Flash. Some of the tutorials are of dubious quality, you do have to search through to find the good ones. I like to use it for the content that they provide for free that can be integrated into your flash file…the sound effects and loops, for example, are great. http://www.flashkit.com/ Adobe website, the makers of Flash, have some excellent written tutorials, with some video backup, especially with the features new to Flash 8. http://www.adobe.com/devnet/flash/learning.html

Kelly Short

26