Phase 7:
Make the info box appear on hover
In this lab, you'll learn to create a very useful bit of functionality (having an information box appear when you hover over elements in your interface), and in the process, you'll learn about how to store Flash resources in the "library" for later re-use.
Take a look at our the Medals application again: http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html. When you move your mouse over a circle, an information box appears:
Having an information box appear on hover is a very common interaction in information visualizations, so learning how to do this will come in handy in the future.
Step 1: Clarify the task
a. The first step in figuring out how to approach a coding challenge is to break the challenge down into pieces.
Look carefully at the interaction with the information box and write down everything you see happening (When does it appear/disappear, what does it contain, where is it located etc.) It might help to imagine that you're writing specs for someone else to implement. When you're done, click on my list below to see how well they match up:
THE TASK
1. The info box consists of a rectangle with a little arrow cut-out at the button, 3 circles representing medals, and 5 pieces of text (country in bold, total number of medals and number of each type of medal, colored to match the medal).
2. The info box is hidden when the mouse is over the white background
3. The info box appears when the mouse moves over a circle
4. The info box appears above (rather than behind) the circles
5. The info box follows the cursor
6. The text in the infobox is different for each circle, though the medals stay the same.
It appears that there is separate info box for each country, for each year. But since only one info box is visible at a time, we can just create 1 and reuse it - updating the text every time the mouse moves over a new circle.
STEP 2: Draw the infobox in Illustrator
Since Illustrator has a much better drawing interface than Flash, we'll create the info box in Illustrator, then import it to Flash.
a. Open Illustrator and create a file named "MedalInfoBox.ai".
b. Copy the image below (right click and select the copy option) and paste it into Illustrator (if it won't paste in Illustrator, you may have the Text tool selected. Be sure to select the Select tool).
b. Call this layer "model" and lock it.
c. Create a new layer above the model layer and call it "infobox"
d. Use the rectangle tool to draw the infoBox rectangle. Make the stroke gray and the fill white. Mine looks like this:
e. Watch this video to learn how to use the "add anchor point" tool: 
. Then use it to create the triangular pointer at the bottom of the rectangle:
Next you’ll make the layer very slightly transparent the way it is in the original design.
d. Watch this video to learn how to control the opacity of an object (in both Illustrator and Flash).
e. Make your info box 85% opaque:
Now you'll create the text and the medals. In the final application, the text will be different for each country. For now, you'll type the text you see in the model (which is for the US), but it doesn't really matter what that text says because later it will be changed dynamically.
f. Lock & hide the infoBox layer and create a new layer called "text"
g. Use the text tool to type "United States". Make it Arial, Bold, 12 pt.
Each bit of text needs to be a separate text box so it can be accessed separately in your code later.
h. Create a separate text box and type "110 medals." Make it Arial, Regular, 12 pt.
i. Use the ellipse tool to make a little circle the size of the medals.
j. Copy and paste the little circle twice so you have 3 circles.
k. Put them in approximately the correct position, then use the alignment tools in the alignment panel to make sure they're spaced apart evenly and on the same level horizontally.
l. Make the color of the gold circle #FFC82E, make the silver one #919191 and the bronze one #C6885D (by double-clicking on the fill color box in the tool panel and pasting in the value in the color-picker dialog box:
m. Create a separate text box for each of the three medal numbers (also Arial, regular, 12 pt), and use the eye-dropper tool to make the text the same color as the corresponding circle (remember to click on the text first, then select the eye-dropper tool, then click on the circle to get its color):
l. Align and distribute them as you did with the medals.
m. Now unhide the layer with the box on it.
n. Save the file. It's ready for importing to Flash.
Step 3: Import to Flash
a. Open "Medals_6_slider.fla" in Flash and save it as "Medals_7_infoBox.fla."
Previously, you imported an Illustrator file to the stage in Flash. Now you'll import a file to the library.
b. Import MedalInfoBox.ai to the library (File-> Import-> Import to Library...). In the import dialog box, uncheck the model layer since you don't want that to be imported:
c. Open the Library panel (Window-> Library). The library contains all of the symbols you've created or used (including symbols which you may have deleted from the stage).
d. Scroll down to "MedalInfoBox.ai". Click on the name and the image will appear in the preview pane at the top:
e. Watch this video to learn more about the library.
f. Eventually, you will be creating a copy of the infoBox from ActionScript. To do that, the object must be "exported for Actionscript." Here's how:
Click on the litle "i" symbol at the bottom of the Library panel to pull up the Symbol properties dialog box. When you click "Advanced" You'll see that you can't yet click on the "Export to ActionScript" box (it's grayed out). That's because this is a "Graphics" symbol and Graphics symbols can't be exported for ActionScript (only button symbols and movieClip symbols can):
g. Change the symbol to a MovieClip (and change the name to "mcInfoBox"):
h. Now you can click on the "Export for ActionScript" checkbox:
i. Change the Class name to "InfoBox_mc" (NOTE: it begins with a capital "I" - the convention is to always begin class names with a capital letter), and click OK. You'll get a warning message:
Click OK.
Step 4: Make the text dynamic
Now you have a movieClip object stored in the library. But it's just a static image with the Olympic medals data for the US in 2008. In this step, you'll change those text boxes to allow their contents to be altered dynamically, during run-time (i.e. from ActionScript).
a. Doubleclick the icon next to mcInfoBox in the library panel to open it on the stage (you'll see this path in the upper lefthand corner of the stage when you do this):
b. Select the "United States" text:
Right now, the text box is just long enough to accommodate the text "United States."
c. Using the select tool, stretch out the text box so that if a longer country name is entered, it will fit:
d. In the Properties panel, give this text box an instance name "CountryName_txt".
e. Give the other text boxes instance names as well: "NoOfMedals_txt", "NoGold_txt", "NoSilver_txt" and "NoBronze_txt"
f. Get out of this movie clip by clicking on "Scene 1"
Now you have a fairly complex movie clip which contains several text elements, each with its own name.
The next step will be to actually add this info box to the stage using ActionScript. (In Phase 8 you'll be writing the code to dynamically update the text itself).
Step 5: Add the info box to the stage with ActionScript
For our purposes, we could just paste of copy of the info box on the stage. There is no particular need to add it using ActionScript, but it's good to learn how.
a. Open the code pane and type the following into your code after the other var statement:
b. Now that you've created a new instance of the InfoBox_mc class, you need to place it on the stage with the following line (which you can add just after the var statement):
stage.addChild(infoBox);
c. When you test the movie, the info box should appear on the stage:
d. Since you don't want it to be visible until you hover over a country circle, write a line to make it invisible at first:
infoBox.visible = false;
e. Test the movie again to see that it has disappeared.
Here is a code module that shows how to do what you just did (how to add an item to the stage from the library). You can download it for future reference.
Step 6: Make the info box appear when you hover over a country circle
The event that is triggered when you move your mouse over an object is called MouseEvent.MOUSE_OVER. You want the country circles to listen for that event and respond by making the info box appear.
a. You haven't yet given the country circles instance names, so you have no way to refer to them in your code yet. Go to the first frame and name them as follows:
b. Give each of these two circles an event listener for the MOUSE_OVER event and have that event listener trigger a function called "showInfoBox" (put this code with the other lines that add event listeners).
To verify that you got it right, click below and compare your code to mine:
JapanCircle_btn.addEventListener(MouseEvent.MOUSE_OVER, showInfoBox);
CanadaCircle_btn.addEventListener(MouseEvent.MOUSE_OVER, showInfoBox);
c. Now create the "showInfoBox" function (put this with your other functions). Have this function make infoBox visible.
Again, try to do this on your own, then click below to verify that your code looks like mine:
function showInfoBox(e:MouseEvent):void{
infoBox.visible = true;
}
d. Test your movie. When you hover over one of the circles, the info box should appear. [NOTE: If this doesn't work, check to be sure that the country circles on the first frame have the proper instance names: JapanCircle_btn and CanadaCircle_btn. If you go to other frames, you'll find that the circles don't have instance names. That doesn't seem to be a problem. ]
The next challenge is to make the infoBox disappear when you move the mouse off the circle.
The event that happens when you move the mouse away from an object is called MouseEvent.MOUSE_OUT.
e. Add listeners for the both circles to detect the MOUSE_OUT event and have them call a function called "hideInfoBox."
f. Write the "hideInfoBox" function (which will do the opposite of the "showInfoBox" function.
g. Test the movie. The info box should appear when either circle is moused over, and should disappear when the mouse moves off the circle.
In the visualization you're emulating, the infoBox appears where the cursor is and moves with it (until the cursor moves off of the circle). In the next step, you'll make that happen.
Step 7: Make the info box follow the cursor
The event that is is broadcast whenever the cursor moves is called MouseEvent.MOUSE_MOVE.
Since having an object follow the cursor is a useful trick, I've packaged it into a code module even though it's very simple. Download the code module and see how it's done (i.e. read the code and run the application to see the results).
a. Add an event listener to the main timeline that listens for the MouseEvent.MOUSE_MOVE event. Have it call a function called "followMouse":
stage.addEventListener(MouseEvent.MOUSE_MOVE, followMouse);
What you want to do in the "followMouse" function is update the location of the info box to match the location of the cursor. Here is the information you need to do this:
every object on the stage has an x property and a y property which identify where the object is located (x refers to how far it is from the left edge, y refers to how far it is from the top edge)
mouseX is the x axis position of the cursor and mouseY is the y axis position of the cursor
b. WIth this informtion, write the "followMouse" function to make the location of the info box match the location of the cursor.
c. Test your movie. The info box should follow the cursor. NOTE: the position of the info box relative to the position of the cursor may not be right, we'll fix that next.
If it doesn't work, try to figure out why. If you get stuck, compare your answer with mine:
function followMouse(e:MouseEvent){
infoBox.x = mouseX;
infoBox.y = mouseY;
}
Step 8: Place the info box so that the tip of the little triangle at the bottom lines up with the cursor
Each object has a "registration point" and a "transformation point." Watch this video to learn about them.
The registration point is the one that matters here.
a. Open the Library panel and double-click on the info box. In order to select all of the elements in the info box, use the selection tool and draw a rectangle that encompasses everything.
b. Now move the entire selection until the registration point (the '+' symbol), is lined up with the point at the base of the info box:
c. Test your movie again. You're done! [If the infoBox flickers when you hover over a circle that's because the Mouse over and Mouse out events are being broadcast continually. I'm not sure why this happens, but one of your fellow students figured out how to prevent that from happening - go back into the infoBox symbol and adjust it so the Registration Point is below the point of the infoBox rather than touching it.]
FINAL PRODUCT: Medals_7_infoBox.fla
ANOTHER EXAMPLE
To see another example of a visualization that uses a box that appears on hover and follows the cursor, go to: http://media.npr.org/news/graphics/2009/apr/electric-grid/gridmap.swf and click on the "Sources of Power" tab.
SUMMARY:
This phase has introduced a number of major concepts along with more minor, but useful ones.
Add anchor points (video)
opacity (video)
contrast and legibility/value
the Library (video)
static versus dynamic text
dynamic text can have an instance name so it can be referenced and modified in ActionScript:
new events
positioning on the stage
x, y coordinate system (0,0 is the upper left-hand corner of the stage)
Registration Point & Transformation Point (video)
In the image below, you can see the registration point (+) and the transformation point (o) of the slider:
