top of page

Graphic Design

Lesson 12 Part 2-

Flash: Adding a REPLAY Button

Adding a REPLAY button to your Bouncing Ball animation

Step #1

Open up your Bouncing Ball Flash File from Lesson 12.

If you accidentally submitted it, let me know and I will unsubmit it!

In Lesson 12, you stopped the animation from looping by adding a stop() action to the last frame of the Timeline. When the playhead reaches the last frame, it is instructed to stop, which prevents it from looping back to Frame 1.

Flash is extremely flexible. There are many 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!)

Follow these steps to add a Replay button and

the ActionScript to make it work to your file:

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:

In this set of instructions, you'll learn how to add a Replay button. When a user clicks the button, it causes the playhead to begin playing from Frame 1 again. 

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, or any desired location.

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

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 Movie>Test to test the FLA file.

 

The animation plays once and then stops.

 

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!

 

When it works, save your .FLA file to the desktop and submit it to Moodle!

bottom of page