** REMEMBER **

Save your working files (files that aren’t done yet) to the Desktop,
then drag to Google Drive.

Save it like this:
From your program, go to FILE>SAVE AS and choose DESKTOP,
then drag from the DESKTOP to GOOGLE DRIVE and the Correct Class Folder.

Save your final file in Google Classroom.
Just add the file from Google Drive.


In this lesson, you will learn how to animate a bouncing ball with Flash!

STEP #1

First, Open Flash by clicking the icon that looks like this:

flash song 1

At the first screen you see, choose ActionScript 3.0.

flash-song-2

This is your “Stage”, just like Photoshop’s Canvas. 

This is the area that you will be working on.

Click WINDOW > WORKSPACE.

flash-song-3

For this lesson, we will Choose CLASSIC.


Step #3

OK, it’s time to get the ball rolling, er, I mean Bouncing! Follow along carefully.

I will write what to do and show you in the graphics below.

Drawing a circle on the Stage
Drawing shapes is a common thing in Flash.
When you use the drawing tools in the Tools panel, the graphics you create can be edited at any time.

The following steps describe how to create a circle.
Later, you’ll use this circle to create some basic animation.

Follow these steps:

Select the Oval tool from the Tools panel.

ball2

Use the Stroke Color Swatch in the Property inspector to select the
No Color option (red diagonal stripe) from the Stroke Color Picker.

ball3

Select a color of your choice from the Fill Color Picker,
located directly below the Stroke Color Picker (bottom left of the screen).

ball4
With the Oval tool still selected, press and hold the Shift key.

Draw a circle on the Stage by Shift-dragging.

When you press and hold the Shift key while drawing or transforming a shape like the Oval tool,
Flash makes the Oval shape a circle that is perfectly round.

Note: The Shift key works similarly with other shapes;
when you press and hold Shift while drawing a shape
with the Rectangle tool, you’ll create a perfect square.

ball5


Step #3

Creating a Symbol and Adding Animation! 

After drawing some artwork, you should turn it into a symbol.

A symbol can be reused anywhere in your project without the need to re-create it.

It is usual to use symbols to create animations.

Click the Selection Tool in the Tools panel.

ball6

Double-Click the circle on the stage to select it.

ball7

While the circle is still selected, choose Modify > Convert to Symbol (or press F8)
to access the Convert to Symbol dialog box.

ball8

Enter the name of the symbol in the Name field (my_circle).

Use the Type Menu and select the Movie Clip option.

ball9

Click OK.

A square box is displayed around the circle symbol.

You’ve just created a reusable shape, called a symbol, in your document.

In this case, you created a movie clip symbol named my_circle. 

ball10

If the Library Panel is not open, choose Window > Library to access it.

ball11


The new symbol is now listed in the Library Panel.

ball12

(When you drag a copy of the symbol from the Library panel to the Stage,
the copy on the Stage is called an instance of the symbol.)


 Step #4

Animating the circle

In this section, you’ll use the symbol in your document to create
a basic animation that moves across the Stage!

Select the circle on the Stage and drag it off the Stage area to the left (into the grey area).

ball13


CONTROL + CLICK
the circle
and choose the option to Create Motion Tween in the menu that appears.

ball14

Notice that the Timeline is automatically extended to Frame 24 and the red marker
(also known as the playhead) moves to Frame 24.

 This tells you that the Timeline is ready for you to edit
the ending location of the symbol (the circle) and create a one-second animation.

ball15

While the playhead is still on Frame 24 of the Timeline,
select the circle on the Stage, hold the Shift Key, and drag it to the right,
just past the Stage area (into the grey).

This step of moving the circle creates a tweened animation.

ball16

On Frame 24, notice the diamond-shaped dot (known as a property keyframe) that appears.

On the Stage, also notice the motion guide that indicates the circle’s path of motion
between Frame 1 and Frame 24.

ball17

In the Timeline, drag the red playhead back and forth from Frame 1 to Frame 24
to preview the animation; this is known as scrubbing the Timeline.

ball18


You can change the circle’s direction in the middle of the animation.

First, drag the playhead to Frame 10 in the Timeline.

Then select the circle and move it to another location, further down on the Stage.

Notice that the change is reflected in the motion guide
and the new dot (property keyframe) appears on Frame 10 of the Timeline.

ball19


Experiment with editing the animation by changing the shape of the motion guide path.

Click the Selection Tool in the Tools panel
and then click a section of the motion guide line (one of the dots).
Drag it to bend the line shape.

When you bend the motion path, you cause the animation
to follow along a smooth curved line instead of a rigid straight line.

ball20

Choose Control > Test Movie > Test to test the FLA (FLASH) file
and watch the animation play back in Flash Player.

ball21

 

The movie loops automatically, so you can watch the circle move across the window repeatedly.
When you are finished watching it, close the Test Movie window.


Step #5 

Using a Stop Action to stop the Timeline from looping

