Author Archives: luci

About luci

Lucila Olga Rios is a retired Math teacher and the author of the math tutorials you see here in this site.

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

My experience with Snap.Svg

I’m trying to learn something called Snap.Svg.js. It is a JavaScript library that can be downloaded  free from http://snapsvg.io/. From what I have investigated Snap.Svg is analogous to JQuery. Where jQuery serves for manipulating HTML elements,  Snap.Svg serves for manipulating  svg elements. SVG images(Scalable Vector Graphics) can be created in a number of vector graphic applications like Illustrator.

Division Facts Practice

Creating An Edge Animate Slideshow

I’m displaying this slideshow to test the plugin “Edge Suite”. It was not working well for a while, but now it seems to be working fine. You may want to check out another slideshow on this post

 

 

 

 

 

Here is a Youtube video explaining in detail how to create this slideshow.

Part 1 – Creating the slideshow

 

Part 2 – Adding navigation buttons

New Slideshow

This is a new Edge Animate Slideshow with some clickable buttons (thumbnails) on the left side which sends the viewer to specific slides and stops the animation. Note that this is a responsive composition which resizes with the screen. This is a new feature in Edge Animate.