converting regular js to animate js

[lassep34521165]

Hi

So i've set myself up to make a simple motion blur for a project, because i could not find a solution like Ajar plugin for Actionscript.

My basic was basicly to have a Movie-clip and within that 3 layers:

1st: Alpha:100% and no delay

2nd: Alpha: 50% and 0,1sec delay and lastly

3rd: Alpha:20% and 0,3sk delay

This way when the object was moving it would get a simple motion blur...

I found som js. that would do the trick, but seeing that Animate doesn't play with regular javascript i find myself lost again

the Javascript is here:

setTimeout(function(){

}, 100);

____________________________________________

Or this version:

var delay = 100;

setTimeout(funciton(){

},delay;

Furthermore, are there any like ledgers or something over the whole animate js syntax, as i know its different from regular js. but cant find it anywhere...

[Ussnorway]

moved to actionscript forum

[Colin Holgate]

setTimeout works exactly as you have written it, though normally I would put the function outside of the setTimeout. Like:

setTimeout(doItNow,100);

function doItNow(){

// do whatever you want to happen 100 milliseconds later

}

[lassep34521165]

But how would i be able to put "on a object" in a html 5 canvas document?

[Colin Holgate]

If you download the MotionBlur.zxp file from Ajar, then go to this page to see how to install it into Animate CC:

Install extensions in Adobe Animate

You will then have MotionBlur in the Commands menu. It works in HTML5 Canvas FLAs.

But as you probably noticed, it's not a very good motion blur. If you already did your own ActionScript motion blur effect, you could show your AS3 code, and then we can say how to do the same thing in JavaScript.

[lassep34521165]

Hi Colin

Thanks for your reply

My problem is not with a javascript code, it is to convert my javascript into an actionsscript, that can be "placed" onto a Movieclip

[Colin Holgate]

setTimeout() doesn't need to be on an object. If you want the setTimeout to be part of what a movieclip does, you can go into the movieclip and put the code in its timeline. If you're adding event listeners, then you do attach it to objects, like:

this.mcName.addEventListener("click",clicked);

[lassep34521165]

Hi Colin

Thanks for the replies i really appreciate it

I've tried to make the HTML5 code out from what you´ve said and what i could find from other places and my problem is now that my code - which should make a ball called "my_mc" start 0,5sec later - doesn't work )

The ball my_mc is told to do a classic tween from one place on the scene to another.

My code is place here:

/* This function reduces the opacity from the start(and works)  */

this.addEventListener("tick",fl_opac.bind(this));

function fl_opac(){

               this.my_mc.alpha = 0.2;

}

/* This function should make my_mc start 500milisek later (and doesn't work) */

this.addEventListener("tick",fl_time.bind(this));

function fl_time(){

               this.my_mc.setTimeout(playFunc,500);

}

function playFunc(){

               this.my_mc.play();

}

[Colin Holgate]

"tick" is a Ticker event, you would use it like:

createjs.Ticker.addEventListener("tick",fl_time.bind(this));

But if you just want the setTimeout to happen right away you wouldn't need the function.

The setTimeout itself doesn't need to be attached to anything, it can be:

function fl_time(){

      setTimeout(playFunc,500);

}

[lassep34521165]

Even without the tick event, it wont delay the mc, or even play it.

I have attached a "conceptuel test" version here to help show the problem.

https://wetransfer.com/downloads/88aea17187396be87075bbabc67dee7c20170724113337/9f9ee4

[Colin Holgate · Accepted solution]

60 times per second you were setting a timeout, and that timeout called a function that called another function, that wouldn't know what "this" is.

The movieclip you were trying to play only had one frame. You really wanted its layer in the timeline to play, which can't be done independently.

It's simpler to have one frame in the main timeline and then two movie clips (it could be one movieclip if the animation is to be identical). You can also use a variable to store "this" to get around the problem of binding to a second function. You could include the function in the setTimeout itself, but I find that harder to read.

Here's a modified FLA that does those things:

http://colin.scienceninja.com/SetTimeout_Test_simpler.fla.zip

The script in the timeline is now just this:

this.stop();

this.my_mc.stop();

this.my_mc.alpha = .2;

setTimeout(playFunc, 500);

var self = this;

function playFunc() {

  self.my_mc.play();

}

I also put the script on the second frame to make sure that "my_mc" is read ok.