You noticed that the animation loops as the movie plays
in Flash Player. This happens automatically because in Flash, the Timeline
is set up to loop back to Frame 1 after exiting the last frame—unless you
tell the movie to do something else.

When you want to add a command that controls the Timeline (remember,
the Timeline is where you tell the animations what to do!),
you’ll add ActionScript code to a keyframe (indicated by a dot symbol) on the Timeline.

This is called adding a frame script.

Follow the steps below to add ActionScript code to your FLA (Flash) file.
You’ll add one of the most common Timeline commands, which is called the STOP action!

It’s always a good idea to name your layers if you have more than one.

A large project can quickly become confusing if its layers are not named.

Double-Click the name on the layer to rename Layer 1.

In the field that appears, enter the new name: animation.

ball22

 

Click the New Layer button in the lower left of the Timeline panel.

ball23

The ActionScript code must be added to the Timeline.

It’s best to create a layer named actionscript
at the top of the layer stack, just for the ActionScript code.

 Rename the new layer you just created to: actionscript.

Make sure it is located above the animation layer.

ball24

Now that you’ve created a layer to place your scripts, you can add keyframes
to the actions layer to associate the ActionScript code with specific frames.

Move the red playhead to Frame 24.
Click the actionscript layer at Frame 24
(to highlight the last frame on the actionscript layer).

ball25

Insert a keyframe on Frame 24 of the actions layer by choosing
Insert > Timeline > Keyframe (or pressing F6).

ball26

Notice that an empty, blank keyframe appears
(you can tell that the new keyframe doesn’t contain any graphics
because the dot icon for the keyframe is hollow, rather than being black).

ball27

 

Select the new keyframe with the Selection tool.

Open the Actions panel (Window > Actions).

ball28

 

The Actions panel contains the Script window,
which is a large text field you’ll use to type or paste ActionScript code directly into your FLA file.
Place your cursor in the text area next to the number 1 (line 1) and type in the following action:

stop();

Then click the small x on the top left of the Actions panel.

ball29

 

After typing the line of ActionScript code in the Script window,
you’ll notice that a little “a” icon appears above the keyframe in the actions layer of the Timeline.

This indicates that the keyframe contains a frame script (also known as an action).

ball30

Choose Control > Test Movie > Test to test the FLA file and watch it play in Flash Player.

 Hopefully you’ll notice that this time, the animation doesn’t loop.
If it is still looping, let me know.

You can return to Flash and test the movie again to watch the movie play again.


Adding a REPLAY button to your Bouncing Ball animation

There are lots of ways that you could use to create a Replay button,
including restarting the playhead when a user presses a key on their keyboard,
or when they click on the Stage, or when they click a button.

 To achieve any of these options, you’ll add some
ActionScript code that responds to the user.

This section is a little more advanced than the previous sections—
it covers some new concepts that you’ll use to control the behavior of
your Flash movies with programming!

 (Don’t be scared, we will take it slow, and it is cool at the end!)


Follow these steps to add a Replay button and the ActionScript to make it work to your file:

 In Flash, it is a best to create a new layer for each element in the project
(except for ActionScript code, which can be placed on any frame
on the top-level actionscript layer).

Click the New Layer button in the Timeline to create a new layer for the button graphic.

Double-click the default layer name and rename it: Button.


Open the Components panel (Window > Components) and drag a button component
from the User Interface Components folder to the Stage
.

Position the button in the lower middle of the Stage area.


While the Button component still selected, open the Property inspector
and locate the text field at the top named <Instance Name>.

 Enter the name for the button instance:  replay_btn. This is an important step.
By naming the button instance, you’ll be able to use it by name using the ActionScript you’ll add to the project.

 If the button instance’s name does not exactly match
the button’s name in the code, the behavior won’t function as expected.


To update the text label of the button that is displayed on the Stage (what it shows on the button),
enter the text “Replay” into the LABEL field in the
Component Parameters area in the Properties panel.

 This label helps users understand what the button will do.
It is purely visual and does not affect the performance of the code.

 If you’d prefer that the button show a different label, you could enter Rewind, Again,
or a different label of your choice.


Select the keyframe on Frame 1 of the actionscript layer.

 Open the Actions panel (Window > Actions).

 Copy and paste the code below into the Script window:

import flash.events.MouseEvent;
function onClick(event:MouseEvent):void
{
 gotoAndPlay(1);
}
replay_btn.addEventListener(MouseEvent.CLICK, onClick);

It should look like this in the window:

ball32


 Close the Actions window.

 Choose Control > Test Movie > Test to test the FLA file.

 The animation should play once and then stop.

 Click the Replay button to restart the animation
and watch the circle move across the Stage again.

Show me that it works and CONGRATULATIONS!

 If it does not work, let me know and I will take a look!


From your program, go to FILE>SAVE AS and choose DESKTOP,
then drag from the DESKTOP to GOOGLE DRIVE and the Correct Class Folder.

Save your final file in Google Classroom.
Just add the file from Google Drive.