Cool text effect

Hi. I found a very cool animation, and now of course i want to know how to do it

Effect is at : http://futurebag.eu/

Click on KOLEKCJA , and there, everytime you click next arrow, you will see that sweet text changing effect.

I have been fighting with that for a long time, and i have came to point, where i can remake that effect, but there is one but.

This animation is quite heavy when it comes to longer texts. Probably becouse of Math.random().

Let me show you some code:

var random:String = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKHJGFDSAZXCVBNM1234567890";
// Random letters 
var letter:int = 0;                            // Letter to show
var sentence:String = textF.text;      // My textField i animate with some long text
var sentenceLength:int = sentence.length;      // Simply length of sentence in my textField

trace(sentence);
trace(sentenceLength);
addEventListener(Event.ENTER_FRAME, matrix);

function matrix(e:Event):void{
     letter++;
     textF.text = "";
     for(var i:int = 0; i != letter; i++){
          textF.appendText(sentence.charAt(i));
     }
     for(var j:int = letter; j != sentenceLength; j++){
          textF.appendText(random.charAt(Math.random() * 62));
     }
     if(letter == sentenceLength){
         trace("Animation is finished");
          removeEventListener(Event.ENTER_FRAME,matrix);
     }
}

Now it looks cool and all when i set it to 60 fps, but when i want some longer text, OR many textfields(then i put them in an array, together with another for loop), then it comes choppy.

So my question is: How to optimalize, or makethis anymation the way it will be fast and ligth.

I’ll appreaciate any help.

PS: Is there any way to get random number WITHOUT using heavy Math.random() function?

What you have here is really basic concept and should be used for short time if you use later by later on open enter frame as it’s not a good practice using this way on multiple text and we have enough choppy stuff from javascript so don’t make it as habit with flash also . Ill recommend you to take other approach and use fallow text type in words or in full lines it’s a bit more work in code but will like much better. If you are not a coder I can recommend you flupie class under mit as it can handle also TextFormat and its fast and light .

http://flupie.net/textanim/maker/ . (the say only Brazilians can make great class like flupie ) . http://flupie.net/blog/ .

I also clean your code a little and kill the for loop . .

package
{
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.events.Event;

    public class Hello extends MovieClip
    {

        private var newText:TextField = new TextField();
        private var textFormat:TextFormat = new TextFormat();
        private var txt:String;

        public function Hello()
        {
            textFormat.font = "Arial";
            textFormat.color = 0xFFFFFF;
            textFormat.size = 20;
            newText.autoSize = TextFieldAutoSize.LEFT;
            newText.defaultTextFormat = textFormat;
            newText.htmlText = '';
            newText.width = 350;

            newText.multiline = true;
            newText.wordWrap = true;
            txt = 'Tsafi1 can see its absolutely nothing like the request you have asked.\n Tsafi2 .';
            addChild(newText);
            addEventListener(Event.ENTER_FRAME,function(event:Event):void
            {
                if(Math.random() > 0)
                {
                    newText.appendText( txt.charAt(0) );
                    txt = txt.substring(1,txt.length);
                    if( txt.length == 0 )
                    {
                        removeEventListener(Event.ENTER_FRAME,arguments.callee);
                    }
                }
            });
        }
    }
}

Thank’s alot for reply Tsafi!

Thats a smart concept of writing things out of no where. It’s cool and i like it! But, effect i like to achieve, is more like random letters, turning into right letters, making sentence. If You could only look at the link i posted, You will know what i mean.

let’s say we have sentence “I prefer actionscripting, then htmling.”

1. IGFOCLSEQP1PC0A1DVD0A4ALVO

2. I prefer aGFUSIALSOCPZ3D03LYD

3. I prefer actionscripting, theFODPA04KSDDOLC

4. I prefer actionscripting, then htmling.

Do you get now what i mean?

Here is example what i have:

www.flashcontents.cba.pl/matrix

