What to Expect from Flash Site Workshop

Customize the Introduction

There are several options and elements that you can customize easily so that the Introduction is truly your own creation.

Sound Control Button

It's important to provide users with a way to silence the soundtrack while they continue to view your movie. It's not always desirable to listen to high-energy music through an entire site visit, and if you don't provide your viewer with a way to turn down the sound, it can become annoying. The speaker graphic is actually a Movie Clip that contains two identical buttons—one that enables the user to turn off the soundtrack and another to turn it back on.

Double-click the speaker button to go to the Music On-Off Movie Clip. In the Actions layer, you see two keyframes. The first has a stop() action. Below that layer is the Sound Loop layer that contains the music loop in the first keyframe. The bottom layer is titled Mute/Play Sound Button and contains a button instance in each keyframe, a speaker for On, and a speaker with a slash for Off.

Use swap symbols in the Instance panel to replace these buttons with something new. If you delete and replace the instance of the buttons in the Movie Clip, you'll lose the code that allows them to function properly. This is especially important because the speaker button contains the code:

on (release) {
  stopAllSounds ();
  nextFrame ();
}

This code sends the play head to the second keyframe that doesn't contain a sound clip. The script also contains the command stopAllSounds(). This command is essential because the music snippet is set to loop 100 times. Even if the play head is sent to a keyframe where no sounds exist, the snippet will continue to loop until it hits 100, unless Flash mutes it.

Double-click the first frame of the Sound Loop layer to see the properties in the Sound Properties window. This symbol, called Music Loop, is a 44khz, 16-bit snippet of stereo sound. The sync is set to Event and will loop through 100 times before it stops. When you replace this snippet with your own loop, you'll need to set the sync to Event and set the Loops option so that the music snippet will loop at least 100 times. There's a list in the online resource appendix of suggested sources for music loops edited especially for Flash users.

Figure 3.19 Music On/Off button on Stage.

Go to Main Movie Button

One of the first interactive choices that you should offer your users is the option to skip the Introduction section entirely. If this is the 50th time they've come to visit your site, or if they just want to get straight to the content, the Go button enables them to get right to the heart of your movie.

You can swap out the go2 button instance with your own graphic by using the swap symbols option on the Instance panel. If you look in the ActionScripting window, you'll see the code attached to the button:

/*
This is where you tell the "go to main button" where to go.
"Main" is the name of the scene you are going to, and "MainMovie",
is the name of the first frame on the homepage. 
*/

on (release) {
  _root.sound.gotoAndStop(2);
  stopAllSounds();
  gotoAndPlay ("Main", "MainMovie");
}

As you can see from the comments in the code, this refers to the label placed in the keyframe of the beginning of the Main scene. If you change the label in this location, be sure to update this code. You can also see that it will mute all sounds that are playing so you don't get a bleed over into the home page section.

Figure 3.20 Go to Home Page button.

Customizing the Text

The Loaded Text graphic symbol is found in the Loaded Text layer. The text in the graphic symbol is a static text field so you can replace the current font with any font you choose and it will render correctly when it is played, regardless if the user has the font installed on their system or not. You can also change the color of the text, the Tween motion, and the rate of entry of the graphic.

Figure 3.21 Loaded text on the Stage.

3-D Animations

The 3-D animation of steel washers is actually a Movie Clip titled 3-D_Animation. If you double-click the Clip instance on the Stage, you'll see the animation is a series of images similar to an animated .gif. You can replace these animations with your own design. There's software on the market tailored to provide developers with tools to create sophisticated animations quickly and easily. Some of these are listed in the online resource appendix.

Figure 3.22 3-D_animation on the Stage.

Random Quote Generator

One of the unique features of this introductory animation is the random quote generator. You can edit this section to reflect your quotes, company taglines, slogans, products or services features, and so forth.

Notice the Random Quotes layer in the Main Timeline. This layer contains the Random Quote Movie Clip. Double-click this Movie Clip to view its Timeline. The Random Quote MC is currently constructed to run through a list of 10 quotes that reside in the Library, choose one at random, and have it tween across the top of the Stage from the left side to the right side behind a mask. The process repeats with a different quote each time.

Border

Inside the Random Quote Movie Clip is the Border layer. This layer contains the outline of the space where the quotes tween through. The outline isn't a symbol; it's drawn directly on the Stage. You can edit the color by using the Stroke panel.

Replacing Quotes

It is exceedingly simple to replace these quotes with your own copy. Notice that there is a folder in the Library titled Random Quote Materials. Double-click to expand its contents and you will see a list of quote symbols from 1 to 10. Double-click each quote in the Library to edit the font face and content to reflect your material. This is a static text field so you do not need to choose a device font, unless you would like to shave some file space off your movie in exchange for limiting your font choices. In this case, the difference would be miniscule, but in some cases, every byte counts. The script is set up to look for the name of a specific keyframe in the Movie Clip Timeline, not its actual contents or symbol name. In that way, the script will continue to operate correctly if you change the contents.

