Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

An Interactive Map of Dante's

Inferno

Before beginning this lesson, you'll take a look at the finished project in Lesson 12,

Drag-and-Drop Interactions . When developing any sophisticated multimedia asset, you should have a clear road map of what you're trying to build. It might include a text description, some notes scribbled on paper, line drawings, and so on. But before you begin the development process, you should know exactly what you're trying to build. In this task, you'll look at the finished map to get a firm idea of where you're headed in these two lessons.

The Dante file you'll work with has two keyframes, each representing one half of a map of Hell, as depicted in Dante's

Inferno. In this lesson, you'll build most of the first keyframethe upper half of the map. In Lesson 12, which focuses on creating drag-and-drop interactivity, you'll build the lower half of the map.

As you work through the steps in this first task, take your time and explore the movie. As you do so, be sure to notice how the upper half of the Inferno map works, because that's what you'll be building in this lesson.

This entire project is an interactive map. The maps and all the graphic assets were created with Macromedia Fireworks, and imported into the file as flat PNG bitmaps. All the interactivity is layered on top of the map using invisible Flash buttons, which act like hotspots.

[View full size image]

As you roll over each object, a Tooltip appears, telling you about each screen element. Although it might seem that the movie has lots of these hidden tips that pop up when the mouse rolls over them, in fact, the movie has only one. The Tooltip is a movie clip instance, whose visibility is toggled on and off when the user rolls over hot areas of the map. In addition, each time the Tooltip is activated, it's dynamically positioned via ActionScript and its text is dynamically populated.

As you click each label, the text displayed in the right text area changes. This, too, is dynamic text. The scrollbar allows text fields of different lengths to fit in the same-sized window. Thanks to scrollable text areas like this one, you can edit for content, rather than editing for fitthat is, trying to squeeze text into a given space.

When you click the Down button, the second map appears. This map is on the second keyframe of the movie.

You'll build this file in the next lesson, so for now just get a sense of how it works.

[View full size image]

The preview is finished, and now it's time to start building your own Inferno.