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.

Displaying a Vertical Fraction with HTML in Adobe Animate -HTML Canvas

If you need to write content that contains fractions to display on the Canvas element on Adobe Animate CC, you might consider HTML with CSS. The Text class of CreateJS is very limited and does not even include subscripts or superscripts. With this text class, you can display fractions using the forward-slash, but not a vertical fraction.

What I call vertical fractions is a notation where the numerator appears above the denominator with a horizontal bar such as 3 5100 instead of 3 5/100. You can also use Javascript code to make HTML-text  interactive . Below I embedded a fraction in a text div element that contains other text which I placed inside the “animation_container” div that Adobe generates as a wrapper for the Canvas element. I added  3 event handlers to the span that contains the fraction for mouseover, mouseout, and click events. Try it out. Mouse over the fraction.
Here’s another version.
In the top version, I used 2vw for the text-size of the txtDiv that contains the text with the embedded fraction. 2vw is a per cent of the viewport. It scales based on the viewport, but it does not work inside a post in WordPress. I then uploaded a new version based on a fixed viewport. If you have other solutions, please let me know. click for a different version
If you mouse over the fraction above, you will trigger the styling handler that applies an orange color to the background of the span that contains the fraction. The click handler also applies some styling. Here’s the code that I used on the actions layer of the timeline. There’s only one frame to this project.

var mainTL = this;
mainTL.stop();
var animContainer = document.getElementById("animation_container");

//-----Creating the Div for the text that will contain the fraction

var tDiv = document.createElement("div");
animContainer.appendChild(tDiv);

var txt = "The purpose of this article is to embed a vertical \
fraction in this paragraph.For example x + 8 divided by 2x - 3 \
should not appear as (x + 8)/(2x - 3) but as <span id='fraction'>\
<span id='top'>x + 8</span><span id='bottom'>2x - 3</span></span>.\
The text continues here. This is done with HTML text, using the \
span element. See below for more details."

tDiv.innerHTML = txt;

//-----Stylying the text and the fraction with CSS------

var topN = document.getElementById('top');
var bottomN = document.getElementById('bottom');
var fraction =document.getElementById('fraction');
tDiv.style.cssText = `cursor: default;
                       position: absolute;
                       top:5%;
                       left:10%;
                       font-family:'Happy Monkey';
                       width: 70%;
                       font-size: 2vw;
                       color: black;
                       text-align: left;`
   fraction.style.cssText =` //this is a span
                        text-align: center;
                        font-size: 60%;
                        font-weight:bold;
                        cursor: pointer;
                        display: inline-block;
                        vertical-align: sub;`
   topN.style.cssText =`display: block;`//this is a span
   bottomN.style.cssText = ` //this is a span
                        display: block;
                        border-top: 1.5px solid black`; //fraction                                                             bar

//-------------Adding Listeners to the fraction------------------

//------MouseOver--------
    fraction.addEventListener("mouseover", MOverHandler);
function MOverHandler(){
    fraction.style.cssText = `background-color: orange;
                              text-align: center;
                              font-size: 60%;
                              font-weight:bold;
                              cursor: pointer;
                              display: inline-block;
                              vertical-align: -25%;`
    fraction.addEventListener("mouseout", MOutHandler);
}
//--------MouseOut-------
function MOutHandler(){
         fraction.style.cssText = `
                         cursor: default;
                         background-color: none;
                         text-align: center;
                         font-size: 60%;
                         font-weight:bold;
                         cursor: pointer;
                         display: inline-block;
                         vertical-align: -25%;`
      bottomN.style.cssText = `
                         border-top: 1.5px solid black;`
}
//------Click-------
fraction.addEventListener("click", clickHandler);
function clickHandler() {
     fraction.style.cssText =`color: blue;
                         text-align: center;
                         font-size: 70%;
                         border: 1.5px solid black;
                         cursor: pointer;
                         display: inline-block;
                         vertical-align: -25%;`
      bottomN.style.cssText = `
                      border-top: 1.5px solid blue;`}

Displaying a Textarea HTML Element Over the Canvas in AnimateCC

