Home > Interactivity > Click Zone

Click Zone

A 'Click Zone' is another object that allows two-way interactivity between your movie and your end-users. Use a Click Zone in a scene to pause your Demo/Tutorial and require your that your users click a pre-specified zone on the screen in order to continue (or take some other action).

At movie run-time, the user will be presented with your Click Zone and the movie will pause, awaiting the user's action (click). Demo Builder then offers Events ('On Click Inside', 'On Click Outside', 'On RollOver' as described below) which determine the next action (or path) to be taken by the movie.

Set the following properties and options for Click Zones:

1. Name
   The default name for a Click Zone is 'Click Zone X' ('Click Zone 1', 'Click Zone 2', 'Click Zone 3', and so onward), and this is visible in the name property of the object. You can change a click zone's name by deleting the default name and typing in another one. Ensure the click zone is selected before attempting to change its name property.
2. Rotate, Scale and Location
   Adjust the rotational angles, scale or manually change the location of the click zone on the Canvas. Rotations on the X and Y-axis are ignored when the click zone is attached to the image.
   

   Learn more...

   Click the Reset button to clear all values. Click on the individual labels and select Reset to clear the corresponding value or select Apply to all if you want to apply your chosen values to all other click zones.

3. Hand Cursor
   Change the mouse pointer to a hand cursor when a user positions the mouse pointer over the Click Zone.
4. Style
   The style property allows you to change the appearance (style and color) of the Edit Zone.

   Learn more...

   Border Color Determines the color for the Rectangle's edges. Border Width Change the thickness of the Rectangle's edges. Fill Color Used to specify a color for the Rectangle. Fill Opacity Adjust the transparency of the chosen color. Eraser Makes the click zone fully transparent and the borders invisible.

5. Trigger(event)
   Select 'OnClick', 'OnDblClick' or 'OnRightClick' event.

Using the Click Zone Object Events

As described above, you can use Click Zone Events to interact with the users of your demonstration or tutorial and to control the behavior of your movie based on your end-users actions. The Click Zone object offers the following 3 events to achieve this:

1. On Success Event
   Add objects, actions, effects and/or audio to this event to define how your movie will display and behave in response to your users clicking inside the borders of the Click Zone.
2. On Failure Event
   Add objects, actions, effects and/or audio to this event to define how your movie will display and behave in response to your users clicking outside the borders of the Click Zone.
3. On RollOver Event
   Add objects, actions and/or audio to this event to define how your movie will behave when users positions their mouse cursor over the Click Zone object. (For example to display an explanatory message or tip in a balloon or text as to the action required by the user).

Important: Each individual Event has its own Timeline to define the separate sequencing of display and behaviors for that event.

Adding Actions and/or Audio to control the behaviour of Click Zone Object Events.

For each of the above events, you can assign the desired behavior of your movie by adding an Action to take, an Effect to show and/or Audio to be played.

To add (or edit) the action to take or audio to be played for a certain Click Zone object event, ensure that the Click Zone object is selected in your movie scene. This Click Zone's individual TimeLine will be shown at the bottom of the screen. Click on the event to which you want to add an action and/or audio and note that the Click Zone properties panel (at top of screen) will change to show additional options. The following options are available to be added or edited for Click Zone events : Stop Movie, Loop Movie, Close Movie, Go To URL, Run EXE,Go To Movie, Execute JavaScript.

See also