Making Keyframes

In the Code layer, label three keyframes Start, Win, and Lose. These frames do not have to be consecutive. It is easier to read the labels if they are not and if the L ARGE option is chosen behind this tiny icon, found on the right, just above the timeline:

To label a frame easily, open the Frame panel (by right-clicking on a frame, then opening P ANELS /F RAME ). Type the label name into the obvious place, and voil  !

Construct the Start state

The Start state has a question and four answer options. Each answer option links to either the Lose or Win state. It also has a tiny bit of script.

Double-click on the Start keyframe. This will open an Actions panel.

Type in the single command stop() ; and close the panel. This will freeze the movie on the first frame of the scene. It will not animate. It will sit patiently waiting for the user to create the events that bring it to life.

To create the events, the user needs buttons to press.

Button Instance

Make a layer for the first option. Let's call it A0. Highlight a keyframe at the Start frame of A0, and drag in the AnswerButton we already built. The AnswerButton is a symbol in the library. If the library is not already open, select W INDOW /L IBRARY .

The button we see on the Start frame is an instance of the AnswerButton symbol. Many instances can exist for any symbol. They share one copy of the graphics, sound, and embedded code. But each instance has its own set of variables . Each has independent properties. And each instance has unique actions attached to it. That is our next step.

Button Actions

Right-click on the button and open Object Actions (Figure 1.5). Since it is possible to place actions on the keyframe as well as on the button itself, you must take care to double-click on the button, not the frame. The operations look similar but function differently. The title of the ActionScript panel should be "Object Actions."

Figure 1.5. Adding Actions to an Object in Normal Mode

This ActionScript panel can appear in Normal or Expert Mode. In Normal mode you can click on Go To and insert this function. Choose the Type of the goto as Frame Label and select the Lose frame.

The support from the Normal mode training wheels is welcome at first; it helps remind us of options and syntax (was it "Roll Out" or "rollOut" ?). But it quickly becomes claustrophobic.

This code will cause the movie to play the Lose frame whenever the mouse release (the final part of a click) occurs with the cursor over this button. This functionality is all we need for now.

Button Text

Now we need to put an actual answer on this option button.

Highlight the keyframe (and defocus the button; Figure 1.6). Using the Text tool, stretch a rectangle across the face of the button and type in the first answer option. Right-click on the text to open the panel Character to choose color , font, and size . Paragraph lets you choose (for example) to center text.

Figure 1.6. Adding Text to a Button

Now we have a single button that is useful for choosing "William the Conqueror" and achieving a Lose result.

Hey, it's a start.

More Buttons

Highlight the keyframe that has the button instance and the text (Figure 1.7). Copy the keyframe. Create three more layers , and paste the keyframe in each. Name them and align the buttons nicely .

Figure 1.7. Quadruplicated Buttons

It is best to align the buttons using numbers in the Info inspector. While Flash features alignment tools to help with layout problems like this, we'd better get used to solving them mathematically. We are ultimately going to abstract and automate these design steps, for example, when programming an unknown number of buttons to space themselves out automatically.

Now it is the work of a few minutes to change the text so that we have four distinct answers. While we are at it, we had better include a question in the Q layer (Figure 1.8).

Figure 1.8. Differentiating the Four Buttons