Creating a Motion Tween with a Stop Action and Replay Button

You will be creating a flash movie using animation and actions like the shown below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Create a New Document:

Choose File > New. In the New Document dialog box, the choose ActionScript 3.0, the default setting. Click OK.

Action Script

Use the workspace drop-down menu located on the upper right of the screen to select the Essentials workspace layout option.

Essentials

Set the Background Color of the Stage:

Click the Properties tab in the upper right side of the user interface to view the Property inspector, which displays the Stage properties for the file when no other objects are selected. By default, the Property inspector is vertically aligned along the right side of the workspace. The Size section displays the current Stage size setting as 550 × 400 pixels. The Stage background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color in the color picker that appears. The graphic below shows the stage color set to blue (#0000FF).

Properties

Choose File > Save and assign it the name motion_tween.fla and save it to your student folder.

Drawing a circle on the Stage:

After you've created your Flash document, you are ready to add some artwork to the project. Drawing shapes is a common task in Flash. When you use the drawing tools in the Tools panel, the vector graphics you create can be edited at any time. Select the Oval tool from the Tools panel.

Oval

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

No Stroke

Select a color of your choice from the Fill color picker, located directly below the Stroke color picker. Choose a fill color that contrasts well with the Stage color. In this example, an oval with a red fill color is selected.

Fill Color

Whenever you draw a vector shape, you have the option of selecting two drawing modes: Merge drawing mode and Object drawing mode. For the purposes of this tutorial, click the drawing mode button to select the Object drawing mode at the very bottom of the Tools panel. When the Object drawing mode is selected, the button will appear darker and selected.

Object Drawing

With the Oval tool still selected, press and hold the Shift key. Draw a circle on the Stage by Shift-dragging on the Stage. The Shift key is a modifier key; when you press and hold the Shift key while drawing or transforming a shape with the Oval tool, Flash constrains the Oval tool shape to a circle that is perfectly symmetrical.

Oval

Creating a Symbol:

After drawing some artwork, you can turn it into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it.

Click the Selection tool Selection Tool in the Tools panel.

Click the circle on the Stage to select it. A bounding box selection appears around the circle. 3.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. Use the Type menu to select the Movie Clip option.

Convert to Symbol

Click OK. A square bounding box is displayed around the circle symbol.

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

Library

Adding Animation to 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.

Circle Off Stage

Right-click the circle instance on the Stage and choose the option to Create Motion Tween in the menu that appears.

Motion Tween

Notice that the Timeline is automatically extended to Frame 24 and the red marker (the current frame indicator, also known as the playhead) moves to Frame 24. This indicates that the Timeline is prepared for you to edit the ending location of the symbol and create a one-second animation—assuming that you haven't changed default frame rate for the project from 24 fps in the Property inspector. A span of 24 frames is the equivalent of one second at a rate of 24 fps.

Timeline

While the playhead is still on Frame 24 of the Timeline, select the circle instance on the Stage and drag it to the right, just past the Stage area. This step of relocating the instance creates a tweened animation. On Frame 24, notice the diamond-shaped dot (known as a property keyframe) that appears.

Timeline

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

Motion Tween

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.

Drag Playhead

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.

Animation

The property keyframes on the Timeline mark the timing of the animation, indicating the frames whenever objects change on the screen and storing the properties of the object that change. In this example, it is the circle's location on the Stage (known as its X and Y or horizontal and vertical) properties that are changing as the playhead moves across the Timeline.

Experiment with editing the animation by changing the shape of the motion guide path. Click the Selection tool Selection Tool in the Tools panel and then click a section of the motion guide line. 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 Movie to test the FLA 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, close the Test Movie window.

Using a Stop Action to Stop the Timeline from Looping:

When you tested the movie, the animation loops by default as the movie plays in Flash Player. This occurs automatically because in Flash Professional, the Timeline is set up to loop back to Frame 1 after exiting the last frame—unless you instruct the movie to do otherwise. When you want to add a command that controls the Timeline, you'll add ActionScript code to a keyframe (indicated by a dot symbol) on the Timeline. This is known as adding a frame script.

It's always a good idea to name your layers if you have more than one. A large project can quickly become unmanageable if its layers are not descriptively named. Double-click the name 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.

New Layer

In an ActionScript 3 file, the ActionScript code must be added to the Timeline. It's considered best practice to create a layer named actions at the top of the layer stack, dedicated to holding the ActionScript code. Rename the new layer you just created to: actions. Make sure it is located above the animation layer.

Action 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 playhead to Frame 24. Click the actions layer at Frame 24 (to highlight the last frame on the actions 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 displaying a solid color).

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 FLA file. Place your cursor in the text area next to the number 1 (line 1) and type in the following action:

Stop Action

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). At this point, your Timeline should look similar to the graphic below. Close the Actions panel. If you need to edit the code, you can always select the keyframe in the Timeline and then open the Actions panel again.