Figure 3.23 Timeline of Random Quote Movie Clip.

Figure 3.24 Random Quote Movie Clips in the Library.

Adding Quotes

Although it is simple to edit the content inside any of the 10 quotes, it is slightly more difficult to modify the number of quotes that are randomly generated. The object of this book is not to teach you how to create ActionScripts, but rather provide you with a workable template. I will give you a step-by-step run-through of this process without delving too deeply into the aspects of programming. With that said, let's start by adding an eleventh quote to the random quote generator.

1. After you have customized the look of the other 10 quotes, create the new quote symbol by going to the Library and choosing the Random Quote #10 symbol.

2. Go to the Options menu and duplicate the graphic symbol. Name it Random Quote #11 and make sure that it is a graphic symbol.

3. Double-click the symbol to edit it and enter a new quote in the text field. By doing this, the new symbol is consistent in font size, typeface, and color.

4. Notice in the Scrolling Random layer that each quote is approximately 100 frames long, that they begin on the left side of the Stage on the X coordinate -350 and the Y coordinate 0, and that they end at the right side of the Stage with the X coordinate 500.

5. If you scroll to the end of the Timeline in the Movie Clip, you will see that the last quote ends on frame 1001. Insert two blank keyframes (F7) into frames 1002 and 1003.

6. Drag the Random Quote #11 symbol into frame 1003. It doesn't matter where you place it on the Stage; we will position it using the Info panel in a minute.

7. Scroll down the Timeline and insert a frame (F5) into frame 1102.

8. Go back to frame 1003 and set the X coordinate to -350 and the Y coordinate to 0 in the Info panel, remembering to press Enter after each number.

9. With that frame selected, create a Motion Tween.

10. Go to frame 1102, insert a keyframe (F6), and set the X coordinate of the Movie Clip to 500. Leave the Y coordinate as it is.

11. To make sure that the mask covers your additional quote in the Timeline, grab the end of the last frame in the Mask layer and drag it to the last frame of your eleventh quote layer, frame 1102.

We now need to add the ActionScripting that will allow the new quote to be integrated into the Random Quote Generator.

1. Go to the top layer where all the scripts are kept, add a blank keyframe to frame 1002, and label it q11.

2. In that frame, place the script:

if (q11 == false) {
nextFrame ();
play ();
} else {
gotoAndPlay (2);
}

It might be easier if you copy and paste the syntax from frame 902 and change the value on line 1 from 10 to 11. This code checks to see whether the quote has already been seen; if it hasn't, it will execute this specific Motion Tween, sending the quote across the Stage. It must appear in the first frame of each quote.

3. Scroll down to the last frame (frame 1102) and create a blank keyframe. In this frame place the script:

q11 = true;
gotoAndPlay(2);

You can copy, paste, and update this script from frame 1001 in the same manner as you did in frame 902. This code sets this specific quote to the value true, which means that the viewer has seen it. It then sends the play head back to frame 2, which contains the code to initialize the random quotes.

4. Look at the workhorse frame 2. In this frame you will see the following code:

if ((q1 == true) and (q2 == true) and (q3 == true) and (q4 == true) and 
(q5 == true) and (q6 == true) and (q7 == true) and (q8 == true) and 
(q9 == true) and (q10 == true))
{gotoAndPlay(1);
}else{
gotoAndPlay ("q" add int(random(10)+1));
}

In the first two lines, the code checks to see if all the quotes have been seen. To change this to reflect your additional quote, you must add a condition that corresponds to the name of your new variable—in this case, q11. So you would add and (q11 == true) directly after the (q10 == true) statement. You then need to change the last line of code to change the value upon which the random feature is based. In this example, change the 10 to 11. Your new code should look like this:

if ((q1 == true) and (q2 == true) and (q3 == true) and (q4 == true) and
(q5 == true) and (q6 == true) and (q7 == true) and (q8 == true) and 
(q9 == true) and (q10 == true) and (q11 == true))
{gotoAndPlay(1);
}else{
gotoAndPlay ("q" add int(random(11)+1));
}

5. Look at the code in the first frame of the Movie Clip, which reads as follows:

q1 = false; 
q2 = false; 
q3 = false; 
q4 = false; 
q5 = false; 
q6 = false; 
q7 = false; 
q8 = false; 
q9 = false; 
q10 = false; 
play ();

6. Add your new variable to this list so that the "randomize" code can check if it is time for your quote to be shown. Your new code should look like this:

q1 = false; 
q2 = false; 
q3 = false; 
q4 = false; 
q5 = false; 
q6 = false; 
q7 = false; 
q8 = false; 
q9 = false; 
q10 = false; 
q11 = false; 
play ();

Now you're set—test it and enjoy your new quote!

You can remove quotes in a similar manner. Make sure that you remove all the references to that quote so that the code functions properly.

Figure 3.25 The Customized Introduction - Here's the customized Introduction for my fictitious robot company.