Random Animate Letters in TweenMax Box

[freedom1k]

Hello, this is the best site since sliced-bread!

I'm new to the site and was drawn to it from a youtube video that had GreenStock as an import.

 

Anyway, I this tutorial https://www.youtube.com/watch?v=DUYFGXAtgqc and modified the code to place random Letters in the boxes  with dynamic text. (the link above also has source file.)

 

the code:

import com.greensock.*;

/** Alphabet collection */
var alphabet:Vector.<String>;

/** Reset alphabet */
function reset():void
{
   alphabet = new <String>[ "A", "B", "C", "D", "E", "F", "G",
                            "H", "I", "J", "K", "L", "M", "N",
                            "O", "P", "Q", "R", "S", "T", "U",
                             "V", "W", "X", "Y", "Z" ];
                                                                                              
}

/** Get random letter from alphabet */
function getRandomLetter():String
{
    return (alphabet.splice(int(Math.random() *
                                alphabet.length), 1)[0]);
}

/** Shuffle alphabet collection */
function shuffleAlphabet():Vector.<String>
{
    var alphabetShuffled:Vector.<String> = new Vector.<String>();

    while (alphabet.length > 0)
    {
        alphabetShuffled.push(getRandomLetter());
    }

    return alphabetShuffled;
}


// get a random letter:
reset();
var randomLetter:String = getRandomLetter();

trace("Can you find the letter: " + randomLetter + "?");

// display entire alpha shuffled:
reset();
trace(shuffleAlphabet());



var numBoxes:Number = 160;

var tl:TimelineMax = new TimelineMax({paused:true, onReverseComplete:playAgain});

for(var i:uint = 0; i < numBoxes; i++){
                var boxTxt:BoxTxt = new BoxTxt();
                boxTxt.x = 1200/numBoxes*i
                boxTxt.y = 800;
                boxTxt.alpha = 0;
               
               
                var alphabetShuffled:Vector.<String> = new Vector.<String>();
    while (alphabet.length > 0)
    {
        alphabetShuffled.push(getRandomLetter());
        var randomLetter2:String = getRandomLetter();
        boxTxt.randomLetter_txt.text = "" + randomLetter2;
    }
               
               
               
                TweenMax.to(boxTxt.solid_mc, 0, {tint:Math.random()*0xffffff})
                tl.insert(TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt]}), i*.01);
                tl.insert(TweenMax.to(boxTxt, .1, {alpha:0.5, dropShadowFilter:{color:0x000000, alpha:1, blurX:5, blurY:5, strength:0.8, distance:2}}), i*.01);
               
                addChild(boxTxt);
                }

I was able to the random text to appear in each box, but only random at run-time. each character was the same.

Is there a way to get each box to display a different letter in each box in the same way the color is randomized using TweenMax.to. ?

 

You help is greatly appreciated.

 

hmm, this site would not allow me to upload the .fla file, so basically all you need is a MC in the library named "boxTxt" and within that dynamicText named "randomLetter_txt" over a graphics named "solid_mc"

 

[Carl]

I think for this you can just tap into an existing tween and apply an onUpdate callback with onUpdateParams that pass in boxTxt like:

TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt], onUpdate:tweenText, onUpdateParams:[boxTxt]})


function tweenText(box) {
 box.randomLetter_txt.text = getRandomLetter();
}

[freedom1k]

Thanks Carl,

Surprizingly simple tip. I thought for sure it would work.

I got the same result, but with many blinking of the swf after the boxes rested in place.

 

I added the new TweenMax here in the code:

                TweenMax.to(boxTxt.solid_mc, 0, {tint:Math.random()*0xffffff})
                TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt], onUpdate:tweenText, onUpdateParams:[boxTxt]})
                tl.insert(TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt]}), i*.01);
                tl.insert(TweenMax.to(boxTxt, .1, {alpha:0.5, dropShadowFilter:{color:0x000000, alpha:1, blurX:5, blurY:5, strength:0.8, distance:2}}), i*.01);
               
                addChild(boxTxt);
                }
function tweenText(boxTxt) {
               boxTxt.randomLetter_txt.text = getRandomLetter();
                } 

and got this error repeated:

RangeError: Error #1125: The index 0 is out of range 0.
                at RandomLetter_fla::MainTimeline/getRandomLetter()
                at RandomLetter_fla::MainTimeline/tweenText()
                at Function/http://adobe.com/AS3/2006/builtin::apply()
                at com.greensock::TweenMax/renderTime()
                at com.greensock.core::SimpleTimeline/renderTime()
                at com.greensock::TweenLite$/updateAll()

