• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Captivate animations looped with JAVASCRIPT?

Community Beginner ,
Jul 04, 2019 Jul 04, 2019

Copy link to clipboard

Copied

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

Views

679

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 04, 2019 Jul 04, 2019

Copy link to clipboard

Copied

"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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 04, 2019 Jul 04, 2019

Copy link to clipboard

Copied

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.

Paul Wilson, CTDP

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 04, 2019 Jul 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Jul 04, 2019 Jul 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2019 Jul 05, 2019

Copy link to clipboard

Copied

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

Easy Looping Animation - eLearning

Always interesting to see two approaches.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Aug 04, 2020 Aug 04, 2020

Copy link to clipboard

Copied

LATEST

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);

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines