In this tutorial you will learn how to create a datamap story. The concepts you learn can be applied to any datamap-based project.

We'll be using two datamaps in this tutorial: the first is the simplest type of datamap you can create -- a page with buttons and captions. The second datamap takes these basic button/caption concepts and applies them in a more complex manner.

1. To begin, we'll take a look at a finished version of the first datamap we'll be creating. Go here:

   http://www.theindependentpublisher.com/jr200/simple-datamap.swf

2. This datamap is made up of the following elements:

   

3. We're now going to access the template used to build this datamap.

   Start Flash. Under the "Open a Recent Item" menu choose the "Open" folder. A dialog box will appear. Look for a text field labeled File Name. Type the following in the File Name text field:

   \\Pages\Courses\fall06\jr200\

   A list of folders should appear. Select the folder with your name (it will be Firstname_Lastname), then select Flash-Materials > Datamap-Materials

4. Find the file titled "simple-datamap-template.fla" (it may appear as "simple-datamap-template"). Double click to open this file.

5. You will be presented with a screen that looks something like this:

   

6. Look at the timeline toward the top of the screen. You will see two layers:

   

   Here's what each layer does:

   • Buttons: This layer contains the blue, red and yellow buttons. This is the layer where we'll be doing the majority of our work.

   • Background: This layer contains the grey background and the title/header. You can edit this area by selecting the "Background" layer.

