08. Rive Interactivity Exercise (optional)

Introduction

This exercise is here in case you are, for whatever reason, unable to work on your Transformation Project. The point here is to become familiar with Rive's methods for interactivity.

This assumes that you have familiarity with:

designing + importing assets
using a timeline /creating keyframes
adding interpolation to those keyframes

If you are not, and you are unable to ask me or find out yourself, or from a classmate you can look here:

Assets →

Timelines →

Interpolation →

What to Do

(I will show you how to do these things)

With an asset that changes state in some way (this might be a path or shape you draw in Rive, or assets from someone's project) do the following:

Import and Design

In the Rive Workspace for class, there is a project called "Exercise 08.Rive Interactivity", create a new file there.
Import your assets, frames, in the Design mode.

Create your Timelines

Create the timeline of that asset changing (becoming bigger, changing color, etc.) in the Animation mode.
Create another timeline with only the initial frames of that animation (i.e. if it turns from blue to red, copy just the blue keyframe)
Create a third timeline with the object transforming back to its original state

Create your State Machine

In your state machine, place these three timelines.
Connect the static timeline (only initial frames), to the "transformation" timeline, and then connect the "transformation" timeline to the "reversion" timeline, and the reversion timeline back to the "static" timeline.
"Unfurl" the state machine to show inputs and listeners.
Create a "Boolean" input. Give it a name that relates to your desired interaction method ("hover", "click", etc.)
Select the connection between your static and transforming state (>) and press the (+) sign in the lower right of that panel in order to make this transition happen when your Boolean input is true.
Press play with the state machine selected. Test this with the checkbox next to your Boolean input, you should see the state machine as well as the animation trigger.
Now add a "listener" for condition of the object you want to trigger. This is also under the "unfurled" state machine.
In the right side of the screen, you will see an option to set the "target" for your action (it looks like a cross hair). Either in the artboard or in the hierachy, select your object. (Note that if you used a raster image, you need to create a trasnparent rectangle as a "hitbox" for your chosen action, rather than the image itself)
Again, in the right panel, set your desired action (click, pointer enter, etc.)
In the middle area with the state machine it should say "fire" and use this to make your Boolean true.
When you play your state machine it should be triggered by your action.
Now, do the same connecting your "Transforming" timeline, to your "Reverting" timeline, except make it the transition (>) work when your Boolean is False. Note that you may have to add a new listener here, depending on your action.
The other thing you may have to do is make sure your transitions can resolve properly (I will show you the panel to change for this.)

Homework

(This is an optional exercise for extra credit or if you are unable to work on your project for some reason)