Phase 4a: Make the tab buttons change appearance
INTRODUCTION: Where code lives in Edge Animator
In Flash, code lives in a single location - in the first cell of the first layer which is named "actions" (this isn't totally true...you'll find out in some of the last labs in this class that you can also have ActionScript code which is stored in separate .as fies, but you don't have to worry about that yet).
In Edge Animator, code lives in three .js files...but you access that code within the Edge application from one of three places:
1: From the code panel (click on the element of interest which is listed to the left to access the code):
2: From the elements panel (click on the curly brackets next to the element of interest to access the code):
3: From the timeline (click on the curly brackets next to the element of interest to access the code)
Pre-step:
a. Open "MedalsMovement.html" and save it as "MedalsTabs.html"
Step 1: Respond to a mouse click
First, you'll add some code to the geographicBtn that will cause the geographicSelected symbol to disappear when the button is clicked.
a. Click on the pair of curly brackets to the left of the geographicBtn in the elements panel:
You'll see the code pane appear showing a list of action options.
b. Choose the first option, "click" to get this:
c. Click "Hide Element" from the list on the right to get this:
d. When you click on the GEOGRAPHIC VIEW tab, you want the BY RANKING tab to appear as if it is unselected, which means you want the rankingSelected symbol to disappear - so replace "Text1" in the code with "selectedRanking."
e. Save the file and go to File -> Preview in Browser to see that when you click on the GEOGRAPHIC VIEW tab, the BY RANKING tab appears to be unselected.
Notice that in the Elements panel and in the timeline, the curly brackets to the left of the geographicBtn element now looked filled in, indicating that there is code behind them:
f. You also want to be sure the GEOGRAPHIC VIEW tab looks like it's selected (in case it had previously been unselected), so go back into the code by clicking on the curly brackets, move the cursor below the existing code and click on the Show Element button (to the right) to add the code for showing an element (replace "Text" with "selectedGeographic")
g. Add code to the rankingBtn to make the selectedGeographic symbol disappear and the selectedRanking symbol appear when this tab is clicked.
h. View the file in a browser to see that it works properly.
i. Open the code panel to see that it indicates that code has been added to respond to a click on both geographicBtn and rankingBtn.
j. Zip together your 5 files together.
If you're on Windows...
If you're on Mac...
Files to include in .zip
You're done!
Final file: MedalsTabs.zip