Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson, we are going to see how we can import animations from external sources. We are going to be using the Chapter 4_a file that we built in the previous lesson. If you don't have that open, please open it now, and then go down to page number 4. I'd like to insert an additional slide, so please do that now. Right-click or Ctrl + Click and choose Insert > New Slide. In this case, I'd like to set the Master Slide to the second master slide, which is called Details Background.
There are several ways to import animations into your Captivate projects. One of them is to insert them onto a slide. The other is to import the animation as a slide itself. Right now, we are going to take a look at using animations on the slides as objects that we can address in the Timeline. From the Insert menu, choose Animation. We are going to begin with an animated GIF that we've included in the Images folder. This is located in the Images folder, in your Project folder, in Chapter 4 of your exercise files.
Select LogoAnimation.gif and then click Open. Several things have happened now that we've placed this animation on our stage. First, you can see that it says animation as a reminder that this is something that isn't a static image; in fact it's something that's going to move with time. Secondly, if you look down on the Timeline, you can see that this is called LogoAnimation, and then it also has the icon there. That is the Animation icon. This is yet another reminder that this object is going to have some motion attached to it.
Now, this animated GIF came out of Photoshop, and we're not going to talk about how to build animated GIFs in this series; however, you can take a look at the "Photoshop CS5 for the Web" series that's offered by lynda.com, and that does include a lesson on how to build animated GIFs. I have included the raw Photoshop file along with this animated GIF, so if you'd like to explore how it was built, feel free to do so. You'll notice that the animated GIF comes in at a time of 2.4 seconds, and we can read this directly over here in the Properties panel. So that 2.4 seconds is coming from the duration of the GIF itself.
We can change the length of time that the animation occurs by simply changing the time over in the Properties panel or by dragging in the Timeline. Let's extend it to the full three seconds of the slide. We can do this by grabbing the right- hand edge of the Timeline Indicator here, click and then drag it to the right, and you can see the time is expanding. We'll slowly drag it over there next to three seconds. This red triangle has shown up, telling us that this animation is now bound to the end of the slide. Release your mouse, and now the animation is going to take place over the full three seconds of the slide.
If I hadn't made this change, then the object would actually disappear before the slide was done playing. Let's preview what this does now. From our Preview menu, choose Play Slide. There is our animation, and I want to point out something that's happened because we stretched it out. We can see the animation in the Timeline by dragging in the Timeline. So if I click and drag, you can see the animation beginning to form. Now remember this thing used to be about 2.6 seconds long.
So I'll click and drag, and then out here by the end, there it is. So this is where it should end up. Perfect! So there is how we can import an animated GIF. Let's take a look at how we could import SWF content that would be coming from Flash or other sources that can create SWFs. We are going to insert that the same way, using Insert > Animation. I'd like you to browse to your Captivate folder now. On the Macintosh, this is in the Applications folder, and Adobe Captivate 5.
As you scroll down, you'll see a folder called Gallery. On the Windows computer, this is going to be located in your Program files, and then in your Captivate folder, and you should see the Gallery there. We are looking right now for the folder called SWF Animation. Double-click that, and you can see four folders. This folder consists of some pre-built animations that you can use in your projects. Let's take a look at the Arrows folder right now. There's a lot of arrows available here, and we use arrows because arrows help to point out specific content in our projects.
I'd like to pick the Human Hand arrow, open that up, and we have four of them because they're going to be animating from different sides. Let's pick the hand_right. And you can see that it's pointing to the right. Click and drag this to the left so that it will be pointing at the other animation. Now we're talking about animation now, which means that things happen over time. If you look down in the Timeline, you'll see that this animation was inserted directly at the end of where our slide used to be.
This is because we had our playhead out at the end of the slide. When you import animations, your animation is going to appear on the Timeline at the time where your playhead happens to be. If after you've inserted that animation you want to put it in a different place, all you've got to do is to drag it to the left or the right on the Timeline. So let's slide this hand back a little bit. Select it, click and hold, and then drag it to the left, until it snaps against where the playhead is now. If you had moved your playhead, that's okay.
I just like it to end at three seconds. Then we're going to take the ending point of our slide-- you'll notice our slide now has a four-second duration-- and I'm going to drag it back to three seconds. There we go. Let's preview this and see what happens. At the end of the slide, you can see the hand pointing at the logo, and that's great, but it doesn't happen for long enough period of time. In another chapter, we'll be looking at the Timeline in detail, and we'll see how we can readjust the timing of some of these objects.
For now, we're going to leave it as it is. I'd like to talk a little bit about SWF and GIF animation here inside of Captivate. SWFs come from many different sources. They can come from Flash. They can come from Captivate. They can come from Flex. They can come from all kinds of different places that can build SWFs. Even tools like Illustrator and InDesign can create animated SWFs today. They can be placed into your Captivate file and then used as animation in your projects. The SWFs and GIFs that you place into Captivate don't maintain links to their sources. In the case of a SWF, it's probably a Flash files, say an FLA. Or if it's a GIF, it might be a Photoshop file.
If you're using these types of graphics and you think that you want to be able to make changes to them, it's important that you maintain connections to the sources for these graphics. Those connections are not going to be maintained inside of Captivate. If you do happen to know an animation source, then you can connect it in the Properties panel. Select the Hand animation and then take a look at the Properties panel. At the top, you'll see the Linkage, which is to the SWF, but also an opportunity to choose a source. In this case, it's unavailable.
We don't have the source FLA, or whatever the sources that builds up this SWF file. But if I do have it, then I can choose it by clicking the Edit button here. I want to go back and call your attention to that Library and show you some of the other items that are inside of that Library. Under Insert, choose Animation. We will go up from here to SWF animation, and look at others. You can see that in addition to arrows, bullets and highlights, there are a few other elements that are included there.
One that I use frequently is this Wrong Mark. Select it and then Open. We can make it bigger, and then let's preview. You can see that it builds a big x, right? Later on, as we are building say quizzing content, you may use that as an indicator that something has gone wrong. Or if you're building training content, you may use it to indicate this was something you shouldn't do. All of this is available directly inside of Captivate.
It doesn't require any additional coding to build. Please explore that Library to see some of the other animations that you can take advantage of in your Captivate presentations. At this time, let's save this file as Chapter 4_b. Imported animations are a great way for you to emphasize certain content inside of your Captivate projects. We will be using other animations in this course, and I'm certain that you'll be using animations immediately as you begin to develop content inside of Captivate.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 90727 Viewers
80 Video lessons · 137983 Viewers
59 Video lessons · 56768 Viewers
52 Video lessons · 70387 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.