Inspiring

Question

Solution needed for looping a series of images

Forum|Forum|3 years ago
May 19, 2022
3 replies
390 views

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

This topic has been closed for replies.

Stagprime2687219

Legend

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

}

TLCMediaDesign

Inspiring

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>

RodWard

Community Expert

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.

danielb51742821Author

Inspiring

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.

Lilybiri

Legend

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded