Quark Interactive Designer
Page 3

Now we need these interactive objects to do something. For our lesson, we will make them move off the page when the user clicks. We are describing a user action. If the user clicks on an object, that object should do something. This is pretty easy to do. Just follow the next set of steps.

Switch to the event tab in the interactive palette.

 

Click interactive (palette) > objects > Object1.

Review figure 5 carefully and set up the following settings as shown in figure 5. User Event: Click down.

Figure 5 Set Object1 to slide when the user clicks down on Object1.

These are pretty standard events. Mouse cursor clicks down, clicks up, hovers over with mouse enter, un-hovers with mouse exit. Events are important because they are the trigger that will make something else happen.

Event Sound: If we had a sound, we could kick off that sound when the user event occurs. If you have an MP3 you want to link to, that's fine, otherwise, don't worry about assigning a sound for right now.

Action: Hit the drop-down menu and choose object > slide. Once you choose this option, other information becomes available. Look at the other actions that are available while you are here and you'll see that you can do a lot of stuff in QuID!

Object: What object will slide? In this case we will slide Object1, but the choice is yours. That could mean that when I click Object1, Object2 slides off the page.

Method: This option is cool. We can slide to an XY coordinate, to the position of another object, to this object's original location, or off the page. That's the one we want. Select to sides. When you select this option, the pasteboard option is available.

Pasteboard: I will have the object slide to the right, off the page, toward the pasteboard.

Timing: I will have this slide happen over a specific duration of time. I could also use a pixels-per-second option — the same concept as speed in miles per hour. In my example, this object will move at a rate of 65 pixels per second.

Seconds: I will have this slide happen over the course of three seconds.

To recap: Object1, the magenta box, is going to slide off the page to the right over the duration of three seconds when the user clicks down on Object1. Now let's do that again, but for Object2 let's have it move to the left. Refer to the steps above and make the necessary adjustments.

Figure 6 Set Object2 to slide when the user clicks down on Object2.

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