Create the Most AMAZING Animations with Rive - Crash Course
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- rive.app - Join Rive Today for FREE. Create & ship interactive animations to any platform.
I have to say, I'm thoroughly impressed with Rive. You're able to create designs within Rive, "rig them up" with bones, and create logic-based animation sequences for any platform. I've never seen a more robust animation platform in my life!
In this video, I'm going to outline the basics of Rive, and we'll create a rocket ship animation from scratch.
You can check it out here:
rive.app/community/1244-2396-...
(Click the "Trigger 2" button on the right multiple times to see the different state animations)
Check out other awesome Rive projects that the community has created:
rive.app/community/
0:00 - Introduction
1:57 - Interface Overview
3:19 - Design Basics
8:32 - Design Timelapse
8:48 - Finishing the Design
11:49 - Creating the Animations
25:30 - The State Machine
30:21 - Project Export Options
31:10 - A Challenge
31:45 - Outro
Let's get started!
#rive #animations #anyplatform
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! - แนวปฏิบัติและการใช้ชีวิต
Do you want to see more Rive tutorials?
Yes
Absolutely
sure sure
yes
yyyyyyyyyyyyyyes
This is cool. Always loved Rive
this is one of the cooler channels i've found, thanks
I will surely use this stuff soon! Again thank you for another great tutorial
Thanks Gary! Going to watch the code implementation now
I'm glad this exists, I look forward to the return of Homestar Runner!
25:24 just had a thought, you could set a parent shape to be a circle or something so you could animate the ship but rotate the parent to get the smooth angled animation on the ship.
We all really appreciate your videos! Thank you!
Thanks, Gary, love the elevator music!
Awesome shirt Gary!
Awesome thanks for this tutorial 🙏
Awesome tool thanks for sharing 😀
A moment to appreciate the slick hair from our favorite design/coding host!
For today and today only, he is Duff McKagan 🎸🔥
This tool is freeeekin siiiiccckkkk! Go create!
Thank you so much for sharing this tool! Wow, it looks amazing!
It's supercool, next level animation,................. love it.
Thank you for this amazing video
The hair! The shirt! Oh man, you're rocking it!
Quite rad animations....love it.
Some of the projects people've created in the community are awesome.
Great tutorial
Wow the thumbnail is great :)
Really need those animations for web designs
Youre the goat thank you for this
I wonder if there's any retrowave stuff I can use with your 80's theme design. Might be fun to make a full on retrowave app.
Thanks!
@rive im actually glad u sponsored someone bc i feel like the are no tutorials for this and im a programmer... idk how to stuff like this
i know this Rive since they had a name Flare for Flutter before then.
Awesome video as always. I had a question about the design course, is it free?
Rive seems kinda like a modern-day version of Flash.
We have come full circle
Wait so you have the animation made. What is the output? Do you just embed it?
@@whatthefunction9140 I would think so
Flash is still on as Adobe Animate
Went to say the same, looks like the new Flash
7:13 For mac users, duplicate is Command-D.
The TVs in the background in your studio look like my grandma and grandpa used to have in late 80s when I walked under the table
Thanks 👍
sooooo coooll....!!!!😘😘😘
Is the windows app better or designing in browser?
Plus can I import AE animations into the state machine?
I kinda found AFTER EFFECTS alternative 🎉🎉 😂😂 🎉🎉 🔥🔥
2 different purposes really. After Effects is great for video (though, the lottie plugin allows you to do similar stuff here).
@@DesignCourse true 😀
Grate video sir..
Please, can you create a full animation course video with a professional tool
I was waiting;
What us up every body gery simon here
I found the Rive very before but that we can not use for web
BUT now we can use on web also -> from today every project of mine will have rive animation init
So what was the most amazing animation in this one regarding your title?
can you implement this in a vue project?
Cool, but can't export as lottie or convert so unsless with Webflow :( Do you know if there will be an option to get it convert to lottie anytime in the future? I would really love to design animation in it, since it's an easier interface than AE!
You can export your animations for use on web already with their run times. I will do a tutorial on it in the near future.
You can copy the code of the animation and put it in an embed in webflow.
I love your hair. You look like a Greek god.
👍👍👍
ОТЛИЧНО!
The State machine system Is basically the same as in Unreal Engine
how do i fix last flame setting plz tell me ??
23:18 was just wondering if the flame should have been a child in the rocket 🚀
What’s the device on top of the Marshall speaker?😍
A Kemper Profiler. Absolutely love it.
The Ae killer
it looks like a fish!😃
Too many cool tools I can't learn them all. My brain is full 😫 🧠
👍👍👍👍
spaceX dropped their license after watching it.
nice animation btw 😀
If I send a .riv file to a developer, can they figure out on their own the Inputs/Listeners/StateMachines in the code?
the webcam head thing is annoying and covering the bottom part of the UI when you are in the animation module
Somebody please bring back homestar runner with this now that flash is dead!
is the free version of rive enough ??
New to your channel.I just signed up for rive free account.Not sure how to use the program
nice hairstyle
Did you have a serious fight with the barber? 🤣🤣🤣🤣🤣🤣🤣🤣
I didn't have a fight with a barber. I didn't even have a conversation with a barber, or walk into a barber shop at all. ;)
thanks, I am off to create some rule 34 animations now :-D
It is pity rive isn’t adaptive for ipad. Zoom and some other actions dont work correctly
More web development please
Thank you sir! QQ why should I switch from Adobe Animate to Rive ? Animate is way more robust?
What's the point of the interactivity? Is it something that can be integrated in apps like Animate does with html5?
Would be cool if you could expand more on the implementation side
well he got sloppy since the channel came crashing down on views
better than framer and protopie???
I need a gif export support.
Is size large?
For production
put a shape background on your video. I don't feel comfortable looking at a floating head. Anyhow,good stuff
I used rive 1year ago.. now many improvements are there🤩 but, they are not offering mp4 or gif file format to download it's only for coders!!!
We have mp4 and png sequence exporting!
Go look at the current GIT documentation -- it's very easy to figure out.
Good tutorial. But please just move your head out of the way or do a voice only when animating 😂 can't see the important panels when you click
ahah nice shirt
Looks like the HTML5 version of Flash.
First op
Faster than designCourse 🤣🤣
Is it svg ?
Tumult Hype will suffer from that app...
Swear to me, do you Marvel in your skills?
Are you the thumbs up kid?
👎 no??
I constantly forget that Gary is hot.
Not very useful if you can't export it into a format for display on the web.
help.rive.app/editor/exporting
Lol, everybody wanted flash gone, now we have a new flash but its called rive. How long until websites will become a hellhole filled with animations everybody wants to skip.. because marketing ppl will be marketing ppl and spam you into oblivion…
Uhm because Flash created security issues? It had NOTHING to do with animations. 😂
Also, animations can be used to increase the average ux in various ways. Animations can have a purpose they aren't just for looks, lol.... At least in professional web development.
@@chrisea make an interactive design tool simple enough, and marketing people will feel like they are pros, and the web is inundated with animations from hell.
apple wanted flash dead bc of the danger it posed to their appstore business model, so they went on with the security issues that were real, but not the main cause. The web wanted to get rid of flash because of the super annoying animations on the web , because users were at the mercy of whoever designed that flash intro, the industry wanted to get rid of flash bc it never ran well on mobile and finally, the HTML5 crowd wanted it gone bc it was a thing of the past and it was proprietary. So yeah, this smells like "lets get back to flash"@@chrisea