Creating an interactive movie

Welcome to Corel R.A.V.E.™, a powerful object-based animation program designed for creating animated graphics.

What you will learn
In this tutorial, you’ll create an interactive movie. By applying behaviors to frames and objects, you will create a game that allows users to generate one of twenty-seven different faces by mixing-andmatching hair, eyes, and mouths. You can view a sample of the project by clicking here. As you complete the project, you’ll learn how to • • • apply labels and behaviors to frames apply behaviors to objects save and export a movie

Understanding this project
This project involves setting four movies to work together as one. Three movies have already been created for you, and have been provided in both Corel R.A.V.E. (CLK) and Macromedia Flash™ (SWF) format. These files are top.clk and top.swf, mid.clk and mid.swf, and bot.clk and bot.swf. These three movies work similarly. Let’s take a moment now to explore one of them. 1 Click File menu Open.

2 From the Look in list box, choose the folder Program files\Corel\Corel Graphics 12\Languages\EN\Tutorials\Corel RAVE Tutorials\Sample files. 3 Double-click the filename top.clk. You’ll notice that this is a complex file, involving animations, frame labels, behaviors, and rollovers working together.

Page 1 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie

Animations
The file top.clk contains nine animations, beginning at Frames 1, 6, 17, 23, and 29. In the Timeline docker, they are labeled “Scroll Left” or “Scroll Right.” In the finished project, these animations play when you scroll through the various parts of the face.

Frame labels and behaviors
The file top.clk uses thirty-four frames, several of which have labels or behaviors applied to them. A label is a name that you can attach to a frame, allowing you to reference it more easily. In the Timeline docker, frames with labels are marked with a flag . A behavior is a command that is executed when a movie reaches a certain point, or when the user interacts with an object. In the Timeline docker, frames with behaviors are marked with a diamond . You can look up a frame’s label and behavior by clicking the frame and then clicking the Behaviors button in the Timeline docker.

Page 2 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie

• • • • •

Frames 1, 6, and 11 are set to stop the animations that begin on those frames from playing automatically. Frames 17, 23, and 29 are set to play the animations that begin on those frames. Frames 16 and 28 are set to go to Frame 1. Frame 22 is set to go to Frame 11. Frame 34 is set to go to Frame 6.

Rollovers and behaviors
The file top.clk also contains six rollovers to which behaviors have been applied. In the Timeline docker, they are labeled “Left Button” or “Right Button.” Rollovers have three states: “Normal,” “Over,” and “Down.” Here, the behaviors have been applied to the “Down” states of the rollovers. To look up a rollover’s behavior, click the rollover, choose Down from the Active rollover state list box on the Internet toolbar, and then click Movie menu Behaviors. (If the Internet toolbar is not displayed, click Window menu Toolbars Internet.) • • • In Frame 1, the left-button rollover is set to go to Frame 17, and the right-button rollover is set to play the animation that begins in Frame 1. In Frame 6, the left-button rollover is set to go to Frame 23, and the right-button rollover is set to play the animation that begins in Frame 6. In Frame 11, the left-button rollover is set to go to Frame 29, and the right-button rollover is set to play the animation that begins in Frame 11.

The files mid.clk and bot.clk are similar to top.clk. The behaviors on the frames and rollovers control the movies. When you have finished viewing the file(s), click File menu Close.

Page 3 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie
The exported movie
Now, let’s take a look at the exported movie top.swf. To do this, click here. In the exported movie, animations, frame labels, behaviors, and rollovers work together. Clicking a rollover triggers a behavior that plays one of the nine animation sequences. The interactive movie you are about to create will integrate the three movies top.swf, mid.swf, and bot.swf.

Opening the main movie
Now that you understand how the individual movies work, it’s time to set up the main movie that will load them and display them together. To do this, you’ll start by opening a file that contains all the elements you’ll need for your movie. If the Internet toolbar is hidden, you’ll want to display it before you begin to work on the movie.

To display the Internet toolbar
1 Click Window menu Toolbars Internet. 2 To dock the toolbar, click its grab area, and drag the toolbar to any edge of the application window. You may want to dock it below the property bar.

To open the file
1 Click File menu Open. 2 From the Look in list box, choose the folder Program files\Corel\Corel Graphics 12\Languages\EN\Tutorials\Corel RAVE Tutorials\Sample files. 3 Double-click the filename faces_user.clk. You’ll notice that this movie contains only two frames. Frame 1 features two rollover buttons: a green arrow (called “Reset Button”) and a red “X” (called “End Button”). Frame 2 shows the twenty-seven different faces you can make with the final movie, and also features a green arrow rollover button (called “Back Button”).

Page 4 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie

Setting the behaviors for Frame 1
Next, you will apply a label to Frame 1. You will also apply behaviors to that frame, so that it loads the three individual movies. In addition, you will apply a behavior that holds the movie on Frame 1.

To apply Load movie behaviors
1 In the Timeline docker, click Frame 1. 2 Click Movie menu Behaviors. 3 In the Frame label name box, type Start. 4 From the Behavior list box, choose Load movie. 5 In the Location box, type top.swf, and then press Enter. This specifies the file to be loaded. 6 In the Level box, type 1. When you load multiple movies into another movie, each movie is assigned a level. Here, you are assigning the movie top.swf to Level 1. 7 Click Apply. The behavior displays on the right side of the dialog box. 8 Repeat steps 4 to 7, this time using the following settings: • Location –– mid.swf • Level –– 2 The behavior displays on the right side of the dialog box. 9 Repeat steps 4 to 7, this time using the following settings: • • Location –– bot.swf Level –– 3

