Introduction to Procreate Dreams Animation: 12 Beginner Friendly Exercises | Esther Nariyoshi | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Introduction to Procreate Dreams Animation: 12 Beginner Friendly Exercises

teacher avatar Esther Nariyoshi, Published Illustrator based in the US

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Learn Animation in Procreate Dreams

      0:54

    • 2.

      Resources and Materials

      1:30

    • 3.

      Lesson 1 Group Hug | Basic Concepts in Procreate Dreams

      23:55

    • 4.

      Lesson 2 Ghosties | Motion Trail in Procreate Dreams

      15:59

    • 5.

      Lesson 3 Deck of Cards | Creative Grouping in Procreate Dreams

      24:43

    • 6.

      Lesson 4 Animated Quilt | Frame by Frame Animation

      18:50

    • 7.

      Lesson 5 Tango | Applying Multiple Keyframe Tracks in Procreate Dreams

      18:08

    • 8.

      Lesson 6 Dreamy Noise | Blur and Noise Effects in Procreate Dreams

      8:53

    • 9.

      Lesson 7 Snowball | Cell Animation in Procreate Dreams

      19:34

    • 10.

      Lesson 8 Magic Door | Animate A Group in Procreate Dreams

      13:00

    • 11.

      Lesson 9 Trio | Advanced Clipping Masks and Blend Modes in Procreate Dreams

      12:15

    • 12.

      Lesson 10 Infinite Layers | Seamless Animation in Procreate Dreams

      11:18

    • 13.

      Lesson 11 Space Vacuum | Frame by Frame Animation by Procreate Dreams v2

      11:10

    • 14.

      Lesson 12 Threaded | Shading and Highlights in Procreate Dreams

      14:33

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

564

Students

17

Projects

About This Class

This Procreate Dreams class is perfect for anyone eager to dive into animation without any prior experience in drawing or animating. Each lesson is designed as a standalone experience, allowing you to explore various aspects of animation at your own pace. Whether you choose to follow the course in sequence or jump into topics that pique your interest, you'll find a flexible and engaging learning path waiting for you.

In this course, we leverage the intuitive features of the Procreate Dreams app to demystify animation. You'll be introduced to fundamental animation concepts through a series of engaging, easy-to-follow lessons.

Course Highlights:

  1. 12 Bite-Sized Lessons: Understand the fundamental principles of animation in a simple, easy-to-follow manner.
  2. No Drawing Skills Required: You don't need to be an artist to animate! This course is perfect for beginners without any drawing background. The class offers step-by-step instructions on using Procreate Dreams for animation, from basic tools to more advanced features.

  3. Modular Learning Experience: The course is structured in a modular fashion, where each module (or lesson) is self-contained. This modular approach offers flexibility, allowing learners to choose which lessons to engage with based on their interests or needs. 

  4. Versatile Application: Lessons are designed to be relevant both in isolation and as part of the larger course. This means that each lesson provides immediate value on its own while also contributing to a broader understanding when combined with other lessons.
  5. Progressive Complexity: Optionally, the lessons can be designed with progressive complexity, where each standalone lesson introduces concepts that become more sophisticated as one moves through the course, yet still retaining their standalone nature.

Who This Course Is For:

  • Beginners interested in animation.
  • Illustrators who would like to incorporate animation into the creative process
  • Individuals seeking a creative outlet.

Meet Your Teacher

Teacher Profile Image

Esther Nariyoshi

Published Illustrator based in the US

Top Teacher
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

