Adobe Captivate enables you to incorporate external Adobe Flash animations into your project easily, as well as efficiently maintain your project over time by using the project library.

This article discusses the following:

• Why you would want to incorporate external animation
• Basic tips on preparing your Flash file
• How to import an external animation
• How to update an animation in your project

Requirements

You must install the following software to follow the steps in this tutorial:

Adobe Captivate

• Try
• Buy

Flash CS3 Professional

• Try
• Buy

Sample files:

• adding_animation.zip (ZIP, 797K)

Prerequisite knowledge

To make best use of this content, you should have a basic understanding of Adobe Captivate and Flash.

Why incorporate external animation?

The scenario: You are developing an Adobe Captivate project and would like to incorporate a complex animation or interaction authored in Flash. Although Adobe Captivate enables you to build animation and interactivity within each slide easily, sometimes your project requires the "big guns" of a well-executed Flash animation or interaction.

The solution: You can easily insert the published SWF file into your project, which will automatically store a link to the file's original location, so if the SWF file ever needs to be updated, you can easily do so with a few clicks.

Create your animation: Adobe Flash

First, come up with an an idea and create it. Start with the end in mind. Whatever animated widgets you create will be part of larger project, so consider where and how it will fit in.

Next, open Flash and build your sequence. This article will not drill down into Flash. For more information, visit the Getting Started section of the Flash Developer Center.

Remember, start with the end result in mind. Decide where your animation's source FLA file and published SWF file will live. If you plan on maintaining your Adobe Captivate project over time, choose one location and do not change it. This will help you use the Adobe Captivate library's built-in updating feature, such as Project Name > "animated_swfs" folder (see Figure 1). This will be used for easily updating your SWF files, if necessary.

Figure 1. Saving published animations in a single folder

Consider also whether your animation will repeatedly play or simply play once and stop. If the animation is to play only once, remember to include a stop in your ActionScript code if you do not want your animation to loop (see Figure 2).

  

Figure 2. Including a stop in your ActionScript code (left) so the animation does not loop (right)

Import your animation to Adobe Captivate

Here is how you import your Flash animation:

1. Open your Adobe Captivate project and navigate to the frame in which you wish to insert the animation.
2. Click Insert > Animation.
3. Locate your animation, select it, and click Open.

4. The New Animation dialog box opens (see Figure 3). This dialog box enables you to view your animation's duration and adjust transition effects.

   

   Figure 3. New Animation dialog box

5. Click the Options tab (see Figure 4) to choose your settings for timing and transition. Here you have the additional option to synchronize the animation's timing to your slide's timing, as well as to add additional looping.

   

   Figure 4. Animation properties you can change

6. Click the Audio tab (see Figure 5) to attach sound files to the animated object. You can also click the Settings button to modify the audio settings.

   

   Figure 5. Animation audio properties you can change

7. Click the Size and Position tab (see Figure 6) to fine-tune the scale and location. If you do not specify a size or position, and if the animation is smaller than the move size, Adobe Captivate will automatically place the animation at full size in the center of the slide.

   

   Figure 6. Animation size and position properties you can change

8. Click OK.

9. Notice that your animation has been inserted on your slide, as well as within the Media folder of your project library (see Figure 7). The slide timeline will expand to match the duration of your animation if it is longer than the slide's default setting. If the animation is shorter than the default setting, the animation timeline object will expand to match.

   

   

   Figure 7. Animation inserted on the slide as well as within the Media folder (top); slide timeline expanding to match the duration of your animation (bottom)

   Notice that the animation object's duration on the Timeline matches the slide's default setting of three seconds. Select Project > Preferences. After the Preferences dialog box opens, select the Project category and choose Preferences from the Project pop-up menu (see Figure 8).

   

   Figure 8. Preferences dialog box showing the Project category options you can change

10. Click File > Publish to publish and preview your project.

11. Navigate to your publish location to view your files (see Figure 9). Notice that your animation was also published as an external SWF file, similarly to the "..._skin.swf" file. This means that the animation will be loaded and unloaded upon runtime.

    

    Figure 9. Viewing your files

Update your animation

If you need to make minor or major updates to your animation, you can easily modify the SWF file in its source editing program and then update the animation object in your Adobe Captivate project library:

1. Assuming that your SWF file has been changed, launch your Adobe Captivate project, hover over the SWF asset in your project library, and right-click the file (see Figure 10).

    

   Figure 10. Properties when right-clicking the SWF asset

2. An Update Library Items dialog box opens, displaying the existing path to your published SWF file (see Figure 11). Here you can re-sync your library objects with their sources.

   

   Figure 11. Update Library Items dialog box

3. Click Update. Your SWF item will automatically be updated, both in your library and Timeline.

Where to go from here

Check out the following resources to learn more about Adobe Captivate and Flash (particularly animation):

• Adobe Captivate and eLearning updates
• Flash Developer Center: Animation topic page
• Adobe Creative Suite 3 Video Workshop (select the Animation topic)

About the author