Flash Text Effect using Radomizer

Hello again!

Today's tutorial is about some neat actionScript driven text effect, I like to call it the “brute forced” text effect.

The basic effect we're looking to achieve is to force each letter of the desired text to change taking every possible value till it ends up having the correct value it should take and then stopping it at that value and continuing with the following letter.

Well try our best to make the effect fully customizable, scalable and reusable. Below is that we are going to achieve at the end of this flash tutorial.

For that purpose, start a new flash document, let it have the following properties : Width :375 , height: 60, background color : black and frame rate : 12 (figure 1).

Now, as always, lock the actions layer so that you wouldn't accidentally place any content in it (separating visual content from code) and add whatever you like as background in a separate, base layer.
Now for the important part :

Add a new layer above the background layer, add a dynamic text field to this layer, and give it the instance name of "dt". Select “Courrier New “ as font and set the font size to 24 and the font color to white. You could also at this point add some drop shadow or glow effect to the text if you like (figure 2).

Click to enlarge

Type in some texts just to see how it would look (I've typed the two words Sample Text). And this concludes the design part, now for the coding part:

Let's first think and write our pseudo code:

We should start by specifying what the final text would be; we'll store this text in a variable called desiredText. We will also initialize the "dt" dynamic text to have no text in it by assigning its text property the value of " " (an empty string). The code to do that is very simple :

Now we would like to have the dt field show the first letter, which is an “C” after shuffling through several values, we would also want this to reoccur for the remaining letters of the sentence CambodiaXP Flash!.

In order to achieve that, we would start by constructing a function that will randomize the letters one after the other till the correct letter is met; we will call this function every 10 milliseconds using the setInterval method and once all the letters have appeared correctly we will simply clear the interval to stop calling the function.

So the core of this effect is in fact this function itself, we'll call it randomize();

Here's what this function will look like :

The first line checks the index of the letter we're animating which is stored in the variable i, if it's still within the sentence or if we've reached the end of the sentence, in the first case, the code will call the function “go()” while in the second, it will call the function “clr()” to clear the interval and end the animation.

Of course variable i should be initialized to the value of zero as it is the index of the first letter in the desiredText (the index is zero based as in arrays).

Now what about this “go” function? What does it do? Well the answer is just there in the code:

Now for the last part of the code, the clr() function, well the job of this function will simply be to stop the setInerval calls once all letters have been animated and displayed correctly, this function will simply use the clearInterval method as follows:

Where intID is simply as reference to the ID of the setInterval call we'll write in the next line to call the randomize function every 10 milliseconds.

That's it! We're done.

I would like to point out few important tips:

1- I've used courier new font in this case as it is a “fixed width” font, this will make the effect look much more subtle and professional, otherwise the text will simply look jaggy as it animates all over the place.

2- The charAt method simply retrieves the letter of a string indicated by the index i while the fromCharCode method returns the letter whose ascii character code is given in the argument j.

Using the fromCharCode method, we were able to retrieve the letters of the alphabet consequently by just incrementing j, this is the core of the effect so keep it mind.

So till next flash tutorial, may I suggest that you make some changes or variants of this effect, maybe having some initial text in the dt field instead of it being empty or maybe randomizing the text from both its ends instead from one end, go ahead and innovate !