BOUNCING BALL IN ANIMATE

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

STEP #1

First, Open Animate.

Choose FILE>NEW. Then in the little mini screens, choose STANDARD.

Click CREATE.

This is your "Stage", just like Photoshop's Canvas. 

This is the area that you will be working on.

---

Step #2

Follow along carefully.

FIRST AND IMPORTANT! If you save any file names. copy code, etc, make sure everything is capitalized EXACTLY the way I have it written in the lesson!!!

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.

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

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

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.

---

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.

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

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

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

Use the Type Menu and select the Movie Clip option.

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. 

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

The new symbol is now listed in the Library Panel.

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

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

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.

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.

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.

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.

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.

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.

Choose Control >Test to test the file and watch the animation play back in Flash Player.

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 ANIMATE Player. This happens automatically because in ANIMATE, 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 Animate 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.

 

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

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.

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

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

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

 

Select the new keyframe with the Selection tool.

Open the Actions panel (Window > Actions).

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

 

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

Choose Control >Test to test the file and watch it play in Animate 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 Animate 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 Animate, 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:

---

 Close the Actions window.

 Choose Control > Test to test the 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.