Action

Choose Control > Test Movie to test the FLA file and watch it play in Flash Player. Notice that this time, the animation doesn't loop. You can return to Flash and test the movie again to watch the movie play again.

When you are finished previewing the animation, close the Test Movie window. Back in Flash, save the FLA file.

Publishing SWF Files:

When you are finished creating your FLA file, and you've tested it repeatedly, you are ready to publish it. The files that you output when publishing can be uploaded to a host server so that the project can be viewed in a browser. When you publish the file, Flash Professional compresses the data in the FLA file and generates a much smaller, more compact (and non-editable) SWF file. It's important to note that the FLA is your master, authoring file. Always keep the FLA file handy in case you need to make changes to the project. The SWF file that is generated by Flash when you publish a project is the file that you'll embed in a web page. If you are familiar with Adobe Photoshop, you can think of the FLA file as the equivalent of a master PSD file, and the SWF file as the equivalent of the exported JPEG file that will be inserted on a web page.

While you can choose to edit the publish settings and only publish the SWF file (and then use Adobe Dreamweaver or another HTML editor to insert the SWF file in a page) the Publish command makes things even easier. You can set the publish settings to automatically generate an HTML file that contains the code to embed the SWF file for you. Follow these steps to publish the FLA file and output the SWF file with the HTML file, so that you can view the published project in a browser:

Choose File > Publish Settings.

In the Publish Settings dialog box, select the Formats tab. Verify that only the Flash and HTML options are selected. This selection causes Flash to publish only the SWF file and an HTML file with the embed code. The HTML file is used to display the SWF file in a web browser. (The web browser then calls Flash Player, an installed plug-in, to render the contents of the SWF file onscreen).

Publish Settings

In the Publish Settings dialog box, select the HTML tab and verify that Flash Only is selected in the Template pop-up menu. This template creates a simple HTML file that contains only your SWF file when previewed in a browser.

Flash Only

Click OK.

Choose File > Publish to export the web-ready SWF and HTML files from Flash.

Open your web browser. Choose File > Open. Navigate to the folder where you saved your FLA file. The SimpleFlash.swf and SimpleFlash.html files have been saved there. (By default, Flash always saves the published files in the same folder alongside the FLA master file.) Click Open. The SWF file embedded in the HTML page now appears in the browser window

Adding a Replay Button to Restart the Animation:

In Flash, it is a best practice to create a new layer for each element in the project (with the exception of ActionScript code, which can be placed on any frame on the top-level actions layer). Click the New Layer button (page icon) in the Timeline to create a new layer for the button graphic. Double-click the default layer name and rename it: Button.

Button Layer

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

Button

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 reference 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 specified in the code, the behavior won't function as expected.

Instance

To update the text label of the button that is displayed on the Stage, 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 display a different label, you could enter Rewind, Again, or a different label of your choosing.

Replay

Select the keyframe on Frame 1 of the actions layer. Open the Actions panel (Window > Actions). Type the code snippet below and into the Script window:

Action

Choose Control > Test Movie 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.

Close the Test Movie window and save your FLA file.

Home