Attached is an image of the swf:

 

 

                             

[Carl]

have you taken the randomLetter() function out of the equation? Still errors?

 

feel free to upload a zipped fla if errors persist. Tough to guess at this stuff. Thanks.

[freedom1k]

Sorry no I didn't think of that. I was focusing on the TweenMax.to syntax to understand more how it works.

Attached is the zipped content file. 

Sorry to keep you guessing.  Thanks for the Zip tip; I only tried uploading the fla file earlier, as was denied.

RandomLetter.zip

[Carl]

Here is some code I changed (2 lines with comments) and it gets rid of the errors and has the text in each box changing repeatedly while the animation happens:

 

for(var i:uint = 0; i < numBoxes; i++){
var boxTxt:BoxTxt = new BoxTxt();
boxTxt.x = 1200/numBoxes*i
boxTxt.y = 800;
boxTxt.alpha = 0;




// var alphabetShuffled:Vector.<String> = new Vector.<String>();
//    while (alphabet.length > 0)
//    {
//        alphabetShuffled.push(getRandomLetter());
// var randomLetter2:String = getRandomLetter();
// boxTxt.randomLetter_txt.text = "" + randomLetter2;
    //}


//TweenMax.to(boxTxt.randomLetter_txt.text, 0, {value:Math.random()})




TweenMax.to(boxTxt.solid_mc, 0, {tint:Math.random()*0xffffff})
TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt]})


//add your onUpdate callback to a tween in the timeline
tl.insert(TweenMax.to(boxTxt, 1, {x:Math.random()*1200, y:Math.random()*800, rotationY:360, onComplete:deBlur, onCompleteParams:[boxTxt], onUpdate:tweenText, onUpdateParams:[boxTxt]}), i*.01);
tl.insert(TweenMax.to(boxTxt, .1, {alpha:0.5, dropShadowFilter:{color:0x000000, alpha:1, blurX:5, blurY:5, strength:0.8, distance:2}}), i*.01);


addChild(boxTxt);
}


function tweenText(boxTxt) {
//don't know what is happening in you getRandomLetter() method but this callback does what it should
  boxTxt.randomLetter_txt.text = int(Math.random()*10);
} 

Just replace the for() loop and callback in your file to see it working.

[freedom1k]

Here's the semi-original version that places a random character, only at runtime, not across each box, which is what i'm after. 

RandomLetter_original.zip

[freedom1k]

thanks. I'll give that a try.  We must have be responding at the same time.  

[freedom1k]

hmmm.. just tried it. But it reveals only Numbers now. 

(See attached image.)

 

Wouldn't your suggested tweenText function just randomly pick numbers from 0-10, not the random alphabet index from the getRandomLetter function?

boxTxt.randomLetter_txt.text = int(Math.random()*10);

Attached is the latest fla file, with full code.

I'll keep this for my lottery numbers.    could be a winning solution.

RandomLetter_showing Numbers.zip

[Carl]

Yeah I just wanted to illustrate that the mechanics of what the Tweens were doing by calling the callbacks was working fine. The text can animate as the Tweens are running.

 

Jut seems to be a problem placing what your random letter function generates into the text fields. Haven't had time to dig into that.

[freedom1k]

Thanks for the illustration and your time. No rush. I tried every variable, but i'll keep trying as I learn more about as3 and greensock.

[freedom1k]

Hi Carl,

I did some more digging via your snorkl.tv "Mega List" page.

(Oh, i'm sort of just getting uptodate, so congrats on your career move, or I should say happy belated anniversary!)

You kind of answered my question in the "Death to Conditional Statements video!

 

I just added an array to the above tweenText function:

 

function tweenText(boxTxt) {
var letter_array:Array = [ "A", "B", "C", "D", "E", "F", "G",
                             "H", "I", "J", "K", "L", "M", "N",
                             "O", "P", "Q", "R", "S", "T", "U",
                             "V", "W", "X", "Y", "Z" ];
var numLetters:int = letter_array.length;
var count:int = 0;
var ranDigit:int =(Math.random()*26);
boxTxt.randomLetter_txt.text = letter_array[ranDigit];  
} 

then randomize the index. Works like a charm!

 

Would there be any learning videos added to the GS Learning site, or are those about of a Club membership?  

 

Thanks for your help.

[Carl]

Thank you.

 

Keep your eyes peeled for new learning resources. Lots on the way.

 

-c