2. Resources and Materials: Hi, my name is Esther Nariyoshi. I am a US based illustrator and I love to animate and I will be your instructor for this class. I know many of you who come to class are new to animation or illustration. That's exactly why I have designed this class to be beginner friendly. You will need zero drawing skills or animation skills to learn everything in this class because everything we will be working on is based on geometric shapes. All of those shapes will be provided for in the class resource area. By enrolling in this class, you will have access to the procreate Dreams template. And you will also have all the shapes that we will need in PNG form as well as in procreate form. You will also have a workbook that you can work through on each page. There is plenty of space for you to write your notes on, and I will also list key points that we cover in this specific lesson. At the very top of the page, I hope you're ready to dive in because that's exactly what we're going to do. 3. Lesson 1 Group Hug | Basic Concepts in Procreate Dreams: The first exercise we're going to cover is called group hug. This is a final product. I'm just going to show you real quick how it looks like. As you can see, we have four different dots, Circles coming from four corners. Let me just slow down and they all meet in a center to give each other a hug, then go back to their original position. This is a looping animation, which means that you can keep watching and you will not be able to see like a jump in animation. This is the exercise I'm going to walk you through inside this lesson. When you have a animation in mind, it's always helpful to plan it out in your mind or on paper over here. If we animate our project according to the sequence of the timeline, we would start out at the corners, at the four corners, then align everything to the middle as another turning point. And then for the second section of the animation, we move everything back to their corners. Again, this is one approach, but at this point of release inside per create dreams, the alignment tool is not quite there yet. I know in my mind that this point when everything meet in the middle is going to be very difficult. Because I'm going to spend minutes, if not more, just to make sure everything is aligned pixel perfect. We're going to find a work around for this issue. Instead of animating based on how time line progresses, we're going to start out our animation from the middle. We're going to add a key frame. If you don't know what key frame is, it's basically a turning point of an animation. It could be a change of color, change of position or rotation angle, and things like that. In our exercise, we're going to start from the middle of the timeline and also middle of the stage. And plant our key frames. And then we go back to the beginning of animation for movements. And then we go to the end. Basically that is our game plan. Now I'm going to go to the theater by tapping on this icon on the left, right next to the name of your project. Then I'm going to find my template. You should be able to download the template after you enroll in this class. Over here in our animation, we have a grid in the middle. This is just a visual aid that helps us to figure out the relative position of things. It will not be part of the final animation. Right now, I am going to start animating at maybe 1.5 second around here. It doesn't have to be super accurate. If you are able to download the procreate file, you should be able to have access to a bunch of geometric shapes that we're going to use in this class. What I'm going to do next is to import the circle onto the stage so we can start animating. Use one finger to slide up from the bottom of the ipad. Then because I have the procreate already open, I can just drag this up if you don't have it open and you can drag the icon of the percreate original and then stack it next, I like to keep it on the left. Now we have the percreate original app on the left and percreate drains on the right. I have the file open. Everything looks a bit messy because everything is in the color of white. What I'm going to do is to import a big circle, everything is named accordingly. So I'm going to just long hold the visibility toggle that I only need to see the circle. You'll probably see the grid in the middle as well. This grid has the same size as the grid. We have the percredreams as well right now. I'm going to import it. Just for the sake of my sanity, I'm going to give it a different color. I'm just going to select maybe this pink and then just drag it down. There you go. Now I'm ready to drag this layer inside. Percadreams. The process is pretty simple. Just pull out the layers panel and find the layer. Then just drag and drop to the stage. There you go. We have, we have a big.in the middle. I'm going to slide it to the left. We have the procreate dreams on full screen. This clupperboard icon is called Playhead because the playhead was in the middle when I did the import. It only fills up the playhead onwards, but I need to fill the whole track. What I'm going to do, there are two things that you can do. One way is to just hold the beginning. Maybe you'll see better when I zoom up a little bit. Hold the beginning of the track and then just drag it. There's another way you can do it. It's a two step thing. You hold the entire track and move it to the beginning. There you go, You see the alignment on the left. Then you long hold this track. You can see the context menu. This little pop up, you just tap on the fill duration and it will automatically fill the whole track. This is pretty handy currently. The dot is on top. But I would like to see my grid still. I'm going to just long hold my grid, Ignore the pop up, and then move it up that I can use the grid to reorient, reposition my dot. At this point there's not really a line to the center, that type of thing. You just have to do the best you can to keep it in the middle. Okay? Okay, this is great. I'm going to start like that. Then we know that we have four dots in the middle, right? Four circles. Oh, by the way, this is a good time to adjust the size. If this circle seems to be too big or small, you can adjust that by just tapping on the stage. Then you see the red dotted line bounding box. It disappears after a few seconds. It's frustrating when you do demonstration, but here we go. I'm going to tap on it again and then just drag the corner to resize it. By default, the reference or anchor is set to be in the middle, which is really convenient for our case. As you do more complicated animation, say that if the dot is swinging based on a different reference point, you can set that reference point, which we'll talk about later on. Right now, this looks good. I am going to remember we have four circles coming from four corners and they meet in the middle. We need three additional copies to copy a entire track. You can just long hold to prompt the context menu, Track Options, and Duplicate. We're going to do that a few times until we have four copies. Track, duplicate. Now we have four copies. There are some really convenient gestures that you might want to learn from the get go. If you're familiar with procreate, you probably already know the double finger to undo and triple finger to redo. Then it's probably intuitive for you to zoom in and out with just two fingers. I also really love for per create dreams in particular is three finger actions. Use your three fingers on timeline to scale the size of your track, the height of your track. If you want your tracks to be bigger or smaller, you can just slide it up and down. If you want to stretch the view of the track, you can use your three finger to slide left and right. Of course, you can also use two finger to zoom, which is what I intuitively do at this moment. After some work, we have four centered dots in the middle. I'm going to give them different colors. It's more interesting to animate. I'm going to go to Draw mode, which is this squiggle icon. When you tap on it, you will see the interface turned into procreate interface a little bit, I'm going to tap on the color circle on the corner. Then I'm just going to drag and drop. When I tap on one of the colors, you can just drag it. You won't see immediately because this is not the top layer. Let's do this. Color the top layer orange. Then the next one pink. Sometimes it doesn't color immediately, so you have to do it another time. But I don't think this is a feature. All right. Dark blue in the middle. Again, you don't really see the color change because it's not the very top layer. Last one, I'm going to color it yellow. By the way, just like procreate, you can turn the visibility of a layer on and off by just tapping on the check mark next to the name of your track. There you go. Now we have four dots right here in the middle. For those who chooses a different color than mine, you might have contrast issues between your dots and the grid. To fix that, you can go to the grid track and press it and tap on blend mode and then choose a different blend mode. Usually multiply is my go to, but it seems like linear burn is on my side today. I'm going to go with that. Now we have our four dots aligned in the middle. Let's tell porcreate dreams, this is, we want the position to be, which is by adding key frames. We're going to tap on the first dot first we want to tap on the playhead icon and then move the first option, move and scale. As you can see, as soon as I tap on that, you will see this looks like a crop tool icon. This is how the key frame of the move and scale looks like. I'm going to do that for the rest of the dots. Tap on the playhead move, move and scale. You want to make sure? Let me see might be better. I wish the divider between the stage and the timeline can be moved as well. But unfortunately, this is immovable. But you can see we have the key frames planted on the same vertical line. That means that this moment is going to happen at the same time. Now we're free to move to the beginning of the animation. The way I set up the procreate dreams will automatically add another key frame at the beginning. When you add any key frames in the middle, we need to do some modification. Because the key frame at the beginning had the same information as the keyframe that we just added. But in our animation, we want every circle to start from their own corners. This is pretty easy. I'm just going to tap on the move and scale key frame. And you can see it's already highlighting, in this case, I want my circle to move diagonally. But if you want your movement to be strictly horizontal or vertical, you can add another finger on screen. When you move, maybe start moving first and then add a screen and you will see these different highlight to help you move. To give you some a visual aid, I'm going to double finger tap to undo. And then just move my circle to the corner, make sure it's completely, make sure there's no overlap between the circle and the stage. Otherwise, you will see like this one weird pixel. Then let's move on to the next color. This is pink. There's another advantage of coloring your things differently because you can just tell you're working on the pink one right now. Even though if they need to be at the same color at the end, you can always recolor them back to the same color. But just giving yourself a bit of visual difference really helps. I'm going to tap on my key frame and then move the pink to the corner. Same thing for the blue and yellow. If I just play this section of the animation by tapping on the play button, you can see something is taking shape. Right currently we have everything come to the middle and then just stay there because we haven't done any key frame planting after the middle point. Let's go to the end of the animation and do the same thing. You can even actually, in my sample animation, I have everybody go to their own corner after they meet in the middle. And you don't really have to do that to make things seamless, because the beginning frame and the end frame has no circle on it. They're a seamless, what I'm trying to say is that your circle don't have to go to the same spot they came from. You can move them around, tap on the key frame, and then just move them. This pink can go here, this blue can go to a different spot. All right, let's give it a watch. It looks okay. Let's do a few things to make the animation a little smoother. One of the things that I like to do is to add easing into the animation. Right now, everything's moving at an even speed. If you really look closely, you can see the one on the right has slightly more smooth movement that usually makes things more interesting. I want to navigate around my timeline to make sure I have landed on the spot where I can see all four colors. I can choose a background color that works well with these colors. I'm going to tap on the time code at the lower left hand corner of the stage, of the backstage. Actually, the stage behind the stage is the backstage to tap on background color. I want something, I want it to be dark but not like pitch black. This might be a good time to use my pencil instead of my hand. Okay. I'm going to go with this brownish color and then just tap outside anywhere. At this point, I don't really need the grid. I can just turn it off by tapping on the check mark here. Then we can preview our animation. By the way, if you want to view only one section of your animation, instead of the whole time line, you can just zoom out three finger and just stretch out the timeline and you're only seeing parts of it. If you want to see the whole thing, you can do double finger pinch super quick that will fit everything back in. As you can see, here is our animation. As you can see at the last point, there's a bit of jump, but the jump happened outside of the frame. It's not like you will not be able to see it. If you pay attention to our sample animation at the beginning, you notice that there's a bit of color changing when the circles interact with each other. That because I have used a different blending mode, let's go to part where the overlap started to happen. This is a good point. I'm going to just zoom out so you can see better. You can long hold on the track that you want to change the blend mode to prompt the context menu and then tap on the blend mode. And you can change it to whatever you want. You can circle, you can cycle through different ones just by sliding it up and down. Color dodge seems to be fine. You can use different ones for different tracks. This one, whenever you apply the blend mode, it's going to apply to the entire track but the entire content of this footage. Blend mode. Okay, keep going to the blue part. This looks nice. If you pay attention to the middle. I'm just zooming in here. That is the color that we're going to see when everything is centered in the middle. I want to pay attention to the nugget just right here in the middle. It doesn't really affect anything when you change the blend mode of the last track because it has nobody else to blend with. I'm just going to switch out the colors. Switch out the blend mode of the top layers. I like it to be like a white ish color to brighten up the scene a bit. You can spend hours doing this. This is fun. Yeah, this is good enough. You can test it out. Double finger pinch, nice. Okay, I'm happy with this. You can also manually move the playhead. As you can see, they meet in the middle and rest a little bit. Give each other a group hug and then go back to a different corner of the world. I just love this by the way. If you really love one particular frame of your animation, you can export just that frame as a still image. You can just tap on the name of your animation. You can just tap on the current frame and it will allow you to save it onto your ipad or cloud or whatever location you choose. I'm going to tap on Done. Yeah, that is our first animation. Congratulations, I will see you in the next lesson. 4. Lesson 2 Ghosties | Motion Trail in Procreate Dreams: In this lesson, we're going to learn the steps to create this animation. As you can see, the ball comes in. Okay, I'm just going to manually play by scrubbing the playhead. The first circle comes in and then bounce to a different wall until the first circle exit out of the frame. And it seems like the rest of the circles are following the exact trail of the first one. That's why I named this animation ghosts. These seems like colorful ghosts that just follows the first one. Now we understand the basic movements of this animation. Let's get started. First, I want to grab the animation template and this is what it looks like inside. Then I want to import one of the circles to the procreate dreams from procreate original. Again, I'm going to use one finger slide up from the bottom. This is photos. I'm going to grab the procreate and just stack it side by side. I have the procreate on the left and Percy Dreams on the right. I'm going to find the big circle and then just drag that layer and drop it as soon as it's imported. I'm just going to slide the divider to the left. I only have the Percy Dreams. I'm going to move the grid to the top so I can see again, I can change the blend mode of the grid by long hold the grid track, then blend mode maybe multiply. All right, this is a visual aid. The grid is just a visual aid that I created to help you have a general understanding of your positioning. This time I actually don't need to center because at the beginning of the animation, the dot start from the outside. I'm going to resize it to a smaller size. It has more space to bounce around, tap on your circle, and then just size it down. Okay, And then I will move it outside. If you want to change the color of your circle, you can go to draw mode, which is the squiggle icon on the right hand and then find your colors. I'm going to go to palettes. Maybe choose this dark blue and then just drag and drop. You may take a couple tries. At this point, I think it's not a feature. All right, that's move this outside. I'm going to tap on. Done. We're exiting outside of the draw mode. So now we can animate for this animation, we have circles bouncing around. Instead of animating every one of them individually, I am going to only animate once and then offset each one of them to give you the illusion of trailing. Okay, now we're ready to animate. I'm going to start out by moving my circle outside the frame. And then define that position by tapping on the playhead. And then move, move, and scale. Now we have a seed planted, and this is a key frame. The next step, maybe a little bit before reaching 1 second, I'm going to add another position. As you can see, it snaps back. That is because I don't have a keyframe over here defined. I just tap on the key frame track that will allow me to define the position. I'm going to add another one. It's going to bounce one more time, it's roughly 45 degree bounce in here. One last one, if you have a key frame that looks like this, instead of having the white highlight, it looks like a darker shade of red. It's just ping. It's not a real key frame. When you tap elsewhere, you see that the key frame is not really there. Only when you tap on it, it turns white. That is a real key frame. Then I'm going to move outside. Now, I can't preview the animation. The general movement is great, but it looks a little unnatural because the movement from A two B is very linear. There's no slowing down or speeding up like a real ball. Also, I notice that I'm going to turn off the visibility of the grid for a moment, so I can see the boundary a little bit better. It's weird that it doesn't really touch the boundary. I'm going to fix that first to bring your time line here. Actually, first you want to tap on the key frame. And then zoom in just with two finger to make sure it's touching. There you go. Then go to the next key frame. If you know the absolute position of your key frame, you can put in the numbers. In this case, I'm just eyeballing. It's okay if you don't know the number, then I'm going to move it down a little bit. All right, let's give it another preview. If you want the whole stage to fit, you can just quick pinch with two fingers like that. There you go. I'm going to add a bit of easing, which is the natural movement of speeding up before it hits a wall. It slows down, which we covered in the first lesson. I'm just going to hold a empty space on the track and set all easings, ease in and out. You can see the slowing down and speeding up. To me it feels like this section just happens really fast. I want to slow it down by stretching out this section. It's really just moving this key frame to the right to give it more time. I'm going to move the subsequent key frames as well, and then just preview it. Okay, it's much better if you haven't caught it. What I did is to hold one key frame and then move it. If you have the keyframe selected, it actually turns into a rounded corner square, looks like that. And you can move it around to change its position. All right, this looks great. Since we got the main animation down, I'm going to add little trailings of the ghosts. I'm long hold this blue ball. Track, then Track options duplicate, Track option duplicate. I want to mention that there are two duplicate button or taps on the context menu. That's why I'm always going here first and then realize that I need to really duplicate the entire track instead of just one footage. Normally, if you just by tapping on this on the upper right hand corner of the context menu, you will actually duplicate only that footage right after it ended on the same track. That's not really what we need. I'm going to double finger do and hold it Track option and duplicate. This is the duplicate we want. Now I want to give each circle a different color that makes the animation more interesting. When the position separation happens, I'm going to tap on the squiggle icon here and then tap on the color, maybe this one as you can see on the track, you can see the preview has changed now tape on the third color. Actually, I'm going to drop it here. And another one, maybe the screen. Now, if I play a section of the animation, you don't really see the difference. That is because every, all the tracks have the same movement information, they have the same key frame happening at the exact same time. I'm going to change that by offsetting the timing of the three layers below. You just need to hold the track. And then move it to however long. Then move the last one the furthest. You can already see the separation. The first key frame of the blue kicks in first and then the first key frame of the green kicks in the last right. Now if we hit preview, we have the trailing motion going on, which is pretty neat, but we have a problem at the end. Let me just zoom in. When you go to the last possible frame, you will see that three of the circles didn't make it all the way out. There's a bit of yellow and the orange and the green are still inside the frame. That is because our last key frame of these three circles didn't make it before the animation ended. In this case, I'm going to grab the last one, last key frame and then just move it in that these circles have time to exit outside of the frame. That gives us a different problem. For example, these keyframes are too close to each other, that's going to make the last movement super fast. If I zoom out to see the entire animation, you can see the movement may be a little rushed at the end. Depending on how you set up your key frames, you can pretty much just hold your key frame and then move them to the middle. The more time it has between keyframes, the slower the change is going to happen. Real, Just keep an eye on those things. Don't be discouraged if this process takes you quite a few minutes to nail down. But once you find that timing that you're looking for, it's quite rewarding. I'm going to do a couple more things. One is to find a frame like this that has all four colors on screen. And I am going to change the background color just because white is flat. Maybe something dark like this, warm black. There you go. Okay, let's see, this looks good. Also, while they are still overlapping, I like to change the blend mode. The overlapped area looks more interesting. I'm going to start with the blue one long hold blend mode, maybe something lighter. Okay, here is where the yellow and orange overlaps, so I'm going to change the blend mode of the yellow to something else. Oh, this is nice. Then last but not least, I'm going to change the blend mode of the orange. Whoops, I lost it. Stewed again. Long, hold the orange and then just. Okay, I'm going to stay with linear burn. Okay, let's give it another preview. This looks great. All right, so this is our second animation. I hope you are having loads of fun and I will see you in the next lesson. 5. Lesson 3 Deck of Cards | Creative Grouping in Procreate Dreams: I hope your hands are warmed up and are ready to build more animation with me. In this lesson, we're going to build something like this. Let's watch it a couple times. Basically, we have a deck of cards sliding in from the left, bounced a little bit, and exiting out from the right. And one of the cards has some patterns on it. Now we understand the gist of things. Let's head over to our template. Here we are, inside the appropriate dreams template of this class. As always, we have the grid on its own track that will help us understand the spatial relationships. I'm going to get started by changing the background color. I'm going to tap on the time code and then tap on background color. Maybe I'm going to go far, somewhere between red and orange, angry orange color. And then just tap anywhere on screen to exit. The next step I'm going to do is to import a rectangle from procreate to procreate dreams. You might be asking, why don't you just draw directly on procreate dreams? Technically you can, but because procreate dreams is designed for animation of the capability in procreate doesn't really carry over to the dreams. For example, when you tape on the draw mode, when you draw something, say you want to draw a rectangle. It will snap when you add a second finger, but in procreate original, when you add a second finger is going to snap the corners into place to give you a perfect rectangle which is not available, at least at this time of release. Procreate dreams, that's why I am going to import all my shapes. At this point, my work flow is to finish drawing, procreate, and import everything. I'm going to slide up to deck the procreate next to Procreate Dreams. For the import I already have the layer highlighted is called rectangle. I'm just going to use my finger to drag and drop either to the stage or to the time line. Then just close out the procreate. Then I'm going to extend this drawing to cover the whole track. Pick up one edge by holding, you see the highlight. And then just extend it until the beginning. I'm going to position it a little bit, maybe like around covering maybe two thirds of the screen. I notice that my grid is underneath the drawing, so I'm just going to hold the grid and then move it up on the timeline. There you go. Just like this animation that we have worked on previously. Instead of animating everything individually, I am going to animate one time and then just offset the position, as well as timing for the subsequent carts. I'm going to get started by giving it a color. I'm going to tap on the squiggle icon, maybe choose a different, stronger shade of red. Right now I have parts of the shape outside parts of the shape on the stage. If I just drag procreate dream is going to factor that into consideration. Only covers the part that is overlapping the stage. Technically you can just do two drops, but when you move it around, sometimes there's like this really weird line that's created. Again, I don't think this is a feature. A work around would be to move your shape completely outside of the stage. When you color it, make sure it's selected on timeline and then just drop it. There you go. Then you can animate from there. Type on Done on the upper right hand corner to exit out of the Dram mode. Just like this animation on screen that we have worked on before. Instead of animating from the beginning of the timeline until the end, we're going to set a key frame in the middle. Because we know that at some point in the middle of the timeline, we want this rectangle to sit up straight. Pretty much. I'm going to tap on the playhead and type on move, move, and scale. As you can see, we have planted a keyframe right here in the middle. Then we can move over to the beginning to finish our rotation. At the beginning of the animation, the rectangle is pretty much rotated 90 degrees to the left. But before I do any more work on percreate dreams, I want to explain to you the concept of anchor. Here we are with a deck of posted notes. When you have the rotation reference point in the middle, the anchor, the rotation is going to look like this. But when the rotation anchor is at a different spot, the rotation looks very different. This is what we want to do for our case, because by default, the rotation center is right in the middle. But our animation requires our rotation to be in the corner. Let's set the rotation point. First I'm going to tap on our rectangle. You can see the four highlighted corner. Then maybe it's easier if I do this. You see this little white circle with three dots. Just tap on it to add anchor. Like I said, by default, the anchor is in the middle of the subject and then you just want to move it to the corner for our case. Then with this keyframe selected, as you can see, when it's selected, the icon turns white. Tap on any corner and then grab onto this little curve to rotate out of the screen. That's our first point to the end, we have another rotation point. Actually it might be helpful if I just play what we have so far. This dark red rotates to the center stage and stays there. Now we want to tell procreate dreams that we want it to rotate outside. I'm going to tap on the last frame, tap on the playhead move, move and scale, then grab any corner and then just start rotating. Now we can play again, we have the general movement done, but it looks really robotic actually, because the movement is linear. If you have practiced previously, you would remember that we have used easing to make the transition smoother. I'm going to hold T space between key frames and then set all easings then ease in and out. This will make the movement more buttery, Slows down before stops and then speeds up slowly. I've noticed one thing that when, when my rectangle it out, actually I'm going to leave it that way. I was going to say when it out this part shows maybe my original design was to cover the whole thing. What you could do is to just scale it up so that this area would not be empty. But I think this is not bad. I'm going to go with it. There you go. That's our general movement. I want to call your attention to the movement in the middle when it slides in, currently slows down to zero before it goes again. If you recall our sample animation, it actually bounced a little bit in the middle. I think this is more realistic and makes more interesting animation when you have more nuanced movement. It's actually not hard to do. In Percy dreams, what I'm going to do is to make our rectangle overshoot a little bit then. Back to the upright position before heading out. What I'm going to do is to add another key frame. When I tap on the empty space on the keyframe track, it gives me a non highlighted version of this keyframe. It's pretty much asking, do you mean here? And then when you tap on it, it will turn white. Means yeah, here, when you tap on it again, you should be able to have access to all these numbers right now, it's telling me that the rotation angle is 0.5 around 0.5 What I'm going to do is to make it go over to the other side. Probably negative one. Let's try that negative. There you go. Let's play a bit. Overshoots a little bit and then comes back again. This is much better, maybe. Let me just turn the grid off so you can see a little bit better. I'm going to play again. There you go. Now we have the basic movements done for our first card. Let's build another one. I'm going to pause this for second and hold the track in Context Menu, Track Options and Duplicate. I'm going to make modifications for the layer or the top track. First I'm going to give it a different color. We've talked about how you can use drag and drop in the draw mode to color it, but up until this point, we already have the position set and it's hard to drag it outside of the stage and then color it and bring it back without messing up the coordinates of the movement. I'm going to show you another way to color. First I'm going to find my playhead, and then on tap on filter. The last option in the live filters category is called HSB, which stands for Hue Saturation. And brightness, just tap on it. Then you can play with the sliders to change colors. I'm going to maybe go with something lighter. Okay, I'm going to go with this. As you can see, there's a bit of color changing happening. That is because at any point when you add a key frame, automatically procreate dreams add another key frame at the very beginning of the timeline to remember the original color or movements, whatever key frames that you have worked on. So in this case, procured dreams, remember the dark red that we had at the beginning? All right. If I'm just like scrubbing along the timeline, you can see the color change. Even though the majority of the changes happen outside of the frame. You can still see the color changing progression on the track. It's really simple to fix. You just need to hold the beginning key frame and then delete key frame. With that said, you can see the entire track, at least on the HSB track, only has one key frame. That means that this color is going to stay the same, is going to listen to only that key frame. Now when we play the animation, it's going to show this one color coming in and out. We know that we have two rectangles, but we're only seeing one. That's because they are completely overlapping. On everything possible. They are black twins. I'm going to separate them a little bit by offsetting the light pink one to a later time. When I do that, I also want to go to the tail of the animation to make sure nothing get cut. In this case, we have one key frame that needs to be brought in, that we finish the animation that we intended before the whole animation ends. Now we can see a bit of separation, but still, while everything is in the middle, they're still covering each other a little bit. If you remember our sample animation, there's a bit of spatial offset as well. In addition to time offset, I'm going to, so the top pink card. A little bit to the left, so it's not blocking the movements of the dark red. However, if you recall, we have already planted a bunch of movements. We have at least four key frames on the movements track. When we scooch it over to the left, we have to change the x value when you, let's try tapping on this one. You can see the x value and y value. When we scooch this entire thing over, we have to change the x value of every single key frame. Four, doesn't sound too bad, but there's a lot of math you need to do. Maybe like 200 pixels and you have to do the deduction every single time. If you have, I don't know, like ten key frames. That can be really tedious. I would not bring this up unless I have a work around. Let's talk about that. The workaround is, I really love it when I thought of this, basically we're creating a ghosting twin for our track. I'm just going to long hold and track options and duplicate. Right now, these two tracks are exactly the same in timing, movements, key frames, everything. And then we're going to group them into one group and animate that group. Instead, I'm going to tap on the timeline edit, which looks like two pieces of toast on top of each other. This will turn our pencil into a light saber that will allow us to select. Just select these two. Then we are going to Long Hold and the group. Now you zoom in to the name of the group. You can see there is a right arrow when you tap on it. It shows us the content visually, there is no difference when you play the animation. There's no difference whatsoever, because we know the two members of the group are exactly the same. But by grouping, it gives us an opportunity to animate the group. We can even just go to a point and then tap on the group. Actually, I need to exit out of the timeline at it to be able to have the bounding box tap on the group. And then just manually scooch it over. Just like that. If you want your movement to be strictly horizontal or vertical, you can add a second finger. When you're moving, tap on it with a bounding box and then just tap on screen. As you can see, there's like red hair line horizontally and vertically to give you guidance. This is fine with me. It is that simple. With this creative grouping technique, our goal is accomplished. Let's take another look. Both decks. Slides in from the left and then bounce a little bit and exiting out to the right. Well, I accidentally undid what I have done. I'm going to redo it by tapping three finger on screen. There you go. By the way, procreate can remember infinite steps to set that up, you tap on the name of the project and then go to Preference. Then in History tab, you can change the stored undo steps. Right now I have it set 1,000 but you can technically set it as infinity. I'm going to tap down here. The last thing I want to do before wrapping this up is to add some patterns to our top card. I'm going to expand that group. Then I want to create a clipping mask on top. I want to make sure I can see the entire boundary of the rectangle. Then I want to create a track by tapping on the top track and then plus sign and then track. So I have empty track by default. Now we have a new track added to the timeline. Just tap on it. Then we're going to draw mode. To add our drawing, I'm going to choose Go with white. And then just freehand, I'm only paying attention to the boundary of my animation because I would not be able to see what comes out. Anyways. Just want to make sure I have covered the edge, but not by too much. You don't even have to cover the entirety of the card because this is a clipping mask. Another way to do it is to animate the pattern together with the card, which is not my intention for this example. Tap done on the upper right hand corner. Your little drawing looks really lonely on this giant track. I'm going to fill this entire track with this drawing. I'm going to hold this one frame and move it to the very beginning until I see the highlight that shows me that is the very beginning. And then hold this tiny frame and fill duration when I play right now, it's going to show me that this drawing covers the entirety of the animation. Now I'm going to make this drawing into a clipping mask. If you don't know what clipping mask is, it's basically there are two layers. The top layer is in charge of shapes and patterns and colors, and the bottom layer is in charge of shape. Right now, I'm going to my drawing layer. Let me actually zoom in so we can see better. I'm going to hold this track then mask, hand clipping, mask. Pay attention to what happens here on the stage data. It's only showing the overlapped area. The top layer is in charge of patterns and colors. In the bottom layer is in charge of shape, which only the overlapped area shows when we play. Now I just undid what I have done, so I'm going to redo by three finger tap. If I play right now, there's one area that's a little problematic. Well, actually that's fine. You just want to make sure the diagonal lines cover all the parts of the pink square, it's perfect. Like I said before, if you want the pattern to move with your object, you would want to have a separate track. And animate them as a group together. Yeah, that's how we animate a deck of cards. My homework to you is to add another card on top of this group, so that you get a chance to revisit some of the key techniques that we have covered. And I will see you in the next lesson. 6. Lesson 4 Animated Quilt | Frame by Frame Animation: I hope you're having lots of fun animating in Procreate Dreams. In this lesson, we're going to do this animation. Let's head over to our template. Here we are inside Procreate Dreams template. For this class, I'm going to change the background color for my first step on the code. And then background color, change it to like this electric boo. The next thing I'm going to do is to import the procreate shape. To procreate dreams, in this case, we're going to have a diamond in the middle. I'm going to slide one finger up from the bottom and find procreate and stack it next to the procreate dreams. Here we are inside Procreate, I'm going to pull out the layers menu so I can see all the different layers. I'm going to find the diamond and just dragon drop either to the stage or the time line. If you do any rotation, this is a good time to do it because when you do it later on, it might mess up with your key frames. If you want to adjust the scale of the imported file, you can tap on the shape and then just grab the corner to adjust the scale. And then tap on any corner again to see the little curve to do rotation, which we have covered previously in the exercise. I'm going to double finger tap to undo because this is the perfect size that I in already. If fits perfectly, I'm going to start animating from here. I noticed the grid is under the shape, so I'm going to move it up. Just hold it and then move it up. Here we go. If you want to make the grid a little lighter than the current color, you can change the opacity by just tapping on the grid. And then tap on the playhead filter opacity, and then you can dial it down. You notice that when you add a key frame of any kind, procreate Dreams add another key frame at the beginning. This is the full opacity, which was the original state. You can just delete this first keyframe. The entire track will only listen to this keyframe. Let's go back to our sample real quick to take another look. This happens way too fast. I'm going to slow it down by manually scrubbing through the timeline. I'm just holding the playhead. Initially we have some very gentle outline of the pink grain or the grain texture that grows until it covers the entire diamond, and then you start shrinking from the outer edges. Maybe somewhere in the middle, it completely disappears. And the color, another shade of the grain texture comes in in the same manner and then dissipates. And then we go back to the original state. This is what we're going to work out. Let's go back to our file. I'm just going to find our file over here. We have two tracks currently. Top point is the grid. The second one is the white diamond without anything on it. I'm going to create a empty track first. On top of this grid, you can just tap on the plus sign and then hit track automatically. You should be able to have an empty track. We want to start at the very beginning. The first frame, we're going to use something that we haven't really utilized before. Tap on the draw mode. I'm going to go to a different color. I think the first one in the sample was pink. That is close enough. Here we go. Then I want to pick out a brush. You can choose any of the brushes that came with procreate dreams. I have imported my own brushes. I have an entire set that is grainy. I'm going to use this. Feel free to choose anything else. We're just here to learn the concept with the playhead. At the beginning, I'm going to start drawing, remember the first frame, we can just faintly see the grain texture outside. Don't worry if the thing falls outside. The diamond boundary because you can always just change it to a clipping mask. It will clip out the non overlapped area. Then from here, you can see this tiny line in between the stage and the time line. If you just drag it down, this will allow you to enter full screen. Then you will see this playbook which is like how animation started. You have like a physical playbook that you can draw each frame and then just flip through. It's called Flip book, we have that. At this point, I do want to turn on onion skin. Just tap on the string of numbers on the lower left hand corner, then show onion skin. You want to tap on it onion skin to change the color to something that is appropriate. I only want to see maybe one frame backwards and one frame forwards. It's not showing a bunch of frames that make things look really cloudy and then just tap outside and start drawing. It doesn't show anything because this is the literally the only frame that we have. Just tap on the next frame on your foot book. You can faintly see the previous frame as like a lighter version of it, by the way, you can change the onion skin opacity to something stronger if you really want to see the frames, well, I'm going to make it stronger because it's easier for you to follow along. I'm going to draw my second frame. It's going to be a little bit closer. I want to round this corner a little bit because I know eventually this diamond, which is 90 degree square, is going to be a circle. I want the corners to be progressively rounder and under next frame go even closer at any time. If you want to erase with the same brush that you're using for drawing, just select your brush and then long hold the eraser. It will sink the same brush onto the eraser. You can erase with the grain texture as well. The edges look natural, then move on to the next frame. Currently, our file is set 12 frames per second. Currently we have how many frames? We have three frames. I'm aiming to finish it with 12 frames. Maybe six frames to cover the whole thing, and then another six frames to like make the border shrink back to zero. You can always add additional frames or delete frames as you want. If you mess up the frame number, it's not a deal breaker, it's a bit oval. So I'm going to erase a little bit and then keep going from here. This is frame five, I think. Yeah, actually this is frame six. You know what? I'm just going to do seven plus five, instead of dividing it evenly visually, it's just going to look like it comes in slower and it goes out a little bit quicker. It's really helpful to have the grid right now because I notice that my circle is tilting a little bit. I'm going to raise a little bit to bring it back to focus. Then for this frame, I'm covering everything, but not every single pixel, because otherwise you will not be able to see the texture. Don't worry if it goes outside of the boundary. We can figure that part out at the end. All right, so now I'm going to start erasing. Actually, I'm going to go out a little bit just to give you a preview on the timeline. Tap on, done. Then we actually have six frames. I guess I need to work on my math. Perfect. It goes from the outside, slowly closing in. This is great. What I'm going to do is to duplicate this frame. In the past, we have duplicated the track, which will create another track on top. But right now we're duplicating the frame. Just long hold the last frame and then hit Duplicate. It will give us the same frame. Then from here we can work on erasing the frame. We're doing deduction from this point. I'm not going to use full screen because I want to have a better view and counting of my frames since I need to work on my math. There you go. I'm slowly a the outer part of our grain texture again to finger tap, to undo, and then hold this frame and then create a duplicate and then just highlight the duplicate. To work on this one, we're pretty much erasing our pink green texture, but as you notice, I intentionally left some pixels outside. We still have some visual texture instead of like really clean disappearance. Come here. All right, let's preview what we have so far. If you only want to preview one section of the animation, you just use two finger to zoom until you see all the frames you want to see. Right now, it's a little crowded because we can still see the jaggedy edges. I'm going to clean this up a little bit by tapping on the toasty toast, the two pieces of toast on the right, it's timeline added. This will allow us to select multiple content, then hold any of these content in the selection. Hit group. Now we have everybody inside one group. You can delete this empty track. You really want to make sure nothing else lives on this track, because if you delete the track, the entire thing goes away. Now, just like previously, how we have created the clipping mask, I'm just going to long hold this group to prompt the context menu Mask Clipping Mask. This will pretty much trim off all the edges that falls outside of the diamond. You can see there are dotted lines that indicates that this is a clipping mask of the layer below or the track below. When we preview this, it's a lot cleaner. Three finger slide on your time line to stretch it out. Let's just see, this part looks great. With the first round of animation done, we're ready to add a second color. You can replicate the same process by drawing from scratch, by using even a different brush and color to add more visual interest to it. I'm going to show you different way to do that, which is duplicating long hold and duplicate. I'm going to give it a bit of visual break after the pink grain texture disappears. There are a couple frames that is just nothing happens during the frame. It's almost like taking a breath. Taking a deep breath. It doesn't seem too obvious on the screen because everything happens so fast. Depending on how fast you want your animation to move, you can play with the timing, you can make the rest a little bit longer. Even then over here I'm going to add rotation to it, because right now everything is exactly the same. I'm going to just shuffle it a little bit by adding rotation. Tap on the playhead move and scale, Then tap on the key frame to add a rotation. Because this is a diamond shape, we're just going to rotate based on 90 degree multiples of 90 degree. We moved up a little bit, which is okay. Okay, snaps back. Because there's no key frame. I'm going to go back to this exact point to move my key frame. I'm going to delete the first key frame because I don't want things to rotate while it's in motion. Right now it's rotating between these two key frames. I just want the whole thing to rotate once and then stay that way. You don't see the motion of rotation, you just see the result of rotation. Let's take a look in this way to two parts of the animation doesn't look identical. I can also recolor it by tapping on the playhead filter HSB to change the hue. Who I love this color again, I'm going to delete the first keyframe by holding and then delete key frame. In that way there's no color changing between these two key frames. It will just be one color the entire time. When your key frame track only has one key frame, everything listens to only that keyframe. So this is going to be super interesting. Here we go. Now we have our animated quote. I will see you in the next lesson. 7. Lesson 5 Tango | Applying Multiple Keyframe Tracks in Procreate Dreams: Welcome to a new lesson. I hope you are super inspired and maybe already have 50 key frames of experience under your belt. In this lesson, we're going to do this animation. This is hands down, one of my favorite. Let me just slow down for you. At the beginning of the animation, there are two circles waiting outside. And then slowly they move in while changing colors. They stay in this position for a little bit, then they move back to their initial position. There's a lot going on. Even though it looks pretty simple, let me just zoom in and play a couple more times so we can take a closer look. There's also like confetti grainy snowy texture on top of that. All right, now we understand our goal. Let's get into our template and start building. Here we are inside our animation. I'm going to start out by importing our circle shape from procreate. Just grab procrete and drag and drop it next to Procreate. Dreams already have the right file open and I want to find my layer inside the layers panel and then just drag and drop it either to the stage or to the time line. Then I'm going to close the procreate. Right now I have it partially covering the time line. I'm just going to drag the left edge until it fills up the whole thing. Then I will along hold the grid to move it up. And then maybe even change the blend mode so I can see better. Right now, the blend mode is DC, which stands for darker color. It's not very helpful because it's dodging the orange. I'm going to go for multiply. This will allow us to see through everything. As you can tell, this is not right in the middle. It's okay because our animation is like the circle will not be dad. On, on the center, I'm going to make a duplicate of the first track, the circle track long hold until you see the context menu, Track Options and Duplicate immediately, I'm going to give it a different color. Tap on the squiggle to draw, then just drag and drop a different color. Now we can tell it apart. I'm going to get out of this draw mode because it will not allow me to select tap done on the upper right hand corner. Then now you can tap on any shape to move it around. I'm just going to move it horizontally. Roughly the edge, the left edge of the blue circle touches the one of the line in the grid. They are roughly in the middle. Then I'm going to change the blend mode so we get to see the third color when they overlap. Long hold the top track, blend mode. Yeah, multiply. Sounds good. I'm going to go for that. From this point on, I don't really need the grid for this particular animation, so I'm going to turn it off. It's not in a way, this is a key moment for our animation. If you'll recall, these two circles actually stay in this position for a few frames before they move out. I'm going to pretty much ask procreate dreams to remember this position by giving it a key frame. Tap on the playhead, move and move and scale. Same for the second circle, playhead move and scale. Make sure these two key frames are aligned. Then I'm going to add another one, just a few frames after that. When you first tap on it, it's not highlighted, it's asking is it here? And then you tap it again. Yes, it's here. There you go. These two frames right here are identical, functionally. We're asking procreate dreams to hold them in position between these two frames. Then we can actually go to the beginning to define our very first frame. In this case, I'm going to move this outside just on the shape, and start moving. You can turn the snapping on by holding a second finger on screen. That's our frame here. Then I'm going to do the same thing for the orange as well. Then let's go to the tail and LR time line to add a key frame. The blue one goes out. The orange one also goes out to the left. The blue one goes out to the right. Now we can preview our animation. Stay in the middle for a few frames and then they separate. Just like what we've done before. To smooth out the animation, I'm going to add as to the move and scale track. Hold the empty space between key frames, set all easing in and out. Same thing for the other circle set all easing in and out. You can see the movement is a lot more creamier. There is a slow progression, instead of linear. I'm going to give the background color a bit of accent, tap on the time code on the left, tap on background color. Just like a tiny bit off white maybe. Okay, good. I'm going to leave it that way. Now we're going to add some more action to our scene by changing colors. I'm going to just anywhere on either one of the circle, the type on Playhead filter, and then HSB, which stands for hue saturation and brightness. Then from there I'm going to change colors. Maybe this purple, yeah, this looks good. Slightly warmer than the green, than the blue. I'm going to stay there and then add another key frame O. This is nice. You can't add as many key frames as you want. The drawback is that it's a bit hard to see when things are off screen. You can't really tell the true color of this because it's dimmed. But that's okay. I'm just going to play a little bit O, that is very nice. Now, I'm going to move on to the other circle to change colors. Tap on the playhead anywhere on the timeline filter, HSB. Then on the same track, just tap at a different spot until it's highlighted. Then another one. At this point, they don't have to align the color. The alignment of color doesn't matter as much in this animation. Then I'm going to add one last one. There you go. Let's play again on the preview of the track. You can tell at any time what color is the circle. Just like what we can do for adding easing to our movements. You can also add easings to any other key frame tracks. I'm going to long hold on the HSB key frame track and then add easing functionally. This is going to make the color changing softer instead of linear easing in and out. It's pretty subtle, but it really makes a difference When you pay attention to little details like this. We already have two independent variables on our animation. I'm going to add a third one by adding noise to the scam. I'm going to tap on either one of the circles. Actually, I'm going to go to somewhere in the middle of the timeline. I can see both circles clearly tap on the playhead, then filter noise. Initially, nothing is going on. You can increase it. Let me just zoom in so you can see better. Icon for noise looks like this, which is pretty appropriate. You can play with different tabs and sliders for things like this. It's a lot easier if you learn visually rather than me explaining to you what those words mean. Okay, I'm going to go with that. Let's take a look at our setting for the noise. We're going to do something very similar to the first key frame, roughly it's around here. Then we're going to add another one. Actually what we can just move this one all the way to the end. We only have two key frames for the noise. You can still tell the movements which is really neat. Again, in the grand scheme of things, it's pretty subtle. Tap on playhead filter Noise. Again, I'm just going to move the second noise key frame to the end and then maybe even increase the amount for the first key frame. Let's play. There you go. I just love the texture with the noise. All right, we have three independent animation going on. We have movements, color, as well as noise. The next thing I'm going to do is to add some snow to the scene. They're like the confetti noise that we see in the sample animation. It's very similar to the animated quilt that we have done. We're going to draw the texture manually. I'm going to create a new track, tap on the top circle, and then plus and then track. This will give us a new fresh empty track on top. Let's start drawing. I'm going to go into draw mode. Actually, I'm going to do it in full screen. We have the access of the flip book. We can move it around by holding onto this little tab icon. Not really icon, this tab handle. To move it around, I'm going to make the color a little more prominent. You can see more contrast for the brush. I'm going to choose one of my own brushes. In the gentle speckles brush pack, it's this one called Gentle Speckles Wild Card. The reason why it's called Wild Card is because it changes color just ever so slightly. If you zoom in super close, you can see the color we have chosen is pink. But inside these speckles, there are different shades of pink. It just gives us more depth. That is our first stroke. I'm going to go to the next one, just do a very simple one. I'm going to keep going like this until maybe we have six or seven frames. It's really therapeutic. If you want to do more, go crazy. All right? I'm going to hit done. Over here on our time line, you can see that we have eight frames. I'm going to group them into one group. Tap on the time line at it icon and just draw through it. Then long hold one of the frames and then hit group and then delete the track underneath. What we're going to do is to keep replicating this until it fills up the entire timeline. Hold this group and duplicate and hold the second one until it fills out. It doesn't matter if it doesn't make it perfectly. For example, the fifth group got cut in half. That's okay because you won't be able to tell the difference, everything gets so similar. I'm going to select all of these group again and make one big group. This is a double group. Now we have this entire noise texture contained in one group. Then I want to delete this empty track. The reason why I want to have this contained in one group is because I'm going to change the blend mode. I can do it like 50 times for each individual frame, or I can group everything all at once and do it only once. When I long hold it, I can tap on blend mode and just cycle through different options. I'm going to zoom in to see the interaction of color. It's really nice, this is really cool. The texture on the outside looks pink and overlapped area looks green. This is really cute. And then you can keep going until the end and then decide whichever you want to stay at. I'm going to go with divide because I like the highlighting action that is going on here. Now let's preview our animation. A. All right, I hope you had fun. This is our animation for dancing circles. I will see you in the next lesson. 8. Lesson 6 Dreamy Noise | Blur and Noise Effects in Procreate Dreams: We have done a lot of hard work, and I'm going to slow down a bit in this lesson to make this dreamy, easy, relaxing animation. It's super simple, probably the easiest of all. Let's head over to the template for this animation. We actually don't need the grid at all, I'm just going to turn it off. I'm going to create a new T for my drawing. If you remember, all the different color blocks are drawings. I'm going to go to the draw mode, even just do full screen so I can see the flip book. But we're only going to make one frame. Just pick your favorite color and use your favorite brush. Start drawing. The only thing to remember is to cover a larger area than you think is necessary. Here is the size of our stage. I'm going to go further because when you move things around, you don't want the empty space to show. You can make your brush bigger to be more efficient and then just build your colors gradually. Technically, you can create more layers by tapping on the layers panel here to add more layers. But for this piece of animation, one layer is what I need. I'm just going to go around and just keep on drawing. You can vary the brush size to create different looks. Okay, Like this. Maybe I want to add some thinner strips in the middle. There's no right or wrong way to do it. All these colors are going to be like blurred into a colorful blob. It's really, really hard to mess up. You can even add on top of the original color, just one layer. If you have taken any of my illustration class, you know that I really advocate for having as many layers as possible. For illustration, it's really rare for me to draw everything on one layer. Okay, I'm going to stop here. I can do this forever. Press Done to exit out of the draw mode. Now we're done with coloring. As you can see, the colored area is almost like four times as large as the stage. I'm going to hit done. Then we have this one tiny frame on our time line. What I'm going to do next is to use form mode. Technically, you can just keep planting the different key frames for movement, but in this case, we just want things to move around. There's no particular timing that we need to keep in mind for. I'm just going to hit this circle to record. As soon as you tap on it, it will turn into this rectangle or actually square on the upper left hand corner. It has a blinking circle, indicates that it's ready when you are. I'm just going to use either finger or my pen to move it around. As soon as my finger or pen touches the screen, it will start recording. You will see the timeline will be quickly filled up. I'm just going to move very slowly around. All right? As you can see, we already have our key frames automatically. Add it. Let's play. It's looking great so far. If you want to fine tune the movement, you can just two finger tap on screen to undo and then tap on your original frame while the perform mode is still active and you change the movement. There you go. You can also change the playback mode. Right now it's looping. When you tap on the name of your project, it goes to timeline. You can change to loop or ping pong or just one shot. I'm going to go to ping Pong. Because I know my last frame doesn't really match my first frame. When I do Ping palm, the jump looks smaller. There you go, a little better. When the key frames are too close, you can also spread them apart. The movement is not very sudden in between these key frames. All right? This is the general look and feel. I'm going to add a couple of things on top of that. First, I'm going to get out of this perform mode. Tap on the den, then tap on the playhead icon. First thing I'm going to do is to add blur to the whole scene. Tap on filter and then gosh and blur. Then you can just increase the blur amount. You can add different blurring amount to the track if you want the level of blur to change. If you want to stay only at one blurry level, you can just delete the first key frame. It will stay consistent throughout, which is the case for me. I'm going to let the blur stay at the same level, but animate the noise tap anywhere on the drawing and then on the playhead filter noise, I'm going to animate the noise. I'm going to zoom in a little bit so you can see better. Because the noise is really subtle and you want it to be that way. I'm going to increase the amount you can really play around to see what's your favorite noise level or pattern of noise. Okay, this looks great. I'm going to state here. And then, and then just move the second noise key frame to the end. Maybe even adjust the first key frame to a stronger value because each type of keyframes are independent from each other. You can keep adding onto this list. You can make it rotate or change the scale, or do whatever ballet on stage. You can add all kinds of animation on top of each other to achieve whatever creative goal you have. But basically that's how I made this streaming noise animation. And I will see you in the next lesson. 9. Lesson 7 Snowball | Cell Animation in Procreate Dreams: Welcome to a new lesson. In this lesson, we're going to build this animation together. We have a few things going on at the beginning. We have this snowball that is rolling down. We have this hill that is slightly growing upward to the right. Then eventually, our snowball fell off of the screen and then came back up from the other side until this whole orange color covers the whole scene. Then eventually, after a few frames, this orange like blanket start moving up itself as well with a bit of shading texture. Then that's the end of our animation. Let's watch it a couple times. All right, now that we have a general idea of how the animation is going to look, let's head over to our template. Here we are, inside our template. The first thing I noticed is that our template is three second long and our previous animation sample is 2 seconds. To change the duration, you can tap on the name of your file and then go to Properties. Then type on the duration, and then you can type in the new time that you're thinking. For us, we want it to be 2 seconds and then hit Done. Now we have a 2 seconds active time frame. The first thing I'm going to do is to change the background color. I'm going to pick something that is dark. As long as your color contrasts well with the color of your blanket, that should be fine. I'm going to go with something like this and then tap outside. This animation is actually really similar to the animated quilt that we have worked on. We're going to start drawing by creating a new track. Tap on the sign on the right and then hit Track. I'm going to move the grid above so we can see it the whole time. Then I will head over to draw mode, tap on the squiggle, and then pick a color that I want for the blanket. I'm going to go with this orange color and then pick a brush. In this case, I really like this native brush that is called Blackburn. That is under, I believe, drawing, If you scroll down, you should be able to see drawing or painting. I like these two folders that has tons of really cute texture brushes. I'm going to go with this brush, tap on it, and tap anywhere outside to exit the library. I want to make sure the playhead is at the very first frame before I start drawing, I'm just going to draw a tiny corner and then move to the next frame if you want. You can go full screen to access the flip book. I'm going to zoom out just a tiny bit. In this case, I think it will also be really helpful to have your onion skin turned on. The onion skin will tell you where the before and after frame rests. Just tap on the timeline and show onion skin. This is my first frame, as you can see, because I don't have a after frame. It doesn't show the frame after. That. Makes sense, right? Tap on the second frame and just keep on drawing. Each frame is slightly higher than the previous one. In this case, I do want to keep my brush nice and big so I can preserve these texture as I paint. If you want to go back to any frames to add any frame in between, for example, this one went too fast. If I want to add another frame in here, I just need to tap on the before frame and then tap on the plus icon to add a new frame, I'm going to double finger tap to undo and then just keep on going. I think I would like this animation to be a bit choppier. Moving fast is the way to go. And this will probably be one of the last frames before this orange color covers the whole scene. Okay, I'm going to tap done on the upper right hand corner to take a look. Okay, it looks good. It looks like there's one area that I missed. So I'm going to go back in to color this area. Remember in the sample animation, the orange color holds a few frames. I'm going to extend this frame to maybe the length of four frames for four or five frames. Before I start moving this blanket, I'm going to actually go to full screen again. Then find an empty frame. Start pulling the blanket from this direction to this direction diagonally. And here is one last bit. Okay, let's exit out and see what it looks like. Okay, the timing seems good. Then the next thing I'm going to do is to add the white grain texture, like snow highlights, to my orange color or blanket. I'm just going to call it blanket. There are two different ways to do it. The first way is to add individual frames above your frames and set them as a clipping mask. In that case, you have to do it as many times, as many frames that you have. In this case, it's about ten frames. We have to do it ten times. I'm going to show you something a bit easier. Tap on the sign to create a new track. What I will do is to just draw frame by frame, just the highlight portion. And then group this whole track and turn it into one giant clipping mask as a track. Instead of doing it individually, I will do it one time only. Tap on your squiggle and choose a different color, maybe this white. Then I will use my greeny brush, which is what I imported from my own collection. I love making brushes. Maybe I'll go with this. If you want to import your own brush from procreate to procreate dreams, it's really simple. Just make sure you have two programs stacked side by side. Then just go to your brush library from procreate. If you want to import individual brush, just hold that one brush and drag it to the stage. Like how we import the shape. If you want to import the whole set, you want to the whole set and drop it to the stage. The key is to drop it to the stage, because if you drop it to the library, it will not stick the newly imported individual brushes live inside this imported folder. If you import the whole set, they will live at the bottom of your brush library. I'm just going to close it. Oops, there you go. Let's start drawing our high lights. I'm going to go back to make sure I have the right brush. This one is a bit too light so I'm going to go to grainy. Okay, this is better. Look at this frame. I already have some texture on it and I want to clear these out. You can either erase it or you can go to the flip book and tap on it and hit clear frame. Now we have a clean frame. Let's start drawing, so don't worry if it draws outside the boundary. This is intentional because it's going to be a clipping mask eventually. Okay, at this frame, everything got covered, so we don't need any highlights. Let's hit Done, and go back to our timeline. You can see the bottom one is the orange blanket and the top track frames are the highlights. I'm going to tap on the timeline edit to select all of these frames and then just long hold one of these options and then hit Group. Then I'm going to tap on my time line. Add it again to make sure this group is not highlighted. And then I can bring out the context menu over here. We want to turn this into a clipping mask, but we have empty track underneath it we want to get rid of, because we want the highlight to be clipped to the orange, not the empty track. Long, press the empty track, Delete track. Then we can long hold our group and then mask clipping mask. Let's play this section of the animation. You can see only the overlapped area shows up. That's the magic of the clipping mask. Then we can go to the other side of the animation, especially this frame where we can start adding the shading again. Go to drawing mode and pick a different color, maybe a darker shade of the orange or red. Then select your brush. You can go with a different texture. I'm just going to go with the same one I'm going to start drawing from here. It's easier if we go to the foot book because we can just tap on the next frames and navigate between frames easily. I'm just going to follow the edges of this orange until it's completely gone. Hit done. Let's do another preview. Okay, looks good timing wise. Now I'm going to turn this one, the shading group, into a clipping mask. Time line, edit, Select them all and group them. Then in this case, I do want to move this one directly above the object. I want to use it for clipping mask on hold. It doesn't show the entire list because I still have it highlighted. I'm going to tap on the timeline. Edit holds clipping mask in this way, we'll have it nice and clean. Okay, this is really neat. The next thing we're going to do is to add our tiny snowball to the seam. I was going to create a new, but it seems like we already have one here. I'm just going to take advantage of that. You can draw any shape natively here. But I'm going to import our snowball from the percreate. Just sliding up and stack. Percreate next to Percreate dreams. And find my layer to just drag and drop that layer onto the scene. I want to make sure at this point my playhead is at the beginning of my timeline. Then this is the initial position I lost. Okay, here over here, this white track is my snowball. I'm going to make sure I'm on frame one, Then I'm going to ask procreate dreams to remember this position by giving it a keyframe. Tap on the playhead, move and move and scale. Here we go, we have a tiny key frame and then we move on to the next one. Add a key frame and then move it slightly. Notice that our sample animation has shading for our little ball, but I'm going to do that last, add another key frame. That is next frame. We'll have it moving down a bit. Just keep adding one frame at a time. It looks like our ball is ball to exit. There you go. It's completely out. Now our snowball is outside of our frame. The next frame maybe still has a chance to make a tiny appearance here, then it will be completely out by this frame. I'm just going to add a frame to key frame to make sure he stays out. Let's play. Okay, looks great. This is slightly different than our sample animation, because our ball only made it through the scene one time before rolling completely off the screen. If you want your ball to come back again, like the sample animation, I would start out with a much smaller ball. I will make the movement a lot quicker, rolling down the hill. And then you would have time to come back again and roll down again before the orange covers the whole scene. Now I'm going to add shading to our ball. Make sure you have a empty track above Tap on plus and track. Here we go. I'm going to start drawing. This time I'm going to use light blue for shading. Make sure I have the same texture brush and then tap outside and start shading. I will group these four frames into one group and delete the empty track. You really want to make sure the empty track is fully empty. Sometimes there's still things on it, especially if your timeline is busy, Then I want to, I selected by tapping on the timeline to make sure it's not highlighted again. And then mask clapping, mask. Okay, it looks good to me. All right, now let's preview the entire animation. Actually, it's a bit distracting because it stays here. We actually don't really need it after that because it's not going to make it all the way back. You can just tap on the playhead and then at it and then split. You can just delete the second half. Delete content. Let's preview again. Nice. Here is our little snowball annuation. I hope you've had fun working on it and I will see you in the next lesson. 10. Lesson 8 Magic Door | Animate A Group in Procreate Dreams: Welcome to a new lesson. In this lesson, we're going to build a magic door together. Imagine the store is connected to space. Whatever that comes in from the left will disappear into the space to the right. As you can see, if we slow down the animation, not only these circles are moving in from left to right, they're also spinning around themselves as well. Now that we have a general idea of how this animation is going to work, let's head over to our template. Here we are, inside the procreate dreams template. The first thing we're going to do is to import a couple of shapes that we will need for our animation. I'm going to stack, procreate next two procreate dreams, then access my layers to find the magic door layer to drop it to the stage. Same for the big circle. Then I'm going to turn off the procreate. Notice that these two shapes are bigger than what we need. I'm going to resize them now. It's better to resize them when you have zero keyframes on your timeline. Otherwise, you might accidentally add the scaling and the rotation as part of the animation. Just tap on the shape and resize it. Same thing for the door as well. It's really hard to see because it's the same color as the background. I'm going to recolor it to something darker. There you go. Tap done. Once you're done recoloring, I will rotate the door as well. Tap on the shape and then the corner and grab that little curl to rotate. You can add a second finger on screen to turn on the snapping. I'm going to position the door to the right a little bit. Actually going to make the circle a bit smaller. Oops, there you go. The next thing I'm going to do is to add a smaller circle on top of the big one. I'm going to create a duplicate first long hold in the Context menu, Track Options and Duplicate. Tap on the top circle to recolor it. Just drop it. Then I'm going to tap to it so I can rescale it. Now this is a good size and I'm going to position it to the left, judging from the sample animation. I know these circles will be moving together. I'm going to select them and group them together. Tap on the time line at it and then select both tracks and long hold to group them. Then I'm going to delete the empty tracks created after the grouping action that our timeline is not cluttered. Now they're inside a group, we can start animating this group. Go to the beginning of the timeline and tap on the playhead. And add a keyframe to remember the initial position, move and move and scale. Right now, the position obviously is not where we want when you move it. It's going to override the information we have right now. Then go to maybe 23 or three quarters of the way to add another key frame, this keyframe at this point of time. I'm going to move this circle across the screen, outside to the right when we play. Right now, it is the basic movement of moving across the screen. If you remember the sample animation, not only the pair would be moving across the screen, you will also rotate around itself. If you tap on the first key frame, you can see the last parameter says rotate. It says zero. That's our initial position. If you tap on the second key frame and you can change that number, I'm going to set it as maybe 400 and see how fast it looks. Now we can play again. It's pretty nice if we scrub through slowly, you can see the rotation. Then I'm going to long hold the space to set all easings, both the rotation and the movement will look a bit softer. Ease in and out. Just like the ghost animation that we have worked on. Instead of animating four individual groups, we're going to animate only once and create duplicates. And then just offset the duplicates on the time line. Now we have the first group animated. Let's create duplicate track options. Duplicate a few times until we have four identical groups. If we play right now, nothing seems to have changed. That is because these four groups share the same information on everything. We're going to offset the groups on the timeline. Whenever you do the timeline offset, you just want to make sure all your key frames are included in the active timeline, which is the case for us. I'm going to recolor for the next step. Navigate on your time line to make sure you can see the circle that you're going to recolor. The bottom one is the first circle or the first pair. The next one would be the second. I'm just going to go to draw and then pick a second color and then just drag and drop it. Right now I know these two circles are in one group. I'm going to expand that group to make sure I only recolored orange part, the second circle. And then just drag and drop. And then expand the third one to work our way through it third one, maybe this green. Nice. Then here goes our last one. I'm going to just dragon drop onto the circle. As you can see, the contrast is not super obvious. I'm going to actually apply blend modes on top of this as well. I'm going to long hold my group and then go to blend mode. To cycle through the different way to blend, you can reposition your stage so that you can preview it better. Blend mode. This makes it more visually interesting. For example, if I go with this, let's pick a color that's a little more obvious. For example, this one I'm going to hit done. Before this last pair enters the space, it looks brown. But when it starts to intersect with the magic door, it changes to blue. That's the power of the blend modes. Now we can preview what we have so far. Let me turn off the grid real quick so it's not in a way, okay, nice. Now we have a problem, because our magic door is supposed to be connected to the space. When things go in, you don't really see them again once they exit out. We have a little problem here to solve this problem. The easiest way would be to create another track on top. And then just draw with the background color that top track would be blocking our view. Let me show you real quick, Let's go to the very top track that we have. And then hit this plus sign to add a new track on top. What we want is to sample the background color. Actually, before I do that, I'm going to change the background color because it's too plain, not onion skin, the background color. Just a little bit of color. I'm going to change it to something that is off white, then tap outside. Then I will just sample this color by long holding anywhere to sample the color. What I'm going to do is to find a frame where the circle is exiting out the door. Then on this empty track, I will select a brush that have similar texture as the door. I'm going to go with maybe drawing. And then Blackburn, this evolve looks better then I will just color on top. It looks like I'm raising the pair, but actually I'm just painting the same background color on top. When I was designing this animation, I thought of many solutions including creating clipping masks and layer masks. And turns out I'm overthinking. The easiest way is to just create a block To block it, you know that from previous exercises, whenever we draw it only fills up one frame. But in this case, we want this frame to stay. I'm going to move this frame till the beginning of the timeline. And then long hold this frame and tap on fill duration. They will fill up the whole time when we play right now, it gives us the effect that we want. Perfect, that's our magic door. I hope you enjoyed working with me on this animation, and I will see you in the next lesson. 11. Lesson 9 Trio | Advanced Clipping Masks and Blend Modes in Procreate Dreams: Welcome to a new lesson. In this lesson, we're going to build this animation together. It seems like there's a lot of things going on. Let's slow down. Initially we have three squares rolling in to the scene. Then they stay a little bit until they run away, either upward or downward, Before the animation start again, let's watch it a couple more times. All right, now that you understand the general idea of our animation, let's head over to our template. Here we are, inside the Procreate Dreams template for the class. The first thing I'm going to do is to change the background to something that is off white. Just tap on the time code, background color, something slightly warmer. Then I'm going to import the shapes that we will need. Slide up to stack Procreate. Next two procreate dreams, I will be needing a couple circles and one square. Then this small square, you can just drag and drop it to the stage. You should be very familiar with it by now. This little vertical bar can be really slippery. Now we have the procreate dreams in full screen. I will turn off the circles for now because I will be focusing on only the squares. For the first phase of the animation, I'll give it a different color. It's contrasting well, maybe this dark blue and then just dragon drop it. I'm going to position it to the middle. Tap on it, make sure you see the bounding box and I will put it to the middle. I will need a couple more duplicates of this square track options and duplicate. If you want the movement to be strictly horizontal, just hold a second finger. When you move it will turn on the snapping, Just like the group hug animation we worked on at the beginning of the class. Instead of animating from the beginning of the timeline, we're going to animate from the middle. Because we want procreate dreams to remember this position. Tap on the timeline. Playhead, move and move and scale to add a key frame, move and scale. Then with that done, we're going to go to the beginning to define the initial position. In this case, it should be outside of the screen. Just tap on the key frame and make sure it's highlighted and then exit out of the screen. Same for all three. Then I'm actually going to go to a few frames after the middle frame to add a identical key frame. It might feel weird, but what I'm really doing here is to ask procreate to do nothing positionally from frame two to frame three. Nothing happens visually. It looks like those squares stays in the middle. Then I'm going to move them out of the frame. Tap on the track, and then tap it again to highlight it. Then the third one, which is the middle square, I'm going to move it down. It's more interesting now we should have the basic movements done. They come into the middle and then they move away. Let's add easing to the movement tracks. Set all usings to use in and out. Another thing I want to do is to add some rotation, at least for the part when they come in on the first frame. As you can see, the last parameter says rotate. You can define a different number. I'm going to go with maybe 360, then same for a different square, 36360. All right, when I play right now, you can see the rotation happening. Do you can add a different rotation number for the last frame as well? They're rotating as they leave the stage. 360 seems fine. Okay, so now it looks like our squares are ready and in position. Let's move on to our little circles. I'm going to turn the grid off for now because we won't be needing it. I will also turn the visibility on for our circles. We have a couple over here. Let's work with it one at a time. First, I'm going to give it a different color so we don't have trouble seeing them. Maybe this pink dragon drop. And then, and I'll color the second one as well. Maybe yellow. Okay, great. Right now there are just one static shape throughout this animation. I'm going to move it around by using the perform, I will actually dim the yellow circle for now so we can focus on the pink one. Eventually, this pink circle is going to be a clipping mask for the squares. Whenever the circle overlaps with any of those squares, it shows the area where the circle does not overlap with the squares. It just does not show. From this point on, I'm going to see the squares as one group. I'm going to tap on the timeline edit to select all three tracks to group them. After each grouping, you will see MT tracks. I like to delete them right away because the number of the tracks are limited in procreate dreams. I don't want to empty track to take up the resource. Now I have all the squares grouped under one group. Next step, I'm going to move the circle above the group, because this circle is going to be a clipping mask. Clipping masks always sit above their main parent. I'm going to tap on the perform mode and go to the beginning of the timeline to just drag this circle around. Because this is going to be a clipping mask, I want this circle to remain on top of these squares as much as I can. Then with that recorded, I'm going to turn this officially turn the circle officially into a clipping mask. Just tap on mask and clipping mask. If I hit play right now, you can get a glimpse of the circle when it overlaps with the group. Then for the exact same process, I'm going to add another circle. Remember we import it two circles. I'm going to turn the second one on and maybe even change it to a bigger size. It's more interesting then move it above each parent track can have multiple clipping masks. I'm going to move this yellow circle around. Go to the beginning of the time line. Hit Perform and then start moving. Okay, then after the movements are recorded, long hold that yellow circle and then tap on mask clipping mask. You can hit play to preview. Now you can see both circles. I'm going to make it even more interesting by changing the blend mode of the yellow circle. That when the yellow circle and the pink circle intersect, going to give it even a different color, a third color just cycle through the list. Okay, looks good. You can fine tune by dragging to a different moment when all three colors overlap. And then you can change the blend mode to fine the colors. Actually, I like this orange. Whoa, okay, let's go with this. Alright, perfect. So that is our animation for this lesson. I hope you had fun, and I will see you in the next lesson. 12. Lesson 10 Infinite Layers | Seamless Animation in Procreate Dreams: Welcome to a new lesson. In this lesson, we're going to build this animation together. Let's slow down to see what's going on here. At the beginning of the animation, we have one set of triangles. They open up like a set of doors revealing a second set. Then they also open up revealing a third set which shares the same color as the first set. When we loop this animation, it just seems like we have infinite amount of layers. Now that you understand the logic of this animation, let's head over to our template. Here we are, inside our template. The first thing I'm going to do is to shrink the time line to 2 seconds. Just tap on your name of the file. And then properties, and then duration and set it as 2 seconds. Now we're going to work with a much shorter time line. For the next step, I'm going to import the shapes that I will be needing. Stack your next to Percreate dreams, I'm going to need a small circle as well as the triangle. I'm dragon dropping onto the stage right now. They're white on white. I'm going to change the background color. Just tap on the time code and then background color. I will not be able to see the background in the animation. Just pick something that contrasts well with the white. I'm going to go with this. Before I do anything, I'm going to recolor the triangle. Pull it outside of the frame so that you can go to draw and then just drag and drop your color in one go. I'm going to go with this pink. I know that I will need another triangle shape. I'll just long press and then track options and duplicate. I'll color the top one, maybe this orange color. Just drag and drop. Okay, there you go. Then I can go back to the timeline. I'm going to tap done on the upper right hand corner. I'm going to focus on the circles first because they stay in the same position for the duration of animation. I'm just going to take care of them first and not think about it later. Make duplicates long hold track options duplicate until you have four. And then just position them to four different corners roughly showing the same amount. Then I will group them together by tapping on the time line. Edit. Select all four and group. I will just delete the empty tracks that are created after the grouping action. I will move this group up to the very top because I know that they will be sitting up there. Next, I'm going to move this grid up. I will be able to see it as I move my shapes. I'm going to move this triangle to cover one side of the screen of the frame. I want to make sure it's touching these two points. Then I'm going to go with this pink one. I will need to turn it 90 degrees, grab one of the corners, and then turn the snapping on by holding one finger on screen. All right, this is good. I'm going to group them together. Tap on the time line at group select and group I will make duplicates. I know that I need three sets of triangles. I'm going to do it a couple of times. Make sure you un highlight the time line at it. You can see the full context menu. Tap on Track options. You do that a couple of times until you have three sets of triangles. And I'm going to delete this empty track over here. I know the first and the third set share the same color. I'm just going to change the color of the second set. Tap on the playhead anywhere, filter HSB, and then just change colors based on that. I'm just looking at the preview on the timeline to determine the color. If you want to see it closer or more clear, you can untoggle the visibility of the first set. You will be able to see the color change much better. Okay? Maybe something like this. Okay, then I'm going to delete the first automatically generated keyframe so that there's only one HSB keyframe on this entire track. Then I will turn the first group back on. Before I animate, I'm going to turn the second group 90 degrees. Now I can see this second group, select it and grab the corner and then just turn 90 degrees. It will likely not align right in the middle because initially this compound shape was not aligned to the frame. Just look at the grid to make sure it's intersecting with these two points. Now we're ready to add some motion. I will not be needing the grid for the rest of the animation, so I'm just going to turn it off. Now I'm going to expand the first group to animate. I know this is the exact initial position. I'm going to add a key frame there to ask procreate dreams to remember that move and scale for both triangles, move and scale. I'm moving a bit fast in this lesson because I know that a lot of the steps we have already covered previously, maybe a little over halfway, I'm going to add another key frame on this keyframe for both triangles, they will be moving completely outside. This is out and highlight this second key frame. And then add easing, long hold on the empty space. Set easings, ease in and out. All right, if we play right now we have the first opening motion which is great. And then we can close our first group, collapse it. They only take up to one track. Then we will be working on our second track. Let's find the moment when they completely when the first set of triangles are outside of our site, that's when the second set begin to open. They still look like they have the same color as the first set. That is because the recoloring happens in this one key frame, Instead of changing the original color, I'm going to tap on playhead and add move and scale for one of the triangles I'm working on, the second G. This is the sandwich, this is the cheese between the buns. The second set of triangles move and scale. Then I want them to stay this way and then open up maybe a few frames later. For the second set of triangles, we have three key frames. The first two key frames are exactly the same. What we're asking procreate dreams to do is to keep it same all the way until we say yes, you can change now. Now we're going to add the change, select the triangle that you're working on to move it away. This is the third key frame. Okay, now we have the opening motion done for the second group. Again, I will be adding easings. All right, let's see what we got. All right, this is our infinite layers. You can change the speed of the opening motion by changing the distance between keyframes. And that may take a bit of tweaking, but pretty much this is our infinite layers animation. I hope you had fun and I will see you in a bit. 13. Lesson 11 Space Vacuum | Frame by Frame Animation by Procreate Dreams v2: Welcome to a new lesson. In this lesson, we're going to build a space vacuum together that works like this. At the beginning of our animation, we have a pile of snow on the left, and our vacuum on the right. Slowly but surely our snow starts to grow and stretch and eventually gets sucked in into the vacuum and disappear into the space. Notice that towards the end of the animation, we also have a new pile of snow forming on the left. When we loop this animation, it looks seamless. Now we understand the general logic of this animation. Let's get to work. Here we are inside our template. I'm going to shrink the timeline first by tapping on the name of my file. And then go to properties and then duration to 1 second. Because we have 12 frames per second, and we're going to draw frame by frame animation, each additional second is 12 frames. We only need 1 second to finish our animation. I'm just going to reflect that tap done on the corner. Now we only need to work with 1 second. For the next step, I'm going to change the background color by tapping on the time code background color. I'm going to go with something grayish blue. As long as this color contrasts well with the color of the vacuum and the color of the snow, you should be fine. Then I will import the shape for my vacuum. Go to procreate, and then just drag and drop it to the stage or to the time line. I'm going to extend this vacuum throughout this time line. And I will drag it outside to recolor it first, tap, draw, then go to a color that is bright. Then I'm ready to resize the vacuum. I'm going to make it smaller first, and then I will use my pencil to rotate it. Okay. And then move it to the side. This is the general position of the vacuum. Then I'm ready to draw my snow. I'm going to start out by having a empty track. Tap on the plus sign. And then I know this track is going to live under the vacuum, because this track is going to have the snow on it. And then you want to delete any empty trucks that you are not going to use. Instead of drawing from the very beginning, I want to just mark my last frame first. I'm going to go to draw mode and pick a color from my snow. And choose a brush. I'm going to go with this black burn brush that is under drawing because it's nice and fluffy like the snow. Then I will just draw a tiny bunny tail of the snow. That's the last frame that I will see for the first pile of snow. And then I will start drawing at the beginning. Because the drawing is not going to be super detailed. I also need to see how am I doing timeline wise. I'm going to not draw in full screen mode. In general, you want the belly of the snow to grow faster. We also want the height of the snow to shrink as the time goes on. It gives us the illusion of the pile stretching to the right. Whenever you're done drawing one frame, just tap on the empty space next to move on to the next frame. Our snow pile is growing thinner and thinner. Then eventually you start to see the tail of the pile. The tail starts to disappear. It's getting smaller and smaller until the end. Actually, I want this to be. Tiny bit slower. I have the onion skin turned on so I can always see and compare the current frame and the previous frame. Okay, now let's take a look. I'm going to tap down to exit out of the draw mode. All right, it looks good. And I also want to add the new pile of snow to the scene. Tap on draw. Eventually you want this new pile to grow about the same size as the beginning of the animation. The changes are not too drastic. Okay, let's see what's going on here. Tap done, and then start playing. All right? It seems like the snow is going well. I'm going to actually turn off the grid because I won't be needing this. Then for the next step, I'm going to animate the vacuum. When you activate the perform mode, you also want to fine tune your motion filtering tap on modify. In our case, we want our motion filtering to be all the way down. In this way, when we perform or shake our vacuum, it will register more movements. But if you have the motion filtering turned all the way up, it's going to register less. Key frames also will make your movements smoother, which is not what we want. We want it to be low. Now we have that activated. We have the timeline at the beginning, we can start recording our motion. By the way, I also change the angle of the stage. It's just more natural for my wrist to move. I'm just going to do this. Then I will play the animation and see what we have so far. Okay, not bad. If you look at the move and scale track, we did not use every single opportunity to make the movements. We can manually fill these up and then just tap the position and then highlight it to manually move it to a different spot. In this way we will make our vacuum appears to be more powerful. Basically, it's going to have more movements registration. Okay. Much better. Now we have our general movements done. Let's add more details to our scene. In this case, I'm going to add more snow. I'm going to go to the beginning of the timeline and create a empty truck. And I will use this track for snow. I will be drawing those in. You can choose a color that is same as your snow pile and you can also choose a creative color. Let's go with this bright blue and see what we can create. I will pick a texture brush that I imported. This is one of my own that is called gentle speckles. This particular brush is called Wild Card. I'm going to just draw across the scene. As you can see, the reason it's called Wild Card is because the color shifts. Even though you're just using that one color, I'm going to use yellow just to make it brighter. Make the contrast exaggerated. There you go. Then just keep drawing. Since we only have 12 frames to work with, I'm just going to draw all these 12 frames. But if you have more frames than you're willing to draw, you can just draw maybe five to eight frames. And then just group that group and then duplicate it if you want, you can group this whole group and then even change the blend modes. Let's see, change it to linear burn. If we play our animation right now, this is what we have. Here we go. We have a space vacuum. I hope you have enjoyed this process and I will meet you in the last lesson. 14. Lesson 12 Threaded | Shading and Highlights in Procreate Dreams: Welcome to our last lesson. In this lesson, we will be working on this animation together. I call this animation threaded. It's because this little tiny blob that is threading and moving in between those pink columns. If you look closely, you can also see some nice soft shading that it's casting on the lower columns. Structure wise, we have four main tracks. The very top track are the first and the third columns. Then we have the little blob underneath it. Then under that we have a track just for the shading. At the very bottom, we have the column number two and number four. This is our animation. I will see you in the template. Here we are inside our template one last time. I'm going to shrink the timeline to 2 seconds. Go to the settings and properties, then select 2 seconds. We will be working with a much shorter time frame. Then I'm going to change the background color to something darker, maybe something like this. Then I will be importing the shapes from procreate. I will be needing two things from it. The first one is the layer called the stripes. The second one will be the small circle. You can also hand draw the blob. It looks more natural, but I'm going to use the circle for demonstration. Before I start moving things around, I will change the color. First I'm just going to pull my columns to the side. Then I will just strike and drop. Okay. And done. And I can bring it back. I know that I will need two sets of copy. I'm going to just duplicate this T and then move the bottom one, the lower track, to the position of number two and number four column. Actually, I'm going to scooch over a little bit. The space looks even. All right. Much better. I know that I won't be needing the grid. I will just turn it off. For the sake of clarity, I'm going to temporarily color my lower columns to a different color. I'm just going to use filter to add a HSB key frame. I will just delete this entire keyframe track at the end, so the color will be restored to the same color, maybe something even brighter. Okay, I will stop there and then delete the first key frame so the entire track stays the same color. Now we will have the orange column at the very top. And then we will have the little blob as the second track in order. And then the third will be the shading. At the very bottom, we have our column number 2.4 actually. Now looking at the contrast, this yellow is not doing very well against the white. I will have to tweak that this is better. We want a color that is not super dark because we will be adding the shading if the color is too dark. When we add shading, it's really hard to see. Okay, I'll stay with that orange on top, pink at the bottom. Now we can start creating our movements for the little blob in the middle. This is our beginning position. You can even move it further. Then I'm going to add a keyframe to remember that. I know this will be also the position of the last frame because in order to make our animation seamless, we have to match the beginning and the end. Now we have those two key frames secured. I will add a middle key frame. I'm going to make sure the movement is horizontal. Add a second finger to turn on the snapping. This is not doing too great. I just have to be very patient. There you go. This is our second position. We have the blob moving from left to right and then looping back again. Now we have our general movements done. Let's start drawing the shading. I'm going to go to the empty track we have created underneath the little circle. And then go to draw mode. And then pick a color. I will choose a more saturated version of this pink and start drawing from here. Make sure you still are in draw mode. Don't worry about the parts that are exceeding the boundary of the pink column because we're going to make a clipping mask later, that will not be an issue. You can extend the scale of the timeline by using three fingers sliding on your timeline. It's only casting shadow on the column. I do have the onion skin turned on, so I can reference the size of the shadow on previous frames. Let me just go back. Okay, it seems like we might need a tiny shadow here. Then we transition to column number four, and then just keep drawing like that. Now we're halfway there. You might be helpful to change the color of our onion skin. Tap on the time cold added onion skin, and choose something that is not currently the color that we are using. Okay, Much better. Whenever you're done, just tap on the next empty space to draw. Okay, now we're back on column number two. Maybe four more to go. It's helpful to maintain a consistent shading by using the same size of brush. So don't change your brush halfway then. This is our resting frame. Before I hit replay, I'm going to select all my shading frames and then group them together into one group. Delete the empty track below, I will make this one clipping mask. Select the timeline at it along hold the shading track, then mask clipping mask. In that way we do not see the extra stuff. You can even play with the blend modes again, to see if you get any other interesting colors other than the original pink that we have chosen. Well, I'm going to stay with this. Now. We get to see our little blobby casting shadows on our columns. Remember that we have changed the pink columns to pink so that we can tell the difference between different groups. Now I'm going to restore this color back to its original. I'm going to press that HSB key frame to delete it. From this point on, we can reconsider our blend modes, choice, long hold blend mode, and we want to pick a color that has a better contrast with the layer below. Okay, this is better. I'm going to go with that. You can change the opacity as well. Just tap on the timeline. Tap on Playhead filter opacity. And then you can lower the opacity. If you want your shadow to be a bit softer, I'm going to go with that and then delete the first key frame. There you go. Okay, this is cool. You can add interesting highlights above this little blob. I'm going to add a empty track plus, and then I will be drawing shadows, the column number one and number three. I'm going to choose a highlight color, use the same brush and start drawing. Make sure you're in de, again, just draw some very simple high light. It is actually the shading of the columns above that is casting on this little actually, it doesn't have that much. It should be something here. You want to go back and forth to check you have covered all your bases. Okay. Again, I'm using the same brush and the same size, it looks consistent. Go all the way until the very end of the timeline. Then we're going to group our new shadows into one group. Delete the empty track, and then create a clipping mask. Make sure you un highlight the time line at it. When you do the clipping mask mask clipping mask, there you go. Now we can see a faint yellow highlight. You can also make the highlight change color by creating a HSB filter. For example, it's green here, yellow at the beginning. And then you can add another one. Well actually you do want it to be yellow at the end to, So there you go. And then you can add more options in between. Okay, if we play right now, this is what we have. It's pretty fun, huh? All right, so this is our very last animation. I hope you had fun.