To build an application in Flash, you create vector graphics and design elements with the drawing tools and import additional media elements such as audio, video, and images into your document.

Next, you use the Timeline and the Stage to position the elements and define how and when they appear.

Using Adobe ActionScript (a scripting language) you create functions to specify how the objects in the application behave.

The format in which you edit Flash documents has the file extension FLA.

The format in which you export Flash documents for viewing in the Flash player has the file extension SWF.

The format that lets multiple people work on separate parts of the Flash file, and that works with Adobe programs such as After Effects, has the file extension XFL.

When you create a new project (or a new layer) that has nothing on the stage yet - the first keyframe is blank.

Let’s start drawing.

Select Oval tool.

Set some properties for your first object:

In Properties panel - pick colors for the stroke and for fill. Choose thicker stroke weight (at least 10) for easier editing.

Draw a circle.

For a perfect circle or square – hold SHIFT.

To draw from the center – hold Alt.

Now that your layer has content – the keyframe changed its appearance - it is solid grey with black dot.

Click once inside the circle using Selection tool.

The fill will turn into mesh. That shows that the fill is selected.

You can now edit the fill (just the fill alone) - move it, resize, etc.

To deselect - click outside the shape.

If you move the cursor close over the outline and click once - you will select just the stroke.

Now you can edit and transform just the outline.

If you double-click on a shape - it will select the entire shape - both fill and stroke.

Properties panel is like your Options palette. It changes as you select different tools or shapes 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, style of stroke, etc…

If you open Color panel - you can change color and type of fill and stroke.

Default gradient is Black to White.

You can modify the gradient by changing colors, adding more colors, or adjusting distance between color sliders.

To change one of the gradient colors - click on a slider and choose from the color picker above.

To add a color - click on the gradient scale.

You can also change color settings in Properties panel.

... or in the Tools panel.

All graphics in Flash are vector based.

That means that all shapes are paths with anchor points.

If you use Subselection tool and click on a path - you will see the shape structure.

You can select anchor points and modify paths with Subselection tool.

Use Free Transform tool to resize and rotate.

Edit the gradient using Gradient Transform tool.

Try it! You can change the position of a highlight, intensity, etc...

Use Lasso tool is you want to select and modify a part of an object.

Just free-hand outline the area you want to select.

Now you can edit this selection.

If at that time you decide to add another shape.....

...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…

But once you deselect it – everything that get to be overlapped by this new shape will be gone.

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

Like in this case...

If two shapes have the same color, you can create complex shapes by combining them.

See?

Now it reads it as a single shape..

Delete the stroke to make your circle look like a ball.

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

Select the ball.

Move it to the bottom left area of the stage.

Let's make the ball move to the right.

How fast do you want the circle to move?

How long would it take to cross the stage? 1 second… 2 seconds….? It’s up to you.

Higher frame rate increases the quality and smoothness of an animation, but creates a large file size an can slow down the animation.

For our purpose, we can change it to 12 FPS.

I want my circle to make its move in two seconds. I know the frame rate is 24 frames per second.

That means it would take 24 frames to have a 2-second move.

Right?

Go to the Timeline and click on frame 24.

Then press F6 on your keyboard.

This command will copy the existing keyframe to frame 24.

Now you have two keyframes.

Keyframes are frames where changes occur or the start and the end points. Keyframes are marked with a dot in the timeline.

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.

In other words: two keyframes are start and finish.

All frames in between - is where Flash generates the gradual changes based on your frame rate.

While still at frame 24, select the circle and move it to the right side of the stage.

You just specified the final position of your circle.

Your first keyframe still has the ball in the initial position - on the left.

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).

Like in traditional animation, 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. Which are our keyframes.

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

Then right-click and choose Create Shape Tween.

Shape tweens work best with simple shapes.

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

Click Play button to preview your animation!

Or press ENTER on the keyboard.

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

Your steps are:

1. Hit F6 to add a keyframe.

2. Move the ball to a different position.

3. Shape Tween by right-clicking between two keyframes.

You can continue to repeat the steps to make that ball bounce.

Your timeline should look something like this.

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

Save the .swf file to your h drive.

This is the type of a file you can share, email, upload to your website, etc...

Congratulations! You are done!!