• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 6. Interactive Simulations > Creating Interactive Hotspots

Creating Interactive Hotspots

The first part of the movie is now complete: Each static element is set up. All that's lacking is the interactivity, which will both enable the user to get through the movie and—in this case—also teach the user how to accomplish the task at hand. As mentioned earlier in the chapter, Flash has no hotspot tool, but it has a logical workaround with invisible buttons. In this task, you will create an invisible button and deploy it throughout the movie to create the click-through portion of the experience.

Choose Insert > New Symbol. In the Create New Symbol dialog, choose Button as the type, name it invisibleB, and press OK.

Adding symbols should be familiar to you by now. I recommend using a regular naming scheme. For movie clip symbols, I always append MC, so clipname becomes clipnameMC. In this case, invisibleB tells me that the symbol is a button. (For graphic symbols, I append GS.) Appending acronyms is not mandatory, but it is a good practice.

Insert a keyframe into the Hit frame of the button's timeline in symbol-editing mode.

All Flash symbols have timelines, including buttons and graphic symbols. Button symbol timelines do not work the same way as the regular timeline, however. The first four frames are named: Up, Over, Down, and Hit. These frames represent button states.

  • The Up state is the way the button appears when it first appears on the stage.

  • The Over state is the way that the button appears when a user rolls over it—many designers make it glow or use other similar visual effects.

  • The Down state is the way that the button appears in the moment it is clicked. Many designers move the down state a couple of pixels down and to the right of the Up and Over states, which makes the clicked button look like it is being depressed.

  • The Hit state represents the area of the button that is responsive to the user's mouse. This state is invisible to the user. With an empty Hit state, a button cannot be pressed or react to the user's mouse.

By adding a keyframe to the Hit state, you are making it possible for a button with no content in any of its visible states (Up, Over, and Down) to react to the mouse. That is exactly what you want: You want users to think that they are interacting with the screenshots, not with some button you put on top of it.

Draw a rectangle of any color on the button's stage—size and shape don't matter. Make sure the rectangle has a solid fill. Align it to the center of the stage using the Align panel.

Since the button is invisible, it really doesn't matter what it looks like. You could add a solid, gradient, or custom fill, and it would make no difference. Just be sure that the rectangle is filled, because if it has a stroke and no fill, only its edges will be hot—which won't work well at all.

Return to the main movie by choosing Edit > Document.

The button has been added to the library, but it appears nowhere in the document.

Drag an instance of invisibleB into frame 10 of the navigation layer.

A translucent blue rectangle appears on the screen, representing the hot area of the button. When you export to SWF, this blue square will not be visible.

Drag the rectangle over the System DSN tab name in the screenshot. With the button still selected, choose the free transform tool from the Tools panel, and drag the edges of the button until it fits neatly over the System DSN tab.

The free transform tool can be used to stretch, skew, rotate, and reposition objects. To resize the button object, click and drag on its control handles.

Normally, you would never transform a button, since its label and overall appearance could be comically altered—as if you'd stood your button in front of a carnival mirror. When your button is invisible though, you can stretch with impunity.

With the invisible button still selected, add the following ActionScript, using the Actions panel in expert mode.

							on (release) {

This script advances the playhead ten frames from wherever it is. Since it is placed on frame 10, it will advance the playhead to frame 20. Conveniently, since all of the frames are 10 frames apart, this same script can be used on every invisible button.

Select frame 20 in the navigation layer, and choose Insert > Keyframe. Resize and reposition the button so it covers the Add button, as specified in the directions movie clip.

Remember, inserting a regular keyframe copies the content of the previous keyframe into the new keyframe. Once you have resized and repositioned the button as needed, if you look in the Actions panel, you will notice that the script is also still in place. No changes needed there.

Following the directions in the remaining screens, insert new keyframes and resize/reposition the invisible button on each page as required.

When you set up a file well in advance, adding the interactive parts is greatly simplified. By inserting the directions before the hotspots, if you are unsure where to place the hotspot, all you need to do is read the directions. By placing the keyframes at even intervals, you can reuse the same navigation script on every keyframe.

The realism of the simulation will depend in part on how well you position these buttons. For example, where the user selects the Microsoft Access database driver, the invisible button should be short and wide, whereas when it covers buttons, it should be a bit taller and not as wide. Take your time and do it right!

Return to frame 1, select the Continue button, and add the following script.

							on (release) {

This script is different from the others in a couple of ways. First, rather than placing an expression inside the parentheses (_currentframe+10), you put in a literal string of text ("one"). When text strings in quotes are entered inside the parentheses, Flash looks for frame labels. As it turns out, you added a frame label to frame 10 called “one,” and that is where the playhead advances.

So why didn't we stick with the _currentframe+10 script used in the rest of the buttons? Because the difference between frame 10 and frame 1 isn't 10; it's nine. Of course, you could just use _currentframe+9; in this situation, either script would work just as well. Working with frame labels, as opposed to expressions, is particularly useful when you rely on gotoAndPlay() actions and you might adjust the number of frames in between sections afterward.

Interestingly, even if you did use the _currentframe+10 version, it would have worked just fine. This is because after clicking, the playhead would advance to and stop at frame 11, which has the same contents as frame 10. As the user goes through the movie, she or he would stop at frame 21, 31, 41, and so on. The user would have no idea about this minor glitch. Still, it's best to be precise because you might make a change to something later, and if everything is one frame off, it could result in unexpected behavior and a real stumper of a problem to troubleshoot.

Test the movie to give it a whirl.

You should be able to click your way through the whole movie, following the directions. The only part you won't be able to do is fill out the text fields because you haven't made them yet.

If any of the directions boxes seem badly placed as you test the movie, go back and adjust them to your heart's content.

Now is also a good time to save your file.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint