Dynamic Text Field in Animate CC Version 18 Build 107 aon Mac

[PAOuellet]

Hello All,

I am building a project where i would like to use a lot of Dynamic Text fields for students to enter some answer.

It is a Canvas Project (for HTML5 on the Web).

Since the latest update the Dynamic Text Fields do not behave the same.

In my latest project they behave like Static Text, if I do a Test Movie and try to select one of the fields nothing happens.... I can not enter any answers.

Help please, any ideas ?

Thanks

Pierre-Andre

[marjantrajkovski]

Window > Components > User Interface > TextInput

[marjantrajkovski]

... or you can try https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

[PAOuellet]

Thanks for the info.

But the "Components - User Interface - Text Input" is not so good because the Text within the Field is So So So Small that the user would need a Microscope the read what he or she is writing.

And thanks for the Gold Fire tip but I want to be able to do everything within Animate CC.

Thanks

[UDESCO]

Hi, can you please share a screenshot of how the Text Input component appear at your end?

[sovie4711]

Hello,

the new Text Input Component works really very bad :-((

you can not style it in any way and it is not responsive and really too small!

The external Canvas Input Src Code is much more work to do - why is this feature not implemented in Animate ??

In this way it is completely useless but nevertheless another question:

How can it make the Component Textfield work as global VARIABLE?
I can name it as a MovieClip (not Textfield anymore) but how to retrieve the input data from timeline script working as a global variable??

Help, please. Anyone?

[ClayUUID · Accepted solution]

IF (and ONLY IF) you aren't planning on scaling the stage, you can use native HTML input elements by putting them in a DIV element floated over Animate's canvas element. Responsibility for positioning, styling, and retrieving the data from the element is then entirely yours. But there are thousands of tutorials online for doing this sort of thing, so it's very well-documented territory.

Here's a set of helper functions I use to create and remove these elements.

// Create a DIV layer above the canvas

// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

// CSS styling is a CSS-formatted literal string

mkDiv = function(id, x, y, w, h, html, css) {

    var d = document.createElement("div");

    d.id = id;

    d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

So for example, to create an input text element, you could do:

mkDiv("myInputDiv", 10, 10, 500, 100, "<input id='myInput' type='text'>", "font-size:32px; background:fuchsia");

Now, if you DO need your canvas to scale..... well, it's not impossible, but it's much, much more complicated to scale HTML elements along with the stage. It's also possible to create a text input-like widget natively within Animate, but again, it would be rather complicated.

[sovie4711]

Thank you.

But ADOBE please - fix that. It would be very helpful to be able do this in the Animate CC API.

[PAOuellet]

Hello,

Sorry for the delay...

Here's 2 screen shot, one in Animate and one in Firefox