• Creating a Basic Flash Infographic with Rollovers

    Creating a Basic Flash Infographic with Rollovers


    We’re going to take a map of Missouri that contains the names of four commercial caves in the state and use it to make the Flash animation above that pops up information about each cave when the user rolls over its name. You will also be able to click on the cave name to bring up its web site in a separate browser window.

    Preparing the background map

    1. First, copy the file “momap.jpg” from the 4802/4804 folder to your desktop.

    2. Open Firefox or Safari.  Go to http://www.missouricaves.com/mo-map.htm where you can find information about all the commercial (show) caves in the state.

    3. Launch the application Adobe Flash Professional.  Select “Creat New ActionScript 3.0″ and a new Flash file with a blank stage should open.

    3a. Go under File to “Publish Settings…” At the top, click where it says “Flash.” Then slightly below that, on the line labeled “Script” make sure it says ActionScript 3.0, then click “Settings.” A new window will pop up. At the bottom, where it says “Default linkage” make sure the option selected is “Merged into code.” Click OK, the click OK again in the remaining window. (This will ensure your exported Flash graphic all ends up in one file as opposed to multiple files.)

    4. Go to File, Import, Import to Library.  Select “momap.jpg” from the desktop.  If the Library panel in Flash isn’t open, go to the Window pulldown menu and open it.  You’ll see the Library panel on the right side of the screen at the bottom.

    5. Drag momap.jpg from the Library panel onto the stage.  Use the Selection (arrow) tool to place the map in the upper left corner of the stage.

    6. Make the stage the exact same size as your map by going to the Modify menu, then clicking on Document, then the Contents and OK buttons.

    7. Save your Flash file to the desktop as mocavesmap.fla.

    Adding your rollover text boxes

    1. Add a button so that when you mouse over the words “Mark Twain Cave” an infobox will pop up.  First go to Insert, New Symbol.  Create a button symbol and name is MarkTwain.  Flash will leave the main stage and you will see, instead, a timeline and stage for that button.

    2. In the timeline, double-click on the name of “Layer 1″ and rename it “text.” This is the layer where your pop-up text will go.

    3. Click to select the Over state frame, then go to Insert, Timeline, Keyframe.  Remember, a keyframe indicates where on the timeline you want to make a change. The Over keyframe defines what the user will see when she mouses over the area of the button.

    4. Choose the Text tool and click anywhere on the blank stage. In the Properties window at the bottom of the screen, select your font style, size and color.  Use the defaults this time, but change the color to black (the color button is to the right of the size menu).  You can type in text, or paste it from another location. In this instance, go to the Missouri Caves web site, click on Mark Twain Cave, click past the opening screen and gather some information describing that cave. Type your summary text into the text box in Flash.  Edit the text and move sentences down to a second or third line if needed so that the text box is narrow enough to fit on the map.

    5. Now go to Insert, Timeline, Layer.  This new layer is for the background box around the text that will appear when you mouse over the cave’s name on the map.  Rename the layer “box.”  Now drag the box layer below the text layer on the timeline.  Since the text layer is now above the background layer, the description will appear in front of the shading of the box.

    6. Highlight the Over state on the box layer.  Go to Insert, Timeline, Keyframe. (Just like you did on the text layer in step 3.)

    7. Select the Rectangle tool.  Below it in the toolbar, you’ll see the word Color with two color boxes below it.  Mouse over the first and you’ll see the words “Stroke Color.” Click on it to change the outline or border color of your info box.  Mouse over the second button and you’ll see “Fill Color.”  Click on it to change the color behind your words.  Obviously, this color should be chosen so that the text can be seen clearly against the background.

    8. Draw a box around the text.

    9. In the upper-left corner of your window, you’ll see navigation.  Click on “Scene 1” to go back to the main stage where the map is.

    10. Now we need to position the text box where we want it to appear on the map when we mouse over the cave’s name.  To do that, you must first create another layer on the map’s timeline: Insert, Timeline, Layer.  Name the layer “MTbutton.”

    11. With the MTbutton layer highlighted, go to the Library window and drag the MarkTwain button onto the stage at the approximate spot you want it to appear.  Use the Selection (arrow) tool to drag it to the precise spot.

    12. With the button on the map selected, go to Edit, Edit in Place. The map background will become shaded out and the text box will disappear for a moment. That’s because, if you look in the timeline, you’ll see you are now inside the button, in the Up state. If you click on the word “Over” in that button timeline, you’ll see your text reappear in position over the map.
    Now we’re now ready to tell Flash what portion of the map we want to mouse or roll over to make the infobox appear. This is called the Hit state. Highlight the Hit state frames of both the text and box layers. (Select the first layer frame, then hold the Shift key to select the Hit frame in the other layer.) Then go to Insert, Timeline, Blank Keyframe.  The “Hit” keyframe defines the active area of the button. Make sure you insert a Blank keyframe (and not just a regular keyframe).

    13. Now use the Rectangle tool (you could use the Pen tool if you needed to draw an irregular shape) to draw a box around the part of the map (the name of the cave) you want to roll over to bring up the information. This rectangle will be the active area of the button, also known as the Hit state.

    14. In the upper-left corner of your window, you’ll see navigation.  Click on “Scene 1” to go back to the main stage where the map is. When you return, you’ll notice that your button is now showing up as a blue rectangle where you drew the hit state (instead of a blue rectangle where the information will pop up).

    15. Save your Flash file. Now hold down the Apple key and press the Return (Enter) key to generate the .swf file (the actual animation that you’ll put on the web).  Test it.

    Repeat these steps for the other caves. Put the .swf file in your local web folder, publish it to the web server and add it to your web page. In Dreamweaver, it’s easy. Go to the Insert menu > Media > Flash.

    ----------Posted on October 9, 2009 by in 4802

Comments are closed.