Creating Flash Animations for Captivate Without Using Flash


Though they are two of the more important Web applications on the market, Flash MX 2004 and Flash MX Professional 2004 are not exactly the easiest programs to master. The learning curve is quite steep, and it takes time to become proficient in Flash. Still, you don't have to know a thing about Flash to create Flash animations for your Captivate projects.

The advantages to using the SWF format over the animated GIF format are file size and smoothness of playback. This section discusses how to create SWF animations in Illustrator CS, Freehand MX, and Fireworks MX.

To create an SWF file in Illustrator CS

1.

Open a new Illustrator document.

2.

Open the Layers palette and click the Create New Layer button 11 times.

You now have 12 layers.

3.

Single-click in Layer 1, select the Text tool, and single-click the page.

4.

Enter the words "Captivate Rocks!," set the point size to 24 points, choose Verdana as your font, and set the weight to bold (Figure 9.19).

Figure 9.19. The text is formatted in Illustrator CS. Keep in mind you do not have to use text; you can also animate logos and other artwork.


5.

Select Window > Symbols.

The Symbols Palette opens.

6.

Hold down the Shift key, and click and drag the words from the page into the Symbols palette.

When you release the mouse, the words appear in the Symbols palette, and the words on the page will be an instance of the symbol (Figure 9.20).

Figure 9.20. The text is converted to a symbol in Illustrator CS.


7.

Select Layer 2 and drag an instance of the symbol from the Symbol palette onto the page.

8.

Repeat this for the remaining layers (Figure 9.21).

Figure 9.21. The animation is created by changing each instance's position in the layer.


9.

Select File > Export.

The Export dialog box opens.

10.

Select "Macromedia Flash (*.SWF)" from the "Save as type" pop-down list, name the file, and click Save.

The Macromedia Flash (SWF) Format Options dialog box opens.

11.

In the Export As pop down menu, select AI Layers to SWF Frames.

12.

Click OK.

13.

Save the file and quit Illustrator.

14.

Open the Captivate movie in which the animation will appear and either add the SWF to an animation slide or import the file into an existing slide as an animation (Figure 9.22).

Figure 9.22. The Illustrator CS file is converted to a Flash SWF file and placed in a Captivate slide.


Tip

  • Be careful with the Illustrator SWF Format Options dialog box. If you select AI File to SWF, you are simply converting the pageincluding layersinto a flat SWF file. If you select AI Layers to SWF Files, each layer becomes a separate SWF file.


Creating an SWF animation in Macromedia Freehand MX

Macromedia Freehand and Flash have a symbiotic relationship. As a vector drawing application, Freehand creates content for use in Flash, which is a vector-based animation application. It isn't surprising, therefore, to discover that Freehand MX has some rather powerful animation tools that can create an SWF file. In this exercise, rather than animate the words "Captivate rocks!," you are going to have electrons revolve around the phrase.

Keeping in mind that Freehand comes in Macintosh and PC versions, this example uses the Mac version of Freehand MX, and the SWF is imported into the Captivate movie. The steps work on both Macintosh and PC versions of the application.

Symbols and Instances

Symbols and instances are quite common in today's Web-based production environment. Think of a symbol as being the original artwork, and the copy of it on the page is called an instance. In many respects, an instance is like a pointer or shortcut to the original artwork. The really great thing about symbols and instances is they can have a huge impact on final file size.

Let's assume the artwork is 25K in size. If you create 12 copies of that artwork in 12 layers, it is reasonable to assume the file size will increase to 300K. An instance is significantly smallerin this case, let's assume 3K. Suddenly the file size drops to 61K ((12*3) + 25).

Further, you can manipulateresize, distort, add new colorsinstances without affecting the original symbol.

If your drawing, paint, or animation program enables you to work with symbols and instances, use them. It is a great work habit to develop.


To create an SWF animation in Freehand MX

1.

Launch Freehand MX. Select the Ellipse tool and draw an oval shape that is 60 pixels wide and 120 pixels high.

Don't fill the oval.

2.

Draw a circle that is 20 pixels wide by 20 pixels high. Fill the circle with a Radial gradient by selecting Gradient from the pop-down list in the Fill panel and then selecting Radial Gradient from the list. Drag the small circle to the top of the large circle (Figure 9.23).

Figure 9.23. The first electron is created, filled with a radial gradient, and placed into its start position.


3.

Select View > Keyline to turn off the fills.

4.

Zoom in on the circle and drag the small circle so that its center point, the X in the middle, is sitting on the large circle.

5.

Press the Option (Mac) or Alt (PC) key and drag copies of the circle to the three, six, and nine o'clock positions on the circle.

6.

Create four more copies of the small circle placed between the copies just created (Figure 9.24). Delete the large circle.

Figure 9.24. The electrons are placed on the path they will follow in the final animation.


7.

