Phase 13: Add more countries
The next step is a fun one - switch XML files to one with more data and see if your code still works!
Step 1: Replace XML file
a. Save Medals_12_tweens.fla as Medals_13_moreData.fla.
b. Download this XML file.
c. Update the name of the xml file in the code (previously it was "medalXML_2.xml" now it will be "medalXML_3.xml."
d. You'll need to change your stage size to accommodate this data. Set it to 900px wide and 550px high (Modify ->Document).
e. Test your code. You should now see 4 circles and they should respond properly when you click on the tabs/slider:
DISCLAIMER: The data for Argentina & Egypt isn't entirely accurate. I found that the tweens distorted the circles if they started out too small and decided not to addres this complexity for now.
Step 2: Add a 3-year slider with ActionScript
This xml file contains data for 1928 as well as 1964 and 2008. To take advantage of this, you could change the slider to add a third date and change the code to accommodate this date.
Even better is to learn to create the slider in ActionScript.
Rather than just walk you through the steps to create this code, I'll start by walking you through the steps to figure out how to create the code:
a. On this page is a list of Flash UI components.
b. Click on the Slider Components link to find some explanation and some sample code.
c. Go the the section "Create an application with the Slider component using ActionScript."
d. Notice step 3 "Drag the Label component and the Slider component from the Components panel to the current document’s Library panel." Since you've already put a slider on your stage you'll find that it's already in your library. But the label component isn't there so go ahead and drag that in (don't worry if your library doesn't look exactly like mine, just be sure that you have both the Label and Slider components):
The next step is to copy the code they provide and tweak it for your purposes. My strategy for pasting in a bunch of new code is to put a line before and after that code so I can remember where it starts & ends. Something like this:
//------------------------
PUT NEW CODE HERE
//------------------------
e.You can paste this code anywhere - after you define the variables is a good place. Go ahead and paste it in.
There is a link to an image in the code that no longer works. It's in the line that starts with aLoader.source =
f. Replace the link with this one: http://3.bp.blogspot.com/_Wr6Vy4Lhd2s/ShlYsL7zJGI/AAAAAAAAB6g/MKuLApawWvU/s400/picture-067-copy.jpg
g. If you test your file now, you'll see this:
h. Drag the slider to see how it works.
i. Save a backup of this file, then begin to remove irrelevant elements (e.g. the code that loads the photo) - until all you have is the code that places the slider and its label on the stage.
j. Modify the code to add two more labels to the stage (for a total of 3 - one for each of the three years represented in the data - 1928, 1964 and 2008).
k. Modify the code to move the slider and labels into position under the tabs.
l. Modify your code to replace references to the old version of the slider with the one you're now adding with code. When everything is working, delete the slider from the stage. The final result should look like this:
Step 3: Accommodate the additional year
a. You have 3 years on the slider, but your code only checks to see whether or not the slider value is 0 - which worked fine when there was only one other option (i.e. when there were only 2 possible values). Change that (a switch case statement would be appropriate here).
FINAL PRODUCT: Medals_13_moreData.fla (we no longer need your .xml file)