7. On the surface, the datamap we're working with looks very simple: it only has two layers and two keyframes.

   But here's the tricky part: datamaps rely on buttons for their interactivity, and buttons throw a monkey wrench into the production process.

   In Flash, a button is a symbol (you'll recall that a symbol is a special type of Flash object that's stored in Flash's library). Each Flash symbol has its own set of properties and parameters.

   To get a sense of this, go to the Flash Library (Window > Library or CTRL + L) and select the object titled "Blue-Button."

   

8. Double-click on the "Blue-Button" object.

   You'll notice that the Flash Stage changes. Your stage should look similar to this:

   

9. The "Blue-Button" symbol is a button (hence the title "Blue-Button"). Buttons are a unique type of symbol. As such, we need to go over each element.

10. Select the magnifying tool, make sure it's set to "minimize" (it should have a minus symbol in it), then click on the stage until a small blue circle appears in the upper-left corner, like this:

    

11. Now, look at the timeline toward the top of the screen. You should see the following:
    • Caption Layer: We will use this layer to create a unique caption for each button. When a user clicks on the button, he/she will see the associated caption. It's important to note that captions are grouped with their buttons; the captions are not inserted into Scene 1.

    • Button Layer: This layer contains the basic Blue Button.

12. Within the timeline itself, you will see:
    • The "Up" Keyframe: This is a special type of keyframe that's only associated with Flash button symbols. The "Up" keyframe refers to a button state. The easiest way to think of it is:

      "The Up Keyframe is what the button looks like when you're not touching it."

      Click on the Button Layer, Keyframe 1 ("Up") to see what the button looks like in its "Up" state. It should be blue with a black outline.

      

    • The "Over" Keyframe: This keyframe handles the appearance of the button in its "Over" state. Again, the easiest way to think of this is:

      "The Over Keyframe is what the button looks like when you put the mouse over it."

      Click on the Button Layer, Keyframe 2 ("Over") to see what the button looks like in its "Over" state. The button should be grey with a black outline. You'll also notice that a white box with text in it (the caption box) appears next to the button. We'll deal with this in a moment.

      

    • The "Down" Keyframe: This keyframe handles the appearance of the button in its "Down" state. The best way to think of this is:

      "The Down Keyframe is what the button looks like when you click on it."

      Click on the Button Layer, Keyframe 3 ("Down") to see what the button looks like in its "Down" state. The button should be dark grey. You will continue to see the white caption box next to the button.

      

    • The "Hit" Keyframe: Of all the keyframes, this is the trickiest. The Hit Keyframe is a "hidden" frame that is used to create a clickable area around a button. If you are using small buttons, it can be very hard for a user to focus their mouse over the button. You can use the Hit Keyframe to expand the clickable area around a button (it's like an invisible click forcefield).

      The easiest way to think of this is:

      "The Hit Keyframe makes the clickable area around the button bigger."

      Click on the Button Layer, Keyframe 4 ("Hit") to see what the button looks like in its "Hit" state. You'll notice that the circular button has been replaced by a small white box. This white box will not appear in the final datamap. Rather, the dimensions of the box represent the invisible clickable area that will be around the circular button.

      

13. Now we need to look at the material contained within the Captions Layer. Click on the Captions Layer, Keyframe 1 ("Up").

    You should see a blue button on the stage. Nothing else should be visible.

14. Next, click on the Captions Layer, Keyframe 2 ("Over"). You should now see a grey button with a caption box to its right. Use the magnifying tool to zoom in on the caption box. You'll notice that it has a place for a "Caption Headline" and then an area below for the full caption.

    

    This is the area where you would type in a caption. This datamap's captions only contain text, but in more advanced datamaps the same slots could also contain images, audio and video.

15. Click on the Captions Layer, Keyframe 3 ("Down"). You should see a dark grey button and the same caption box.

    The most important thing to remember with the Captions Layer, Down Keyframe is that you need to make sure the caption box appears. When a user selects the button, you want to guarantee they can read the caption when they both mouse over the button (the "Over" state) and when they click on the button (the "Down" state). If you only have the caption box in the "Over" state, the caption will disappear when the user clicks on the button -- this is incredibly frustrating for the user.

16. Finally, click on the Captions Layer, Keyframe 4 ("Hit"). You will see a small white square. Nothing else should be visible.

17. To recap all this button/caption business:
    • In datamaps, captions are grouped with buttons. To add a caption or edit a caption, you need to edit the button the caption is associated with.

    • When you edit a button, you need to remember that buttons have four "states":

      Up -- what the button looks like when you don't touch it.

      Over -- what the button looks like when you put the mouse over it.

      Down -- what the button looks like when you click on it.

      Hit -- the clickable area around the button.

    • Finally, you want to make sure that your captions are visible when a user mouses over the button (the "Over" state) and when the user clicks on the button (the "Down" state).

18. Now that we've gone over the intricacies of buttons, our next task is to edit the datamap file.

    Open Microsoft Word and write three captions. They can be about anything (your pets, your life, your day ... whatever). Each caption should have a 2-3-word headline and around 10 words of caption text.

19. Go back into the datamap file in Flash.

20. If your datamap file is still in the Symbol Editing mode, you need to click back out to Scene 1. In the breadcrumb navigation, click on "Scene 1" to return to the top level of your Flash datamap.

    

    At this point, your stage should look like this:

    

21. You're now going to associate your first caption with the blue button.

    Select the selection tool and double-click on the blue button on the stage. This will bring you into the Symbol Editing screen for the symbol "Blue-Button."

22. Click on the Captions Layer, Keyframe 2 ("Over").

23. Click once in the grey off-stage area to deselect the material on the stage.

24. Select the type tool . Click on the text "Caption Headline." Highlight this text and replace it with your own caption headline.

25. Click on the text that begins "This caption appears ..." Select all of this text, delete it and then add your own text in this same area.

26. What to do if your text extends beyond the box.

    Often, your text will expand beyond the boundaries of the caption box. You can make the text fit by inserting line breaks (place the cursor after a word then press the Enter key). Or, you can expand the boundaries of the box itself.

    To expand the box, select the Free Transform Tool . Click once in the grey off-stage area to deselect items on the stage. Then, click on the white background area of the caption box. The box should look like this:

    

    Use the anchor points surrounding the box to expand or contract the sides of the box. If you accidentally move the box, go to Edit > Undo Scale to move back a step.

27. When you have added your first caption to the blue button, go up to the breadcrumb navigation at the top of the timeline and click back out to Scene 1.

28. Now, you need to take your second caption and associate it with the red button. Select the selection tool and double-click the red button. Click on the Content Layer, Keyframe 2 ("Over") to add your second caption to the red button. Edit the text and expand the caption box as necessary. When you're done, click out to Scene 1.

29. Select the selection tool and double-click the yellow button. Click on the Content Layer, Keyframe 2 ("Over") to add your third caption to the yellow button. Edit the text and expand the box as necessary. Click out to Scene 1 when you're done.

30. Go to Control > Text Movie to see your final datamap. Click on each button and make sure the correct caption appears.

Advanced Datamaps The next part of this tutorial applies button and caption functionality to a more advanced datamap. To begin, view the finished datamap here: http://www.theindependentpublisher.com/jr200/advanced-datamap.swf Put your mouse over one of the green buttons. You'll see that the city's name appears. This functionality is accomplished by using the exact same technique we encountered before: the city name is a caption that is grouped with the green button you moused over. Click on one of the green buttons. Your Web browser will appear and an online newspaper from that particular city will load. This functionality demonstrates one of the strengths of a datamap. Using Flash, it's quite easy to add buttons to a map and then link those buttons to existing Web pages. We're now going to edit the advanced datamap template. Open Flash. Under the "Open a Recent Item" menu choose the "Open" folder. A dialog box will appear. Look for a text field labeled File Name. Type the following in the File Name text field: \\Pages\Courses\fall06\jr200\ A list of folders should appear. Select the folder with your name (it will be Firstname_Lastname), then select Flash-Materials > Datamap-Materials. Find the file titled "advanced-datamap-template.fla" (it may appear as "advanced-datamap-template"). Double click to open this file. This datamap has a similar structure to the simple datamap we edited earlier. You'll notice that it has two layers -- Background and Buttons -- and one keyframe associated with each layer. As we learned earlier, the basic structure of a datamap is simple because the map's functionality is built into its buttons. Our first task with this datamap is to create a new button for London. Rather than build the button from scratch, we're going to duplicate one of our existing buttons. This is a great time-saving technique that most producers use. Go to the Flash Library (Window > Library or CTRL + L). Right-click on the button symbol titled "btn-boston." In the menu that appears, select "Duplicate." The "Duplicate Symbol" box will appear. In the text field, change the name of the button to: btn-london Make sure that the Type is set to "Button." If it's not, the symbol we're creating will not have the functionality we need. Click OK. Look at the Flash library. You should now see a symbol with the title "btn-london." Double-click on the "btn-london" symbol to enter the Symbol Editing screen (note: make sure you double-click on the btn-london icon -- if you double-click on the text, Flash will think you want to change the name of the symbol). Your stage will look similar to this: Because we're editing an existing symbol, it's important to get our bearings. Click on the Caption Layer, Keyframe 1 ("Up"). On the stage you'll see a small green circle (this is the same green circle you clicked in the finished datamap). Click on the Caption Layer, Keyframe 2 ("Over"). You will see the green circle. A caption box with the word "Boston" should be to the right of the circle. Click on the Caption Layer, Keyframe 3 ("Down"). You should again see the green circle and the "Boston" caption box. Finally, click on the Caption Layer, Keyframe 4 ("Hit"). You will see a red circle that is slightly bigger than the green circle. This red circle represents the clickable area around the green circle. Now it's time to edit this button. Click on Caption Layer, Keyframe 2 ("Over"). Select the selection tool and click on the white part of the stage to deselect the objects on the page. Select the text tool. Click on the word Boston, highlight the word and then type in "London." We have just edited the button. Go to the breadcrumb navigation at the top of the timeline and click back out to Scene 1. Go to the Flash library. Click on "btn-london" and drag an instance of "btn-london" to the area of the map where London is located. Your screen should look like this: We're now going to use Flash's built-in tools to add a Web link to this button. Confirm that the London button is selected (it should have a blue border around it). This is very important. The steps that follow need to be associated with the London button; they cannot be associated with any other button or any other element in the datamap. The London button should look like this: Look on the right-hand side of your Flash screen. You should see a menu labeled "Behaviors." If the menu isn't visible, go to Window > Behaviors. The Behaviors window looks like this: Look at the stage and confirm that the London button is still selected (it should be surrounded by a blue border). In the Behaviors menu, select the Plus symbol . In the menu that appears, select Web > Go to Web Page. The "Go to URL" dialog box will appear. In the URL field type: http://www.timesonline.co.uk. In the "Open In" drop-down menu select "_blank" Click OK. You have just associated the Web link www.timesonline.co.uk with the London button. Go to Control > Test Movie to test your work. If everything was done correctly, you will be able to do the following: When you mouse over the green London button, a small "London" caption will appear. When you click on the green London button, your Web browser will launch and the Web site for the Times of London will load. There's only one more part to this tutorial ... For your final task, you need to add three more buttons for three more cities to this datamap (you can pick the cities). You need to create buttons for each of these cities and add them to the map. Then, you need to gather a link for an online newspaper based in each of these cities and associate that link with the correct button. Let me know when you're done so I can check your work. That's it!