Overview

Events are a way to send signals to your runtime code to execute a block of code at the right moment. They enhance the communication between designers and developers by passing along useful information. With them, we can do things like go to a URL, play a sound, have some HTML appear, or do anything else we may want to accomplish via code.

Coordinating Rive events at design time and runtime will be important to ensure a successful integration in apps, games, and more.

Creating an Event

To create an Event, use the Events tool located in the Toolbar. Once the tool is active, click anywhere on the artboard to add a new event.

Adding a new event

You'll notice that the Event is displayed on the artboard and in the Hierarchy.

Configuring an Event

Once we've added an event, we need to configure the Event using the Inspector.

Inspector view for the Event

Name

The Name field is where we can give our Event a specific name. It's important to do this so that at runtime, we can hook up the correct bits of code to their corresponding events.

Renaming an Event

You can also rename the Event directly on the artboard.

Type

The Type dropdown allows you to change the Event type between General and URL.

Properties

Properties allow us to define extra information being passed to the Runtimes. For example, you may want to pass in the name of an audio file to play when the event is reported at runtime, or perhaps some other metadata for data analytics purposes.

To add a new property, hit the plus button next to the Properties.

Add New Property

First, we want to change the name of our property to something identifiable. Next, we need to select what type of value our property will track such as a Number, Boolean, or String.

Rename and select input

URL

When an Open URL Event is selected, we have additional configuration options.

Properties for Open URL Event

In the text box, we will add the URL that we want our component to take us.

The Target tells the user's browser where this URL should open. We have a few options: Blank, Parent, Self, and Top.

• Blank - Usually opens the link in a new tab, but users can configure browsers to open a new window instead. Note: if the Event is not signaled from a Rive Listener, the browser may block and notify the user a popup was blocked

• Parent - Opens in the parent browsing context of the current one. If no parent, behaves as Self.

• Self - Opens in the current browsing context

• Top - Opens in the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as Self.

Signaling an Event

We can signal an event in three ways: via the timeline, on a state, or on a transition.

Timeline

Signaling an event through the timeline allows us to control the precise moment a piece of code will fire, like a sound effect.

First, select the timeline you want to add the event to. Next, use the Report Event button in the inspector. Note that this key will be placed at the location of the playhead.

Keying an Event on the timeline

Additionally, you can key a property to let the runtimes know that a particular boolean, number, or string property has a new value.

Transition & State

You can report an event on a Transition or a State. We typically do this to signal at runtime contextual information about what is happening in the State Machine. For example, if we want to have some element appear at the end of our Transition, we would want to use an event tied to a Transition to signal this.

To report an event, select either the desired State or Transition and use the plus button next to the Events section in the Inspector.

Signaling an Event via State or Transition

The dropdown allows us to select any Event we've defined. Now that we've selected the Event, we can decide whether it is signaled at the start or end of the Transition or State.

Events at Runtime

For more information on how to listen for Events at runtime, check out the section.