Letter Cycling 2.0
        Manny Dimatulac aka Thoripes

Now I wrote a second version for this effect because so many people were e-mailing me (and I thank you all), about, "How do I make it choose the letter faster?", or "why doesn't it work?", or "why can't I use numbers?", etc.
Well I made this tutorial to make answering those questions easier, as well as a better and more efficient way of making this effect (wait, there's efficiency involved in flash??? yes.).

Changes made in Version 2:

  • Now instead of making one movie, duplicating it, then manipulating each individual one to choose the right letter, all the code is in one movieclip.
  • The code is easier to manipulate
  • Eliminated the ASCII code-technique (which was very tedious)
  • You can actually choose which letters you want to cycle through, making it possible to shorten the cycling.
  • You can now enter what text you want to appear by just typing it in the code
  • Now, the letters cycle faster if the search goes a-z.

The tutorial:
Ok, here's the movie, refresh browser to see it again (looks the same on the outside, but inside, it's a whole other story):

  1. Select the Text tool and open up the Text Options tab (Window>Panels>Text Options)

  2. Select "Dynamic Text" from the drop-down menu.

  3. Next, select the text color, type, size, etc. accordingly.

  4. Now draw out the text field on the main stage at about the size of one character. To test, type a character inside, then adjust.

  5. In the Text Options, type "letter" in the Variable box:

  6. If the letters you want (incl. letters to cycle through as well as what you want to cycle to) are only lowercase, select the button with the lowercase "abc", if upper, "ABC", if there are also numbers, select one of those two as well as the one marked "123", symbols? Guess which one you have to select...

  7. Select the text field, hit F8 or go to Insert | Convert to Symbol, then name it something (doesn't matter; just make sure "Movie Clip" is selected).

  8. Now, for the code; right click the movie clip you just made and select Actions. From the Actions Window, copy and paste the following code:


5) Next, select the Movie Clip, choose the Instance Tab, then name it "main" -- very important

6) Now test your movie (CTRL+F5) and you should see "thoriphes" cycle through, of course, you could change this in the code

Deconstructing the Code:
The following sections will explain how and why the code worked so you can learn a little bit of ActionScript as well as cycling a letter. Let's start from the top!

onClipEvent(load), onClipEvent(enterFrame)

The area where the code goes, onClipEvent(load) only goes through the code within
it once, and as many times as the movie is playing in onClipEvent(enterFrame)

if (_name == "main"){}

The following code within this if block will only run on the "main" instance, because
this code duplicates a movie, as well as the code inside it, so if we were to leave this out,
the movie would go haywire creating a lot of movies.

name = "thoriphes";

Change this to whatever you want.

for (x = 0; x < name.length; ++x) {}

Literally saying, "for the variable x, as long as it's less than the length
of name, add 1 to x". This loop is used to create duplicates of this movieclip (along with code)
for each of the letter in the string, "name". In my example, it would duplicate 9 times
because "thoriphes" has as 9 characters. "name.length" will return 9.

this.duplicateMovieClip("let"+x, x);

This simple command tells this movieClip to duplicate itself and name it letx
where the x in "letx" is the number of times the loops has looped, this is also
a way to keep each clip nominally unique (no two clips will have the same instance name)
the final ", x" is used to define the depth, nothing much to worry about.

_parent["let"+x]._x += x*15;

I won't go too much in depth with this, but basically moves the clip once it's created
so it won't overlap; try to follow the code to see how I spaced the clips.

_parent["let"+x].endLetter = name.charAt(x);

This puts a variable into each duplicate called "endLetter" and takes out the character it
will represent, using ".charAt(x);" which takes a single character at location x of "name"
Example: name.charAt(0) will return "t", name.charAt(5) will return "p", and so forth

_root.alphabet = "abcdefghi..."

Now this is one of the major changes from my previous tutorial on RLCing. This replaces the ASCII method.
We create this to refer to letters to cycle through in our code.
Any character (or numbers or symbols) that is in the string you want it to cycle to must be placed
in this string, or it'll never find it. Also, you can shorten searches by eliminating the letters
that you won't need in the string (eg. I can get rid of "wxyz" cause it's not in my name)

_alpha = 0;

This hides the original movieclip, since we won't be using it anymore. _alpha is the transparency
property of movieclips. The range is 0-100, 0 being totally invisible, 100 being fully.

Now the code from here on (in the load part) will only refer to the duplicates and not the original

cycle = true;
A boolean we set, will be explained in the next section of code

Here we start in the onClipEvent(enterFrame) {} code block

if (cycle) {}

This is just saying that if cycle is true, continue on through the code. This is primarily used
to keep cycling while the letter isn't the one you choose. Also to prevent the "main" movieclip
from doing these actions as well.

if (this.letter == endLetter) {}

Remember how we declared endLetter for each movieclip? Well, this is where it comes into play.
This if condition basically tests to see if the letter it cycled through is the one it was assigned to
earlier. The next two codes are the result if the correct letter was chosen


This isn't really necessary. I just put that there so that the movie has some way of knowing when
all the letters have been chosen. When _root.count (the variable "count" on the main stage, referred
to as _root) is equal to the number of characters in the name (in my case, 9), you can assign some
special thing to happen after.

cycle = false;
Sets cycle to false (duh!). You don't want to cycle through anymore letters once it's found it, do you?

else {}
If the letter isn't the one you want...

this.letter = _root.alphabet.charAt(random(_root.alphabet.length));
This piece of code randomly chooses a letter from our "alphabet" string.

There, that finishes it. Any questions can be directed here.




kirupa.com's fast and reliable hosting provided by Media Temple.