Тёмный

Create the Most AMAZING Animations with Rive - Crash Course 

DesignCourse
Подписаться 1,1 млн
Просмотров 162 тыс.
50% 1

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!

Хобби

Опубликовано:

 

19 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 138   
@DesignCourse
@DesignCourse 2 года назад
Do you want to see more Rive tutorials?
@theisoj
@theisoj 2 года назад
Yes
@captain_rum_n_pear
@captain_rum_n_pear 2 года назад
Absolutely
@franciscoguerreromorejon3981
@franciscoguerreromorejon3981 2 года назад
sure sure
@theMadZakuPilot
@theMadZakuPilot 2 года назад
yes
@user-jd6gh3kh1m
@user-jd6gh3kh1m 2 года назад
yyyyyyyyyyyyyyes
@HelloCodepur
@HelloCodepur 2 года назад
This is cool. Always loved Rive
@ryanchristiansacdalan7104
@ryanchristiansacdalan7104 2 года назад
I will surely use this stuff soon! Again thank you for another great tutorial
@DKSubconscious
@DKSubconscious Год назад
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.
@orthodoxNPC
@orthodoxNPC 2 года назад
this is one of the cooler channels i've found, thanks
@GammaWraith
@GammaWraith 2 года назад
Thanks Gary! Going to watch the code implementation now
@vigilantezack
@vigilantezack 2 года назад
I'm glad this exists, I look forward to the return of Homestar Runner!
@charliemunger7221
@charliemunger7221 Год назад
We all really appreciate your videos! Thank you!
@coder8350
@coder8350 2 года назад
Awesome thanks for this tutorial 🙏
@uiuxatuldhone
@uiuxatuldhone 2 года назад
Awesome tool thanks for sharing 😀
@maximumcockage6503
@maximumcockage6503 2 года назад
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.
@Punkfish050
@Punkfish050 2 года назад
Awesome shirt Gary!
@henrytrieu3429
@henrytrieu3429 2 года назад
Thanks, Gary, love the elevator music!
@beiz08
@beiz08 2 года назад
A moment to appreciate the slick hair from our favorite design/coding host!
@sicfxmusic
@sicfxmusic 2 года назад
For today and today only, he is Duff McKagan 🎸🔥
@EvanKotler
@EvanKotler 2 года назад
Rive seems kinda like a modern-day version of Flash.
@whatthefunction9140
@whatthefunction9140 2 года назад
We have come full circle
@whatthefunction9140
@whatthefunction9140 2 года назад
Wait so you have the animation made. What is the output? Do you just embed it?
@lildirtdick777
@lildirtdick777 2 года назад
@@whatthefunction9140 I would think so
@mendistudio
@mendistudio 2 года назад
Flash is still on as Adobe Animate
@rekaviles
@rekaviles 2 года назад
Went to say the same, looks like the new Flash
@conradwawire
@conradwawire 2 года назад
Thank you for this amazing video
@DrHappybone
@DrHappybone 2 года назад
The hair! The shirt! Oh man, you're rocking it!
@shivamkumarsah9514
@shivamkumarsah9514 2 года назад
It's supercool, next level animation,................. love it.
@maxdegreat566
@maxdegreat566 2 года назад
@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
@MyDistortedWorld
@MyDistortedWorld 2 года назад
This tool is freeeekin siiiiccckkkk! Go create!
@donnysashari
@donnysashari 2 года назад
i know this Rive since they had a name Flare for Flutter before then.
@sanzhar.danybayev
@sanzhar.danybayev 2 года назад
Thank you so much for sharing this tool! Wow, it looks amazing!
@ChazziTee
@ChazziTee 2 года назад
Quite rad animations....love it.
@DesignCourse
@DesignCourse 2 года назад
Some of the projects people've created in the community are awesome.
@gaguhj
@gaguhj 2 года назад
Awesome video as always. I had a question about the design course, is it free?
@JustAlgato
@JustAlgato 2 года назад
Really need those animations for web designs
@BMikel
@BMikel 2 года назад
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
@bruidbarrett
@bruidbarrett Месяц назад
Youre the goat thank you for this
@freeshipping9643
@freeshipping9643 2 года назад
Thanks!
@theloneranger1404
@theloneranger1404 2 года назад
Wow the thumbnail is great :)
@theisoj
@theisoj 2 года назад
Thanks 👍
@homescriptone
@homescriptone 2 месяца назад
Great tutorial
@sanukjoseph
@sanukjoseph 2 года назад
sooooo coooll....!!!!😘😘😘
@ayomideolagoke7871
@ayomideolagoke7871 2 года назад
Grate video sir.. Please, can you create a full animation course video with a professional tool
@tavirosu25
@tavirosu25 2 года назад
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!
@DesignCourse
@DesignCourse 2 года назад
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.
@De-ep1ze
@De-ep1ze Год назад
You can copy the code of the animation and put it in an embed in webflow.
@harsh_vish
@harsh_vish 2 года назад
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
@talhakatoonkhaana
@talhakatoonkhaana Год назад
Is the windows app better or designing in browser? Plus can I import AE animations into the state machine?
@modz9711
@modz9711 2 года назад
I kinda found AFTER EFFECTS alternative 🎉🎉 😂😂 🎉🎉 🔥🔥
@DesignCourse
@DesignCourse 2 года назад
2 different purposes really. After Effects is great for video (though, the lottie plugin allows you to do similar stuff here).
@modz9711
@modz9711 2 года назад
@@DesignCourse true 😀
@falsanomo
@falsanomo 4 месяца назад
7:13 For mac users, duplicate is Command-D.
@legitMeastro
@legitMeastro 2 года назад
I was waiting; What us up every body gery simon here
@azaf
@azaf 2 года назад
can you implement this in a vue project?
@draftermyself
@draftermyself Год назад
ОТЛИЧНО!
@walidmekdade8703
@walidmekdade8703 2 года назад
The State machine system Is basically the same as in Unreal Engine
@cthuloox476
@cthuloox476 2 года назад
I love your hair. You look like a Greek god.
@dimka_tregubov
@dimka_tregubov 2 года назад
👍👍👍
@DKSubconscious
@DKSubconscious Год назад
23:18 was just wondering if the flame should have been a child in the rocket 🚀
@djresolution
@djresolution 2 года назад
So what was the most amazing animation in this one regarding your title?
@hisoki2700
@hisoki2700 Год назад
how do i fix last flame setting plz tell me ??
@whatthefunction9140
@whatthefunction9140 2 года назад
Too many cool tools I can't learn them all. My brain is full 😫 🧠
@boxy3087
@boxy3087 2 года назад
The Ae killer
@zuekiin
@zuekiin 2 года назад
What’s the device on top of the Marshall speaker?😍
@DesignCourse
@DesignCourse 2 года назад
A Kemper Profiler. Absolutely love it.
@dovletgeldihojayev
@dovletgeldihojayev 11 месяцев назад
👍👍👍👍
@Shamir-qb1ih
@Shamir-qb1ih 3 дня назад
Can we import svg in the project and animate it?
@oliveringgs422
@oliveringgs422 2 года назад
it looks like a fish!😃
@george_davituri
@george_davituri 2 года назад
spaceX dropped their license after watching it. nice animation btw 😀
@robertwattner
@robertwattner 2 года назад
Somebody please bring back homestar runner with this now that flash is dead!
@katya-suleymanova
@katya-suleymanova 2 года назад
It is pity rive isn’t adaptive for ipad. Zoom and some other actions dont work correctly
@marcmything
@marcmything 4 месяца назад
If I send a .riv file to a developer, can they figure out on their own the Inputs/Listeners/StateMachines in the code?
@LumbreraEnMiCamino
@LumbreraEnMiCamino 2 года назад
More web development please
@BucurIonNiculae
@BucurIonNiculae 2 года назад
Did you have a serious fight with the barber? 🤣🤣🤣🤣🤣🤣🤣🤣
@DesignCourse
@DesignCourse 2 года назад
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. ;)
@nirnejak
@nirnejak 2 года назад
nice hairstyle
@ambujmishra8060
@ambujmishra8060 2 года назад
thanks, I am off to create some rule 34 animations now :-D
@Favoxhille
@Favoxhille 2 года назад
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
@somedev1553
@somedev1553 2 года назад
well he got sloppy since the channel came crashing down on views
@rcguy2175
@rcguy2175 Год назад
New to your channel.I just signed up for rive free account.Not sure how to use the program
@shyamganesh21
@shyamganesh21 2 года назад
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!!!
@Rive_app
@Rive_app 2 года назад
We have mp4 and png sequence exporting!
@welling1
@welling1 2 года назад
Go look at the current GIT documentation -- it's very easy to figure out.
@carlosreyes6612
@carlosreyes6612 2 года назад
Thank you sir! QQ why should I switch from Adobe Animate to Rive ? Animate is way more robust?
@flutterIgnite
@flutterIgnite 2 года назад
put a shape background on your video. I don't feel comfortable looking at a floating head. Anyhow,good stuff
@lopsangdlama
@lopsangdlama 5 месяцев назад
is the free version of rive enough ??
@IgorShkarin
@IgorShkarin 2 года назад
I need a gif export support.
@andrearusky
@andrearusky 3 месяца назад
the webcam head thing is annoying and covering the bottom part of the UI when you are in the animation module
@mrajax_0101
@mrajax_0101 2 года назад
better than framer and protopie???
@kingskellydino4717
@kingskellydino4717 2 года назад
ahah nice shirt
@travissaldanha1261
@travissaldanha1261 Год назад
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
@mindlessgreen
@mindlessgreen 2 года назад
Looks like the HTML5 version of Flash.
@traviaroad_7
@traviaroad_7 2 года назад
Is size large? For production
@-ct-celcomtechniques2566
@-ct-celcomtechniques2566 2 года назад
Tumult Hype will suffer from that app...
@lakshya5946
@lakshya5946 2 года назад
First op
@lakshya5946
@lakshya5946 2 года назад
Faster than designCourse 🤣🤣
@JeevanramKP
@JeevanramKP 2 года назад
Swear to me, do you Marvel in your skills?
@whatthefunction9140
@whatthefunction9140 2 года назад
Are you the thumbs up kid?
@DesignCourse
@DesignCourse 2 года назад
👎 no??
@dailymeow3283
@dailymeow3283 2 года назад
Is it svg ?
@emmyleke7049
@emmyleke7049 2 года назад
I constantly forget that Gary is hot.
@SamWereb
@SamWereb 2 года назад
Not very useful if you can't export it into a format for display on the web.
@DesignCourse
@DesignCourse 2 года назад
help.rive.app/editor/exporting
@varukenprime445
@varukenprime445 Год назад
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…
@chrisea
@chrisea 9 месяцев назад
Uhm because Flash created security issues? It had NOTHING to do with animations. 😂
@chrisea
@chrisea 9 месяцев назад
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.
@varukenprime445
@varukenprime445 9 месяцев назад
@@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.
@varukenprime445
@varukenprime445 9 месяцев назад
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
Далее
Integrating your RIVE Animations on the Web!
21:41
Просмотров 47 тыс.
10 Minutes vs. 10 Years of Animation
19:29
Просмотров 684 тыс.
Зачем он туда залез?
00:25
Просмотров 2,3 млн
60-30-10 Color Rule
6:18
Просмотров 1,9 млн
The 12 Best Rive Community Files of 2023
2:49
Просмотров 9 тыс.
Graphic Design Trends 2024 [18 Styles Explained]
17:10
Просмотров 481 тыс.
6 Levels of Thinking Every Student MUST Master
17:12
Просмотров 1,2 млн
Getting started with Rive and React
17:45
Просмотров 11 тыс.
Make Your Animations INTERACTIVE with Rive
40:38
Просмотров 8 тыс.
Кто такая баба Нина?
0:49
Просмотров 1,9 млн