Programmable Button

We will drive our game with data in objects like those we just studied. But first we must create interface elements that can respond to these objects.

Text on the Button

Our path to a data-driven screen starts at the bottom. Our first goal is to data-drive the text of each answer option button.

The most straightforward approach is to move the text into the actual button. Currently the four lines of answer option text are in the base movie, each superimposed over a button. We want the button to include dynamic text fields, so that the base movie has no text variables ”just four buttons and the ability to direct each of them to display the appropriate text. So we add a new layer to the button; for our own convenience, we name it Text. We create a simple line of text in the desired font and location (Figure 2.1). Bearing in mind that this line of text is just a placeholder and that it stands in for hundreds of different lines of text, we carefully size it and position it to make each of the unknown lines look good.

Dynamic Text

Before we put too much effort into making the text pretty, we need to make it smart. This is easily accomplished with the Text Options panel (Figure 2.2).

Figure 2.2. Dynamic Text Based on the Variable text

We convert this text into Dynamic Text to reflect the contents of a variable, not a fixed string set by the designer. The variable name is specified by the programmer. In this case the variable is named (rather boringly) text.

Checking the HTML option enables italics, boldface, and other effects, and it also permits us to rotate the design ”by setting a large font size, for example. We use the HTML option in later examples (though certainly nobody can stop you from trying it right now).

Border/Bg is quite useful for quickly creating simple forms, dialogues , and utilitarian interfaces, but is too crude for a design like ours. It creates a very visible and opaque text box for display, input, or both. It is blatantly two-dimensional, and it lacks even a clumsy mechanism for customization.

The Selectable option should be scrupulously disabled for any button face text. If not, mouse clicks on the button face are frequently trapped as text selection rather than as a button press.

Flash does not know the contents of the text that this line will be called on to display. Neither do we, at this point, but we are in a better position to guess. If we can determine that the text requires only a subset of the entire font, we can trim the size of the Flash file. Faster downloads, happier users.

Most designers call for a special font (one that is not installed on every computer). To display this text, the Flash file must include a copy of each font it uses. Flash is smart enough to create a subset of the font, if you are smart enough to know which characters must be in it: include the whole font, or a subset.

The Text Options panel contains punchbuttons for uppercase and lowercase alphabets, digits, punctuation, and a user -supplied list of characters. We indulge a lazy instinct and just click the Include Entire Font Outline icon.

Now let's clear out some of the clutter from the Static Text example.

Highlight all four answer option layers and click on the garbage can symbol:

Separate the question and responses and the (now solitary) answer onto appropriate layers and frames (see Figure 2.3).

Figure 2.3. Separating the Different States

Activating the Dynamic Text

When we run C ONTROL /T EST M OVIE , we see nothing very interesting. Try it. The text is still the text we typed in (Figure 2.4). Boring. But remember that the Dynamic Text is pointing to a variable called text that we have yet to define.

Figure 2.4. No Dynamic Text Appears

Open the Actions panel for frame 1 of the main movie (Figure 2.5). Open the keyframe on the Code layer. Above the existing stop instruction, define the variable text by assigning to it a value ”in this case an utterly meaningless string literal.

Figure 2.5. Setting the text Variable

 text = "This is the good stuff!"; stop(); 

Now when we test the movie, the button reflects this assignment:

How dynamic is this dynamic text? Pretty dynamic. Try an assignment that is less fixed than the assigned string literal, like

 text= new Date().toString(); 

The results will be different every time it is run. On this lucky afternoon, the button looks like this:

Fancy Text Effects

Smart design can enable pretty design. Clean structure and no duplication create a great environment for creating rich and interesting graphic details.

In the last chapter we made four different lines of text for the answer options. Each one was individually created as a graphic element. We can see that for every round in a quiz, four more text elements will be needed. Creating a small, 10-question quiz would mean editing 40 lines of text, each of which is a complex graphic operation in a drawing editor. Clearly, you would need to keep the graphic ambitions of the text as simple as possible (no special effects). Otherwise the work of maintaining the quiz site would be overwhelming and extremely error-prone .

By contrast, in the new system, using the elements we are now building, all 40 lines of text display the same text graphic. Any work we do is leveraged enormously ”4,000 percent on the first quiz! It pays to invest effort into making this line of text as handsome and as responsive as we can.

Drop Shadow

We can create a drop shadow for this line of text, which will give it a dimensional look. We can also animate the color of both text and shadow on each of the three states, just as the color of the button graphic elements change.

Animating the position of text face and shadow will give the impression that the button is tangibly responding to the click of the mouse. Creative readers will certainly explore other interesting ideas. All this goes toward making our button ”and the text on it ”lively, rich, and real.

Duplicate the text layer. Name the lower one Text-shadow. Make sure Text is bright and Text-shadow is dark. Offset the two layers slightly. Fortunately, the original Static Text contents are still visible, which helps immensely when laying out and animating the drop shadow (Figure 2.6). Each of these two layers ( Text and Text-shadow ) will have unique keyframes for the Up, Over and Down states.

Figure 2.6. Shadowed Text

Each of the six keyframes can be tweaked and retweaked until the button feels like it lights up magically, pushes in resiliently, or stimulates whatever sensation the user is intended to feel.