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 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 you 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

5 thoughts on “Adobe Animate CC Placing an html input element over the canvas

    1. luci Post author

      Thank You.
      So there’s a way to add CSS after all!
      Even as a component that you can modify I believe it’s still an html element not contained in the canvas. It is nice to be able to move your component on the stage and not have to assign a position.
      I still like “my way” because it gives me far more control not just in positioning but also modifying on code the height and width
      Cheers
      Luci

      Reply
  1. Ole

    Thank you so much!
    I have been searching the internet for hours!

    Any experience with the Text Input component in Animate CC?
    I read you should be able to use it and style it with css, but I have only little experience with that.
    If you could update this post I would very much appreciate it. 🙂

    Thank you again.

    Reply
    1. luci Post author

      You’re very welcome. Thank you for visiting my site. I tried the components once or twice, but I gave up. I don’t know how to use them. That’s why I consider using html elements that can appear over the canvas that Animate generates. If you study the source and html elements from Chrome’s tools (developer tools) you can see the html structure with the ids of different elements.
      You can also use the text area like the example in w3schools.com for multiline input:

      I’m learning how to use Createjs directly inside of Animate CC. As I learn things I will be sharing more.
      Thank you for your interest.
      Luci

      Reply
  2. Rod Krause

    Hi Luci,

    This is fantastic! Just what i needed. I will be working on this tonight. I really appreciate the effort you went to in getting this online.

    Reply

Leave a Reply