title
Create the Most AMAZING Animations with Rive - Crash Course

description
https://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: https://rive.app/community/1244-2396-rocket-ship-animation (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: https://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: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-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!

detail
{'title': 'Create the Most AMAZING Animations with Rive - Crash Course', 'heatmap': [{'end': 451.845, 'start': 428.206, 'weight': 0.998}, {'end': 533.942, 'start': 503.23, 'weight': 1}, {'end': 861.902, 'start': 781.222, 'weight': 0.782}, {'end': 1554.18, 'start': 1525.986, 'weight': 0.897}, {'end': 1844.578, 'start': 1820.905, 'weight': 0.755}], 'summary': "Tutorial explores the rive app for creating interactive animations and demonstrates adobe xd interface, rocket ship design, custom shape creation, gradient design, state machine, looping animation, and advanced animation techniques, highlighting rive's potential for advanced animations.", 'chapters': [{'end': 108.635, 'segs': [{'end': 84.943, 'src': 'embed', 'start': 46.708, 'weight': 0, 'content': [{'end': 53.952, 'text': 'And essentially what Rive is, you can create and ship Interactive animations to the web, apps, and games.', 'start': 46.708, 'duration': 7.244}, {'end': 57.254, 'text': "Alright, and they have what's called the state machine.", 'start': 54.533, 'duration': 2.721}, {'end': 62.916, 'text': "I'm going to show you how to use that and how to create our own actual animation like this.", 'start': 57.274, 'duration': 5.642}, {'end': 67.057, 'text': 'And let me show you real quickly just the community section.', 'start': 63.576, 'duration': 3.481}, {'end': 70.899, 'text': "So if we go over here to community, you'll see a lot of things that the community has created.", 'start': 67.097, 'duration': 3.802}, {'end': 74.34, 'text': 'So when you create a Rive animation, you can upload it to the community.', 'start': 70.939, 'duration': 3.401}, {'end': 75.541, 'text': 'Check this thing out.', 'start': 74.7, 'duration': 0.841}, {'end': 80.622, 'text': "Isn't that cool? It's not interactive, although some of them are with what's called the state machine.", 'start': 76.081, 'duration': 4.541}, {'end': 84.943, 'text': 'So these are all the different state machines that we have access to and you can have inputs.', 'start': 80.922, 'duration': 4.021}], 'summary': 'Rive enables creating and sharing interactive animations for web, apps, and games, with access to various state machines and a vibrant community.', 'duration': 38.235, 'max_score': 46.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek46708.jpg'}], 'start': 6.115, 'title': 'Rive app', 'summary': 'Explores the rive app, an interactive animation platform, showcasing its features like creating and sharing interactive animations, using state machines, and accessing community-created projects.', 'chapters': [{'end': 108.635, 'start': 6.115, 'title': 'Review of rive app', 'summary': 'Explores the rive app, an interactive animation platform, showcasing its features like creating and sharing interactive animations, using state machines, and accessing community-created projects.', 'duration': 102.52, 'highlights': ['The Rive app allows users to create and ship interactive animations to the web, apps, and games, with features like the state machine and community upload.', "The community section of Rive showcases various projects created by users, demonstrating the platform's versatility and potential for interactive animations.", 'Users can utilize inputs and toggle buttons within Rive animations, allowing for interactive elements and smooth transitions in the created projects.']}], 'duration': 102.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek6115.jpg', 'highlights': ['The Rive app allows users to create and ship interactive animations to the web, apps, and games, with features like the state machine and community upload.', 'Users can utilize inputs and toggle buttons within Rive animations, allowing for interactive elements and smooth transitions in the created projects.', "The community section of Rive showcases various projects created by users, demonstrating the platform's versatility and potential for interactive animations."]}, {'end': 331.854, 'segs': [{'end': 151.049, 'src': 'embed', 'start': 108.655, 'weight': 0, 'content': [{'end': 112.319, 'text': "And so I'm going to show you exactly how to use it.", 'start': 108.655, 'duration': 3.664}, {'end': 112.859, 'text': 'All right.', 'start': 112.599, 'duration': 0.26}, {'end': 116.823, 'text': "So as always, make sure to subscribe and let's get started.", 'start': 113.22, 'duration': 3.603}, {'end': 117.143, 'text': 'All right.', 'start': 116.883, 'duration': 0.26}, {'end': 121.207, 'text': "So once you create your account, we're going to click on new file right here.", 'start': 117.183, 'duration': 4.024}, {'end': 131.716, 'text': "And this gives us the option to have dimensions of the, the artboard, and we're going to leave it at 500 by 500 and click create.", 'start': 121.848, 'duration': 9.868}, {'end': 135.998, 'text': "so we're going to really quickly just talk about the interface and the layout of the ui.", 'start': 131.716, 'duration': 4.282}, {'end': 137.339, 'text': 'here on the left,', 'start': 135.998, 'duration': 1.341}, {'end': 144.524, 'text': "you're going to have your artboards and all of your layers and groups inside of it very typical dating all the way back to photoshop.", 'start': 137.339, 'duration': 7.185}, {'end': 148.267, 'text': "i so very standard, which is good because it's relatable.", 'start': 144.524, 'duration': 3.743}, {'end': 151.049, 'text': 'We also up here we have some drawing tools.', 'start': 149.027, 'duration': 2.022}], 'summary': 'Tutorial on using design software with 500x500 artboard.', 'duration': 42.394, 'max_score': 108.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek108655.jpg'}, {'end': 199.658, 'src': 'embed', 'start': 173.23, 'weight': 2, 'content': [{'end': 177.411, 'text': 'We also have over here the tabs Design and Animate.', 'start': 173.23, 'duration': 4.181}, {'end': 183.353, 'text': "So when you click to the Animate section, which we'll do after we actually create some type of illustration,", 'start': 177.491, 'duration': 5.862}, {'end': 188.655, 'text': "you'll have the timeline down here where you create your animations and your state machines.", 'start': 183.353, 'duration': 5.302}, {'end': 189.695, 'text': 'Very, very fun stuff.', 'start': 188.715, 'duration': 0.98}, {'end': 191.796, 'text': 'Over here as well.', 'start': 190.735, 'duration': 1.061}, {'end': 198.658, 'text': 'once we select an element like, for instance, the artboard, we have a property inspector when all this stuff changes based on what you select.', 'start': 191.796, 'duration': 6.862}, {'end': 199.658, 'text': 'All right.', 'start': 199.338, 'duration': 0.32}], 'summary': 'Adobe xd allows for animation creation with a timeline and property inspector.', 'duration': 26.428, 'max_score': 173.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek173230.jpg'}, {'end': 238.638, 'src': 'embed', 'start': 209.16, 'weight': 4, 'content': [{'end': 213.961, 'text': 'Of course, we can choose and make it a solid color, but also a radial or linear gradient.', 'start': 209.16, 'duration': 4.801}, {'end': 219.483, 'text': 'So I kind of want to really shift focus right towards this centralized element.', 'start': 214.261, 'duration': 5.222}, {'end': 221.103, 'text': "So we're going to use a radial gradient.", 'start': 219.563, 'duration': 1.54}, {'end': 224.966, 'text': 'make it light in the middle and then a little bit more dark.', 'start': 221.503, 'duration': 3.463}, {'end': 227.529, 'text': 'i guess you could say um on the outsides.', 'start': 224.966, 'duration': 2.563}, {'end': 231.772, 'text': "so we're going to choose radial gradient here and you can see when we select this.", 'start': 227.529, 'duration': 4.243}, {'end': 233.994, 'text': 'sometimes this will go away.', 'start': 231.772, 'duration': 2.222}, {'end': 238.638, 'text': "click back here and then you'll, you'll see this big um radial gradient.", 'start': 233.994, 'duration': 4.644}], 'summary': 'Using a radial gradient, shift focus towards a centralized element.', 'duration': 29.478, 'max_score': 209.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek209160.jpg'}, {'end': 340.44, 'src': 'embed', 'start': 309.727, 'weight': 3, 'content': [{'end': 311.887, 'text': "and so let's get started with the pen tool.", 'start': 309.727, 'duration': 2.16}, {'end': 316.428, 'text': "so, um, we're going to create the basic, uh structure of the rocket.", 'start': 311.887, 'duration': 4.541}, {'end': 324.99, 'text': "we want it to be symmetrical, so we're going to replicate one half of it, and then i will move it over so that we create a full rocket ship.", 'start': 316.428, 'duration': 8.562}, {'end': 329.112, 'text': 'so i, if you never use a pen tool, it can be a little bit tricky, but Worry not.', 'start': 324.99, 'duration': 4.122}, {'end': 331.854, 'text': "It's just anything you have to practice with it.", 'start': 329.232, 'duration': 2.622}, {'end': 340.44, 'text': "So I'm gonna left click once here and Now you can see we can place another Bézier curve somewhere and we want to make a Bézier curve,", 'start': 332.194, 'duration': 8.246}], 'summary': 'Creating symmetrical rocket structure using the pen tool.', 'duration': 30.713, 'max_score': 309.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek309727.jpg'}], 'start': 108.655, 'title': 'Adobe xd interface and rocket ship design', 'summary': 'Includes a walkthrough of adobe xd interface covering file creation, interface layout, design and animate tabs, and a guide to design a rocket ship in an artboard with steps on background color change, color selection, and basic structure creation using the pen tool.', 'chapters': [{'end': 191.796, 'start': 108.655, 'title': 'Adobe xd interface walkthrough', 'summary': 'Explains how to use adobe xd, including creating a new file, understanding the interface layout, and exploring the design and animate tabs for creating animations and state machines.', 'duration': 83.141, 'highlights': ['The tutorial explains how to use Adobe XD, including creating a new file with dimensions of 500 by 500.', 'It describes the interface layout, including the arrangement of artboards, layers, and drawing tools like rectangles and polygons.', 'It mentions the Animate tab for creating animations and state machines in Adobe XD.']}, {'end': 331.854, 'start': 191.796, 'title': 'Designing rocket ship in artboard', 'summary': 'Covers designing a rocket ship in an artboard, including changing the background color to a radial gradient, selecting colors for the gradient, and using the pen tool to create the basic structure of the rocket ship.', 'duration': 140.058, 'highlights': ['Using radial gradient for artboard background color The chapter starts with changing the artboard background color to a radial gradient, allowing for customization and visual appeal.', 'Selecting colors for the radial gradient The tutorial demonstrates the selection of specific colors for the radial gradient, opting for a light blue in the middle and a darker shade at the edges.', 'Using the pen tool to create the basic structure of the rocket ship The tutorial explains the process of using the pen tool to create the symmetrical structure of the rocket ship, offering basic guidance for beginners.']}], 'duration': 223.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek108655.jpg', 'highlights': ['The tutorial explains how to use Adobe XD, including creating a new file with dimensions of 500 by 500.', 'It describes the interface layout, including the arrangement of artboards, layers, and drawing tools like rectangles and polygons.', 'It mentions the Animate tab for creating animations and state machines in Adobe XD.', 'Using the pen tool to create the basic structure of the rocket ship The tutorial explains the process of using the pen tool to create the symmetrical structure of the rocket ship, offering basic guidance for beginners.', 'Using radial gradient for artboard background color The chapter starts with changing the artboard background color to a radial gradient, allowing for customization and visual appeal.', 'Selecting colors for the radial gradient The tutorial demonstrates the selection of specific colors for the radial gradient, opting for a light blue in the middle and a darker shade at the edges.']}, {'end': 511.298, 'segs': [{'end': 355.152, 'src': 'embed', 'start': 332.194, 'weight': 2, 'content': [{'end': 340.44, 'text': "So I'm gonna left click once here and Now you can see we can place another Bézier curve somewhere and we want to make a Bézier curve,", 'start': 332.194, 'duration': 8.246}, {'end': 343.162, 'text': 'perhaps maybe right around here and hold shift.', 'start': 340.44, 'duration': 2.722}, {'end': 345.124, 'text': "This will make it so that we can't lock it like this.", 'start': 343.162, 'duration': 1.962}, {'end': 348.547, 'text': "It'll lock it on a 90 degree axis or, as you see, 45 or just flat here.", 'start': 345.124, 'duration': 3.423}, {'end': 355.152, 'text': 'So pull down right around there and then maybe hold shift,', 'start': 348.567, 'duration': 6.585}], 'summary': 'Demonstrates creating a bézier curve with lock options at 90, 45, or flat angles.', 'duration': 22.958, 'max_score': 332.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek332194.jpg'}, {'end': 411.538, 'src': 'embed', 'start': 382.43, 'weight': 3, 'content': [{'end': 384.311, 'text': "So we're going to click plus here in the stroke section.", 'start': 382.43, 'duration': 1.881}, {'end': 388.593, 'text': "Um, and then we're going to make it black and I think we're gonna make it pretty thick, like five.", 'start': 384.991, 'duration': 3.602}, {'end': 393.355, 'text': "Also we'll come out to the options right here and we're going to choose rounded.", 'start': 389.593, 'duration': 3.762}, {'end': 396.189, 'text': "I'm gonna make it a little bit larger than what it actually is here.", 'start': 393.848, 'duration': 2.341}, {'end': 401.112, 'text': "So there's several different ways we can just drag out here and do that if we wish.", 'start': 396.369, 'duration': 4.743}, {'end': 405.475, 'text': 'We could also adjust these little elements here.', 'start': 402.053, 'duration': 3.422}, {'end': 411.538, 'text': 'You can like scale it this way, scale it this way, move it up, move it right, all that stuff.', 'start': 405.495, 'duration': 6.043}], 'summary': 'Using the stroke section, make the line black and thick (5 units), choose rounded options, and adjust elements by scaling and moving.', 'duration': 29.108, 'max_score': 382.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek382430.jpg'}, {'end': 495.805, 'src': 'heatmap', 'start': 428.206, 'weight': 0, 'content': [{'end': 431.927, 'text': "Maybe I'm gonna make it a little bit wider right there.", 'start': 428.206, 'duration': 3.721}, {'end': 434.088, 'text': "Okay, so now what we're gonna do is duplicate that.", 'start': 432.047, 'duration': 2.041}, {'end': 437.53, 'text': 'Control D, as you can see, we have our two custom shapes right here.', 'start': 434.148, 'duration': 3.382}, {'end': 443.692, 'text': "And I'm just gonna drag this over, and right there seems to be pretty good.", 'start': 438.17, 'duration': 5.522}, {'end': 447.834, 'text': "So now what we'll do is take both of those, we can group them up.", 'start': 444.252, 'duration': 3.582}, {'end': 451.845, 'text': "And that's the process of using the pen tool.", 'start': 449.222, 'duration': 2.623}, {'end': 456.811, 'text': 'I mean, all the other tools right here, like the shape tools, they work exactly as you would expect.', 'start': 452.066, 'duration': 4.745}, {'end': 459.795, 'text': 'You select them, you change the properties, and you try to match them up.', 'start': 456.851, 'duration': 2.944}, {'end': 468.725, 'text': "So at this point, because I don't want this to be an unnecessarily long tutorial, I'm going to time lapse the creation of this image.", 'start': 460.275, 'duration': 8.45}, {'end': 472.334, 'text': 'this rocket ship.', 'start': 471.614, 'duration': 0.72}, {'end': 477.017, 'text': 'And also, I do want to mention one thing that was very confusing to me.', 'start': 472.394, 'duration': 4.623}, {'end': 478.998, 'text': "We're going to take the pen tool again here.", 'start': 477.037, 'duration': 1.961}, {'end': 483.477, 'text': 'And I do want to mention one thing that was confusing.', 'start': 480.655, 'duration': 2.822}, {'end': 486.799, 'text': "So what I want you to be wary of, I'm just going to draw off on the side here.", 'start': 483.517, 'duration': 3.282}, {'end': 495.805, 'text': "When you click here and you create a Bezier curve and you try to maybe create like a right angle right here and you move this, you can't stop it.", 'start': 487.199, 'duration': 8.606}], 'summary': 'Demonstration of using pen tool and shape tools to create custom shapes and rocket ship image.', 'duration': 67.599, 'max_score': 428.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek428206.jpg'}], 'start': 332.194, 'title': 'Creating custom shapes with pen tool', 'summary': 'Demonstrates creating custom shapes with the pen tool, including bezier curves and stroke properties, and concludes with a time-lapse of creating a rocket ship image.', 'chapters': [{'end': 511.298, 'start': 332.194, 'title': 'Creating custom shapes with pen tool', 'summary': 'Demonstrates the process of creating custom shapes using the pen tool, including the use of bezier curves and adjusting stroke properties, and concludes with a time-lapse of creating a rocket ship image.', 'duration': 179.104, 'highlights': ['The chapter demonstrates the process of creating custom shapes using the pen tool, including the use of Bezier curves and adjusting stroke properties.', 'The tutorial concludes with a time-lapse of creating a rocket ship image.', 'The pen tool is used to create Bezier curves, and the shift key is utilized to lock the curves on a 90-degree axis or other specific angles.', 'Instructions are provided for adjusting stroke properties, including color, thickness, and style.', 'The process of creating custom shapes is explained, including duplicating and grouping shapes, and adjusting their dimensions.']}], 'duration': 179.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek332194.jpg', 'highlights': ['The tutorial concludes with a time-lapse of creating a rocket ship image.', 'The chapter demonstrates the process of creating custom shapes using the pen tool, including the use of Bezier curves and adjusting stroke properties.', 'The pen tool is used to create Bezier curves, and the shift key is utilized to lock the curves on a 90-degree axis or other specific angles.', 'Instructions are provided for adjusting stroke properties, including color, thickness, and style.', 'The process of creating custom shapes is explained, including duplicating and grouping shapes, and adjusting their dimensions.']}, {'end': 677.849, 'segs': [{'end': 567.926, 'src': 'embed', 'start': 511.978, 'weight': 1, 'content': [{'end': 533.942, 'text': "Let's rock Now, I did really wanna quickly show you another gradient type, which is a linear gradient, very simple.", 'start': 511.978, 'duration': 21.964}, {'end': 538.067, 'text': "We're just gonna move, and we're creating a flame kind of situation right here.", 'start': 534.342, 'duration': 3.725}, {'end': 539.789, 'text': "We're gonna move this right here to there.", 'start': 538.387, 'duration': 1.402}, {'end': 546.016, 'text': "We want this to fade off, so we're gonna take the black color picker, which is down there, the black color stop, rather.", 'start': 540.89, 'duration': 5.126}, {'end': 552.62, 'text': "We're gonna grab the background color which is right around here, but also take the opacity slider all the way down.", 'start': 546.696, 'duration': 5.924}, {'end': 556.482, 'text': 'And then also we can add color stops as well.', 'start': 553.361, 'duration': 3.121}, {'end': 557.922, 'text': "So we're gonna drag this one right here.", 'start': 556.502, 'duration': 1.42}, {'end': 567.926, 'text': "We're gonna place one by left clicking right there, and then we'll take this down to 0% and also change the color to black.", 'start': 557.942, 'duration': 9.984}], 'summary': 'Creating a linear gradient with a flame effect by adjusting color stops and opacity.', 'duration': 55.948, 'max_score': 511.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek511978.jpg'}, {'end': 630.837, 'src': 'embed', 'start': 600.353, 'weight': 0, 'content': [{'end': 600.873, 'text': 'And there we go.', 'start': 600.353, 'duration': 0.52}, {'end': 602.234, 'text': "That's going to be our flames.", 'start': 600.893, 'duration': 1.341}, {'end': 607.256, 'text': "And then, finally, one last thing we're going to do is take this shape tool.", 'start': 603.773, 'duration': 3.483}, {'end': 608.377, 'text': "we're gonna create an ellipse.", 'start': 607.256, 'duration': 1.121}, {'end': 610.899, 'text': "we'll create kind of like a shadow down here.", 'start': 608.377, 'duration': 2.522}, {'end': 614.182, 'text': "And we're gonna move this over.", 'start': 610.919, 'duration': 3.263}, {'end': 622.589, 'text': 'Oh, by the way, I forgot, when it comes to this type of technique, we wanna make a perfect circle first and then add a radial gradient inside of it.', 'start': 614.823, 'duration': 7.766}, {'end': 626.072, 'text': "So we'll do radial, move this back here to the center.", 'start': 623.05, 'duration': 3.022}, {'end': 630.837, 'text': "We're gonna make the center be a darker version of this blue color.", 'start': 626.092, 'duration': 4.745}], 'summary': 'Creating flames and shadows using shape tool and radial gradient in design process.', 'duration': 30.484, 'max_score': 600.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek600353.jpg'}, {'end': 681.031, 'src': 'embed', 'start': 652.105, 'weight': 4, 'content': [{'end': 654.327, 'text': 'So just double click and then you can change the name.', 'start': 652.105, 'duration': 2.222}, {'end': 658.329, 'text': "These two elements, we're gonna group them up, Control G.", 'start': 655.027, 'duration': 3.302}, {'end': 659.91, 'text': 'These are gonna be called our flames.', 'start': 658.329, 'duration': 1.581}, {'end': 662.313, 'text': 'and then everything else.', 'start': 661.212, 'duration': 1.101}, {'end': 667.817, 'text': "And we're gonna deselect the flames and the shadow layer there.", 'start': 664.094, 'duration': 3.723}, {'end': 671.6, 'text': "We're gonna control G to group, and we're gonna call this rocket.", 'start': 668.137, 'duration': 3.463}, {'end': 677.849, 'text': 'Awesome So now we are done with the actual design phase of this.', 'start': 672.947, 'duration': 4.902}, {'end': 681.031, 'text': "And what we'll do now is we by default.", 'start': 678.45, 'duration': 2.581}], 'summary': 'Design phase completed, flames and rocket grouped', 'duration': 28.926, 'max_score': 652.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek652105.jpg'}], 'start': 511.978, 'title': 'Creating a linear gradient for flame design', 'summary': 'Demonstrates the process of creating a linear gradient to design a flame, involving steps like adjusting color stops, adding opacity, and creating shadow effects, ultimately forming a rocket design.', 'chapters': [{'end': 677.849, 'start': 511.978, 'title': 'Creating linear gradient for flame design', 'summary': 'Demonstrates the process of creating a linear gradient to design a flame, involving steps like adjusting color stops, adding opacity, and creating shadow effects, ultimately forming a rocket design.', 'duration': 165.871, 'highlights': ['The process involves creating a linear gradient to design a flame, involving steps like adjusting color stops, adding opacity, and creating shadow effects, ultimately forming a rocket design.', 'The chapter demonstrates the process of creating a linear gradient to design a flame.', 'The design process includes adjusting color stops, adding opacity, and creating shadow effects.', 'The linear gradient is used to create a flame design, and the process involves adjusting color stops and adding opacity.', 'The design phase concludes with the formation of a rocket.']}], 'duration': 165.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek511978.jpg', 'highlights': ['The process involves creating a linear gradient to design a flame, involving steps like adjusting color stops, adding opacity, and creating shadow effects, ultimately forming a rocket design.', 'The chapter demonstrates the process of creating a linear gradient to design a flame.', 'The design process includes adjusting color stops, adding opacity, and creating shadow effects.', 'The linear gradient is used to create a flame design, and the process involves adjusting color stops and adding opacity.', 'The design phase concludes with the formation of a rocket.']}, {'end': 1082.467, 'segs': [{'end': 739.304, 'src': 'embed', 'start': 715.097, 'weight': 0, 'content': [{'end': 722.226, 'text': "And the state machine basically allows you to connect multiple different types of animations that you've created for your scene.", 'start': 715.097, 'duration': 7.129}, {'end': 731.497, 'text': "And it provides logic essentially to where you can seamlessly transition between these different animation states that you've created,", 'start': 723.007, 'duration': 8.49}, {'end': 735.72, 'text': 'based on the timeline, uh, based on conditions and other factors.', 'start': 731.497, 'duration': 4.223}, {'end': 739.304, 'text': "so it's, it's really powerful and it's very fun to play with.", 'start': 735.72, 'duration': 3.584}], 'summary': 'State machine enables seamless transition between different animations for scenes, based on timeline and conditions.', 'duration': 24.207, 'max_score': 715.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek715097.jpg'}, {'end': 861.902, 'src': 'heatmap', 'start': 781.222, 'weight': 0.782, 'content': [{'end': 788.624, 'text': "We're going to take our rocket and we're just going to add a keyframe by coming up here from position.", 'start': 781.222, 'duration': 7.402}, {'end': 792.045, 'text': "We'll do X and Y, although we don't need to do X.", 'start': 789.785, 'duration': 2.26}, {'end': 793.346, 'text': "We don't need to move it to right or left.", 'start': 792.045, 'duration': 1.301}, {'end': 794.246, 'text': "We're just going to do Y.", 'start': 793.366, 'duration': 0.88}, {'end': 798.848, 'text': "right here and then, when you see that you'll see, it says rocket.", 'start': 795.186, 'duration': 3.662}, {'end': 799.868, 'text': "sorry, i'm in the way.", 'start': 798.848, 'duration': 1.02}, {'end': 809.472, 'text': "uh, it says rocket right there and you can see a keyframe has been added and then what we can do is move in the timeline and we'll move right to the middle,", 'start': 799.868, 'duration': 9.604}, {'end': 811.213, 'text': '30 frames.', 'start': 809.472, 'duration': 1.741}, {'end': 814.854, 'text': 'by default, this is a one minute long.', 'start': 811.213, 'duration': 3.641}, {'end': 820.718, 'text': "so you can adjust everything here, the playback speed and the FPS, which we're going to leave at 60,", 'start': 814.854, 'duration': 5.864}, {'end': 824.301, 'text': 'which will make it pretty smooth or very smooth rather.', 'start': 820.718, 'duration': 3.583}, {'end': 828.745, 'text': "Then we're just going to take this and move it up very slightly.", 'start': 824.821, 'duration': 3.924}, {'end': 833.088, 'text': "If you have too much height on this, it's going to look silly, kind of going up and down.", 'start': 828.765, 'duration': 4.323}, {'end': 838.372, 'text': "We can also copy keyframes, and we'll come out to the very end and paste them.", 'start': 833.709, 'duration': 4.663}, {'end': 845.178, 'text': "Then for the interpolation, let's just adjust this and choose cubic.", 'start': 839.353, 'duration': 5.825}, {'end': 856.741, 'text': 'Alright, so you can play around with this as well to affect the animation type.', 'start': 853.1, 'duration': 3.641}, {'end': 861.902, 'text': "Next, we're going to change this from one shot to loop so that it loops indefinitely.", 'start': 857.201, 'duration': 4.701}], 'summary': 'Tutorial on animating a rocket in a one-minute loop with 60 fps and cubic interpolation.', 'duration': 80.68, 'max_score': 781.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek781222.jpg'}, {'end': 856.741, 'src': 'embed', 'start': 799.868, 'weight': 1, 'content': [{'end': 809.472, 'text': "uh, it says rocket right there and you can see a keyframe has been added and then what we can do is move in the timeline and we'll move right to the middle,", 'start': 799.868, 'duration': 9.604}, {'end': 811.213, 'text': '30 frames.', 'start': 809.472, 'duration': 1.741}, {'end': 814.854, 'text': 'by default, this is a one minute long.', 'start': 811.213, 'duration': 3.641}, {'end': 820.718, 'text': "so you can adjust everything here, the playback speed and the FPS, which we're going to leave at 60,", 'start': 814.854, 'duration': 5.864}, {'end': 824.301, 'text': 'which will make it pretty smooth or very smooth rather.', 'start': 820.718, 'duration': 3.583}, {'end': 828.745, 'text': "Then we're just going to take this and move it up very slightly.", 'start': 824.821, 'duration': 3.924}, {'end': 833.088, 'text': "If you have too much height on this, it's going to look silly, kind of going up and down.", 'start': 828.765, 'duration': 4.323}, {'end': 838.372, 'text': "We can also copy keyframes, and we'll come out to the very end and paste them.", 'start': 833.709, 'duration': 4.663}, {'end': 845.178, 'text': "Then for the interpolation, let's just adjust this and choose cubic.", 'start': 839.353, 'duration': 5.825}, {'end': 856.741, 'text': 'Alright, so you can play around with this as well to affect the animation type.', 'start': 853.1, 'duration': 3.641}], 'summary': 'Adjust playback speed to 60 fps for smooth animation, then use cubic interpolation for effect.', 'duration': 56.873, 'max_score': 799.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek799868.jpg'}], 'start': 678.45, 'title': 'Creating state machine and looping animation in rive', 'summary': 'Covers creating state machines in rive to facilitate smooth animation transitions, as well as creating looping animations with precise keyframe adjustments, resulting in a final animation featuring a 45-degree rotation.', 'chapters': [{'end': 856.741, 'start': 678.45, 'title': 'Creating state machine in rive', 'summary': 'Explains how to create a state machine in rive, allowing seamless transition between different animation states, with a focus on not using bones and creating multiple animations.', 'duration': 178.291, 'highlights': ['The chapter emphasizes the creation of a state machine in Rive, enabling seamless transition between different animations, without using bones - focusing on creating multiple animations.', 'The process involves adding keyframes to create subtle animations, adjusting playback speed and FPS for smoothness, and using interpolation to affect animation type.', 'The tutorial mentions the default one-minute length of the animation, the option to adjust playback speed and FPS (set at 60 for smoothness), and the use of cubic interpolation for the animation.', 'The chapter highlights the process of creating a state machine, connecting different types of animations, and seamlessly transitioning between them based on timeline, conditions, and other factors.']}, {'end': 1082.467, 'start': 857.201, 'title': 'Creating looping animation and adjusting keyframes', 'summary': 'Demonstrates how to create a looping animation with fine-tuned keyframe adjustments, including opacity changes and movement, resulting in a final animation with a 45-degree rotation.', 'duration': 225.266, 'highlights': ['Demonstration of creating a looping animation with fine-tuned keyframe adjustments The tutorial showcases the process of changing a one-shot animation to loop indefinitely and making fine-tuned keyframe adjustments for movement and opacity.', 'Explanation of adjusting keyframes for opacity changes and movement The tutorial explains the process of setting keyframes for opacity adjustments, including starting at 100% and transitioning to 0%, as well as fine-tuning movement based on proximity.', 'Final animation with a 45-degree rotation The tutorial concludes with a demonstration of achieving a 45-degree rotation in the final animation, showcasing the application of keyframe adjustments for rotation.']}], 'duration': 404.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek678450.jpg', 'highlights': ['The chapter emphasizes creating a state machine in Rive for seamless animation transitions and multiple animations.', 'Demonstration of creating a looping animation with fine-tuned keyframe adjustments.', 'The process involves adding keyframes for subtle animations, adjusting playback speed and FPS, and using interpolation.', 'Final animation features a 45-degree rotation achieved through keyframe adjustments.']}, {'end': 1499.04, 'segs': [{'end': 1139.467, 'src': 'embed', 'start': 1082.707, 'weight': 0, 'content': [{'end': 1086.228, 'text': "So we don't have to create like animation for that.", 'start': 1082.707, 'duration': 3.521}, {'end': 1088.009, 'text': 'The system.', 'start': 1087.089, 'duration': 0.92}, {'end': 1094.751, 'text': 'the state machine is intelligent enough to know no matter where, at at what point during this animation this is at.', 'start': 1088.009, 'duration': 6.742}, {'end': 1097.112, 'text': "it's going to seamlessly transition it for like.", 'start': 1094.751, 'duration': 2.361}, {'end': 1106.611, 'text': 'for instance, if the toggle button is selected here, it will animate it right smoothly to this position between the different animations.', 'start': 1097.112, 'duration': 9.499}, {'end': 1110.893, 'text': "By the way, I decided to move myself off of that side of the screen just so we could see what's happening.", 'start': 1106.991, 'duration': 3.902}, {'end': 1113.955, 'text': 'So now what we want to do is create a second animation.', 'start': 1111.474, 'duration': 2.481}, {'end': 1117.597, 'text': 'What we can do is right click and just duplicate or click the plus sign.', 'start': 1114.635, 'duration': 2.962}, {'end': 1120.358, 'text': "I'm going to duplicate because it's going to remember some of these values.", 'start': 1117.877, 'duration': 2.481}, {'end': 1123.58, 'text': 'And then we can see we have two of these.', 'start': 1121.179, 'duration': 2.401}, {'end': 1125.081, 'text': "So we're going to change this one to fire up.", 'start': 1123.64, 'duration': 1.441}, {'end': 1126.401, 'text': 'all right.', 'start': 1126.081, 'duration': 0.32}, {'end': 1131.023, 'text': "so for fire up, let's re i'm going to get rid of all this stuff right here.", 'start': 1126.401, 'duration': 4.622}, {'end': 1135.085, 'text': "we're just going to keep these ones the same, these initial keyframes.", 'start': 1131.023, 'duration': 4.062}, {'end': 1137.386, 'text': 'so what we want to do for the fire up sequence?', 'start': 1135.085, 'duration': 2.301}, {'end': 1139.467, 'text': 'this is what happens after idle.', 'start': 1137.386, 'duration': 2.081}], 'summary': 'The system seamlessly transitions animations, duplicates and modifies keyframes for fire up sequence.', 'duration': 56.76, 'max_score': 1082.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1082707.jpg'}, {'end': 1250.529, 'src': 'embed', 'start': 1222.952, 'weight': 3, 'content': [{'end': 1227.696, 'text': "So it'll move like this and then that's all we're going to place right there.", 'start': 1222.952, 'duration': 4.744}, {'end': 1236.784, 'text': "So next up, we're gonna have another animation and this is the main animation where we make it look like it's flying essentially.", 'start': 1228.857, 'duration': 7.927}, {'end': 1239.487, 'text': "So I'm gonna go ahead and right click and duplicate this.", 'start': 1237.605, 'duration': 1.882}, {'end': 1247.254, 'text': "We're gonna call this one, this will be, I think we'll call this flying, yeah.", 'start': 1239.867, 'duration': 7.387}, {'end': 1250.529, 'text': "So it's actually flying in the air at this point.", 'start': 1248.407, 'duration': 2.122}], 'summary': "Creating a flying animation by duplicating and naming it 'flying'.", 'duration': 27.577, 'max_score': 1222.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1222952.jpg'}, {'end': 1329.129, 'src': 'embed', 'start': 1301.586, 'weight': 4, 'content': [{'end': 1310.694, 'text': "Then we're going to go to 15 and we're going to take this Y selector and move it back like that.", 'start': 1301.586, 'duration': 9.108}, {'end': 1323.364, 'text': 'Now we can take the rocket keyframe right here, go to 30 and paste this as well at 45 and then take this and paste this here.', 'start': 1311.394, 'duration': 11.97}, {'end': 1329.129, 'text': "Now let's go ahead and it's already looping and that's the type of animation we want and let's hit play.", 'start': 1324.165, 'duration': 4.964}], 'summary': 'Animating a rocket from 15 to 45, creating a looping animation.', 'duration': 27.543, 'max_score': 1301.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1301586.jpg'}, {'end': 1410.018, 'src': 'embed', 'start': 1382.77, 'weight': 5, 'content': [{'end': 1387.472, 'text': "And we're going to put a key frame, position and scale, which already is, and opacity.", 'start': 1382.77, 'duration': 4.702}, {'end': 1391.174, 'text': "Right around here maybe we'll go ahead.", 'start': 1388.593, 'duration': 2.581}, {'end': 1395.876, 'text': "Now notice that the rocket's moving, so we have to take that into effect as well, into account.", 'start': 1391.414, 'duration': 4.462}, {'end': 1398.658, 'text': "We'll put one maybe right around five.", 'start': 1396.857, 'duration': 1.801}, {'end': 1402.153, 'text': "We'll change this to 100%.", 'start': 1399.278, 'duration': 2.875}, {'end': 1410.018, 'text': "All right, and then also, I think we'll push this down right around here for that keyframe.", 'start': 1402.153, 'duration': 7.865}], 'summary': "Adjust keyframes for position, scale, and opacity to account for rocket's movement.", 'duration': 27.248, 'max_score': 1382.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1382770.jpg'}], 'start': 1082.707, 'title': 'Animation techniques', 'summary': 'Covers state machine animation transitions and the process of animating a flying rocket, emphasizing seamless transitions, keyframes, and creating movement with quantifiable effects.', 'chapters': [{'end': 1221.19, 'start': 1082.707, 'title': 'State machine animation transition', 'summary': 'Discusses the intelligent transition of animations through a state machine, showcasing the creation and manipulation of animations within a system, emphasizing seamless transition and specific keyframes.', 'duration': 138.483, 'highlights': ["The system's state machine facilitates seamless transitions between animations, ensuring smooth movement regardless of the animation's current position.", 'Demonstrates the creation of a second animation through duplication, enabling the retention of previous values and subsequent manipulation.', "Details the process of modifying the 'fire up' animation, involving adjustments in position, opacity, scaling, and rotation at specific keyframes."]}, {'end': 1499.04, 'start': 1222.952, 'title': 'Animating flying rocket', 'summary': 'Details the process of animating a flying rocket, including duplicating the main animation, creating movement with key frames, and animating the flames to achieve a subtle flying effect.', 'duration': 276.088, 'highlights': ['The chapter details the process of animating a flying rocket, including duplicating the main animation, creating movement with key frames, and animating the flames to achieve a subtle flying effect.', 'Key frames are used to create subtle movements in the rocket, with adjustments made every 15 frames to simulate a flying motion.', 'The flames are animated by adjusting their opacity and position to create a realistic effect as the rocket moves.']}], 'duration': 416.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1082707.jpg', 'highlights': ["The system's state machine facilitates seamless transitions between animations, ensuring smooth movement regardless of the animation's current position.", "Details the process of modifying the 'fire up' animation, involving adjustments in position, opacity, scaling, and rotation at specific keyframes.", 'Demonstrates the creation of a second animation through duplication, enabling the retention of previous values and subsequent manipulation.', 'The chapter details the process of animating a flying rocket, including duplicating the main animation, creating movement with key frames, and animating the flames to achieve a subtle flying effect.', 'Key frames are used to create subtle movements in the rocket, with adjustments made every 15 frames to simulate a flying motion.', 'The flames are animated by adjusting their opacity and position to create a realistic effect as the rocket moves.']}, {'end': 1946.304, 'segs': [{'end': 1554.18, 'src': 'heatmap', 'start': 1499.06, 'weight': 1, 'content': [{'end': 1506.664, 'text': "And one final animation I'm gonna do, which is to reverse the fire up, we're gonna have a fire down as well to revert the state.", 'start': 1499.06, 'duration': 7.604}, {'end': 1507.805, 'text': "So I'll just duplicate that.", 'start': 1506.684, 'duration': 1.121}, {'end': 1511.687, 'text': "Double click, we're gonna change this to fire down.", 'start': 1509.005, 'duration': 2.682}, {'end': 1517.369, 'text': "All right, and then I'll just reverse the entire order here.", 'start': 1513.988, 'duration': 3.381}, {'end': 1519.37, 'text': "So at 30, we'll put these.", 'start': 1517.45, 'duration': 1.92}, {'end': 1521.652, 'text': 'This one will go at one.', 'start': 1520.271, 'duration': 1.381}, {'end': 1525.986, 'text': 'this one will be moved here, and then this will go back to 30.', 'start': 1522.642, 'duration': 3.344}, {'end': 1528.55, 'text': 'So what happens is it just kind of goes back.', 'start': 1525.986, 'duration': 2.564}, {'end': 1529.411, 'text': "It's a reverse state.", 'start': 1528.59, 'duration': 0.821}, {'end': 1532.415, 'text': "Now it's time for creating the state machine.", 'start': 1529.971, 'duration': 2.444}, {'end': 1535.919, 'text': 'So we click over here, click state machine, and then we have this section.', 'start': 1532.455, 'duration': 3.464}, {'end': 1539.484, 'text': "It's not a timeline, it's an area to create your state, your logic and all that.", 'start': 1535.959, 'duration': 3.525}, {'end': 1543.408, 'text': "So what we do is we're gonna take first our idle here.", 'start': 1539.884, 'duration': 3.524}, {'end': 1548.674, 'text': "For our entry, we're gonna put right here and then idle will go right after entry.", 'start': 1543.448, 'duration': 5.226}, {'end': 1554.18, 'text': 'And then as you can see, we can left click and drag connections between these elements.', 'start': 1549.355, 'duration': 4.825}], 'summary': 'Creating a state machine with idle state and reverse fire animation.', 'duration': 44.348, 'max_score': 1499.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1499060.jpg'}, {'end': 1621.915, 'src': 'embed', 'start': 1599.34, 'weight': 2, 'content': [{'end': 1606.985, 'text': "suggestion is to play around with these values to see how it affects the animations based on when you're pressing your space bar or not your space bar.", 'start': 1599.34, 'duration': 7.645}, {'end': 1608.811, 'text': 'but I have to back up.', 'start': 1606.985, 'duration': 1.826}, {'end': 1614.213, 'text': 'The triggers are triggered by clicking over here in this little radio box area.', 'start': 1609.331, 'duration': 4.882}, {'end': 1621.915, 'text': "The space bar is what's going to start and stop the actual sequence.", 'start': 1614.893, 'duration': 7.022}], 'summary': 'Adjust values to observe animation changes triggered by space bar and radio box clicking.', 'duration': 22.575, 'max_score': 1599.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1599340.jpg'}, {'end': 1849.68, 'src': 'heatmap', 'start': 1820.905, 'weight': 0.755, 'content': [{'end': 1823.067, 'text': 'All right, so that is it with the state machine.', 'start': 1820.905, 'duration': 2.162}, {'end': 1825.93, 'text': "There's obviously so much more that you can learn with this and do.", 'start': 1823.087, 'duration': 2.843}, {'end': 1827.991, 'text': 'And from here, you have a few options.', 'start': 1826.23, 'duration': 1.761}, {'end': 1835.979, 'text': 'You can download it for the newest runtime, version seven or previous, and then you could also publish it to the community.', 'start': 1828.112, 'duration': 7.867}, {'end': 1844.578, 'text': "and i think for perhaps a future tutorial we'll try to make this and integrate it on a website or something like that.", 'start': 1837.376, 'duration': 7.202}, {'end': 1845.859, 'text': 'um, but yeah, here it is.', 'start': 1844.578, 'duration': 1.281}, {'end': 1849.68, 'text': 'you can publish community, everybody can see it and you can link people to it.', 'start': 1845.859, 'duration': 3.821}], 'summary': 'Exploring state machine, options to download and publish for community viewing.', 'duration': 28.775, 'max_score': 1820.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1820905.jpg'}, {'end': 1934.455, 'src': 'embed', 'start': 1910.316, 'weight': 0, 'content': [{'end': 1918.022, 'text': "I'm actually going to personally use it for my own site at designcourse.com in different regards, and perhaps I'll do tutorials on that as well.", 'start': 1910.316, 'duration': 7.706}, {'end': 1919.203, 'text': 'So the Rive team.', 'start': 1918.403, 'duration': 0.8}, {'end': 1928.19, 'text': 'they definitely wanted me to mention the fact that they envisioned Rive as being basically bridging a gap between design and development,', 'start': 1919.203, 'duration': 8.987}, {'end': 1934.455, 'text': 'because everything is handled pretty much within your Rive file and the Rive user interface.', 'start': 1928.19, 'duration': 6.265}], 'summary': 'Rive aims to bridge gap between design and development for designcourse.com.', 'duration': 24.139, 'max_score': 1910.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1910316.jpg'}], 'start': 1499.06, 'title': 'Animation sequences', 'summary': "Covers creating state machines, animation reversal, and animating rive files with triggers, with details on setup, logic application, and animation state switching, lasting a total of 250 milliseconds, and emphasizing rive's potential for advanced animations.", 'chapters': [{'end': 1599.34, 'start': 1499.06, 'title': 'Creating state machine and animation reversal', 'summary': 'Covers creating a state machine and reversing an animation, with details on setting up the state machine, connecting elements, applying logic, and creating a trigger for animation state switching, with a duration of 250 milliseconds.', 'duration': 100.28, 'highlights': ['Setting up the state machine by placing idle after the entry and connecting elements to apply logic.', 'Creating a trigger for animation state switching using the space bar and setting the duration to 250 milliseconds.', 'Reversing the fire animation by duplicating and changing it to fire down, then rearranging the order of frames to create a reverse state.']}, {'end': 1946.304, 'start': 1599.34, 'title': 'Animating rive file with triggers', 'summary': 'Explains the process of animating a rive file by adding triggers, conditions, and durations, resulting in a dynamic sequence involving the idle, fire up, flying, and fire down states, while emphasizing the potential of the rive software for creating advanced animations.', 'duration': 346.964, 'highlights': ['The process of animating a Rive file involves adding triggers, conditions, and durations to create a dynamic sequence. The speaker describes the process of using triggers and conditions, along with specifying durations, to create a dynamic sequence involving different states of the animation, such as idle, fire up, flying, and fire down.', 'Emphasizing the potential of the Rive software for creating advanced animations, bridging the gap between design and development. The speaker highlights the potential of Rive as a software that bridges the gap between design and development, allowing for the creation of next-level animations entirely within the Rive file and user interface.', 'The speaker expresses excitement about using the Rive file for personal projects and potentially creating tutorials on its application. The speaker expresses excitement about personally using the Rive file for designcourse.com and potentially creating tutorials on its various applications, showcasing the enthusiasm and potential for personal and educational use.']}], 'duration': 447.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9_Gz-fFfFek/pics/9_Gz-fFfFek1499060.jpg', 'highlights': ["Covers creating state machines, animation reversal, and animating rive files with triggers, emphasizing rive's potential for advanced animations.", 'Setting up the state machine by placing idle after the entry and connecting elements to apply logic.', 'Creating a trigger for animation state switching using the space bar and setting the duration to 250 milliseconds.', 'Reversing the fire animation by duplicating and changing it to fire down, then rearranging the order of frames to create a reverse state.', 'The process of animating a Rive file involves adding triggers, conditions, and durations to create a dynamic sequence involving different states of the animation.', 'Emphasizing the potential of the Rive software for creating advanced animations, bridging the gap between design and development.', 'The speaker expresses excitement about using the Rive file for personal projects and potentially creating tutorials on its application.']}], 'highlights': ['The Rive app allows users to create and ship interactive animations to the web, apps, and games, with features like the state machine and community upload.', "The community section of Rive showcases various projects created by users, demonstrating the platform's versatility and potential for interactive animations.", 'Users can utilize inputs and toggle buttons within Rive animations, allowing for interactive elements and smooth transitions in the created projects.', "Covers creating state machines, animation reversal, and animating rive files with triggers, emphasizing rive's potential for advanced animations.", 'Setting up the state machine by placing idle after the entry and connecting elements to apply logic.', 'Creating a trigger for animation state switching using the space bar and setting the duration to 250 milliseconds.', 'Reversing the fire animation by duplicating and changing it to fire down, then rearranging the order of frames to create a reverse state.', 'The process of animating a Rive file involves adding triggers, conditions, and durations to create a dynamic sequence involving different states of the animation.', 'Emphasizing the potential of the Rive software for creating advanced animations, bridging the gap between design and development.', 'The tutorial explores how to use Adobe XD, including creating a new file with dimensions of 500 by 500.', 'It describes the interface layout, including the arrangement of artboards, layers, and drawing tools like rectangles and polygons.', 'It mentions the Animate tab for creating animations and state machines in Adobe XD.', 'Using the pen tool to create the basic structure of the rocket ship The tutorial explains the process of using the pen tool to create the symmetrical structure of the rocket ship, offering basic guidance for beginners.', 'Using radial gradient for artboard background color The chapter starts with changing the artboard background color to a radial gradient, allowing for customization and visual appeal.', 'Selecting colors for the radial gradient The tutorial demonstrates the selection of specific colors for the radial gradient, opting for a light blue in the middle and a darker shade at the edges.', 'The tutorial concludes with a time-lapse of creating a rocket ship image.', 'The chapter demonstrates the process of creating custom shapes using the pen tool, including the use of Bezier curves and adjusting stroke properties.', 'The pen tool is used to create Bezier curves, and the shift key is utilized to lock the curves on a 90-degree axis or other specific angles.', 'Instructions are provided for adjusting stroke properties, including color, thickness, and style.', 'The process of creating custom shapes is explained, including duplicating and grouping shapes, and adjusting their dimensions.', 'The process involves creating a linear gradient to design a flame, involving steps like adjusting color stops, adding opacity, and creating shadow effects, ultimately forming a rocket design.', 'The chapter demonstrates the process of creating a linear gradient to design a flame.', 'The design process includes adjusting color stops, adding opacity, and creating shadow effects.', 'The linear gradient is used to create a flame design, and the process involves adjusting color stops and adding opacity.', 'The design phase concludes with the formation of a rocket.', 'The chapter emphasizes creating a state machine in Rive for seamless animation transitions and multiple animations.', 'Demonstration of creating a looping animation with fine-tuned keyframe adjustments.', 'The process involves adding keyframes for subtle animations, adjusting playback speed and FPS, and using interpolation.', 'Final animation features a 45-degree rotation achieved through keyframe adjustments.', "The system's state machine facilitates seamless transitions between animations, ensuring smooth movement regardless of the animation's current position.", "Details the process of modifying the 'fire up' animation, involving adjustments in position, opacity, scaling, and rotation at specific keyframes.", 'Demonstrates the creation of a second animation through duplication, enabling the retention of previous values and subsequent manipulation.', 'The chapter details the process of animating a flying rocket, including duplicating the main animation, creating movement with key frames, and animating the flames to achieve a subtle flying effect.', 'Key frames are used to create subtle movements in the rocket, with adjustments made every 15 frames to simulate a flying motion.', 'The flames are animated by adjusting their opacity and position to create a realistic effect as the rocket moves.', 'The speaker expresses excitement about using the Rive file for personal projects and potentially creating tutorials on its application.']}