Adding a Zim animation to a movieclip in Adobe Animate

Questions
1

I have a moveclip called "blackballZim" in Adobe Animate. I am trying to create an animation so that the blackball shakes for a short period of time when it is clicked.

I have got it to this point, but I can't make the animation stop! I would like to be able to set a time for the animation to run, say for 1 second. I also need it to run again when I click on the "blackballZim" again.

This is the code so far:

blackballZim.animate({
props:{x:300},
time:.01,
loop:true,
rewind:true,
});

There may be an easier way to do this that I have not discovered yet, but at this point I would just like to control the time the animation runs.

Any help would be appreciated.

Thank you

Rod

2

You can use loopCount:10 or something like that to loop only 10 times. Or loopCount:rand(3,10) for a variety. Also, wiggle() is good for shaking if you do not want it the same distance and time all the time.

3

This is very interesting - here is the code I am using....

blackballZim.animate({
			id:"blackCircle",
			props:{x:300},
			time:.01,
			loop:true,
			loopCount:15, 
			rewind:true
		});

What happens is that every time I click on the movieclip, the movement gets less and less until it stops. The first click works well, and that is what I need.

Can you see what I might be doing wrong?

Rod

4

Yes - it looks like with the small time, the animate() is not leaving the item at the start location on rewind. I thought we had solved that but will have to take another look. Maybe something got reverted.

For now, do something like:

const c = new Circle().center();
c.on("click", ()=>{
    c.animate({
        id:"blackCircle",
        props:{x:300},
        time:.1,
        loop:true,
        loopCount:4,
        rewind:true,
        rewindCall:()=>{
            c.center(); // or wherever it started
        }
    });
});
5

Also, you want a larger time to be effective and wiggle will be better for you - it will then wiggle about its current location rather than going off to one side. But when I tried a wiggle, it is supposed to end on its start, but with small times was not - so fixing that as well.

6

Yes... the code is in there to reset it to the start amount. So will check if it is running properly.

image

7

I see... it is calling getStart() but getStart() is being set at each tween which calculates it from where it currently is - so if it does not quite finish... then that is the new start. We want the very start, before any tweens run. And we do not want to call getStart() when it finishes as that would reset the start amounts - we want to use the start object that is made from the original getStart() function. Okay. That is fixed and works. Now to check the wiggle.

8

Okay - we have patched the wiggle() in ZIM 016 as it was a simple fix. We will leave the animate() as is because it has the potential to break things. We will leave the animate() fix for ZIM 017 which is coming out within the month most-likely.

So perhaps try the wiggle():

const c = new Circle().center();
c.on("click", () => {
	// property, start, min, max, minTime, maxTime, totalTime
	c.wiggle("x",null,20,50,.02,.05,.5)
});
9

Just want to say a big thank you for helping me through this. It is working well .

Rod

1 Like