This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding the Directions
Now that the foundation for the simulation—the sequence of screenshots—is in place, you can turn to the substance: the accompanying text. For this tutorial, I used a dialog box-like window that overlays the simulation, providing background information and specifying the steps that need to be taken.
Because the blue box that frames the text is used in every frame, I converted it to a symbol. That way, the user will have to download it only once. I then dragged out an instance on the stage and entered the text. These have already been created for you, except for one.
Choose frame 10 of the text layer. Drag an instance of the dialog_MC symbol from the interface folder in the library onto the bottom part of the stage, in the center.
Select the text tool. Without yet clicking anywhere on the stage, change the font to Arial, size 13, without any special formatting, such as bold or italic. It should be left-aligned. Be sure that Static Text is selected in the Text Type drop-down menu. Select the pointer tool.
By changing the text attributes without an active text field, you effectively set the defaults for the tool. Changing the defaults lets you add similarly formatted text every time, without having to go back afterward and reformat it.
With the text tool selected, drag a rectangle from the left side of the box to the right, leaving margins so that the text does not overlap the sides.
You can tweak the placement of the text field if necessary, but it is easier to do this after some text is in the field.
Type the following text in the text field: The first step when using the extension manager is to choose the target Macromedia product.
Once this text has been entered, you can modify the width of the text field by dragging the square in the upper-right corner of the text field. To modify its location, switch to the pointer tool and drag the text field.
Repeat steps 3 and 4 to enter a new text field text beneath the first, with the following text: Click the application drop-down at the top to choose the correct product. Once entered and positioned, switch to the pointer tool and click the Italic button.
I switched the formatting of this part to italics, to help the user distinguish between descriptive text (the first paragraph) and task text (the second paragraph). Notice on the first page that the second paragraph is in bold—that formatting indicates tasks that the tutorial user is supposed to do. Using special formatting or coloring to distinguish text with different purposes improves the usability of your learning media.
Select frame 20 of the text layer, and drag an instance of dialog03_listappears from the dialogs and titles folder in the library onto the lower center of the stage.
This dialog box is ready as is, so this step deals with positioning.
I usually try to position repeating dialog boxes in the same location across frames, where possible. Sometimes a repeating element may block another, and then you have to move it elsewhere. The rest of the time, though, the motion will distract the user from the main content.
Return to frame 10 and select the blue dialog box. In the Property inspector, note the X, Y numbers. Go back to frame 20, select the dialog box, and enter the same X, Y numbers seen in frame 10.
The X, Y numbers refer to the position of the object. The number is measured in pixels from the top-left corner of the stage to the registration point of the object. The registration point refers to the arbitrary point in the object from which its X, Y position is determined. In most cases, the registration point is the object's upper-left corner or its center. When a symbol is selected, a circular target symbol appears—this represents the object's registration point. In the case of the blue dialog box, the registration point is in the center.
NOTE
Even if you enter an integer, such as 190, Flash might change the number slightly to something like 190.3. Such changes are small fractions of a pixel and can be disregarded.
Following steps 6 and 7, add the remaining dialog boxes to the remaining keyframes, following the numbered order.
In the frame with the disclaimer (frame 60), if you position the dialog box in the same place as the others, it will obscure the cursor that will come down to click the Accept button, making the tutorial harder to follow. This is one of those exceptional cases I referred to earlier. I recommend dragging the dialog box up and to the left. You should do the same for the next screen (frame 70), because the cursor will still be there, after Accept is clicked.
In frame 100, drag out instances of dialog11_endoftutorial (if you haven't already) and title2_endoftutorial. Then drag an instance of mwm_logo.gif, found in the other folder of the library, onto the stage, and arrange them.
I make a point of adding a closing screen, so users know that the tutorial has, in fact, ended. The Made With Macromedia logo is required for certain types of multimedia projects, including Authorware and Director media. It is not required for Flash movies. I added it here to give credit where it was due (and because the page looked sparse without it).
)
)
)
)
)
)
)