Adobe Animate CC For Everyone (2019) | Carl Schooff | Skillshare

Adobe Animate CC For Everyone (2019)

Carl Schooff, Animation and code are my specialties

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
52 Lessons (6h 33m)
    • 1. Animate CC For Everyone Intro

      1:12
    • 2. Interface

      10:06
    • 3. 3 types of animation

      3:51
    • 4. First Tween

      5:01
    • 5. First Tween Follow Along

      4:12
    • 6. Timeline

      13:53
    • 7. Keyframe bootcamp part1

      8:33
    • 8. Blank keyframe bootcamp

      6:57
    • 9. Stop motion overview

      7:10
    • 10. Stop motion follow along

      4:02
    • 11. Export video

      5:53
    • 12. Export video twitter

      3:23
    • 13. Basics module intro

      1:46
    • 14. Enter pause leave

      2:13
    • 15. Pulse

      2:27
    • 16. Spin

      3:39
    • 17. Skillshare erratic

      4:24
    • 18. Ufo with alien

      16:53
    • 19. UFO with alien follow along

      7:35
    • 20. Choose platform type

      22:55
    • 21. Edit symbols

      8:03
    • 22. Edit symbols follow along

      1:46
    • 23. Create symbols

      8:32
    • 24. Create symbols follow along

      2:48
    • 25. Nested animations

      6:38
    • 26. Nested animations follow along

      2:30
    • 27. Graphic vs movieclip independent

      5:07
    • 28. Graphic vs movieclip looping

      6:46
    • 29. Graphic vs movieclip filters

      16:46
    • 30. Graphic vs movieclip blend modes

      8:27
    • 31. Gti wheels spin

      10:51
    • 32. Gti wheel spin follow along

      3:14
    • 33. Rocket flames

      7:28
    • 34. Rocket flames follow along

      3:36
    • 35. Rocket cow

      7:15
    • 36. Rocket cow follow along

      4:56
    • 37. Merge vs object

      7:25
    • 38. Drawing strokes fills line

      12:55
    • 39. Drawing 2 pencil brush paint brush

      17:18
    • 40. Drawing 3 shapes

      9:07
    • 41. Creating text

      8:30
    • 42. Text pulse filter

      7:56
    • 43. Text pulse follow along

      3:21
    • 44. I love you

      21:46
    • 45. I love you follow along

      12:39
    • 46. Shape tweens

      10:37
    • 47. Shape tween follow along

      1:12
    • 48. Chicken meets bomb

      17:55
    • 49. Chicken meets bomb follow along

      7:52
    • 50. Motion guide

      9:55
    • 51. Motion guide follow along

      2:44
    • 52. Closing video

      1:01

About This Class

With Adobe Animate CC you can make fun animations for social media sharing, emails, websites and more. Since you can output your animations as video and gif files, there's really no limit to where they can go. Animate CC is the industry standard for 2D animation for cartoons, tv, online ads and even interactive games.

This hands-on course for absolute beginners will take you through the basics of animating with Adobe Animate CC. The main focus of this course is on understanding the Animate CC timeline. I'll walk you through a bunch of small projects to help you learn the important fundamentals of animating with Adobe Animate CC.

This course also includes long-form lectures that you won't find anywhere else. 

Animate CC makes it easy to bring your art to life. It's my goal to show you how fun and rewarding animation can be!

Truly Hands-on Learning

This isn't the type of course where you just sit back and watch. I've got a bunch of small lessons designed for hands-on learning.

In addition to the tradional lectures you'd expect in this type of course, I also provide written instructions and special Follow-Along videos with on-screen instructions. You see exactly what you need to do for each step of every exercise. 

I'm going to do my best as an instructor to give you the tools you need to succeed. I'm sure that once you create your first animation, you'll fall in love with Animate CC just like I have.

Transcripts

