Create the Most AMAZING Animations with Rive - Crash Course
HTML-код
- Опубликовано: 5 авг 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! 
Хобби
![NoCap - Maliboo [Official Music Video]](http://i.ytimg.com/vi/FUV7E0QyniU/mqdefault.jpg)
Do you want to see more Rive tutorials?
Yes
Absolutely
sure sure
yes
yyyyyyyyyyyyyyes
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
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.
This is cool. Always loved Rive
I'm glad this exists, I look forward to the return of Homestar Runner!
Thanks Gary! Going to watch the code implementation now
We all really appreciate your videos! Thank you!
Awesome thanks for this tutorial 🙏
Awesome tool thanks for sharing 😀
Thanks, Gary, love the elevator music!
Thank you so much for sharing this tool! Wow, it looks amazing!
A moment to appreciate the slick hair from our favorite design/coding host!
For today and today only, he is Duff McKagan 🎸🔥
The hair! The shirt! Oh man, you're rocking it!
Awesome shirt Gary!
It's supercool, next level animation,................. love it.
Thank you for this amazing video
This tool is freeeekin siiiiccckkkk! Go create!
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.
@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
Youre the goat thank you for this
Wow the thumbnail is great :)
Quite rad animations....love it.
Some of the projects people've created in the community are awesome.
Thanks!
Really need those animations for web designs
i know this Rive since they had a name Flare for Flutter before then.
Great tutorial
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
Awesome video as always. I had a question about the design course, is it free?
sooooo coooll....!!!!😘😘😘
Thanks 👍
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
Is the windows app better or designing in browser?
Plus can I import AE animations into the state machine?
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
Grate video sir..
Please, can you create a full animation course video with a professional tool
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.
how do i fix last flame setting plz tell me ??
can you implement this in a vue project?
I was waiting;
What us up every body gery simon here
Can we import svg in the project and animate it?
ОТЛИЧНО!
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 😀
So what was the most amazing animation in this one regarding your title?
👍👍👍
If I send a .riv file to a developer, can they figure out on their own the Inputs/Listeners/StateMachines in the code?
What’s the device on top of the Marshall speaker?😍
A Kemper Profiler. Absolutely love it.
it looks like a fish!😃
Too many cool tools I can't learn them all. My brain is full 😫 🧠
👍👍👍👍
7:13 For mac users, duplicate is Command-D.
23:18 was just wondering if the flame should have been a child in the rocket 🚀
The State machine system Is basically the same as in Unreal Engine
The Ae killer
spaceX dropped their license after watching it.
nice animation btw 😀
It is pity rive isn’t adaptive for ipad. Zoom and some other actions dont work correctly
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
the webcam head thing is annoying and covering the bottom part of the UI when you are in the animation module
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
New to your channel.I just signed up for rive free account.Not sure how to use the program
Thank you sir! QQ why should I switch from Adobe Animate to Rive ? Animate is way more robust?
nice hairstyle
thanks, I am off to create some rule 34 animations now :-D
is the free version of rive enough ??
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. ;)
put a shape background on your video. I don't feel comfortable looking at a floating head. Anyhow,good stuff
More web development please
Somebody please bring back homestar runner with this now that flash is dead!
I need a gif export support.
better than framer and protopie???
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.
Is size large?
For production
ahah nice shirt
First op
Faster than designCourse 🤣🤣
Tumult Hype will suffer from that app...
Looks like the HTML5 version of Flash.
Is it svg ?
Are you the thumbs up kid?
👎 no??
Swear to me, do you Marvel in your skills?
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