- Intro
- Under the Hood: The Typing Effect
- Spotlight: Skip the Intro
This chapter is from the book
This chapter is from the book
This chapter is from the book
Under the Hood: The Typing Effect
Thoughtbubble used a dynamic effect to draw the visitor's attention to important text in the Greatest Olympians site. As the screens load, the text is typed into the screen letter-by-letter for a dramatic, Mission Impossible–type entrance. Thoughtbubble produced the effect by creating a script that can animate any text, in any position and formatting required.
Using ActionScript functions, rather than keyframing the animation, not only took far less time to implement, but also made it easy to change the text in response to the client's feedback, and to reuse the effect in different areas of the project without recoding.
When they developed this site in Flash 5, the programmers attached the ActionScript to frames inside of a movie clip, which loop in order to update a dynamic text field according to the movie's frame rate. Thanks to Flash MX, Thoughtbubble can now take advantage of the new object event model to define a function and trigger it programmatically, rather than from a timeline loop. The new SetInterval() action defines how often the function is called.
To create the effect, Dave Carroll, Thoughtbubble's Flash developer, created two layers on the timeline, naming one actions and the other textContent. On the textContent layer, he drew a rectangular text field that would define the area that the type would take up on screen. He then used the Properties Inspector to make it dynamic and multiline, and to assign the instance name textContent, along with the type font, size, color, and other formats (Figure 1).
)
Figure 1 The dynamic text field, with its size and formatting, is defined
in Frame 1.
Next, he selected the actions frame and entered the code shown in Figure 2 into the Actions window. The code has two parts: a function called initTyper, to initialize the function, and another called doTyper, to run it. The initTyper function creates a string variable (charNum) to count the number of characters in the text, and another (theChar) to save the current character number. Then it creates an array variable (words) to store the text and uses setInterval to pace the onscreen typing.
)
Figure 2 The script that types out the message creates two functions:
initTyper and doTyper.
The doTyper function determines whether the end of the string has been reached. If it has, it stops the setInterval action. If it hasn't, it passes the next character in the array to the dynamic text field, updates the stage, and sets the character-counting variable to the next number.
Because Thoughtbubble used a single text field for the entire text string, Flash was able to handle all the line wrapping during the animation. This effect was an unlooked-for benefit of animating the text this way, avoiding the need to add extra code (and reduce the modular flexibility of the script) to control the word wrap.
Flash Plus Java
Once the voting line is filled with ten tiles, the Submit button next to it becomes active. Clicking Submit Vote activates a movie clip that collects the data and stores it in a database. Clicking View Current Standings activates another servlet that returns a string of data reflecting the current vote. Senior Programmer Robin Curts notes that the design of the front end actually made the back end simpler and less expensive to code—in addition to enforcing a fair vote. Because the Submit button doesn't become active until all ten slots of the voting line are filled, and because each athlete is represented in the interface by only one tile, users can't vote for a single athlete over and over again.
if (status == "success") {
gotoAndStop(9);
} else if (status == "failure") {
gotoAndStop(11);
} else {
gotoAndPlay("checkServer");
}
)
When the Submit button is clicked, it collects the
votes from an array on the root where they are stored and sends the ten values
to a Java servlet. The servlet returns success to the status
variable. The movie loops between the frame that holds the button and a
frame that checks for success. When it hears success, the
movie displays a message to the user, changes the button to Submitted Vote, and
displays the current standings.
_root.voted = 1;
loadMovieNum("standings.swf", 30);
stop();
A third servlet managed the clicks on View Greenspan's Top Ten. To build tension—and encourage return traffic—Greenspan's own top ten were released over time, with a new athlete announced about every two days. The programmer created a servlet that would handle the time release on its own. When the button is clicked, the servlet checks the current time and date and sends out only the part of the list that is to be publicized by that time. Using a servlet to manage the timing of each announcement was a way of making site maintenance as easy as possible, says Goldleaf.
Components in Flash 5
The Thoughtbubble team coded the project in record time: Five days after the approach was approved, they had a working site. Using Flash 5 ActionScripting, the team made sure that the site was coded for maximum flexibility and quick changes. Rather than place objects in frames, the team created every possible piece of the interface as a scriptable movie clip. "Everything was defined as a function in the first frame of the movie," says Carroll. For example, since the team didn't know at the outset how many athletes would be featured or what colors they would finally use, the color chips that stand for each athlete were created as objects with variables for their color and position. "Each tile knows who it is and what its x-y position is, so that it can snap back when it's moved," says Gomez. The content area was also created as a template so that the designers could swap out images as needed. The text is a dynamic text field, so when the client or the athletes wanted to make changes to it, those changes could be made rapidly.
The "typing" effect used for site instructions was another example of the effective use of ActionScript modules to make changes easier and the code reusable (see "The Typing Effect," page 186). "We could feed it any text, and it would be typed out," says Gomez. "It wasn't a tweened animation. If that text was keyframed out, we would have gone crazy reanimating the text every time a change was requested." As it is, the text can be changed almost instantly in an external text file. "I think it's the smallest thing we ever built," says Gomez. "It's something like 400 bytes."
"We tried to make sure that in this design, the things that we needed to change were changeable and the things that weren't going to change were not changeable," says Gomez, noting that things like the overall grid and the position of items like the logos and voting mechanism were fixed.
"We used a SmartClip user interface module for the biographytext scroll bars. We could customize the look and feel to match the final design, but the functionality was set beforehand," explains Gomez. The scroll bars work similarly to Flash MX's components, although the Thoughtbubble team created them by assembling and modifying public code available from Flash-community source-file exchanges.
Only in Flash
It took a little convincing to get the client to agree to use Flash for the site, says Heck, but the team felt that Flash was the only way to achieve what they wanted to do. The team also knew that with careful file setup, they could actually make the site load faster than it would in HTML.
Using the SmartClip coding was one way Thoughtbubble kept download times short. "The heaviest thing in terms of file size is the intro," says Carroll. "But we don't force people to download the whole thing. We buffered it just enough to load smoothly on 56 K." Each athlete movie weighs in at about 20 K to 60 K. "We made the case that Flash movies don't have to take forever to load,"says Carroll. "In the end, what we've done is actually more efficient than Web pages, where every time you click you have to download the HTML and the formatting information."
The team also convinced its clients that the Flash 5 plug-in was ubiquitous enough that most of their audience would already have it. For those who don't, the team didn't even try to replicate the Flash experience with HTML. Instead, users who come to the site without the plug-in are directed to a page that gives them the opportunity to download the plug-in or go straight to the sweepstakes registration, which, after all, is what they came to find out about. To make sure that nobody misses it, the sweepstakes entry form is coded in HTML.
)
The only HTML page on the site is the sweepstakes
registration. People coming to the site without the Flash 5 plug-in are directed
here.