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

Solution needed for looping a series of images

Participant ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

Hi, Im using an updated version of Captivate 2019.

All the slides in my project are set to pause on exit, so the end user is required to use the TOC or nav bar to roam the project at will. This works fine for us.

What we would like to do is have a series of images on different slides loop fading in and out in the same position, even when the slide pauses at the end and waits for the user to navigate to another slide.

Does anyone have any advice or a link to a solution?

Thanks,

Dan

Views

53

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 ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

I would suggest you think about creating an animated GIF that shows these images in a sequence and then loops.  You can set this in the properties of the GIF file.  But you cannot create this with Captivate.  You would need something like Photoshop to create the GIF sequence.

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
Participant ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

hi,

It did not work right out of the box like I expected but I needed to make some adjustments.

First, if on exit is set to paused as I mentioned in my initial issue, the gif will not loop with the loop checked in captivate. I made this work by removing the Pause action on the slide exit and adding an invisible click box with a pause at the end of the slide.

Second, in photoshop I added fades between the layer, but couldnt figure out how to fade in the first and fade out the last. So I used fade in and out in captivate. This made made subsequent loops faded. So I have to live without a fade between the last and first on loops.

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 ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

If you want to pause each slide at its end, I would put an  invisible shape button on the master slide(s). BTW click boxes are always invisible but bit outdated (they cannot be used in responsive projects in fluid boxes). With its default setup a shapwill pause each slide based on that master slide at its end. The problem with Pause On Exit is that it happens after the last frame.

Just FYI: the Delay next actions command could be a valid alternative in a While loop. It never will be 'paused' by a pausing point. And you'd be able to use alpha transitions as you want. 

 

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 ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

I have used this for a Spectrum banner ad.

 

Create an html page with the following code. Just change the size of the images and the image names. Put the images  at the root of the html page and zip everything together and insert as an html5 animation.

 

<!doctype html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<style>
#pics {
margin: 0 auto;
width: 968px;
height: 248px;
}
</style>
<script>
$(window).load(function()
{
$('#pics').cycle({
fx : 'fade',
speed : 2000,
random : false,

});
});
</script>
</head>
<body>
<div id="pics">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
</body>
</html>

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 ,
May 19, 2022 May 19, 2022

Copy link to clipboard

Copied

LATEST

What about putting all your images as different states of the same object?

Then you can just keep calling for the next state at whatever interval you wish.

 

Tweak the numbers to suit your fancy.

You would need to change the word image below to match the name of your object holding the image states.

The code can be placed as an onEnter action for the slide or as an onSucess action for a button.

 

This will continue to cycle thru your states or images of that object.

 

var cycle = setInterval(gallery,3500);

function gallery() {

setTimeout(function() {
$("#imagec").fadeOut(250);
},2500);

setTimeout(function() {
cp.goToNextState("image");
},2750);

setTimeout(function() {
$("#imagec").fadeIn(700);
},2800);

}

 

 

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