JavaScript equivalent of "onEnterFrame"

[The Artworker]

I am repurposing an old Flash AS2 project which now needs to run as an HMTL5 one.

My main function entirely revolves around the AS2 "onEnterFrame" command. There doesn't seem to be an equivalent in JavaScript. How do I trigger a function in the same way?

[JoãoCésar]

Hi.

Use:

function tickHandler(e)
{
    // your loop code here
}
createjs.Ticker.on("tick", tickHandler);

Regards,

JC

[The Artworker]

Thanks.

However it's not working for me with even a very simple function inside the "tickHandler".

Am I supposed to be changing any of the code other than dropping my loop code where it says?

[JoãoCésar]

Are you trying to use raw AS2 code?

Can you show us your code?

[The Artworker]

I don't think so.

I'm trying to convert my AS2 bit by bit so I can see what works and what doesn't.

At the moment I am falling at the very first hurdle.

I have this very simple function which is supposed to look at the contents of an Text Input Component (called pets_txt) and if it is blank, insert a "0". And if there is something in the field it passes it to a variable called "pets".

if (this.pets_txt.text == "") {

  pets = 0;

  } else {

  pets = this.pets_txt.text;

}

The biggest problem I have is that firstly my AS2 is very rusty - haven't used it for about 5 years, and I simply don't understand most of the JavaScript I'm being offered. I was told that if I understood AS2 I would find JavaScript easy, but I simply not finding that to be the case.

In your example above why is there an "e" in brackets in line 01?

And what does this statement ("tick", tickHandler) in line 06 actually mean/do?

[JoãoCésar · Accepted solution]

Thanks.

One first thing to understand is that in HTML5 documents, Animate CC outputs compliant content for web standards. So ANCC is limited to what browsers can run and to the way things must work in the web.

The code you write in Animate CC you'll end up in a regular JavaScript file that will be loaded in a regular HTML file.

This means that you can access all DOM related stuff or use any library of your choice.

JavaScript and ActionScript are indeed similar. What can cause confusion is that Animate CC is integrated with a suit of libraries called CreateJS. It means that you have to understand not only the ANCC way of creating and handling graphics, sounds and animations, but you also have to understand the way ANCC targets these things using CreateJS.

Take for example ReactJS: it's a JavaScript library but it takes much more to use it than knowing only vanilla JavaScript.

About the code, what you have to know is that components in AnimateCC are not canvas objects. They are DOM objects attached to a div element called "dom_overlay_container" and by default they are targeted using jQuery.

So my suggestion is:

var pets;
function tickHandler(e)
{
     var textValue = $("#inputText").val();
     if (textValue == "")
          pets = 0;
     else
          pets = textValue;
}
createjs.Ticker.on("tick", tickHandler);

Don't forget to use the Code Snippets panel to learn how to communicate with components.

And to better understand event handlers and listeners, take a look at these two references:

JavaScript DOM EventListener

https://createjs.com/docs/easeljs/classes/Event.html

I hope this helps.

Regards,

JC

[The Artworker]

I'm sorry. You must think I am stupid beyond belief, but I can't make this work and I can't understand why.

I assume that I have to replace "#inputText" with the instance name of my Text Field? (which is "#pets_txt")

I've done that and the Text Field remains blank when I run the file.

I know that my instance name is right because I've been able to style the input field using an external CSS file.

Any ideas?

I realise that I am trying to run before I can even crawl let alone walk, but this was all so easy in AS2 and just seems to me completely impenetrable in JavaScript.

[JoãoCésar]

No worries.

Yeah, inputText is the instance name. I forgot to point that out. Sorry.

Would you mind providing your FLA?

[ClayUUID]

https://forums.adobe.com/people/The+Artworker  wrote

In your example above why is there an "e" in brackets in line 01?

And what does this statement ("tick", tickHandler) in line 06 actually mean/do?

Those are exactly the same type of arguments that the AS2 event listener declarations take (event name and event handler function), and the "e" is the same event object that AS event handler functions receive.

[The Artworker]

I'm sorry ClayUUID but I simply do not understand a word of what you have written.

What is an argument in JavaScript (or ActionScript) and how exactly does it work. To me those are just two random words that do not appear to connect with the rest of the function.

And why do I need to write (e) instead of just ()?

[ClayUUID]

Additional discussion on doing this sort of thing here:

Re: Accessing movieClip.children array Animate CC Canvas

[marliton]

You can use the ticker event: https://www.createjs.com/tutorials/Animation%20and%20Ticker/