Olympic medals, Phase 3 - Make it Move in Flash

Phase 3:
Make it move

In Phase 3, you'll make the Japan and Canada bubbles move the way they do in the original graphic we're emulating.

Step 1: Convert to symbols

The first step will introduce you to object-oriented aspects of Flash. Here's what that means:

You’re about to use some of Flash’s built-in classes (blueprints) for drawing elements (there are many other classes for many other types of things). These classes turn otherwise passive, dumb eements into objects that are more functional – objects that can move in response to user input, for example.

There are three of these drawing element classes. Their names are:

• Graphic
• Button
• MovieClip

Each of these classes is used to produce objects with a built-in set of properties and capabilities. For example, the Button class creates objects which can change appearance in response to being clicked or hovered over. The MovieClip class creates objects that can contain animation. The Graphic class creates objects that don’t do much (but they can be reused and this helps keep file sizes small since the alternative would be to create several drawings which would each take up space).

a.  Watch this video which shows how to turn a drawing into a symbol

b. Make a copy of "Medals_2.fla" and name it "Medals_3_movement.fla"

c. Select both the Canada circle and its text by clicking on the selection tool   then using your cursor to drag a box around both of them:
     
What type of symbol should you convert this to? It doesn't need to be a MovieClip because it won't be animated (yes, you will move the entire symbol, but the symbol it self will be a static image). A Graphic won't work because you can't reference individual graphic symbols in code (in ActionScipt). So that leaves a Button.

d.   Convert Canada to a Button symbol called "btnCanada" (Modify -> Convert to Symbol):

You will know that you were sucessful when you see a small circle and plus sign appear. Every symbol has these. They indicate where the "transformation point" and "registration point" of the symbol are located. You'll learn about what that means later.

Something happened in this process that you should be aware of -

A symbol cannot be split across layers. Since the text and circle were in different layers, Flash merged them when you created the symbol and placed them on the whichever layer was on top (in this case "Canada text").

Open your library panel (Window -> Library) to see that your new symbol is now listed as an object in the library:

e.  Convert Japan to a Button symbol called "btnJapan"

Verify that your symbols are now on the "Canada text" layer and the "Japan text" layer and that the "Canada" and "Japan" layers are blank (when you hide them, nothing disappears). You can also tell that these layers are blank because the first cell in the timeline has an empty circle:  [NOTE: You’ll learn more about symbols that appear in the timeline soon.]

f.  When you feel confident that the "Japan" and "Canada" layers are empty, drag these layers anto the garbage can that appears just under the list of layers. Then, since "Japan text" and "Canada text" don't accurately describe what's on these layers, rename them "Japan" and "Canada":

Next, you’re going to convert the "Geographic View" and "by Ranking" tabs into button symbols as well.

Recall that each of these tabs consists of 3 elements - the text, a white box that is visible when that tab is selected, and a blue-gray box that is visible when the tab is NOT selected. These elements are each on their own layer.

g.  Lock and hide all of the tab layers with the exception of the "Geographic unselected" layer which is the one you’ll start with:

h.  Select the pale box that you now see on the stage:

i.   …and convert it to a button symbol with the name "btnGeographicUnselected" (using Modify -> convert to symbol)

j. Lock this layer, but keep it visible, then unlock and unhide the "Geographic selected" layer. (Since it is a white box with no border, it’s hard to see without the other layer visible):

k.  Select the box and convert it to a button symbol named "bntGeographicSelected"

l.  Now follow that same pattern to create "btnRankingUnselected" and "btnRankingSelected." (Try to do it without looking at the previous instructions to be sure you understand what you're doing)

m.   When you’re done with all of this, show, but lock all of these layers:

n.  Save your file

Now that your buttons and countries are objects, you’re ready to start making them interactive.

Step 2 Add keyframes

Before you continue, it’s time to revisit the visualization that you’re emulating:
http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html

When you first load the page, you see the 2008 "geographic view."

From that display, click on the "by ranking" button, and see how the countries rearrange themselves (note “Japan” and “Canada”, in particular).

Creating this animation is what you’ll do next. You’ll be working with the timeline to do this. So now it’s time to learn a little more about the timeline…

a.  Watch this video which explains frames & keyframes

b.  Unlock the "Canada" and "Japan" layers

c.  On the "Canada" layer, go to frame 15 and create a keyframe (either right-click and choose "insert keyframe" or go to the menu option Insert -> Timeline -> Keyframe):

If you "scrub the playhead" (i.e. click-and-drag the reddish rectangle at the top of the timelines) from left to right, you’ll see that Canada is now visible for 15 frames while everything else disappears after frame 1.

d.  Do the same for the "Japan" layer (i.e. insert a keyframe at frame 15).

Now, in cell 15, you want to move Japan and Canada to their correct locations for the 2008 "by Ranking" view. This is what that view looks like:

The position of the Japan and Canada circles look like this:

To get the position precise, we'll set its 'x' and 'y' properties.

e. Click on frame 15 of the Canada layer and select the Canada button. Then open the Properties panel (Window->Properties):

f. Type in the numbers you see in the image above for the X and Y values (i.e. "566.4" and "235.8").

g. For the Japan circle, type in "368.70" for the X property and "235.80" for the Y property.

If you scrub the playhead again, you’ll see that the two countries stay in their original positions until the moment you enter frame 15 when they jump to their new location.

The next step will be to make that movement smooth.

Step 3 Create tweens

You’ll create the movement with a "tween" (short for be’tween’).

a. Watch this video to learn how to create tweens (I made the video when "CS4" was the "current" version of Flash, but there haven't been any changes since then).

b.  Create a Classic Tween (called a “Motion Tween” in earlier versions of Flash), by clicking on the "Canada" timeline between the two keyframes, then choosing “Classic Classic Tween” from the “Insert” menu:

c.  Do the same for Japan.

d.  Now test your animation (Control->Test Movie). It should look approximately like what you see below, only larger (it might be slower or faster depending upon your frame rate setting). Pretty obnoxious, actually.

Congratuations! You’ve learned (or at least been introduced to) the core basics of Flash!

In the next Phase, you’ll begin to learn about using ActionScript

FINAL PRODUCT: Medals_3_movement.fla

SUMMARY

Convert to symbol (video)

TImeline: frames and keyframes (video)

Tweens (video)