Category Archives: Abobe Animate CC

Displaying a Textarea HTML Element Over the Canvas in AnimateCC

The HTML <textarea> allows the user to enter input feedback in your HTML. I wanted to display a <textarea> over the Canvas in my Adobe Animate CC HTML5-Canvas project because <textarea> is multiline whereas <input> is not. Below is the result of my attempt.

Here is my code

I place this code in the actions panel for the frame I’m working on.

window.mainTL = this;

//using the <textarea> in JavaScript with no jQuery
/*I used JavaScript here because I don’t have to add another js-library to
the Include of the Global Panel.*/

var animContainer = document.getElementById(“animation_container”);
var tArea = document.createElement(“textarea”);
animContainer.appendChild(tArea);
tArea.setAttribute(“id”, “userTBox”);

/*Let me take a moment here to explain how I understand the code above.
AnimateCC,ACC, puts a <div> around the <canvas> with the id “animation_container”.
The first line of code accesses this div and assigns it to the variable “animContainer”.
The second line of code creates a new element the <textarea> and assigns it
to the variable “tArea”.
The third line of code attaches the new element to “animContainer”. You don’t have to
attach it to the “animContainer”, but if you choose “responsive” in the publish settings it will apply responsiveness to the textarea as well as the canvas, all the children of the “animation_container”.
This is important because if the user resizes the window or views the animation in a mobile devise the textarea will remain fix and will not jump out of the canvas. So when I wrote the cssText below I assigned percentages instead of fixed numbers to the top, left, width, and height. of the textarea.*/

tArea.style.cssText = `position: absolute;
                                        top:30%;
                                        left:30%;
                                        font-family: ‘Happy Monkey’;
                                        font-size: 26px;
                                        height: 40%;
                                        width: 50%;
                                        color: red;
                                       text-align: left`;
//tArea.value = “Enter your text here. Then click submit.”;
tArea.focus();

mainTL.submitButton.addEventListener(“click”, clkHandler);

function clkHandler(e){
    let userTxt = tArea.value;
//recently the new release of ES6 allows for the use of “let” keyword to declare a variable.
    tArea.value = `Mi amor, your text is:
    ${userTxt}.`
//Here I’m using a template string(see comment below)

/*
Note: the cssText, above, is a string where the declarations are expressed in css syntax using the “-” to remove white space between words like font-family instead of fontFamily(Camel Case) used in javascript.

I’m also using ‘template literals’, this is a new syntax adopted in ES6 recently that you can use in place of the “string”. You wrap your string in tic marks(“) (the font I’m using here does not display the tic marks. It displays a single quote in its place. The tic mark key is right next to the 1 key.)instead of quotes(“”,”) and format it the way you like it and it will be displayed that way wyswyg.

One more thing, it is better to use a submit button and use the click event to access the user text than the keyup event for the return key because when the user hits the return key the user automatically generates a new line since the textarea is multiline. You can make your own submit button on the main timeline of the canvas instead of using the html button element <button>. I used a button symbol that belongs to the canvas, not a DOM html element.

References:

In W3 Schools.com search for ‘The HTML DOM Element Object’ or go to ‘https://www.w3schools.com/jsref/dom_obj_all.asp’ to
see a very useful list of methods, properties and events you can use to manipulate the elements that you insert into the web page where your <canvas> resides. As I understand it, the html page that Animate CC generates contains a <div> that contains the <canvas> element. You can see it if you open the yourProject.html in a code editor. (Make sure that you run the project at least once so that the file gets generated). You may see something like this:

<body onload="init();" style="margin:0px;">
  <div id="animation_container" style="background-color:rgba(153, 153, 153, 1.00); width:1200px; height:800px">
     <canvas id="canvas" width="1200" height="800" style="position: absolute; display: block; background-color:rgba(153, 153, 153, 1.00);">
      </canvas>
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1200px; height:800px; position: absolute; left: 0px; top: 0px; display: block;">
     </div>
  </div>
</body>

You can create new html elements with the method
document.createElement(“element like p or div”); that then you can append to any of the existing elements using the existingElemnt.appendChild(elementYouCreated) method.

Adobe Animate CC Placing an html input element over the canvas

I placed an html input text element with the tag <input> that collects data entered by the user when the user hits the ‘return’ or the ‘enter’ key. I placed it in the animation div that contains the canvas from Adobe Animate CC. I edited the html file that Adobe Animate generates to add a link for the jQuery library, but to do so, I had to disable the overwirte option in the advanced tab of the publish settings. You can insert html elements into the html file using just javascript, but it’s a lot easier with jQuery.

Here is the code I used in the action’s panel actions layer of frame1

this.stop();

$("#canvas").after("<form id='userinput_form' onsubmit='return false'><input id='txtInput' type='text'></form>");
var txtInput = $("#txtInput");
txtInput.css({
 "position":"absolute",
 "top":"180px",
 "left":"200px",
 "text-align": "center",
 "color": "red",
 "fontFamily": "Happy Monkey",
 "fontSize": "40px",
 "height": "60px",
 "width": "100px",
 "font-weight": "bold"
});
txtInput.focus();

var mainTL = this;

txtInput.keyup(function(e){
 if ( e.which == 13 ){
 var userAns = txtInput.val();
 mainTL.respondTxt.text = "Your Answer is: " + userAns;
 //alert("Your Answer: " + userAns + " is correct!");
 }
})

Update 06/02/18:

Since 2017 Adobe has  included a feature in the actions panel that actually lets you include external libraries like jQuery. I wasn’t sure how to use it until I watch a video by Joseph Labreque explaining how to use it. Here’s what you have to do. Here are instructions for the CDN

  1. Go to google    https://developers.google.com/speed/libraries/#jquery
  2. Copy the src of the library you need without the <scrip> tags just: https://developers.google.com/speed/libraries/#jquery
  3. Open your fla file and open the actions panel
  4. On the left click on Global>include and + on the top right
  5. select url and paste the src from Google.

That’s it – you’re ready to add jQuery code