The ScrambleTextEffect Component

The scramble text effect needs the concept of a shared font in order to work properly because it rotates the individual letters of a set of text quite a bit. Open a new Flash movie and drag an instance of the ScrambleTextEffect component from the Components panel. Once again, you will notice that some text appears in the component already, because of the component's live preview. Before we try anything else, let's get the effect working with its default settings. This takes a little bit more work than the FlushTextEffect component. Start by creating a new shared font, with the font of your choice, and give it the linkage name "scramble_font." Although we could use any linkage name, we'll use this name because it is the default value in the component's parameters.

Component 

The file ScrambleEffect01_Sample.fla in the Chapter 7 folder has all of this already done for you. Open the file and test it to see the effect. When you publish, you will see a bunch of letters scrambling across the screen, as shown in Figure 7.12.

Figure 7.12: The text effect scrambles the letters of a message across the screen and then rotates each letter to its final place.

Once the letters have come to a stop, they will start to rotate around the screen in what seems a chaotic fashion. However, after a few moments, the letters fall into their final place, and the set of text comes into form. After this, the process repeats ad infinitum.

Like the flush text effect, this component can handle many sets of text. Also, there are fewer parameters to customize for this component, and they are much simpler. Table 7.2 shows a complete list of parameters for the ScrambleTextEffect component.

Table 7.2: Parameters for the ScrambleTextEffect Component

PARAMETER NAME	DESCRIPTION
Text Messages	Array that holds all the sets of text that you want the component to cycle through. The only HTML tag enabled in these messages is the line break tag <br>.
Text Size	Size of the text in each set.
Font Linkage	Linkage name of the shared font you created in your library.
Text Color	Color of the text in each set.
Text Kerning	Number of pixels between each letter in the set of text.
Frame Delay	Once the text is fully animated in, this parameter determines the number of frames that must pass before the next set of text begins to animate in.
Stage Width	Width of the stage you are using in your movie.
Stage Height	Height of the stage you are using in your movie.
Loop	True or false value that determines if the sets of text should be played continuously in a loop or not.

At first it may seem weird that the component asks for the dimensions of the movie's stage, but the two parameters are actually very important. If you look at the effect in action again, you will see that the letters are scattered across the screen randomly. The parameters that hold the width and height of the stage are used to ensure that the letters stay within the boundaries of the stage, so that the letters remain visible to the user.

On the CD 

One important change to take note of is that, unlike the flush component, we cannot use all Flash-compliant HTML tags. In fact, we can only use one: the line break tag. Because each set of text has to be broken down to its letters, it would be overly complicated to parse a string for any HTML tags and apply the style to each individual letter. Considering the fact that this component is supposed to be dead easy to work with, I've taken every measure to make sure the component stays true to that. In Figure 7.13, you can see that the line break tag was used to create three lines of text. Open the ScrambleEffect02_Sample.fla file in the Chapter 7 folder to see an example of the line break being used.

Figure 7.13: Even though most HTML tags have been disabled in the ScrambleTextEffect component, you can still use the line break tag to create text that flows into two or more lines.

If you experiment with the effect long enough, you will notice that the text does not always show up exactly where the live preview predicted it would. Although the top-left corner of the text will be exactly at the top-left corner of the live preview, the text seems to extend further out than the live preview showed. This is due to the kerning of the text. It is near impossible to detect the exact width of a letter in an arbitrary font directly in Flash MX since a small buffer is always added around text in a text field, which adds a few pixels to the font's width. To fix this problem, I've added the kerning parameter. The value for the parameter can be either 0, positive, or negative. Although you may want some extra buffering between each letter, most of the time you will probably want to remove the space to make the letters fit together more tightly, as shown in Figure 7.14. You can accomplish this by using a small negative number such as -2 or -3. The Chapter 7 folder contains a file named ScrambleEffect03_Sample.fla that shows how this is done.

Figure 7.14: Use a negative kerning value to make the letters of the text set fit closer together.

One last thing to keep fresh in your mind is that the font changes you make in the component's parameters are not reflected in the live preview of the component. This may seem like a glitch at first, but it is actually quite obvious and could be no other way. Since you are providing a font through a shared font symbol, there is no way for the component to have access to that symbol from the live preview. So, remember that the amount of space the text takes up on the stage can be slightly altered by which font you choose.