So i have there 7 text fields, and every text has randomed letters.

I cant get it look anything like there: www.futurebag.eu

Here’s code i got:

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var fields = [onas1,onas2,onas3,onas3,onas4,onas5,onas6,onas7,onas8];
var w:int = 0;
var yes:int = 100;
var r:String = "HVUZLT3PA931KD0HL2XMC8BNYF7AJF2DW38GAGDL40LB0CNZ7SLG8DA8GFK4DL0SOAL2DJFS8CIFRK4OSP3LAZV8DKZSLHVUZLT3PA931KD0HL2XMC8BNYF7AJF2DW38GAGDL40LB0CNZ7SLG8DA8GFK4DL0SOAL2DJFS8CIFRK4OSP3LAZV8DKZSLHVUZLT3PA931KD0HL2XMC8BNYF7AJF2DW38GAGDL40LB0CNZ7SLG8DA8GFK4DL0SOAL2DJFS8CIFRK4OSP3LAZV8DKZSL";

addEventListener(Event.ENTER_FRAME, matrix);

function matrix(e:Event):void{
    for(var i:int = 0; i != fields.length; i++){                                   
        fields[i].t.text = fields[i].s.substring(0,w);                
        fields[i].t.appendText(r.substring(w,fields[i].l));
        if(w >= fields[i].l){                
            yes = i;
        }
    }
        if(yes != 100){
            fields.splice(yes,1);                
            yes = 100;                    
            if(fields.length == 0){
                removeEventListener(Event.ENTER_FRAME, matrix);
                trace("matrix done");
            }
        }
    w++;
}

Please help, i run out of ideas…

Nop i don’t get it (yes i know i am dumb ).

From what i see on your web(what’s up with the dog man ?) the random text take the full block space and random it and that’s not right as you want to run it in the right order from left to right ,is that what you are saying ?

it doesn’t matter what input you use on the random string as its way to fast to notice, also right now the random take your full text and random it multiple times on the full text length that will make it slow on the full text as it read it as a block (width/ height and the input text) and not as a running fallow scramble text which is more hard as you need to define it , so that code you have is not a good practice as long all your text is been scramble from start you will never be able to optimize it on a long text as it just a heavy animating .

Look at the example 2, thats relay what you want on the random .

http://flupie.net/blog/ .

or.

http://3.s3.envato.com/files/1422680/index.html

Hey thanks! Flupie Text Anim is amazing!

I got it working with two of my text fields, and it looks good, but it gets little choppy.

In my project i wish to use that animation to 7 – 10 text fields at once, do You know any other way to do that?

Maybe, putting text fields into movieClips, and adding several frames, with random text…? But this would probably cost alot kb’s.

Do You have any more suggestions Tsafi? or anyone?

MaximusCript said

I got it working with two of my text fields, and it looks good, but it gets little choppy.

Do You have any more suggestions Tsafi? or anyone?

Choppy?.....

Show me the loco flash developer that will animate 7 – 10 long text fields at once? point me to that example or person so i can trash them about their flash judgment.

Animate 8-9 heavy objects (text/font is one of the heavy segment of use in any platform not to mention when embed them) at once with open enter frame no matter what platform you use will cause you a problem.

One of the advantages we have as flash coders we know how to control our environment and not over load our frame work with no more then 2-3 enter-frame at the same time before we kill it and start new task, flash is not a plug-in method like js where we can ignore other script and lean on the mercy of the browser ……. Think flash= harmony .

My best advice is to stay practical .

I’m not going to give up on this idea anyways

I just found that making this animation on timeline, typing all that random stuff in text fields, gives pretty nice effect, and dont take any CPU , that i will need for other things.

BUT . Of course, there is but… It took me about 30 minutes to make half of one text field with 351 characters in it. And i cant waste that much time on that.

Is there any way to speed it up? Anything?

Thank’s alot for help Tsafi, you already saved me so much time.