Category Archives: Uncategorized

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

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.

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

[edge_animation id=”2″]

 

 

 

 

 

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.

[edge_animation id=”4″]

Brushy Creek Park in Feb 2013

It hasn’t rained much this year in Central Texas. We’re in the mist of a sever drought, but even so the park is still beautiful. This is where me and Mr Patitas go to frequently for walks.

[easyrotator]erc_44_1360954038[/easyrotator]

This is a new rotator. Please Ignore

[easyrotator]erc_95_1366829331[/easyrotator]