The HTML <textarea> allows the user to enter input feedback in your HTML. I wanted to display a <textarea> over the Canvas in my Adobe Animate CC HTML5-Canvas project because <textarea> is multiline whereas <input> is not. Below is the result of my attempt.

Here is my code

I place this code in the actions panel for the frame I’m working on.

window.mainTL = this;

//using the <textarea> in JavaScript with no jQuery
/*I used JavaScript here because I don’t have to add another js-library to
the Include of the Global Panel.*/

var animContainer = document.getElementById(“animation_container”);
var tArea = document.createElement(“textarea”);
animContainer.appendChild(tArea);
tArea.setAttribute(“id”, “userTBox”);

/*Let me take a moment here to explain how I understand the code above.
AnimateCC,ACC, puts a <div> around the <canvas> with the id “animation_container”.
The first line of code accesses this div and assigns it to the variable “animContainer”.
The second line of code creates a new element the <textarea> and assigns it
to the variable “tArea”.
The third line of code attaches the new element to “animContainer”. You don’t have to
attach it to the “animContainer”, but if you choose “responsive” in the publish settings it will apply responsiveness to the textarea as well as the canvas, all the children of the “animation_container”.
This is important because if the user resizes the window or views the animation in a mobile devise the textarea will remain fix and will not jump out of the canvas. So when I wrote the cssText below I assigned percentages instead of fixed numbers to the top, left, width, and height. of the textarea.*/

tArea.style.cssText = `position: absolute;
                                        top:30%;
                                        left:30%;
                                        font-family: ‘Happy Monkey’;
                                        font-size: 26px;
                                        height: 40%;
                                        width: 50%;
                                        color: red;
                                       text-align: left`;
//tArea.value = “Enter your text here. Then click submit.”;
tArea.focus();

mainTL.submitButton.addEventListener(“click”, clkHandler);

function clkHandler(e){
    let userTxt = tArea.value;
//recently the new release of ES6 allows for the use of “let” keyword to declare a variable.
    tArea.value = `Mi amor, your text is:
    ${userTxt}.`
//Here I’m using a template string(see comment below)

/*
Note: the cssText, above, is a string where the declarations are expressed in css syntax using the “-” to remove white space between words like font-family instead of fontFamily(Camel Case) used in javascript.

I’m also using ‘template literals’, this is a new syntax adopted in ES6 recently that you can use in place of the “string”. You wrap your string in tic marks(“) (the font I’m using here does not display the tic marks. It displays a single quote in its place. The tic mark key is right next to the 1 key.)instead of quotes(“”,”) and format it the way you like it and it will be displayed that way wyswyg.

One more thing, it is better to use a submit button and use the click event to access the user text than the keyup event for the return key because when the user hits the return key the user automatically generates a new line since the textarea is multiline. You can make your own submit button on the main timeline of the canvas instead of using the html button element <button>. I used a button symbol that belongs to the canvas, not a DOM html element.

References:

In W3 Schools.com search for ‘The HTML DOM Element Object’ or go to ‘https://www.w3schools.com/jsref/dom_obj_all.asp’ to
see a very useful list of methods, properties and events you can use to manipulate the elements that you insert into the web page where your <canvas> resides. As I understand it, the html page that Animate CC generates contains a <div> that contains the <canvas> element. You can see it if you open the yourProject.html in a code editor. (Make sure that you run the project at least once so that the file gets generated). You may see something like this:

<body onload="init();" style="margin:0px;">
  <div id="animation_container" style="background-color:rgba(153, 153, 153, 1.00); width:1200px; height:800px">
     <canvas id="canvas" width="1200" height="800" style="position: absolute; display: block; background-color:rgba(153, 153, 153, 1.00);">
      </canvas>
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1200px; height:800px; position: absolute; left: 0px; top: 0px; display: block;">
     </div>
  </div>
</body>

You can create new html elements with the method
document.createElement(“element like p or div”); that then you can append to any of the existing elements using the existingElemnt.appendChild(elementYouCreated) method.

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.