diff --git a/docs.json b/docs.json index 23cd2131..c8623cd1 100644 --- a/docs.json +++ b/docs.json @@ -165,7 +165,6 @@ "pages": [ "editor/state-machine/state-machine", "editor/state-machine/states", - "editor/state-machine/inputs", "editor/state-machine/transitions", "editor/state-machine/listeners", "editor/state-machine/layers" @@ -175,6 +174,7 @@ "group": "Events", "pages": [ "editor/events/overview", + "editor/events/open-url-events", "editor/events/audio-events" ] }, @@ -230,7 +230,14 @@ ] }, "editor/ai-agent/ai-agent", - "editor/tagging" + "editor/tagging", + { + "group": "Legacy Features", + "pages": [ + "editor/state-machine/inputs", + "editor/events/general-events" + ] + } ] } ] diff --git a/editor/events/general-events.mdx b/editor/events/general-events.mdx new file mode 100644 index 00000000..178a588c --- /dev/null +++ b/editor/events/general-events.mdx @@ -0,0 +1,38 @@ +--- +title: 'Events at Runtime' +description: "Using events to communicate with runtime code (deprecated)" +noindex: true; +--- +import { YouTube } from "/snippets/youtube.mdx"; + + + **DEPRECATION NOTICE:** + + [Rive Events](/editor/events/overview) are still fully supported within a Rive file. However, using events to communicate with runtime code is deprecated. + + **For new projects:** Use [Data Binding](/editor/data-binding) instead. + + **This content is provided for legacy support only.** + + +For general information about adding, creating, and signaling events, see [Rive Events](/editor/events/overview). + + + +General Events were previously used to send signals from a Rive file to runtime code. They allowed designers and developers to coordinate behavior by passing event data at specific moments in an animation. + +This approach has been deprecated in favor of [Data Binding](/editor/data-binding/), which provides a more structured and predictable way to communicate with runtime code. + +## Properties + +Properties allow you to attach additional data to an Event that can be read by the runtime. + +To add a new property, click the `+` button next to Properties. + +![Add New Property](https://ucarecdn.com/d4cd3b8f-3765-4c28-9204-e5daf7fff0d8/) + +Give your property a clear name, then choose the type of value it represents, which can be a Number, Boolean, or String. + +![Rename and select input](https://ucarecdn.com/73d05fb1-7c9c-4c9c-a17c-51781ef30d0e/) + +You can key a property on the timeline to update its value over time. When the Event is reported, the runtime receives the current value of each property. \ No newline at end of file diff --git a/editor/events/open-url-events.mdx b/editor/events/open-url-events.mdx new file mode 100644 index 00000000..eee270a3 --- /dev/null +++ b/editor/events/open-url-events.mdx @@ -0,0 +1,51 @@ +--- +title: 'Open URL Events' +description: "Using events to open URLs at runtime" +noindex: true; +--- + + + Open URL Events are not supported on Apple or Android runtimes. + + + + For security reasons, Open URL Events are disabled by default in web runtimes. + + To enable them, set `automaticallyHandleEvents` to `true`. + + + + For security reasons, Open URL Events are disabled in share links and on the Rive Marketplace. + + +For general information about adding, creating, and signaling events, see [Rive Events](/editor/events/overview). + +### URL Properties + +When you select the **Open URL** Event type, additional configuration options become available. + +![Image](https://1159711764-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3EXlibk6bj2FzPQW-9%2Fuploads%2FrDR98sXAUkNZXqBbv0sy%2FCleanShot%202023-09-18%20at%2013.06.14%402x.png?alt=media&token=0c681b87-2667-48d3-aa24-3b550732032e) + +Enter the URL you want to open. + + + Include the URL protocol (for example, `http://` or `https://`) when linking to external domains. + + +The **Target** determines where the URL opens in the browser. + +- `Blank` — Opens the link in a new tab or window, depending on browser settings. + **Note:** If the Event is not triggered by a user interaction (for example, via a Listener), the browser may block it as a popup. +- `Parent` — Opens in the parent browsing context. If no parent exists, behaves like `Self`. +- `Self` — Opens in the current browsing context. +- `Top` — Opens in the topmost browsing context. If no ancestor exists, behaves like `Self`. + + + For security reasons, URLs are not opened by default in embeds or Marketplace posts. This behavior may change in the future. + + +### Properties (Deprecated) + +Properties allow an Event to carry additional data to the runtime. + +This feature is deprecated and has been replaced by [Data Binding](/editor/data-binding). diff --git a/editor/events/overview.mdx b/editor/events/overview.mdx index 04364676..32954cac 100644 --- a/editor/events/overview.mdx +++ b/editor/events/overview.mdx @@ -1,109 +1,71 @@ --- title: 'Events Overview' sidebarTitle: 'Overview' -description: "⚠️ DEPRECATED: Use Data Binding instead of Events" +description: "Creating and signaling Rive Events" --- import { YouTube } from "/snippets/youtube.mdx"; - - **DEPRECATION NOTICE:** This entire page documents the legacy Events system. - **For new projects:** Use [Data Binding](/runtimes/data-binding) instead. - **For existing projects:** Plan to migrate from Events to Data Binding as soon - as possible. **This content is provided for legacy support only.** - +Events live within an artboard and are used to signal that something has happened. They can be fired from timelines, states, transitions, or listeners. +Rive supports three types of events: - - -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. +- [Open URL Event](/editor/events/open-url-events) — Opens a URL at runtime +- [Audio Event](/editor/events/audio-events) — Plays a sound +- [General Event (deprecated)](/editor/events/general-events) — Previously used to communicate with runtime code ## 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](https://ucarecdn.com/4ed6c563-4c59-42c8-b40c-f502d5a8e1a4/) - -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](/images/editor/events/45fd9a33-3b9f-4e29-bc82-c0a8dca96abd.webp) - -### 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](https://ucarecdn.com/4558fb61-4649-4210-9ec6-c828c48ab2b2/) - -You can also rename the Event directly on the artboard. - -### Type + + + Use the Events tool located in the toolbar and click anywhere on the artboard. -The Type dropdown allows you to change the Event type between General and URL. + ![Adding a new event](https://ucarecdn.com/4ed6c563-4c59-42c8-b40c-f502d5a8e1a4/) -![Image](https://ucarecdn.com/9621c007-de2e-428c-95d7-837615a37caa/) + You'll notice that the event is displayed on the artboard and in the Hierarchy. + + + Give your event a name so it’s easy to identify and reference. -### Properties + You can rename it using the **Name** field, or by double-clicking the name directly on the artboard. -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. + ![Renaming an event](https://ucarecdn.com/4558fb61-4649-4210-9ec6-c828c48ab2b2/) + + + The Type dropdown allows you to change the event type between Audio, URL, and General. -To add a new property, hit the plus button next to the Properties. + ![Image](https://ucarecdn.com/9621c007-de2e-428c-95d7-837615a37caa/) + + + Each event type has its own set of properties. -![Add New Property](https://ucarecdn.com/d4cd3b8f-3765-4c28-9204-e5daf7fff0d8/) + For more information on the specific event types, see [Open URL Events](/editor/events/open-url-events), [Audio Events](/editor/events/audio-events), and [General Events (deprecated)](/editor/events/general-events). + + -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](https://ucarecdn.com/73d05fb1-7c9c-4c9c-a17c-51781ef30d0e/) - -### URL - -When an `Open URL` Event is selected, we have additional configuration options. - -Properties for Open URL Event - -![Image](https://1159711764-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3EXlibk6bj2FzPQW-9%2Fuploads%2FrDR98sXAUkNZXqBbv0sy%2FCleanShot%202023-09-18%20at%2013.06.14%402x.png?alt=media&token=0c681b87-2667-48d3-aa24-3b550732032e) - -In the text box, we will add the URL that we want our component to take us. - -Make sure to include the URL Protocol (i.e. "http://" or "https://") if you want to link to a new domain. - -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`. - -At this time, by default, Rive will not open URLs when this type of event is reported in embed URLs or Marketplace posts due to security considerations. However, this may change in the future ## Signaling an Event -We can signal an event in three ways: via the timeline, on a state, or on a transition. +We can signal an event in four ways: from a timeline, a listener, a state, or 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. +Signaling an event from the timeline lets you control the exact moment in an animation when the event fires. -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. +First, select the timeline you want to add the event to. Then use the **Report Event** button in the Inspector. ![Keying an Event on the timeline](https://ucarecdn.com/bd8d36f9-9cd1-4eec-9c37-85d4a0a19643/) -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. +You can report an event on a transition or a state. To report an event, select the desired state or transition and use the `+` button next to the Events section in the Inspector. + -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](https://ucarecdn.com/d1a63666-0cce-408f-9364-826eed66b241/) -![Signaling an Event via State or Transition](https://ucarecdn.com/d1a63666-0cce-408f-9364-826eed66b241/) +Now that we've selected the event, we can decide whether it is signaled at the start or end of the transition or state. -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. +### Listeners -## Events at Runtime +With your [Listener](/editor/state-machine/listeners) selected, click the `+` below the State Machine Graph, and select **Report Event**. -Listening for events at runtime is deprecated. Use [Data Binding](/editor/data-binding) instead. \ No newline at end of file +![Trigger an event with a listener](/images/editor/events/trigger-events-with-listeners.gif) diff --git a/editor/state-machine/inputs.mdx b/editor/state-machine/inputs.mdx index b64a0e28..3e73eec9 100644 --- a/editor/state-machine/inputs.mdx +++ b/editor/state-machine/inputs.mdx @@ -1,6 +1,7 @@ --- title: "Inputs" description: "⚠️ DEPRECATED: Use Data Binding instead of Inputs for controlling Rive graphics" +noindex: true --- import { YouTube } from "/snippets/youtube.mdx"; diff --git a/images/editor/events/trigger-events-with-listeners.gif b/images/editor/events/trigger-events-with-listeners.gif new file mode 100644 index 00000000..97aeeb1c Binary files /dev/null and b/images/editor/events/trigger-events-with-listeners.gif differ