Flash
animation in Flash
 

First, take a look at the Toolbar. Most of the tools are self-explanatory. They are exactly what you think they are.
Flash graphics are vector graphics. Keep this in mind.
That’s why we have two selection tools.

Main Selection tool (black) – you’ll use the most. It will allow you to select, move, and edit your artwork.

Subselection tool (white) – allows you to modify paths and anchor points (like in Illustrator)

Free Transform - resize and rotate

Fill Transform can edit your gradients.

Lasso tool will let you select freehand (like in PhotoShop)

Pen tool – is exactly what it is.

Text tool. Take a guess…

Line tool will create straight lines. Dahhh….

Oval and Rectangle tools
Any idea what they allow you to draw?

Pencil tool. You are going to use it a lot. It draws outlines. Never use it to color in with. For coloring in use Brush tool. That’s what it’s there for. Pencil is for lines.

Brush tool. Draws fills. That is any mark you make with brush will be recognized as a shape, not line…

Ink Bottle will add a stroke if you don’t have a stroke around your shape. It will also can be used to change color or width of a stroke. It will not change the fill. For fill use Paint Bucket.

Paint Bucket. Adds a fill or changes color of the fill. Stroke color will not be affected.

Eyedropper. Use it to copy fill or stroke attributes (color, width, style, etc) from one object to another.

Eraser. You’d never guessed….

The rest of the Toolbar is self-explainatory.

That’s it. These are all the tools. Easy. Right?
Let’s start drawing.

Pick colors for the stroke and for the fill

Use Oval tool and draw a circle. For a perfect circle or square – hold SHIFT. To draw from the center – hold Alt

Look at the Timeline: Your keyframe now has content – white circle became black

Watch the video about the Timeline:

 

1. Choose the selection tool (black).
Click once inside the circle. You just selected the fill part of the circle.

2. Click once on the outline. You just selected the stroke.

3. When selected, fill and stroke live their own life: you can move them regardless of each other, you can resize them, change color, opacity, etc…. They act like they don’t know each other.
4. Now double-click inside the circle. See? Both fill and stroke are selected.

 

5. Look at the bottom of the screen. There is a panel there that’s called “Properties Inspector”. It is like your Options palette. It changes as you select different things and shows all the options available for this particular object.
Right now, if you still have your circle selected – you’ll see options for this shape:
position on the stage, dimensions, colors for fill and stroke, etc…

 

6. You can also change the circle's fill from
solid color to a gradient. You can do it in a few different ways:


7. After selecting the fill of your circle you can go to Color Palette, click on Paint bucket to set the options for the fill, then choose Type of fill: from Solid to Radial
8. You can also go to Properties Inspector and change the Fill type there.
9. You can do it right in the Tool Bar

10. After you apply the Gradient type, you can edit the gradient using the Fill Transform tool. Try it! You can change the position of a highlight, intensity, etc...

 
11. If at that time you decide to add another shape.....
12. ...be aware that if two shapes overlap on the same layer – the top object will overpower the bottom one. While the new shape is still selected, you can move it around, overlap the previous shape, etc…
13. But once you deselect it – everything that get to be overlapped by this new shape will be gone.
14. This is a good thing and a bad thing. The only bad thing is that you need to be aware of it and use a different layer or use other techniques (we’ll talk about them later). The good thing is that you can use top shapes to cut out holes or parts out of other shapes or add to shapes
15. Like in this case... If two shapes have the same color, you can create complex shapes by combining them.

 

16. See? Now it reads it as a single shape..

17. Back to our circle…. You are going to animate it. I deleted the stroke to make it look like a ball. You can keep it. It's up to you...

Let’s make it go from one side of the stage to another.

 

18. Double-click on the circle to select it. Move it to the left side of the stage.
Now… think…. How fast you want the circle to move? How long would it take to cross the stage? 1 second… 2 seconds….? It’s up to you. I want my circle to make its move in two seconds. I know the frame rate is 12 frames per second. That means it would take 24 frames to have a 2-second move. Right?

19. Go to the Timeline and click
on frame 24.

20. Then press F6 on your keyboard. This command will copy the existing keyframe to frame 24. Now you have two keyframes and bunch of frames in between. Keyframes are frames where changes occur. First keyframe is your starting point. In your case it’s the left side of the stage. Last keyframe is your destination point. In your case it’s the right side of the stage.
Other words: two keyframes are start and finish.

 

21. While still at frame 24, double-click on the circle and move it to the right side of the stage. You just specified the final position of your circle.

Now what happens in the frames between the two keyframes? Nothing so far… These frames just hold the information from your start keyframe. What we want them to hold is transition between start and finish. In other words – the actual step-by-step ( or frame-by-frame movement). Remember, like in claymation, where each following frame was slightly different to show your character’s move. You see, in Flash you don’t have to do it manually. It can be done automatically. All you need is to specify the Start position and the End position.

 

22. Go to the Timeline and click anywhere between the two keyframes.

23. Then go to Properties Inspector, Tween > Shape.

 

24. If you did everything right – the “in-between” frames will turn green and a solid-line arrow will go from one keyframe to another.

25. Press ENTER now. You should see your circle move.
Well done.

26. If you want - you can add more moves to the ball: just add more keyframes, change position of the ball and tween...

 

27. Your timeline should look something like that:

28. Go to Control > Test Movie. Preview your animation. Let me know that you’re done.

Save the .swf file to your flash drive. This is the type of a file you can share, email, upload to your website, etc...
You can start the next project!

 

 


Copyright © 2008-2014 Julianna Kunstler home | art portfolio | my ceramics | my graphics and cards | my paintings | art studio | gallery | art classes | art 1 | art 2 | computer graphics | adv.comp.graphics | visual lit | drawing & painting | ceramics 1 | art history | guestbook