Activity 1


Adobe Flash is a multimedia graphics program especially for creating moving images for use on the Web. Flash has opened up a whole new world for digital animators. You can rotoscope with it, but you can also animate directly in Flash. Learning this program can be very motivating for students because they don’t have to be the greatest artists to be successful. The drawing tools in Flash function as a virtual pencil making it easy to create original animated images.



Watch this video before you begin:

Now complete the steps below:

Creating a simple FLA file

This tutorial guides you through the process of creating a basic FLA document. You’ll use this workflow when authoring projects in Flash Professional. The first step involves creating a new document:

  1. Choose File > New.
  2. In the New Document dialog box, the ActionScript 3.0 file type is selected by default (see Figure 2). If ActionScript 3.0 is not selected, select it now. Click OK.

The New   Document dialog box showing the Flash Professional file types

Figure 2. The New Document dialog box displays the file types you can create in Flash Professional.
  1. Use the workspace drop-down menu located on the upper right of the screen to select the Essentials workspace layout option. This step ensures that the layout of the panels in Flash Professional match the arrangement of the panels displayed in the screen shots for this tutorial.

Note: Later, you can create a preset of your own custom workspace by positioning the panels in any way that you prefer. Choose the New Workspace option and enter a name to save your personal configuration. Once it’s saved, you can reset the workspace by choosing its name from the workspace menu.

Choosing the Essentials option to see the workspace layout used by the tutorial

Figure 3. Select the Essentials option to see the workspace layout used for this tutorial.
  1. 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.
  2. 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 (see Figure 4). The Stage background colour swatch is set to white. You can change the colour of the Stage by clicking the swatch and selecting a different colour in the colour picker that appears.

Property inspector showing the Stage size and background color

Figure 4. The Property inspector displays the Stage size and the background colour.

Tip: You can set the background colour of the Stage in the Flash movie by choosing Modify > Document or by selecting the Stage and then modifying the Stage colour swatch in the Property inspector. There’s no need to draw a rectangle to define the background colour. When you publish your movie, Flash sets the background colour of the published HTML page to the same colour as the Stage background colour (if you choose to generate an HTML file).

  1. Choose File > Save.
  2. Select the location to save the FLA file on your hard disk. Name it firstlastname_activity1.fla and then click Save. Make a note of the location where you save the FLA file because you’ll need to find this directory at the end of this tutorial.

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. The following steps describe how to create a circle; later, you’ll use this circle to create some basic animation. Follow these steps:

  1. Select the Oval tool from the Tools panel.

Oval tool in the Tools panel

Figure 5. Tools with a triangle in the bottom left corner contain more than one option; click and hold the shape tool icon to select the Oval tool from the list that appears in the Tools panel.
  1. Use the stroke colour swatch in the Property inspector to select the No colour option (red diagonal stripe) from the Stroke colour Picker (see Figure 6).

Selecting the No Color option in the Stroke Color Picker

Figure 6. The universal “no” symbol (red diagonal stripe) indicates that the colour swatch is set to the No colour option in the Stroke colour picker.
  1. Select a colour of your choice from the Fill colour picker, located directly below the Stroke colour picker. Choose a fill colour that contrasts well with the Stage colour. In this example, an oval with a blue fill colour is displayed on top of a red Stage colour.
  2. 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, as shown in Figure


Object drawing mode

Figure 7. The Drawing mode button is a toggle that alternates between modes; choose Object drawing mode by clicking the button to make its background appear darker.

To learn more about the two drawing mode options, see the Drawing modes section of the Flash Professional online documentation.

  1. While the Oval tool still selected, press and hold the Shift key. Draw a circle on the Stage by Shift-dragging on the Stage (see Figure 8). 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.

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

Circle drawn on the Stage

Figure 8. Press and hold the Shift key while using the Oval tool to draw a circle on the Stage.

Tip: If you’re drawing your circle and you see only an outline of the shape instead of a fill colour, first check to ensure that the stroke and fill options are set correctly in the Property inspector while the circle is selected. If the fill colour swatch is set to a colour and the stroke is set to No colour, the settings are correct. Next, make sure that the option to Show Outlines is not selected in the layers area of the Timeline. (There are three icons to the right of the layer names: eyeball icon, lock icon, and outlines icon. Double-check that the outlines icon displays a solid fill and not just a square outline. If you are not sure if the Show Outlines option is enabled, click the icon repeatedly to toggle the visual state between normal view and outline view.)

