INFO 424 SCHEDULE

Olympic medals, Phase 4 - Edge

One Tab Selected

switch tabs

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):

Adobe Edge Code panel

2: From the elements panel (click on the curly brackets next to the element of interest to access the code):

access to code from Elements panel

code panel from clicking on elements panel

3: From the timeline (click on the curly brackets next to the element of interest to access the code)

code from timeline

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:

geographic btn element

You'll see the code pane appear showing a list of action options.

b. Choose the first option, "click" to get this:

code for click

c. Click "Hide Element" from the list on the right hide element to get this:

hide element

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.

by ranking tab is 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:

curly brackets filled

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.

code panel

j. Zip together your 5 files together.

If you're on Windows...

  1. Select all the files you want to include in your .zip file
  2. Right click one of the selected files
  3. Choose "Send to" and select "Compressed (zipped) folder"
  4. It should output as one of the file names and .zip extension
  5. Rename file accordingly

If you're on Mac...

  1. Select all the files you want to include in your .zip file
  2. Right click one of the selected files
  3. Choose "Compress x Items" where x is the number of files you have selected
  4. It will be outputted in the same folder and named "Archive.zip"
  5. Rename file accordingly

Files to include in .zip

  1. MedalsTabs.html
  2. MedalsTabs_edgePreload.js
  3. MedalsTabs_edgeActions.js
  4. MedalsTabs_edge.js
  5. MedalsTabs_edge.an

You're done!

Final file: MedalsTabs.zip