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):
Select the
Text tool and open up the Text Options tab
(Window>Panels>Text Options)
Select
"Dynamic Text" from the drop-down menu.
Next, select
the text color, type, size, etc. accordingly.
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.
In the Text
Options, type "letter" in the Variable box:
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...
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).
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.
else
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
++_root.count;
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.
Random
Letter Cycling 2.0
