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

Community Beginner ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

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!

 

williamfulwood_1-1607627447422.png

williamfulwood_2-1607627461644.png

williamfulwood_0-1607627410904.png

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!

 

Views

103

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Dec 10, 2020 Dec 10, 2020
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(...

Likes

Translate

Translate
Adobe Community Professional ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

LATEST

>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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines