[ELECTRONIC MUSIC PLAYING] GUIDO ROSSO: Hello. Hey, everybody. Thanks for coming to our talk. We are Rive. And for those of you who
might be a little confused by the name, we
recently announced that we consolidated our old
company name, 2Dimensions, with our old
product name, Flare. So our product and our company
are both now called Rive. We're going to talk to you about
how to use Rive with Flutter to create interactive
and animated experiences. And who are we? So I'm Guido. This is Luigi. Yeah, say hi, Luigi. In case you can't
tell, we are twins. And we've been working together
for pretty much 20 years, now. We started working in
high school together. And Luigi's always done the
engineering side of things, and I've done the
design side of things. And we're just
complementary like that. And that is why we think
we're the right people today to talk to you about how to
create interactive animations for Flutter. So what about Rive? So Rive is our tool. It's a design tool that allows
you to design and animate, and it allows you to
create real assets that are ready to be
implemented immediately into any of our supported
platforms-- which, of course, we're talking about
Flutter here today. And Rive is composed
of two parts. So the first part is the editor. And it's online. It's collaborative. It allows you to design,
and animate, and create all your work in
this single tool. You can also import
from other tools. So we have the ability
to import SVGs. We recently announced that you
can now import Lottie files. We worked with the creator of
the Bodymovin platform, Hernan Torrisi. He helped us build the importer. So now, you can import
After Effects files directly into Rive. If you have legacy formats
or a bunch of other files that you don't want to
start directly in Rive, you might need to
import some other stuff. And the other part to our
platform is the run times. Now, the run times
are what allow you to load your file into
any of our supported platforms and manipulate
anything in real time. These are open source,
and we encourage everybody to contribute to them. So we are going to switch over
to the computer real quick. And we're going to show
you one of the demos that we built earlier this year,
which had a lot of interest. And Luigi's going to
walk you through it. LUIGI ROSSO: So this is Teddy. Teddy is a character
which our animator, JC, who's actually
out in the crowd-- actually, he's
right here in front if you have questions later-- GUIDO ROSSO: In the front here. LUIGI ROSSO: --created this
really cute, cuddly, fuzzy bear who, as you can see, is
sitting there, animating, hiding behind the login form. But what you'll note is
that his eyes are moving. His body's bobbing up and down. He has an idle
animation playing. But what's
interesting about Rive is that we have the
ability to manipulate these animations at runtime. So we can mix other
animations on top of them. And we can also move parts
of the hierarchy dynamically. So if I click on this
email field here, you'll see that his
eyes moved over. And if I start typing
my email address, you'll see that he
actually follows along, even if I type something
all the way over here. GUIDO ROSSO: And this is
a Flutter app, by the way. So that's a Flutter input field
that Luigi is manipulating. LUIGI ROSSO: Yep. And then, if I go over
to the password field, you'll see that he
covers his eyes. He's not going to watch. If I type the
wrong password in-- I don't know, let's do "rats"-- he's going to be very upset. And then, if I change
it to the right one-- which is, of course, "bears"-- he'll be very happy. And so what you can see is
that what's happening here is that we're manipulating a
lot of the hierarchy via code. One of the things that we
heard a lot from people after we gave this out
was, how did you do that? So there's a blog
post that we actually published that shows
exactly how this all comes together and works. And we also exported
these widgets-- we published these widgets
as reusable components. So you can add your own
characters into your own apps. And we'll actually show
you a little bit more of that in a bit. GUIDO ROSSO: Yeah. By the way, we should
mention that we were inspired by
other people who've done this login form before. There's an HTML variation
of this that uses a Yeti. There is another
Bear app that uses-- I think it's a password app
that has a bear as a login. We wanted to show
you this particularly because ours is a
little different, because it actually allows
you to blend these animation states from one to another. So you'll notice that
when Teddy starts looking, or when he animates
to cover his eyes, it's actually blending
between different animations. It's not just popping
to that animation. And that's something
that's special about Rive. LUIGI ROSSO: Yeah. He smoothly moves his gaze over. He smoothly pops to
covering his eyes. He also will actually
track the cursor while he's still blinking. GUIDO ROSSO: So
Luigi's described that. We got a lot of interest. We wrote a blog post about
how to do this with Flutter. And that's all fine and good. But what if you're
a designer, and you want to learn how to use
Rive to create something like this yourself? So we heard from
a lot of designers that when they opened
it up, even developers-- they want to try Rive--
they'll open it up. And they'll get this
fear of empty canvas. There's just this empty
canvas with all these tools, and they're like, I just
don't know how to start. I need help. So we actually asked our
artist if he could film himself while he was creating the bear. And the full video is two and
a half hours-- maybe three-- so we're not going to play
that full thing for you now, obviously. But we do have a
quick speed-through. You can get a sense for it. And let's go ahead
and play it now. And when it starts
here, you can see that he starts with a basic-- well, this is the
finished animation. But he starts with a concept,
like those sketches over to the sides. And then, he actually
created everything in Rive. He built the shapes
using the pen tool, and some other basic
shapes that we have. He created all the colors. He did gradients, and all that. And then, he's
rigging it with bones. And when you're not
watching it at super speed, and you're watching
it at a normal speed, it's a really helpful
tool to understand a lot of the techniques and the
real, fine technical details, like how do you
use the pen tool, or how do you convert a hard
edge into a curved edge? How do you use bones and
connect things to bones? Those are all fine and
good, and it's helpful. But a video like
this doesn't really teach you what we
think is the harder part of doing this design
work, and that's the concept. So how do you actually
know where to start? And that's some of
the stuff that we want to tackle in our talk today. And to make things a
little more interesting, we're actually
going to introduce a new character, which is Guss. So meet Guss. And we're going to switch
over to the computer, and Luigi will show you how
Guss is all rigged up in Rive. LUIGI ROSSO: So this is Guss. He's a very lovable goose. And you'll notice that he has a
completely different hierarchy. We didn't show you
all Teddy, but we have the link in that blog post. And all of these are open,
so you can go check them out. But he has a completely
different hierarchy from Teddy. He's got a different
body, a different neck, different components. But you'll notice that
one of the things that is common between
those two animations is that they both
have this look node. So as long as your
character's rigged up so that you can move his
gaze with this one look node, everything will work from
the code perspective. So what we do here, as you can
see-- we'll move this around, and he's rigged
really effectively so that he follows this around. Even if I go down, he looks
at it in a different way. If I go to the left or
right, or if I point it up, he does as best he
can to follow what that thing is trying to do. And you'll notice that
his neck is also bending. There is one feature we have
that's called "jelly bones" that this is using. GUIDO ROSSO: And you
can start to notice why Rive is special, right? This is all running at
60 frames per second. It's all interactive. It's all in real time. Nothing is pre-rendering here. This is the actual asset that's
going to run in your code. And it allows you to do
stuff like this, like check that everything is
properly rigged up. And actually, if we switch
over to animate mode, we can also take a look
at the animations here. And the key thing here
is that our animations are named the same as Teddy. So when we swap out
this asset later, it'll all work, because the
animations have the same name. One animation that's interesting
that you should probably show, Luigi, is the idle animation. LUIGI ROSSO: Sure. GUIDO ROSSO: You
want to go to that? You can see that Guss moves up
and down, like he's breathing. But he's also moving a little. He's swaying his
hips left and right. And we'll talk a
little bit about that. But that adds a
lot of personality and a lot of character
that we wanted to think about when we
were doing this concept. So the last thing we'll
show you on this part is that if you pause that
animation real quick, Luigi, and then you play the-- there's one called "look
test," or something like that. So in this animation, we're
basically just animating that target node that
Luigi showed you, and we're just simulating what
it might look like in Flutter-- or in any of our
run times-- what it's going to look like
when someone's moving that look node. And the thing that's
interesting to show here is that while we're
playing this animation, we can start
blending on top of it the idle animation, or
any of those animations. And you'll notice that we can
see that our idle animation is still working properly. None of our key frames are
conflicting, or creating some kind of problem. And that, again,
is pretty special, and something that you
can't do in other software or other animation
programs that are not made for interactive
real-time content like this. So let's switch over
back to the slides, and let's talk a little
bit about the concepts that we want to cover here. So when we design characters
or assets like this, we start with a sketch
or a mood board. We try to get inspiration
from a Google Images search. And then we start sketching
out the style that we want. Do we want it to
be a little more abstract, like to
the right there, or a little more realistic,
like to the left? And we play around with colors. And once we get
some of the concepts down-- like in that
upper right there, we really knew that
the neck was something we wanted to focus on,
because that's going to be how he's going to move his gaze. So really start
thinking about what is the stuff you're going to
be working on before you start actually building anything. And then, in the next phase, we
actually switch over to Rive, and we design all of
these parts in Rive. And you can see to the left
that the final effect is really convincing, and
Guss is super cute. And it just works really well. But if you look over
to the other side, you'll notice that these
are all really basic, really flat shapes. There's nothing really
crazy special going on here. If you were to try to recreate
any of those on your own using the pen tool-- you go and
watch how JC used the pen tool in that video that we
showed you earlier-- you can pretty easily recreate
any of these individual shapes on your own. Then we start thinking
about the rig. And we don't have
enough time here to cover everything
about rigging, but I promise it's not
as complex as it looks. The important thing
to think about is that you need to think,
before you start rigging, what you're actually going
to be doing in your app. So for example,
if we knew that we wanted to have Guss run
across the bottom of the app, and pick up the button with
his mouth, and run off with it, we would be building a
completely different rig from this. Instead, we know that we want
Guss to be looking at the input field, at the password. He's going to have
to cover his eyes. So we know that
we're going to have to do a little bit of work on
those arms, and a lot of work on the neck and on the face. And speaking of
the face, the beak is the part that we think
really sells this 3D effect. That's really what makes
all these flat images come together and look like
it's almost a 3D model. And you'll be surprised
how actually simple the concept is here
that sells that effect. There's only two images. There's the front of the beak
and the back of the beak. And on the left side there, you
can see that white highlight around the front beak. And when the two are layered
in front of each other, it doesn't look
anything special. It's not until you see
it in motion that you start seeing how 3D looks. And what's going on is
that target node we have-- there's two
translation constraints connected to the images. And the front image is
moving just a little bit more than the back image is
moving when that translation constraint is moving. So that's a really
simple parallax concept, which allows the front image to
move more than the back image. But then, on top of it,
we've got that pivot point at the very top of
his beak, up there, And that's where the front
beak is rotating from. So as that
translation constraint moves, not only is that front
image moving a little bit faster, or a little bit more. It's also rotating from
that top pivot point. And that's all it takes to
create that really convincing 3D effect. So ultimately, we
go into animation. And before we actually start
laying down key frames, we really encourage
you to think about what you want your animation to do. So when we're
sketching animations, we call it blocking out poses. So these are the key poses,
and they're our block poses. And if you start just
laying down key frames, you're going to end up getting
something potentially random-- which could be cool,
if you're trying to create something abstract. But in this case, we know that
we're creating a character. And we know that, for example,
with the idle animation, we want him to move
up on the first pose. Second pose, he's
going to move down. The next pose is
going to move back up. And then, back down--
and loop the whole thing. But we also know that
we wanted to create that waddle,
goose-like personality. And so we know that we're
going to make his hips rotate a little bit when he comes
back down in one direction, and then rotate in
the other direction before that loop ends. And these are all
simple concepts that you think about
when you're actually sketching, and concepting,
and blocking out these poses. We did the same thing here
for a covering of the eyes and uncovering of the eyes. We've got little
details, like we want him to actually close his
eyes when those hands come up, and-- LUIGI ROSSO: Wings. GUIDO ROSSO: His arms--
wings, thank you-- come up and cover his eyes. And then, we want them to open
up when he removes his wings. But we want it to
be a little delayed so that it's got
some personality, and you can see
that he had his eyes closed when the wings were up. So I'm just going to
move through these, but you can see what the other
poses that we blocked out here looked like for when he
gets mad, when he's happy, and-- why don't we switch
over to the computer and actually show you what
this looks like when we put it all together in Flutter? LUIGI ROSSO: Yeah. So the first thing to do is
simply, after exporting it, just swap the file. So we have this
already exported. I just renamed the asset from
the Teddy one to the Guss one. I'm going to save it. I'm going to do a hot
restart, since the asset just got dropped in there. GUIDO ROSSO: So if
that wasn't clear, Luigi already has this
exported, and it's already in his assets folder. LUIGI ROSSO: I did. That's true. And there, we're done-- perfect. Guss is in there. He looks great. GUIDO ROSSO: Well, yeah, OK. Guss is in there, but you
can't even see his face. I think we can do
better than this. I guess I could go in Rive
and resize him and everything. But there's got to be a better
way to do this in Flutter. LUIGI ROSSO: So one
of the nice things that we exposed are just
all these classic Flutter alignment and fit constraints. So what we're going to do is
just change this to contain. And that way, we'll get
Guss in all his glory, with the face in there. Ta-dah. GUIDO ROSSO: Yeah, OK. It's better. But you still can't
really see him super-- I mean, Guss has
a big personality. Let's get him a little bigger. LUIGI ROSSO: All right. All right. Let me think. GUIDO ROSSO: Can
we maybe align-- LUIGI ROSSO: Let's
go back to cover, and let's align him top-center. How about that? GUIDO ROSSO: Oh, wow. That's actually really good. Can you hide the keyboard? LUIGI ROSSO: Sure. Here you go. GUIDO ROSSO: All right. Yeah, OK. He looks pretty good. Try typing something. LUIGI ROSSO: All right. He's not really
looking that much, huh? So the reason why that
is, is that because these are different character files,
and because the distances and the dimensions at which JC
animated this or designed this can vary, we may need to project
Guss's gaze a little further. So why don't we do that? Why don't we expose
the parameter for this? Again, this is one of those
components that we open source. So we made it a
little bit abstracted, so it's a little easy to use
these different parameters to make things a
little more tweakable. GUIDO ROSSO: You can also use
it with your own characters easily. You can just-- LUIGI ROSSO: Yeah. GUIDO ROSSO: --go in and
swap these properties. LUIGI ROSSO: So there you go. Now, he's really going. All right. It looks great. And it works on both sides. And you can see that
simple 3D effect-- how it's really shining here. And let's see if his wings work. Looks like they do. Oh, he's peeking. GUIDO ROSSO: Oh, yeah. LUIGI ROSSO: He's a little
bit of a cheater, but OK. Let's see if he's
still-- yeah, actually, our closed eyes animation
isn't working right. We've got to fix that. He gets really mad. But he also likes bears, so-- yay. He's happy. GUIDO ROSSO: All right. Well, I think that's it, right? We're not going to do
anything else, are we? LUIGI ROSSO: With Guss? No. Well, you know what? There has been this
whole cyber madness-- cyber vehicles or
something-- that people have been really clamoring over. And I think that-- marketing requested
that I make this ask, is that maybe we try to
ride that wave a bit. GUIDO ROSSO: OK. So first of all, we don't
have a marketing department. But I think I understand
what Luigi is asking here. LUIGI ROSSO: You
want to take over? You want to-- GUIDO ROSSO: Yeah. We recently announced
some new features. Actually, we just
announced them today. And we-- LUIGI ROSSO: The blog post might
have gone out five minutes-- GUIDO ROSSO: Yeah. The blog post, if the
schedule is working, might have just gone out. And they're actually our
most requested features on our public roadmap. And they are drop shadows,
inner shadows, glows, blurs, and real image masking. And we're going to show
you a little bit about how those work here. So fortunately, our artist
already gave us a concept image here as inspiration, which
I'm going to just turn on. And there we go. [LAUGHTER] So that's Cyber Guss. We're done. [APPLAUSE] LUIGI ROSSO: Now, actually-- thank you. But actually, he just
gave us a flat image. So we can't rig this up, and
I don't think we have time-- GUIDO ROSSO: He
did half the job. LUIGI ROSSO: Yeah. We don't have time to do
all that here, anyway. But we are going to show
you some of those effects, and how they work, here,
onstage, in real time. So here we go. I'm going to select
Guss's eye, here. And I'm actually
going to select a-- GUIDO ROSSO: Luigi's scroll
is backwards on his MacBook. There we go. LUIGI ROSSO: I'm going
to select a node that contains all of the eyes. And I'm going to go
over to our new effects over here in the inspector. I'm going to hit
the plus button. And I'm going to
add a drop shadow. And the shadow's
kind of big now, which is why it's
not showing up. So let's make it
smaller-- maybe a three? And let's make it red, so that
it looks more like a glow. OK. Let's add an inner shadow
and also make it red. Ooh. He's total terminator now. Maybe bring it down to four? OK. All right. This doesn't look
as good as JC's-- our artist-- his image
looked, but close enough. One thing I want to
point out, though, is that we have this on this top
level node, which is actually called-- a solo node is the
type of node that we used here. And all that is is that it's
got a radio button here. And it allows us
to quickly change from different types of eyes,
or different types of anything. In this case, we're
using it for an eye. But you could use it to swap
out a whole different part of your hierarchy. So in this case, I'm
going to just switch it to the angry eye. And that didn't work,
for some reason. Oh, I see. I actually applied the
effect to the wrong node. I only applied it there. All right. Well, if I would have
applied it to the top, here-- GUIDO ROSSO: Come on,
some real-time designing. LUIGI ROSSO: All
right, all right. Let's just try a blur, to try
something a little different. That's too strong. All right. So that's blurred out. And now, if we enable
the eye, you'll see that that eye
is blurred, too. So it's actually applying the
effect to anything below it in the hierarchy here. So speaking of blurs
and other effects, one of the really cool
effects that we recently added is this real masking. So you may have seen
clipping before. And that's something
that's pretty easy to do with vector assets. So I'm going to hit the O
shortcut-- that's actually just up here-- to create an ellipse. And I'm going to draw a circle. And if I just make this-- let's hide the stroke on it. And let's give it
a radial gradient. So if I make this
a mask for Guss-- so I'm going to select
the topmost node, here, that holds Guss. And I'm going to add a mask. I'm going to select this
circle that we just made. And we have pretty much your
typical clipping path, now. This is what we had before. So if I move this image
around, or this shape around, it's clipping Guss. But if I change the mask type-- I've got to go back to the
group that has the mask on it-- and if I select this here, and
I change the mask operation from alpha to luminous,
now it's actually fading out Guss in relation
to the image's luminance-- so going from white,
where it's visible, and black, where it's invisible. And if I hide this
shape here, you'll notice that the effect
is more visible. And the cool thing
about this is that you can animate it and create some
really complex effects with it. Not only that, but we can also,
if we select the top level node here, start adding
more effects on top of it. So I could add a
drop shadow here, and we can offset it
a little to the side. I can also add an inner
shadow on top of that. And maybe-- let's make this
white to create a lighting effect. GUIDO ROSSO: Why don't you
just blur the whole thing? LUIGI ROSSO: Yeah. And let's add a
blur to something that's completely crazy. All right. But now-- GUIDO ROSSO: I think you
should show the animation, too. LUIGI ROSSO: And the cool
thing about all this-- yeah-- is if I switch over
to animate mode-- and let's find an animation
that actually does something-- you'll notice that it's
still animating and applying all these effects in real time. And not only that, but if
I select this, and open up the properties, I can
key all of those effects. And all the properties
are animatable. So you end up being
able to create something pretty compelling--
and not what I just created. GUIDO ROSSO: Yeah. Why don't we show something
a little prettier, actually, that we did? LUIGI ROSSO: Right. Yeah, our artists have
fortunately created something not live onstage, where they
were able to make something with a little higher quality. So we've got this
bubble effect, which is actually part of
our logo animation that's on our website. If you go to rive.app, you'll
see the Rive logo animating. And you can see that he's got
some masks and inner shadows, outer drop shadows, and that's
creating this glow effect. We've also got this
basketball, which is pretty cool, where he's
using the blur effect to create a motion blur. So you can change the amount of
the blur in either x or y-axes. So if you just
blur one axis, you can actually get a really
convincing-looking motion blur. And because you can
apply it to any node, you can have the ball spinning
and rotating and doing all kinds of
things, but the blur is actually still facing in the
right direction of movement. So if I zoom out
here a little bit-- GUIDO ROSSO: You can
show the shadow, too. The shadow does the same thing. LUIGI ROSSO: And if
I play it, you'll see that it's creating a really
compelling and pretty realistic motion blur effect there. If I had the bones
you could probably see it a little better, too. And we've got one more
example that he made here, which is this space man. And you can see that he's got an
inner shadow on the whole node here containing the
spaceman, and that's creating this lighting effect on him. And let me hide the bones
so you can see it better. And we've got a bunch
of effects here. This planet has a blur on it. It's got some craters and stuff. I don't know if you can
super tell it from here, but there's just a lot of
effects layered on there. These are all public
files on Rive, and you can open them up,
play around with them, and see how this was
created, and figure out how to use these
effects on your own. And like we mentioned
earlier, they're some of our most
requested features. So we're really excited
to release these today. And we can't wait
to see what you're going to create with them. GUIDO ROSSO: And they're fully
supported in Flutter today, too. LUIGI ROSSO: Yes. They are available in Flutter,
in the Flutter runtime, and usable in your projects. GUIDO ROSSO: Just update to
package 1.81 and you're good. LUIGI ROSSO: All right. That's it. GUIDO ROSSO: Thank you. LUIGI ROSSO: That's our talk. Thank you. [APPLAUSE] [ELECTRONIC MUSIC PLAYING]
