Introduction to Interactivity (Using Events)

Making beautiful overlays in Composer is one thing. Making beautiful overlays interactive for your viewers is another! This article shows you just how simple it is to start making interactive overlays. 

Follow along using the "Interactive Example" sample Composition found in the Resources section of the Singular Marketplace (as seen below).

Introduction_to_Interactivity_1.png

Download "Interactive Example" from the Marketplace

 

In "Interactive Example", there are four pre-built graphics; A-D and four pre-built buttons, A Button-D Button. The goal with this Composition is to have each button toggle on/off their corresponding graphics. 

Interactive_Article_Markup_First.png

The "Interactive Example" Sample Composition

 

1 - Choosing your Interactive Object

Open the Composition Navigator and dive into the "A Button" Subcomposition. Select "mainBase" widget to add the interactivity.

 

Note

We want to add interactivity to the entire rectangular base of this button so that the user can select the whole surface of the button as opposed to just the circle.

 

Interactive_Article_Step_1.png

Selecting the "mainBase" Widget

 

2 - Add an Event

The Event tool allows you to assign interactivity to a widget. In this case, within the "mainBase" element, navigate to the "Event" tab within the Property Panel. Click on the dropdown menu and select "Mouse Down". Then select "Add".

Interactive_Article_Step_2.png

Adding a "Mouse Down" Event

 

Note

There are eight different actions a user can perform in the Output Window to control a Subcomposition (the swipe options can be tested on a touchscreen):

  • Mouse Down
  • Mouse Up
  • Mouse Enter
  • Mouse Leave
  • Swipe Left
  • Swipe Right
  • Swipe Up
  • Swipe Down

 

3 - Deactivating "Send Message to Javascript" tool

Next, deselect "Active" in the "Send Message to JavaScript" box. This tool is for advanced users.  

Interactive_Article_Step_3.png

Deactivating the Javascript tool

 

4 - Activate the Event

Select "Active" in the "Control Sub-Composition" box to activate the interactivity.

Interactive_Article_Step_4.png

Activating the Event

 

5 - Selecting the Controlled Graphic

In the "Composition" dropdown menu, we will select "A", which is the Subcomposition (graphic) that will be controlled by our "A Button".

Interactive_Article_Step_5.png

Selecting the Composition "A" Graphic

 

6 - Select the Mode

The mode we will select is "Toggle" so that the "A Button" can toggle on/off the "A" graphic.

Interactive_Article_Step_6.png

Selecting the "Toggle" Mode

 

Note

There are three modes you can assign to a Subcomposition:

  • In
  • Out
  • Toggle

 

7 - Test it!

You have just added your first Event! Test the functionality of this powerful tool by clicking the A Button within the Output Window. If you've followed the steps correctly, the green graphic will toggle off as seen in the image below.

Interactive-Example-Output.gif

Testing Interactivity in Output Window

 

8 - Repeat

Repeat steps 2-7 for the three other buttons and their corresponding graphics to finish the exercise. 

Click on the following link to see if your finished output mimics our Completed Sample

If you're interested in specifying what type of cursor your viewer sees when interacting with the output, learn about an additional Event property setting called the Mouse Pointer property, here.

 

Note

When building your own Composition with Events added, make sure the bounding box is tight around the area you want as a button. When an Event is added to a Widget, the corresponding bounding box will control the overlay.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.