Olympic medals, Phase 6 (Slider)

Phase 6:
Control the movement with a slider

Right now, there is one way to interact with the graphic - clicking on the tabs. In this phase, you'll add another way - moving a slider. You'll learn to use Flash's built-in slider (which is one of a collection of "components" that let you do cool things fairly easily). Adding this new feature will also make the logic considerably more complex.

Go back to our model and note the interactive timeline at the top:

We’ll create a highly simplified copy of that timeline that includes only 2 dates: 2008 and 1964 (when the games were in Tokyo).

That gives us a total of 4 optional views (2 for each year and 2 for each view): 2008 Geographic, 2008 Ranked, 1964 Geographic and 1964 Ranked:

Your current timeline looks like this (you may have different layers visible/locked):

Your finished timeline will look like this:

THINGS TO NOTE:

• Keyframes at 1, 15, 30, 45 & 60 (I'll tell you how to create the frame labels you see)
• The view in frame 60 is identical to the view in frame 1 (i.e. it's the 2008 Geographic view). Having this second copy of the 2008 Geographic view will let us create the animation between 1964 Geographic and 2008 Geographic.

Step 1 Create the new views and tweens

a. First save of copy of "Medals_5_control.fla" as "Medals_6_slider.fla"

b. Add keyframes for the Japan and Canada layers at 30, 45 & 60 (click on a frame and Insert->Timeline->Keyframe).

Next you'll move and resize the Canada and Japan circles to create the new views.

d. At each new keyframe, click on each country and use the properties panel to adjust the size and x,y position using the information in the table below. For example, here is what the property panel will look like for the Japan circle on Frame 30:

Here is the information:

NOTE: The positions and sizes of the circles in frame 1 should be identical to frame 60. If they arean't, fix them.

e. Now add a classic tween between each set of frames (click between the frames and Insert->Classic Tween).

f. Add frame labels to help you remember which frame is which by clicking on the frame, opening the Properties panel and typing in the label:

g. Add extra frames to the other layers so every layer has 60 frames (click on frame 60 and Insert->Timeline->Frame) (the tab layers all have a keframe at frame 15 - you can either drag those keyframes to frame 60 or delete them and recreate them at frame 60). Now you should see this:

h. Scrub the playhead to watch all 4 transitions (here is a video showing approximately how this should look)

SUMMARY THUS FAR:

You've just created 4 views (one is repeated in frame 1 and 60), with tween transitions between them.

It's one continuous animation, but to the user, it will feel like 4 discrete views

Here are the techniques you used:

• insert keyframes
• change position and size properties of the circles (which are really button objects) in the Properties panel
• create Classic tweens
• Label Frames in the Properties panel

Step 2 add the timeline slider

Now you'll add a slider. To do that, you'll take advantage of Flash's built-in interface objects called Components. Take a look at this video to get an introduction to components.

Here is the link to the page mentioned in the video (with instructions for the components): http://help.adobe.com/en_US/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fd1.html

a. Go to the Timeline and create a layer called 'slider':

b. Go to the Components Panel and drag a Slider component to the stage:

c. With the slider selected, look at the Properties panel (Windows->Properties):

Notice that this component is a Movie Clip symbol.

d. Replace "<Instance Name>" with “date_slider_mc”.  This is the name you'll use to refer to the slider in ActionScript.

Step 3: Set the slider parameters

As mentioned in the video about components, you can parameters specific to each component in the Properties panel

a. With the slider still selected open the Properties panel:

b. Fill in the values thusly:

• You want the slider to be horizontal so leave the ‘direction’ parameter alone.
• You want the slider to be functional, so leave the ‘enabled’ parameter alone.
• You want don’t need the image to update until You’ve moved the slider control so leave the ‘live Dragging’ parameter alone.
• You want the maximum to be ‘1’ (which will stand for '2008') so change the ‘maximum’ parameter - click on the ‘10’ and change it to ‘1’:
• And You want the minimum to be ‘0' (which will stand for '1964') so leave the ‘minimum’ parameter alone.
• You want the slider control to only stop on the years, but not on points in between. Change the ‘snapInterval’ parameter to '1’
• You want a tick mark at every date so change the ‘tickInterval’ to ‘1’
• You want the default display to be for the 2008 Olympics so change the ‘value’ parameter – set it to ‘1’
• You want to be able to see the slider so leave the ‘visible’ parameter alone.

The slider should now look like this:

Note the tick marks at each end, and the fact that the "thumb" is at the right end (since the default is set to "1").

Step 4: Add the dates above the slider

Now we’ll add in the date labels. These will just be little text labels placed above the slider.  We’ll use the same Arial font, but make it black and not bold. You may feel comfortable doing this without instructions – go ahead. If you’re forgetting or want guidance, here are the steps:

c. Select the text tool
d. Use it to draw a box above one of the slider ticks, then type in the date (whichever you're doing first - "1964" or "2008").
e. Select the selection tool
f. Go to the Properties and make the text size 12, the font family "Arial," the font style "Regular" and the color black.

g. Do the same for the other tick.

At this point, your slider should look something like this:

Design note: Unity

You want a design to feel coherent. If there is too much variety, it can feel chaotic and unprofessional. You won’t know where to look and how things relate to each other. Unity is primarily achieved by repeating elements in your design – everything from colors and fonts to line thickness and texture.  I had you use the same font, "Arial" to help unify the slider and the country names – you’ll notice that’s what the designers have done with the design we’re emulating.

Step 5: Align the dates

You may have been more careful about the position of your dates than I was, but I let them be poorly aligned to take this opportunity to learn to use the Flash alignment tools. Take a look at this video which shows how to use the align tools in both Illustrator and Flash

a. Select both dates (use the select tool and click on one date, then hold down the Shift key to select the second).

b. Open the Align panel and click on the "align bottom" button:

The result is perfectly aligned dates:

SUMMARY THUS FAR:

• You've added one of Flash's Components - the Slider component
• You've set initial parameters for the slider using the Component Inspector panel
• You added date labels above the slider using the Text tool and aligned them with the alignment tools
• You used the same font for the text labels and the circle labels to maintain Unity in the design

Step 6: Listen for a slider event

Now we need to get the slider to actually change the display.

This is actually pretty simple. It's just like a button. You'll use an event listener to know when the slider has been changed, and a function that says what to do when that event happens.

a. Download this file. It gives basic code for a slider component. It consists of:

• an import statement (without it you'll get an error, I'll explain this later): import fl.events.SliderEvent;
• a line adding an event listener to the slider
• a function which is triggered by the event listener

CODE MODULES
There will be a series of files like this in this lab and others. They're generic bits of code that each do one thing. I encourage you to collect these and perhaps create your own. They're a nice resource to remind you how to do things.

b. Paste the lines from the code module into your code as follows (Reminder: to get to your code pane, click on the first frame in your "actions" layer and go to WIndows->Actions):

• Put the import statement at the very top of yout code pane
• Put the event listener with your other event listeners.
  • change the name of the slider from "mySlider" to "date_slider_mc"
  • change the name of the function that is called by the listener from "updateNumber" to "changeDate"
• Put the function with your other functions (it doesn't matter what order they're in). Replace the body of the function with this line:

trace("hi");

c. Test the movie. When you drag the slider thumb, the Output panel should appear:

Now that the slider is responding to being changed, the next step is to specify what should happen when you make a change.

Step 7: Figure out the logic

Now it's time to step back and think about how to make this work.

Previously, we just had 2 displays, the 2008 geographic view and the 2008 ranking view:

When we clicked on the tab, the display ran the animation backward or forward depending upon which tab was active.

Now we have 5 displays:

We have 4 possible transitions and each could run either forward or backward. How do we figure out which needs to run?

There are a number of ways to solve this problem. The one I've chosen goes like this:

1. If I've clicked on a tab, that means I'm either changing from ranking to geographic view or vice versa, within the same year. Only two of the transitions do this:

2. If I've moved the slider, that means I'm either changing from 1964 to 2008 or vice versa, within the same type of view. Only two of the transitions do this:

So I've narrowed things down. Now if I figure out which frame I'm in, I've narrowed things down even further. Here's an example:

If I'm in frame 15:

...and I've just clicked on a tab, that means I want to change views, not years, so I want to move to frame 1. (If I had changed the slider, it would have meant that I wanted to change years, not views, which would have meant I wanted to move to frame 30).

The one tricky part is that if I'm at frame 1 and want to change years, I need to jump to frame 60 (which is identical to frame 1) and then transition to 45:

Conversely, if I was at frame 60 and wanted to change views, I would need to jump to frame 1 and move to 15.

To summarize, the logical flow goes like this:
   If a tab was clicked, figure out which frame I'm on and that will tell me which transition to run.
   If the slider was changed, figure out which frame I'm on, and that will tell me which transition to run.

Step 7: Write this logic in ActionScript

A first good step is to record the logic as comments in your code.

a. Immediately after the line that starts "function changeDate..." type this comment:

//To switch dates (1964 <-> 2008), I either want to move between frames 15 & 30 or 45 & 60
// if I'm at frame 1, I need to jump to frame 60 to run the animation

//If the current frame is 15, I need to animate to 30

//If the current frame is 30, I need to animate to 15

//If the current frame is 45, I need to animate to 60

//If the current frame is 60, I need to animate to 45

//If the current frame is 1, I need to jump to frame 60 and animate to frame 45

b. Next, you'll want to type a parallel set of comments in the "switchViews" function, but first you need to deal with the fact, that you already have some other code there that was based upon a situation in which there were only 2 views rather than 4. Rather than removing that code, just comment it out for now by putting "//" in front of the following lines

//stage.addEventListener(Event.ENTER_FRAME, moveForward);

//stage.addEventListener(Event.ENTER_FRAME, moveBackward);

c. Now you're ready to add the set of comments to the "switchViews" function which is parallel to the set you added to the "changeDate" function. Put them underneath all of the current code in the function, then alter them appropriately (for example, if the current frame is 15, you'll want to animate to 1 since that changes the view from "by ranking" to "geographic" without changing the date):

d. It's a good idea to make a backup of this file now. You're about to write some code and if you make a mistake, it will be nice to be able to go back to this point rather than starting over.

Step 8: Begin to implement that logic

You've defined the logic and summarized it with comments in your code. The next step is to write the code itself (if you're an experienced coder, you might want to figure things out for yourself - the directions below are more for those of us who prefer to go slowly rather than run the risk of getting confused and needing to start over).

...and since you're about to write enough code that it could get confusing if you get it wrong, this is a good time to pause and watch this video about debugging your code.

The first code will do what you see in the image below (it will test to see if it is at frame 1, and if it is, it will jump to frame 60, then run the animation to frame 45):

a. Find the place in the changeDate function where you've written the comment:

//If the current frame is 1, I need to jump to frame 60 and animate to frame 45

b. The first part, If the current frame is 1 is easy to code- write an "if" statement to test whether the current frame is 1

c. Now use the gotoAndStop() function to jump to frame 60.

d. Finally, after the gotoAndStop() line, add the line which adds an event listener to the stage which triggers the moveBackward function whenever a new frame has been entered:

stage.addEventListener(Event.ENTER_FRAME, moveBackward);

e. Test the movie. Drag the slider to 1964 to trigger the code you just wrote. Problem. The animation doesn't stop when it gets to frame 45, it keeps on going until it gets to frame 1 - because that's what the moveBackward function tells it to do.

f. To see this more clearly, put this line at the top of the moveBackward function:

trace(currentFrame);

When you test the movie again (and move the slider to 1964), you'll see the count go from 59 to 1.

Step 9: Continue to implement the logic

So the question is "how to get it to stop when you get to frame 45?" (or to whichever frame you're wanting to stop at for the given situation)?

The answer is to use a variable to store number of the frame you want the animation to stop at, and replace the hard-coded "1" with that variable. Here are the steps:

a. Replace this line in the moveBackward function:

if(currentFrame == 1) {

With this one:

if(currentFrame == endFrame) {

In which endFrame is a variable which you'll set in the changeDate function. Here is what you have there now:

if (currentFrame ==1) { gotoAndStop(60); stage.addEventListener(Event.ENTER_FRAME,moveBackward) }

b. Add the following line in the if statement before addEventListener:

endFrame = 45;

c. ...and of course, you need to define that variable at the top of the code pane. So add the following line at top (after the import statement):

var endFrame:uint;

(NOTE: a uint is a type of number - a positive integer)

d. Now test the movie again. This time, when you move the slider to 1964, the animation runs backward and stops at 45.

Great. One piece of functionality is in place.

e. Now find the place in the changeDate function where you've written the comment //If the current frame is 45, I need to animate to 60

f. Write the code for this comment just as you did above (this time, you'll have to modify the moveForward function.

g. Test your movie and move the slider to 1964 then back to 2008. The animation should simply reverse.

Step 10: Consolidate the moveForward & moveBackward functions

Notice that the moveForward and moveBackward functions are now very similar. The only real difference is that one calls prevFrame() while the other calls nextFrame().

a. Create one function called runTransition that is is just like the MoveForward function, but checks to see whether currentFrame is less than or greater than endFrame and then calls the appropriate function (prevFrame or nextFrame) depending upon the answer.

b. Now replace the references to the moveForward and moveBackward functions with references to the runTransition function.

c. Test your movie by moving the slider to 1964 and back. It should look the same as before.

d. Delete the moveForward and moveBackward functions

Step 11: Extend this functionality to all of the comments using a switch-case structure

You could now repeat what you've done with the first two comments. That would work, but when you have a lot of identical 'if' statements like this, it makes more sense to use a case structure

a. Download this code module which shows how to use the various conditionals in ActionScript including the switch-case structure

b. Make another backup of your file.

c. In the changeDate function, delete or comment out the code you've written and use the switch-case structure to test which frame you're in (i.e. test for the value of currentFrame), and set the value of the endFrame variable based on the answer.

d. After the case structure (i.e. after the closing curly bracket for the case structure), add the line that adds the listener:

stage.addEventListener(Event.ENTER_FRAME,runTransition);

Here's what mine looks like (click to view):

function changeDate(e:SliderEvent){
//To switch dates (1964 <-> 2008), I either want to move between frames 15 & 30 or 45 & 60
// if I'm at frame 1, I need to jump to frame 60 to run the animation
   switch (currentFrame) {
   //If the current frame is 15, I need to animate to 30
   case 15:
      endFrame = 30;
      break;
   //If the current frame is 30, I need to animate to 15
   case 30:
      endFrame = 15;
      break;
   //If the current frame is 45, I need to animate to 60
   case 45:
      endFrame = 60;
      break;
   //If the current frame is 60, I need to animate to 45
   case 60:
      endFrame = 45;
      break;
   //If the current frame is 1, I need to jump to frame 60 and animate to frame 45
   case 1:
      gotoAndStop(60);
      endFrame = 45;
      break;
   }
   stage.addEventListener(Event.ENTER_FRAME,runTransition);
}

e. Test the movie. You should still be able to move the slider back and forth.

f. Now create a similar switch-case structure for the switchViews function.

g. I'll have you make one fix which is a little clunky. Right now, you should have one case in which you gotoAndStop(1). Unfortunately, this triggers all of the code to run again. An adequate (if inelegant) fix is to change that line to gotoAndStop(2). Don't worry if this doesn't make total sense.

h. Test your movie. You should now be able to switch tabs or the date and always see the correction animation. You're done! (or not...if you're having trouble, use a trace statement to try to figure out where things are going wrong. If that doesn't help, go back to your last backup and try again - doing things a second time is a great, if tedious way to learn. If you're still stuck, look at mine.

i. At this point, it's safe to go back and remove those bits of code that you commented out and are no longer using.

FINAL PRODUCT: Medals_6_slider.fla

SUMMARY

Working with components

In the Components video, you learned about the 'Components' panel and the 'Component Inspector' panel and you added a slider component

To make the slider work, you added an event listener to it which listens for the SliderEvent and then ran a function (the changeDate function). You downloaded a Flash file that shows how to make a slider work, for future reference, in case you forget (if you don't, you have a far better memory than I).

Alignment

To make the date labels of the slider line up nicely, you learned about the alignment tools (great tools that will come in handy often) in this video.

Switch Case

You learned to use the switch case structure to test whether the result of a test matches one of several cases. You downloaded a Flash file that outlines the conditional and looping structures in ActionScript 3.0.

Logic

The rest of the work in this Phase was about figuring out the logic that allows you to have relatively simple code do relatively complex things. (How to make your single long animation act like 4 views with transitions between them). Figuring out the logic is one of the most challenging parts of writing code, as you probably already know. The trick is to keep breaking the task down into simpler and simpler steps until you get to the point where you say "I could write code to do that'