*** LATE BREAKING NEWS FLASH **** select the text in each tab, go the properties panel and change it from TLF text to "classic text" (otherwise, it will interfere with the function of the button)
Phase 4a: Make the tab buttons change appearance
Now you have an animated file that runs continuously jumping from one view in which the countries are arranged geographically, to another view in which the countries are arranged by number of medals.
In the next phase (Phase 5), you will allow the user to control the animation by clicking on the tabs.
In this phase, you'll prepare for that by making the tabs respond to being clicked by changing their appearance (to make one look active and the other look unselected so the user knows what has happened).
Pre-step:
a. Open "Medals_3_movement.fla" and save it as "Medals_4_tabs.fla"
Step 1: Open the "Actions" pane
a. Open the code pane by choosing "Actions" from the "Window" menu. (You can resize, move and dock this pane just like any other pane).
If you got this message
"Current selection cannot have actions applied to it"
That means that you had something selected that can't have code applied to it. (This is something you'll probably do accidentally many times, so it's useful to understand what's happening).
Next, you'll create a layer in which you store your code - this is a standard practice when working in Flash.
b. Close the Actions pane and create a layer for your code by selecting the top layer in the list, and clicking on the "add new layer" button. 
c. Name this layer "actions": 
d. Select the first frame of this layer.
e. Open the code pane again (Window-> Actions)
WHERE TO PUT CODE IN FLASH
Best practice is to do what you've just done - put your code in the first frame of the first layer which has been named "actions"
It is POSSIBLE to put code in any timeline frame on any layer (and this was a common practice in the early days of Flash and ActionScript). Unfortunately, if you take advantage of this and put code in several different locations, your application will quickly become complex and difficult to maintain.
Step 2: Stop the action
a. Write your first line of code:
This line stops the animation. WIthout it, the animation will run and loop endlessly.
b. Run your application (Control -> Text Movie)
Nothing happens! That's good! You've stopped the code so it no longer runs repeatedly. This sets you up to allow the user to control the animation.
2 things to notice about this little line of code:
Step 3: Name your buttons
In order to refer to buttons in your code, you need to give them instance names (they already have symbol names).
ADVANCE WARNING:
As you're following the steps below, if you inadvertently double-click on a button symbol, you may end up viewing that button's timeline. It will look something like this:
You'll learn more about this later. For now, just know that to get back to where you were, you need to click on "Scene 1" which appears in the lower left on this image above ("byRankingTab_btn" indicates that the button timeline that we see belongs to the button named "byRankingTab_btn") Feel free to try this out to see for yourself - double click on a button to see the button timeline, then click on "Scene 1" to return to the main timeline.
a. Start with the button on the "Geographic selected" layer. To make it easy to single out the button, hide and lock the other button layers:
b. Double-click on the first cell of this layer. Notice that the contents of this layer on the stage are now highlighted (since the contents of this layer is just a white rectangle, it was previously invisible):
c. Open the "Properties" panel (WIndow -> Properties).
d. Initially, the properties panel probably shows the properties for the frame. You want to see the properties for the button, so click on the button to see this:
e. In the box, replace "<Instance Name>", with "geographicSelected_btn" (the naming convention for button symbols is to start with btn, the naming convention for button instances is to end with _btn):
f. Lock and hide this layer and then go through the process for the other three buttons. Name them "geographicUnselected_btn", "rankingSelected_btn" and "rankingUnselected_btn".
Now all of your buttons have names that can be used to reference them in your code.
Step 4: Hide the "rankingSelected_btn"
Right now, if you test your movie, the tabs will look like this:
All 4 button symbols are curently visible - the "unselected buttons" which include the outline that you can see above, and the "selected buttons" which just consist of a white rectangle
You want the initial view to look like this:
...creating the impression that you're in the "Geographic View" tab and the "By Ranking" tab is behind, waiting to be clicked and brought to the front
To do this, you want to hide the "rankingSelected_btn" (which is a white rectangle). The way you hide an object is by setting its "visible" property to "false"...
a. In the code pane, type the name of the button ("rankingSelected_btn"), then type a period followed by "visible."
b. Set the visibility to " false" like this:
Notice that the parameter name and the Boolean value "false" are blue because they are special ActionScript words while the name of your button is black because it's just a made up name.
c. Test your movie. If everything is right, your buttons will look like this:
We're not done with this phase, but before continuing on, stop to review and remember what you've done so far:
SUMMARY (4a)
Accessing the Actions Pane: Window-> Actions
Put code in its own layer named 'actions', in the first cell.
Note the little "a" which indicates that this frame has code in it:
stop();
An important, if simple line of code that stops an animation from running.
Naming instances
Give objects an instance name so you can refer to them in code (using the 'properties' panel):
set the visible property to false to hide an object
Use dot notation to access the visible property
Phase 4b: create the interaction
Now you're ready to add the interaction (to make the tabs switch appearance).
Step 1: Add an event listener
THIS IS A BIG DEAL.
Why? Because once you know how to do add event listeners, you'll know the basic strategy behind making something happen in response to something else. So, for example, you can make a circle move when you touch it with your mouse, or you can make an animation run when you drag a slider. In other words, you can create interaction which is fun and powerful.
a. Write the code you see below (you've already written the first two lines, so continue on after that):
b. test your movie. When you click on the BY RANKING tab, it should change to look like this:
Now to back up and develop an understanding of what just happened and why. Here is a cartoon which illustrates the idea of events being broadcast continuously and "heard" only by objects which have listeners for that type of event.
events: While a Flash application is running, it is constantly sending out information about what is happening. It sends this information packaged as objects called 'events'. In the cartoon below, events are shown in red:
listeners: Objects are oblivious to events passing by them unless listeners for those events have been added to them. Each listener listens to only one type of event.
A listener needs two pieces of information in order to do its job:
TYPES OF EVENTS
So you might be wondering "how do I know what types of events are available and what they're called?" Mostly, you learn them as you go along, but you can also look them up.
They're listed in the ActionScript 3.0 Language reference in 2 places:
here (basic events)
...and here (events associated with "components" which are bits of pre-packaged code and interface elements like drop-down lists and sliders - you'll learn more about them later)
The types of events you're likely to use in this course are:
DataEvent (triggered when data has finished loading)
KeyboardEvent (triggered when the user interacts with the keyboard)
MouseEvent (triggered when the user manipulates the mouse)
TextEvent (triggered when the user enters text in a text field or clicks on a hyperlink in an HTML field)
Now back to the code you wrote:
Look at the function called by the event listener:
NOTE: Earlier I referred to the event as a "mouse up" event. Just now, i referred to it as a "mouse event". You may have guessed that a "mouse up" event is a type of "mouse event". It's written as "MouseEvent.MOUSE_UP".
Step 6: Add another event listener
The next task will be to allow the viewer to click on the GEOGRAPHIC VIEW tab to change back to the original appearance. You could, of course, duplicate the code you just wrote, but to learn a little more about events, I'll have you do it differently - you'll use an "if clause" and refer to the event object...
a. Just below the line where you've added your first event listener, add an identical event listener to the geographicUnselected_btn:
Now both events trigger the same function. But you want different things to happen depending upon which tab you clicked on, so you'll modify your function.
b. Change your function to look like this:
c. Test your movie again. You should now be able to click on either tab when it's looking inactive and make it look active.
Here's an explanation of the new code:
An "if clause" has been added. ActionScript has a fairly conventional way of writing "if clauses":
Also note that you use the double-equal sign "==" to test for equivalence as shown below. (A single equal sign "=" doesn't work here because it means "set the thing on the left equal to the thing on the right.")
But perhaps the most interesting thing here, is the use of the event object:
As I mentioned before, an event is an object, so it has properties and methods. One property of a MouseEvent is the identity of the object that was clicked to trigger the event. It's called the "target."
In the code you've just written, the test is checking to see whether the object clicked on has the name "rankingUnselected_btn."
Done! This phase has covered some essential concepts. You might want to review them briefly now while they're fresh in your mind to help them stick in your memory.
FINAL PRODUCT Medals_4_tabs.fla
SUMMARY (4b)
event listener: added to an object so that it will respond to a specific event by running the specified function:
objectName.addEventListener(<type of event>, functionToRun)
if clause
if(<test>){
// do something
}else{
//do something
}
testing for equivalence
item1 == item 2
event object (target)
theEvent.target.name
