[00:01] create an advanced effect that uses motion and animation in YouTube's Effect you how to create animation to use in map nodes and Effect Maker. We'll be bounces up and down and an airplane that rotates around the user's head. The core
[00:18] of a brilliant user effect is animation. Incorporating motion and animation can effect to life. Before we begin building, we should break down and animation and any kind of motion in
[00:32] similar to how a clock ticks [music] every second. Motion and animation at work by changing an object's value in tiny amounts whenever one of those updates occur, creating an illusion that the object is smoothly moving. Animation
[00:46] can create smooth motion by rapidly updating an object's position using mathematical calculations. To create a simple motion where an object's size >> or opacity fades in, we could use a
[00:58] transition function to create a perfect linear transition. For our first example in this tutorial, we will be creating an animation with the user's screen slowly fades to black. We can do this by fading out a black overlay image's opacity
[01:11] value from zero to one. Let's start by adding an image object to the scene. We can upload the image that we want the screen to transition to by clicking on the upload file button. I will verify that the overlay image's
[01:24] I will verify that the overlay image's size is 720 by 1280 pixels as I want it to cover the entire screen. I will also set its initial opacity value to be 0%. Next, let's navigate to the visual script panel. Go to the
[01:38] triggers category and add a record node. We will use this to start the fading animation. We should also add a set category. Select the image object
[01:54] and then set the property of the image you set as the opacity. It will turn into a set opacity node that we can use to set the opacity of For creating a simple animation that has a linear transition from one start value
[02:08] to an end value, such as fading in opacity, we can use a transition node. Go to the data category and add a transition node. Set the transition node's start value to a value of zero,
[02:22] end value to a value of one, and the duration to 3 seconds. For reference, in Visual Script, opacity values are specified on zero to one scale, instead of a zero percent to 100% scale. So, an opacity value of zero, or
[02:38] 0%, means that the image will be fully transparent. And an opacity value of one, which is equal to 100%, means that the image will be fully opaque. This means that the value being output from our transition node will slowly change
[02:51] from zero to one over a timeline of 3 seconds, making the bike overlay image slowly fade in. For quick reference, the on start output of a transition node will run immediately after the transition node is triggered.
[03:05] The on change output will run continuously for every frame during the is running for. And on end output will execute as soon as the transition node has finished running, once the transition has fully
[03:19] Because they want to continuously update the opacity of our image in slot increments throughout the duration of the animation to create a slow fading effect, instead of having one direct, very sudden change, we will want to
[03:32] connect the transition node's on change output into the set opacity node's start input, and connect the transition node's value output to the set opacity node's opacity input. Finally, we need to trigger our
[03:46] transition animation. Connect the record node's on start output to the transition ads start input. Now, if we start recording,
[04:01] a simple transition animation. For the second part of this tutorial, we will oscillates a ball's Y position up and down. To achieve a simple up and down motion, we can use a sine function that adds a smooth bouncer controlling the
[04:15] vertical Y position and making it slow on the end and fast in the middle. Building on this, we can achieve a circular motion by combining two movements. We can use sine to handle the back and forth Z position, while using
[04:28] cosine to handle the side to side X position. Both functions will calculate their new coordinates from a continuously increasing time-based angle that, when combined, will cause the two wave-like motions to move in a perfect
[04:41] circle. I'll start by adding an image object to our objects panel and uploading an image to represent the ball that we want to move. ball that we want to move. I will also adjust the ball's size.
[04:54] To begin, let's go to our variables panel and add a few variables. single values with the type of number. We can call our first variable radius.
[05:08] And we will use it to determine how large the ball's movement is. The larger the value that we use for our radius means the higher our ball will jump from its center position. We can set its value to be 300.
[05:23] We will call the second variable angular speed. It will control how fast our ball's animation moves. We can set its value to two. Finally, the third variable will be
[05:36] called center Y. It will determine where on the Y axis our ball animation start and where the center of movement is located. We can leave its value at zero. Now that we have added in our variables,
[05:50] let's add a get node for all three of the variables, radius, angular speed, and center Y. We will use these variables alongside math nodes to implement the up and down motion.
[06:03] first need to use a value that is constantly changing. Go to the scene objects category and add a node called effect time. We can use the effect time
[06:15] node to get our effect's overall run time duration. Use it as a timeline and plug the increasing value into your sign node to turn a straight line of numbers into a repeating wave that will move our ball. Next, let's add a multiply and a
[06:29] sign node from the math category. Connect the angular speed variable's output value to the multiply node's input one and connect the effect duration output of our effect time node into input two.
[06:44] Then, connect the multiply node's output value into the sign node's input port. We're multiplying our angular speed by our effect duration because the effect duration is constantly increasing from the time that the user starts using the
[06:58] effect. If we feed this ever-growing number directly into your sign function, speed of movement would be slower and unchangeable because it would be fixed at a smaller default value. Angular speed acts as our control knob.
[07:13] With it integrated, we can easily change the angular speed variable's value to speed up or slow down our motion. Next, I'll add two more nodes, a second multiply node, and an add node.
[07:33] output into the second multiply node's input one port and the sign node's output value into its input two port. Multiplying our signs output value by our radius will scale the bounce height
[07:48] and determine the maximum distance that the ball can move from the center. Then we'll connect the second multiply nodes result output into the add nodes input one port and our center Y variables value output into the add nodes input
[08:02] two port. Adding the output of this calculation to our center Y variable ensures that our animation happens from the correct Y axis position. It also allows us to adjust the center Y variables value to
[08:15] change the position where the ball is bouncing on the Y axis. All that's left to do is add a set property node for our ball and update it. Add a set property node from a scene objects category and a frame update node from the
[08:29] triggers category. Set the set property nodes object to be our ball image and the property it is setting to the Y position. Which will transform the node into a set Y position node. Connect our add nodes
[08:44] output value into the Y position input of our set Y position node. Finally, connect the frame updates nodes next output into the set Y position nodes start input to run our motion. Now it's time to test our effect.
[09:00] Great work. We've created a bouncing ball animation. In the last part of this airplane that flies around the user's Since our bouncing ball animation uses similar logic to what our airplane
[09:12] animation will use, we can just reuse some of the same setup. I'll start by duplicating the bouncing ball project so we can keep a copy of our previous work while being able to freely work on and alter our new project.
[09:24] We can open up the duplicated project to begin creating our airplane animation. rename and adjust everything in our project accordingly to fit our new effect. I'm going to rename the project to be flying airplane and turn off the
[09:39] story for the image that we used for our 2D ball as we won't need it anymore and will be reusing some of its code to animate our airplane. Next, we need to import our 3D airplane model into a Facemaker. Make sure that your 3D model
[09:52] meets a Facemaker's requirements by ensuring that it is exported as a GLB file and that it contains less than 20,000 vertices and 20,000 triangles. We'll add a face accessory object. Click the add 3D model option and select to
[10:06] the add 3D model option and select to upload our 3D airplane model. We also need to add an environment light to our scene to ensure that the airplane model is being displayed in accurate lighting. Add a light object
[10:20] and change its type to environment. It's time to make this airplane fly. To do this, we will need to change our script from setting the Y position to the Z position in order to circle forwards and backwards instead up and
[10:34] down. Let's navigate back to our visual script panel. Go to the set Y position node that we were using to set the position of our ball. Select the connection line between the add node and set Y position node and
[10:47] press the backspace key to delete the connection between the two nodes. Then, change the object that it is setting to be our 3D airplane. we're setting to the object's Z position.
[11:01] Reconnect the add node that is providing an oscillating position value into the set Z position node's Z position input. You may start seeing glimpses of the airplane flying very fast and out of control in our effect preview.
[11:14] This is because we're now moving our airplane back and forth correctly, but the amount of distance and speed it is moving is too hot. We previously set our radius variable to hold a value of 300 when using this card with our 2D ball,
[11:27] but because 2D, which is measured in pixels, has a different coordinate system than 3D, which is measured in centimeters. 2D requires larger values, and 3D requires smaller values in order to make movements that visually align on
[11:41] the screen. Therefore, we'll need to adjust the values of our variables accordingly. Let's go to our variables panel to edit the radius variable. And change its size to something smaller, such as 14.
[11:55] Our airplane should start moving in a more natural back-and-forth motion. pathway, it will also need to have movement on the X axis. Let's duplicate our current code that is moving our airplane on the Z axis, and
[12:11] graph. Note that we don't need to duplicate the frame update, effect time, because instead of duplicating these nodes, we can simply connect all of our nodes together in order to be controlled by the same frame update. And by using
[12:27] shared values from the effect time and multiply nodes, we ensure that both horizontal and vertical movements will be perfectly synchronized. We need to make a few small changes to our duplicated block of nodes to update the
[12:41] X position of our airplane. First, I'll switch the set property node that's currently called set Z position node to set the X position property node to set the X position property instead.
[12:56] center X. It will work exactly like our center Y variable. Ensuring that the center of the X movement is set to this value. Change the get variable node from retrieving the center Y variable to
[13:09] retrieving our new center X variable's value instead. Then, go to the math category, and add a cosine node. We will replace the sign node in our
[13:21] duplicated code with the cosine node by connecting the first multiply node's connecting the first multiply node's output into the cosine node's input. And connecting our cosine's output into the duplicated second multiply node's input
[13:34] two port. The reason that we were replacing the sign node with the cosine node in the block of nodes is because we need our airplane's X and Y position to always be 90° apart from each other in their
[13:47] values in order to create a circular motion. Our sign node in our code handles the vertical direction movement, while our cosine node handles the horizontal direction. We can delete the duplicated sign node that is no longer
[13:59] in use. We should also connect the next output of our set Z position node into the start input of our new set X position node to ensure that both properties are being updated.
[14:17] The only issue left is that our airplane's spinning motion feels like it is spinning through the user's head, not around it. I'd like to adjust its center to be farther back on the Z axis and closer to
[14:29] the top of the user's head. We can go to our objects panel, select our 3D airplane, and then change its position in the and then change its position in the inspector to fit our preferences.
[14:45] that the airplane's vertical Y position when spinning around the head has been altered, but its Z position to adjust the center of the circle motion with the user's head has not been changed, even though we adjusted it in the inspector.
[15:00] object's Z position in our visual script, which is overriding the values in the inspector. In the code that is setting the Z position of our airplane, our get variable is still retrieving the variable that we previously named as
[15:14] variable that we previously named as center Y when creating our ball. And it is using that to determine the center of our airplane's motion on the Z center of our airplane's motion on the Z axis. Let's edit the center Y variable.
[15:27] Rename it to center Z to prevent confusion. And then change it to the C position value that we set our airplane to an value that we set our airplane to an inspector, which is minus 10.
[15:40] It would look a lot more realistic if instead of just moving in a circle, our airplane's angle rotated accordingly to where its position is. We can accomplish this by using the fact duration to calculate a rotation angle.
[15:53] First, let's add three new nodes to our graph. A multiply node, a subtract node, and a set property node to set the Y rotation.
[16:05] Next, connect the output from our first multiply node, the one that combines a fact duration and angular speed, and connect it to input one of our new multiply node. Because math nodes like sine and cosine
[16:18] work with radians, but our airplane's rotation property uses degrees, we need to convert the value. For input two, type in the value of 57.29. You may be wondering, why are we
[16:32] multiplying by 57.29? Think of it as a translator. One full Think of it as a translator. One full circle is approximately a value of 6.28 radians, but the equivalent 360 when measured in degrees.
[16:46] measured in degrees. Since 360 divided by 6.28 equals 57.29, multiplying by this number translates our math into the language of degrees that the airplane's rotation property will understand. Then, connect the
[17:00] output into our subtract node's input one. correct our airplane's rotation based on which direction our 3D airplane was
[17:13] originally facing when we imported it. You might need to subtract 90 or 180° depending on which way your airplane model faces to ensure that the nose of the plane is pointing in the correct direction.
[17:31] Then, set the set property nodes object to be our 3D airplanes. And its property to be set as the Y rotation. Finally, connect the output of the subtract node into the Y rotation input.
[17:46] And connect our set X position nodes next output the rotation. Now, our airplane will rotate when it is
[17:59] moving. Great work. We have successfully built a 3D airplane that is flying troubleshooting with animation and motion, the best solution is often to just experiment with values. A lot of times something may actually be moving,
[18:14] but because it is off screen view or has a high speed, it may not be visible. Remember, every bug is a bit different. So, each time you're troubleshooting, the solution may be different. Some common potential issues and areas
[18:26] to keep in mind are if your motion is too fast or out of control, check your values. If your motion is jumping or moving to a weird spot, check your center variable values. Overall, when you're trying to
[18:40] debug your code, the best solution is always to constantly break down your logic and test throughout your creation process. Before submitting, we should test our fight on our mobile device. Make sure that you're signed into the
[18:52] same YouTube account on your phone as you're signed into with that maker. Then, you can click the preview on device button that's located at the very top of the screen. It will open a pop-up that shows a QR
[19:04] code. Open your camera app on your mobile device and scan this QR code. YouTube camera on your phone. This will allow you to test your effect and ensure that it meets full expectations before publishing.
[19:19] Once we're happy with our effect, we can click the submit button. can add an icon for our effect. After adding an icon, we should add a
[19:32] After adding an icon, we should add a name and a description for our effect. that allows the users to interact with it, you'll be given options to choose an Instructions will appear on the effect
[19:46] what is needed. It is always best to add instructions so users can clearly understand how to use your effect. Finally, we can click submit to finalize and send our effect out for review. Want to explore and
[20:00] >> [music] >> You can check out some of Effect Maker's already made effect templates to learn from them and discover how you can use effects. For more info on how to use Effect Maker, check out the links in the
[20:13] description below. Thank you for watching and don't forget to subscribe watching and don't forget to subscribe for even more news and updates.