Part 1 – Tweening:

Follow these steps to create a symbol:

  1. Click the Selection tool in the Tools panel (see Figure 9).

Tools panel with the Selection tool selected

Figure 9. The Selection tool is the first item displayed in the Tools panel.

  1. Click the circle on the Stage to select it. A bounding box selection appears around the circle.
  2. While the circle is still selected, choose Modify > Convert to Symbol (or press F8) to access the Convert to Symbol dialog box (see Figure 10). Enter the name of the symbol in the Name field. Use the Type menu to select the Movie Clip option.

Tip: You can also convert a graphic into a symbol by selecting it and dragging it into the Library panel.

Convert to Symbol dialog box

Figure 10. Enter a descriptive name for the symbol in the Convert to Symbol dialog box.

  1. Click OK. A square bounding box is displayed around the circle symbol. You’ve just created a reusable asset, called a symbol, in your document. In this case, you created a movie clip symbol named my_circle. (For more information about symbols, read Working with symbols in the Flash Professional online documentation.)

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

Animating the circle

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

  1. Select the circle on the Stage and drag it off the Stage area to the left (see Figure 11).

Circle moved to the left of the Stage area

Figure 11. Reposition the instance of the my_circle symbol to the left of the Stage area.

  1. Right-click the circle instance on the Stage 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 (the current frame indicator, also known as the playhead) moves to Frame 24 (see Figure 12). 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. (For more information about the Timeline, read Working with timelines in the Flash Professional online documentation.)

Extended Timeline ready for editing on frame 24

Figure 12. The Create Motion Tween operation automatically extends the frames in the Timeline and places the playhead on Frame 24.

  1. 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. On the Stage, also notice the motion guide that indicates the circle’s path of motion between Frame 1 and Frame 24 (see Figure 13).

A 24-frame animation showing the circle at the end of the animation on frame 24

Figure 13. After creating a 24-frame tween animation, the circle is located at the far right at the end of the animation (when the playhead is located on Frame 24 of the Timeline).

  1. 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.
  2. 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 (see Figure 14). 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.

The tweened animation showing a change in direction at frame 12

Figure 14. After placing the playhead on Frame 10 and dragging the circle instance down on the Stage, the motion guide of the tweened animation and the property keyframe in the Timeline reflect the location change of the animated circle.

  1. 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. Drag it to bend the line shape (see Figure 15). When you bend the motion path, you cause the animation to follow along a smooth curved line instead of a rigid straight line.

The tweened animation showing curves added to the motion guide line

Figure 15. Use the Selection tool to adjust the tweened animation’s motion path; rather than a straight line the edited motion guide line is now curved.

  1. Choose Control > Test Movie to test the FLA file and watch the animation play back in Flash Player.
  2. 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.

Tip: Keyframes are used to place ActionScript and assets on specific frames in the Timeline. When you review the Timeline of a FLA file, you can locate scripts and content by looking for the keyframe dots. Keyframes that have frame scripts display a lower case “a” symbol.

Follow the steps below to add ActionScript code to your FLA file. You’ll add one of the most common Timeline commands, which is called the stop action:

  1. 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.
  2. Click the New Layer button (page icon) in the lower left of the Timeline panel. 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. 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.
  3. 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).
  4. 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:


Note: This step assumes that you’re using the default mode of the Actions panel. If the Actions panel is in Script Assist mode, it won’t allow you to type directly into to the text area. To return to the default mode, uncheck the magic wand icon in the upper right corner of the Actions panel.

  1. 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 Figure 16. 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.
  2. 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.

The completed timeline showing the stop action applied to frame 24 of the actions layer

Figure 16. Add the stop action frame script to Frame 24 of the actions layer.

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

activity from:

Part 2– Saving, Exporting and Posting your work:

  • Save as: firstlastname_activity1.fla in your Unit 3/Activity 1 folder
  • export as:  firstlastname_activity1.swf in your Unit 3/Activity 1 folder