Join Chris Converse for an in-depth discussion in this video Setting the animation to loop, part of Create a Homepage Marquee with Edge Animate.
Now to create our looping effect, first we need to fade out photo 03. So down on the timeline, let's grab the playhead. Let's drag this out to the 18-second mark. Let's select panel_03_photo. Let's activate another keyframe for opacity. Let's move this over to the 19-second mark. Let's add another keyframe. Let's bring the Opacity down to 0. Select the first keyframe, right-click, choose Create Transition, and now we see that the photograph fades from 3 back to 2.
However, we want to be able to fade back to the first photograph. So let's come back to the timeline labels, let's select panel_02_photo, and let's bring the playhead back to the 13-second mark. This is the point where the third photograph fades in over top of the second. So let's come down here and let's activate a keyframe for Opacity, and let's bring that down to 0. We're not creating a transition here, so what happens is once we get to the 13-second mark, panel_02_photo, which is completely covered up by panel_03, will have its Opacity set to 0.
This way, at 18 seconds, when we fade out the third photo, this will cross-dissolve back into the first photo. So now with that in place, let's scrub the timeline back to the very beginning. Let's bring the playhead back to the 2-second mark, which is the point where the first photograph has faded in from our initial animation. Let's come over here and let's click on this little button here, which is the Insert Label button, and let's type in the name loop. Hit Return. So now at the 2-second mark we have a custom label named loop.
Let's scrub the timeline back out to the 19-second mark. Let's come over here to the Actions panel. Let's insert a trigger. This will bring up the dialog box for the code for that particular action. On the right-hand side, under the Snippets, let's choose Play from. By default, this will put 1000 ms into the parentheses here. So what we want to do instead is tell the particular symbol to play. And inside of the parenthesis, two quotes for a string literal, we're going to type in loop, and then close.
So now once the timeline gets to the 19-second mark, it's going to jump back to the looping area, which is the point where the base photograph is already animated in, and just continue to loop. So let's choose Command+S or Ctrl+S to Save our project. Let's come down and choose Preview in Browser. So in the browser at the 1-second mark photo_ 01 fades in; after 6 seconds photo_02 fades in; at 12 seconds photo_03 fades in; and then at 18 seconds photo_03 will fade back out, revealing photo_01.
We set the timeline to go back to the looping point, and this gives us the effect of a constant, seamless transition between the three photographs. Now that our photographs seamlessly animate, next, we can start working on the captions.
- Setting up your project
- Creating buttons and converting them to symbols
- Animating symbols
- Detecting a mouse rollover on the stage
- Creating custom interactions with jQuery
- Styling buttons and navigation elements with CSS
- Creating a rollover effect with jQuery
- Adding and removing custom debugging code