I was in this old thread: https://community.adobe.com/t5/animate-discussions/html5-textarea-multi-line-text-in-animate-cc/td-p/9165270 and could not really find what I was looking for.
I wanted to add a multiline text entry field into an Adobe Animate canvas doc.
Animate has a TextInput component but it is limited to a single line.
Eventually I found this: https://www.mathparami.com/including-a-element-so-that-it-displays-over-the-canvas-in-animatecc/ and I just wanted to share my own version.
I like to make various objects (movieclips) that I can just copy and paste from one file to another and the movieclip just works (after naming the instance). I put all the code I need inside the movieclip. The movieclip is otherwise empty. So now I have a movieclip in the library called Textarea_Component.
When I use it, I just drag it from the library and hopefully it works.
Here is the code inside the otherwise empty movieclip:
//***** Building a Multiline Textarea Input *****
var tArea = this;
//'this' is an instance of the library symbol 'Text_Area_Holder'. The symbol has nothing but this code in it.
//Wherever this instance is put, you can access its value simply by putting the path to the instance in your main code with .myValue after it.
//EG: root.slide_1.textArea_1.myValue. myValue is updated on any input.
var animationContainer = document.getElementById("animation_container");
//Set required local variables
var setTimeoutTA_1 = null;//Need a timeout variable as there is a delay with accessing HTML components
var stageW = 1280;
var stageH = 720;
var desiredX = 100;//Default x-position of your textarea
var desiredY = 100;//Default y-position of your textarea
var topPercentage = 100*desiredY/stageH;//These give you the percentage position placement value that will match your desired stage position
var leftPercentage = 100*desiredX/stageW;
var desiredW = 300;//Default width of your text area
var desiredH = 200;//Default height of your text area
var wPercentage = 100*desiredW/stageW;//These give you the percentage dimensions number that will match your desired stage size for the textarea
var hPercentage = 100*desiredH/stageH;
var textArea = null;
var myName = tArea.name;//The name of the 'Text_Area_Holder' instance
tArea.myValue = null;
tArea.buildTextArea = function(_x, _y, _w, _h, _value = null){
desiredX = _x;
desiredY = _y;
topPercentage = 100*desiredY/stageH;
leftPercentage = 100*desiredX/stageW;
desiredW = _w;
desiredH = _h;
wPercentage = 100*desiredW/stageW;
hPercentage = 100*desiredH/stageH;
textArea = document.createElement("textarea");
animationContainer.appendChild(textArea);
textArea.setAttribute("id", myName);
textArea.value = _value;
textArea.addEventListener("input", onInput);
}
tArea.styleTextArea = function(_fFamily="Verdana",_fSize="16px",_fColor="#333333",_textAlign="left",_bkdColor="#F8F8F8",_border="2px solid #AAAAAA",_borderRadius = 0,_boxShadow,_textShadow){
Object.assign(textArea.style, {
position: "absolute",
boxSizing: "border-box",
top: topPercentage+"%",
left: leftPercentage+"%",
width: wPercentage + "%",
height: hPercentage + "%",
outline: "none",
padding: "20px",// or "top right bottom left"
resize: "none",//Removes ability for user to resize
scrollPadding: "20px",
fontFamily: _fFamily,
fontSize: _fSize,
color: _fColor,
textAlign: _textAlign,//Use left right center or justify
backgroundColor: _bkdColor,
border: _border,//"4px solid #00FF00", or like "none"
borderRadius: _borderRadius,
boxShadow: _boxShadow, //"8px 8px 6px #78849B",// horizontal, vertical, blur, color shadow
textShadow: _textShadow//1px 1px 1px #333333,// horizontal, vertical, blur, color shadow
});
//.1 .2 .3 .4 .5 .6 .7 .8 .9 1.0
if(_boxShadow){ textArea.style.boxShadow = "4px 4px 3px #3333334B"; }//19, 32, 4B, 64, 7D, 96, AF, C8, E3, FF = alpha 0-1 by 0.1
if(_textShadow){ textArea.style.textShadow = "1px 1px 1px #33333396"; }
}
function onInput(){
tArea.myValue = document.getElementById(myName).value;
}
Once you drag an instance of this to the stage, you can call the functions like this:
[The instance was placed inside root.slide_1]
//buildTextArea (_x,_y,_w,_h,_value);
root.slide_1.textArea_1.buildTextArea(40,100,600,580);
//styleTextArea (_fontFamily, _fontSize, _color, _textAlign, _bkdColor, _border, _borderRadius,_boxShadow,_textShadow)
root.slide_1.textArea_1.styleTextArea("Verdana", "18px", "#0066FF", "left", "#E8E8E8", "2px solid #0066FF", "8px", true, false)
You can access the textarea's value by:
root.slide_1.textArea_1.myValue
AdChoices