Phase 1:
Draw the image in Illustrator
Recreating this interactive graphic is a great way to learn visualization techniques because it will introduce you to Illustrator and give you a strong background in Flash. I've split the lab into 14 phases and spread them through the quarter. This first phase will introduce you to Illustrator - the premiere tool used by professional graphic designers.
In Phase 1, you will draw a portion of the Olympic Medal graphic you can see here
Your final result (from this phase) will look something like this (a little odd, yes, but you’ll make it better later):
STEP 1: Create a new file
a. Watch this video, which shows how to create a file and set up your workspace.
b. Create a file and save it with the name “MedalDrawing.ai” (‘ai’ is the file extension for Adobe Illustrator files)
STEP 2: Paste a copy of the model into Illustrator
This link will take you to a page which contains a screenshot of the graphic you'll be copying.
a. Go to that page and right-click on the image to copy it, then paste it into your Illustrator file - you can use the standard edit->copy, edit->paste commands. (It will look fuzzy unless you set the zoom level to 100% - you'll learn how to zoom in step 3a):
b. Click on the artboard button in your tool panel 
(on the left side of the screen), and adjust the artboard with the little white squares that appear. Make the artboard the same size as the image (you can also just double-click on the image and the artboard will adjust itself):
You will be using this image as a model and tracing over it.
Illustrator Strategy: The strategy you’re using here – tracing over an image, is a great way to produce drawings (at least silhouettes) without artistic skills. We’ll use this strategy throughout this course.
[NOTE: We must be sensitive to copyright. For this exercise we’re trying to produce an exact partial replica of this graphic. If we published the result by posting it online, we would be guilty of copyright violation. But it is legal to produce a copy for our own learning purposes if we don’t make it available to others or claim it as our own creative work.]
You’ll want to avoid accidentally moving this image as you work. To prevent that from happening you will be ‘locking’ the layer this image is on …
c. Watch this video to learn about layers.
d. Rename "Layer 1" . Call it "Model" , then lock it.
e. Create a new layer and name it “Canada”
Your layers panel should now look like this:
f. Save your file
STEP 3: Create Canada
Next, you’ll be creating a labeled circle just like the “Canada” circle on the model. It will be easiest to do this if you zoom in on your model so...
a. Watch this video on navigating to learn about zooming and moving around in your file.
b. Zoom in to the "Canada" circle.
c. Watch this video on shape tools to learn how to make a perfect circle (and other shapes).
d. Make a circle that just covers the "Canada" circle on the model (note: my circle happens to be green - yours may be a different color). You'll probably need to reposition it once you've drawn it - you can do that by dragging it or by using the arrow keys:
e. To learn how to change the circle’s color to match the model, watch this video on the eyedropper tool.
f. Change the color of your circle to exactly match the color of the model.
g. Lock your “Canada” layer so you can't accidentally change it.
h. Make a new layer called “Canada text.” This layer will contain the label.
i. To learn how to create text, watch these two video on text properties and text tools.
j. Add the “Canada” label to your circle. Use the “Arial” font, make it white, and adjust the text size until it matches the text size of the model as closely as possible.
STEP 4: Create Japan on a new layer & save the file
a. Create a new layer called “Japan” and another called “Japan text”
b. Now repeat Step 3 to create the circle labeled “Japan” on those new layers.
c. Lock the "Japan" and "Japan text" layers.
STEP 5: Create tabs on new layers
a. Create 5 layers that will contain the various elements that make up the tabs (the ones you see on the model called "GEOGRAPHIC VIEW" and "BY RANKING"). Give them the following names:
Now you’re going to get slightly tricky to make the tabs appear the way they do in the online animation. Notice that the active tab has a white background while the inactive tab has a slightly gray background and is completely bounded by an outline. To create this visual effect, you’ll create two versions of each tab:
(The second version is white so it's invisible - in this image, I've selected it so the selection box shows you where it is).
The white version will be on the layer above the blue version. It will cover the blue area and the bottom line of the blue button so when both are visible, the result will look like this:
b. Go the the “Ranking unselected'" layer . Then click on the rectangle tool.
c. To prepare to draw the first rectangle, set the fill to blank 
(so the rectangle won't cover up the model layer). It doesn't matter what color the stroke is at this point, as long as it's visible.
d. Click on a corner of the "BY RANKING" tab and drag to create a rectangle of the same size and position. To get precise. zoom in close.
e. Change the fill to the correct pale bluish-gray color using the eye-dropper tool (you'll notice that the stroke color disappears because the object you're pulling the color from has no stroke).
f. Choose a medium gray color for the stroke.
Your result should look something like this (the model layer is visible in this image):
g. Watch this video to learn about options for selecting objects...and this video to learn about "isolation mode"
Next you want to make a white copy of this rectangle which will end up being the selected version of the tab...
h. Select and copy the rectangle, then click on the "Ranking selected" layer. You're going to paste the rectangle onto this layer. To be sure that it ends up on this layer and not onto the layer where the first rectangle was, unselect that first rectangle by clicking somewhere else.
k. Choose Edit->Paste in Place, to paste this copy of the rectangle in exactly the same location on the page, but in this other layer (remember to make sure that “paste remembers layers” is NOT checked).
l. To ensure that you’ve done this step correctly, hide your "Ranking unselected" layer. Your rectangle should still be visible:
m. Now lock the "Ranking unselected" layer so you can't accidentally modify it, and un-hide it.
n. Select the rectangle on the "Ranking selected" layer. Change the outline to "no color" and the fill to white:
Zoom in close to see that when you removed the line, the rectangle became slightly smaller and now obscures half of the line (the image below shows the upper left-hand corner):
o. Use the free transform tool 
to adjust the white rectangle so it doesn't cover the gray line on the top and sides, but does cover the button gray line on the bottom:
...zoomed out, it should look like this:
p. Lock this layer ("Ranking selected")
q. Click on the "Ranking text" layer and use the text tool to type "BY RANKING" on the tab, just like the model. Make the font "Arial." Try to match the font size as closely as possible (temporarily hide the"‘Ranking selected" and "Ranking unselected" layers so you can see the text in the model).
p. Lock the "Ranking text" layer
q. Now repeat steps a-p to create the "GEOGRAPHIC VIEW" tab .
r. Hide the "Model" layer, then selectively hide/reveal the layers you just created to see the two views shown below (i.e. one that makes it look like the "BY RANKING" tab is active and one that makes it look like the "GEOGRAPHIC VIEW" is active):
Later, when working in Flash, you'll be hiding/unhiding these layers using code in response to a user's mouse click.
s. You're done with the "Model" layer so go ahead and delete it (either click on it and hit DELETE, or drag it into the trash can).
t. If you zoom out, you should see something like this:
t. Save the file and close it. (You’re ready for Flash! but before you move on, quickly read through the SUMMARY below (I've included this in every lab - the goal is to help to remind yourself what you've done and solidify your learning).
FINAL PRODUCT: MedalDrawing.ai (click on this link to go to the assignment page where you can upload your file)
At the end of every lab will be a summary section. I've put it there for 2 reasons: 1. As a reference for the future and 2. For you to read through immediately after finishing the lab to solidify what you've just learned.
SUMMARY:
file types (video)
layers (video)
navigating (video)
drawing shapes (video)
coloring (video)
creating text (video)
selecting objects (video)
isolation mode (video)