1. Animate CC For Everyone Intro: Oh, what an unfortunate chicken. Hey, what's up? I'm Karl, shoot historical dot TV and I want to teach you how to make fun animations like this. All right, It's not hard. I've got a new course called Anime CC for everyone. It's we're absolute beginners. So if you like doodling and making fun little pieces of artwork, let me show you how to bring them to light. You don't have to be a genius. I've got tons of videos. They're gonna walk slowly through the basics that you know exactly what to do. All right, We're not gonna get too hard and complicated. I'm not here to show off. All right? I want you to learn how to do really cool stuff. Like making house with rocket tax applied or make some emoji hard eyes. Things have been around all right. It's not gonna be too complicated. I'm gonna hammer in the basics so that you understand it and have a ton of fun. This comprehensive beginner's course includes it doesn't small projects for you to build. Starting finished f l a. Files for all the lessons, written instructions and my special follow along videos where I actually do all the steps that have instructions on screen. And there's also in depth lectures that you're not gonna find anywhere else. So please jump on in, take the course for a spin. I know you're gonna be thrilled with what you're gonna build. Let's go. 2. Interface: everybody calls through here from Circle dot TV And today I'm really excited to get you into our first getting started video. We're gonna talk about the animate CC interface before we get into, you know, actually doing animations. I have to make sure that you're a little bit familiar with the layout of Animate CC. So I'm gonna walk you through, creating what we call a workspace so that your tools and panels are gonna be in the same police as mine when I'm showing you the videos. So when you go to do lessons and stuff, your environment will be pretty much exactly what you see in my videos. Obviously, if you want to make some customers ations, you're more than welcome to do that. You don't even need a file. Open for this first video will be information on which file I'm using down below. But for now, just sit back and watch and when you're done and configure your workspace like me and we'll be off to the races. So here I have animate cc open and I have a document open, and I want to show you that the workspace or layout is a bit of a mess. All right, There's all these tools and panels all over the place. I can't even tell what I'm looking at. So for this course, I want you at home tohave the same workspace and layout of your panels as what I'm using on my screen when I record. All right, so that way you won't spend a lot of time looking for different things. So first things first up in the top right here, I can choose between different work spaces, all right. And Adobe says, Hey, if you're an animator, this is the workspace you may like to use with the time line up top color panel over here. But for this course, I'm going to just stick with the essentials, OK? I'm recording at a resolution of 12. 80 by 7 20 So these videos look good on a wide range of screens, from phones to tablets to desktop, and with this essentials workspace. It's pretty much exactly how I would use things with the small exception of I really like to have my tools on the left. So it's gonna click right here, and I'm going to drag all the way to the left And when I see that little blue line, that means that panel is going to sort of snap into place. All right, I can leave my panel sort of free floating if I like, But I wanted to stay in one place over here, and then I'm just going to squish it down. I'm gonna have a lesson on creating your own custom work space and how to open and expand and move around these panels. It's a little bit of an art form, but right now I really want to focus on getting you guys into animation as quickly as possible. Now that my workspace is set up, let me just play this animation and you'll see some green circles animating some text. And it's pretty simple. Now what I want to talk about first ease the stage, okay, and the stage is this rectangle that we're seeing in the middle of my screen with the black border and the orange background. Now the stage is used to define the visible area of our animation. Anything outside of that stage is not going to be visible in our final gift video or html five canvas animation, so I have Herman over here and you'll see that there are some of these circles that are sort of half on the stage and half off the stage. And what we call the paste board area I want to do is a control test movie, and we'll see this animation in a Web browser, all right. And what I want to point out is that you don't see Herman over here to the right. We're just seeing the default white background color of the HTML page and you'll see that some of these circles are being cut off because half of them are outside of the area defined by the stage back in enemy Sisi. I'm going to go over to the properties panel, which is going to give us different properties of our stage here. We can change the width and the height. So if I want all these circles as part of my final viewable animation, I could either type in a new number here. I could just do something like 500. But I also want to show you that this number here is a slider value so I can slide it back down if I want and do some fine tuning, just with my mouse. So now the next time I go to test movie in a browser, you'll see that we're gonna see basically the bottom of all those circles there. Okay, so whatever's on the stage is going to be visible in our final document. The next thing I want to talk about is the Tools panel. We have a number of tools for selecting and transforming items as well as creating artwork and vector shapes and text. I'll have lessons on most of these tools moving forward, but for now, I just want to show you that we're gonna be using this black arrow or the selection tool quite a bit to click on things to select them and move them around. And we also have the free transform tool here, which we can use to scale items or wrote. Take them freely, don't hit, undo a few times to bring it back to normal. And so I don't need to show you right now how to use the rectangle tool to create a rectangle or the oval tool to create an oval. Again, we'll have lessons on drawing and art manipulation and creating text as we go throughout this course moving forward, I want to bring our attention now to the timeline at the bottom of my screen. And we're going to be spending a lot of time in the timeline showing you how to read it, how to create animations in the timeline. But basically the timeline allows us to specify how things are gonna look at a certain point in time or in a certain frame of our animation. What I'm doing right now is grabbing this red rectangle here, which is referred to as our play head. Okay, and what I'm doing is just scrubbing through a number of the frames that we have in our movie. Whenever we see these arrows here with the blue background, that's gonna tell us that there's some sort of animation happening there. Okay, So as I'm scrubbing back and forth year, you'll see that we have a layer in the timeline called Title. And that's where the title is fading in and moving up. I have lots and lots of layers for all these different balls are spore circles, if you will, where they're all animating in a staggered fashion again, I'm gonna focus a lot on showing you have to create animations. I'm gonna explain in detail frames, key frames, how to add frames, manipulate frame spans of animations. And we're going to spend a lot of time in the timeline as we move forward. But for now, I just want to show you that it's basically where all the magic of our animation happens. All these little black circles that you see here represent a recall. Key frames all right, are key points in our animation, and you'll see that this text sort of fades in and comes up from the bottom. If I want that text to come in from the top, Aiken, go back to the first Frankie frame of that animation. Select that text that's invisible right now, and I can use my transform tool to move it up here. Now, the next time I play this animation, you'll see that the tech starts the top and moves down. All right, so I can edit the position scale, a rotation or Alfa of any of these elements as long as I'm adjusting a key frame. But again, I'm gonna show you all of the intern out of working with the timeline and creating animations. I want to bring your attention now back to the properties panel, which is where we're going to see different properties off whatever we have selected. Okay, the last time I clicked on, anything really was on the stage. So we're seeing properties of the stage. If I click on Herman, the Properties panel is now telling me that I have a graphic selected and it's giving me the X and Y position as well as the width and height. If I click on a frame in the timeline, the properties panel is going to change to show me properties of that frame. All right, we can put a label on a frame. We can adjust the easing, but I just want to point out that the Properties panel is contextual because a lot of information about whatever it is that we have selected. So if I click on the pace board or the stage, I get the stage properties, I can get symbol properties or I can get frame properties. Okay, so that's why it's really important, which one of the essential panels, we always want to have it accessible so that we can see information and change it about the things that we've clicked on. The last thing I want to show you is the library. So right next to the properties panel, we have the library, and the library is where we're going to store symbols, which are assets that were going to be reusing throughout our animation. Okay, you'll notice that for this document, I have three symbols. I have one green circle. I have this guy, Herman, who has a simple, insist name of Snorkel right now and we have a title. Okay, now it's cool about symbols is that they can be reused multiple times in our documents. And if I edit a symbol, all instances of that symbol in my movie are going to be updated. So let's just say that an art director says, Hey, you know what? I want you guys to sell blue circles now or something else. Well, I can double click on the circle to edit it and let me just show you really quick. I'm gonna take that green Phil, and I'm gonna change it over to a nice light blue. And then now, when I go back to seeing one look what happens in my animation. Every instance of that circle is now blue. So you want to change green to blue here in the text. But it's incredibly powerful how symbols work. And we're gonna have a whole deep lesson on creating symbols, editing them, swapping them. We're gonna go through the works. Alright. But I just want to show you that the library is where we hold all the symbols or if you will, characters that we're going to be using throughout our animation. So as long as you have your works based it up to essentials, you're gonna have easy access to the tools I'm going to be using the stage, the timeline, library and properties there number of tools here in panels that will go through, such as our color mixer or color swatches. But again, we got a big road ahead of us, and I'm gonna get into all these when it's time. I'm gonna really want to focus, though on getting you guys up and running with Adam Nation in the next video, I'm gonna show you the three types of animation will be building, and we're gonna get you into building some animations on your own. Well, you know, beating 3. 3 types of animation: So now that we have a decent understanding of our works based on different panels inside of animate C. C, I want to focus on the three types of animation that will be creating in this course. All right, this is just gonna be a general overview of classic Tweens, key framed animation and shape Tweens. All right, this is just to give you an idea of the type of animations will be building. It's not going to be a deep dive into each. In this file that I have open, I have these three types of Tweens in three different layers. So the 1st 1 that we're gonna be talking about is what's called a classic Tween. And that's where an object is going to move, scale, rotate, change its alfa or tent over a series of frames. And basically, what you do with a classic Tween is that you tell anime the starting position and the ending position, and it figures out all the frames in between. So one thing I can change real quick and frame one here of the circle is you know, I could select that circle, go to the properties panel and under style I could change the tent to be any color. I want you make it this blue. Okay, so now in frame one, it's blue in frame 20 it's orange, and the now anime figures out how to animate the change in tint as it's changing the scale in the position. All right, so these classic Tweens are pretty much the easiest and most popular animations that will be creating throughout this course. And I'm gonna be explaining again key frames, how they work and all that as we go on. The next type of animation is a key framed animation, and I'm using this explosion as an example. As of a key frame animation basically in the key framed animation, you're creating new artwork in each frame. Okay, So as I'm progressing here, you'll see that we have these little orange and yellow fireballs that progressively get bigger and spread out. Okay, so each one of these frames is hand drawn, and you would use key framed animations for explosions and things like walk cycles or any sort of like articulated character animation, possibly lip sinking as well, where you need to do really precise changes in between frames and each frame is pretty much drastically different than the one that precedes it. Next up we have shaped Tweens and these air really cool in that it allows us to select a starting shape in the first frame and an ending shape in the last frame and animate will intelligently Tween the morphing of one shape into another. And you can have multiple shapes in the first frame and multiple shapes in the end frame. And it's going to do some pretty cool things, getting from frame one to the last frame of that sequence. Again, I'm not gonna go deep into how we set up and build these animations in this little overview , but I do want you to get aware of a few visual cues That enemy is gonna give us number one . When we're doing these classic Tweens. I want you to notice that we have this blue span of frames here and you see an arrow, a key frame. Animation is gonna have a bunch of these black circles, which tells us that we have new key frames in each frame, and a key frame basically tells you that each frame is going to look a little bit different than the one before or after it. And then, lastly, this shape Tween is shown with this green background and the arrow. So you should be able, you know, over time, be able to scan in fl a document and know what type of Tweens and animations are being used . So again, quick overview. So those are the three types of animations that we'll be focusing on this class, and I look forward to getting you into the first animation that you were going to build. Well, you know, beating. 4. First Tween: All right. So, up until now I've been showing you this problem over here. This is that you haven't really done anything yet. I know. Well, listen, I'm actually gonna show you how to build your first animation. All right? I just want you to sit back, though, and watch me do it. I'm gonna keep it really simple. I'm not going to explain everything in grand detail. I'm just gonna walk you through the basic mechanics of creating your first classic Tween animation. And I don't want to do anything. I want you to watch me. So in the next exercise, I'm actually gonna have instructions on the screen that you're gonna follow, and it's gonna be really easy. So that's it. Let's get to it. So I've opened up UFO start, and the stage is pretty big right here, so I'm gonna dio is in the top right hand corner. I can change the size, but unfortunately, the size that I want, which is 75% isn't in that menu. So let me just make it 75 this allows me to see my entire stage and a little bit of the surrounding paste board. I'm gonna make sure I have my selection tool selected the Black arrow and let's go to the library and I'm gonna click on the UFO, and I'm going to take it and drag it out onto the stage. It's a little big for what I need right now, So I'm gonna go to the free transform tool over here and you'll see now that I have these control handles So holding down shift, I can scale and constrain the aspect ratio, which is very nice if I don't hold down shift, I can do this or do that. What? I don't want to dio. So let me undo that Command Z or control Z holding down shift. I'm going to just make it a little bit smaller and then going to move it over here. So in the beginning of my animation, the UFO is going to be off stage and quite small. I'm not gonna go down to my timeline, and I'm going to click in Layer number 20 so that it's highlighted or selected, and I'm gonna go to insert timeline key frame. All right, So now the play had jumps forward to frame number 20. I have a black circle or a key frame there, and I'm going to take the UFO and bring it into somewhere in the middle of the stage. Doesn't have to be perfect. And then now I want enemy to create the frames in between frame one and frame 20 so that I get a smooth animation. I'm to go back to frame number one, and I'm going to click on it so that it's highlighted and then go to insert, create classic Tween. When I do that, we now have those frames turning blue. We see that arrow we talked about in the last exercise and now when I drag the play head forward, I've created my first classic Tween Uh, so we're going to do one more classic Tween and then I'm gonna let you try. Let's go out to frame number 40. I'm gonna click in that frame and then I'm also gonna go to insert timeline a key frame and I'm gonna take the ship now that have a key frame their first. I'm gonna take the ship, drag it up over here. I'm gonna go back to frame number 20 and again, I want animate to create the Tween in between 20 and 40. So with that frame highlighted or selected, I'm gonna go to insert create classic Tween. Now, when I pull forward, you'll see that the ship leaves the stage one little last piece of finessing. Let's go back to frame number 20. I'm gonna click right above it or dragged the play head to frame 20 and I'm going to select the UFO again. Can make sure using the free transform tool here, and I'm just going to hold down shift, scale it up. And then when I roll over the corner here, you'll notice I have that little rotation icon next to the cursor is gonna give it a little bit of a twist like this. Let's go back to frame one, and I can either hit, return or enter depending on what your keyboard says or there's a play button down below. So let me just press on that, and now you'll see my first animation. Or I should say, your first animation. I'm gonna hit return again, and that's pretty cool. All we did was create a few key frames until enemy to create these Tweens in between, and that's it folks. That's literally 90% of what you're gonna be doing in your animate CC career, creating key frames and classic Tweens. So what I want you to do is watch this video one more time, take it all in, and then what's gonna happen is you're gonna go to the next lesson, and you're gonna do what's called the follow along where I've taken these exact steps, I re recorded them just for you, and I'm going to show you like two or three things. Then you're gonna pull is the video you're gonna see on screen instructions that tell you what to do. You're gonna do it yourself. Then you're going to watch me do the next step. There's gonna be on screen instructions, and then you're going to do it. All right, So this exercise here is an overview where you sit back and so get in and do that one more time and then move on to the follow alone. All right. See, on the other side, more real beating 5. First Tween Follow Along: All right. So here we are on our first follow along exercise where you're going to building your first animation will be building the exact same animation you saw me doing the previous video. But this time around, I'm going to give the instructions very clearly. You're going to see instructions than on the screen. You're gonna pause the video, you're gonna do this steps on the screen, and then you're gonna come back, play the next part of the video where you actually see me do the things that you're gonna read the instructions and do it yourself. And that's gonna go on for about five or six steps. At the end, you're gonna have your first animation. So the next screen's gonna show you which filed to use and how to open it up. And then it's all You all right? Have fun. All right, So to open up the file for this exercise, we're gonna go to file open, and you're gonna navigate to your introducing animate CC folder. All right? You should have downloaded it and extracted that zip and you're gonna see UFO start and UFO finished. You can open up UFO finished if you want to see how this file would look when you're all done. But I want you to open up UFO start and hit open. So here I have UFO start open. I have the canvas reduced to 75%. And what I'm going to do is just use the selection tool. I'm gonna go to the library panel. I'm gonna click on UFO and drag UFO to the stage. All right. You saw what I did. Now look at the instructions and you're gonna hit Paul. It's not now. But when I say so, whenever you see these words, you know your paws, you're gonna do the steps yourself, and then you're going to hit play to go again. So right now, what I want to do is hit. Pause, Hit Paul. All right, So you did this stuff. All right, keep going. I'm going to use the free transform tool and holding down shift. I'm gonna make it just about half its normal size and move it off stage to the top left hand corner. Next, click on frame 20 to select it and go to insert timeline. Key frame dragged the UFO to the center of the stage. Click on Frame number one and go to insert, create classic Tween Scrub the timeline Forward toe. Watch your animation at another key frame in frame 40 by clicking on frame Number 40 and go to insert timeline key frame, select a UFO and drag it off stage. Now go back to frame 20 by clicking on frame 20 and go to insert, create classic Tween, dragged the play head forward and back and watch our animation go back to frame number 20. Select a UFO, scale it up a little bit, holding down shift and then rotate. Dragged the play head back to frame one and then hit Play. There you have it. Your final animation. Congratulations. You did it. You're an animator. Go out on Twitter, arm around a manner and tell your friends Get your resume out. I can no enemy. Alright, it's really not that hard right we're gonna do in the next few lessons is really getting to the nitty gritty of how the timeline works. We're gonna explore key frames, blankie, frames, adding frames, shrinking frames, and you're really gonna start understanding exactly what you're doing. All right, we're gonna take it slow We're gonna have a lot of fun. You're gonna make some cool stuff. All right? See, in the next lesson? No, really? Well, you know, beating. 6. Timeline: Welcome back. You just created your first classic Tween animation. I give you step by step instructions, and hopefully you're able to follow him. Okay. You should be feeling pretty good about the fact that you are now an animator. Well, now it's time that I actually teach you something. All right, This next lesson is very important already. Sort of one of these foundational lessons that you really need to have under your skin to really understand what we're gonna be doing moving forward. All right, we'll be breaking down to you exactly how to read the animate CC timeline. Talk about frames, key frames and blankie frames. No, this is not the most elegant, wonderful stuff in the world on. I want to reiterate that throughout this course I teach in very much the same way I would is if you came next to me at work and said, Hey, Carl, teach me about key frames. All right? I would open up of F l. A with an octopus roller skating with laser guns and stuff. No, I'd open up a blank if l a draw some scrappy stuff on the stream and really tried to illustrate to you what's happening in each key frame, blankie, frame and regular frame. So in this exercise, I'm just gonna walk you through it. How I would anybody and I'm hoping to really just narrow down the exact things you need to know about these concepts. So I created this handy timeline frame legend which you can print out Hang on your wall. And the whole point of this lesson is to decipher this for you. Okay, We'll talk about frames, key frames, blankie, frames and potential frames. I want to walk you through all these different things so that when we get into doing some real animation, the next lesson you're gonna know exactly how to read the timeline and you're gonna feel comfortable. All right, so let's get into it. So to start our journey through reading the timeline and all the different icons or different types of frames, I'm gonna open up a new document or create a new document. And for now, I'm just going to use an HTML five canvas document. We'll talk about the different document types as we move on right now, it doesn't make a difference, really. And the first thing I want to draw your attention to Are these frames in the timeline Now, it's kind of hard to see what's going on down here, So I'm just gonna bump up my frame size just a little bit for you. Whenever you create a new document, you start off with one blank key frame. Okay? There's nothing in the timeline in your first layer one. I can't drag the play head forward. It'll I'm sort of just locked there. So what I want to do first is just extend the amount of time that I have to play with while I'm doing this little demo. So we have a frame rate now of 30 frames per second, which means it's going to take one second to play through 30 frames. So let's just say that I want an animation that's a second long. I'm gonna go out to frame number 30 and I want to add frames to my document. Whenever we see these alternating light and dark grey frames. Every fifth frame that tells us we have We're calling potential frames, all right. They're not yet in our movie or in our document those frames yet, So I'm gonna go to frame Number 30 and click, and previously I was showing you to go to insert timeline, and maybe we added a key frame or a frame previously, but that's a lot of distance to travel. So moving on, I'm gonna use the right click context menu. If you have a one button mouse, you would do a control click, I believe. So. I'm just going to go to insert frame. And then now what happens is I can now drag from frame one all the way to frame 30 so I can put stuff in any one of these frames. I can put key frames there, but for now I have this little room. If you will have one second worth of animation or time that I can work with here now by just adding that frame, a few different things happen. First, we can now notice that this frame here is a stroked circle. Okay, with a hollow center, that means that in frame one, we have what we're calling a blank key frame. There is nothing in that frame on that layer. You'll also notice it's subtle, but this span of frames here is no longer light and dark ray, alternating every fifth frame. It's just one solid, dark gray color. OKay? And so this span of frames were just referring to as regular frames or just frames where you see the hollow circle. That's a blank key frame where we have the solid colored gray frames. They're just regular frames. And then we have this other icon here, which is a little bit puzzling. It's this little stroked rectangle, and all that tells us is that the current span of frames is going to end. OK, it's not any different in frame 30 than frame 29. They're all just regular frames, and this is just a visual indicator that the current frame span is going to end. And that's all it does. Now that we've established that I have 30 frames in my movie and the first frame is a blank key frame. I'm going to go back to frame one, and I'm just going to take my brush tool and I'm going to draw a circle on the stage Really rough. Okay, so in frame one, I've drawn a circle. It's hard to tell because the play heads going through that frame, but I'm gonna go forward, and now you'll see that we have a black circle there. And that means that I have a key frame that has some content on the stage. So let me just select this. I'm going to delete it. And now you'll see we go back to this hollow circle so there is a blank key frame, and as soon as I put something on the stage boom, it gets filled in and we have our key frame. So the first thing I want you to commit to memory about key frames is that they tell you that something is on the stage in this frame of this layer. So I know one frame number one that's a filled in circle. There's something on the stage there and let's say, in frame number 30 I want to move the X over to the right of the stage. So again, my play heads in frame 30. I'm going to select all the artwork on the X, and I'm going to move it over here. So you may be thinking, all right, I'm in frame 30. The thing is on the right. When I go back to frame one, it should be on the left. Uh, that's not the way it works. Let me do an edit, undo and let me undo again until the X moves back. All right, so here I am in frame number one. Nothing selected at all. When I go over to frame number 30 and if I select the X notice that this span of frames get highlighted, this is animates way of saying, Hey, you know what? Even though your play heads in frame number 30 you're actually selecting this thing on key frame number one. So the rule again here is you can only select objects in a key frame. So even though the play heads at frame 30 the last key frame that has this xn, it is way back in one. And this is a mistake you're probably gonna make about 1000 times, even after you fully understand why it works that way. Um, I still do it to this day sometimes. So if I want to move the X or do anything at all to it in frame number 30 what I need to do is put a key frame there first. So I'm going to say, Let's insert a key frame, and then now you'll see that we have this solid circle here. It's filled in, all right, so now I can take the X and frame number 30 and I can move it over to here. Now when I go back to frame number one, that's when the excess to the left and frame number 30. Something else has happened to it. It's moved over to the right, and that brings me to the third rule of key frame that you should understand. We can do things to objects in a key frame without affecting other things in other key frames. All right, so basically, when we're in this key frame here, I can take this X and I can just smash it around, do any kind of weird thing that I want to it and not affect anything in frame number one and likewise in frame number one. I could draw a circle here in a circle here, and that's not going to affect anything in frame number 30. So these key frames sort of locked down what's happening in that particular frame of that particular layer. And next, let's just talk about these regular frames again. Okay. The solid span of frames here. So what they mean is that or what they tell us is that throughout this span of frames, things from the previous key frame are staying static for this span. So basically, Aiken scrub all the way from frame number one to frame number 29. And I know that nothing on the stage is going to change. It's all going to look the same. To further illustrate this, I'm going to go to frame number 15. I'm going to right click and do insert key frame. And another thing I should mention about key frames is that when we create a new key frame , it creates an exact duplicate of everything that is on the stage in the previous key frame . So key frame one and key frame 15 are identical. Now that I have a key frame and frame number 15 I can take you know, everything on the stage. I can move it over here. I can, uh, you know, let me just pick a new color out. Just do something Really. You know, silly and will use my paintbrush again. Draw too red circles. So these changes that I made in frame number 15 are not going to affect anything in frame number one or frame number 32. Remember, the third rule of key frames is we can do things to objects in a key frame without affecting other things and other key frames. So in frame 15 I can do whatever I want. It's not gonna change frame one or frame number 30 now. I was also telling you about these regular frames. They tell us that nothing is going to change here. So as I drag from frame 15 all the way to frame 29 everything on the stage stays exactly the same. When I get to the next key frame, that tells me, Hey, you know what it's possible. Something on that frame is going to change and we get this big mess right here so I could do stuff on frame number 30 again, and that's not going to affect anything on frame 15 or frame number one and let me go back to Rule number two, which is you can only select objects in a key frame. What does that mean again if I go to frame number seven and I try to select this circle and move it over here. Notice that I'm actually selecting it in frame one because there isn't a key frame on frame number seven. So when I go back to frame number one, I don't want to be surprised that this circle here moved before I wrap up. Let's talk about blank key frames and a blankie frame again. Is that hollow circle? And it tells us that nothing is on the stage in this frame of this layer. So here, in frame number 15 I have a key frame. It has stuff in it. When I click on the frame, it actually select everything in that frame, and I'm just gonna hit the leak and get rid of it. And look what happens. You'll see. We have the hollow circle here. That means in frame 15 we have a blank key frame. I can delete things from frame 15 again without affecting anything on frame number one. So let's read through this entire timeline in frame number one. I have a black dot that tells me I have a key frame. The frames that follow are all this solid color that tells me that nothing is going to change as I pull the play head forward. I'm going to see this rectangle stroke thing here and completely ignored because it really means nothing except for telling me that on the next frame something might change because this frame span is ending. And lo and behold, on frame number 15 I have this hollow circle, and that means I have a blank key frame. Following that, I have another span of frames with a solid background color, which again tells me that nothing is going to change moving forward the black rectangle I can completely ignore, except for making a mental note of Hey, something might change next. And then I see I have a black circle here, which tells me I have the key frame that has stuff in it to wrap up. Let's just go over what you need to know about key frames. All right. A key frame tells us that there's something on the stage. Okay, when you see that black dot you know that in that frame of that layer, there's something on the stage. One of the rules, as I like to call them of key frames, is that you can only select objects in a key frame, so if you have something on the stage and you want to select it, move it around. Make sure the play head is on a key frame First. I demonstrated a few times what will happen if you don't do that next. It's important to know that we can do things to objects in a key frame without affecting other things in other key frames. So if you have the play head over a key frame and you manipulate an object on the stage there, you're not gonna mess up things and other key frames. And lastly, when you're creating a new key frame, it creates an exact duplicate of the previous key frame. And that's something we're going to dive into a little bit more in the next lesson when we build a few key frame animations. So don't worry. I don't want to writing down all this stuff. I'm gonna have this all below the video, and I'm also going to again give you the timeline frame legend, and hopefully, by now, all the stuff on this printout makes sense. But again, I suggest that you look it over study it. And if you have to, you can always watch this video again. But next thing to do is show you how to apply these concepts in a very practical way. We building our first key framed animations and it's really gonna sink in because you know why I'm gonna keep hammering it until it does. Alright, Awesome. More beating. 7. Keyframe bootcamp part1: Hey, welcome back. So we've already talked about key frames a little bit about what they are and how they work . And now we're gonna apply them to a re a little animation before we can do the crazy stuff , like explosions or walk cycles. You know, we're gonna start basic. You know me by now. I'm all about the fundamentals. Okay? I want you to learn the basics so that we were doing the cool stuff later on. It's all second nature, and I don't have to go over 100 times. I've already done it, all right. And I'm also going to introduce you my first boot camp style lesson. What is that? We're gonna go to keep frame boot camp where I'm gonna yell some instructions about slamming on keyboard shortcuts and drawing stuff on the screen so that you get it into your head. All right, we're gonna have a little bit of fun with this. I'm all about you learning through repetition, yelling fear and having a little bit of fun. So let's try to mix it up and let's go. All right, So let's there a new shiny, clean and fresh f l a we're going to select HTML five. Canvas doesn't really matter right now. What document type are using? And just like in the last lesson, I'm starting off with a blank key frame here because there's nothing on the stage of the first layer. So hiding behind this red line here is one of those hollow circles. I'm gonna select my brush tool, and I'm just gonna draw the number one over here on the left. As soon as I draw something on the stage, we now have a key frame with the filled in circle. That's black, because that tells us Hey, there's something on the stage in this frame of this layer. Now, what I'm going to do is progressively reveal the numbers 1234 and five going across the stage. So right now, I only have one frame, remember? I can't grab the play head and drag anywhere because I only have these frames that are light and dark grey alternating every five. What were they called again? Yes, I called them potential frames. Right. They're not yet in our movie, but they have the potential to be so I wanna have a frame to here and what I'm gonna do is just highlight frame number two. I'm going to right click and go to insert key frame. And now that I have a new black little circle here key frame, I know from the last lesson that aiding a new key frame creates an exact duplicate of everything on the stage from the previous key frame. So frames one and two are now identical. As I scrubbed the play head back and forth, there's no change. I also learned in the last lesson, or I should say, I taught you to learn that in frame number two. Now I can add something to the stage like the number two without affecting anything back in frame number one. So when I go to frame number two boom, I have the number two I'm going to now, just right. Click on the next frame and drag ALS the way up here and look for insert key frame. Oh my goodness, it's so laborious to use that right click menu. So now that I have the key frame here, let me just put the number three in moving forward. I don't wanna have to open up this menu and read and find things. So we're gonna be adding a lot of key frames, frames and blankie frames. So it's time we started using keyboard shortcuts. The keyboard shortcut for adding a new key frame is F six. So without clicking anywhere, I just want to make sure my play heads and frame number three I can just hit F six. That's gonna give me a new key frame down here and frame number four, and I'm going to draw the number four and without clicking anything down here, I'm gonna hit F six again. And now I get a new key frame and frame number five, and I'm gonna draw the number five. So in each one of these key frames 1234 and five I'm adding new things to the stage when I add new things to the stage and frame. Five. It's not affecting anything back in frame four. Now, if I go to play this animation, you notice that happens. Whoa, super fast. Okay, well, that's because these frames are all right next to each other and at a frame rate of 30 frames per second, each frame is displayed for literally 1/30 of a second, which is like no time at all. And to just play these 1st 5 frames, it's going to take 1/10 of a second. So, really, there's no time at all for our heads to even really compute what's happening on the stage. We just see almost all numbers kind of appear all at once, technically, even though there is a little bit of time in between them. So if we want people to actually have some anticipation for what the next number is like, he wouldn't account down. You're gonna wanna have some frames in between each of these key frames, so let's go back to frame one now. I could go right click, insert frame, and then that pushes the second key frame over a little bit. And if I keep doing insert frame, I'm gonna get so tired doing this insert frame. You'll notice now that we have a key frame and then we have these regular frames remember their solid colored backgrounds, and they tell us that for the span of frames, the stuff on the stage from the previous key frame is going to stay static. So again I can scrub through these frames and nothing changes. This rectangle here we ignore completely because all tells us, is that the current frame spans gonna end in the next frame boom. We have a key frame, the number two shows up. So by doing this, I've added some time in between the first frame or this is just the first key frame and the next key frame. So what I'm gonna dio is instead of doing insert frame all the time here to get more space between these two key frames, I'm going to hit F five, which is the keyboard shortcut for adding a new frame. So I'll just do that three times. I'll click on the next key frame. I'm gonna hit f 5123 times. I'm gonna go to the next key frame and hit F 5123 times. And lastly, the last key frame. 123 times. So now I have a little bit of time in between each one of my key frames I'm gonna hit, enter to play and now you can see that each time it plays our brains have a little bit of, you know, time to actually see the numbers and understand that there's a little bit of time in between each one. It builds a little bit of anticipation. I still think there could be some more time in between each one. So I'll just bring my play head back between frames one and five and I'll hit F 53 more times. 123 Go over here. 123 Go Over here. 123 Over here again. Hitting F five to add frames three times 123 So now my entire animation is 35 frames long, which puts it past one second and let me just play it. All right, So there we have a very basic key frame animation on each new key frame. This content on the stage is changing. What's that? What's that sound? It's time for keep brain boot camp. What is that? Meaning? It means we're not gonna do a fun little exercise or I yell instructions at you and you try to keep up. All right, let's do it. All right, we're gonna go to file new, create a new document, and now here we go. You're going to see you have a blank key frame. I want you to select your brush tool. You're gonna draw the number one you're gonna hit six. Draw the number to hit F six. Draw the number three hit F six draw the number four hit F six. Draw the number five. And what do you have? You have your first rapid fire key frame animation. Now we need to add some time in between frames. You go back to frame one, you're gonna hit F 55 times. 12345 You're gonna drag the play head to the next key frame. Hit F 512345 times Go to the next key frame Hit F 512345 times Go to the next key frame. 12345 Last key frame. 12345 All right. I want you to know these keyboard shortcuts like the back of your hand. I want you to take my keyboard shortcut. God, take it to your monitor. Take it to the top of your head. If you fell behind, I want you to do this lesson again until you get it right. All right. You're gonna have fun. Do what? Complete it. Go more beating 8. Blank keyframe bootcamp: Alrighty. Welcome back. But God rest after that last boot camp, we're gonna have a quick little lesson now showing you the difference between inserting a key frame and inserting a blank key frame. You'll learn the F seven keyboard shortcut for adding new blankie. Frame's gonna go fairly quick because I really want to get you to applying these principles to real world animations. All right, we're doing our little baby steps now, and then it's going to be off to the races, so come on in. All right, So, similar to the last exercise, what we're going to do is create a little counter, but only one number is going to appear at a time. So when a new number comes on, the old ones going to go away, So we're going to file new and again HTML five. Canvas is fine for this, and we're going to now have a new clean document with a blank key frame here because nothing's on the stage. I'm going to switch my fill color over to this lovely dark blue. I'm gonna use my paint brush tool in the center of the stage. I'm just gonna draw the number one now my blankie frame is a normal key frame. It's a filled in black circle because something is on the stage in that frame. Now I want to draw a number two on frame number two. I can't pull the play head forward, so I'm just going to right click here. And if I do insert key frame, we learned before that. Adding a new key frame again duplicates the content from the previous frame. So frame one and two are the same. So if I want just a two on frame number two, I would have to use my selection tool to grab the one delete it. And now I have a blank key frame because I deleted what was in the second key frame. I now have a blank key frame, and I could draw the number two. However, I'm going to undo all that, and I want to skip the unnecessary step of having to delete things myself. So back in frame one, I only have a frame one here. I'm now gonna go to insert, and I'm going to select insert blank key frame. All right. Insert key frame would create a new key frame and duplicate everything in frame. One. Where's insert blank key frame is going to give me my hollow circle and a blank stage. So now I can just draw the number two in frame number two. And I have a one and frame Number one and the two and frame number two. I'm going to right click again down here and select. There it is. I'm sorry. Insert blank key frame, and I had to move my mouth. So far, I'm so tired. But there I have my blankie frame and I'll draw the number three again. I don't like having to right click read and then try to figure out where I'm going. So from here on out, I'm just gonna go back to frame number three. We're going to use F seven, which is the keyboard shortcut for inserting a blank key frame. So right now I'm gonna press F seven. That gives me a blank key frame in my timeline here, it clears the stage. I'm gonna draw the number four. I'm gonna hit F 71 more time to get a blankie frame and frame five that I'm gonna draw the number five. So now, in frames 1234 and five. I have new content in each frame. And when you're creating your own like riel animations like explosions or run cycles or counters like this, this is probably the method you're gonna want to take your gonna be clearing previous content and drawing new content now similar to the last exercise. We now have this animation happening very quickly because it's all happening literally in five frames, which is like 1/10 of a second. So what I'm going to do, just like the last exercise, I'm gonna go frame one. I'm gonna hit a special key to add frames. Anybody know what that key is? Yes, You in the front row F five, right, So 512345 times. I'll go to the next key frame. And that's by hitting f five. I'm going to be pushing all the other frames forward. So select this frame and then 12345 I'm adding this span of regular frames where again, during these regular frames, the stuff from the previous key frame stay static. What does that mean? Nothing is moving on these frames here. Go to the next key frame. 12345 Go to the next key frame. Hit a 512345 So now I have a counter that is going to play, and I can see a new number on each new key frame, depending on your needs. You might wanna have more space or time in between. Key frame. What's that? What's that sound? You know what time it is? It's time for blank. Keep rain Boot camp. What's that? It's where I'm gonna yell and scream instructions at you in rapid fire seaQuest to see if you can keep up. You need to learn this stuff inside and out and do it with your eyes closed. So we're gonna be off to the races. Follow giddy up. All right, get ready. We're gonna go to file new HTML five. Canvas is fine for now. We're going to use the brush tool. I wanted to draw the number one in the middle of the state. You're going to then hit seven to create a new blankie frame. Draw the number to hit F seven again. Draw the number three hit F seven again. Draw the number four. Come on, you can do it. Hit F seven again. Draw the number five. All right. We have our key frame animation here where each new frame has something new and nothing from the previous key frame. Now it's time to add some space. So what are we going to dio? We're gonna go five crazy. Go back to frame one Hit F 512345 times. Go to the next key frame. 12345 Go to the next key frame. 12345 Go to the next key frame. 12345 Go to the next key frame. 12345 Oops. Did I miss one F five? There you go. Go back to the beginning. Hit, return or enter. And there is your animation. All right. You did it. I'm super proud of you. If you didn't do it, go back and do it. But I know you did it. So right now we're done with our boot camps. They may have seen a little bit silly, but really I need you to get these fundamentals of key frames and blankie, frames and frames in your head. So that when we move forward again, we're gonna have smooth sailing and do some really cool stuff. I also want you to take my keyboard shortcut guide and again tape it to the top of your monitor. You need to memorize at five F six and F seven. Those need to be like, built in muscle memory way. Just slamming those keys whenever you need them. All right? So again, I'm very happy that we got through these fundamentals. Thank you so much for sticking with me. We're gonna move on now to doing some practical, real world implementation of building key framed animations than doing classic queens and a whole bunch of other stuff. But we've got a lot of the basics out of the way. So congratulations. More beating. 9. Stop motion overview: So welcome back. I know you made it through the boot camp. You got your squiggly 12345 frames to animate and you're probably thinking But Carl, I'm taking this course because I want to do more professional stuff and you know what you will and what I want to do now is take you over to my animated adds Twitter feed and show you just how major brands are using the same stop motion key frame technique in their advertising. Let's go, Here's my animated, adds Twitter page. I put it together really quickly so that I could retweet animated ads and I didn't want to really span my snorkel TV followers with a bunch of advertisements, so I decided to create a separate account. Now what I'm doing is just going throughout my various Twitter feeds. And when I see a cool ad, I'll just retweet it from this account. So here, Target has some nice animation, their Twitter feed, and this is the type of stuff I'm gonna be showing you how to build here. We have amassed stop motion effect this white castle adhere. You'll be able to build this with your eyes closed after taking this course, and I'm just going to scroll on quickly down because I want to show you the ed that inspired this next exercise. Well, first off the Starbucks one is really cool and really was going on here. It's just a series of photos where they're adding one element to the scene, taking a picture, adding another taking a picture, and then they import all those photos into key frames in a program like enemy. So here's the set up that I initially did for one of my test. For what we're about to build. I have a bag of chips from Taco Bell, some cheese in my camera on the Jobi gorilla pod and scrolling on down what we have here. Applebee's an ad like this all key friend. There's no smooth animation. It's just these hard cuts between some text heart and then a picture of some steak to tell you what, we'll probably build that one as well. But what I'm really going after and what really inspired me was this ed right about here. Are you from Taco Bell? You're kidding. Tackle Bad. So there it is way have these nacho fries which surprisingly, are in very high demand. And you'll see there's an animation of the fries going away. And as they go away, the cheese disappears. And what caught my attention about this thing here was that as the cheese goes away, you don't see a bunch of cheese smeared around the edge or anything. It's all really nice and neat. So the trick I used was to actually start with no chips and then at and no cheese. And I took pictures adding chips and adding cheese, and I'm sure that's how they did it as well. All right, so here's my rendition of the disappearing nacho fries. I couldn't get nacho fries because you know what? They've been discontinued. They're making us wait till summer. So I used some nacho chips and some nacho cheese. So let's jump on over the enemy. And also you have to build this animation. All right, So, inanimate Sisi, I'm going to create a new HTML five canvas document. I'm gonna change the stage to be 800 by 800 return, and then I'm going to go to the magnification menu and do fit in window. And this is going to shrink it down so that I can see the entire stage. And then when you go to file import, I'm gonna go to import to stage. Now you'll see that I have these photos here that came off of my camera. I'm going to select the 1st 1 and on a Mac. If I hit space bar, I could get a preview of them. I'm hitting the up arrow now so you can see that I have this progression of images that has more chips and cheese being added. So it's a nice little feature of the Mac there. What I'm going to do is just pick the first image in the sequence, which is 7611 and when I hit. Open enemy is very smart, and it says this file appears to be part of a sequence of images. Do you want to import all of the images in the sequence and I'm gonna hit? Yes, and then a few things were going to happen. You'll see that animates CC puts each image in its own key frame already for me, and if I go to the library, you'll see that all of those images are now part of my library. So I just want to show you that behind the scenes, everything that we imported goes into the library, and now we also have each image on the stage in its own key frame. Now, with this animation here, the idea was to show somebody sort of starting out with a whole bag of chips and cheese and then, over time, having them disappear. Now, I took these photos in reverse order so that I could slowly add cheese to the little been over here, okay? And so that it wouldn't be messy. So if I had started with full cheese and then taken it out, it would have been smeared all over the side. So I just built the sequence up backwards. Now, for the purpose of this animation, I want things flipped around. So instead of having starting with an empty bag and empty cheese been and then filling up, I want to start with the empty, the full cheese and ships and then have them disappear. So what I'm going to do is click and drag to select all of these frames, and then I'm going to right click and do reverse frames right down here. And so now those frames just get swapped around. So I'm starting with full chips and cheese and over time, in each key frame, I have a new image with less chips and cheese. So when I play that now, it goes really quite fast. Now I want to slow this down a little bit. So one thing I could do is I go to the properties panel and one frames per second is set to 30. I could bring this down to something like five, and then now the next time I play watch, it's definitely slower, Okay? It's only showing me five frames per second. Now, if this was all this file was ever gonna have, that would be okay. But if I want to add some other animation that's happening at the same time, it's a little bit smoother and not so choppy. Um, I wouldn't be happy with a frame rate of five frames per second, so although I could do that, I'm gonna keep that frame rate solid at 30 right now. And I'm gonna go back to the technique I already showed you, and that's we're going to add time in between each key frame and to do that. What's the keyboard shortcut? How do we ed frames? What's that piece of paper stuck to your head? Say it should say press at 512345 frames. I'm gonna add by pressing F five, I'm gonna go select the next frame. 12345 Select the next key frame. 12345 the next 112345 And do that for all of those 45 And when I get to the last frame, I also want to have a little bit of dead time at the end. Now I can drag back to the beginning, and when I hit enter, you'll see that I have a nice speed here and we have this effect of all the chips and she is disappearing. It looks quite good. Next, I'll create a very simple follow along video so that you can build this for yourself, and then we'll walk you through exporting it as a video that you can share with your friends. I think it's time to eat some nachos later. Well, you know, beating 10. Stop motion follow along: All right, folks, welcome back we're doing are stop motion photography. Follow along where I'm gonna walk you through The steps to create are disappearing nachos animation. Now what I'm going to do is just show you a few steps at a time that I'm gonna put instructions on the screen. When you see the on screen instructions, just pause the video, do the steps, and when you're done, replay the video for the next set of steps. So here we go. All right. For this exercise, what I'm gonna do is create a new F l a file file. New select HTML five canvas set the with to 800 the height to 800 and hit. OK, in order to see the full stage here, I'm going to use the magnification, pull down and select fit in window. Next, I'm going to save the file using file save, and it's important here that I navigate to my stop motion nachos folder. OK, so wherever you extracted the lesson files for this lesson, you're gonna find stop motion nachos and you're going to see a photos small folder in there . It's very important that we're saving in the right directory. And I'm going to call this Carl dash nachos, and you can put your name on there or just call it nachos. Doesn't matter. I'm gonna hit, save next. I'm going to import the images, so I'm gonna go to file import import to stage, and I want to make sure that I'm inside of my stop motion nachos folder where I just saved my f l a. And then I'm gonna click open my photos small folder. And here I want to select the image called I m G underscore. 7611 You'll see that it's part of a series of images, so I'm gonna select 7611 hit open, and then animate is going to tell me. Hey, this file appears to be part of a sequence of images. Do you want to import all of the images in the sequence and I'm gonna hit? Yes. Good job. Now you'll notice that we have all of these images imported as key frames. Now they start with no nachos. And as I slide forwards, we go to more nachos and more cheese. We want to reverse this sequence. So what, you're going to Dio is click and hold your mouse down and drag to frame 10. That's going to select all of those frames. They should all be highlighted. Now I'm gonna click off and one more time just to show you, you click. Hold the mouse button down and drag to select all the frames with the frame selected, you're going to right click and shoes, reverse frames, drag the play head back and then hit. Return to watch your nachos disappear to add more time to each frame so we can see it on screen longer. We're going to add more frames in between each key frame. We're going to hit F 512345 times. I'm going to select the next key frame and hit F 512345 And do that for all the key frames , including the last one. When you're done, your animation should be 60 frames long, and you can now go back to frame number one hit, return or enter to play. And now you can watch your animation do a final file save and congratulations. You're all done. Did you yell? Boo hoo! I don't think I heard who? Come on who you did it. You made an animation that's awesome. And next going to show you how to share with your friends? It's the best. More we'll be mean. 11. Export video: Welcome back. You got your chips and cheese disappearing, and I know you're excited. You want to show your friends your family, but you don't know what to do. Well, guess what I'm gonna show you in this exercise How to export your animation to video. We're gonna use Adobe media Encoder to compress your video, and then I'm gonna show you how to upload to Twitter. In just a few minutes, you'll be sharing your animations with world. Alright, So back in enemy we have are disappearing Nacho cheese animation here and we want to do now its export this to video. So what we're going to do is go to file export, and I'm gonna choose export video. Now, we have a few options here. What? They'll go through quickly. We have the width and height of our video. Right now, it matches the width and height of our stage. So if you wanted to make a smaller video, we could change the width and height. Ignore stage color allows us to have a transparent background if you needed that. But right now, in our entire background is covered by the photos. But what's very important is this convert video in adobe media encoder option. All right, Adobe Media Encoder is a standalone application that ships with animate and the adobe creative cloud. And it's going to allow us to convert our video files into a number of different formats. And we can either tell our video to be a certain amount of frames or a certain amount of time. And right now everything we're doing is frame based. So we're just going to leave selected when last frame is reached. Now we have an option to save our video somewhere. So I'm going to browse to a particular folder. I'm going to go on my desktop or I have my animate CC for everyone folder and inside my nachos folder where I'm working on this project, I'm gonna hit, save, and I'm going to hit export. All right, So animate does some stuff. And then what you're going to see is that Adobe media encoder will launch if you don't have it launched already. All right, so here's adobe media encoder. I'm not gonna be able to give a full tutorial on all the ins and outs of adobe media encoder, but what I want to show you. Is that over here in this queue, we have our Carl nachos M O V. File. Okay, so enemy created an M. O. V file, and what we're going to do is take that file and convert it to a different format. Now, why would I want to do that? Well, let me go on over to my finder, and I want to show you that in mind. Nachos folder here. This is the M. O V. File that got exported out of animate. And I want to show you that it's 152 megabytes. Alright. As an M. O. V file, that's really pretty ridiculously big and not the kind of thing would want to send in an email or post on social media to people. So what Adobe media encoder is going to do is allow us to convert this movie toe a different file types. So usually what I do is I just want to make sure out of all these file types here, I like to select each dot to 64. Okay, you get a great amount of compression here. Um, and you still have visual clarity, and you're going to have a very good spiral size and then pretty much might just want to double check to see where that file is being saved and the show's that's being saved in our nachos folder. So that's all good. So all I really have to do now is, once I have each dot to 64 set as my format, I'm gonna go hit play. And what that's gonna do is go through the queue of videos that I want to convert. All right, Power users may have, you know, 10 or 20 different videos here they have set up for conversion. Only hit play goes through all of them. Right now, I just have this one video to convert some to hit play, and then Adobe Media Encoder is going to do some stuff and we're done, all right, so it can be a little confusing for first time users. You hit this play button, you saw some things flash down the bottom of the screen while it was encoding. And then now it's done. Well, what we want to do is go back to that folder that we were working on, and now you're going to see that I have this MP four file here, Carl. Nachos dot mp four. And you're gonna see that only 2.6 megabytes on the Mac. I'm just gonna hit space bar to preview it. And there we go. We have our video file. It's relatively small. It's insanely smaller than that. M O V file. And now it's ready to share and fire Fox. Here I have my animated adds Twitter account. Open up. I'm gonna use this because I'm only gonna annoy 16 people. Everybody who's following me there. You're the best. So what's happening? I'm going to say, Hey, I just made an export from animate and adobe media encoder. And let me just do this. We're gonna say test one because another test is coming up. I'm going to click on the image button here, and I'm just going to navigate to my animate CC for everyone folder go into nachos. I'm going to select the MP four. I'll hit open. I get a preview of my video. Isn't that awesome? Gonna close that out? I'm gonna hit tweet! And there we go. My tweet has been published for all 16 people to see Awesome. You sure you had a sharing automation with the entire world. And guess what? The stuff you're gonna be making is going to get better and better. Yep. Sorry I got frozen there for a second. In the next video, I'm gonna show you how to automate the process of exporting your animations through a DUI meeting coder directly up to Twitter. It would be really quick and pretty cool. See, on the other side. Well, you know, beating. 12. Export video twitter: all right. As promised, they got a little bonus here. We're gonna show you how to configure Adobe media Encoder to automatically upload to your favorite social channels like Twitter, Facebook video, YouTube, etcetera. All right, so you don't go to all these different websites and select your file uploaded it, right. New messages. Adobe Media encoder is gonna automate all that for you. It's pretty cool. So over here, an enemy with the same file open, Let's go toe export video. I'm gonna use the same settings except here. I'm just going to create a new M O V file, and I'm gonna put Twitter on it like that. So I know which one I'm dealing with. I'm gonna hit, save, and again I want to make sure that I'm converting video in Adobe Media encoder. I'll hit export. And so adobe media encoder should open up. We'll see the same screen as we saw before. But what I want to show you is that if I click on the format, what happens is adobe Media encoder opens up another window. It allows us to trim the start in endpoint if we want, and we can configure a whole bunch of different settings and customize them about the effects video, audio or the sort of stuff. But I want to show you that we have this published tab here. Now what? The resolution I have currently, um, you can't really see what I want to show you. All right? I have to scroll through this long window here, so I'm just going to minimize the export settings. And then now I'll show you that under publish that we have all of these different social channels that we can export to, um Vimeo, Twitter, YouTube. But let's just focus on Twitter here. You may see this list compressed initially. So here's Twitter. We're gonna click on it and we'll open it up. And I'm not logged into my Twitter account now. So through Adobe Media encoder, I'm gonna log in and it's gonna ask me to authorize my application. So I'm going to use the user name of animated ads or animate Dad's a little weird. And then my password is going to be pancakes. Hoops. A chapter said that, and I'm going to log in, and it says Now we authorize this to know everything about you and your privacy is completely ruined. Blood, blood, Obata it authorized at. And then Now we're good. Adobe media encoder recognizes the animated adds account. And I'm just going to say test to, um we'll just call this direct publish. Yea, and then we're just going to now hit. Okay, so watch this. We now have this video in our Q. We still need to hit play. Do it. The enemy does its thing. And let's just wait a few moments and you'll see that this link here pops up so directly from Adobe Media encoder. I can click on that link and it's gonna take me to my Twitter page and it's going to show me my latest tweet. All right, so there we have test two and everything is working perfectly. Isn't that awesome? Yes, it is. So if you ever doing some huge media campaigns and you want to post on multiple channels, you can do with just literally a click of a button. Awesome. Well, you know, beating 13. Basics module intro: so for this next module was really tempted to give you a project that was, like, glitzy and flashy and really cool. But the thing is, a core principle of the way I teach is that I want to do it as if I was at your office and I came down and sat next to you. And the thing is, you know what? I wouldn't be bursting open some big project and showing you all this complicated stuff right now. We'd be doing it in very isolated fashion. Remember? Another thing I've said is I want to go over things and isolations, that there's not distractions, and I know that you really get the basic stuff. So for this next set of lessons were doing some really basic animations on one element, but that the type of animations you're gonna be doing a zillion times throughout your career and I want to take this time now at the beginning to make sure that you have this stuff in your head and you know how to do it on your own. There's no point in me giving you elaborate directions on complicated things. If you can't do these little basics and thing is pretty sure you know how to do most this stuff already. But let's just get through this next little chunk and will be in good shape. So what we're going to do is we're gonna do a very simple enter pause and then leave. We're going to do a pulse. We're gonna do a spin. We're gonna do some erratic animations all on one element. And along the way, I'm going to show you some little tips and tricks that have been showing it before. So although these videos are only like two or three minutes each, I really want you to watch through them all. You're gonna pick up on some additional tips along the way, and then I want you to open up the start files and do each of them all right. For each of these seemingly basic little animations I really want you to be like all right , I know how to do this. I'm gonna drag something onto the stage to make a few key frames at the Tweens moving around and again if you can do that. And it's easy. Awesome, because we're gonna have a lot of fun moving forward as we get into more complicated techniques, so welcome to the back to basics module and, uh, get to it. 14. Enter pause leave: in this exercise, we're gonna be doing a very basic enter pause and then leave. Now it's going to be pretty straightforward. It's gonna be about a three minute video. But again, it's important that we get these basics down now in the beginning of the course. So we go on to build and really cool stuff, so let's get to it. All right, so for this, enter pause, leave effect. I'm going to go to my library. I'm to take out the ball symbol, place it off stage to the left somewhere. It doesn't really matter where just so that it's offstage. So that's gonna be it's starting position. I'm gonna go to frame, let's say just 20 for now. And I'm going to hit F six to add the ending key frame, and I'm gonna move the ball to the center of the stage. So I'm just gonna drag it across like this. If we wanted to be really particular, I would do command K, and we would say a line to stage and center it horizontally. All right, so now what I want to do is if I wanna create the frames in between frame one and frame 20 . We're going to just right click and do create classic Tween. So now that ball comes onto stage and then it stops. Now what I want to do is just have a little bit of a pause here and then have it leave. So I'm just gonna go on down the timeline toe about frame number 50 and let's hit F six again. So that's the key frame that's going to start the leaving animation. I'm gonna go over to frame number 70. I'm gonna hit F six and add the frame for where it's going to be when it actually leaves, and I'm going to drag the circle over to the right. Let go, right click, create classic Tween. And so now when I play this animation back from beginning, we enter, we pause and then we leave. So again, it's a very basic animation, but it's one you'll be using in many, many projects and applications, and it's important that you can do this type of thing basically without thinking about it. All right, so I'm not going to provide instructions for this right here, but I want you to try to do this yourself. If you stumble or get caught somewhere. Come back, Watch the video and keep doing it until you do create it on your own. All right. I know you can do it. 15. Pulse: in this lesson will be building this simple pulse where an element grows and shrinks back to its normal size. We can use the same technique to have something fade in and fade out, or even wiggle. It's only a few steps. I encourage you to watch the video. And of course, you need to build this on your own so that you get familiar with these techniques and they become second nature. Let's go. All right, so here, we're going to work on our simple pulse. Okay, so let me take the ball out of the library. Place it on the stage will go to my align panel command K, and we're going to align it exactly in the center. And here we're just going to be doing a basic scale pulse. Okay, so we want to get bigger and then returned to its normal size. So for this, what I'm gonna do is at a key frame and frame number 15 by hitting F six and then another key frame in frame 30 by hitting F six. So as we know, every time we add a key frame that creates a duplicate of whatever was in the previous key frame. So in frame one frame 15 and frame 30 everything is exactly the same. All right, now I'm going to go back to the middle frame, which is framed 15. I'm gonna select my free transform tool. And the shortcut for that is going to be cute. A good one to know. So let me just click off. And if I have my regular selection tool and I hit Q, it's going to give me the free transform tool, all right? And I'm going to scale up by holding down shift. All right, So by doing that, I'm Onley changing the symbol on frame 15. Remember, back to the beginning. What I do in this key frame is not going to effect frame one or frame number 30. So now what I want to do is just Tween in between Those states create classic Tween create classic between. So now when I go back to the beginning, we scale up and then back down, And so that's what I'm calling my simple pulse. So when animations like this where you know you're going to be returning to the initial state, I like adding my middle and ending key frames at the beginning. It's a neat little trick. So again, it's a very simple animation. Very basic, I should say. But it's one of these things you'll be doing a lot. So again, I want you to open up the start file, try to build this on your own. If you get stuck, watch this video until you have these steps memorized. All right, this is the kind of beginner stuff I need you to have down pat so that we can speed through the bigger lessons ahead. Alright, awesome. 16. Spin: in this exercise will be doing this basic spin. You'll probably make things spin and rotate about a zillion times throughout your career. It's really important, though, that you understand that rotation is a frame property. Let me show you how we set this up, all right? And now to do the spin, I'm gonna go to the library. I want you notice that the ball that I'm using here is a little bit different. It's hard to tell when a solid circle is spending, so I made it two toned here. So go to my align panel again. What's that Keyboard shortcut? Oh yeah, Command K. And I'm just going toe boom boom! Center it perfectly and now to spend it again. It's a little bit different, and we haven't done this before. I don't want it to move anywhere, but I still need an ending key frame, so I'm going to click on Frame 20 hit F six to add a new key frame. Now, when I add a classic Tween here, I wouldn't do create classic Tween now in frame 20 once that Tween is in place. Even before you know, I could rotated a little bit like that, I would get a basic rotation, but let me just undo that command Z or control Z, but inanimate. If we want to rotate it a certain number of times, What we're going to do is go to frame one, go to the Properties panel, and here you'll see that rotation or rotate is a property of the frame. Okay, if I click on the symbol, I'm going to get Symbol Properties. Okay, it's a graphic. It's an instance of ball, but I'm gonna click on the frame to make sure I have the properties panel open. It tells me I'm getting the properties of a frame here, and by rotate, I'm going to say clockwise, and we're going to do it one time. Okay, so now when I run this by hitting return, you'll see that it spins around one time. If I go back to frame one, and I say, let's rotate that clockwise. Uh, I couldn't make that two times. Let's run, and then I will see it spins twice. So it's important to note that rotation is a frame property now. I can also move this and rotated at the same time, So here's a little trick and frame. Number one. I'm just gonna go back and drag this thing off stage. Go to frame 20. Move it over here. And so now you'll see that when I play this, we're actually going to do a move and spin. Okay? Pretty cool. If I think it's moving too fast or too slow, I can ADM or Frames. So remember the trick for that F five, right? That's gonna add frames. So hitting F five is going to add frames to that span. So I'm going to have more time now for this to move and rotate. If I go back to frame number one, there we go. Nice, smooth rotation and movement. So hopefully you can see that even though we're doing these very simple animations and short little lessons, um, we're going over the basics who were refreshing ourselves, and we're also learning some new things. All right, so it's important, too, to watch every video, regardless of how simple it might be from the beginning. All right, I'm going to always be going over the basics and adding new things for you. All right. So, again, it's important to crack open that start file and build this animation for yourself. All right. You can watch me do it and think you know what's going on. But really, it's not until you open up the file build these Tweens that you're gonna build a confidence that you'll be able to do this stuff quickly in the future. All right, So give it a shot. It's only gonna take you, like, three minutes. 17. Skillshare erratic: in this lesson will be doing this erratic animation sometimes just need something to move around all crazy. I'm gonna show you how you can build a state of animation really quickly without manually creating a bunch of key frames and Tweens. I'm gonna show you a cool tip that allows you to insert key frames simply by clicking on an element in the middle of a Tween span. Check it out. All right, So for this erratic animation or this irregular animation, I'm going to take the ball out of the library, Place it on stage Now I could just go to frame number 10 hit F six at a new key frame. Move this thing over here, go to frame 20 at a new key frame, move it down, go to frame 30 at a new key frame by hitting a six and move the ball up. So now I have these different key frames with the ball in different position in each one. Then I would have to go right click, create classic Tween right click, create classic Tween and right click, create classic Tween. So now I have the ball sort of moving all over the place. Whatever. Okay, um, if I wanted to, I could also change the scale of it in different frames. But it's a lot of work to create all these key frames and create these three different classic Tweens. So let me show you a quicker way going to go back to the beginning. Just gonna do undo school. All right? Actually, graduate from this pretty soon and there I am. I have my ball on frame number one, and I'm gonna go to frame number 30 and hit F six to add my new key frame. And then I'm going to just bring the ball over here. All right? I'm gonna right click, create classic Tween. And now I have the animation of the ball moving between frame one and frame 30. And let's do this if I go back to frame number 10. Noticed that with the selection tool, I can't click on that ball to select it. I don't get the blue outline around it. The deal here is that I can Onley select an item in a key frame. Not in the middle of a Tween span like this, But check this out. If I click and drag. It creates a key frame for me. I can go to frame 20 and I can then 21 frame 20. I can click and hold, and it will also create a key frame for me. And let me just drink. Bring this down here. So now I have a similar animation and I didn't have to hit F six. I didn't have to right click to create new key frames all the time. It just sort of worked for me, all right. And go to frame number 25 here and again with the selection tool. If I click and hold boom, it creates a key frame, and then I can do whatever I want and I'm gonna move it up there and frame number 15. I can again click and hold to create a key frame, and I'm going to switch over now to my free transform tool, and I'm going to scale up in this frame, all right, And now there's something slightly different with the free transform tool. When we try this trick, if I go to frame number five, say, and if I click on it free transform tool wound, select it. If I click and hold with the free transform tool I'm holding for, like, you know, 10 seconds. I'm not getting a new key frame with the free transform tool to do this trick. You actually have to click and move it somewhere. And then the key frame shows up, all right. So with the regular selection, tool, clicking and holding will create the key frame with the free transform tool. It's clicking and holding down and moving. So here I'll just shrink this one down a little bit. And so, with just a little bit of clicking and dragging, I have this sort of erratic animation. Okay, again, nothing's planned. Where it goes in each frame, we're just doing sort of random stuff. Okay, so I just want you to know that you can't select something between a classic Tween span. So let me just go to frame 55. Do this one more time l f six to add a new key frame will right click to create a classic Tween and again right here in this frame. I can't click and select, but using the free transform tool I could move it up here. I can go to frame number 45. Move it down here and shrink it down, All right, so I didn't have to Right click and create new classic Tweens. I could just select mid span and move it around. So there's my erratic animation. And again crack open the start file and try to do this for yourself. I think you'll have some fun with it. Awesome. 18. Ufo with alien: Welcome back. We're gonna get back into some more animation. We're gonna be focusing that one using classic Tweens, and we're going to be showing you how to create multiple animations on multiple layers. All right, we're talking about one of the major rules of classic Tweens, and that is that you can only animate one element at a time per layer. We're gonna discuss creating multiple layers, naming them, locking them. We'll touch on the align panel a little bit, but let me jump over to the finished file. And so what we're going to be doing is creating this cool little UFO animation would actually be building on the previous UFO animation that we built. We're gonna be in a little bit more spice to it. We're gonna add an alien head and some text. So through the process of Ana meeting multiple things, we're going to really get into your head this process of creating classic Tween animations . All right, so let's get to it. All right. So, over an animate I have my file open called UFO with alien start dot f l. A. And I have my stage zoomed out to about 50% and in my timeline, I have one blank key frame here. There's nothing in it. You'll see we have that hollow circle with the black stroke and things are looking pretty sparse. Alright, Whenever I start off on animation, I like to have some frames to play with. As far as being in my timeline right now, I can't drag the play head forward. I have all these potential frames. Remember? What I'm gonna do is just go to frame number 60 here. And I could go to insert timeline frame, but that's very slow and arduous. So we're gonna be power user. So you know me and my shortcuts. What is it? Yep. F five is going to add a frame. A frame 60. And so now I can move the play head around and Ah, take a little sigh of relief. I want to show you in my library. I'm providing a number of assets for you. Show you that we have this alien head. We have his eyes as a separate symbol. The head as a separate symbol. We have this. Texas is out of this world. We have separate space mountains. We have an image with the space mountains and some stars. We have our UFO again and some text that says your skills are so at this stage of the game , I'm just providing the symbols for you show you had animate. But later on, I'm going to tell you all about creating your own symbols and all the different symbol types. But for now, again, we're focusing on animation. So what I'm gonna do here first things first in layer one. I'm going to rename this my background layer. So I double click on the layer. I'm just gonna call it background and I'm going to add my space background J peg to the stage. So I'm just going to drag it out anywhere. Now, I could try to line it up perfectly top left hand corner And I have some guides that sort of show me what's happening when I do line up with the bottom and then the left side. But what I want to show you is that I'm gonna use the align panel. And if you're using your essentials workspace, you can click on this button here for a line you can go to window a line, but you know me I like my keyboard shortcuts. So I'm gonna do command K on the Mac or control K on the PC. And so now this little pallet comes out and I'm going to click on a line to stage and then I'm just gonna do Let's go to the left edge and the top edge. And there I know that I'm absolutely, perfectly aligned to the top left of the stage. And my image is the exact same size as the stage. So everything's covered up. None of this cool little space background here. Now, throughout this project going to be adding the alien head, some text, the UFOs, and I don't want to inadvertently click on the background and move it and make mistakes and shifted off by even a single pixel. So if I have this thing aligning toe left and top, what I'm gonna do is go down to the layer in the timeline, and this little dot under the lock is gonna allow me to lock that layer. And what that means is that I can no longer select or move anything in that layer. So once I have my background in place, I like to lock it once that layer is locked. Next we're gonna build Rufo animation, and this is gonna be very similar to what we did previously with our first Tween animation . But you know what? Toe learn this stuff, it's all about repetition. Okay? And I want you to do this stuff a few times so that you actually get it into your head to build the muscle memory. And since we've done it before, I can do it fairly quickly the second time around. Um, what's going to be new in this lesson is that we're going to be adding new layers to our document. So here I have the background layer locked. I'm going to click on this button right here and add a new layer on top of it. OK, Anything I put in this new layer is going to be visually on top of anything in the background layer. I'm going to double click on this layer and name it UFO. Naming your layers is a great practice to get into. We want to build that habit because you might have 10 2060 layers in a f l. A file, and if you don't label them, it's gonna be a real nightmare. So in this UFO layer, I'm gonna go to my library. If it's not opened up, you can just click on the type here and I'm going to select UFO, and I'm gonna drag it out onto the stage. And from here on out, I'm pretty much gonna do the exact same steps you've done before. I'm going to select the UFO. We're going to use the transform tool to size it down. I'm gonna hold down shift that it constrain the scaling is gonna move it up here. I'm gonna go to frame number 10. I'm gonna hit what? Yes, F six to add a new key frame, and I'm gonna take the UFO, bring it somewhat into the middle. I'm gonna get hold down shift to constrain the scaling, and then I'm going to rotate it a little bit again. You've done this before, so I'm gonna go quick. I'm gonna go to frame number 20. I'm gonna hit F six to add a new what? A key frame? Yes, and I'm gonna take the UFO moving over here. Maybe tilt it down this way. Hold down, shift and shrink it. So I have these 123 key frames in and there's no animation in between them. But what do we dio exactly? We're gonna add a classic Tween right click create classic Tween right click create classic Tween So now I can drag back to frame one hit return or enter and we've played our animation. Next we're going to animate the alien head and this is gonna introduce us to one of the most important rules of creating classic Tweens. And that is this. You can Onley anim eat one element at a time per layer. So what does that mean? Well, let's say that in frame number 10 we decide that we want to animate our alien head. If I take the alien head and drag it out onto the stage and frame number 10 watch what happens? We get what's called these broken Tweens. In our timeline, we now see these dotted lines in between our key frames. And what will happen is the next time we go to player animation, we get this really weird thing of the alien head moving all over the place, and it's totally not what I wanted to do. All right, if you think about it? Anime really can't take one thing, which is a UFO and an immediate into two things and then in frame 20. Don't even know how it figured out what it was doing. Notice when I go to frame 20 that it just disappears. So at the end of the day, we're getting all these undesired and unexpected results. Okay, so again, the rule is Onley animate one element at a time per layer. So I'm gonna go back to frame number 10 and let me just undo, and that should hopefully get rid of my ailing and frame alien head. I'm sorry. And even though he's gone, I think you still in frame number 10. Let me just get rid of him. I'm gonna click on him and hit, Delete. And then instantly, you'll see that those dotted lines turned back into nice arrows and everything's pretty so moving forward. Whatever. You're doing your own stuff. If you ever see those dotted lines, it's a time to say OK, I mess something up, let me figure out what it is. So now that I got the alien head out of frame number 10 I'm safe. Well, I don't want to introduce the alien until frame number 20. Um, and what I'm gonna do for the alien now is add a new layer and I'm going to name it Alien. And you really want to get in the habit of naming your layers? I know it's easy not to, but after a while, you're gonna have layer one through 70 and you have no idea what to needs. A layer. Now, something I showed you previously was that if I want to introduce this new element to the stage and frame number 20 I need to have a key frame their first. OK, um, let me do it the wrong way. All right? I'll pretend that we're not students who took my boot camps for key frames and in frame number 20. I'm gonna take the alien head and I'm going to drag him out onto the stage. And now I'm gonna go back to frame number one and say, Oh, my God, why is that alien head on frame number one? Well, that's because there wasn't a key frame first unframed number 20. So if you make this mistake and you add your thing earlier in the movie, then you wanted to. You can always click on that frame to select it and then drag it forward. And so now my key frame is frame number 20 and I'm good. However, I want to show you the right way to do this. So let me just undo a bunch of stuff until the alien had goes away again, hitting on do Command Z. And so prior to putting the alien on the stage and frame 20 I'm gonna click, and I'm going to hit F six to add my new key frame. You may notice that it's a blank key frame. Well, that's because there was nothing on the stage previously. So I have a blankie frame and frame number 20 and I can take the alien head now drag him out onto the stage and put him just right about here. Sort of centered vertically. The few pixels off to the left. I'm not going for perfect right now. I want this alien head to start small and transparent in scale up. So what I'm gonna do for this is in frame 20. I'm gonna get things pretty much the way I want them to be at the end of the animation. Then when you go to frame number 30 I'm gonna click there, and I'm gonna hit F six again to create a new key frame. We've learned previously that creating a new key frame is going to duplicate everything from the previous key frame. So frame 30 and frame 20 are now identical. What I can do in frame 20 though, is using the transform tool is Aiken. Select him. I can hold down, shift and Aiken scale them down a little bit. And I can also go to the properties panel. And under color effect, it might be condensed for your collapsed. You could go to color effect in select Alfa. And here the Alfa is similar to opacity or transparency. All right, in Alfa of Zero makes him fully transparent. And Alfa of 50 is going to make him halfway transparent. Alfa of 100. He's fully opaque, so I'm gonna bring this Alfa slider all the way down to zero. And then so in frame 20 he's small and transparent in frame 30. He's big and fully opaque, so let me just go back to frame number 20 or somewhere in between that span and create classic Tween. And so now I have an animation of the alien had growing and fading in Let me just drag back to frame Number one Hit Return. And there you go. Hey, how you doing? You all right? Good. I just wanted to check in on you. Listen, I know we've been to going through this stuff for a little while now. You've been doing really good paying attention to these videos, and I'm really proud of you. You've done some hands on lessons, and I think we're really starting to get a hang of these frames, key frames, classic Tweens and all that jazz. So I just want to congratulate you. What, you think a little breather now? Okay. What? You get up, get some water. Come back. Well, not this thing out. You're doing awesome. All right, I'm back to wrap it up. What we're gonna do is just bring in that text that says your skills are out of this world . Let's go over to the finished file and I'll just show you that we're going to have Texas comes in from the right and feeds in a little bit says your skills are out of this world. Ha ha. All right. And pretty much it's gonna be more of the stuff we just did before. So let me go back to frame number 30 here and with the alien lier selected, I'm gonna add a new layer which will put a new layer above alien, and I'm gonna call it Your skills are okay. And now we know that if I want to start the animation of that text on frame 30 I'm gonna first select frame 30 by just clicking on it. Hit f six to add my new key frame. And I'm gonna go to my library. We're gonna take this symbol that says your skills are and I'm gonna drag it out onto the stage. And again, we're not gonna get too crazy with the positioning. I was gonna put it right about there. Maybe just line it up with his eyes a little bit, okay? And so that's where I want the text to be after the animation is done. So in frame number 40 I'm gonna click there again. Hit f six. Aren't you glad we're using keyboard shortcuts? I know you are so we have a duplicate of frame 30 and back in frame number 30. I'm going to just take this text and I could drag it over to the right. But what I'm gonna do is hold down shift and hit the right arrow key to move it 10 pixels over to the right and I'm going to do that three more times. 123 Okay, And then I'm going to go back to the properties panel. It's going to show me that right now the last thing I clicked on was a frame. Okay, so I don't want to get messed up by that. I'm gonna click on the actual symbol Ha ha. And it's gonna tell me it's a graphic. An instance of your skills are, and again, I'm gonna go to color effect style Alfa, and it's already brought down to zero. So in frame number 30 we're over to the right with an Alfa of Zero and frame number 40 or over to the left. Fully opaque boom right click, create classic Tween. And now my texts comes in and feeds and at the same time, for the last one again, the repetitions gonna help you we're going to add a new layer. I did that so fast, and I'm going to now say out of this world and we're gonna go back to frame number 40 here . I'm gonna hit my friend F six, go to the library, and I'm going to take out of this world out of the library. And we're going to just put it on to the stage, move it over a few pixels down a little bit. And now in frame number 50 I'm just gonna click there again. There's 50 hit F six and are key frame. I'm gonna go back to frame number 40 click on the symbol, go over about four times. It's OK that it comes off stage. At that point in time, we're going to go to the properties panel and we're going to set the Alfa down to zero. We'll right click here and create classic Tween. And now we're just gonna fade in. We'll go back to the beginning and we'll hit it. Awesome. You know, I think this is a little close right here. We'll watch this if I need to find tuned things a little bit. I can select this. I can hold down shift. And I can just move this a little bit over to the left using the left arrow key. Awesome. I can take the alien, maybe go a few over again. We're not going for pixel perfect placement right now, but we do have that option to move stuff around, obviously. So I'll drag back to the beginning. Hit, return or enter. And there I have my animation. Awesome. All right, I think we're gonna wrap it up here. Next going to do is give you follow along instructions that can do this all for yourself and again at this part of the learning phase. It's important to get all this repetition. And don't even ask you to watch this video one more time before doing the follow along part of this. But don't worry. I'm gonna give you all the steps you're going to do it. And all this key frame stuff in classic Tweens, it's all gonna sink in and become second nature. Just trust me. You're gonna get really good at this More beating 19. UFO with alien follow along: All right, I've got another follow along video for you. We're gonna be building this UFO with alien exercise. All right, So what I've done is I've taken the previous demonstration, and I've broken it up into 32nd chunks where I was going to show you very concisely, the steps you need to follow. Then you're gonna see instructions on the screen. When you see the instructions, just pause the video, do the steps for yourself and keep moving through. There's about six minutes of video here for you to watch. Should we don't this lesson in about 20. All right, so when you dedicate the time to doing this the right way, you're going to learn it. Really? Well, okay, there's gonna be a good deal of repetition in this video, but again, that's how you're going to learn. So follow along. Get through it and we'll celebrate at the end. All right. For instructions on where to get these files. Just read the description below. There should be something in there about where to download him. All right, so get to it. All right. I got the UFO with alien start file opened up. I have only one frame in my movie, so let's go to frame number 60. We'll click on Frame 60 and hit F five to add frames. We go back to frame one and let's go to the library and we're going to take space background J peg out, drag it onto the stage anywhere, and then we're going to go to the Align panel, which again you can go to window a line, but I want you to do command K. All right. That's gonna pop open the Align panel. Make sure a line two stages checked and a line to the left edge and to the top edge. And if you're panel stays open and you can just click off for it to go away next we're going to rename and lock layer one. So double click on Layer one and just name it background and hit, enter or return. And then we're going to click on the dot under the lock and that locks the background in place. I can't move it anywhere. Next. We're going to animate the UFO, so let's creating new layer double click to rename that layer UFO. You're gonna go to the library, drag the UFO out onto the stage and using the free transform tool. Just scale it down a little bit and leave it in the upper left hand corner. Next, we're gonna create our animation of the UFO. Click on frame number 10 Hit F six To add a new key frame, move the UFO to the center of the stage, pulled down shift to scale it up a little bit, using the transform tool and rotated forward a little bit next at a key frame in frame number 20 by hitting F six. Drag the UFO off the stage, rotated the other way and scale it down a little bit moving over here. And then you're going to go back to frame number one right click, create classic Tween and then on frame number 10 right click and create classic Tween. At this point, you conscripts through the animation, and it should look good. Next will add a new layer for the alien, so we'll click on the new layer button double click to rename the Layer Alien. We're gonna click on Frame 22 at a key frame there by hitting F six, and then we're going to take the alien symbol out of the library and drag it onto the stage . Next, you're going to add another key frame in frame number 30 by hitting F six. Go back to frame 20 using the free transform tool Scale the head down holding shift. Go to the properties panel and under color effect, set the style to Alfa of Zero and then right click on Frame 20 and do create classic Tween scrub forward. And now you see the animation of the alien. Next, we're going to animate. The first piece of text will add a new layer. Name that layer. Your skills are hit return. We're going to add a key frame and frame number 30 again. We're going to hit F six. To do that, we're gonna go to the library and you're going to take your skills are out of the library, drag them onto the stage and line them up roughly with the alien eyes using your arrow key or your mouse. Next, you're going to add a key frame in frame number 40 by hitting F six. Go back to frame 30 and with the text selected, pulled down shift and press the right arrow key four times 1234 and then go to the Properties panel and set the Alfa down to zero right click on frame 30 or anywhere between 30 and 40 and create a classic Tween scrubbed the play head to see your animation and a new layer and name it out of this world hit Return in frame 40. You're going to add a key frame again, hitting f six. Go to the library, take out of this world out of the library. Put it where you would like it to end up. Go to frame number 50 and hit F six. To add your key frame. Go back to frame 40 with that text selected shift right arrow four times and then using the properties panel, you're going to set the Alfa back down to zero and then right click to create a classic Tween scrub back to the beginning It return. And there you go, Wu boom, boom! You did it right. You just follow it along. You got these three or four different things animating and you prove to me that you have the mental strength toe watch these videos follow along and learn all right. You should be super proud of yourselves. If you've gotten through this exercise, you know that you can handle anything that I'm gonna throw at you in the rest of this course. And I have been trying to tell you it's really not that hard. All right, We're going to really hammer in these fundamentals. And as we keep going, you're going to see that you have the same skills that people are using in the professional world or right. And yes, it's gonna take time to find, tune them and become an expert. But really, it doesn't get much. All right, so I got a ton of information left to show you, and I really hope that you followed me along for the rest of the ride. All right, so congratulations. And I hope you got a lot out of these videos. Let's keep going. More beating 20. Choose platform type: they class. What's up? I got a really important lesson for you today. It's not gonna be about how you move this in that over here and there. And Adam Eat CC. But it's going to be a deep dive lecture explaining the different document types and platform types and animate CC. Up until this point, I've been telling you, Add the document type doesn't matter. And for the most part, that's true, because all the stuff we're learning about key frames, Tween ing different tools works exactly the same in the HTML five canvas document as it does in the action script 3.0 document. However, moving forward, I'm going to be very specific about which document type I choose, and I want to explain exactly why I have made this decision, and I could just give you the answer in a sentence. But I really want you to understand why I'm making this decision and why we're using the one we're using. So, without any further ado, let's get into it. So now I present to you animate CC 2019 choosing the right platform type slash A brief overview of 20 years of flash technology, the reason platform type is so important is that determines where your animations will run , where they play in a Web browser. Do you want to drop them into an email or perhaps upload them to Facebook or Twitter? It also determines what features you will have access to in the Animate CC interface. Some document types have more features and others, and this is extremely important. Lastly, platform type determines what scripting language you will use if any, whether that be action Script three or javascript fun fact. You can actually type javascript directly into animate and control your animations with JavaScript So inanimate CC 2018 and earlier. The new document window would allow you to choose your document type through this list on the left. There's quite a few here, and then the most prominent ones would be HTML five. Canvas and Action Script three. Now, although you could click on each one to get a brief description, I suspect many people starting animation projects were just like, Hey, I just want to make a simple, looping GIF. But what got to choose this crap? For an animate CC 2019 things were different once you choose a category than you choose a size, and then you choose a platform type. It's interesting to note that different types of animations default the different platform types. Notice that for character animation that the platform type is action Script three. And you may be thinking, Well, I'm doing character animation that's going to be like intricate key frames with slight movements. Why would you need action? Script three for that, And that's a valid point. And when I intend to address when I select education as the type of animation I'm going to create, you'll notice that the platform types which is to html five canvas again a newcomer may be confused by this. What makes HTML five canvas better for education? Well, we're gonna figure that out, but lets first take a little tour through the life of Flash and the Flash Player to better understand what these things mean. So way back in the late nineties, the Internet was a gruesome place. Even the largest brand struggled to make a website that look good. Even Apple, the ultimate authority on what looks good had this is its website. Yuck. Some of the problems with early Web design was that you had limited font choices and everyone was on dial up modems, so you had to use really small images that were often compressed with low amounts of colors . Layout was restricted to boring table grids of rows and columns, so then Flash Player comes in to change the game. Flash Player was initially developed by a company called Future Splash, which was then acquired by Macromedia and around the late nineties is where the flash player really gained prominence. So the flash player was this small plug in that could be installed in the browser. Internet users would install this little application called Flash Player, and then they'd be able to play things called Swift Files. Now, since the Flash Player plug in had a lot of code inside of it that knew how to run Swift files, it allowed swift files to remain small. Another benefit of Swift files was that they were super crisp. They had scalable vector graphics with very low file size. Flash Player also supported streaming, which meant that you could create an animation and progressively download it so you could start playing the animation before the end of it was actually downloaded on the user's computer, and this was huge. Another thing designers loved was that you could use virtually any font you want. And for developers, it largely eradicated cross browser issues. Back in these days, there were browsers like Netscape and Internet Explorer for the Macintosh computer, and it was really difficult to get websites to render the same across browsers. But the Flash player took care of a lot of that. And this until all these benefits. There was also something called action script, which was a language that could be executed inside the flash player. And it offered the ability for dynamic animations that could be controlled via script. So you could literally write code that told your movie clips how they should move around. You could create animations that responded to mouse interactions, so now you could click on things, drag him around, drop him where you want. It was awesome. Action script also supported the progressive loading of high rez imagery, so you could build an elaborate gallery with hundreds of images. You could track the download of each image and Onley load the images that you want when you want them. You could do super cool bit map manipulations on those images. You could warp them. You could do color effect. You could turn them gray scale. You could affect the contrast, all with code. There was no script driven vector art creation. You could write a small little script that would create thousands of lines and fills. You'd have this generative random art that looked beautiful. You could now load data from databases or next time l file. So you're galleries and everything you built could have all the text on descriptions and external files that were easy to update. Then came superfast GPU accelerated graphics and something called Stage three D C. Could literally get console style three D graphics running in the browser inside the Flash Player. It was awesome. You could also get access to the local file system and the Web camera. The Flash Player offered features that none of the Native browser technologies could touch designers who would have never dreamt of becoming computer programmers. We're now creating games and interactive online experiences that rival what big companies are putting out, and this all spilled over the Web design Web design was completely revolutionized. No longer did you need to fit small images into tiny boxes, you could now use any font you like. You could overly images and text with advanced features and blend modes just like designers were doing in photo shop. There are virtually no limits to what you could do, and designers took full advantage by 2010. Flash Player ruled the Web. Virtually all video was delivered through Flash Player YouTube. Lulu, Netflix used flash player for streaming video With DRM protection The entire rich media advertising industry was literally built on Flash Player and Swift files. Now you can have ads that you could expand, play videos in or even play a game. In Speaking of which tons of games we played in the browser, huge mobile titles like Angry Birds reported the Flash Player and then integrated into Facebook. The majority of award winning websites were flash based, and there was a thriving developer community. There were flash evangelists. There were developer support forms. There were tons of tech blog's all focused on flash. There were marketplaces where you could buy and sell your little flash widgets and creations, and flash was available on hundreds of millions of computers. Then this guy who gave us this thing wrote this letter. I Steve Jobs, I like Thanks was banned. In a nutshell. Flash would never run on the iPhone. A few of his reasons. Abbreviated one flash was not an open technology. That meant that Adobe had control over it. It was sort of a black box, if you will. It was an open source. People didn't know what was going on inside the Flash Player, and thus it couldn't be trusted. Html five CSS and JavaScript We're going to be the tools that powered the next generation of the mobile Web and application development. These were open standards that anybody could pick up, and no one really had control over. You thought the flash players reliability and performance were questionable when he was especially concerned about battery life. A big thing was also the lack of touch support. For the last decade or so, everything was mouse driven. It wasn't until the iPhone came out that really we started doing touch based interactions on a large scale. And, of course, he was worried about crappy APS. What he meant by this was that with flash development, there was no unified or standardized universa interface. He was worried about people who are poor designers making things that wouldn't look good on his beautiful iPhone device. They make the buttons too small for you to touch. They choose the wrong colors, and it would just be a horrible mess now, although there was some truth behind some of these statements, not everybody agreed. The developer interpretation was simple. Apple felt threatened by Flash Player and wanted full control over its APP store ecosystem . In simple terms, if the flash player was allowed to run inside of a mobile browser, people would have access to fully functional applications without going through the APP store. In this regard, Apple wouldn't be able to control the quality or security of these types of applications. Perhaps another concern would be that developers would make games and APS for the flash player that would compete with what he was selling to the APP store as well. Who knows, regardless of the reasons or motivations, one thing was clear. Apple had drawn a line in the sand concerning the Adobe Flash Player and IOS, so Adobe needed to react, and they did a few things. They develop the flash player for Android's mobile browser. This thing kind of worked, and it was exciting, and I had some hope for it. But in the end, it just didn't work out. Performance was never that great, and there are plenty of tests showing that the battery life was pretty horrible. There was also the air runtime, which allowed flash based content to be packaged into IOS and android APS. This was actually a really clever tool, and it's still alive and well today. So the air runtime basically just allowed you to take content developed in flash, professional or flex and compile it into something that could be sold through the APP store . If you're interested in doing cross platform application development, definitely check out air. And the biggest advancement was that in 2011 they introduced the ability to export to each small five canvas with decent JavaScript support directly from for last professional. In a nutshell, this meant that you could use flash professionals, powerful timeline and art creation tools to create animations that play based off the open Web standards that Steve Jobs is asking for. You could make cool stuff in flash professional and run it natively in a Web browser without the flash player, and I can't overstate how extremely cool this is. While Adobe was trying to figure out what they should do next, the entire industry was in turmoil. Entire flash communities and marketplaces basically crumbled, users left and the doors shut down. Flash freelancers and agencies had their workloads cut severely, and the entire online and industry moved away from flash $1,000,000,000 giants like Google's DoubleClick had to completely revamp their entire infrastructure to switch from serving swift heads to HTML five. Whether you are a solo flash freelancer or a $1,000,000,000 company, if your livelihood was in any way tied to the production or shipping of swift files, you have to find something else to Dio and says all because one guy wrote a letter. Now, although Steve Jobs may have had some valid reasons for not wanting the flash player on the iPhone in its current state, the unfortunate reality of 2010 was there was nothing out there in the open standards world that could compete with the Flash player. As faras features go, and even by 2014 the open web standards of HTML, CSS and JavaScript were still grossly incapable of matching all the things that the Flash Player could do. And from where I'm sitting, it's probably only been the last two or three years where I've been seeing the cutting edge websites and can think to myself. Yeah, we really don't need Flash to do that kind of thing anymore. So let's take a look at where we are today. In 2019 Flash Player has it's end of life slated for December 2020. That means Adobe will no longer develop or support the flash player, and the Flash player isn't installed by default on desktop browsers. That means you have to manually install it, and when you encounter flash content, usually have to click to play flesh. EDS. Air basically non existent and virtually all video and audio is now HTML five compatible, so sites like YouTube and Hula and Netflix can get you video without the flash player. Now let's discuss where's flash professional today. Well, it was renamed to Animate CC in 2016 largely to get away from all the stigma with the flash name. So even though the flash player pretty much was getting killed off and dying the desktop application Flash professional, which was still used to create awesome animations and applications. I still had plenty of life in it, and people were confusing it with the flash player when people would say, Oh, flash is dead They would think that the flash professional application was going with it, and that was causing a lot of trouble. So now it's called Animate CC, and Animate CC is a multi platform development tool for action script video gift air for Android and IOS Air for desktop each more five canvas SPG Web G l and G L T F. Which is basically a three D format that allows you to transfer three D models and scenes. And we got VR 3 60 in VR Panorama. So I'm not gonna explain what all these are. But the basic idea is that animates. Sisi is an amazing program for designers, animators, programmers, where they can make incredible artwork come to life and exported to all these wonderful formats. So now the big question. The reason I started this presentation in the first place which platform type to do Select Action Script three or an HTML five canvas document. You're probably thinking, Hey, action Script three is just for that flash player or air thing. It's outdated and broken, and html five canvas is based on Web standards. It's what Steve Jobs wanted. It has to be better. Well, I answer the big question with another question. Will the animation need to run in a Web browser and support interactivity? If it needs to run the Web browser, It should definitely not be a swift file. So let's start leaning towards HTML five canvas. However, the deal breaker is whether or not interactivity is needed. If yes to both of these, then definitely choose HTML five canvas. So let's take a look at some things will be good for HTML five canvas. You'll choose HTML five canvas for things like each team of five banner advertisements, because with these, you need to click on them to go to a website. So that's interactivity and low run natively in a browser. Things like games, lots of interactivity and you want to run in the browser without a plug in. We also have quizzes great for education, interactive maps and image galleries. All of these things are great for running natively in a browser and have some level of interactivity. Now when creating HTML five canvas documents, it's important to know what they export as. And when you export your animation, you're gonna get a collection of HTML JavaScript and image files that could be incorporated into a website. Let's take a look at what that looks like. So over here in Animate CC have an HTML five canvas document with this very simple animation of Herman standing up and showing us his boxer shorts. And there's a pool in the background, and I have an exact same animation built using in action script three file. So what I want to do is show you what happens when we export the html five canvas one before I export. I want to show you that in my finder I have this file saved in a folder called Canvas Export and the F. L. A canvas file is sitting all by itself here. There's nothing else there. So let me just dio a control test movie in browser. So over here chrome pops up and we have Herman and a meeting on a loop. If I right click, you'll see that I can inspect this element. And if you're a Web developer, you'll notice that we have a canvas element here where all this animation is being drawn to . Okay. What I really want to focus on, though, is the fact that in my finder where I had that f l a document saved, I now have in HTML file a JavaScript file and the separate folder with the image of the pool. So if you're a Web developer, you'll be familiar with all these different file types, and you'll know what to do with them. But in order to get your animation out into the world, you basically need to know how to upload these files to a Web server or incorporate them into an existing Web page. But you can't take these files and drop them into an email or upload them to Facebook or Twitter. To show your animation, you'd have to convert all this stuff to a video or a gift, so don't get too bogged down with the particulars of all this Web technology. I just want you to understand that when you export an HTML five canvas document, you're going to get an HTML file, a JavaScript file and whatever bit mapped images you have or Sprite sheets inside of an images folder. So now that we've established the type of files that the HTML five canvas document exports , I also want to point out that you can take your HTML five animations and export them to video and gift. So now let's jump over to why would we choose the action script document type? Well, we choose up primarily for linear, not interactive animations export his video or gift. And this is basically any type of animation that you're just going to sit back and watch passively and the uses for these are huge. All right there. Perfect for social media sharing. You can drop them into your emails to bring them or the life. And obviously you can drop them into Power Point keynote and Web pages, and you especially want to use action script documents for intricate character animations and cartoons. Let me just walking through a few quick examples. So here I had the animated adds Twitter Page, which is an account that I set up to show people the types of animations that I like to teach them how to build. You'll notice that All these animations play as soon as they scroll into view, which is awesome. So all of these air gift or video files that would be very easy to make with Anna Meet C. C. I also mention that these types of animations are great for dropping into emails to give a little bit more possess. So here's an example of a gift dropped into an email that I sent out to my newsletter. I also mention that action script three documents were great for intricate character animation. I'm not a great character animator but animates CC 2019 ships with a bunch of files for you to explore, so you can see how the pros really do it. These files, I believe we're all created by Chris Georgie Nous, who's an awesome animator. So I suggest when you crack open animate CC 2019 next time you can just go to file new and the new document window is going to show you down on the bottom here, a bunch of different examples of really cool animations that you can do with all the new features of animate cc. Well, you gotta do is double click on them to open him up, and then you can explore all you want. Let's just talk real quick about how accidents trip 3.0 phile exports primarily. You're gonna get a single swift file that could be played in Flash Player here in Animate See. See, we have the action script version of the Herman Animation. If I go to export it, we're gonna get a single swift file. So let me just show you real quick in my finder that I have an action script three point ofl a sitting alone in its own little folder here, and I'm gonna go to control test movie in Enemy and you'll see that the animation pops up in its own little window here. And when I go to my finder, you will see that we have this action script 3.0 swift. If I double click it to play on it, it's going to want to play in the desktop version of the Flash Player. All right, if I go to export this to a Web page control test movie in browser Oh, unfortunately, Google Chrome's gonna pop up and I get this little button from 10 years ago that says I need to install Flash Player. Unfortunately, I just can't do that right now. I love Swift files to death, but again, flash players going away and I really can't recommend that anybody makes content for the flash player. So we've established that the Swift Files that can be played in Flash Player basically bad and useless because the flash player is going away. So what good are these action Script 3.0 documents. Well, the big thing is that they do export as video or GIF. And as I said before, they can be used in Web pages, social email and even broadcast television and feature length films. Why you don't hear more about this is because there's still a lot of misconceptions out there. All right. People believe that since HTML five canvas is a Web standard, so it must be the one to choose when creating a new document. And, of course, people think that accent script 3.0 is a relic of the flash days. Steve Jobs didn't like it. It doesn't work on mobile. We shouldn't use anything associated with it. So the action script 3.0 F L a file. This sort of getting thrown out with the flash player. And, of course, since both html five canvas in action script 3.0 Docks can export to video and gift, you might as well use HTML five, right? Why not? Well, I got to say there's some truth in these things. However, The Action Script 3.0 document is far superior to the HTML five canvas document in terms of features and capabilities in terms of what you see and have access to in the animate C c I . D e. The HTML five canvas document is literally a second class citizen. A s three smokes html five When it comes to filters like drop, shadow, blur, glow and bevel blend modes like add lightened screen synchronizing audio three D and especially new features the A s three docks always get the cool stuff first, which is why those f l a files that I showed you before with the awesome character animation. They are all action script 3.0 documents and the allow animators and desires to do things that you simply can't do in the HTML five world. For instance, this one right here that has lip sinking toe audio. Man, this has gotta be the cleanest pH I've ever seen. Not a single piece of trash. I'm stopping. You just can't do that in the H 75 world. The HTML canvas document does not support any sort of audio sinking. I want to create individual videos to show you just exactly how the A s three document excels in all these different ways. So to wrap up, I'm just gonna lay out my personal stance. You're gonna choose Action Script 3.0 documents. If you want all the cutting edge features of animate CC so that you can make awesome videos and gifts that are easy to share, you'll choose HTML five canvas. If you want to create interactive animations, games and APS that need to play natively in a Web browser, moving forward with Anna, meet C C for everyone. We're going to be using the action script 3.0 document type because that serves our needs the best. And in the future, I really hope to have an HTML five canvas course for you so that you can learn to control your animations with code. Anna. Meet C. C. Is an incredible platform for learning basic JavaScript without all the headaches of HTML and CSS. So stay tuned for that. All right, class. Hope you enjoy the little walk down memory lane. I'm hoping now you have a greater appreciation for what animates Sisi is where it came from , what it's given us and moving forward. We're just gonna choose that access trip 3.0 file type with confidence. Alright, It's awesome, believe me. 21. Edit symbols: All right, folks, I have an awesome little lecture here on editing symbols. I'm gonna show you how to edit them in place and it them from the library. We're gonna explain how each symbol has its own timeline with its own layers. You'll see how you can nest one symbol inside of another symbol and in cases where you want to symbols to be sort of the same. But not exactly. I'm gonna show you how to make a duplicate of an existing symbol. So for this exercise, there's not much that you need to do. Just sit back and watch, soak it all in, and then I'll have a little exercise for you so that you can do some of this stuff for yourself. Let's go. All right. So here, inanimate C c. I have a file opened up and in the library. I have this face and I have I symbols. Okay, So have nothing on the stage right now. I'm gonna take the face, and I'm going to take multiple instances of this face out of the library and place them on the stage. Now, I'm gonna go for my properties panel, and I want to show you that when I click on this item, the properties panel tells me it's an instance of face. If I click on this one, it is also an instance of face. As you can imagine, so is the 3rd 1 Now I can transform different instances of the face. So, for instance, I could make this one here smaller. I can take this one and rotate it, and I can take this one here and do something like, I don't know. Let's change the, uh, Alfa of it down to 40%. So I have three different instances of the same symbol. Scaling this one doesn't change this one or this one. Now suppose after doing all this amazing work, I decide that I want to edit the face. Maybe I want to make it a little bit happier. So there's two ways to edit a symbol. One way is to edit in place, which means that I edit it directly on the stage or I can edit it from the library. Before I do anything. I want to point out that in my main timeline you'll see that I have a faces layer here with one key frame and up top. It tells me I'm in scene one. Now, watch what happens when I double click on this face. DoubleClick. What happens is I literally go inside of the face symbol so you'll see that I'm in scene one inside the face. And now I have three different layers. I have ahead layer a mouth layer and an eyes layer. One of the most amazing things about animate is that every symbol has its own timeline. So right now, I'm in symbol edit mode, editing the timeline and the assets inside the face. So let me just take this little line here and using my free transform tool. I'm just gonna bend it down and make it a smiley face. Now, notice that as I'm bending this back and forth, look at the other two faces that you see there sort of great out a little bit. But as I'm making changes inside the face, all of the instances of the face on the main timeline are also being updated. All right, this is really cool. So as I'm editing, I'm seeing how other instances at different sizes and opacity zehr being changed. I'm gonna go back to see number one, and now you'll see that all the faces are selectable and seen one, and they all have a smiley face. I can double click on the scale down face here to go into symbol at it mode again, and you'll see the same head, mouth and eyes layers down below. And I could select the background color and just changed the film. Maybe I'm gonna make him all pink smiley faces. OK, go back to seen one. And now all the different faces have changed. If I go into my library, you'll also see that the face symbol now has this magenta background, if you will. The second way of editing symbol is editing it from the library. Watch what happens if I double click on the symbol in the library? It takes me again into symbol edit mode for the face, and you'll see that I see all three layers for the face. But now I'm seeing just the face. I'm not seeing anything else on the main timeline. Let me just take that background color and I'm going to change it back to a friendly yellow . And there I go. So I've added the face from the library. I'm gonna click back to see number one and voila! All instances of the symbol have updated. One of the biggest mistakes people new to flash make is that they can sometimes inadvertently double click on a symbol. They go into symbol edit mode, and they're sort of thrown off by weight. What are all these layers here, or why aren't I seeing the Tweens that I have on stage? So always be conscious of if you're in symbol edit mode or if you're on the meantime line. So right now, this tells me I'm editing the face and I can click back to seeing number one. And there's my main timeline. Another cool thing about symbols is that you can have nested symbols. So let me double click on the face again, and I'm gonna show you that in the eyes layer here. This object here if I go to the Properties panel is an instance of I so inside of the face , I have an instance of the I. In fact, I have two different instances of the I. So if I wanted to give this, I may be a black pupil or something like that I could double click on any instance. Now you'll see that I'm in scene one inside the face inside the eye, and I'm just going to take my oval tool set the fill color, toe black. I'm gonna get rid of any sort of a stroke. Let me just zoom in a little bit and I'm just gonna draw a little black circle. When I'm drawing the pupil inside of this eye, you can see the other. I gets it as well. Go back to the face, go back to seeing one when you zoom out a little bit. And now all three instances of this symbol have eyes that have the black circle people and a smiley face. So it's very important to understand that every symbol has its own timeline and symbols can be nested inside of other symbols. This is incredibly powerful. And also editing any instance of a symbol will update all other instances of the symbol. I'm gonna go to my library and let me take another face out right here. Now, suppose I wanted this to be a pink face, but all these other faces I wanted to the yellow Well, I've already shown you that editing one is going to update all of them. So what I could do is right. Click and I'm going to say, Let's duplicate this symbol all the way down here and I'm gonna call it face Pink. Okay, notice that another symbol shows up in the library. It's a duplicate of the original one, and I can double click on it to go into symbol edit mode of face Pink Aiken, select this circle here, and I can change its color to pink. And now I've only changed this one here. I'll go back to seeing one, and now I have a pink face and I have three yellow faces. I'm gonna switch over to another file, and here I have a face that's being animated on the meantime line of a face layer. And I have a few classic Tweens with the face spinning, and then it pulses up, scales back down, and then it rolls off stage. So it's important to note that in frame one, this thing here is an instance of face and in frame number 15 I have a key frame that also has an instance of face. So all of these key frames each have an instance of face. So if I double click on this face here again, I go into symbol edit mode and I'm gonna take the mouth and I'm going to make it a smiley face when I go back to seeing one. All the instances of the face in all the different states of animation are now updating again. Editing the symbol updates all instances of that symbol in your project in the next video. Also, you had to create your own symbols, and then we'll talk about creating your own animated symbols. It's so awesome. 22. Edit symbols follow along: in this follow a long lesson. I'm gonna show you the exact steps for editing a symbol in place and in the library. I'll also show you have to duplicate a symbol and edit it. Let's begin using static faces. Start dot fl a double click on the middle symbol and notice. In the edit bar, you'll be inside the face in symbol Edit mode, using the selection tool. Roll over the mouth until you get that little arc under the Pointer icon. Click and drag down to edit the smile, however you like. Click on the scene one button in the edit bar to go back to seeing one. Next, we're going to edit the eye symbol. Go to the library panel, double click on the I. Add a new layer by clicking on the new layer button and name it pupil. Select your brush tool. Make sure the fill color is black. Go to the properties panel and make the size about 20 pixels and just click right in the middle. Click back to seeing one. I noticed that all your faces have beautiful eyes and wonderful smiles. Awesome job. Next, we're going to duplicate the center symbol in. Turn it pink, using the selection tool, right click on the center symbol and select duplicates symbol. Name the symbol pink face. Double click on the symbol to go into symbol Edit mode. Click on the yellow circle so that it's highlighted in the properties panel. Next to the paint bucket, Fill, click on the yellow and select any pink color that you want. Go back to seeing one, and now you have a duplicate face that you edited in a custom way. Congratulations. All done. 23. Create symbols: Alright, So I've shown you. How did Adam eat symbols? I've shown you how to edit symbols. What's left? Oh yeah. You need to know how to create them in this video. I'm gonna show you the two most popular ways to create new symbols. Let's go. All right. So to get started creating our first symbol, I just want to point out that in my library right now, there's nothing at all. And I want to create just a very simple animation of this character Herman named after the great PW, You know, scaling up. So I've told you before that we can't animate something with a classic Tween unless it's a symbol. So what is this thing? Well, let me go to the properties panel. And when I click on these different items here, you'll notice they get highlighted in that dot matrix pattern. That's a visual cue to tell me I have a vector shape selected, but if we go to the properties panel, you'll see that it is in fact a shape will see the fill color. If I click on the body again, it's a shape. So all I have here are a series of vector shapes. This is not a symbol yet, so if I want to animate it, I'm going to turn it into a symbol. So I'm gonna use my selection tool. Make sure I have that selected. And I'm going to click and drag to draw Marquis around all that vector artwork so that I'm sure to select all of it as I've shown you previously. You could also click on the frame and that's going to select all of that vector artwork as well. So to turn that into a symbol, I'm gonna go to modify convert to symbol. Now I'm gonna come back and explain why Convert is a little bit of a misnomer. But let's just click on that. And then I get this dialog box that pops up. It asked me to name my symbol, so I'm gonna do Herman. And for the type we have graphic movie clip in button, depending on what you created last might be the default that you see. For now, we're just going to use a graphic, and the registration point is basically going to be the point where the X and Y coordinates are determined from right now we'll leave it in the center and hit. OK, now two very important things happened. You'll notice that my artwork is now outlined by this blue outline. Okay, You no longer see the shapes highlighted with that dot matrix pattern. And when I go to the properties panel, you'll see that Herman is now a graphic. Okay, so we have a graphic symbol selected, and it's an instance of Herman. And as I talked to in the previous lesson, we could go to the library, and now we can have multiple instances of Herman on the stage. Let me just delete those going back to the Properties panel. I want to select Herman one more time and mentioned the X and Y coordinates of him. Okay, When we created Herman, we said the registration point was going to be in the center. So if I take the X coordinate and set that to zero notice that his center gets lined up to the left edge of the stage zero pixels from the left edge. And if I said his Y to be zero, that's gonna bring his center up to the top. All right? I just want to explain that the registration point is the point where the X and Y coordinates come from. I'm gonna take him and drag him back down here. And just as a little refresher now that he's a symbol, he could easily be animated. Now I want to talk a little bit about this convert to symbol business from the menu. Now, when I started teaching flash classes back in, like 2000 and five, the person I was learning from Victoria Torres, that noble desktop mentioned that convert to symbol was a bit of a misnomer. Because when you think of convert, you think of changing from one thing into another. And her point was that you're really inserting something into something else. So what do I mean by that? Well, remember when I started out with Herman, he was a bunch of vector shapes, and then I converted him to a graphic. Well, if I double click on Herman, I'm gonna go into symbol Edit mode again. Right? So seen one, Herman. And here we have those original vector shapes. They didn't change from one thing to another. They were just placed inside of the Herman symbol. Let me go back to seeing one and I'm gonna add a new layer to my document. Let me be fancy and called the 1st 1 Herman, and then I'm just gonna call this one text. So I'm gonna go to my text tool, and I'm just gonna type the word Herman in the most awful color possible. And actually, let me just change that around, okay? Let me select the text and go change the color to Herman Blue. All right? Very pretty. So if I want to animate this text right now, if I go to the properties panel, it tells me it's a static text field. Okay, is not a symbol. It is not something I can create a classic Tween on. So what do I want to dio? I want to change it into a symbol, so I'll select it and you'll see again. It is text. It is edit herbal. Okay, I'm gonna go to modify, convert to symbol. I'm going to go through the same steps and I'm gonna call it Herman text and hit. OK, so now when I click on this, the properties panel tells me it's a graphic now, Was the text field changed into a symbol? Was it converted into something else. Ah, maybe I'm just gonna argue that if I double click on this symbol, I go inside of it in There is my original text. So my point, don't be picky, is just that We're really inserting something into a symbol, all right. There's nothing being changed. I can still go into this text, and I can edit it and give him a proper capital First letter. Go back to seeing one, and now I have my graphic symbol. So all I'm saying is that modify, convert to symbol might more accurately be insert into symbol. It's been this way for like 20 years, so it's really not worth making a fuss over. But it's important to note that the stuff you have selected when doing modify convert to symbol gets placed inside of a new symbol. If you ever want to edit that stuff, you just double click on the symbol to go into symbol edit mode. All right, so that's how we create the symbol with something that's already on the stage. There's another way to create a symbol using insert new symbol. When this happens, we get asked, Would you want a Neymar symbol. And right now I'll say Star will keep it as a graphic. I'm gonna hit. Okay, now, when I do that, we automatically go into symbol edit mode for the star notice here that I'm in Layer one. There's a blank key frame, and there's nothing to see at all. My star symbol has already been put in the library, but I haven't added anything to it. So what I'm going to Dio is go to the Polly Star Tool. Click on that. I want to go to the Properties panel and I'm just going to go to options and I'm going to select Star and we'll do five pointed star hit. Okay, right now that fill color set to blue that's gonna work for me, and I'm just going to drag and create a star. I wanted to be centered around that registration point there, so I'll just click on it, go to the Align panel Command K or control K and will boom, boom get it centered. So now again, I'm inside the star symbol If I go back to seeing one, watch this, huh? There's no star. Well, remember, I never put this thing on the stage it on. Li lives in the library, so if I want to use it in my file and animated, I probably create a new layer. Double click on it, call it star, and then I can drag it out onto the stage. So there are the two ways to create a symbol one drawing something on the stage and going to modify, convert to symbol or going to insert a new symbol and creating a symbol directly in the library. All right, you've seen me create symbols. Now it's your turn. In the next video, I'll have some very simple step by step instructions for you to follow and a little bit of a challenge. Check it out. Well, you know, beating. 24. Create symbols follow along: So now I have a follow along exercise for you, where you're going to create a symbol on the stage using modify, convert to symbol and you'll create a symbol directly in the library using insert new symbol these air fundamental concepts that you need to master. So please follow along closely and do this exercise at the end. I have a fun challenge for you. Let's go using the F l A file. Create symbol Start. You're going to use the selection tool to select all of the shapes that make up Herman. Go to modify. Convert to symbol. Name him Herman. And make sure the type is set to graphic and hit. OK, go to your library panel and notice that you now have a Herman symbol in the library. That was pretty easy. Next, we're going to create a symbol in the library. We're gonna go to insert new symbol name this symbol star again. Make sure it's a graphic hit. Okay, The edit bar will show us that we're now inside the star symbol. Select the Poly Star tool. Go to the properties panel, click on options. Make sure the style is set to star and number of sides is set to five and hit OK. Also in the properties panel. Select a filled color that isn't the same as the stage. I'll select a blue and draw a star. Used the selection tool to select the star. Open the Align panel with a lying to stage selected align horizontally and vertically. Go back to see number one by clicking seen one in the edit bar. You'll notice that there's no star on the stage. That's because it's in your library. Go to the library panel and dragged the star onto the stage. Awesome. You made two symbols. Now I know it's not the most exciting thing in the world. But if you're watching this, I'm really proud of you for going through this lesson and doing the steps, because that's the way you're going. Toe learn. Now. I have a little bit of a challenge reward for you. Okay, I want you to take these symbols that you created and animate them for me. All right. Check out what I want you to do. Now that you have your own symbols, I want you to animate them. So my challenge to you is creating animation with Herman and two stars. It doesn't need to be anything fancy. You can do whatever you want. Right now, I'm just scrubbing through a timeline where two stars air moving up and Herman's moving down at the same time. There's a little bit of an overshoot that happens. Then they go back to center. So I'm not asking you to replicate what I did. But I want you to have some fun. Move this stuff around, spin it faded. Scale it. Do something on your own. One little tip. Make sure each symbol is in its own layer. All right, I'd love to see what you do. Enjoy. 25. Nested animations: All right, folks. What's up? I'm super excited about this exercise. You're gonna make these three pulsing hearts, and this is gonna be our first exercise on nested animations. We're going to put some animation inside of a symbol. Now, this can be a little bit confusing at first. So what I'm gonna do is show you the finished file before I show you how to build it. Check it out. All right. This is what are finished file is going to look like three hearts on the stage. One layer, one key frame down here. And I want to show you that when I select this element here, it's the heart animation symbol. And if I double click on it, there's a heart inside of there that pulses. Okay, this right here is an instance of heart living inside of heart animation. If I go on scene one, the White Hart is an instance of heart animation, the red Heart, his heart animation and so is the blue heart. And just to make this clear, I'm gonna take another heart animation out of the library and another and another. And now when I scrub, you'll see that all of the hearts are pulsing in unison. So let me show you how we build this. All right, so here, an enemy I have animated heart start opened up and on the stage I have a heart. What is it? Well, let me click on it and the properties panel will tell me it's a shape. All right, So in order to make my pulsing heart, I need to convert this shape into a symbol. So I'm gonna go to modify, convert to symbol. I remember from the previous exercises I like to say insert into symbol and I'm gonna take that shape and insert it into a symbol cold heart. I'm gonna make it a graphic for now with the registration point in the center and hit. OK, so now on the stage this thing here is an instance of the heart symbol. Now I want to create an animation of this heart pulsing, so I'm gonna put it inside of another symbol Follow along here. I'm going to use the selection tool. I'm going to select the heart and go to modify, convert or insert into symbol, and I'm going to call it heart animation and hit OK and then Now nothing really changes on the stage. If I go to the library, you'll see that I have heart animation and heart. They're both identical. The idea here, though, is that the heart symbol was put inside of heart animation. Let me show you how that works. So here is the heart animation symbol I just created on the stage. And if I double click on it, I go into symbol edit mode for heart animation. And inside of heart animation is the original heart. So it's extremely important to remember that the heart lives inside of heart animation. Inside of heart animation, we have our own timeline with our own layers. So I'm gonna create a very simple pulse of the heart getting bigger and smaller, and we're going to do it just like we did previously. I remember that lesson. Awesome. So I'm gonna go to frame number 10 here and hit F six to add a new key frame and the same thing in frame 20. So all three key frames are identical. I'm gonna go to frame 10. I'm going to select the heart, use the free transform tool, hold down shift and just make it a little bit bigger, and I'm going to create a classic Tween betweens frame one and 10 and 10 and 20. So inside of heart animation, the heart is getting bigger and smaller. So now I'm gonna go to seeing one. And here's my heart animation. And if I goto pull the play head forward, you'll notice that all I have here are those potential frames. Let me go out to frame 60. I'm gonna hit F five to add some more frames. And now look what happens. As I scrub backwards, you'll see that heart animation repeating. So let me scrub forwards. And even though there's no Tweens on the main timeline and seen Number one, check it out, we can scrub through that heart animation pulsing. And one very important thing to note about graphic symbols is that they will advance as the parent timeline advances. Okay, so I'm literally scrubbing through the heart animation as I'm scrubbing through the main timeline. I'm gonna go to my library and let me take another instance of heart animation out and another one so I have three of them on the stage. I can take this one here, make it a little bigger. Take this one here, make it a little bigger. And they're all instances of the same symbol. So I have three hearts pulsing totally in unison, all in one frame of one layer. All right, that's pretty cool. This allows us to do multiple animations in one layer. Now, I resize some of these. I can take this one here and go to the properties panel and go to color effect style tent. And I could just click to make it white. And then this one here, I'll just do, I don't know, another tent of some sort of deep purple or blue. So now we have three instances of the same symbol and they're all playing together and again. I can double click on any one of these to go inside of heart animation, and I can see the heart pulsing right here and frame number 10. That's an instance of heart. Heart lives inside of heart animation. So we'll be doing a fume or exercises of these symbols that contain animations or nested animations, as I call them. And don't worry, you'll get the hang of it, But next we're gonna have you rebuild this whole exercise from scratch. Awesome. Oh, and one more thing before I go check this out, I'm gonna take the heart here in the heart here and now. I only have one instance of the heart animation on the stage. Watch what I can dio I can go to frame 30. I can add a key frame and move this guy over here. Right click create classic Tween And now check it out The heart moves and pulses All right , so I'm animating an animated symbol. Mind blown. All right, so really cool we're going to do is have you guys follow along in the next exercise and build the three different colored hearts pulsing You got to do it. You got to get the muscle memory. See you there. 26. Nested animations follow along: All right, folks, here we have the follow along instructions for the nested animations exercise you're gonna want. Open up animated hearts start dot fl a And here we go. Follow along using the selection tool. Click on the heart. Go to modify. Convert to symbol. If you're seeing all the stuff down here, you can just toggle off the advanced view and you're gonna name the symbol heart. Make sure it's a graphic with the registration point in the center hit. Okay, click over to the library panel and noticed that you have your heart inside the library. With the heart still selected on the stage, Go to modify, convert to symbol and name this symbol part animation again. Make it a graphic with the registration point in the center and hit OK, now you've created a symbol inside of another symbol. Double click on the heart animation on the stage to go into symbol Edit mode for the heart animation. Make sure the Edit Bar shows that you are inside heart animation to create the pulse. Click on Frame 10 and hit F six to add a key frame and then click on frame 20 and hit F six . To add a key frame, go back to frame 10. Select the free transform tool, click on the heart, hold down shift and scale it up just a little bit. Right Click between frames one and 10 and do create classic Tween right click between frames 10 and 20 and do create classic Tween. Go to the Edit bar and click on the scene one button to go back to seeing one on the main timeline, click on Frame Number 60 and hit F five to add frames, scrub the play head backwards and then play your animation. Awesome. You made a pulsing heart. Now go to the library and bring out two more hearts. Scale them however you wish, and then feel free to change the tent. You can go to the properties panel and with the heart selected, go to color, color effect style tent and click on any color. You can do the same for the last one. Play your animation and go, Ah, nice job 27. Graphic vs movieclip independent: all right, So let's talk about what it means for a movie clip to run independently of the main timeline in this document. Here I have the layer with one frame. I can't drag the play head forward because there's only one frame in this document and in the library have something called counter graphic and counter movie clip counter. Graphic is a graphic symbol that has 10 frames, and each frame has a new number and it Okay, so as I scrub through the frames, you can see that number increasing. I also have counter movie Clip, which is built exactly the same way. Except for the numbers. Are blue going to go back to scene one? And I'm gonna take the movie clip out and place it on the stage? I'm gonna take the graphic out and place it on the stage. It's also important to note that the movie clip and graphic have different icons here in the library. So let's just put them right about there. And now I only have one frame in my documents so I can't again scrub forward and see anything. But I'm going to test my movie out by hitting command return and they're gonna get my swift file. And although the main timeline only has one frame, you will see that the movie clip is playing and looping infinitely, whereas the graphic is not advancing. And so this is what it means for a movie clip to play independently of the main timeline. The main timeline doesn't have any frames, but the movie clip can still march to the beat of its own drummer, so to speak. And while I'm at it, the beat of that drum er is I think it's 10 frames per second. Let me go to the document here. It's actually five frames per seconds that you can see those numbers and we'll play it all slowly. All right, so that's how this document works. With one frame. Let me go out to frame number 10 and hit F five to add frames. And now something happened on us. Look at this. The graphic symbol advanced to frame number 10 and the movie clip stays at frame number one . Um, let's jump back to frame number one and watch what happens as I scrub through the timeline . As I scrub through the timeline, you'll see that the graphic symbol is advancing with the main timelines. Play head. All right, so the graphic is sort of running lockstep with whatever is happening on the main timeline in the movie. Clip is just sitting there. So it's important to note that inside of the animate I D. You will not be able to preview nested animations inside movie clips, but you can with graphics. Now let me export this with again, and you'll see that both of the animations are going to be looping infinitely at the same time. Now you may be wondering, why is the graphic also looping? Well, the deal with Swift Files is that their timeline, the main timeline, is going to loop unless you tell it to stop. So the way we tell it to stop is we'll put a little bit of an action script code on there, so I'll drop in a new layer. I'll go to the last frame, banging a key frame with F seven. Use F nine to open the actions panel, and I'll just write stop. So right now, this stop command is a little bit of action script, which you would use in an action script 3.0 file, which would export to a swift. And I want to make it clear that you could do exactly the same thing in an HTML five canvas document with JavaScript. All right, The behavior I'm illustrating in this demo is gonna be the same between a s three html five canvas documents so that out of the way, let's now test the swift again with a stop action on frame 10. And you'll see now that the graphic is going to stop in frame 10 because the meantime lines play head has stopped in frame tent. They may be asking, What's the point of this independent nonsense of the movie clip? Welcome. Come in really handy if you have something like clouds in the background that you want a loop infinitely. You can have that happen without having 10,000 frames in your main timeline. And speaking of which, I have this file here that has some clouds, a car on the road. The main timeline on Lee has one frame, but all of these symbols are movie clips with their own nested animations. So when I go to export this one, check it out. You'll see that we have the car with the wheels moving, the road moving and each of these clouds animating. All right, so we have a whole bunch of animation going on. But there's only one frame in the main timeline. And again, that's because movie clips can play independently of the main timeline. It's very cool. Let me close this out. And just to show your real quick one of these clouds here, if I double click on it, you'll see. Let me shrink down the timeline here that it's a very long time line of a cloud moving across the stage. All right, so all of the clouds are built like that. It's about a seven second long animation, and again all of them loop seamlessly and it looks really cool. Awesome. In the next video, I'll show you why graphics air cooled because they give you access to the frame picker, which makes it really easy to make character expressions. I can click on the I symbol and go to the frame picker and choose any I frame that I want from that symbol. More in the next video, more beating 28. Graphic vs movieclip looping: to continue this Siris on graphics versus movie clips. I want to show you how graphic symbols give you access toe looping options on the frame picker, thes air, powerful features that make graphic symbols the choice of people doing character animation . So let's start by revisiting our file from the previous video where I showed you that movie clips run independently of the main timeline. But graphic symbols like the red one on the right here is going to advance as its parent timeline advances. Okay, so as I go through all these frames here, you'll see it's looping multiple times. Let me go back to frame number one. Click on the graphic and in the Properties panel, you'll see that under looping the options air set, toe loop and the first frame will be one. Okay, so what I could do is say, Hey, you know what I want the first frame to be number eight. As soon as I type in eight, the graphic advances to its eighth frame. And then as I scrubbed forward, I'll go to frame 9 10 and then, since we're still set toe loop, we'll go back to one and go all the way up to 10 again, and we're just going to loop infinitely. As I scrub through the timeline, I'll go back to frame number one click on the graphic, and I want to show you that if we don't want a loop, we can also say, Hey, let's play once. So here I'm saying, We're going to still start on frame number eight and we'll go to 9 10 and then it's just going to stay there on 10. All right? We've played through one iteration of that graphics timeline, and it's going to stay on its last frame, which is frame number 10 going back to frame number one. I can say I want you to play on a single frame and again I can select any frame I want. Right now, it's just gonna be eight. And as I advanced the play had in the meantime line. We're just staying stuck on that frame. Now. It's cool about graphics. Is that in frame 25? I could add another key frame by hitting F six and say, Hey, you know what? I want you to show me Frame number five. So here and frame one, we're showing frame eight and then all the way through, we get the frame 25 it jumps. So I've got all of that just to show you that the looping options give us a fair amount of control over what state or frame of the graphic we want to display at any given time. Now, in this example, it's really pretty obvious that I know that when I type in oh, frame number A. I'm gonna see an eight over here, but in real life, it's not always that simple. So what's cool is that I think it was an animate CC 2017. They added this frame picker, which shows you all of the frames inside the symbol. So I'm gonna click on frame 10 and then my graphic updates to frame number 10. So that's super cool. And now what I wanna do is show you a practical application of this. All right? Very rarely. You're gonna have clips that have just 10 frames that have 10 numbers in them. So let's take a look at our green monster here, all right? If I go to play his animation, they're going to see that his eyes and mouth just sort of freak out. And as I scrub through, you'll notice that they're all both changing to different frames. So I have a mouth layer and a NYSE layer in the library of eyes, symbols and the mouth symbol. A double click on the mouth graphic. You'll see that there's a few key frames with different types of mouths and different positions. All right, if I go to the eyes symbol here, you'll see that we have three layers for the background, the pupils in the eyebrows and in each key frame. I'm just sort of moving those things around to make different I expressions, if you will. Here the eyes are looking kind of forward here. They're shut here. They're getting sort of wide eyed, and then we have looking to the left, looking to the right, and then we have sort of angry. So let's go back to seen one. And now please forgive me. I'm no professional character, animator or illustrator, but let's try to make this mess here look somewhat decent. So very quickly we go back to frame number one, and I'm going to tell the eyes symbol in the properties panel that we're only going to use a single frame, okay? And I will do the same thing for the mouth. So as I just showed you previously, that's gonna make it so that we stay stuck on those frames of those symbols while I'm scrubbing the main timeline. Very cool. So I'm just gonna go out to frame number five and in the mouth layer. I'm just going to hit F six to add a key frame. Going to select the mouth and we want to do is put it sort of in its resting or closed state. But I don't know what frame number that is. You know, I could guess here all day. Maybe it's for no. Maybe it's 30 Wouldn't it be nice if I could just use the frame picker? So I'm just gonna click on frame number two and let's move you over so I can actually see what happened. So there's frame number one frame number two. Very cool. So I'm gonna leave the frame picker over here and let's also slow. Let the ice symbol here and it's important frame five that maybe I want Teoh at a key frame first and now I'm gonna close the eyes, so I'll do something like this. So in frame one, he's ah, And then he's gonna go. Oh, and then maybe a few frames later, we'll have him open his eyes again and changes mouth expression. So I'm not really gonna try to mimic anything terribly close to reality. Just show you that, you know, I can open the eyes again and then click on the mouth and maybe he'll be just a little bit like this. You know what's going on? So now he's like, uh, maybe a little confused. I could have him look to the left or right. So maybe in frame 10 you know, I don't always have to move the eyes when I'm moving the mouth. So, you know, if he's talking, his eyes aren't always gonna be going crazy. I could give him a little bit of that. I could go out a few frames, hit F six again, maybe. Ah, twisted over. And then, you know, wait a little bit hit f six and let's give him a big smile and with his eyes. Although I intended we'll go to these, Huh? All right. Very cool. So now, as I'm scrubbing through. You can see that I can basically create any, like, permutation of expressions of the eyes and the mouth. Now, obviously, I've done this fairly quick, but even just messing around if I go back to frame number one and hit play, you know it's a pretty cool result. All right, if you put like maybe 20 minutes into this, you could actually get a character that looks really cool. And you don't just have to, you know, be restricted to changing the eyes and the mouth. You could have hands or legs or full body positions of the character dancing in different positions. So hopefully this video shows you have the looping properties of a graphic symbol on the power of the frame picker really give you a lot of control over your graphic symbols. In the next video, I'm gonna show you how blend modes and filters give movie clips a little bit of a leg up. Stay tuned 29. Graphic vs movieclip filters: all right, folks, to continue our discussion on graphic versus movie clip today, Movie clip is going to get the advantage as we discuss filters. All right, think of a filter as a way to add advanced effects to our imagery so you can add things like a drop shadow, a blur. Ah, glow, a radio glow with different colors, a bevel for a little bit of a three D look. With the highlight and shadow around the edges, you can do a Grady and Bevel. You can also do adjust color where you can change the saturation brightness or Hugh. And one of the coolest things about these filters is that they can be animated. So check this out. We have an image of a car that's totally blown out with the brightness and weaken between in full color. All right, so it's really cool what you can do with these filters. So I'm just gonna give you a brief overview of how they work and show you how you can have some fun with them. Let's go. All right, so here we have our familiar movie clip and graphic symbol. When I click on the graphic, The Properties panel gives me the looping options, which we've already talked about and under color effect. We've done things like Change the Alfa, which is basically the transparency of a symbol. We've done things like change that tint, which means we can change how much a different color is going to be applied to it. And we can adjust that tint amount and change the R G B channels. However, we want red, green and Blue, and then we also have advanced options for red, green and blue, plus different Alfa values. So, um, it's all pretty cool, but we can do the same exact stuff with a movie clip. So when I click on the movie clip, you'll see that I have color effect, and I have the same options here. Brightness, Tent, Advanced and Alfa. But what the graphic symbol doesn't give us is under here. We have display where we have blending, which we'll talk about in a bit, but I want to focus right now on filters. Okay, so there's no option for filters with graphics, and the filters are pretty cool. We have this list of drop shadow, blur, glow, bevel, ingredient cloak, radiant bevel, adjust color, and then we can remove or disabled them all. So we're gonna do is get rid of these guys right here. We'll delete them. I'm going to go to my library and let me take out this filters symbol. It's just a fairly big piece of text that says Filters, and this shows us. It's a movie clip symbol in the library and the properties panel. You'll see it's a movie clip, and it's an instance of filters. The first filter on apply is going to be a drop shadow, and you'll see, here we have this very slight shadow. There's a whole bunch of properties here that we can adjust. You'll notice that when I look at Blur X and blur Y, you have this little link here. That means that as I change the blur y that the Blur X is going to change as well in the uniform fashion. So if I change blur y 2 28 Blur X is also going to be 28. I'm gonna pull that down a little bit to a more nicer look, and I want to point out that in the bottom here, you're going to notice that these filters right here. It looks a little bit crummy right here. It's almost, like, squared off, and that's where the quality comes in. And let me just make that high right now, and then you get a nice, softer rounder filter effect there. So I really like the quality to set too high. Now, if you're animating a filter and the quality set the high, you may see a slight little performance it, so you might have to knock it down to medium or low. If you're experiencing some trouble, the strength is basically going to be sort of like the opacity of the filter. So if I crank that strength up really hard, you'll notice it gets thick. It gets a lot stronger. It's a lot more visible so we can bring that strength down. And something less than 100 you know, is gonna make it very, very subtle, but still noticeable. So for the sake of this demo, I'm gonna crank that up a little bit so we can actually see the filter, and I might just blur it just a little bit more. There we go. I'm liking that, um, we can change the angle basically weaken set where the light sources and the distance. So I'm gonna pull the distance down a little bit to bring the filter down to here. And then if I change the angle, which is right now at a 45 degree angle, I can just spin that so I can make the light source appear to come from the top right hand corner. Or I can pull that angle back and make it look like the light is coming from the top and shooting down knock out is pretty cool. It actually takes away the color of the actual text that we have there, and you just see the shadow sort of, and we can turn that off. And if I do in her shadow, it puts the shadow actually on the inside for something like that. I might want to bring the Blur, X and Y down a little bit. Well, that's pretty funky. Ah, the idea here that the distance is pretty strong. So we have all this really kind of cool control over all these different parameters. I'm just gonna undo that a few times. So we just took off the inner shadow. If I click on Hide Object. All we get is the shadow that's being cast, but we can't see the actual object, and that's pretty cool. Let me turn that back. And then we also have the color of the shadow in the real world. You know, your shadows air, usually black or grey. But in the design world, we can do whatever we want. So if I want to have a horrible, bright yellow shadow, I definitely have the freedom to do that. Please choose your colors wisely. Let me go back to black and for here. You know, I might just take the distance and bring it down just a little bit. And there we have a very nice shadow, and again we can play with these parameters. However we want change the distance, change the angle. And again, it's something that I really suggest that you experiment with. Let me zoom out a little bit. There we go. So very nice filter shadow there. And what's cool about these filters is that you can animate them. All right, I'm not gonna go into a big lesson on animating filters right now, but let me just go after frame number 15 and hit F six to add my new key frame. And so here, with this very sort of hard and slight shadow, if you will, it's not very wide. Um, it looks as if this text might be just floating just a little bit off the background. But in frame number 15 what I'm going to do is let's take this text here and let me just scale it up a little bit like this. And as it scales up, I'm also going to tell the shadow that its distance is going to increase. I'm gonna push it back like that, but I'm also gonna bring down its strength. So it's gonna sort of, like fade out a little bit and weaken, blur it a little bit more and just make it really sort of soft. So let me zoom out just a touch and then go back to frame one where we have the text. Small. It's close to the background in frame. 15. The Texas getting bigger, the shadow sort of fading out. Let me just right click into a classic Tween, and then now check it out. As the text grows. That shadow is going to sort of fade out and drop off for this demo here. I think a different stage color would probably work a little bit better. Ah, that's nice. So let's just go down. So now as it goes up, boom! All right. So again, I'm gonna encourage you to mess around on a meeting the filters and setting them. I have a lesson in the future about animating the filters, but for now, I just wanted to prove to you that you could animate them. I'm gonna get rid of this classic Tween for now, remove classic Tween. And I'm also gonna clear this key frame. So I've told you that F six is the shortcut for adding a key frame. Well, let me tell you that shift F six removes the key frame. So now back in frame one. This is what we're looking at. I can also and multiple filters. So let me go to click on the movie clip. And here I have the drop shadow. I can leave the filter applied and just sort of turn it off. So I don't see it if I want, and then I can toggle that if I'm totally done with it. I can hit this minus sign to remove it, but I want to show you that I can mix filters together. So I'm just gonna click on this little arrow here to minimize all the settings for the drop shadow. So that's open and close. And let me add in another filter here we have blur, all right. And so now got just a little bit blurry. And we have the Blur, x and y so I can link those together and you'll see Whoa, that's super, super blurry. Let me bring it back down a little bit. So now it's just like I think I need to go see the eye doctor a little bit. All right, That's not so good. So let me just do something like that. So just to show you that we can experiment with the blur of those filters if I had something maybe animating left to right, maybe I don't want to have the Blur X And why lock together? So let me just click on here. I'll hit zero. So now there's no blur whatsoever. I'm gonna unlinked the two of them. And now I can just change the Blur X So if this was animating into place or sliding across the screen, I could start with its super blurry on the X axis and then progressively bring that value back down. And that gives you a cool effect as well. Let me click back on here. So we have the drop shadow and the Blur. The blur actually is not much right now. If you want to get rid of the Blur, I can click on it and hit the minus sign, and it just goes away. The next filter I'm going to do is just a very simple bevel where we have a shadow and highlight color of black and white, and it gives us just a little bit of Ah ah, highlight around a raised edge and a little bit of shadow on the lower right here. So again, we have blur settings here so we can crank up that blur and make it just a little bit more subtle. Or it can be very hard edged, if you will again. We have quality. We have strength. So if I bring the strength down, you're hardly going to notice. It's a very subtle bevel here, and if I bring the strength up. It's gonna get very bright. In contrast, e And if I increase the blur, you know, you get all this weird stuff in between and get a very sort of rounded and soft look or very hard edged look again, we can change the highlight colors. We can change the angle so that the highlight color seems to be coming from the where the light source is coming from the lower right, if you will, and we can do knock out which removes the text again. And we have inner. We have an outer bevel. We have a full bevel. So again you can get so many different effects from just one filter that I strongly urge you to again experiment with them and play around them. Right now, I've almost given this text what looks like sort of like a metallic look. It's actually looking pretty cool. So and I was just messing around. So again, experimentation is key. Let me get rid of the bevel and also the drop shadow filter. And next I'm going to add a Grady int blow. Actually do a glow first. Sorry, I skipped that, but a glow is sort of like a drop shadow, but it's gonna project uniformly in all directions. Okay, you'll notice that we can't change the distance or the angle here, but we can change the Blur, X and Y. So here, with the red glow, you'll see that it just glows out uniformly from the characters there. We can bring it to high quality. We can change the color, maybe something like that or not so good. Maybe a lighter blue yuck, um, through a darker color. Ah ha. So there's a dark blue glow. The strength we can bring it down, we can bring it up. And then it's almost gets so hard here that it's almost like an outline. If I brought the blur down, you know, it's just so many different wide ranges of effects that you have here. I can goto inner glow that's gonna put the glow on the inside. Let me adjust the Blur, X and Y. So now it's very subtle again. The point here is that there's so many different options, and it's a lot of fun to play around with each of them. The Grady int glow is going to allow you to apply a Grady into your glow, so it's gonna be the same sort of settings. But here you have a Grady int a range of colors that you can choose, and they're gonna start semi transparent and go to full opacity. Let me just crank up the blur X and why here? So you can sort of see And for the first color I'm going to pick out, we'll do something sort of garish. So it stands out, we'll do a yellow, and then we'll go to a bright green. And so there you have something totally horrible. You can move these colors around inside the Grady int. We can click on another picker here. We'll throw in some horrible pink just to show you that we can have this full range of different colors in our Grady int. And I got a laugh. This is absolutely, you know, hideous. But I'm just going to randomly pick some colors. And then we have this crazy rainbow of colors as Argh! Radiant glow Let me kind the text or knock it out. And it just looks ridiculous. So you might want to practice with that a little bit. All right, Um, I'm gonna get rid of that and we'll pretend that never happened. All right, So next we wanted was talk about one of my favorite filters, which is the adjust color filter going to change the stage background, toe white. When you go into my library here and I have this movie clip symbol of a car is gonna drag it onto the stage will go to the align panel and boom to the left to the top. Fits in there perfectly. OK, so here we have. It's nice movie clip going to go to the properties panel, and I'm gonna add the adjust color filter to it. And here we have brightness, contrast, saturation and hue. All right, so just playing around, I can bring the saturation down, which is going to make it grayscale. I'll bring that back up to zero to make it normal. Hugh gives us some cool effects, so it applies different colors. So, you know, with just one little change, I now have a green car. It does change the color of the sky a little bit. Um, you could go over blue pink when go through the whole color spectrum here. And Ed Hue to the entire image and all the pixels in the image is very nice. Let me just set that back to zero. The brightness weaken, Totally blow it out. We can bring the contrast down or up and you just get all these really cool color effects. It's very much like working in photo shop. Well, I'm gonna do is a very quick animation because I love this thing so much I'm gonna go to Brightness zero for now. Let me just reset everything 00 and here in frame one, I'm just going to select the image will take the saturation down to zero. So now it's fully black and white in frame 15. I'm gonna f six to add my key frame and then I'm going to select the image and I'm gonna take the saturation and bring it up to zero. So now, in frame one, it's black and white frame 15 color. So we've been adding key frames and doing classic Tweens forever. Changing filters isn't much different. We're just going to right click in do create classic Tween Let me just hit return to play and we get this really nice smooth fade in from black and white. I'm going to go to frame one, and I'm going to bring up the brightness super high and the contrast. We're gonna crank it up a swell. So it's like this complete, like whitewash of the image and then, as I scrubbed forward, were progressively adding color. And it's such a nice, smooth, cool effect. I just love it. I'm just sitting return over and over again to keep on watching it. So hopefully you'll see that doing animation of filter changes is really no different than changing the scale or position of an item. And I just love this color just effect and begin to wrap up here. These filters are only available on movie clips. All right, so I'll give you this file. You'll have some movie clips to play around with, go through all the filters and have some fun and real quick before I go, I just want to show you that I haven't each similar five canvas document open here, and this is a movie clip, and I just want to show you that in the HTML five canvas world, you do not have the same number of filters available. You'll see that the bevel Grady in glow ingredient bevel are not available. And as a side note, you also do not have the same sort of performance when animating filters in HTML five canvas. So, like I said for were doing in this course, we're going to stick to the action script 3.0 document type because it's far superior in this regard. Next, we'll talk about blend modes. 30. Graphic vs movieclip blend modes: all right to continue our conversation of graphic verse movie clip. We're gonna be talking about a movie. Clips blend modes. A blend mode allows you to literally blend two colors together in specific ways. That's when you have a movie clip overlapping an image or anything else. You can blend the colors between the movie clip and the object that it's overlapping. And depending on the blend mode you're choosing, you can get a very wide range of dramatic effects. So let's check it out. All right. So here and animate of a file set up, we're gonna be focusing on this cool picture of the car. And if I zoom out just a little bit, you'll see that I have this rectangle that has a weird green toe black radiant in it. We have a solid blue square and then a black toe white Grady in All right. So the idea with Blend modes is that it's going to take colors from the base image and our movie clip that's sitting on top of it and sort of blend them together and give us a resulting color. All right, so let me just zoom in a little bit and I'm gonna start by taking this blue movie clip and just dragging it over the car there. Okay, so now this blue rectangle is completely covering the car, but I'm gonna click on it. We'll see that it is in fact, a movie clip and under display. You'll see we have blending. So I'm going to open this up and we have quite a few here. When you switch over to a layer, you don't really see a difference. I'm going to go to darken, though, and ah hah! Now you'll see that part of the base image. The car is sort of blending with that blue, and we're getting this really dark blue car image and I'm gonna go over to multiply and it looks about the same. We'll go through this list pretty quickly. We'll goto lighten and ah, that looks very nice. So now you're seeing more of sort of the original yellow car. But some of the darker pixels are picking up the blue and we'll go to screen and that's going to be very similar. Will goto overlay and then the yellow really pops and we have hard light and that doesn't really work for us or it all. We have add. And we also have subtract That's nice And then we have difference. And, well, lastly, do invert. Okay, so it's like a negative from back in the days. So let me just go over to something like lighten, Okay? And now you're going to find that when you're working with blend modes, it's going to take a lot of experimentation because it really depends on the color of the base pixel, the movie clip that your overlaying it with and then also the blend mode. And I can't get into two technical of a description of all these things right now. But I do want to show you that Adobe does have a help article, and I'm gonna give you the link for it. And it explains how there is a blend, color and opacity, a base color, result color and even, they say, the dhobi recommends that you experiment with the different blend modes to achieve the desired effect, and then it gives you a description of all of them. So it might say that lighten replaces Onley pixels that are darker than the blend color areas lighter than the blend color don't change. All right. So that's why when we had lightened selected that, you know, the yellow stuff didn't really change all that much. But again, even with adobes recommendation, this stuff takes a lot of experimenting. But I am going to give you this resource so that you can look at all the different ones and they're official descriptions. But at the end of the day, I think this is gonna take a lot of experimentation, but let me walk through some more. So here we had this solid blue color on top of the photo, right? And then I'm gonna go grab this Grady int, all right? And it has sort of a semi transparent green or yellow inside of it. And right now it's blend mode is set to normal. And let's just goto layer, and that's always sort of the same. We'll go to dark in, and that looks very nice. So by overlaying these Grady INTs with the blend modes, you can get these really nice effects and can almost mimic, like, you know, some of those, like instagram filters, if you will. If you do it right there, we have overlay. I love it Hard light, really stylish. Add kind of blows it out a little bit, subtract does something weird. We have difference. And then we have invert. And again, the effects you get are all going to depend on which colors you're mixing and how you're blending them. I should say so. Here we have a black to white radiant on top of our image. And again, just really quick. We'll see that dark in here. Not so good. Multiply. Yeah, but then you go to lighten kind of funky, and then you have screen. I'm just using my down arrow now to go through them overlay a kind of like that. It looks really crisp and rich. Hard light. Not so much, Ed. Hey, pretty cool and then subtract. All right. So again, you get all these different, you know, sort of effects. Highly dependent on which color your overlaying. All right, let me just double click on this symbol here and here we have our Grady int. So I'm inside the B W. Grady in black and white. I was gonna go to my color mixer. I haven't showed you guys yet had to really work with radiance, but I'm gonna select one color and let me just pull this thing up here. We'll do like, really bright pink, and then we'll go to this color here. Will do a bright green. It's gonna be hideous. Right? So let's go back to seeing one. Yeah, right. Pretty crazy. And let's just play around, though. You never know. You might get something kind of cool, you know? I don't know. That might work. That's eat interesting. That's horrible. Not so good. You know, getting there so again, You really gotta play around these Nice. You know, I couldn't even, like, sort of imagine how I would make something like that. And then it just appeared because I experimented. So again, I'm gonna give you this F l A file, and I'm gonna encourage you to mess around with these different movie clips. You know, um, this one here. So we experimented with the blue color. Why don't we just double click on it? You know, you can change that to a solid read. If you will go back to seeing one, and you get a totally different result. Maybe we'll go to overlay Boehm. Nice. So that's about it with blend modes. But I do want to point out that just like with the filters, remember how they didn't work so well, We're gonna have as many options in the HTML five canvas world. I'm gonna pop back to that html five canvas document that I had And check this out. I click on this movie clip and when I go to the blend modes, there's Onley. Add All right, We don't have any of these options here. So again, if you are doubting me about why I would choose the action script 3.0 document over the canvas one, this is one of those reasons we have a lot more options when it comes to the blend modes. One thing I do want to mention is that in both html five and action script land blend modes aren't something that could be animated. All right, They're just sort of set. And they exist the same all the time. You can't Tween from one blend mode to another. Okay, but what you can do is animate the thing that you're blending right or the or the actual base image itself. So here we have this image here, let me just really quick. I'm gonna get rid of this in this. And so this guy here, I'm gonna go out. Let me just add a key frame. But F six this is just for experimental reasons. And in the bottom layer, I'm gonna have to hit F five down here to expect then that bottom layer. So in frame one, we have it. Their frame 20. They're the same in frame one. Maybe what I'll do is change the ah Alfa of this. All right, I can feed it out and let's just right click do our create classic Tween. And so now that blend mode thing is fading in, so you know, you can get some pretty cool stuff with that. So even though we're not and a meeting between one blend mode and another, we are Anna meeting the opacity of the thing that we are blending. So let me just go full screen or full size, and that's pretty darn cool, right? So, again, experiment with this stuff, I'll give you the link to the Adobe article and think you're really going to enjoy the different effects you can have with these blend modes. 31. Gti wheels spin: in this exercise would go a little bit deeper into nested animations with this car with the spinning wheel. So the car is being Tween across the stage, and inside the car is a symbol called wheel spin and inside wheel spin is a wheel that is spinning. So let me show you how it's me. All right, so let's get this show on the road. I've got a F l A. Open here. We've got this background layer and we have one frame and it's just this dark gray so you'll see my libraries kind of loaded up with a bunch of stuff. A lot of it are different parts of the car, so I'll explain those in a little bit. We have the body solid. We have the door handle. We have the full car, which is a Volkswagen g T I, which is awesome. We have this sheeting and lights thing. We have a shadow, we have wheel and we have windows and dark trend. All right, It's all these little pieces that make up the car, basically. So the full car is the GT I So what I'm gonna do is first go to the background All right. So we have this nice sort of subtle Grady int that goes from a grade A white back down to Gray was gonna line that perfectly on this stage will do a boom left boom top, and we're gonna want to animate the car. So one of the rules, we gotta put that in a new layer, so I'll just name that the car layer and let's just take out the g t I and throw it over here and you'll notice that the car includes that cool shadow and let's just put it off to the left. All right, you'll notice that the background gets kind of bright white here. That's kind of where we want the wheels lined up. It doesn't have to be anywhere. Perfect will put it off stage. And then let's just go out to frame number 60 or so, and I'm gonna hit F six to add a key frame, and then I'm going to take the car and move it over to the right. Now, you may have noticed that as soon as I added that key frame in the car layer, I've seen the great background again well in frame number one. There's the background. Right in a frame 60. It's not there Now we're going way back to ah, earlier lesson. But remember, we have these potential frames here. Okay? When I added the key frame and frame 60 I only extended the car layer all the way out to frame 60. I don't have enough frames in the bottom background layer to see the background in frame 60 . So I'm just gonna click on frame 60 here. And what's the magic one? What is it? Yep. F five is going to add frames all the way to their. So now, as I scrub through the entire 60 frames of the movie, you'll see that I see the background. So in frame 60 I'm gonna click on that key frame there, and let's just dragged the car straight over. Actually, what I'm gonna do is hold down shift, and that's gonna make it so that I do not accidentally move it left top to bottom. Alright, It locks it to move on. Lee left and right by holding down shift. So I'm just going to right click anywhere between frame one and 60 and I'm gonna do create classic Tween, and this is something you know, we've seen a bunch of times. So now let me just hit play and there goes my car across the stage. I'm gonna go to control test movie inanimate, and that's gonna generate the swift file for me. It's over here, off screen. There we go. Until now we see the car kind of sliding across the stage. All right, It's going would really be nice if those wheels could spin. So let's go into the actual car itself. Going to go to the library and double click on the GT I symbol. And then now you'll see we have this really nice version of the car that we're seeing and check it out. Let me just make sure we can see all of our layers. You're going to see that we have all these different layers inside the GT I symbol. So inside the edit bar, we see seen Juan G T I. This tells us that were inside the timeline of the g t I, and what I'm going to do is just toggle the visibility of these layers on and off. So we have shading and lights here, so let me Just click on the dot under the eye, and then you'll see that it looks like a very flat red. So we have this layer that just contains these very subtle Grady INTs that give us the lights and some sort of details of highlights and shading. We then have the door handle. So I'm toddling that on and off we have wheel front and get rid of that. We have wheel back, and then we have windows dark. So we get rid of the windows and also some of the dark black plastic on the bottom trim. Ah, body solid. So now I took away the red solid body, and now you can better see um, what we had is that sort of highlight clip. OK, just a bunch of Grady INTs that give us all the sort of three D. Ah, shading and highlighting so body solid is just basically You know what? Let me dio check this out. I'm gonna hold down option or Ault and click on the dot underneath the eye and boom, we get rid of we turn off the visibility of all the other layers. And so now I have this red shape. If I click on that, I can go inside of it. And it says I'm inside now body solid. So this is pretty cool about, you know, nesting things inside of symbols. So I have a body solid symbol inside the g t I I can click on that shape and check this out . I can change the color to be this blue and then I go back to the g t. I turn on all the layers and now I have a Knauss um blue g t. I let me just go back into the body solid symbol and go back to the red that I had, which I believe cc 3300 cool. And then I'll go back to the g t i. And now it's red again. So inside the GT I, we have all these different parts that make up the car. Now, what I'm most interested in are these wheels. So if I click on this symbol here, notice the properties panel is gonna tell me that it's an instance of wheel and then this thing in the front is also an instance of wheel. So we have these two wheel symbols on the car, but I want them to spin around. So what I'm going to do is put this one inside of a movie clip that's going to have it spinning. So I'm gonna select the wheel and go to modify, convert to symbol. And again I've told you that's really insert into symbol and I'm gonna call this wheel dash spin. And it's also going to be a movie clip and I'm gonna hit, Okay. And so now nothing here is really visually changing on the stage. But let me click on that. We'll make sure it selected in the Properties panel. It's gonna tell me that it's an instance of wheel spin. Okay, so if I double click on wheel spin, I go inside of the wheel spin symbol and here Guess what? I have my original wheel, so we'll lives inside. Wheel, spin and wheel is what I want to actually rotate around. So what I'm gonna do for now is just go out to frame number 30. I'm gonna hit F six to add a key frame is going to go back to frame number one, and I'm just going to right click and say, create classic Tween. Now remember that rotation is a property of the frame, right? When we do that lesson where we did the basic animations of rotation, I'm just going to click on the frame and say Rotate clockwise once, Okay, you'll see that the wheel actually spins. So if I go back to the g t I now this wheel here is an instance of wheel spin. This wheel here is an instance of wheel. So something funny is gonna happen. Let me do a command return to export the swift and check out what we have come. We have one wheel spinning and the other one is just not spinning. So what I need to do is replace this instance of wheel with wheel spin. So check this out. I'm going to right click and do something called Swap symbol. Here it is way down here and now I can choose what symbol I want to replace. I'm gonna take wheel and replace it with wheel spin hit. Okay. And then now I can see that this is actually wheel spin. And when I test my movie out, you'll see that the car is now driving and both wheels are spinning now. It looks pretty cool, but it looks a little bit jittery. I don't know. I'm not. It's I don't if there's enough frames really to show everything moving smoothly. So what we're going to do is this. I'm gonna go back to frame number one, and I'm gonna give myself some more time to see this animation. What I want to do is make it four seconds long. So watch this trick. I'm just going to drag the play head anywhere in between frame one and 60 and with no frame selected, I'm hit f five. And what that's going to do is push the end of my timeline out. I'm adding frames. A little hard to see here. Uh, I had to resize my windows that I have this scroll bar here. OK, that helps a lot. So let me just continue to f five out, and so you'll see that I'm pushing both those frames down and I'm just gonna go all the way . Excuse me until this guy ends up at four seconds and there we go. So let me test this one more time and there you'll see that I like the speed of the car, but it's like the wheels are almost going too fast, all right, it's It's really kind of odd that the wheels are spinning much faster than the car is moving. So here it's always a little bit of, Ah, trial and error. So let me just double click on wheel spin and I'm going to make this animation two seconds long so I could hit F five all the way there. Or I could just click on this frame here and drag it out to two seconds. So let me just test this out now. And here I'm really liking the timing. It's really nice and smooth. Um, everything's night looking really nice and clean. So there we have it. We have a symbol moving across a stage that has a nested animation inside of it. And we have this this really lovely motion. I'm digging it. All right, so in the next video, what I'm going to do is let you take a stab at this and I'll have full follow along instructions. Awesome. 32. Gti wheel spin follow along: All right, So here we have the GT I wheels spin, follow along video. I'm gonna walk you through all the steps slowly and clearly there'll be instructions on the screen and remember to print out the full written pdf IC constructions. All right, let's begin. I'm using GT I Wheel Spin Start, and Step one is going to be going to frame 120. We're gonna click on Frame 1 20 hit F six to add a key frame. Click on frame 1 20 in the background layer and hit F five to add frames. Hold down, shift and click on the car and drag it all the way to the right so that it's completely off stage. Right. Click anywhere between frames one and 1 20 in the car layer and create classic Tween go to control test movie in animate. To get a preview of your swift file, notice that the wheels are not spinning and then close the swift. Go to the library and double click on the GT I symbol to edit it. Now we need to put the back wheel inside of another symbol so that we can actually spend it click on the rear wheel. Go to modify. Convert to symbol. Give it the symbol name, wheel dash, spin. Make sure the type is a movie clip and the registration is in the center. Click OK now double click on the wheel Spin animation to go inside of the wheel spin movie clip that you just created inside of here. You'll see the original wheel Click on frame 60 inside the wheel. Spin Timeline Hit F six To add a new key frame. Right, click anywhere between frame one and frame 60 and select. Create classic Tween click on Frame one and go to the properties panel in the properties panel. Under Tween ing set, rotate to clockwise and the amount to one Go to control test movie in an enemy to see your new animation, you'll notice that the back wheel is spinning, but the front wheel is not. So we'll need to swap in the animated wheel for the static wheel. Close the swift in the edit bar. Click on G T. I to go back to the GT I symbol, right click on the front wheel and select swap symbol. Click on. We'll spin from the list and hit. OK, do control test movie in enemy and Voila! You have your finished animation of a car with spinning wheels. Awesome. 33. Rocket flames: in this lesson, We're gonna continue our exploration of nested animations. We're gonna take this sort of boring rocket animation and really spice it up by making those flames move, See how much better that is? That's only gonna take a few minutes worth of work. Check it out. So here in animate, I have rocket flames start opened up. And if I do control test movie in Animate and that gives us the swift file with the rocket and a meeting from bottom to top and it sure would look better if those flames were animating. Right now it looks a little bit, Yeah, not so good. So we're gonna do is focus on building those flames. This file already has the classic Tween in place for moving the rocket. You should be very comfortable doing basic classic Tweens where things just move from one position to another. So in this exercise, we're just going to focus on making those flames. So in my library, we have the symbol called flames. It's just a static drawing of flames. We have the rocket which contains the rocket body and the flames. So here's rocket body. Okay, Just the basic shape of the rocket. So here, I'm gonna go into the rocket symbol on the double, click on it and you'll see that we have a few different layers. Here we have a layer called highlight. That's that white sort of Ah, glare there, if you will, we have the rocket body, which is that basically blue shape with the nose and the little silver at the bottom. Then we have the flames, and we have some fins. Okay, so the rocket symbol contains a few different layers with a few different items. Now, in order to animate these flames, you'll see that we already have a symbol here. So I'm gonna select it, click on it and go to the properties panel and you'll see it's an instance of flames and it is a movie clip. All right, so I'm choosing a movie clip because remember, movie clips run independently of the main timeline. That means that these flames will loop forever and you don't need tohave frames inside the rocket or inside the main timeline in order to see that animation. Now, my friends here are a little bit small, so let me just zoom in a little bit all right. And I want to edit the flames symbol. So let me just double click on that. And now I'm in symbol edit mode and I'm editing in place, meaning that I can still see the rocket ghosted out in the background. The edit bar tells me that from scene one I'm inside the rocket and now I'm inside the flames symbol. I'm gonna zoom up a little bit when hit command plus or you can do control plus on a PC. Or you could just use this do dad right here some of about 400%. And I want to show you that inside the flame symbol, we have two layers, one for orange and one for yellow. So we have this vector shape here called orange, and then we have yellow. Now all I'm going to do is create a few additional frames and I'm going to tweak the size of both of these different shapes so that we have a little bit of like an erratic flame animation. And I'm gonna click on the stage that nothing is selected here and I'm just going to click hold and dragged down to highlight both frames in both layers. I'm gonna hit F six to add key frames in both frames of both layers. Now, as we've talked about since day one, since I have key frames here, I can mess with these shapes without messing them up in frame one. So I'm just gonna roll over the corner of this, are in shape here. And when I get that angle bracket, that means that I can distort that shape. So for each corner, I'm just going to sort of pull and make the orange flames a little bit longer. I'm then going to go to the yellow layer. I actually don't have to go to a layer. I could just roll over the yellow shape and do the same thing, So I'm just gonna having kind of match. I don't need it to be totally perfect or anything. They can overlap. I don't need to have equal amounts orange around all of the yellow. OK, I'm going to go to frame number five and I'm going to with no frame selected here, Click hold Dragged down to select both of those frames and I'm going again hit F six to create key frames. I don't do the same basic thing. I'm going to maybe move this point down here. Move this one over there. Move this armed one down. Take the YEL low one and bring it down. This one here can shoot out, and this one here can come down a little bit and soak in that one. So I'm just gonna scrub through on the ideas that we just have some sort of motion and differentiation happening between frames. Um, I'm leaving this space in between frames just so that your eye has timeto actually, uh, take notice that things are changing. Okay, If it was foes changing every frame with no space, it might happen so quick that you won't really even pick up on it too much. So I'm gonna go to frame seven here and again click and drag down, and then again, F six. So this is a good refresher of some of those basics we've been learning before. I got new key frames in two layers, and now let me just pull this orange one out here. This one might get really long, this one. Not as long. This one can come here and we'll just bring this guy up. This one could come down. This one can come up and again. I'm just sort of making stuff up as I go, and then I want to be able to see this frame for a little bit. So I'm going to click and drag and hold down and hit F five to just add frames there. So basically, if I go back to the beginning, we have two frames where it's the same and then I go to frame three. It changes frame for its the same frame. Five. It's going to change frame six, and then it's going to stay the same seven. Boom. So what I can do on the timeline here is this little button here. I can set toe loop and then I can hit play, and I can actually just watch the animation playback. So again, guys, in every lesson, I want to give you these little tips that you know are really gonna help you out. So that's a pretty cool animation. I'm happy with that. Let me pause it. Let me go back to the rocket seeing. Okay? There we have our rocket and we'll go back to see number one. All right, I'm gonna turn off the looping. And then now when I'm scrubbing through here, you're going to notice. Well, the the Flames aren't playing well again. Remember when I told you in the graphic verses movie clip battle that the, uh, only a graphic would advance while I'm scrubbing the main timeline, let me do a command return, which is a short cut for control test movie in an enemy. So it was gonna do command, return or control enter on a PC that's going to generate my swift file for me and check it out. Now I've got my flames and it looks, ah, 100 times better. And it only took a few minutes to mess around and randomly just, you know, drag things around and have some fun with it. So now I got a rocket shooting flames pretty hot. All right. So as normal. Next, you're gonna have a follow along exercise, or I'll give you the directions straight and easy to follow. Have fun 34. Rocket flames follow along: all right. Here we have our rocket flames. Follow along instructions. Let's go. You'll see I have rocket flames. Underscore start dot fl a opened up. If you can't see the rocket, don't worry, it's sitting down below here, and we already have this classic Tween in place. We're going to create a swift preview using control test movie in Enemy notice that the flames aren't animating and the animation is kind of boring. So we're going to close the swift, go to the library and double click on the Rockets symbols icon. Double click on the flames on the stage. Look at the Edit bar and see that the flames are in the rocket, which is in scene one. Flames rocket Seen one now to edit The flames were going to go look down in the timeline, and we're gonna add some key frames. Click on frame three of the yellow layer, hold the mouse button down and drag straight down to frame three in the orange layer and release the mouse. While both frames air highlighted press F six to add key frames to both layers. Zoom in so that the flames are very easy to see. Using view. Zoom in. I'll do it one more time. That looks good. If the flames air highlighted with this dotted pattern, click off the flames so that they are de selected. Hover over the first corner of the orange flame until you see the angle bracket icon. Click and drag the corner somewhere else and then move all the corners of the orange and yellow frames. We'll move this one here, this one here and this one here. We'll do the yellow and then I'm going to repeat these steps for frames five and seven. I'm gonna click on frame five in the orange layer, hold and dragged down and release while those frames air highlighted. Hit F six. To add key frames, click off of the frame somewhere to de select them and then move the corners again. We'll do the same thing in frame. Seven. Click on frame seven in the yellow layer. Hold and drag straight down and release with both frames highlighted. Click on frame six. To add new key frames, click off of the flames to de select them and then move the flame corners wherever you wish . With the play head in frame. Five with no frame selected hit F five toe add frames in both layers. Click on the scene one button to go back to seeing one and then do control test movie inanimate to see your final animation Awesome. 35. Rocket cow: Hey, what's up, folks? I'm super excited about this lesson here. We have cows with rockets on their backs flying around. Okay, This is one of the key ideas I had in my head when I created this course. I won't take somebody with no animation knowledge whatsoever and get them to make three cows with rockets on their backs with shooting flames. All right, so we're basically there right now, And in this exercise, we're gonna be doing a lot of the same basic stuff we've been doing in other exercises. But I'm gonna show you a few tricks. We're going to show you how to access symbols from another files library, and we're also going to convert a timeline animation toe an animated symbol. All right, this is really important to show you how to take frames from the main timeline and paste them into a symbol so we can reuse that symbol multiple times. So with that said, let's make some cows fly. All right, So for this exercise, I have rocket cow start opened up and rocket flames finished, which is our previous exercise where the rocket launched and had the awesome animated flames. Well, what going to do now is make a cow fly across the screen with a rocket pack. So first I want to show you that inside of rocket cow start, I have a Onley, a cow symbol in the library. I want to take him out and let's just put him to the left of the stage. And I'm going to go out toe like frame number 60 and I'm gonna select frame 60 hit F six to add a key frame, and I'm gonna drag the cow over to the right. Now, if I just dragged the cow as he is, I could move him up and down and all over the place. But I want to make sure I'm moving him in a straight line. So a little trick is if I hold down shift in drag that constrains him toe only dragging horizontally. All right, so it's gonna move him off stage here by a bit and then right click anywhere between those two frames to create a classic Tween. And let's just test that out here I am generating the swift file And there you go. We have my cow flying across the stage Mu. Now I think we're look much cooler If this cow had a rocket pack with animated flames, Right. So let's close that off. Now. In this file, I do not have a rocket pack with animated flames. It's living in this file over here. Now. I could select the rocket, copy it and paste it into my document. But I want to show you a little trick. I'm gonna go two rocket cow start, and I want the rocket to be on the cow. So let me just double click on the symbol in the library that's going to take us into symbol edit mode for the cow. All right, so here I'm seeing the timeline of the cow symbol, These air, all the vector shapes that make up the cow. Now, when I look at the library, it tells me which filed this library is associated with. And this is the rocket cow start library. But I want to show you that this is also a drop down menu, and it allows me to choose the libraries of other open files so I can switch over to the rocket flames, Finished files, library. And there I see the rocket. So we're gonna dio is just point out one more time I'm inside Rocket cow start, but I'm seeing the library of rocket flames finished. So I'm just gonna take the rocket out of the library in place that next to the cow over here. And then I'm going to switch back to the rocket cow start library and I want to show you now that in the library I have the rocket. I have the rocket body and the flames. So all the symbols that were inside the rocket come with it. Okay. Now, in the cow symbol here, I'm just going to rotate the rocket around a little bit and just put it right on the cows back. So it looks cool. All right, so it's sitting right up there. So now my cow has inside of it a rocket. And if I double click on that rocket, we go inside symbol edit mode for the rocket, and you'll see that we have our flame symbol. And if I double click on that, you'll see that we have the animated sequence that we built in the last exercise. So in the edit bar you'll see where inside of flames inside of rocket inside the cow on scene one. So I go back to seen one. We'll do a command enter to test the movie out. And now what do we have? We have a cow. Fine. With a rocket pack. All right, this is awesome. And this silly stuff like this is exactly why I love animate Sisi. It's really easy to make, and it makes me laugh. All right, so let's close this. Let's bring this artwork back into view. We'll click on this button here. Perfect. Now, this is all well and good, but I just realized that I love this animation so much wouldn't be cool if we had multiple cows flying across the stage. Now I could create new layers and copy and paste these frames into new layers. But that's kind of a drag. What I want to do is create an animated movie clip that contains the cow flying from left to right. And I'm gonna put multiple instances of that symbol on the stage. So the first thing I'm gonna do is just zoom out a little bit on my timelines that I can see all these frames. So, in other words, what I want to do is take this animation here and put it inside of its own movie clip that I can then reuse. All right, So I'm gonna select frame one click and drag to highlight and select all those frames to frame number 60. And I'm going to right click and do a cut frames. Okay? And so now those frames have gone away, and we see nothing in this layer. All right. Just a blank key frame. So now I'm going to do is go to insert new symbol, and I'm going to call it Tao flying and hit, OK, and then you'll see that we have this sort of blank stage. All right, We have one blankie frame here, and there's nothing inside of the cow flying symbol. I'm just going to right click and do a paste frames. And so now, inside of that symbol, we have the cow flying with the rocket pack. I'm gonna go back to see number one. I'm gonna zoom out a little bit by hitting command minus. Let's go back to frame number one here. All right? And it's a cow flying. Place it on the stage and I want to show you that. Now, if I do a command return to test this movie, there we go. There's the cow flying with the rocket pack. I'm gonna actually take him. I'm going to rotate him a little bit, and I'm gonna do a command C command V, which is a copy and paste to make another copy on the Mac. You can also do an option drag. And I'm gonna take this one here. Just scale it down, make it a little bit smaller. We'll take this one here, scale them down. They come a little bit smaller. Put him up here. You know, maybe move things around just a little bit. All right, So here's the general idea. I have multiple cows with rocket packs in one frame of my timeline. Next time I test, check it out. True. Awesome. We have an army of flying cows with rocket packs. How awesome is that? And as always, next, we're going to have the follow along video with all the instructions, step by step, labeled on screen, as I do them. So it's super easy for you to get this done. Check it out 36. Rocket cow follow along: All right, folks. Time for another follow along video. Let's get these cows flying. I've got written instructions and, of course, in this video we're gonna have all the instructions on screen, as I do each step. Fire up enemy and let's go. All right, important to point out that before we begin, we do have rocket cow start open and also rocket flames finished. Okay, we'll be starting out, though with rocket calves. Start. Let's go. Step one. Go to the library panel and dragged the cow to the left of the stage. So I moved over here and do one of those. Click on Frame 60 and hit F six to add a new key frame, pulled down shift and dragged the cow off stage to the right. Right Click anywhere between frames one and 60 and select. Create classic Tween do control test movie in anime to see a swift preview. Awesome and then close it. When you're done, double click on the cow symbol in the library to go into symbol Edit mode. Notice. I'm now in symbol Edit mode of the cow. Use the library panels dropped down, then you to switch to the rocket flames finished. F l A library dragged the rockets symbol onto the stage anywhere next to the cow. Use the drop down menu to switch back to the rocket cow Start F L A. Use the free transform tool to rotate and position the rocket on the cow that looks pretty good. Click on the scene one button in the Edit bar to go back to seeing one. Do a control test movie inanimate. To see the animation Awesome flying cow with rockets, close the swift When you're done next, I'll convert the timeline animation to a movie clips symbol. Click on frame one. Hold the mouse button down and drag right to select frames one through 60 and release the mouse. When done right, click anywhere in the selected frame. Spanned and select cut frames. Go to insert new symbol. Give the symbol the name cow dash flying. Make sure it's a movie clip and hit OK, right. Click on frame one of the cow flying symbol and select paste frames. Click on the scene one button in the edit bar to return to seeing one. Click on the center stage button, if necessary, to center your stage drag the cow flying symbol from the library and place it to the left of the stage. Use the free transform tool to rotate it up just a little bit. Test the swift using control test movie in animate, Awesome and then close it. When you're done, click on the cow to make sure it's selected and do edit copy and then at it, paced in center. Take the copied cow, scale it down a little bit. Put it anywhere you like. Offstage. Test the movie again doing control test movie in animate cowabunga! Multiple cows with rocket packs flying across the stage. From this point on, you could make a many cows as you like. A quick little tip is the hold down option on the Mac or Ault on the PC and do a drag, do a control test movie in anime, and now you have three cows flying across the stage. You may notice that this cow here sort of disappears before it reaches the end. All right, well, the reason for that is because he's not flying far enough. So one way to fix that is you can double click on the cow to edit it and in frame. 60. Just move it off. Stage enough so that he's going to get all the way off. And then you can do a control test movie inanimate again. And you'll see now that he goes all the way off stage. All right, There you go. Enjoy. 37. Merge vs object: All right, folks. Guess what? It's me again. Yeah. I didn't leave you. I'm still here. So today we have our first drawing lesson. And before I get into how the different tools work, I need to explain the two different drawing modes of enemy. All right, we have merge mode, and we have object drawing mode. And depending on which mode you have selected, you can get very different results when you start overlapping shapes of different or the same color. So it's really important. And it's actually really cool because you may prefer one moto of the other. And I want to show you the pros and cons of each one first. Let's go. All right. So the first important rule of merge drawing mode is that overlapping objects of the same color on the same layer will merge together. Let me show you how that works. So I'm gonna take my oval tool and draw an orange circle and on the same layer, I'm going to draw another orange circle. Well, they're not overlapping, so they're totally, completely independent objects. However, if I take this one here and move it toe, overlap that one while it's still highlighted Aiken still sort of do what I want and move it separately. However, once it's de selected, Flash does some magic and those two objects merged together, so objects of the same color on the same layer when they overlap, will merge together. Next, I want to show you how in merge drawing mode objects of different colors on the same layer will cut into each other. All right, so let me get rid of that thing and let me draw another orange circle. And then I'm going to choose another color and I'll draw another orange circle like this. I've said this a few times that I'm not really a designer, but I get the feeling of major credit card company could really use something like this as their logo. Anyway, now that these two shapes are overlapping, if I select this one, I cut into that one. And now some people who come from like an illustrator background kind of freak out when they first experience this, and you know, I really kind of like it because it allows you to draw some shapes that are kind of complex , without doing any really difficult work with the pen tool. Now the third rule of merge mode is that stroke and fills our separate objects. Let me illustrate this very quickly. I'm going to give my stroke a color of black. And now when I draw an oval, you'll see that it is an orange circle with a black stroke. If I use my selection tool to click on it, you'll notice that the Phil gets highlighted and in the Properties panel, I can then change that filter color if I want. But I can also take that Phil and remove it from a stroke again. People from illustrator kind of freak out over this, but it's also pretty cool to know that you can do this. I'm gonna select everything and delete it and let me just draw a rectangle now and show you that I can select individual sides of a rectangle and pull them off. And again. You know, illustrator people are going Teoh get pretty crazy. But again, all these things are actually pretty cool features. So the fact that strokes and fills our separate leads us to our next rule, and that is that strokes can be used to slice fills. What does that mean? Well, let's see. Let me select all and get rid of everything, and I'm going to use my oval tool again. And I'm going to draw a circle so I can select the stroke separately and again in the properties panel. I could change its thickness, its style blah, blah, blah. But I want to show you that I can then move it. And then now I can slice this into two separate shapes. Oh, how do you do it? You know, So this think of the strokes as acting literally as a knife, if you will, all right. And it's gonna be pretty cool for a number of reasons. So let me just go and draw another circle. I could do something like select the entire circle. You know, we just jumped to my line panel. This is something I've done 1000 times and center that circle perfectly. And then I could take a line and drag it, draw it like that, and again I can select it. And then if I use my align panel, I can Boehm it right to the middle of the stage. And then now I can make a two toned circle with different colors. We can make it a little bit brighter up top if you want to. Baba. And so now I have a perfect two tone circle, and I can get rid of all of this stuff around the edge and do a little of that and very nice. So I used a stroke there to cut into a fill in the future lesson. I'll see how I drew this cute little be just using the features of merge drawing mode. But before against anything like that. Let's talk about how object drawing mode works an object drawing mode. Objects do not destroy each other or merge together and fills and strokes are grouped together. Let me illustrate on the stage here I have a square that was drawn with merge mode so I can select the Phil and the stroke separately. Let me go over to my rectangle tool and the difference between drawing something emerge mode and object drawing mode is this little icon down here, this button for object drawing. I'm going to press it to turn object drawing on, and then now the next time I draw a rectangle or square, it's gonna look pretty much the scene. But when I click on it, notice that it has this border around it here. Okay, When I go to the properties panel, it tells me it is a drawing object. When I click on this one over here, that's just a shape. I've selected the fill. I can select the shape of that stroke, but this one here is a drawing object. So I'm just going to change the color of that drawing object with its elected, I can change its fill color, and I can also change its stroke color at once. So it was make it some stupid purple, and I can, you know, draw another one right next to it. And these things can overlap as much as they want, and they're never going to destroy each other or merge together. I cannot take the stroke off of this one and move it somewhere else. OK, remember, with merge mode, I could take a stroke off, and I could use it to cut but an object drawing mode the stroke and fill our groups together, and they do not destroy each other. One thing that's cool about object drawing mode is that even though I can't take the stroke off of the Phil. If I roll over, I can still deform those strokes just like I would in the Merge mood version. It's like I said before, I'm a big fan emerge mood. But both different modes have their strengths and weaknesses. You just got to use the right one for the right job and choose the one you're comfortable with. Hopefully, now you understand the key differences and you'll know what to do if you ever inadvertently switch into the other mode, and that can happen just by hitting the Jakey. 38. Drawing strokes fills line: all right. First, I'm gonna show you a little bit about just strokes and fills. All right, The Phil is going to be the solid part of an object. When I click on this blue right here, you'll notice that it gets highlighted in this dot matrix pattern. The Properties panel tells me a shape, and wherever you see this paint bucket icon, that means it's referring to the fill color. You'll notice that I can click on this swatch here, and I can change that color to this green. If I go over to the tools panel, you'll also see that we have that fill color there, and I can change that. Fill color from here also and make it purple. All right. This object also has a stroke. If I click on the stroke, it's going to select one segment of it. Okay, so that's just the top segment. If I double click, though, that's going to give me the entire stroke. And again, I can go to the Properties panel and see the color of that stroke, and I can change it over to read if I want. I can change the thickness of that stroke if I want and I can diesel ect it. And then if I go to the tools panel, it's gonna show me the last selected stroke color and less selected fill color right now. And neither the stroke or the Phil are selected because I've clicked off. So if I change the stroke color here to be, I don't know Blue. It's not gonna change that object because that stroke was not selected. However, this will change the stroke of the next object I create. So if I used the line tool now, it's going to be a blue line. Let me just select that and get rid of it. Something else. I want to show you about strokes. When you roll over them, you're going to get that little arc next to the cursor, and that means that I convention that segment. Okay, so I'm going to just roll over, click and drag the segment. If I go over a corner, you'll notice that I get this little angle icon next to my cursor, and then I can move that corner point around, and I can do that to any of these corners of these objects. In one of these ovals here I can bend it down, bend it up so you can get some pretty cool drawing techniques managed just by morphing these sort of primitive shapes, as I showed you in the previous video. When you draw things emerge mode, you can select the fill and take it away from the stroke. Let me just undo that, and you can select the strokes and drag them away from the fill. Definitely watch that video on merge mode versus object drawing mode so that you fully understand those two modes. Right now, everything I'm doing is going to be in merge mode, so strokes and fills will be separate. Next. Let's talk about sampling fills and strokes using the paint bucket tool and the ink bottle tool right over here we have the paint bucket tool, and what that's going to dio is take the existing fill color and apply 20 fill that we click on. So let's just change the color to maybe this green and I'm gonna click on this Phil right here and now that makes that blue green. I could do the same thing to this sort of salmon circle down here. Now suppose I absolutely love this purple right here. And I want to apply this purple Phil to this blue square up here. Well, for that, I'm gonna go over to the eyedropper tool. The shortcut for that is eye, which is nice to know and watch what happens to my cursor as soon as I click. All right, I'm right in the center of that purple circle, and I'm gonna click, And then my cursor, it's which is over to the pink bucket tool. And you'll see now that I can click on that rectangle right there and make it purple. So something I love doing is just clicking on the I key to get the eyedropper. So we're gonna sample that, Phil, and now apply it to that. Phil. All right, so really nice. Next, let's talk about using the ink bottle tool in changing strokes. All right, so let's just say I want to put a blue stroke on some things. Well, I could first, you know, make sure I have a blue color as the stroke, which I already do. So let me just make that orange. Okay, then I can go to the ink bottle tool right here. And now, if I click on a stroke, it's going to make it that orange, which is very hard to see next to that red. So let me just do this one here when you'll also notice that it's only one pixel. Or actually, it's 10.10 pixels. So let me just change the strokes size in the properties panel to be four. All right? And so now I can apply it here, and you can maybe see that a little bit better, and I can apply it there. So now every time I click on a stroke, it's going to have those properties. Now, you may notice that this stroke here is dashed. Okay. What if I want a black dashed stroke on this circle here? Well, similar to how we sampled the fill color. I'm gonna hit I That's gonna take me to my eyedropper tool. I'm gonna click on that stroke. And then now check out the properties panel tells me I have a black stroke and the style is dashed. So now I can click on this one here, and I can apply that stroke two different objects. So again, you click on I to get the eyedropper. I'm gonna select that orange stroke, and it automatically switches over to the ink bottle tool. And I can click on this one here. Where are you? There you go. And that one there. So it's really cool to be able to sample existing strokes and fills from objects that you've already drawn and then apply them to other objects. Next, I'll show you how to use the line tool and create strokes with different styles. All right, let me just clear things up a little bit. I can do an edit, select all or command A or control A on the PC and then just bone delete. All right, And then now let me go over to my line, tool, and I'm going to just draw a line. All right, so you just click and drag to draw lines. Pretty straightforward. Let me just command a delete them and I'm going to hold down shift to show you that Aiken constrain the axis. So that's going to be a horizontal line. If I hold down shift and dragged down, I can get a straight line down. Or if I pull over, we can snap to 45 degree increments their rotation. So I'm just gonna draw a few different lines that we're gonna experiment with. And I want to show you that once I have a line drawn, I can go to my selection tool. And again, I can morph that line a little bit and I can bend it and I can go to the end and I can move it around. All right? So everything is pretty edible in animate here. What I want to do is click on this line and go to the properties panel. Let me make it actually black so that it's easier to see. And in fact, I'm gonna select all these lines here and make them black. I should have done that from the get go. All right, so let's talk about different line style. So let me just select that line there and here we have the style, and I'm just gonna go through a few of them here. We're going to go to a dashed line, and now you'll see that it is a bast line. Okay, there's dashes there. But suppose I don't like the length of the dash or the spacing between the dash. Well, with that line selected, I can click on this pencil tool here to edit the stroke style. And then now it can let me set the width of the dash is all right. So I'm gonna leave them at six. But I'm gonna change the spacing over to 12 and then I get a little preview here and you can see that now they're spaced apart farther. Let me just do, like, 24 hit, OK, And then now I have my dashed line. Now, although it looks like there are actual gaps in this line, if I roll over it even in a gap notice, I get that curve next to my cursor. And that means I can still bend and select that line if I want. If I'm not happy with that, I can click on it to select it. And I could go back to the style and I can even change the thickness from here. But I can change the spacing. And Aiken scrub those out to 2 40 and I could make the dashes longer if I want and hit. OK, And now I have longer dashes and longer space. So that's just assure you that I can change the style and the thickness and the color after the fact. So that's a dashed line. Let me select this one here because it's nice and long, and I'm gonna go for the style of dotted. And again, we now have dots here. And if I click on to edit, we can change the spacing. So, Aiken, space those dots out. If I want the dots to be thicker or larger, I would click on that line and I would either change the stroke to make them bigger. Or if I go back to the edit button there, we can change it here. So the thickness of the stroke is going to dictate the size of those actual dots. So they're they're smaller. Let me make him pretty big. So it's just spur. There we go. And I like that. The next I want to show you is going to be the stippled, which is that's Ragin kind of nasty. I'm gonna go to stippled, and now you'll see it's almost sort of like a little spray paint effect there. I'm gonna zoom that thing up a little bit, so I'm gonna change the stroke thickness to 23 tonight taken better, see what it is. Let me click on it. And there are a few different things that I can edit. Now for this stroke style, I can change the dot size and I can go over too large That's gonna put them closer together . And I could do it all uniform size and hit, OK, and then now all the dots are the same size. But let me just go back over to edit. And I'm going to say that there's going to be random sizes and we can change the density to be very sparse, which means we're going to see fewer of them and let me just it, it that and we're gonna go to very dense. And then now you're gonna have a lot more of them. So a lot of different ways to vary that effect. And since we've been changing the stroke here, if I select any other tool that creates a stroke like the pencil tool we're gonna talk about next, I'm going to then draw in that exact style that I have set there. If I go to create an oval again, it's going to use that stroke on it. Let me just undo that. And now let's just go to select the last stroke here, and we're going to change the style to be what we have here. Hatched. Okay. And now you'll see we have these very small hatch lines and it would really help if I were to blow that up a little bit. So now I'm making them larger. I'm going to select that. And now with the edit menu, we have all of these different options. Okay, so that's a straight line. But what we can dio is rotate them slightly, and then you get that sort of effect. So if you want to draw grass, maybe that will work for you. Um, we can change the rotate around to free, and then it's going to get really sort of weird. Um and we could also change that rotate down to I want to say none. And then I'm going to do the space is going to be very close. And the jiggle is going to be wild and hit OK, And then you get something like that. And the next time I use the pencil tool in drawer, you're going to see that. What do we get? Whoa, all these different lines. There's different variations in the place, man to They're all sort of different heights, and they're all scrunched together a lot. So as you saw, there's a lot of different settings for this hash line and all the other lines styles. So what I'm gonna do is take a little break now, and I would encourage you to open up, animate and draw some lines and play with these different settings yourself. In the next video, I'll show you how to use the pencil tool, brush tool and paint brush tool, so you there. 39. Drawing 2 pencil brush paint brush: All right. So we're gonna pretty much continue our lecture from part one, and we're gonna focus on the pencil tool, the brush tool and the paint brush tool. All these tools are very different. And I'm gonna show you some of the features that may not be so intuitive. So sit back, relax and learn a bit about these new drawing tools. All right, so let me start out by using the pencil tool. I'm gonna go to the tools panel here and click on the pencil tool, and the pencil tool is going to create strokes for us. So here the stroke color is set to black. The properties panel is telling me it's black. It's telling me the stroke with this set to four, the style is going to be a solid line, and that's about all we need to know. For now, the pencil tool is great. Whenever you want to do some sort of free form shape, maybe something like some hills here and what I want to do. This focus on the features that aren't necessarily so intuitive. And that may get you into trouble. So you may notice that after I'm drawing that Right now, that shape has a few kind of kinks air, weird notches in it. But when I release, it gets smoothed out a little bit, all right, and that's pretty nice now. What's not so obvious is that when the pencil tool is selected, you have these different pencil modes down here, and right now the pencil mode is set to smooth. So after I'm done drawing this watch, you'll see that the shape kind of changes and animate does a cool job of smoothing out those shapes. I'm just going to click on the key frame here to select everything and get rid of it. There's another smoothing mode here for straighten, and for this, if I draw something more like mountains, watch what happens when I release. It's gonna give me straighter lines. Okay, it's going to sort of get rid of some of the curves there. When Straighten is selected off, Animate also has shaped recognition. So let me draw something that looks sort of like a square, and then, boom, it turns into a square. I draw something that's kind of like a circle, and it turns into an oval. There. I draw something that's kind of like a triangle, and it gets it pretty close to a triangle. If you go to animate CC preferences, what you can do is go to drawing. And then there's all these different settings. But here there's recognize shapes, and what you can dio is modify how strict or tolerant that setting is. And then you have other options for smoothing curves and recognizing lines. So what I do is I suggest that you just sort of play around with these different settings, and it's gonna take a little while to get the tools to sort of perform the way you want. We also have an ink mode, which means that after you're done, drawing animates pretty much going to honor the shapes that you drew. There'll be some moderate smoothing, but not too much over on the pencil properties. You'll notice that there's actually smoothing here is well so you can adjust that within the panel to let me select everything and elite. So we have those three smoothing modes, which are very important because, you know, if you have straighten on and you go to draw something like your signature and then all of a sudden it turns into that you're gonna be pretty horrified. So always pay attention to which smoothing mode that you are using. Now I'm going to again get rid of that stuff. Let me go into smooth and let's say I draw something like a cloud and you know, that's not all that great. There's still some weird kinks and stuff. What's cool about animate is that you can smooth things after the fact. So I'm gonna go to my selection tool and double click on that stroke to select the whole thing. If I zoom in, whoops, let me use the hand tool. You'll see that that stroke is actually selected there. So let me command minus to zoom out. And now I have this option here to smooth that shape out even more. So what's gonna happen is, each time I hit that button, it's gonna be removing points. I'm gonna get a much smoother, better looking cloud. All right, so that's actually not too bad right there, huh? And likewise, if you were drawing something that maybe you wanted to look more like, you know, mountains or whatever, and maybe had some bends in there, let me Ah, select this piece right here. I can click on the straighten button right here, and that's going to straighten it out. I think there may be some sort of weird kink here, so let me select this segment, and I'm going to click on the straighten button and then watch that boom. So it's pretty cool that you know, you don't have to be the best artists with the most gentle hand. Um, after the fact, you can use some of these tricks here to, ah, clean up your sheeps quite a bit. So remember when the pencil tool is selected, you can select your pencil mode before you start drawing. And if you want to change stuff around, you can select your segments, and then you have the smooth and straighten options to do some sort of fine tuning at the end. So next I want to talk about the brush tool and its various brush modes, which are very important because they make the brush tool act very differently. So right under the pencil we have the brush tool not to be confused with the paint brush tool, which I'll talk about next, but for now, we'll deal with the brush tool, which is going to give us a way to paint fills. So our Phil color Let's just make it this red right here and you'll see that I have an outline with my cursor is showing the actual brush size. So here I've painted a fill, and as far as the brush options go on the properties panel, you can change your fell color. Over here. None of these options apply, but down here for a brush options, you can have either a round brush or you can have an oval or square so very sort of ah, primitive shapes you can use as brushes. Here you can change the size of the brush, so we'll use a much smaller brush like 30. So it's actually an interesting way to just draw square if you need to. When zoom size with stage is selected here, it says the brush size scales as you zoom in and out of the stage. So right now my brush size is 33 pixels. So if I zoom all the way down a bit using command minus the next time I click and click, I'm gonna get a box that was the same size as whether or not the stage is bigger. Now, if I turn that off, watch what happens when I zoom out. You'll see that the box that it draws is much bigger. Okay, because the brush isn't changing size as the stage scales as I zoom back in command plus or control. Plus, you'll see that it's drawing little squares there. But if I zoom out to another degree, it's going to draw a different size square. So it's a cool option tohave and use it as you see fit. So from the Properties panel, you're basically to change the color, the brush shape, if you will, and then the size and the zooming options. So let me just click on the frame here and then delete all that mess. Now that's all fairly intuitive. And I guess before I go on to the next part, I just want to show you that since you're drawing with a fill that you can put a stroke on that Phil, let me first get the selection tool and just show you that since it's up, fill you consort of you know, Morphin mutate its outer edges. When I select that, Phil. I could then go over here and smooth it out, just like I did with things I drew with a pencil tool. All right, it's just smoothing the vector shape there, right there. But what I want to show you is that since it's a fill, you can also apply a stroke to it after the fact. Now, how do we apply a stroke to a Phil? Well, we go back to the last lesson to remember. We have the ink bottle tool so I can click on the ink bottle tool and click on the outside . And then I put a fill around that. I'm sorry I put a stroke around that fill that I just drew. Let me select all and delete. And so one more time again, I condone draw with the paintbrush. And then if I used the ink bottle tool, I can put a stroke on it. All right, so just stuff you should know Now. What's really important about the brush tool is hidden away in the tools panel. So let me just click on the brush again, and down here we have what's called the brush mode and we have paint normal, which is what you want. We have paint fills, we have paint behind. We have paint selection and we have paint in side. All right, So what I'm going to do is just illustrate these for you very quickly. So paint normal. We know. And since that's what we've been doing, use the paintbrush and you leave a mark behind where you were. And since we're emerge mode, fills of the same color are going to merge together again. We had a big lesson on how merge mode works. However, let's go into these different brush settings here. And so here we're going tohave paint fills. Okay. What that means is that we aren't going to paint strokes. So in order to illustrate that, let me use the ink bottle tool and put some strokes on this shape here. Okay, so now when we have our brush mode set to paint normal, if I changed my brush color over to blue and I do something like this, notice that it cuts through all of the strokes and the Phils and everything is you know, everywhere I drew with my paintbrush is now blue. Well, let me switch over to paint fills. And now if I go across like this, watch what happens. The strokes do not get destroyed. The strokes are still black. The next mode I'm going to show you is paint behind. All right, so this is interesting. I'm gonna put a line across here and then notice that the new blue paint went behind the red fill in the black stroke. Alright, It did not destroy it. So this is one of those things where if that mode is on and you're not aware of it, you may be very curious as to why is that stroke going behind? Well, that's because of the different mode you have here. Now we have paint selection. Okay? And so let me show you how that works. I'm gonna go to actually, I'll turn that on. But first, I really have to have something selected. This is a bit of a mess, so let me just delete everything and let me draw. Let me see a few shapes here. All right. Just a few circles. Let me change my fill color here with nothing selected will go to this green here and then I'm going to select this object. I'm gonna go over to my paintbrush and I'm gonna go to paint selection. And when I do that, I'm gonna draw across all three circles. But only the selected one there is going to be painted. So now I could be very sloppy, and I can create a striped circle in the centre without affecting the other blue objects. So do something like that and it's only going to paint where the selection is. Okay, so you're not gonna need this stuff all the time. But every now and then, it's gonna come in super handy. The last brush mode is going to be paint in side, Okay, So similar to paint selection. If I start painting inside of this shape and I go out of it, it's only gonna paint inside of that shape. It's not gonna destroy the stroke, and it's not gonna paint outside of that shape. So with this mode, it's important that you actually start inside the object you want to paint, and then you don't have to worry about that brushstroke going anywhere else. So in general, the brush tool is fairly straightforward. But it's these different brush modes that you just have to pay attention to. All right, So saving the best for last. We have the paint brush tool. All right, so the paint brush tool is this guy right here, I'm gonna click on it, and at first glance, it may look like it's sort of doing the same thing as the other brush. Let me just get rid of that thing there. But the trick to the paint brush tool is choosing the right brush. So in the properties panel for the paint brush tool, we have this little icon right here, the brush library. So what you're gonna do is click on that, open up this separate panel, which I'll move up here and let me just show you a few things. We have arrows special, so you can paint with an actual arrow. And the most important thing about this is that you must double click on the arrow to select it. It's so important they put that little tool tip in there. So if I just click on this one and go to drawer, it's gonna be the last one I selected. So let me just double click on this one. And now we have a different arrow with that outline. Get rid of everything there and let me go to artistic. So I'm just gonna go through a few of these so that you can actually see what they're like . DoubleClick. And there we go. So we can also adjust the smoothing, and we can Indra adjust the width, so maybe I'll just make it a little bit smaller here. All right, so we get this really nice artistic paintbrush. Look, let me go to ink. You know, you can just see all these different, uh, style. So instead of you watching me draw with each one of them, I'm really going to suggest that you crack this open and do it yourself. Because a lot of fun playing around the different brushes and the different options. You get a whole lot of different effects. Let me just get rid of all those. But one thing I do want to point out is that this little option here draw as Phil is important. Okay? Or at least it makes a little bit of a difference. So if I have draw as Phil selected and I draw, you'll see that when I use the selection tool that I can select this as a normal fill, all right? And that means I can to form it. And I can actually use my ink bottle tool and apply a stroke to it like that. So now I'm actually stroking what was on the paint brush with a very thick stroke. Let me just undo that. So let me click back over to the paint brush tool and show you that with the paint brush tool selected, this is a little annoying, but it's something will have to deal with. Since this shape is selected, I'm not seeing the properties of the paint brush tool, so I'm gonna hit, escape to de select. And then now I see my paint brush tool options. And so now I'm gonna do not draw as Phil. And when I do that, it's gonna actually draw it as a stroke. Now it looks pretty much the same. But when I use my selection tool and roll over it, you'll notice that I get that little curved arc next to the car, sir. And that means that I can bend this and distort it like I could a actual stroke. All right? Where is this one here, remember, is a fill that gets distorted like this, and it can be selected as a whole, but I can't bend it or do anything with it. So this one's a stroke, and this one is a fill. I'm going to select all of those, and I'm just gonna jump really quick into pattern brushes, which are really cool. We'll go into borders, we have bird tracks. So I'm going to make sure I'm using my paint brush tool and double click. There we go. And so now I can draw these little bird tracks. It's actually little bird feet. Um, let's go, Teoh scroll down a little bit. We have these cool double arrow lines that I'm drawing with the paintbrush, and we can go to novelty and do something like these flowers so I can paint in flowers. So there's all these nice decorative brushes. You can actually create your own brush shapes. That's a little bit beyond what I can do right now. I'm going to select all those. And what's cool is that for all these different brushes, they can actually be applied as strokes to other objects. So, for instance, I can go to this the rectangle tool the next time I draw my rectangle, that brush can be used as a stroke around that Phil. So it's really pretty cool what you can do. I can then select that stroke, right? And then I can actually change the brush to barbed wire. It looks like only selected the top one. So let me just make sure I'm shift clicking on all of those and I'll double click on the barbed wire. That's I'm only getting one at a time. It seems double click. Select this side and double click. So now I can draw things with a barbed wire outline because I'm using that custom brush there. All right, So if you are an illustrator by trade, um, you're gonna have a thrill with these different brushes and get some really nice calligraphy effects and, uh, gonna have a blast. So I'm gonna totally recommend that you check out the pink brush tool and for everything that I've gone over in these two drawing tutorials, I really urge you crack open a blank f l a. And just start experimenting. There's tons and tons of options and pretty much, if you can think of it, anime can do it, so check it out 40. Drawing 3 shapes: all right, We're gonna continue are drawing Siri's and we're gonna go over the rectangle rectangle, primitive oval, oval, primitive and the Poly Star. I think you're really gonna enjoy the primitive tools and the poly star tool. There's a pretty cool stuff you can do with them, so let's get going. All right, So let's start with the rectangle tool right here. And as you can imagine, it's gonna help me draw rectangles. Now, if I hold down shift while I draw, that will constrain the proportion so I can have a perfect square. If I want a square of a particular size before I draw, I can hold down, option or alter on the PC and click to get this dialog box here. So now I'll get a rectangle of 100 by 100 right there, which definitely can be helpful. You'll notice that there are options down here for the corner radius. Now, the thing about this is that I can't select an existing rectangle and change its corner radius. This is only for new rectangles, so let me select the rectangle tool again, and I'm going to just say that the corner radius is going to be 16 usually works pretty good. And then so now the next time I draw a rectangle, you'll see that we have this rounded corner here on all four sides. Now the corners don't have to be uniform. I could do something like, uh, make this one here. I don't know. We'll make it zero and will make this 10 and will make this 1 32 And then So now the next time I draw, I get this really cool shape like this. So that's all well and good. But again, it's sort of annoying that, you know, I might not like that corner radius there, and I want to change it so I can't edit that corner radius after it's drawn, I'd have toe edit in the properties and then draw a new one. So the solution to this is that animate has something called a rectangle primitive. So before I switch over there, let me just show you that just like everything else I've been drawing, we have our fills and we have our strokes, okay. And both of those are shapes. OK, so just regular vector shapes that again I can morph and move around and edit and do fun stuff with. I'm going to get rid of all of these things, and I'm going to switch over to the rectangle primitive tool. And I'm gonna draw a little square here or rectangle, and you may notice that it's outlined in this greenish blue or scion color. But the cool thing about primitives is that you can edit them after the fact meaning I can go into the properties panel down here and I can change the corner radius. I can make it negative toe all four, or it can make it positive. And I get this sort of real time preview of the changes I'm making. I can d link those corners, and Aiken set the top corner here to something like, I know zero, and I can make the bottom right corner something much bigger. Like 60 0 that's huge. Right? Um, let's go crazy and make it 80. All right, So now I've created this little, uh, teardrop shape, if you will. Now, using the selection tool, I can click on that object. And when I roll over this little dot here, check it out. I can actually pull that corner out all right, isn't that awesome? And I can get this one here, and I can edit them all independently after the shape has drawn. And the thing is, once I've drawn this shape like this, the next time I switch over to the rectangle primitive tool, I can draw another one just like it, all right. It's really pretty cool. So I'm gonna select all those and get rid of them. I'm going to switch over to their regular oval tool now. And as you may expect, it's going to give me a separate fill in a separate stroke and let me just get rid of those things. And you know, there's some stuff I can do with it. Once it's drawn, I can't really change it around. But in the Properties panel, I can set a start, angle and angle and an inner radius. For now, I'm gonna set that inner radius, and now you'll see that I'm drawing with sort of a doughnut again. There's so there's an inner circle here, and you can specify how wide it is using the inner radius. Now, if I make it bigger, it's not gonna change this circle. But the next one that I draw will be different. So it's nice if you're gonna make a bunch of doughnuts, let me get rid of all those. And now I'm gonna mess around with the start angle and end angle. I'm going to make this 1 90 degrees and the end angle. I'm going to make 100 whoa, let's do 1 80 And then the next time I draw a circle, I get this sort of arc so specified where the ark should begin and where it should end for the start angle. Let me do now. Zero. And now you'll see that I'm doing sort of half a circle. If I bring that inner radius down to zero, I can do a perfect semi circle. All right, so with the oval tool, it's a little bit weird setting these angles and not seeing anything in real time. You have no idea, really, how they're gonna look until you draw them. And, as you may imagine, let me get rid of those. That's where the oval primitive tools comes in. And so now I can draw an oval like that, and I can use my selection tool here and I can literally modify the start and end angles in real time as well as the inner radius. So I'll grab one of these outside points to change the start or the end angle. I don't know which ones which, quite honestly, and then this inter point here I can change the inner radius. So if you're in pacman mode, what do you know? There you go, and then you can switch back over to the oval primitive tool again and draw a bunch of them just like that. You can also go to the properties panel and adjust the start angle and end angle. The real time preview Ah isn't really to swell here. It's almost better to use the selection tool there. But you do have thes settings here, and you can always reset if you want to go back to a full circle and then the next circle I draw is going to be just like that. But again, I congrats that center and make it into a doughnut. Next, let's talk about the Poly Star tool, so this tool right here is the Poly star tool. And what's that? Well, it's what you get when you take a polygon and a star and put them together. So when you select this tool, the properties panel doesn't tell you too much. Other than, like stroke and fills, stroke style, blah, blah, blah. Um and then you go to drawn object. Oh, I gotta after gone how that happened. Well, in order to change it from a polygon to a star to just the number of sides you actually have to click this additional button toe open another window. So right now it's a polygon with number of sides set to eight. So if you want to draw a triangle, guess what? How to draw a triangle, An enemy draw. Upali gone with three sides. So now I can do a triangle like that. And I think you get the idea you put in the number of sides and that what you get So let's do 12 1 last time. And so there we have a 12 sided polygon. I'm gonna select all and delete. Now let's switch over to the star settings on. Dhere takes a little experimenting. Sometimes let's do a six pointed star and hit OK, and now you'll see that I got a star like that. But there's another option here that's important. And that's the star point size, so you can have a value between zero and one. If the value is very close to zero, like 0.1, you're going to see that you get very, very thin. Spiky points. All right, so these air both six pointed stars. But as you can see, they are drastically different. So you're gonna want to mess around with both those options. I'm gonna go to a 12 point star again with a very small point size, and then we'll just do one with something like 0.8 for the star point size, just to see the different versions that you get. OK, now these are not primitive shapes, meaning that you can't select them and then change the number of sides after the fact. All right, these air just regular vector shapes here so I can take the fill away from the stroke because I am not in object. Roy Mode. I'm in merge mood so we can select the stroke after the fact and change its color to something else. And you can select the Phil obviously and delete it so there. We have a new overview of our basic drawing tools. I'm really gonna think you're gonna enjoy the primitive tools there. And as I said in the previous video, I'm a huge fan of merge drawing mode because I really think he makes him cool shapes when you cut one shape in tow Another, I hope you learned a little something here and next. We'll tell you how to create text with the text tool. All right. Uh 41. Creating text: All right, folks, in this lesson, I'm gonna give you a little demonstration of how to create text Will talk about the three types of text which are static text, dynamic text, input, text. I'll let you know which one you want to use. I'm gonna show you how to break apart text into individual characters, had a break apart into shapes to the warp it in different ways and also show you how to add filters to text. Once you have the basics of text under control will then go into showing you how to animate it. All right, So the first thing you need to know about creating text is that you're going to use the text tool. So I'm gonna click on the text tool and I'm just going to write some text here like Hello. Okay, Now, when I go to the properties panel, it's going to tell me all these different properties of the text and one of the first things are going to see is that this is static text, alright and static text means that throughout the course of my movie or animation that the text is not going to change is going to remain the same. The other options here are dynamic text and input. Text dynamic text means of the text will change at some point. And input text means that someone can type into that text as a text field. All right. And you're only going to be using dynamic or input text if you're building something that's interactive, all right, where somebody can interact with your animation to change those text values around. I'm just gonna give you a very quick example of that right here. Okay. So here I have a static text field here. We have an input tax field, which means someone can type into it. And this one down here is a dynamic text field. So all three text fields. I'm just gonna test this with real quick. And I'm going to type inside of this field and put my name Karl here. And then when I hit submit, you'll notice that this one dynamically changes to say hello, Karl. So nice to see you. If I put the word Bob in here and hit submit, this one will change to say Bob. All right, this is all happening with a little bit of action script, you could do the same exact thing with JavaScript and html five document. But again, as I've said before in this class, we're just using animate to create GIFs and videos. So there's never gonna be any human interaction, so you're never going to need input or dynamic text fields for what we're doing in this class. So what? That said, just make sure you're using static text field. What's very important about static text fields is that enemy automatically embeds the fonts that you're using. Okay, so what you see on the screen will show up on everybody screen or will always be in your exported video or GIF file. If you use dynamic Texan input tax, then you have to worry about embedding fonts or using Web fonts and gets a little bit tricky. So for now, just use static text and you'll be good With the text field selected, you can change quite a few things about it. The most important things you're gonna be dealing with their probably the font family and the size and the color. So right now we're using Avenir. If I click on this menu here, I can get a list of all the fonts on my system. If you are designing and you don't really know what font you want, you can just click in that field and use the down and up arrows to sort of scroll through each font and see it rendered on screen. And you get an idea of you know which font you want to choose for this exercise here. I'm gonna use impact because that's what most people I believe have on their computers. It's pretty safe here. We have the font size. It's a slider so I can scrub up and down. But you only really go up to 96 points so you can double click on there to single click. I'm sorry, and I could do 1 60 type in whatever value I want for this, though, I'm gonna be happy just with 90. And of course, you can change the color to anything you want. And then we have some other options for aligning to the left character, spacing all the sort of stuff. Letter spacing. I'm sorry is right here so we could stretch things out a little bit or just go back to the default, which I think it was set to bet six or seven and go negative and get things really tight. So let me just go back to zero, actually, and will be cool. You know what? I think I want something like six there. Ah, beautiful. So I'm not gonna bore you to death with, you know, this is what a line left looks like. And this is what center in a line, right? Looks like if you've used any sort of word processor, you know, you can figure this stuff out. So what I want to do now is just show you some things about working with text. All right, so this is a text field here. I can double click on it any time. I can select characters in there and I can switch over to lower case if I want. And this is an edit herbal text field. But what I want to do is show you that you can break your text apart. Maybe you want to do a character by character animation. Alright, while you need individual letters for that. So I'm gonna do a modify break apart. And now each letter is its own separate creditable text field, meaning I can select it. I could change the font if I want to. Anything else and Aiken select that character and even change the actual text inside of there. So we broke apart once to get individual creditable text fields. I'm gonna undo a bunch of stuff until I'm back with, uh Come on, give me one big word there. Boom. There you go. So now I have the whole world as an inevitable text field. I'm gonna go to modify. Where are you? Break apart once to get individual creditable text field. But if I do modify, break apart where are you again? It's now going to break them apart into vector shapes. So no longer can I select this and type a new character or change the font. Here. We have just a filled shape. Okay? So I can change the color of it if I want to. Something else And I can also mutate that font however I want. So maybe you like just a little bit about a font. Well, here you go. You can poke and pinch and do some pretty cool stuff with the text. Let me just make that all white again, and I'm gonna select it all as vector shapes and just show you that with my free transform tool, some cool stuff you can dio weaken. Switch over to this mode here, which is envelope and I can, like, sort of bend it up like this. And we have these cool control handles so we can wiggle it around a little bit. I could do something like that like this. We can pull this out so we can totally deform the texts and they're going to be clear. It's actually vector shapes. It's not actual text. Pretty cool. If you want to fill in a fish shape with text, that's a start. Let me undo till we're back to sort of normal ish shape there. Here. We can also do this perspective or distort change, I should say. And so now we can do something like that and like that Hello. All right, so once you have this stuff broken apart into shapes, it's actually pretty cool, and you have a lot of control. But that text is not creditable once you break it apart, so you might want to be pretty comfortable with your command or control Z for undoing things. So let me go back into him a full word. And there I have the word Hello? When we go back to my selection tool, and I just want to show you that this is a static text field again after I undid all that weird stuff I did. And what's kind of cool about text also is that you can apply filters directly to it. I've showed you previously. You can apply filters to movie clips, but not graphic symbols. Well, you can take a text field, and I could do something like apply a drop shadow to the text field. And then any time I edit that text field, anything I type here like Carl. Is he all those characters? You know, we'll have that drop shadow on there. And, you know, I didn't encourage you to mess around a little bit and try other drop. I'm sorry. Other filters as well, you know, you can do something like a slight bevel. Make it sort of three D ish if you want, so you can put filters directly on text. I'm gonna show you in the next video how you can actually do a text animation and have the filter animated. All right, so we're gonna put the filter on the symbol that's being animated. But before we get into that, won't you crack open, animate, play around the text tool, create some different settings, break it apart, use, um, filters and just go over some of the stuff I just showed you when you're done, jump into the next video. Awesome. 42. Text pulse filter: All right, so in this lesson, I'm gonna walk you through the steps of creating your first text symbol. We're gonna put a filter on it, and then we're going to animate that symbol in the filter. Here. You're going to see that as the text gets bigger that the drop shadow sort of drops away a little bit. It gets softer and larger. All right, so it gives us sort of this little three D effect. And while we do this, I'm also going to show you what will happen if you try to Tween something that isn't a symbol. It's one of the biggest beginner mistakes, and I want to help you avoid it. So let's get to it. All right, so let's just create this text first. I'm gonna select the text tool, and I'm gonna type the word pulse. I'm then going to hit escape so that it's no longer creditable, and I'm going to use the align panel to center it horizontally and vertically, and I'll click off the stage to close that panel. I want to switch over to the selection tool by clicking V, which is the shortcut for the selection tool and I'm gonna click on this text field here. I just want to verify that it is a static text field. So now let me show you the most dangerous thing ever for beginners in enemy. All right? And that is animating something that isn't a symbol. So here, this is a text field. But let's just say I forgot about something. And I go to frame 20 down here, hit F six to add a key frame. And I say, You know what? Let me move this word over here, and I'll just right click and do create classic Tween like I've done. What's this? Well, this is the scariest dialog box you'll ever see. Inanimate. All right, if you learn anything from me at all, it's that you always hit. Cancel when you see this box. Okay, so here it says the selected frame spans cannot between you must convert frame content to a symbol in order to Tween. Well, I've told you that 100 times always convert to a symbol first. And then it says, Do you want to convert and create between and here That sounds like an awesome idea. Right? Let's have animate do it for us. Well, let me show you why. That's a horrible idea. I'm gonna hit. OK, and now Hey, I got my classic Tween look. The text moves. Everything is wonderful until a few things happen. One of those things might be somebody says, Oh, you know what? The word pulse should have been lower case, all right? Oh, no big deal. Well, I have to do is edit the symbol and all instances of the symbol will update. So I double click a bunch and I'm just going to type in pulse Lower case, Go back to seen one. And as I scrub through the timeline, everything looks fine and dandy. Until Paul frame 20 it's uppercase. Wait a second. I went back to frame one lower case scrub forward boom upper case. Hey, that's not really cool. What happened? Well, let's go to my library. Oh, look, I have symbols Tween three and Tween four. One of them is lower case, and one of them is upper case. So what animated to us as a favor is it created two symbols, one for each key frame. All right, so in the first key frame, we're using something which is. Looks like it's going to be between three. The lower case, one in a frame. 20th Tween number four. I previously had one and two before I started recording. So if you let animate do this for you, you're gonna have Tweens one through 30 and here you have no idea what they are. And every time you want to make a change, you'll probably editing to symbols instead of one. The whole purpose of symbols and animate is so that you edit one instance and they all update throughout your file. So please, my lesson for today is never hit. Okay to that dialogue box hit, cancel and make your item into a symbol. So what I'm gonna do now is go to undo school just to a bunch of commands. Ease until I go back to my happy place, which is when we don't have Tween three anymore. And on the stage, we still have frames here. I'm just gonna keep on doing until we're back to one frame and this is a text field. It's not a symbol. And now I should be able to hold down, shift, select both those symbols and get rid of them. Okay, Now I'm calm. And now I can proceed to do things the right way. And what's that? I go to modify, convert to symbol, and I'm just gonna call it pulse, make sure it's a movie clip and hit, OK? And now I'm safe. Aiken, Tween this thing to my heart's content and not have to worry about any of that nonsense happening behind the scenes. All right, so moving forward, we build this animation, I'm gonna first put a filter on this instance of the symbol when you go to the properties panel and I'm just going to do a drop shadow and the default settings hero for pixel blur, 100% strength, 45 degree angle, distance for pixels. All looks good to me. It's a nice hard shadow there. Now, the reason I'm putting the shadow on now is so that when I create my other key frames, those shadow properties are going to be copied over. So let me just go to frame number 20 and hit F six to add a key frame. And while I'm here, let me just, uh, get those frames a little bit bigger. Let's there you go very nice. So now I'm going to go to Frame 40 and ed mother key frame. And this goes all the way back to our lesson on basic animations building a pulse, right. We put the three key frames, and first and then we mess with the middle one. So the first and last frames will be identical. And then the middle frame here, I'm gonna select this symbol. I'm gonna go to my free Trent might transform panel, and we're just going to make it. I don't know, 200% its size and hit return, and so now it gets bigger. Now, what I want to do here is simulate the fact that as it's bigger, it's actually getting closer to us as the viewer. So what I want to do is adjust this shadow a little bit. All right, if we imagine that you know, this text at its normal size was laying very close on a table or something, it would be casting a very short and hard shadow. But as we lifted it off that table, the shadows going to drop back a little bit, it's going to get bigger and a little bit softer so I'm going to do is select pulse in frame 20 and I'm gonna set the Blur, X and Y 2 30 All right. See, on those that it gets a much bigger there, I'm going to set the strength to 30. So that's gonna make it softer. Alright. It's much less black, if you will. And the angle is gonna be the same. And the distance I'm gonna set Teoh, I don't know 40 maybe. All right, so now what you have is that shadow dropping back and getting softer as the text gets bigger. And what's really cool is that those settings are going to get Tween as the scale Tweens, and I'm going to right click and do create classic Tween. And then now you'll see that the text grows and that shadow sort of drops off and get softer. And I'm going to right click and do create classic Tween. And when it shrinks back down, you'll notice that it gets harder and darker as the text gets closer to the background, if you will. So using the shadow were sort of simulating a little bit of a three D effect just going to click on the center frame again so you can see those settings. All right, let me just do a command return, and we'll watch this play as a swift, all right? Pretty cool, huh? I like it. So now, after I've done all this work, I could double click on this symbol to edit it. I could change it to Carl. All right. I guess I'm a little biased here. What a lovely name that is. Let me just center it there. And if I do command return now, all instances of the symbol get updated. And I have a beautiful animation with a new word. All right? I never want to see those nasty between one or Tween two symbols in my library. Okay, So next, I'll give you the follow along instructions, and you can build this for yourself. Awesome. 43. Text pulse follow along: All right, folks. You know the drill here. I'm gonna have a follow along. Instructions for the text pulse with filter animation. I'm just gonna be reading you the exact steps and showing you exactly what to do to build this project. Let's go. All right, so here I have text pulse. Start not F l. A opened up. Step one. Select the text tool, then click anywhere on the stage to create an edit herbal text field. Go to the properties panel and set the text type to be static text. The family is going to be impact. The size is going to be 90 and we're going to make the color white in the empty text field on the stage, type the word pulse. All uppercase. Click outside the text field to de select it. Click on the selection tool. Click on the pulse text field to select it. Go to modify. Convert to symbol. Give it the name polls. Make sure it's a movie clip with the registration point in the center and click OK, Go to the Align panel and with a line to stage selected center horizontally and vertically , click on the pole symbol to select it and closed the Align panel. Go to the properties panel and used the filters menu to add a drop shadow. If filters is collapsed, you may want to open it up like that, and we're going to click here to add a drop shadow. We're going to use Blur X a four Blur y all four strength of 100 quality We're gonna set to medium angle 45 distance for pixels and color black. Next, we're going to animate the symbol. Click on Frame 20 and press F six To add a key frame. Click on Frame 40 in Press F six. To add a key frame, go back to frame 20 and click on the pulse symbol. To select it, go to the transform panel and set the scale to 200%. Click on the pull symbol to select it. Enclose the transform panel, go to the properties panel and it just the drop shadow settings as follows. Blur X is going to be 30 and blur wise. Also 30. The strength is going to be 30 and the distance is going to be 40 right. Click anywhere between frames one and 20 and select create classic Tween right. Click anywhere between frames 20 and 40 and select. Create classic Tween Do a control test movie in enemy to test your swift. Awesome! You did it Wasn't that cool? And remember, you can always export this as a video to share with your friends. Awesome job. 44. I love you: All right, folks, in this lesson, we're gonna build this fun animation with the animated heart eyes Emoji. Now we're going to for our first time creating animate text symbols, we're gonna create invested animation that synchronized with the main timeline. And by that I mean those hearts inside the emoji that pulse at the end of that spinning. And I'm also going over a whole bunch of timeline tricks that are really important. We're gonna add frames and key frames to multiple layers, were gonna select frames and multiple layers and also move frames and multiple layers. All right, it's one thing to create an animation animate. But it's also another thing to know how to modify the timeline and shift things around once that animation is built and this lesson is full of that stuff, let's go. All right to start out, let's take a look at the finished file and I want to show you that in the main timeline we have a few classic Tweens, and as we scrub forward, you'll see that the letter I scales in then love and then you. So the first part of the sector size will be building this staggered animation with text symbols. And then our emoji is going to spin in. He's going to sort of over, rotate and then spin back and scale down, which is a pretty cool effect, and that's all we're going to see when scrubbing the main timeline. But I want to point out that when we export this swift that after the rotation happens, the eyes do pulse. All right, so we're going to do is a nested animation there of the eyes pulsing and set it up so that it's perfectly synchronized so that after that rotation happens, then the eyes pulse. Let me just close out that final swift. And I just want to show you that if I double click on the emoji that inside the Emojis timeline, we have the hearts pulsing up and coming back down. So this is going to be an awesome lesson to refresh a lot of the basics. We've been going over with classic Tweens, and you're gonna learn some new stuff about working with text drop shadow filters, and I'll show you some tricks how I get this really nice, clean three D look to the hearts and the emoji. All right, So let's head on over to the start file here. You'll see that we have a stage set up. There's only one frame here, and there's a bunch of hearts. Remember, clicking on the key frame is gonna select everything in that frame. And I want to explain that all of these things are instances of the heart glow symbol. It's actually one of the heart's that's used inside the emojis eyes. And what I've done is I've just set it up a different sizes in different alphas. Okay, so this is the same heart glow symbol with a different Alfa. Now, I don't wanna move these hearts around or mess them up or click on them by accident. So what I'm gonna do is just click on the dot under the lock in the timeline, and so I could no longer select them or move them. They're gonna be sort of off limits. So the first thing I want to do is animate the text. Now I can't put anything inside a locked layer, so I'm going to add a new layer on top of the background, and I'm gonna go over to my text tool and it remembers that the last text I created was at a size of 1 65 But I'm going to use the impact font because it's on Mac and PCs. And with the size of 1 65 I'm just gonna click anywhere on the stage and type in the letter capital. I I'm then going to click off of that text field, so that sort of makes it unedited ble. And then I'm going to click once more and write the word love all capitals. I'm gonna click off one more time and then click again, and I'm going to say you all right now, obviously, everything is sort of a mess. It's not lined up. So I'm gonna do is just sort of space the tax the way I want like this. And obviously that's not even. But check this out. I'm going to click on the I and holding down shift. I'm going to select all three of those elements. I'm gonna go to my align panel, which we've used a lot of times before. But instead of aligning to stage, I'm gonna make sure that is ah de selected. We're going to just line these to their centers Okay, So that aligns them all perfectly horizontally. And I'll just move the love over just a little bit so that we have equal spacing between those words. I'm going to draw a marquee to select all of them. Or what you could do is also click on the frame to select all of them. And I was gonna move them around where I think they look good. So using the arrow keys, I can move over one pixel at a time, Or I can hold down shift to move 10 pixels at a time. And I'm just going to basically I it out and put them right around here. Looks good to me. Maybe over just a touch to the right. Perfect. Now, in orderto animate, thes things, we need to do two things. First, we need to make sure that their symbols first, Okay, Right now they're just static text fields. They are not symbols in my library, so I'm gonna need to convert each one of these to assemble, so I'm just going to click on the I. I'm gonna hit f eight and we're gonna call it just capital. I hit. Okay. And I'm gonna go to love and hit Effie to convert it to a symbol. And we're gonna call it love. And I do want to point out that we're using movie clips and their registration points in the centre. I'm using movie clips here specifically because I'm gonna put a drop shadow filter on. And if you watched my movie clip versus graphic Siris in the previous chapter, you know that we cannot put filters on graphics. So let me just hit, OK? And I'm gonna do the same thing for you. Let's hit F eight to convert toe a symbol will name it you and hit OK, and then so now each one of thing. These is a symbol. So we have instance of I instance of love and instance of you. Now I'm going to again select all of them by holding down shift and clicking on each one and then in the Properties panel under filters. I'm just going to add in a drop shadow you'll see right away. It sort of just makes those letters pop a little bit. I really don't need toe mess around from the defaults very much at all. The Blur X and Y are set to four pixels. I just wanted something very subtle. And in fact, I might even bring the strength down to 50 to make it even more subtle. Okay, so you can play with those settings however you like, but I like that plenty right now. So all the symbols have the same filter setting on it. Now, we've also learned that in order to Adam eat something, it needs to be a symbol, and they also need to be on their own layers. So once again, I'm going to click and hold down, shift on all of them, and I'm going to right click in, Do distribute two layers. Before I do that. I just want to point out that all of them are on layer one. So let me do a distribute two layers and animate doesn't really cool thing down here. It puts them all in their own named layer, based on the name of the symbol. So we have I love and you and each layer has a key frame with that particular symbol inside of it. All right, so now it's time to animate these symbols, and we're gonna do something very similar to what we did in the surf gallery exercise where the images were all fading in and cross fading. So what we're going to do is this. I'm going to go after frame number five and click in the U layer and hold down and drag. Remember, that selects multiple frames and I'm going to hit F six to add key frames and frame number five. So now I have starting and ending key frames for all three layers that can frame number one . I'm going to select the I and I'm gonna go to the transform panel here, and I'm going to scale that character down uniformly to 20%. I want to make sure this little link here for constrain is closed, right? And then if I change the horizontal scale to 20% and hit return, it does the same for the vertical. So same thing for the love to go back to that transform panel, and we're going to constrain it by 20% all the way down and same thing for you transform panel and we're going to boom 20% hit return. So now they're all gonna start at exactly the same size, and they're all gonna be growing directly from their centers. I'm now gonna go to frame one click on frame one in the u layer and dragged down to get to select multiple frames. They're all highlighted in blue there. I'm going to right click in, Do create classic Tween And then now is I scrubbed forward. You'll see we have our animation. Now you're gonna notice that when I go to frame number to watch the hearts boom, they disappear All right. When I added these key frames in these three layers here, I never added new frames to the background layer and we're gonna fix that in a little bit. But first, what I'm going to do, he is. I don't want this animation to start until about frame number 10. So I'm going to take these different spans of Tweens and stagger them out on the timeline. I'm gonna take the 1st 1 here again. I'm going to with nothing selected here. I'm gonna click and hold and drag to select, and then I'm going to move this over to start at frame number 10 and then I'm going to take the next span. I'm going to click and drag and move it to start frame number 15 and I'm going to take the next group click, drag, hold and start them at frame number 20. So now we're gonna have I come in, then, love. And then you and you'll notice again that once the eye grows in, you'll see that boom and frame number 15. It disappears again. These are all those potential frames, all right? We didn't add frames to these other layers as we were moving, our frame spans around. So what I'm gonna do is Cruz all the way out to frame number 60 here, and I'm gonna click in the top layer and dragged down to select all those frames and hit F five. And what that's going to do is extend the time line all the way to frame number 60 and ed frames in all those layers. So now you'll see that the hearts don't disappear. As I scrubbed forward, the I comes in and then we have all these solid frames here in that layer, so that means it's going to stay visible. And again, this is stuff we went over all the way back in the early days of this course. All right, so now we have I love you, and I really do. All right, so it really on a roll here. But why don't you stand up, Stretch, get a coffee, do some jumping jacks. We got a few more minutes left where I'm going to show you how to build the emoji animation . All right, so come back in three seconds, all right? Good to have you back. Now we're gonna dio is get that emoji spinning around. So let me go over to my library. And here we have the heart eyes. Emoji. Now I have the play head in frame 30. If I click on this frame here in drag the heart eyes emoji onto the stage. You know what way? Back in the early days, it's gonna end up in frame one. I don't want to see it before all this stuff. I wanted to show up in frame 30 so I should have put a key frame their first. But we can also do this. If I click on that frame and release, I can then click again, hold down and drag it. So that's a nice little tip toe have. And then Now all I really want to do is use the align to stage tool, and I'm just going to align it horizontally. And I think I just wanna have it a little bit below. So I'm just going to shift down arrow one or two times. Pretty cool. All right. That's the spacing I want at full size. Now, we're gonna have this thing start small and animate into this size, if not a little bit bigger. So I'm gonna go to frame number 45 here, and I'm going to add my key frame by hitting F six. And now I'm going to go back to frame number 30. And using the free transform tool here would make sure that selected I'm gonna hold down shift and just shrink him down to about that big. All right? And if we want exact numbers, wouldn't go to the transform tool and see I did 23.8%. Okay, so just roughly around 20%. Now I'm going to right click and do create classic Tween, and we've done this 100 times. Now it scales up pretty cool. Now, I also want to add a little bit of rotation. And if you remember, rotation is a frame property. So I'm gonna click on the first frame of this Tween span, go to the properties panel, and I'm just going to say, rotate clockwise once, all right, And then we can see how that goes. All right? Pretty cool. And what I want to do is have him sort of scale up and rotate and sort of over rotating over scale and go back down a little bit smaller. So what I'm going to do here is go on out to say frame number 50. I'm gonna add another key frame and scaling down just a tad just a touch like this, Okay? And then I'm going to create a classic Tween between those frames. So now he comes out, sort of overshoots and goes back down. So let's test this out. And now you're going to see where really pretty cool. All right. Now, I also want to do a little bit of an over spin, okay? Just gonna add a nice little extra touch. You'll notice that when he shrinks down that he's not spending any more. Just sort of like a straight scale down. So I'm gonna close this off and then in frame number 45 I'm gonna use the free transform tool again and just rotate. I'm like this. So what that's going to do is have him do a full rotation and go a little bit further, okay? And then he's going to rotate back as it scales down. All right, so it's just a nice little subtle touch. So it's very playful over rotate to frame 45 then rotate back as he scales down. Okay, so we'll look at that one more time as a swift. And there you go. I love you. Very cool. Now, a few things I want to do here is I wanna have the eyes pop out once he goes back down to sort of his full size. Okay, so let's get rid of that. And to make the eyes or the hearts pop up, that's gonna be a nested animation. So let me double click to go inside of that symbol and you'll see that I've got quite a few layers down here. All right? I'm just gonna toggle their visibility so we can see exactly what they are. So starting up top, we have one of the hearts for the eyes, so you'll see that the right eyes in that layer. Then we have the left eye. So we also have a mouth layer, and then we have a face glow layer. All right, what is that thing? Well, it's really just a circle that has some filters on it, overlapping the yellow background there. So let me just click on that. Go to the properties panel and tell you that it has its Alfa set toe 40 over here, and if we scroll down just a little bit, you'll see that there's a little bit of a glow filter on there. And what else do we have? A drop shadow and also a blur. And let me just check to see if there are any blend modes. Yes, there's a blend mode of ad. Okay, so all of those different filters and settings just give us sort of this little glare thing that's going to add that three dimensional effect to it. So let me just undo a bit, so I put it back exactly where it waas okay, so that just gives that circle some depth, and when we turn it off you, then have another yellow circle or shape down here that has a Grady int inside of it. All right, so those are all of our layers turned off and we can turn them back on and rebuild. So what we're gonna do is animate the hearts inside of this symbol. So without looking on the main timeline, as far as figuring out the timing of when this heart animation should start, let's just go to frame number 10 and I'm gonna click and drag to create key frames in both of the heart layers. I'm going to hit F six to put those key frames there. I'm gonna go to frame number 20 click and drag down toe. Add key frames there. Now, this is going to be one of our pulsing animations. So we're going to start at normal size, get bigger and go back down to normal size. All right, we've done this a few times before, so I'm actually gonna have three sets of key frames gonna click and drag to select those frames that we're going to be animating between. All right, So we're going to start in this frame, get big and 20 and go back down to normal in 25. Now you'll notice that Oh, what happened? Well, that thing that happens all the time I've added frames to the top two layers, but not the bottom two layers. So for now, I'm just gonna go out to frame 25. Click on this frame in this layer, dragged down to highlight. And remember, F five is going to add frames and all those layers. So the trick now is to go to frame number 20. I'm gonna select both of these eyes here, and I'm just going to scale them up, holding down shift. All right? We'll make him a little bit bigger and that looks pretty cool. And then we're just going to add our animation. So click and drag to select both those frames right click create classic Tween. And then we're going to do the ending animation where they get smaller, create classic Tween, and there we go. So they're both going to come up and then go back down Pretty cool. So now what we're gonna dio is let's export are swift and see what happens. So command return. You don't really see the eyes going up because it's sort of happening while the faces spinning and scaling. So I kind of want to make sure that we only see the hearts pulsing after the face has spawned and grown and shrunk back to normal. So that we're gonna do that, is this. I'm gonna go back to see number one, and you're going to see that. All right, this thing is scaling up and then scaling back down to frame 50. So we don't want this animation to start of the eyes until we're done rotating, scaling and going back down. Now the emoji doesn't show up until frame. What's that? 30? And then it animates through the frame 50. So basically, I need tohave 20 frames of dead space inside off this symbol. So let me just double click on here. And so I don't want this animation to start until sometime after a frame number 20. So I'm going to click, hold and drag all the way across in both layers to select all of those frames and with them selected now, I'm going to click and drag so that the starting key frame is maybe just a frame or two past frame number 20. Now again, we're in the situation where these frames and these two layers extend past the bottom three . So what we're gonna do is this. I'm gonna go all the way out to frame number 60 actually in just add frames all the way to here. So five to add frames and all those layers. So basically, what's gonna happen is this heart growing animation is going to play, and then there's gonna be some dead time before this symbol might repeat. Let's go back to see number one and then now let's do a command return to test the swift out. And there we go now. Oops. What's happening? There's actually not enough time to see the full animation of those heart eyes growing. Why's that? Because after frame number 50 10 frames later, the main timeline is ending here. So I need a little bit more time in this movie, so I'm gonna go all the way out to frame toe numbers 90 at three seconds and just click drag down and hit F five. So now the next time I test, there's plenty of time for the hearts to pulse and then the whole thing will loop once that pulsing is done. All right, so this was pretty complicated, but it's all stuff we've done before. We're just adding it altogether. Obviously, creating the text symbols is new. But all the animation stuff we've done in one shape or another, hopefully you're learning that a big part of working inanimate is this sort of timeline manipulation of selecting frames, moving them, moving spans, adding frames to the timeline. And again, that stuff all goes back to the beginning. Lessons that we've been doing throughout this entire course. So hopefully by now, none of this is really too new to you on your starting to see how putting these basic concepts together can work to make more complex and fun stuff. All right, happy tweeting. I'm gonna come up next with the step by step instructions for you. 45. I love you follow along: All right, folks. Time for you to build it. You're gonna create text symbols, animate each one, get the emoji spending and get its eyes to pulse. Now, there's a lot of steps in this exercise, and I know you can do it, but I'm gonna recommend you do it in two parts. All right, sit down, get the text built and animated, celebrate and then come back and work on the emoji. All right. It's a great way to approach it. Everything's in this video, though. All in one place. Do awesome. All right, so here in anime, I have I love you start opened up and I have the background already built for you. It's a locked layer that has a number of hearts at different sizes with different opacity. Ease. If you'd like to explore that layer, just unlock it and you can click on the symbols and you'll see that there movie clips, instance of heart glow. All right. And in the library we have those heart glow symbols, as explained in the lecture. I'm just gonna lock this layer again, said I don't click on the heart, select them or move them. So the first part of this exercise is going to be adding new symbols. Since the background layer is locked, we're going to first step one, go to the timeline panel and click on the new layer button to create a new layer. Then I'm going to select the text tool and click anywhere on stage to create a new text field. I'm gonna go to the properties panel and make sure that the text type is set to static text . The family we're going to use is impact. The size of the text is going to be 165 points, and the color is going to be white in the empty text field. On the stage type on Lee the letter I upper case, as in I Love you. Click outside the text field to de select it. Click again to create a new text field. Type the word love all caps inside that text field. Click anywhere outside that text field to de select it. Click again to create a new text field and typing. You all uppercase click outside the text field to de select it. So for this next part of the exercise, we need to align the text and put it where it should be centered on the stage. But I really don't know where you clicked to put each one of your different words, so it could be difficult to give you exact instructions. So what I'm gonna do is just give you the coordinates of each of the words. Switch over to the selection tool, click on the I and give it an X value of 62. I'm gonna hit Tab to go to the UAE field and give it a Y of 50 and hit return. Click on the word love and give it in X of 1 41 and give it a Y of 50 and then click on the you and give it an ex of 480 Hit tab and give it a Y of 50 and hit return. So now when you use those coordinates everything I look nice for you to next we're gonna convert the text fields to symbols and distribute them to layers using the selection tool. Click on the letter I go to modify, convert to symbol, give it the name I type movie clip, registration centre and hit OK click on the word love Go to modify, convert to symbol and give it the name love and hit OK, click on the word you go to modify Convert to symbol Name it you click OK, next Do edit select All right Click on any of the words and choose Distribute two layers Notice that you now have I love and you layers Awesome! We're now ready to animate. All right, so what we're gonna do is a staggered animation Pretty somewhat what we did in the surf gallery lesson. So I'm gonna go out to frame number five and I'm going to click in the U layer. Hold down and drag until the I layer hit F six. To add key frames, drag the play head back to frame number one. Click on the I go over to the transform panel, make sure the X and Y access are constrained or linked and set the horizontal scale too. 20 and hit Return. Click on love. Go to the transform panel, scale the width down to 20%. Click on the you go to the transform panel and scale the with to 20%. Click anywhere offstage to de select the words click on Frame one of the U layer and dragged down to select the first frame in all three layers and release the mouse right click on any frame and select. Create classic Tween. Click somewhere in the timeline to de select the selected frames. Go to the I layer, click and hold down in frame one and drag to select all the frames and release the mouse. Click on the selected frame span in drag it until the first frame is at frame. Number 10. Go to the love layer, click on frame one. Hold down and dragged to select the frame span and release. Click on the frame span in drag so that the first frame is in frame. 15. Go to the U layer. Click on the first frame. Hold down, select and drag all the frames and release. Click on the selected frame span in drag so that the first frame is on frame. 20. Grab the play head and scrub through your animation. Pretty cool, staggered animation. Now the issue is that the heart's disappear because we don't have frames in that layer. Go out to frame number 90 clicking the top layer hold the mouse while dragging down to select frame 90 in all five layers and release hit F five to add frames, Scrub back to frame one and scrub through your animation. The hearts no longer disappear. All right, folks. Now it's time to animate that emoji in your F l A file. You should have a top layer with a blank key frame at the beginning here. Okay, your layer might be named layer one or layer two. I made a few edits along the way, so either way, just double click on that top layer and name it emoji and hit return. We're now going to go out to frame number 30 and click on Frame 30 in the emoji layer and hit F seven. To add a new blank key frame, go to the library panel and drag the heart Eyes emoji onto the stage. Go to the Align panel, make sure allying two stages selected and click on the button for a line horizontal center . We're gonna go to the Properties panel and set the why position to 405 pixels and hit return. Awesome. Now, to build our animation out, we're gonna add a few key frames. Click on frame number 45 in the emoji layer and hit F six. To add a new key frame, Click on frame 50 of the emoji layer and hit F six to add another key frame. This sets up our basic pulse where we're going to start small, get large and then get small again. Go to frame number 30. Click on the Emoji. Open the Transform panel in set the scale to 10%. Go to frame number 50 Click on the emoji and using the Transform panel, set the scale to 70%. Right click between frames 30 and 45 select. Create classic Tween right click between frames 45 50 and select. Create classic Tween scrub through the animation and you'll see that the emoji scales up and then just goes back down a little bit. Pretty cool. To add the rotation to the emoji, click on Frame 30 and in the Properties panel select. Rotate clockwise one time hit, return or enter to preview the animation. Pretty cool. Let's grow back to where that animation is, and you'll see that at frame number 45. You know he's now fully rotated. To add an over rotation, click on the emoji, go to the transform panel and set the rotate value toe 1 40 Now scrub through the animation and you'll see that he sort of over rotates and then rotates back as it shrinks down. Awesome. Next, we're going to create the pulsing heart eyes. After the emoji scales down, go to the library and double click on the heart eyes. Emoji symbol to go into symbol. Edit mode. Go to frame 60 inside of the heart eyes emoji symbol and click on frame 60 in the top. Layer hold and dragged down to select frame 60 in all layers. Press F five to add frames to frame 60 in all layers, click on frame 20 in the top layer hold and dragged down to select frame 20 in both the top layers. Hit F six To add key frames to both layers. Click on frame 30 in the top layer and dragged down to the second layer and release to select frames and both layers hit F six To add key frames to both layers. Click on frame 35 in the top layer hold and dragged down to the second layer and release to select frames and both layers hit F six to add key frames to both layers. Go back to frame 30. Click on the left. I hold down, shift and click on the right eye. Go to the free transform panel and scale both eyes to 1 50 Click on frame 20 in the top layer and dragged down to the second layer and release to select both key frames. Right. Click on one of the selected key frames and select Create classic Tween click on frame 30 in the top layer. Hold dragged down to the second layer and release to select both key frames. Right. Click on one of the selected key frames and choose create classic Tween scrub through the animation to see both hearts. Pulse. Do a control test movie in Enemy, and now you'll see those hard eyes pulse and the animation is awesome. Now, if you got to this point, I am so happy with you. I know there was a lot in this lesson. There was a lot of steps, but hopefully you see that it's a bunch of doing the same things kind of over and over again, and I know it can be tricky sometimes selecting multiple frames, moving them around and all that jazz. But it's a sort of practice. It's gonna make you really good in your day to day life. So if you get through all these steps and you made this animation, I'm so proud of you and have awesome day. 46. Shape tweens: in this exercise, I'm gonna show you how to create a shape Tween We're gonna morph one shape into another I'll make the rectangle morph into a star and I'll show you how to use shape ends. Let's go. All right. So let me just give you a few examples of how to use a shape Tween I have my brush tool selected, and what I'm going to do is just draw a line like that. I'm gonna go to frame number 20 here and hit F seven to add a blank key frame. And I'm now going to draw a line that looks like this. Okay, so in frame one, we have that line in frame 20. We have that brush stroke, I should say, and I'm gonna just right click and do create shape Tween. And this is a time where we're going to create a Tween but not use symbols because we were using shapes. So now check out what happens, animates smoothly, morphs between those two shapes, all right, And you could do some other interesting things. I don't know. Maybe this is like a mouth to a weird face so I could draw some eyes here like this. That's in frame one and in frame two I could do are put him over here like this. And I don't know why you never draw anything like this, but I just want you to see how enemy can intelligently match up paths in the start shape and the end shape, and you get some pretty good results. Now, if the end shape is wildly different than the start shape and it has a lot more, uh, pieces to it, if you will in different places, maybe has hair here. All right. I don't know what this thing is, but you'll see that some very interesting things happen in between, but it does get you from point A to point B. All right, so there I was just using some brush strokes. Um, I'm gonna go back to frame number one. And if I select everything and delete it, I'll have a blank key frame here and a broken Tween. That's okay. I'm going to now start drawing some, you know, regular shapes, like a rectangle hoping to do what? No stroke for now. Put one rectangle in the center of my stage roughly and then in the last key frame. I'm going to put another bigger rectangle here and maybe two over there. All right, so now I go from one rectangle to three. All right, so that's pretty cool. Maybe i'll go to four. All right, so we're morphing one or square rectangle into five. If I get rid of the middle one in the end frame, what does that do? You get this, you know, pretty cool stuff. And what you can do also is you can change colors so that one doesn't have to be blue. It could be that color. This one could be something like that. This one here could be green. And then now each box is changing color, as we're doing a shape Tween, and these don't have to be squares. You know, this could be something that looks weird like this, and I could don't know. Bend that in and bend this and tweak that out. And I don't know, there's something like that. And again, we'll go from one square toe, four different shapes of different colors. Now, obviously, you should probably take more time to do this and do something a little bit more artistic. But I just want to show you the basic mechanics of doing a shape between one of the things I like doing or showing people is Ah, let me go back to frame one and delete that square. I'm going to just use my brush tool and let me just crank up the size. I could've just used the oval, but I'm gonna dio one that's a horrible color. Let's just go to something a little bit darker. We'll go to that blue one, 23 four circles. Right. And I'm going to go to the last key frame here and again you'll see the same thing sort of happen. But in the last key frame, I'm gonna do a control A to select all and get rid of it. And I'm gonna take my text tool out, and I'm gonna type my name C A r l. And as we learned in a previous lesson, if I break apart that text once we get individual edit herbal text fields and if I break it apart again, command be we're going to get individual shapes of all of those characters. So I'm just going to take the sea moving over here the A around here, you know, in whoops Force to do this toe look nice. I would like, you know, use onion skinning or have everything over laid nicely. But here, I just want to show you that each circle can now morph into its own character. All right? So again, I'm doing this in, like, 10 seconds. But you can make animations like this look really nice. So once you have your shape Tween in place, you can literally change anything in the first frame or the end frame. I could take this, you know, circle and move it over here. This one down there, I don't know. I could make them all different colors or just one of them. Different colors will make that when it's elected. That nice color in this one here, Will dio don't know something like that and then you get something like this. Alright, Pretty cool. Now there are times, or maybe you're gonna work with more symmetrical shapes. Or maybe you want to have a little bit more control over the morphing. I'm gonna go to this file here and let me just do a fit in window and I have in frame one a square and then frame 20 a star. So I'm gonna walk you through morphing this square into the star, and then I'm gonna give use, follow along directions for it, okay? And so I have the key frame set up, but I'm gonna right click and do create shape Tween. And you're going to see that? Yes. The square does morph in to the star, but there's a little bit of rotation going around, like there's some weird points being added here that make it look. I don't know, Not as symmetrical as I like right there. Almost. Looks like there's a little bit of rotation going on. All right, Why is the top corner moving down here in some of these points moving over to the left? Okay, so the solution for this is a shape hint. All right, so I'm gonna select the shape in frame one and go to modify shape, add shape, hint. All right, Now what I'm gonna get is this little red a here. Okay, so we have a red circle with the letter A in it, and what I can do is take that a and move it somewhere on my shape. I want to point out that for the best behavior here, you should have your snapping turned on. Okay, so that's off. And that means that I can sort of leave this point anywhere, and there's no natural snapping. But with that little magnet turned on will naturally boom snap to that shape. So I have a red A in the first frame and then frame 20. What I can do is take the red A and say, Where do I want the point? A. In the starting shape to be in the ending shape. So naturally I would like it to be the top of this star here. And when I do that, you get slightly better results. You get a very symmetrical morph on the left, but on the right, there's still like these weird kind of kings here. All right, so that's not really the best solution right now. But let's go ahead and add some more shape hints. I'm gonna go to modify shape, add shape, hint, and now I have sapient be, And maybe I take that to the top right corner in the start shape and then in the end shape , maybe I want it to be this point on the star. So now I have the right shape being very symmetrical and nice. And now the left side is getting a little bit wonky. All right? So I could go all the way around the shape, adding new points I could do Maybe one mawr do modify shape at shape. Hint. And maybe if I take point C and put it here and then go to frame 20 and take point C and put it there, I'll get what I want. And there I have it. Ah, bingo. That looks pretty good. So it's a little bit of a guessing game, but I'm gonna show you how you can fix this with just one shape hand. But for now, we've learned that we can tell animate where points in the start shape should be in the end shape. And when they're perfectly snapped in the start shape, they turn yellow and in the end shape, they're gonna turn green. So what I want to do is show you that we can remove hints If I'm in the end shape and right , click on a hint, remove hint and remove all hints is great out. All right. I need to go to the start shape and then select the shape and that I want In order to remove it, I'm gonna do a remove all hints. Then they go away, and I'm back to the sort of kronke, uh, morph that I had originally. Well, now what I'm going to do is go back to frame one. Gonna select the shape only or to modify shape, add shape, hint. And I'm gonna take the A and put it on the right corner in the start frame and in the end frame, I'm gonna put it right here. Notice that it turned green when it snapped. And now just one shape hint does the trick, maybe like Carl. How did you know that? Well, I played around it for a very long time, all right? So, typically, I would have just kept adding shape. Hence until look nice. But somewhere in my exploration, I realize that just adding that one did the trick. So in the future, you may be as lucky. Now, there are times that your shape hints are going to disappear. All right? Right now, the only thing I have in my file is a star and frame 20 and this square and frame one. But let's just say I had another layer and I had something else over here totally unrelated . All right, Well, as soon as I, you know, select this thing here or drew it, my shape hints went away. Okay, if I select this shape, the shape hence don't show up, all right? And then you may be freaking out like weird. My shape ends. Go Well, here's what you do. You still like the shape and go to view show shape hence, and then they show up. So next I'll have an exercise of you morphing this square into the star and setting the shape. Hint. It's gonna be really quick, but I really encourage you to open up a blank F l a and mess around with shape Tweens. All right. Draw some squiggly lines and frame one toe other lines in the frame 20 and try to make your own fun little morphs. All right. See, in the next video 47. Shape tween follow along: All right, folks, this is gonna be the quickest follow along in the Siri's. So we're gonna be working in shape Tweens on their score start dot fl a Go to frame one. See that you have a rectangle go to frame 20 and see that you have a star. Next, right. Click anywhere between frames one and 20 and select. Create shape Tween scrubbed through your animation To see how the square morphs into the star. Go back to frame one click on the square to make short selected and go to modify shape, add shape it. Make sure snap to objects is selected in the toolbar and then move the A to the top right hand corner of the square. Go to frame 20 and move the red A to the point farthest to the right. It will turn green, one snapped. Go back to frame one and then scrub through to see a perfectly symmetrical more from the square to the star. All right, You've done your first shape Tween with a shape hint. Congratulations 48. Chicken meets bomb: everybody. What's up? I'm super excited about this lesson. This is the one I've been wanting to teach you since I started the course. All right, we're gonna drop a bomb on a chicken and make it explode. Okay, With super cool about this exercise is that it just reinforces all the stuff we've been going over since day one. Key frames, blankie, frames, symbols, nested animations. Nothing's really all that hard. All right. You're gonna be like, Oh, you know what? I could probably this on my own by now. And that's really how I want you to feel. The only thing when introduced New is going to be sound. And that's super simple. So let's get cracking. All right. So to start out, what I want to do is just walk you through the finished file. So you have an idea of what it is we're gonna be building. So here in chicken meats, bomb finished. I'm gonna scrub forward. You see, we have this chicken hanging out here, and then we get the frame 20. This bomb is going to start dropping from the top, all right? And after it hits, the ground is gonna rotate Just a little bit towards the chicken. He's going to stand there kind of dumbfounded for a little bit, and then he's going to boom, look down. You see his eyes point down and then what's gonna happen is the explosions going to start? All right, so we have three symbols that are exploding. It's actually the same symbol three times. And then we're going to swap in a chicken with no feathers, and he's going to have his eyes sort of pulse. All right, so we're gonna be just setting up RFL a toe look exactly like this. If you look at it, it's really not too complicated. There's really only one classic Tween on the main timeline, but we're gonna be going over a lot of the basics that we've been doing all throughout this course with creating key frames, blankie frames and doing some nested animations. The most important thing about this finished files, really, to understand some of the symbols will be using so over my library. You'll see we have the bomb symbol here, so it's going to double click on that, and this is a multi frame symbol with a nested animation, and it just has a few different frames of the flames, animating just three different states. Okay, so as it's dropping, these flames are gonna be sputtering out of the top. We have the chicken and he's awesome looking and he's got two frames. So the first frame is his eyes looking forward and then frame to is where he looks down. So he's gonna be a graphic symbol. And we're just going to toggle between frame one and two to get his eyes to change direction. We have chicken, no feathers, which is the same. Expect chicken, but he's got no feathers. That sort of the after the explosion chicken, we have explosion animation. And so here we have a symbol that has a few different frames in it of different states of the explosion happening. And I just created this symbol with the paint brush tool. I literally just made some orange and yellow circles, and in each frame, I had them spread out and shrink a little bit, and they disappear on the last frame. So we're gonna be using multiple instances of that symbol in this animation. We have a sound file here, so I'll show you. Whoa, a little bit how to work with sound. And then we have the ground, which is where the chicken is standing. All right, I'm just gonna jump over to my start file so that we can start building this project. First thing I want to do is make sure I have my chicken layer selected. And I'm going to take the chicken symbol out of the library and drag it onto the stage. And I'm just gonna put him right about there. Looks cool. All right, Now he's gonna hang out for a little bit just standing there before the bomb comes down. So I'm just gonna scrub out a few frames and notice as I'm scrubbing that his eyes go really crazy. So let me just play this animation and you'll see that That's kind of insane. So what we want to do here is, since he is a graphic symbol with two frames, I'm gonna go to click on him on frame one. They're going to go to the properties panel, and instead of having his options set toe loop as we know, a graphic can dio we're going to say, Hey, play a single frame frame number one And so now he's not looping between his eyes going a little bit weird. Okay, Next, let's animate the bomb. So in the bomb layer, I'm gonna go out to frame 20 and click, and I'm going to hit F six to add my key frame there to put the bomb here in this frame. I'm gonna go to the library. I'm gonna take the bomb out and was gonna put over here real quick. Now I'm gonna put on the ground, actually, is that you can see what's gonna happen now, once the bomb hits the ground, it's going to rotate a little bit to the right. Okay, Now, if I wrote, take just a little bit, that's okay. But watch what happens if I rotate a lot. Notice that the bomb actually comes off the ground, all right? And that's because the transformation point is sitting right here, all right? It could actually rotate all the way up in the air. But what I want to do is make sure that the transformation point is right over that registration point right there. Okay? Orm or in the center of the actual bomb. So watch what happens now when I rotate, it stays on the ground. I can rotate a full 360 degrees. Okay, So before I do any animation, I want to put that transformation point where it needs to be. Because if I change that in different key frames, it's going to make the bomb actually jump in its position, and it looks all weird. So just trust me that we want the transformation point right visually in the center of the bomb. Okay, I should say, the circular body of the bomb. So with that being done, I'm going to move the bomb off stage right about here. Just was a little bit left of the chicken in frame 30. I'm gonna go out, and I'm going to click on frame 30 f six to add a key frame. And I want to make sure I pull that bomb straight down without moving it at all. And it's kind of going off its guides. So the best thing to do is to hold down, shift and pull straight down just until the bomb is right about here and then in frame number 35 after its landed, I'm gonna add another key frame and I'm now going to rotate it over like this. OK, so it starts up top, it's gonna come down and then rotate. And how do we make that happen? Simple right click create classic Tween and right click create classic Tween. So now let's just play this animation from the beginning And there we go. So the bomb falls down like a brick. Let me stop this. Whoa! Go back to the beginning. And now we have the bomb falling down and then rotating forwards. Next, we're gonna make this bomb explode. All right, so now the bomb isn't gonna actually explode. We're just gonna put the explosion graphics on top of the bomb. Now, I don't want to have it happen. As soon as the bomb drops, I want there to be a little bit of a dramatic pause before the thing actually blows up. So over here and frame number 60 I'm gonna go to the explosion layer and click on frame 60 and I'm going to hit F six to add my key frame, which again is going to be blank. And then I'm going to take out the explosion animation symbol, and I'm just gonna put it sort of where it would be on top of the bomb. Now, if I scrubbed forward, you'll see that's a pretty small explosion. All right, so that's a graphic symbol on. I'm just scrubbing through its frames on the main timeline. But what I want to do is make that a bit bigger. So I'm just gonna select it, and I'm gonna go to the Transform panel and make it 700%. It's normal size and then just centered over the bomb. So now it's going to be a boom, big, huge explosion. And let me just do an export of that swift. Let's just check it out, all right? So you'll notice that that explosion is doing what? It's looping. All right, so I don't want that toe happen. So let me just select it, and I'm going to go to the Properties panel and say We're going to play once, and I wanna have a few different versions of this explosion so that it really covers everything up. So I'm going to option drag or old drag on the PC and make another copy. This one here, I'm gonna set to about 300 I'm gonna option drag another one, and I'm going to make this one. Let's just say 100% its size so I can hit this reset scale button to bring it down to 100. And so now there's just gonna be a whole bunch of stuff going on, all right? And it's gonna happen so quick that you're not going to know that it's three copies of the steam explosion, but it's just gonna fill up the frame nicely. All right, here we go. So the whole thing sort of blows up. Now, the trouble is that the bomb is still here and the chicken still here, So boom. All right. What we want to do is make sure that when the explosions start, I don't want to see the bomb anymore. Now, this is something is gonna little bit tricky, because now that the explosions here, I can't really select the bomb. Well, actually, I did select it, but you'll see that I have selected it in frame 35. So if I delete it, we know not to do that. That's gonna break the Tween and give me a blank key frame and frame 35 So let me just undo that real quick. And the solution here is to put a blank key frame in the bomb layer as soon as the explosions show up. So in this frame right here underneath the explosion, I'm gonna f 72 at a new blank key frame. So now, as soon as those explosions start, the bomb is going to disappear and be nowhere to be seen. So next will defect there. The chicken. All right, So a few frames after the bomb explodes, we're gonna want to show our d feathered version of the chicken. So I just want to show you something, and that's in the library. I have chicken, no feathers. And when I drag him out onto the stage, I want to show you that he's pretty much drawn exactly the same size as the feathered version. Except for his body's a little bit smaller because it doesn't have all those feathers. Now, the trick here is that we want Excuse me, the de feather chicken to be in the same exact place as the one with feathers so I could position and where I want and then delete the normal one. But I'm gonna show you a cool little trick. So let me just get rid of him. I'm gonna go to frame number 65 in the chicken layer. I want to make sure that I'm adding a new key frame. All right, so it's gonna click down here and hit F six to add a new key frame, which means again that I can mess everything up in frame 65 without affecting all these previous frames. Now, what I'm gonna do is instead of trying to manually lineup the chicken, no feathers with this one. I'm going to, right click on the chicken and I'm going to select swap symbol. And then I get this window. That shows me any symbol that I want to swap. I'm gonna select chicken, no feathers. I get this cool preview and hit. OK. And then now the no further chicken shows up right there. And if I scrub back, you'll see that between no feathers and feathers, there's no jump. All right. Keep an eye on the eyes and the legs. You'll see. The only thing that's really happening is the yellow feathers air going away and you're left with a pink de feathered chicken. All right. Pretty cool. So me export this swift and boom there you have your chicken with no feathers. It's pretty awesome. And I think this is going to loop around one more time. Boom! There we go. So to make this even cooler next, what we're going to dio is add that explosion sound all right? So we want to do is add the explosion sound assume is those explosion graphics start playing? So that's gonna be after the bomb falls. And then right around here is the first frame of the explosions. You'll notice that I have a separate layer for sound here, so I'm just going to add a key frame there because we're gonna do is literally attach the sound to that key frame. So I'm gonna f seven to add a blank key frame there. And let's go to file import import to library and inside my unfortunate Chicken folder, I have explosion dot mp three, which I'll be giving to you as well in the source files. Let me just hit open and then you'll see in my library that explosion dot mp three shows up here and I can preview it. Hold your ears. All right. What an awesome explosion. So now what I'm going to do is go to the properties panel and with this frame selected, you'll see there is a sound category, and what I'm going to do is click on this menu and it shows me all the audio files that are in my library. So I'm gonna assign the explosion MP three sound to that frame. Now, there are different options here for effects as far as like, feeding things in and out, panning them what you can experiment with on your own. There's also sink where there's four different options for event start, stop in stream. I'm not gonna go over all the differences, but right now I'm just gonna select stream because it allows me to actually hear the sound when I scrub through in my f l A. And that could be important for synchronizing for more information on all of those different options. There's an adobe help article. Ah, that explains event start, stop and stream and maybe a whole other video where I explain that for like 15 minutes. But now isn't the time. It's a great resource and I'll give you the link for that in the lesson. So let's just jump back to animate. And now we should hear that sound when the play head gets exactly on frame 60. All right, so let me go ahead and test my swift file. Isn't that also it adds so much? I could say we're done right now, but what I want to do is move forward and just add some very subtle Bunches. First thing I want to do is we're gonna have the bird look down. Is the beat or two after the bomb actually dropped is gonna look at it on. Then when he explodes, we're gonna have his eyes pulse. All right, so we're just gonna be adding very, very subtle changes that air going toe. Just add a little bit more life and realism to this silly animation. So first things first, let's go back to a little bit after the bomb drops so it comes down and then it rotates over and he's still just standing there, sort of dumbfounded. What I'm going to do is in frame 40 in the chicken layer. I'm going to click in at a new key frame by hitting F six, of course. And in this frame here, I'm going to click on the bird and I can use the frame picker to choose frame to remember. He has two frames. It might be a little bit hard to see. Let me zoom in a little bit. All right, so in frame to his eyes, air just looking down. Someone close the frame picker. So now just a beat after the bomb rotates over, Watch what happens. Boom! He looks down. Then he's going a few seconds of looking at this bomb, not really knowing what it is. And then Boehm is going to explode in his face now in these frames, while the explosion sound is still going off and he's just staring sort of blankly into space. We're going to do a little pulsing animation of his eyes, so that's going to be pretty easy. Let me just double click on him to edit Tim. We'll go into symbol edit mode for chicken, no feathers, and I'm just gonna go out to frame 20 say, click and drag down to select frame 20 in both frames and hit F five to extend that symbols . Timeline I have a separate layer for the eyes here. So in frame 10 it's gonna be a very slow pulse. I'm just gonna click. And I had a key frame there, and I just want to make the eyes bigger. So let me just zoom in a little bit, all right? I'm doing command. Plus, to do that. Or of course, you could use the zoo menu up here and let me just select this one. I here and I'm just gonna Iet Out, uh, sorry. Make these things a little bit bigger. All right, so then in frame, one small eyes frame 10 big eyes and you get the idea. Let's go back to seeing number one and let's go back to, let's say, fit in window. Let me test this out and look for the bird looking down. There it is. And then you have this not pulse happening. What happened? He looks down. That's cool. I'm not seeing the pulsing animation here. Well, there's a reason for that. I was a little silly in this frame here where we have chicken, no feathers. Let's go to the properties panel, all right? And you'll see he's set to play a single frame. So let's which that over to loop. And then now the next time my test using command, return or control, enter on the PC, watch what happens. He looks down, and then we get that totally dumbfounded eyes bugging out. All right. I think it's pretty funny and cool. Awesome. So, look, you dropped a bomb on a chicken and you made it explode. So hopefully you had a lot of fun doing that. Well, you haven't done it yet. So I'm gonna do is give you the follow along exercise, and you can do it for yourself. But hopefully now you can see that makings two or three second animation like this with a bird and a bomb in an explosion isn't that hard. We're just redoing all the things we did back in lessons 12 and three. Working with key frames, some classic Tweens and most importantly, understanding how nested symbols work. So I'm gonna get you guys the instructions for the following lesson, and you can do it yourself happy on a meeting 49. Chicken meets bomb follow along: are folks here we have the chicken meats, bomb follow along instructions. All right. This is gonna be awesome and fun. There's a lot of steps, but take it one section at a time. Don't rush. When you're done with this, you will have accomplished so much, and I'll be so proud of you. So let's get to it. All right, so here I have chicken meats. Bomb underscore. Start opened up, and now we're going to create the bomb animation. Step one, click on frame 20 in the bomb layer and press F six to add a new key frame, go to the library panel and dragged the bomb symbol to the stage with the bomb selected. Go to the properties panel and set the X value to 3 10 and the Y value to negative 75. If you can't see the bomb for any reason, you can zoom out using the magnification menu for me. Zooming into 50% works fine. Using the free transform tool, click on the bomb and move the transformation point to be right above the registration point. All right, we want to get this white dot right above the crosshairs. There All right, just right in the center, so that when you rotate, it looks like it's moving around the actual center of that circle. There. Click on frame 30 in the bomb layer and press F six to add a key frame. With the bomb selected, go to the properties panel and set the bombs. Why value to 4 90? Click on frame 35 in the bomb layer in press F six. To add a new key frame, click on the bomb and use the free transform panel to rotate it 45 degrees. Right click between frames 20 and 30 in the bomb layer and select. Create classic Tween right click between frames 30 and 35 the bomb layer and select. Create classic Tween scrub through the new Tweens to see the bomb drop in. Rotate. Awesome job. All right. Now it's time to blow stuff up. Click on frame 60 in the explosion layer and press F six to add a key frame, go to the library panel and drag the explosion animation symbol to the stage on top of the bomb. Go to the transform panel and set the scale to 700% and center as you like, drag another explosion symbol onto the stage and place it on the chicken's body. Use the transform panel to scale it to 300% and, lastly, drag one more explosion symbol to the stage and put it on the chickens face hit, return or enter to watch the explosions. Pretty cool To prevent the animations from looping, hold down shift and click on each instance of the explosion. Animation. Go to the properties panel and under looping select play once. Now, scrub back through the timeline until you get to frame 60 again. Where is that boom right there? And if we scrub forward, you'll see the animations only play once perfect to remove the bomb, click on frame 60 in the bomb layer and press F seven to add a blank key frame. Click on frame of 65 in the chicken layer in press F six to add a new key frame. Right click on the chicken symbol and select swap symbol. Select chicken no feathers and hit OK, do a control test movie in Enemy and let's see how awesome this animation is. I love it. Next, we're going to add some sound all right. So go to file import import to library. You navigate to your chicken meats bomb folder, select explosion dot mp three and click open. Go to the library panel and noticed the explosion dot mp three file is sitting in the library. You can press the little play button. Wow. To hear it, click on frames 60 in the sound layer and press F seven to add a blank key frame with frame 60 selected. Go to the properties panel and use the sound name. Drop down menu to select explosion dot mp three and make sure sink is set to stream. Do a control test movie in enemy to hear the explosion. Ah, again, How awesome is that? Next. We're going to add facial expressions to the chicken. All right, so now we're gonna make his eyes looked down once the bomb tilt over, So click on frame 40 in the chicken layer and press F six to add a new key frame, click on the chicken and then go to the Properties panel and click on use frame picker. Click on frame to and then close the frame picker. The chicken is now looking down at the bomb. Go out to frame number 65 double click on chicken. No feathers to go into symbol Edit mode. Click on frame 20 In the eyes layer, Hold the mouse button down in drag down to frame 20 in layer one to select frame 20 in both layers. Press F five to add frames to both layers. Click on frame 10 in the eyes layer impressed F six To add a new key frame, Use the transform tool to make the eyes bigger. I'm gonna zoom into about, I don't know, 100%. I'm gonna select this I and actually will zoom in one more time, command. Plus. And I'm just going to wait until I get that little angle. Where are you? You're such a pain. Go over here. Let me zoom in one more time. Command plus or control. Plus on the PC. There we go. It was gonna hold down shift, and we're gonna make these eyes bigger. All right. We're just going to I it out. Uh, all right. Tonight you see has small eyes and big eyes. Click on scene one to go back to seeing one. Go to the properties panel and under looping set options to loop do a control test movie Inanimate on what happens? Looks down. Boom! And then we get the surprised eyes. You did so much. This is awesome. Jump up and down and scream about how thrilled you are. All right, I hope you're thrilled. And I hope you had a ton of fun making this animation awesome. 50. Motion guide: All right, folks, in this exercise, I'm gonna teach you how to use motion guides. That means that we can take any symbol and have it follow any path that we draw. Check it out. All right, we're gonna start off simple. And here I have f l A opened up. I have an arrow layer down here, and it has 30 frames for me to mess around with blankie frame on frame one until I take the arrow out of the library and put it to the left of the stage. Now, what I want to do is create a path for this arrow to follow. So I'm gonna go to the arrow layer, right click on it in select add classic motion guide. And when I do that, you'll see that the arrow layer gets a little bit indented here, and it's under a guide layer that has this different icon of these dots in this little box or circle down here. I think it's a square. And now what that means is that I condone draw a path in the guide layer that the arrow will follow. So I'm going to use the pencil tool to draw a path or a stroke, I should say I'm going to start drawing anywhere and do something like this, All right? And so I have kind of, Ah, weird little line here. I may still decide to select it all and just smooth it out a little bit. All right, get rid of some of the kinks, if you will. In order for the arrow to follow the path, I need to first have a Tween in place. So in the arrow layer, I'm gonna go to frame number 30 and hit F six to add a new key frame. And I'm going to Then I don't know, I could drag the arrow somewhere over here, and I'm going to say right click, create classic Tween. So now you have sort of what you expect of the arrow just going across the stage. It's sort of not paying any attention whatsoever to that stroke that I drew. Well, the reason for that is that we have to literally snapped the arrow onto the stroke in the start and end key frames. So the way we do that is you'll notice that when I'm dragging this arrow here, that little black circle shows up in the center. And as I'm dragging around, I wanted to snap to that stroke. And when I release, you'll see that it kind of jumps to the stroke kind of somewhere close. But what I'm going to do is this. I'm gonna turn on this little magnet here for snap to objects. And when I do that, then as I'm dragging its going to snap and that snapping works a little bit better. So in the first key frame, I'm gonna drag the arrow over here and in the last key frame. I'm going to drag the arrow over here. And now when I scrub through this Tween notice what happens, you'll see that the arrow follows that path. Now it's always pointing to the right. If I want the arrow to actually point in the direction that it's going following that path , I'm gonna click on the first frame in the arrow layer, go to the properties panel and the properties for that frame. I'm going to select Orient to Path, and when I do that now, you'll see that the arrow actually faces in the direction of the path. It's gonna get a little bit screwy over here. Maybe a little bit. And at the end, since in this key frame I had it pointing directly to the right, I need to also sort of have it manually face the way I want to go. So when you use the transform tool and I'm just going to rotate it a little bit in the direction that I want it to be and so maybe I'm gonna bring it right to the end, something like this. So here we go. We have the arrow now perfectly following that path. Now, once the path is drawn, I can modify it so I can just sort of bend it around, do funny stuff like this. And now you'll see that the arrow still follows that path. If, after I created the path, I realized, it's not the path that I want it all, I can select the entire thing and get rid of it. And then now my Tween is going to be like that because there's no path whatsoever. So maybe I'll take my pencil tool again and draw a path like this. To some degree, we can do intersecting paths, enemies pretty smart. But again, I've drawn the path. I still need to do my snapping in the first frame and the last frame. So in the first frame, I'm gonna take the arrow and drag it, and it's gonna boom, just sort of lock into that path there where that little circle is. And then in the last frame, I'm gonna do the same thing. I'm not only gonna snap it to the path, but I'm gonna manually force it to face in the direction of the path. And now check it out. That's playing backwards. And now we have it playing forwards. Now, there is a point in time where your path may get so complex that animate really isn't going to know what to do. But actually Wow, I'm pretty surprised it Ah, figured that out. Um, who I thought that's gonna blow it up pretty cool. I do want to show you that if I do a control test movie or if I export a video or a gift, whatever is in the guide layer does not show up in the final movie. Now, one thing you're gonna notice is that it's kind of running a bit erratically, right? It's not too smooth. Well, that's because this path that I drew is really quite long. If you imagine it as a piece of string that I would stretch out in a straight line, it be, like, probably three times the length of the stage. So what I would suggest in this case with a long path is I'm just gonna hit F five and that's going to add layer frames and both layers, if you will, all the way out to frame 60. So that gives the animation more time to play. So there we go. We smooth it out a little bit. So the more frames we have, the more time we have to see the arrow going from point A to point B. And if you want to see the path in the final export its with gift for video or even if you're doing this in HTML five and the Web page, you can select your path and you can just do a command sea air control, see to copy it and you can add a new layer. And in this case, I'm gonna put it underneath the arrow, and I'm gonna select that first frame in command shift the or control shift V on the PC is going to put that path in the bottom layer. So if I turn those two off, you'll see the bottom layer has a path in it. And then if I do a command return to export, then you can actually see the path in your final animation. Cool. All right, so now do basically the same thing, but with a cool butterfly. So let me go to my library, and I want to make sure I have the butterfly layer selected, and we take the butterfly out. Just put him over here somewhere. Wow. He's pretty big. That's okay. Um, what I want to show you that school is that if I double click on the butterfly symbol, he actually has a nested animation of his wings flapping. Alright. Pretty nice. So I'm gonna go to scene one. And since I believe he is a movie clip, that means that when I test this movie out, let's just do this. Um, you're gonna have a butterfly whose wings are always flapping, which is pretty nice. So we're gonna put the butterfly over here, and I'm gonna decide that I want him to animate across the stage. So I'm going to right click on the butterfly layer and select Ed Classic Motion Guide In that motion guide layer, I'm gonna click to make sure I've clicked on that key frame there. I'm gonna select my pencil tool, and I like to have the pencil tool set to smooth. Okay, that's gonna give you probably the best results. And I'm just going to have a little curly Q sort of thing like that. All right, so there's my motion guide and I'm going to now go out to frame 60. And we're going to hit F six to add a key frame, of course. And I'm going to put the butterfly where I want him to land. So I'm gonna take the transform tool spinning around a little bit. But most importantly, I think I want to grab him. And as I'm grabbing him, notice how his registration point turned into that black circle there. Let's just put him on the path right around here and using the transform tool I can would do what? Let's rotate this dude around. So he's paced facing the way he should. And on the first frame. I'm also going to have to do the same thing. It doesn't matter if you do that. The last frame or first frame in what order? But when you're dragging it, you do want to make sure you're not using the free transform tool. So I'm gonna use the selection tool. And again, when I'm dragging, I get that black little circle that's almost impossible to see. And I'm gonna use the free transform tool now, too. Face him the right way. And once that set up, I can do create classic Tween And now the butterfly is going to follow that path around and it looks awesome. Okay, not too shabby. One thing I can do is in the last frame. I can take the butterfly and I'm gonna hold down, shift and just scale it down. So it's gonna happen now is as it's flying. It's going to be shrinking to make it look like maybe it's flying a little bit lower than the camera and you just get a nice, cool effect there. Alright, Looks kind of like a real butterfly. What do you know? All right, folks. So crack open the follow along video and instructions. I really want to do this exercise for yourself. You're not gonna learn unless you do it. Hands on. All right. As a little bonus, I'm gonna give you this ladybug exercise file. Um, it's finished. I just wanted to explore it if you want, but it's pretty cool. It's got a ladybug following a path. And what I like about this is that it's got a bunch of filters on it to give you that highlight and shadow, and, uh, it looks pretty cool. All right, so enjoy. 51. Motion guide follow along: Alrighty. Here you go. The step by step instructions for making the butterfly Follow Emotion Guide Let's go with the selection tool activated. Go to the bottom of the tools panel and make sure snap to objects is enabled. Right now, it's turned off, and now it is on when it has that darker background. Right click on the butterfly layer in select Add classic motion guide. Click on the pencil tool and set the stroke color to red at the bottom of the tools panel. Set pencil mode to smooth click on frame one in the new guide butterfly layer to select it and ensure that we are drawing in the proper frame. Start to the left of the stage and draw a basic hill shape going over to the right. If you need to smooth out your curve, use the selection tool to select the full curve by double clicking on it and then the tools panel. You can hit the smooth modifier button. Very nice. If your stroke is too thick or too thin with its selected, you can go to the properties panel and adjust the stroke height. I'm fine with two. Use the selection tool to move the butterfly to the stroke and get that little black circle to snap to the stroke. Use the free transform tool to rotate the butterfly so that it's facing in the direction that the stroke is going. Click on frame 60 in the butterfly layer and press F six To add a new key frame, Switch back to the selection tool and move the butterfly to the end of the stroke. If necessary. Use the free transform tool to rotate the butterfly so that he's facing the direction of the stroke. Right Click between frame one and 60 in the butterfly layer in select, create classic Tween hit return or enter to watch the butterfly Move along the path. Awesome. If the butterfly isn't facing the direction of the path, click on frame one. Go to the properties panel and make sure Orient to Path is selected. That's going to make sure that the butterfly always faces in the direction that you drew the path. Awesome. You've created your first animation along a motion guide 52. Closing video: Hey, class, Thank you so much for watching. I really hope you learn something from this course, and it makes you want to just go out and create things with Animate CC. If you'd like to. Seymour animate CC training from me here on skill share. Please let me know. Leave a review below post something in the community section or post one of your projects. It makes me so happy when I see what my students have made. It makes something cool and posted on social media. Just be sure to tag snorkel TV. All right, I just recently, one of my students posted this animation, and it may be simple, but it made me so happy to see that they took their own artwork and made something really cool, all right? And it just showed me that they actually learned something from this course. So reach out on social media, tag me and, uh, hopefully see in the next course. And if you want to stay up to date on the latest animation news and updates on snorkel dot TV tutorials and courses from my newsletter, I send one out once or twice. Someone with just a little bit of animation news and some stuff to get you inspired. It's a great way to connect with me and the animation community happy and a meeting.