Category Archives: Uncategorized

Adding Like Terms Tutorial

In Algebra we often work with expressions the way we work with numbers in primary school. Expressions usually display variables in the form of letters like ‘x’ and ‘y’.

This tutorial will show you how to add and multiply simple expressions called ‘terms’.

Read the text and instructions then click the ‘Practice’ button. You may click the ‘Practice’ button as many times as you wish. Use the navigation arrows to move to the next page.

Continue reading

Adobe Animate CC Placing an html input element over the canvas

UPDATE(2021)

I posted a new tutorial where I make use of the one-line input element. I reuse the same input element in several frames. I’m not sure, but I might have made that difficult to navigate from frame to frame so the back arrow can only go to frame 0. However, the next arrow works well. 

http://www.yoquieromath.org/pages/AddingLikeTerms/AddingLikeTermsTutorialFinal.html

Click the ‘Practice’ button to see the input element.

 

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.

UPDATE: In the Global tab you can also add your own external JavaScript files that are stored in your computer.

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]