Hey, this is my first tutorial!
Here it goes.
Just recently, I wanted to make my hit counter on my website display random characters before eventually showing the actual hit count. I read the two great tutorials on how to do this, but I didn’t want to quite do it the way they did. The difference with my method is that I don’t use ascii code, and there’s no movie clip duplication. I use strictly arrays of the letters, and randomize it there. My method also offers minimum and maximum number of times to randomize for each letter.
I call this: Cycler.
Attached is the .fla. I would suggest downloading it, but if you’re like me and would rather see the code right here; here it is. At the bottom, after the snippet, I have explanations of various critical parts of it.
At this point, it can get rather long, so if you have the patience, please read on.
<Start Snippet>
// Constants, as function literals (so they can’t be modified from the outside)
// However, the actual variables used during the cycle CAN still be modified 
getDefaultRandomChars = function(){return “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890”;};
getDefaultMinCycles = function(){return 5;};
getDefaultMaxCycles = function(){return 45;};
// Don’t change any of these from the outside
var cycleName = “”;
var randomChars = getDefaultRandomChars();
var minCycles = getDefaultMinCycles();
var maxCycles = getDefaultMaxCycles();
var clipInitialized = false;
var cycleInitialized = false;
var cycling = false;
var aNameOriginal = new Array();
var aNameCycled = new Array();
var aCycles = new Array();
onEnterFrame = function(){
if (!clipInitialized){
// Add any intialization here
clipInitialized = true;
return;
}
if (cycling){
if (!cycleInitialized){
// Initialize letter arrays
aNameOriginal = String(cycleName).split("");
aNameCycled = String(cycleName).split("");
// Initialize the cycle counter
aCycles = new Array(aNameCycled.length);
for (i=0; i < aCycles.length; i++){
aCycles* = 0;
}
cycleInitialized = true;
}
for(i=0; i < aNameCycled.length; i++){
// Goal: Cycle through each letter and randomize it
// Must randomize at least n times defined by minCycles
// Must stop randomizing after n times defined by maxCycles
if (aCycles* < minCycles){
aNameCycled* = randomChars.charAt(random(randomChars.length));
aCycles*++;
}
else{
if (aCycles* > maxCycles)
aNameCycled* = aNameOriginal*;
else
if (aNameCycled* != aNameOriginal*){
aNameCycled* = randomChars.charAt(random(randomChars.length));
aCycles*++;
}
}
}
// Output
mainText.text = aNameCycled.join("");
if (mainText.text == cycleName){
// Reset and do a little cleanup
cycling = false;
cycleInitialized = false;
cycleName = "";
aNameOriginal = null;
aNameCycled = null;
aCycles = null;
}
}
}
function Cycle(pcycleName, prandomChars, pminCycles, pmaxCycles){
// Apply defaults if necessary
if (pcycleName == undefined || pcycleName == “”) return;
if (prandomChars == undefined || prandomChars == “”) prandomChars = getDefaultRandomChars();
if (pminCycles == undefined || pminCycles < 1) pminCycles = getDefaultMinCycles();
if (pmaxCycles == undefined || pmaxCycles < 2) pmaxCycles = getDefaultMaxCycles();
// Validate
if (pminCycles >= pmaxCycles){
// user error, use defaults
pminCycles = getDefaultMinCycles();
pmaxCycles = getDefaultMaxCycles();
}
cycleName = pcycleName;
randomChars = prandomChars;
minCycles = pminCycles;
maxCycles = pmaxCycles;
cycling = true;
}
<End Snippet>
Usage:
The main occurrence is for the parent to call the Cycle function. The first parameter (required) is the String you want to cycle on. The second Parameter (optional), is the list of random characters you want the cycle to use. The third and fourth Parameters (optional) define how many times you want random characters to cycle (min and max, respectively). That’s it, just call that function.
Explanation:
The first 3 lines are function literals, serving as my Constants. Not really sure why there isn’t away to define constants and/or protected variables unless I’m missing something.
The next set of lines are just simple variable declarations. The most important of which are the arrays. I have arrays that hold the original and altered letters, as well as, an array to hold how many times each letter has been randomized.
The first function is another function literal. This is the onEnterFrame function. I use this quite a bit, as I try my best to “blackbox” all my movie clips. And in order to “blackbox” it, any initialization of variables and whatnot should be done inside the clip instead by the parent. In this function, this is where most the logic is. As the function is entered x number of frames per second (defined by your frames per second value), it loops through the array of letters (further down, I’ll explain how this is set) and randomizes them via randomCharacters variable. It will only randomize if it has not exceeded the maxCycles variable, and if it does, it simply uses the correct letter (from aNameOriginal array). After all characters have been randomized inside the aNameCycled array, it is then outputted to the mainText dynamic text control by calling the join() String function. The join() function joins all elements in the array into a string. The parameter passed in, is what delimits the elements. In this case, we want the characters contiguous; that’s why we pass in an empty string (""). After mainText is updated, the function needs to determine whether the next instance of the function still needs to randomize. If mainText equals what you want to be displayed, it turns off the cycling variable.
The next function is Cycle. This is what the parent clip should be calling. Usage is described above. This function takes the parameters, validates them, and applies default values if necessary. If everything is cool, the main variables (cycleName, minCycles, maxCycles) are set, and the cycling flag is turned back on.
Please email me on any comments or questions about this tutorial. When my site is up, you’ll be able to access this tutorial there, as well, and hopefully, in a better format than this.
Thanks.
JGo