Select Edit > Select > All and select Modify > Group to group the electrons a into one object.

8.

Select Xtras > Animate > Release to Layers.

The Release to Layers dialog box opens (Figure 9.25).

Figure 9.25. Releasing grouped object to layers using Freehand's Animate Xtra places each object in its own layer.


9.

Select Sequence from the Animate pop-down and click OK.

The dialog box closes.

10.

Select Windows > Layers.

The Layers panel opens, and eight new layers are created in your Freehand document. The electrons will not be in the order you would expect. They will follow the order in which they were created.

To reorder the electrons

1.

If it is closed, open the Layer panel and deselect the check marks (which indicate layer visibility) beside all of the layers except for the Foreground layer.

2.

Double-click the Foreground layer name and rename it One.

3.

Moving up the layers, click the check marks until the next electron in the sequence becomes visible.

4.

Drag that layer above the layer named One and name it Two (Figure 9.26).

Figure 9.26. Reorder and rename the layers to have the animation move the electrons in the proper direction.


5.

Repeat steps 3 and 4 for the remaining layers.

To set text and visibility

1.

Click the Lock icon in Layers 8 to 2.

This locks the layers and prevents changes.

2.

Select Frame One and select the Text tool.

3.

Enter the phrase "Captivate rocks!" Set the point size to 48 points, the font to Verdana, and the weight to Bold.

4.

Drag the phrase over the circles.

5.

Select the text and click the Object tab.

The Object panel opens. Note the Left and Top values in the Dimensions area. They are the object's X and Y coordinates on the page.

6.

Copy and paste the selection and enter the L and T values in the new object to those noted in the previous step. The words will move into the same position as the original.

7.

With word "Captivate" selected, turn on the visibility in Layer 2.

8.

Click the Layer name and, when you see the pen icon in the layer name, lock the layer.

The selection moves to that layer.

9.

Lock Layer 2 and turn off the visibility of Layer 2.

10.

Select Layer 1 and repeat steps 6 to 9 for the remaining layers.

The electrons are in front of the words in Layers 3 and 4.

11.

To give the illusion of the electrons moving around the words, select the text in each of the two frames and select Modify > Arrange > "Send to back."

Your artwork should resemble Figure 9.27.

Figure 9.27. By placing electrons in front of and behind the lettering, you give the illusion of depth.


12.

Select File > Export and select Macromedia Flash (SWF) from the Format pop-down menu.

13.

Click the Setup button.

The Movie Settings dialog box opens. Choose the settings shown in Figure 9.28. Note that in the Movie Settings dialog box, you always want to select Autoplay. This allows the animation to loop. The animation occurs using the frames, thus it is also important that you select Animate in the Layers area.

Figure 9.28. The Movie Settings dialog box determines how the Flash SWF will be created and how it will play.


14.

Click OK.

The Movie Settings dialog box closes.

15.

Name the file and click Export. Save the file and quit Freehand MX.

16.

Open the Captivate movie and place the SWF in an animation slide or into an existing slide as an animation (Figure 9.29).

Figure 9.29. Even SWF files created using a Macintosh version of Freehand MX can be placed into Captivate movies.


Tip

  • When using Illustrator CS or Freehand MX to create SWF files, try to create the files using a document that is the same size as the area used for the SWF file in the Captivate slide. If you create the Freehand SWF using a letter-size page, that will be the size of the SWF file. If it uses only 10 to 15 percent of the page, all you are doing is adding to the bandwidth required to play the movie.


Creating an SWF animation in Fireworks MX 2004

Though Captivate can use an animated GIF file created in Fireworks MX 2004, don't overlook creating an SWF instead. I created an animated GIF in Fireworks that had the words "Captivate rocks!" reduce in opacity from 100 percent to 35 percent over 12 frames. The animated GIF file was 24K in size; the resulting Flash SWF file was 4K. Though that may not seem like much, if your Captivate movies are being prepared for Web delivery, every extra "K" of file size adds to the bandwidth requirement.

To create an SWF file in Fireworks MX 2004

1.

Create the GIF file in Fireworks MX 2004.

2.

Select File > Export Preview.

The Export Preview dialog box opens.

3.

Select Animated GIF from the Format pop-down menu.

4.

Click the Export button.

The Export dialog box opens.

5.

Navigate to the folder in which the file will be saved and name the file.

6.

Select Macromedia Flash SWF from the "Save as type" pop-down menu.

7.

Click OK and save the file as a PNG file by selecting File > Save As.

Tip

  • Get into the habit of saving all Fireworks MX 2004 images and animations as PNG files. This format preserves all effects, including frames used in animations. It will pay for itself the first time a client requests a change to an animation.




Macromedia Captivate for Windows. Visual QuickStart Guide
Macromedia Captivate for Windows. Visual QuickStart Guide
ISBN: 321294173
EAN: N/A
Year: 2003
Pages: 130

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net