continued...
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 'MedalCopy_3.fla' and save it as 'MedalCopy_4.fla.
Step 1: Open the "Actions" pane
a. Open the code pane by choosing "Actions" from the "Window" menu. (Even though this is a special pane, you can manipulate it 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).
Now you're going to do something that you'll do many times in the future - you're going to add an 'actions' layer to store all of your code.
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 cell of this layer: 
e. With that first cell selected, open the code pane again (Window-> Actions)
WHERE TO PUT CODE IN FLASH
Best practice is to do what you've just done - create a layer called "actions" and put your code in the first cell.
It is POSSIBLE to put code in any timeline cell on any layer (and this was a common practice in the early days of Flash and ActionScript). In addition to the main timeline, each MovieClip and Button symbol has its own timeline (you'll know more about that later). 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.
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: Give your button symbols names
In order to refer to buttons in your code, you need to give them 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 Active" 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 cell. 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 "GeographicActive_btn":
f. Lock and hide this layer and then go through the process for the other three buttons. Name them "GeographicInactive_btn", "RankingActive_btn" and "RankingInactive_btn".
Now all of your buttons have names that can be used to reference them in your code.
CODE HINTS
Take a moment to learn a little about how Flash helps you write code.Here is a brief video demonstrating this.
Type the name of one of your buttons (it doesn't matter whether it's before or after the existing line, but go ahead and add it after (leave that simple stop line there at the top where it won't get buried in other code):
Type a period (a 'dot') at the end of the name (ActionScript uses 'dot notation'). This will cause a dropdown list to appear. The list contains the methods (actions) and properties (parameters) available to this object. (REMINDER:, an object is based on a class which is like a blueprint. The blueprint includes all of the methods and properties that each objects made from that class will have). If the dropdown list DOES NOT appear, it's an indication that Flash doesn't recognize this as the name of an object. Check your spelling.
Before continuing on with the lab, delete what you just typed so you're back to having nothing in your code pane other than "stop();"
Step 4: Hide the "RankingActive_btn"
Right now, if you test your movie, the tabs will look like this:
All 4 button symbols are visible - the 'inactive buttons' which include the outline that you can see above, and the 'active buttons' which just consist of a white rectangle
You want the initial view to look like this:
...creating the impression that we're in the "Geographic View" tab and the "By Ranking" tab is in the back, waiting to be clicked and brought to the front
To do this, you want to hide the "RankingActive_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 ("RankingActive_btn"), then type a period and select 'visible' from the dropdown list. "RankingActive_btn.visible" is the name of this button's visibility property. Now set it 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.
b. 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 cell 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 line so continue on after that):
b. test your movie. When you click on the "BY RANKING" tab, it should change to look like this:
Woohoo!
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 continusouly 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'. An event object contains information about the type of event (whether it's an 'error event', a 'keyboard event', a 'focus event', a 'timer event', a 'mouse event', etc) and other relevant information (for example, a mouse click event, which is a type of mouse event, will include the location of the mouse and the name of the item that was clicked on).
listeners: Objects are oblivious to events passing by them unless listeners 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 manipuates the mouse)
TextEvent (triggered when the user enters text in a text field or clicks on a hperlink 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 subtype of 'mouse event' it's written as 'MouseEvent.MOUSE_UP'.
Step 6: Add another event listener
The next task will be able 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, dd an identical event listener to the GeographicInactive_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 'make 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 'RankingInactive_btn'.
Done! This phase has covered some essential concepts. If you review them briefly now while they're fresh in your mind, it will help them stick in your memory.
FINAL PRODUCT "'MedalCopy_4.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
