Skip to main content
This topic has been closed for replies.
Correct answer kglad

use the ticker's framerate or interval. eg,

createjs.Ticker.framerate=10;

(but i suspect that will affect your entire projects framerate).  if that's not a problem, use it or, at least, try it.

if it's a problem, use setItnerval:

var s = 'this is your text';

var F = f.bind(this);

var fI;

clearInterval(fI);

fI=setInterval(F,400);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

clearInterval(fI);

}

}

2 replies

Brainiac
June 17, 2019

A little something I whipped up:

// Method added to CreateJS Text object to add text one character at a time

// Arguments:

//  text: text to add

//  cps: characters per second (optional; default 12)

//  clear: clear current contents of textfield (optional; default false)

//  callback: function to call when done (optional)

cjs.Text.prototype.type = function(text, cps, clear, callback) {

    if (clear) {

        this.text = "";

    }

    if (this.typeData) {

        clearInterval(this.typeData.timer);

    }

    this.typeData = {text: text, callback: callback, chars: 0};

    this.typeData.timer = setInterval(function() {

        var td = this.typeData;

        this.text += td.text.charAt(td.chars);

        if (td.chars++ === td.text.length - 1) {

            clearInterval(td.timer);

            if (td.callback) {

                td.callback.call(this);

            }

        }

    }.bind(this), 1000 / (cps ? cps : 12));

}

Just stick the above code anywhere in your setup/initialization frame, then use as, for example:

this.test.type("This is a test.");

Or:

this.test.type("This is another test.", 24, false, doSomethingWhenDone);

Note that if you specify a character rate higher than the stage's frame rate, you'll see multiple consecutive characters appear at once.

JoãoCésar17023019
Inspiring
June 17, 2019

Excellent.

I'll save this one.

And maybe a good addition would be to get the current text field's text if the user doesn't provide any. So it would only be a matter of calling this.textField.type();

Regards,

JC

Brainiac
June 17, 2019

It could also use some input validation. Currently if you pass it a null string it will go into an infinite loop.

kglad
Adobe Expert
June 17, 2019

use a loop (eg, setInterval or tick) to sequentially add letters.  eg,

var s = 'this is your text';

var F = f.bind(this);

this.addEventListener("tick", F);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

this.removeEventListener('tick',F);

}

}

Inspiring
June 17, 2019

works... great. Is they a way to set the interval time?

kglad
Adobe Expert
August 19, 2023

Is it possible to do this in ActionScript 3.0?


yes, as3 for this is about the same.