Lesson 1: Learn Adobe Animate/Flash - Basics of Animate

[Music] hey guys it's wrong way here and coming at you with another tutorial and today we are looking at Adobe animate and you may recognize it as Adobe Flash that's what was formerly known as but Adobe anomie fantastic piece of software great for making animations and games and Interactive's you name it so today we're gonna focus on tweens which I'll explain in a second it's one of the ways that Adobe animate makes our lives easier when we are animating so we're gonna make a new document it's going to be an ActionScript 3 file and when that comes up you'll see that we've got our blank stage and I'm just going to fill the screen with my stage and just up here where it says a hundred percent I'm gonna put fit in window now I've got it nicely filled so that I can see all the you know what I want to do here basically in flash slash animate sometimes I'm gonna say flash because you'll see flash is still repeated in here a lot but when I say flash I mean animate it's hard to lose that after so many years anyways we're gonna look at tweens we're gonna look at things we can do with tweens and how we can animate things within animate and I'm going to start with a very simple demonstration here of I guess a traditional way of animating I'm just gonna set my little layout here to small screen and the way I do that is in the top right I'm gonna go small screen and that'll reset there we go what I'm gonna do is using the brush tool okay so you got your brush tool here and I change it to black and down here we've got different things like brush size and shape of the brush and actually that's okay for now and then what I'm going to do is I'm going to draw a very simple character in this case it'll probably be a stickman or similar to a stickman I'm gonna go with the smaller brush and you'll see that animate tries to help below it it smooths out your lines after because it is a vector-based program oh yeah oh yeah check it out so making a very simple drawing here of a character it's pretty tough to draw with the mouse normally I have my Cintiq my Wacom that today I'm drawing with the mouse and I'm just gonna draw this guy it's very random his eyes are way too big they're like popping out of his head okay draw some arms on this guy dude this is so bad I apologize and almost there lips okay here we go we've got a pretty simple character drawn here and the next step once you have an actual drawing of something obviously you want to be able to fill it in and there's a multitude of ways of doing this but probably the easiest and the one that most people are familiar with from other programs is the paint bucket tool it's right here and the paint bucket tool in this program works a little different than other programs still very similar in the fact that I just pick a color and click to fill in okay that still works the same but it allows us other options and those other options I think are pretty powerful down here one of these options are the closed gap option okay so if you are an artist who leaves a lot of open lines meaning you know you don't close your shapes so let's just use the eraser here and I'll show you what I mean let's say I left I left that open right there that's pretty common when you're drawing some people have a style and they leave little open spots well it should if I tell it to close large gaps it should be smart enough to know that this is still an object and it'll close that gap there for me automatically okay so that's what that option does and I feel that that's pretty useful I'm just gonna fill them all in now just so you know for those of you out there who know illustrator usually what I'll do for my animations is all draw all my objects with illustrator and then bring them into animate after I just find it so much easier we do have the pen tool option here for drawing as well it all depends on what you're familiar with anyways now we've got a character that we could potentially animate and turn into something so what I'm going to do is I'm going to show you how to move the character across the screen okay we could do this the old I call this the old school traditional way first of all what we need to do is select our character and you'll notice in animate that he becomes filled with these little dots that means he selected and we're going to convert him to a symbol and symbols are very important in animate it's kind of the way that it handles animated objects so we're gonna make sure this is set to a graphic and I'm gonna put the registration dot in the center I don't even call this dude and okay now you'll see that he becomes one object that we can move every time we click it he's one object and he's a symbol if I want to go and edit him at any point I can double click him and then I can go back in you'll see now I'm in the editor mode which you can tell by the top left I'm editing dude and then let's say I want to change a shirt color for example you know I decide halfway through my video well to be purplish indigo whatever okay that's how I can do that I can go back out into our scene and now I can move them around now traditionally if I was talking about you know the way they used to do animation the easiest way to animate okay if we look at our timeline down here all of these little blocks are the frames of our animation okay so if you could imagine each frame is a slide of the movements that are going to happen in our animation and it's telling us down here right down here that it takes 24 of these frames for one second of of animation so if we wanted it to take him one second to move across this stage the old way of doing it would be to go in here and put in a keyframe keyframes very important that that's basically telling animate that something's going to happen with this character so we're going to insert a keyframe and then I would maybe move him a little bit and then I would go insert keyframe once again now I'm on the next frame and move him a little bit and you could see that as this continues he would move across the stage but this is a real painful painful way of doing it okay so here's an easy way and like I said animate has a lot of little tricks that make life easier instead we'll go straight to frame 24 where we want him to end up and we'll put a keyframe there oh by the way I'm just right-clicking the frame for that to come up or control clicking on the Mac insert keyframe and now on that keyframe we'll just move them to where we want him to end up which is over here and so he starts there he ends there and in between there's nothing happening right now this is where we need to add what's called a tween and a tween is just short for in-between and so if I control click anywhere in between those two keyframes if I right click anywhere in between I'm going to create a classic tween the classic tween means that basically he's just going to move from spot to another and it doesn't look realistic obviously his legs don't move or anything like that because we haven't built that in but as you can tell it's a heck of a lot easier than doing the frame by frame that we would have had to have done traditionally okay so that is a simple classic tween all right most basic I would say of tweens that you're going to use let's look at another one okay I'm gonna just start a frame over here for the next one next let's say we want an object to turn into another object this is kind of cool sometimes it works good sometimes it doesn't so I'm going to go to my primitive shapes and I'm going to choose the oval tool and I'm gonna just make a circle all right so there's a circle and you can see that it is you know just an object right now it's not a symbol and we don't want it to be a symbol in this case I'm gonna just go to let's say frame 48 should be right there and I'm going to insert a blank keyframe this time so I have nothing on that frame but at 25 I've got the circle on 48 I'm going to put a rectangle and I'm gonna change its color to maybe go red and I'll make a rectangle just like that so frame 25 circle frame 48 rectangle slash almost a square in between I'm going to create a shape tween and what a shape tween will allow us to do is change from one object to another so you could do this with anything all right anything you draw can be even text you can change from one shape to another that's called a shape tween all right so let's look at classic tween shape tween and now we're gonna get one more type of tween this one's interesting because there's a lot you can do with it so once again I'm going to insert a blank keyframe this time I'm going to draw a ball okay and let's make it Orange okay so there's my ball mmm maybe I should put some lines on it just so I can show you something a little later on with this ball whoops no fill color I'll just put two lines on it I know it doesn't really look like any specific type of ball but this will help us see what it's doing later and then what I'm gonna do is I'm gonna take this ball and I'm gonna convert it to a symbol and I'm gonna just call it ball excuse me okay there we go so we have this ball it is now a symbol it has two lines on it let's say we want this ball to follow a non linear non straight path with our classic tween back here it is just a straight path from one keyframe to another let's say you want this ball to bounce and we want it to you know follow a path that is not straight here's the easiest way to do it first of all let's decide how long that bounds going to take I'm going to go up to 72 insert keyframe all right so we've got this ball on the stage for that long going back to the first keyframe I'm going to take the pencil tool okay pencil tool and I'm going to draw the path that I want it to take so I'm drawing this path of the ball bouncing like that okay that's the path I want it to take so now that I've drawn that I can double-click this line to select all of it okay so this line now become selected and I'm going to cut this path out of this spring so we don't want it there anymore we're gonna go edit cut and it disappears okay in between or tween I'm going to ctrl click and I'm gonna create a motion tween this time and you'll notice that it creates a motion layer alright and then what we're gonna do is we will edit paste in place and now we paste it our pencil into there and the ball is following the path of that pencil shape okay now don't worry about it actually showing up it won't show up okay but the ball now follows that nonlinear lining that we have created in this type of tween so that's the point of a motion path okay and they are very powerful there's lots you can do with that and so there's this sort of the the basics of it now let's say we want this ball to look a little more authentic we want it to look like it's actually on that line better what we can do is we can select our motion path go to properties and we can tell the ball to orient to the path okay so that was under properties orient to path and now watch what happens with the lines on the ball you'll see that it actually kind rolls along that line rather than just going straight up and down it's a little more realistic yeah a little more believable and it looks pretty good actually okay so those are three tweens that you're going to come across inside animate and in future tutorials we're going to look at how we can actually use those tweens to make some complicated animations so stay tuned for that next episode thanks for watching

Channel: DIGICANMEDIA

Views: 15,318

Keywords: Adobe Animate, Adobe Flash, Adobe Flash Player, Animation, 2D, Tutorial, James Rogowy, Tweens, Keyframes, Drawing, Sturgeon Heights, Digital Technology, Creative Cloud

Id: 3A_ZT-OH7gI

Length: 17min 56sec (1076 seconds)

Published: Wed Dec 21 2016