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
- Go to google https://developers.google.com/speed/libraries/#jquery
- Copy the src of the library you need without the <scrip> tags just: https://developers.google.com/speed/libraries/#jquery
- Open your fla file and open the actions panel
- On the left click on Global>include and + on the top right
- select url and paste the src from Google.
That’s it – you’re ready to add jQuery code.
UPDATE: In the Global tab you can also add your own external JavaScript files that are stored in your computer.
I suggest you have a look at this:
https://www.youtube.com/watch?v=CxTo1RUdJYM&index=3&list=LLcU1_YafhRmjWcVhF40OsJQ
That worked better for me, as it does not have a fixed position on the canvas. 🙂
Cheers
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
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.
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
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.