Quark Interactive Designer
Page 5

Now that we have a path, we need to have an object that can follow that path. Follow the steps below.

Draw a small picture box and import a graphic as in figure 10. In my example, I'm sending my goldfish for a swim.

Figure 10 Where I have placed my goldfish, draw a yellow box that will follow the path.

Select that object and name it in the interactive palette, use the settings shown in figure 11.

• Object Name: TheTraveler. 
• Object Type: Animation. (We are classifying this as a special class of object.)
• Display as: The animation type is item on a path. (Remember, we already made the path.)
• Path:  Choose ThePath.
• Options: Not only should the yellow circle follow the path, it should loop back and forth over the path.
• Speed: I like 300 pixels per second for this one.
• Event Sound: None.
• Choose a start point and direction.

Figure 11 In the object tab of the interactive palette, set up the yellow circle as shown.

Finally, since now we have our path and our animation object, we tell QuID when to run the animation.

Select TheTraveler in the left-side panel.

 

Switch to interactive (palette) > event (tab).

 

Set the options as in figure 12 (see next page).

 

• User Event: Click Down.
• Event Sound: None.
• Action: Animation > Play.
• Animation: TheTraveler.

Figure 12 Now that we have an animation, we have to specify when to kick it off.

Feel free to preview your work. Just to be sure, let's quickly recap what we did. First, we created a path. Next we named it and identified it as a basic, hidden object. Then we created our moving object, named it, and identified it as an animation. Finally, we identified an event so that the animation knew when to trigger.

Things to Explore:
So if I click on the object called TheTraveler, then TheTraveler moves
around on the path. See if you can figure out how to click on Object2
to send The Traveler on its path.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | PDF Version

If you enjoy our articles, click here to subscribe.
Free JavaScripts provided by The JavaScript Source