This lab is mostly about dynamically changing the color of objects in Flash. You'll use that capability to create a Choropleth map which is a standard type of data map in which the color or shade of each area reflects the data value for that area. This is a very useful and common data display, but it does have its drawbacks - the area of a state may be unrelated to the data value in question (e.g. percent of people who are employed), but a larger area will have more visual impact than a smaller area creating a misleading impression.
We'll use this visualization as inspiration:
SPLIT COLOR SCHEME
Notice the color encoding. The values represented go from a positive extreme (2.1% or more) to a negative extreme (-2.1% or more) with 0 in the middle. Pink colors mean "negative values" and green colors mean "positive values". The resulting 'split color' scale is very effective. Imagine if instead, there were just 6 shades of pink rather than both pink and green. It might still work, but you couldn't easily glance and see the 'positive' versus 'negative' states because, you would have to constantly remind yourself where the break happens in the middle range.
COLOR BLINDNESS
Another thing to watch out for is a color scheme that requires users to distinguish between green and red. A lot of us (about 10% of men and a much smaller percentage of women) have some form of color blindness. One form of color blindness sees blue and yellow as the same, but by far the most common form sees red and green as the same.
Here's a very cool web site that lets you upload an image to see how it looks if you're colorblind. Here is what happens with the map we're using:
Full color:
Red/Green color deficiency (if these first two images look the same to you, you're probably colorblind. Most people know that already by the time they're your age, but some don't - it's not a particularly debilitating condition so it's possible to go through life without noticing that you have it:
The distinctions between positive and negative states is still preserved - if you look at the key, you can see this clearly.
Blue/Yellow color deficiency:
Again, if you look at the key, you can see that the distinction between positive and negative values is still perceptible.
...and now back to your task. I found a good images of the US with the states nicely outlined and used "Live Trace" to turn the western states into individual vector graphics on separate layers in this Illustrator file. (You'll learn to use Live Trace later in this class).
Step 1: Get the states into Flash
a. Download this file, then import it to the stage in Flash. (You can delete the "Remaining States" layer - I left it there in case you want to create more states to get a complete set.)
b. Save the flash file as: choroplethMap.fla
c. Turn each of the states into a button with names like "btnWashington."
Step 2: Transform one color in code
a. Download the code module ColorTransform.fla which shows how to change color and transparency in ActionScript.
Now go back and look at the model visualization. Notice the list of job sectors over on the left:
The colors currently used for the states are the colors for the Information sector. You're going to create a button that will change the colors to align with the Utilities sector:
Start with Washington. It changes from pale pink 
to dark green 
If you use the color picker dialog in Illustrator, you'll see that the RGB representation of the pale pink color looks like this:
...and the RGB representation of the green color looks like this:
So now to do this in code...
b. Write these three lines in your code panel (in the first cell of an actions layer, of course). Notice the comment as a reminder/explanation of what the code does (or will do after step d):
import flash.geom.ColorTransform;
washington_btn.transform.colorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);
//Washington: change from pale pink(237, 220, 227) to dark green(142,154,33)
(You will need to call your instance name washington_btn)
c. Test this movie - nothing will happen because the multiplier parameters are all 1 and the offset parameters are all 0 (read the comments in the code module if this didn't make sense).
Next, you'll change the offset parameters.
You want red to change from 237 to 142, so that is a change (or an 'offset') of -95
You want green to change from 220 to 154, so that is an offset of -66
You want blue to change from 227 to 33, so that is an offset of -194
d. Change the offset parameters to these numbers and test the movie again. Washington should now be green:
Step 3: Create the control buttons
Now you'll put that change under the user's control.
Note that the buttons in the model you're emulating have 3 states (pinkish green is normal, pale green is hover, and two-toned darker green is clicked). These 3 states are all shown in this screenshot:
a. Start by creating a layer called "button" and using the rectangle tool to create a rectangle with the slightly pinkish green color (#F4F6EC) and pale gray(#D0D0D0) outline you see in the top button (you can use Flash's color panel to get the colors right):
b. Turn this into a button called "btnRegular" and give it the instance name "information_btn"
c. Open the button symbol by double-clicking on it, put a keyframe in the over frame, then change the fill color of the rectangle in the over frame to pale green (#E9EDD4).
d. Get out of the symbol, open your library panel and drag another copy of btnRegular onto the stage below the first button. Give it the instance name "utilities_btn."
If you test the movie now, you should find that the pale pink rectangles turn pale green when you mouse over them:
Look at the model again. In addition to having these 2 states, the button that has been clicked has a two-toned dark green appearance. To achieve this, you'll use the same strategy you used to make the tabs switch from white to pale blue/gray in the Medals lab - i.e. you'll have a separate button that is on a different layer and appears and disappears as needed.
e. Create a new layer above the buttons layer called "selected buttons" and draw a rectangle that precisely covers the top button.
f. Give the rectangle a pale gray outline (#D0D0D0) and dark green fill (#C7CE90).
g. Draw another rectangle over the top half of the button and make it a mid-range green (#D5DBAE):
h. Turn these rectanglesinto a button with the symbol name "btnSelected" and the instance name "selectedInformation_btn"
i. Go to the library panel and drag a copy of btnSelected and place it so it covers the utilities button. Give it the instance name "selectedUtilities_btn."
If you test the movie now, you'll see two 2-toned rectangles that don't change when you hover over them:
j. Add the text for the buttons on yet another layer called "button text" (one should say "Information" and the other "Utilities"):
k. Look at the properties of these text boxes. Set them to "static text":
l. Now write the code that will make the selected button appear/disappear as needed. Use the code you created for the tabs in the medals lab (phase 4) as a model if you've forgotten how). Have the Information button be selected as a default. Have the button click call the switchButtons function.
Here's what my code looks like:
utilities_btn.addEventListener(MouseEvent.MOUSE_UP, switchButtons);
information_btn.addEventListener(MouseEvent.MOUSE_UP, switchButtons);
function switchButtons(e:MouseEvent):void{
if (e.target.name == "information_btn"){
selectedInformation_btn.visible = true;
selectedUtilities_btn.visible = false;
}else{
selectedInformation_btn.visible = false;
selectedUtilities_btn.visible = true;
}
}
m. Run your code to see that the buttons change appearance appropriately when hovered over & clicked.
[NOTE: if you find that when you hover over the buttons the cursor doesn't change into a pointing finger (indicating that you're over a button), check the properties of the text to be it is static text]
Step 4: Let the user control the color change
a. Put the line of code that changes Washington to green inside of your switchButtons function. Now it should change color only when the Utilities button is pressed.
b. Test your movie to be sure that when you click on the Utilities button, Washington turns green.
c. Now figure out how to make it change back when you click on the Information button. Here's a hint if you're having trouble:
It seems that the line should need to change Washington from its new green color back to its original pink color. But in fact, the line needs to change it from its original pink color because when you use the 'colorTransform' method, the 'transform' is based upon the objects 'real' color and not whatever color it happens to be at the moment. So the line will look like this:
washington_btn.transform.colorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);
d. Now figure out how to make all of the other states change from their original colors to their new colors and back. This will involve figuring out the RGB values for each. See step 2 for reference. I'd suggest that you start by writing comments for each change that match the comment I wrote for washington state:
//Washington: change from pale pink(238, 210, 222) to dark green(121,143,0)
Here's a visual reminder of the changes you're making:
The result should look, and act like this (but bigger):
e. There's one final change to make. Right now, when you hover over the states, the cursor turns into a pointing finger because they are buttons. But since the user can't actually interact with these buttons, that's confusing. You can prevent the cursor from turning into a hand by setting the "enabled" property to false like this:
washington_btn.enabled = false;
FINAL PRODUCT: choroplethMap.fla
SUMMARY
Choropleth map: A data display in which areas on a map are shaded to indicate data values. A very useful display strategy (but with limitations since visual dominance of a color may not reflect the actual frequency of that value since the size of an area isn't always proportional to frequency - e.g. population density).
Split Color Scheme: Perceptually effective when you have a scale with 0 in the middle
Color Blindness: Something to design around. Use the VizCheck site to check your design.
Changing colors in ActionScript
The ColorTransform.fla code module summarizes this
