Create text field to reference later using loop (HTML5 Canvas)

[williamfulwood]

Hi,

I'm trying to create this text animation below, where the text fades in one by one from the centre, they're dynamic fields so I can't just build the animation on the timeline. I'm doing this by taking the string and splitting it into the individual letters then trying to create and position each letter as it's own text object so I can control the alpha of each letter. I'm open to any other good ideas on how to achieve this effect though!

The problem I have so far is creating all the text fields using a loop. I've got an array of objects where each object is a letter and it's properties (letter, alpha, position). The following code is inside a loop over said array of objects. I need to reference them after they're created so I can do the measuring of widths and positioning so I am trying to do this currently but I get an error that the eval isn't recognised:

movieClip.eval(letters[i].textName) = new cjs.Text();
movieClip.eval(letters[i].textName).text = letters[i].text;
movieClip.eval(letters[i].textName).textAlign = left;
movieClip.eval(letters[i].textName).font = fontType;
movieClip.eval(letters[i].textName).color = fontColor;
movieClip.eval(letters[i].textName).alpha = alphaValue;

Any thoughts on how to dynamically create dynamic text fields would be really appreciated!

[ClayUUID · Accepted solution]

I'm slightly horrified that anyone is still trying to use eval() for anything in this century. There's been no justifiable excuse for using eval() for at least 20 years now.

Well anyway, instantiating and displaying a sequence of letters is pretty easy.

var i, clip;
var letters = "ABRACADABRA";
var letterClips = [];
var textContainer = this;

// create letters
for (i = 0; i < letters.length; i++) {
	clip = new createjs.Text(letters.charAt(i), "40px Times New Roman", "#F00");
	letterClips.push(clip);
}

// display letters
var x = 10;
var y = 20;
for (i = 0; i < letterClips.length; i++) {
	clip = letterClips[i];
	clip.x = x;
	clip.y = y;
	x += 40;
	textContainer.addChild(clip);
}

I've no idea why you're trying to set the alpha value in your instantiation code if you're trying to animate the alpha, unless you're planning on recreating all the letters from scratch every frame, which would be dreadfully inefficient.

[williamfulwood]

Hi Clay,

Thanks for your reply. The above doesn't quite solve my issue as I've got to animate the letters in without them moving, this would be fine if they were left-aligned (or monospaced) but as they're centre aligned I need to be able to place all the letters on the canvas so I can measure them and align them correctly and then individually control the alpha of each letter. I realise that re-drawing them each frame won't be hugely efficient but I'm not too worried about that as this is for an internal application where we control the hardware it runs on, I'll be using image sequences for other parts of the graphic which are way less efficient than anything I've managed to do with JS.

I can't really see any other way to do it other than this. As for eval I read several warnings but again couldn't see anyway to create each text object with a different name other than that. I think my only other option is to create enough text objects on the canvas and then position the ones I need and set the visibility of the unused ones to off. That seems very messy though.

[williamfulwood]

Just looked through again, didn't realise you could store and recall text objects that way, I thought you had to give them a unique identifier. I'll have a go at that tomorrow.

[ClayUUID]

>As for eval I read several warnings but again couldn't see anyway to create each text object with a different name other than that. 

Bracket notation.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

[williamfulwood]

Thanks Clay, the above is close enough that I can adapt to what I need!