Captivate animations looped with JAVASCRIPT?

[keith888]

Hi guys,

I wondered if this is technically possible with Adobe Captivate 2019...

I am trying to produce an animation in Captivate that is continuously looping.

What I had in mind was a red ring on top of a circular button that is continuously
fading in and out as an indicator for the user to click this button.

NOW, in the good old days before flash was not supported etc, I would have done

an animated SWF with a transparent background BUT now I have to look at alternatives.

OK, I could make something similar in Adobe Animate and export it as a .OAM file with a transparent background

as well BUT seeing as I am making a responsive e-learning project with breakpoint views, I am going to have to

make a different version for each view in Animate with different dimensions.

I was thinking of an animated PNG but these don't seem to be supported.

What are my options?

Could I create a shape, select use as button and then go to Execute Advanced actions and then add some javascript  functionality

to make it fade in and out?

Why can't captivate have the functionality where it has a special panel where you can create an animation with a shape or imported image and

then drag it to the timeline once it has been create and added to the library?

Thanks

Keith

[RodWard]

"Why can't captivate have the functionality where..."

No matter how many features get bolted into Captivate there is always something else that someone things should be there. 

That's what the Enhancement Request form is for.

Adobe Captivate

[Paul Wilson CTDP]

Rod is correct. playing the "what if" game in a user forum will probably just frustrate you as you think of all the things that Captivate doesn't presently have. In the meantime, If you are designing a non responsive design course, why not use an animated GIF of what you want and simply place a click box over top of the animation? With the animation selected you can select Loop in the timing panel to have the animation continue indefinitely.

[Lilybiri]

I just quickly (10 minutes including testing) created a looping animation. It loops over the duration of the project. It is not paused by any pausing point nor by the Pause command or the Pause button on the playbar. 

However, since it is not with JS ignore it as answer to your question, you expect something more complicated.

[Stagprime]

Here is a little code that you could play with.

Place this as an onEnter action under Execute Javascript for the slide on which the button resides.

Toy around with the numbers to achieve your desired look.

setInterval(function() {

$("#ringc").fadeOut(500);

$("#ringc").fadeIn(500);

}, 1250);

The code assumes you have a red ring with a name of ring. Change that as needed. Do not delete the 'c' at the end.

[Lilybiri]

This particular use case can easily be done with Effects and While loop.

Easy Looping Animation - eLearning

Always interesting to see two approaches.

[drewm79662094]

Can this by any chance be made to appear later in the timeline? It works great on enter, but when I try to move the object to appear later in the timeline it won't work.

Cheers,

Drew

[drewm79662094]

Can this by any chance be made to appear later in the timeline? It works great on enter, but when I try to move the object to appear later in the timeline it won't work.

Cheers,

Drew

[Stagprime]

Which solution did you end up using?

I can provide a JavaScript answer to this question using the same code I provided in an earlier post in this thread.

[Stagprime]

Well - for what it is worth...

Start with a hidden ring.

You can just wrap that code up in a setTimeout so that it appears at the time you want it to.

The example below has the ring pop in at the three second mark.

Just modify the 3000 value below to adjust the entry. Value is in milliseconds.

setTimeout(function() {

cp.show("ring");

setInterval(function() {

$("#ringc").fadeOut(500);

$("#ringc").fadeIn(500);

}, 1250);

},3000);