Rive 101 - Interface

Summary

This video provides an in-depth guide on getting started with Rive, a powerful design and animation tool. It walks through the basics of creating and manipulating artboards, zooming in and out, and moving layers. Key features such as the assets panel, data panel, and hierarchy panel are introduced, along with tools for design, animation, and state machine management. The video also covers how to export files, collaborate with a team, and create animations using keyframes and timeline controls, offering a comprehensive introduction for both new users and those looking to enhance their workflow.

Takeaways

• 😀 **Creating a New Artboard**: Start with a default 500x500px artboard, or choose from predefined sizes for different devices.
• 😀 **Zoom and Navigation**: Zoom in/out with the trackpad by pinching or using keyboard shortcuts `+` and `-`. Move the artboard with a two-finger drag or by holding space and dragging.
• 😀 **Finding the Artboard**: If you move the artboard too far, tap `F` to quickly locate it again.
• 😀 **Panels Overview**: The **Hierarchy Panel** displays layers, the **Assets Panel** handles external file imports, and the **Data Panel** controls state machines.
• 😀 **Artboard Properties**: Adjust the position, size, and background color of the artboard by selecting it and editing properties in the right panel.
• 😀 **Transform Tools**: Use the top panel tools to adjust layers' position, scale, and rotation. Hold `Shift` while resizing shapes to maintain proportions.
• 😀 **Snapping and Alignment**: Objects snap into place by default. Hold `Command` to temporarily disable snapping or turn it off in the settings. Use the alignment tools to center objects.
• 😀 **Design vs Animate Mode**: In **Design Mode**, changes don’t create keyframes. Switch to **Animate Mode** to create keyframes and animate objects over time.
• 😀 **Keyframe Animation**: Set keyframes at specific points on the timeline for properties like position. Interpolation between keyframes creates smooth animations.
• 😀 **Exporting Options**: Export files in different formats: `.tri` for developers, `.RIV` for designers, or generate a shareable link. Publish to the marketplace to share your work with the community.

Q & A

What is the first step when starting a new project in Rive?

The first step is to create a new artboard. You can select the artboard's size from a list of device options or use the default size of 500px by 500px.

How can you zoom in and out on the artboard?

You can zoom in and out by pinching on a trackpad or by using the zoom options in the top panel. The shortcuts '+' and '-' also work for zooming.

What shortcut helps you find the artboard if you lose track of it?

Press the 'F' key to find your artboard if it gets moved too far away.

What does the hierarchy panel display?

The hierarchy panel shows all the elements in your file. At the start, it shows only the artboard, but as you add layers, they will be listed here.

What is the purpose of the assets panel in Rive?

The assets panel is where you can import external files, such as images, audio, and fonts, which can be used in your Rive project.

What is 'freeze' mode, and how does it work?

Freeze mode allows you to adjust the origin point of a layer, which is crucial when rotating or scaling it. You enter freeze mode by pressing 'Y' and can move the origin point before exiting freeze mode by pressing 'Y' again.

How do you create a new shape in Rive?

To create a new shape, you can use the shape tools, like the circle tool. Simply click and drag, holding down the 'Shift' key to maintain equal proportions.

How can you disable snapping while moving layers?

You can disable snapping by holding the 'Command' key while moving the layer, or by turning off snapping from the top panel.

What is the difference between Design mode and Animate mode in Rive?

In Design mode, changes to properties like position or color don't create keyframes. In Animate mode, you can create keyframes and animate properties over time using the timeline.

What does the export option 'Generate share link' do?

'Generate share link' allows others to interact with your Rive file directly in the browser, without needing to open it in the Rive editor.