The behavior displays on the right side of the dialog box. 10 Click OK.

Page 5 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie
To apply a Stop behavior
1 Click Movie menu Behaviors. 2 From the Behavior list box, choose Stop. The Tell target list box defaults to faces_user.clk. 3 Click Apply. The behavior displays on the right side of the dialog box.

4 Click OK.

Setting the behaviors for Frame 2
Here, you’ll apply a label and a behavior to Frame 2. You’ll also apply a behavior to the rollover button that appears in Frame 2.

To set a behavior on Frame 2
1 In the Timeline docker, click Frame 2. 2 Click Movie menu Behaviors. 3 In the Frame label name box, type End. 4 From the Behavior list box, choose Stop. 5 Click Apply. The behavior displays on the right side of the dialog box.

Page 6 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie
6 Click OK.

To set a behavior on the rollover button in Frame 2
1 On the stage, click the green arrow rollover button. 2 From the Active rollover state list box on the Internet toolbar, choose Down. This applies the behavior to the rollover button’s “down” or “clicked” state. 3 Click Movie menu Behaviors. 4 From the Behavior list box, choose Go to. 5 Enable the Label option, and from the Label list box, choose Start, and press Enter. This tells the rollover button to go to the frame called “Start” when it is clicked. Remember that in the previous section, you labeled Frame 1 as “Start.” 6 Click Apply. The behavior displays on the right side of the dialog box.

7 Click OK. 8 From the Active rollover state list box on the Internet toolbar, choose Normal. This resets the rollover to its default state.

Setting the behaviors for the rollover buttons in Frame 1
Next, you’ll return to Frame 1 to apply behaviors to the two rollover buttons that it contains. To the green arrow rollover button, you’ll apply behaviors that reload the three movies top.swf, mid.swf, and bot.swf. This will have the effect of resetting the movie. To the red “X” rollover button, you’ll apply a behavior that plays the movie, advancing it to Frame 2. Remember that Frame 2 displays the twenty-seven different faces in the movie.

To apply behaviors to the green arrow rollover button
1 In the Timeline docker, click Frame 1. 2 On the stage, click the green arrow rollover button.

Page 7 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie
3 From the Active rollover state list box on the Internet toolbar, choose Down. This applies the behavior to the rollover button’s “down” or “clicked” state. 4 Click Movie menu Behaviors. 5 From the Behavior list box, choose Load movie. 6 In the Location box, type top.swf, and then press Enter. 7 In the Level box, type 1. 8 Click Apply. The behavior displays on the right side of the dialog box. 9 Repeat steps 5 to 8, this time using the following settings: • • • • Location –– mid.swf Level –– 2 Location –– bot.swf Level –– 3

10 Repeat steps 5 to 8, this time using the following settings:

11 Click OK. 12 From the Active rollover state list box on the Internet toolbar, choose Normal. This resets the rollover to its default state.

To apply a behavior to the red “X” rollover button
1 On the stage, click the red “X” rollover button. 2 From the Active rollover state list box on the Internet toolbar, choose Down. This applies the behavior to the rollover button’s “down” or “clicked” state. 3 Click Movie menu Behaviors. 4 From the Behavior list box, choose Play. 5 Click Apply. The behavior displays on the right side of the dialog box.

Page 8 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie

6 Click OK. 7 From the Active rollover state list box on the Internet toolbar, choose Normal. This resets the rollover to its default state.

Saving and exporting the movie
To test the movie, you will export it to the Macromedia Flash (SWF) format. It is a good idea to save the file before you export the movie.

To save the movie
1 Click File menu Save as. 2 From the Save in list box, choose the folder Program files\Corel\Corel Graphics 12\Languages\English\Tutorials\Corel RAVE Tutorials\Sample files. 3 Type testing.clk in the File name list box. 4 Click Save.

To export the movie
1 Click File menu Export. 2 In the Save in list box, choose the folder Program files\Corel\Corel Graphics 12\Languages\English\Tutorials\Corel RAVE Tutorials\Sample files. 3 From the Save as type list box, choose SWF - Macromedia Flash. 4 Click Export. 5 Click OK.

Playing the movie
Now you’re ready to try out the movie you’ve created. To do this, click here.

Page 9 of 10

Corel R.A.V.E. tutorial

Tutorial: Creating an interactive movie
If the file does not open, check to make sure you exported testing.swf to the folder Program files\Corel\Corel Graphics 12\Languages\English\Tutorials\Corel RAVE Tutorials\Sample files. When the file testing.swf opens, it loads the individual movies top.swf, mid.swf, and bot.swf in their proper places. You can do any of the following: • • • Click the left and right rollover buttons. This scrolls through the nine different animations that are available in top.swf, mid.swf, and bot.swf. Click the red “X” rollover button. This displays the twenty-seven different faces you can create. Click the green arrow rollover button. To return to the start, click the green arrow rollover button.

From here...
You can explore Corel R.A.V.E. on your own, or you can become productive quickly by following other CorelTUTOR™ tutorials. For more information about the topics and tools discussed in this tutorial, refer to the Help.

© 2002 – 2003 Corel Corporation. All rights reserved. All trademarks or registered trademarks are the property of their respective companies.

Page 10 of 10

Corel R.A.V.E. tutorial