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

Question

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 Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded