Adobe Animate CC: Lab 1 - Bouncing Ball

hello everyone today we're gonna create a bouncing ball it's gonna be a really basic and simple bouncing ball it's just gonna go up and down one time that's it or start at the up position fall down make contact with the ground line and bounce back up that's it so we're gonna have this set at 30 frames at 24 frames per second and we're gonna create this document at 1280 by 720 your standard 16 by 9 aspect ratio so let's go ahead and do that first and just go ahead and open up Adobe animate in actionscript 3.0 1280 by 720 and from here I'm going to go ahead and just Center this and I'm going to zoom out one time so the first thing I'm going to do is I'm going to create a ground line and I'm gonna use my line tool I'm gonna set the stroke to let's just say 5 or 10 or whatever you feel comfortable with and I'm just making it thick enough to be able to see clearly and where I can really easily be able to tell that it's making contact with the ground so I'm gonna bring this just a little bit lower so the first thing I'm going to do is I'm going to rename this layer ground line and I'm going to lock it because I don't want to do anything else to it the next thing I'm gonna do is I'm going to create a new layer and I'm gonna call this ball and I'm gonna start by creating this ball using my oval tool and I'm going to hold shift and I'm going to change the color they can be whatever color you want and I'm going to make it blue you have this blue ball bounce so from here what I'm gonna do is I'm just going to scroll right up holding spacebar on my keyboard on Windows I can easily toggle my hand on and off on a Macintosh I believe you have to use the keyboard shortcut H so I'm just going to go ahead and drag this up above off my screen because this is where I want the starting position to be I want it to fall off stage onto the stage and back up one time that's it so the thing I'm going to do first is I'm gonna give myself 30 frames I'm gonna just click 30 frame right click insert frame and we'll do the same thing on this layer right click insert frame now from frame 1 to 30 I have my frames so when I play this back both of them will play for 30 frames now the next thing I have to do is I need to convert this circle into a symbol so I'm just going to go ahead I can click right on my layer it'll highlight the layer and I can right click and do convert to symbol and from here I'm gonna make sure my type is a graphic and then in here what I'm gonna do is I'm going to name it ball I'll just go ahead and click OK and I should have my ball receive this blue outline sort of selection box and you'll notice in your library that you have your little ball and image of it a preview of it if you will locate it directly down here because any symbols they create on your stage will essentially be transferred to your library as well so you can always grab and drop duplicates of them very easily now the next thing I want to do after I convert this to a symbol I've named it I made sure it was a graphic symbol and I have it on its own layer what I'm going to do is I'm going to select on this layer I'm going to right click and I'm going to press create motion tween now from here I can easily just have this anime so you'll notice when I create the motion tween let me do it one more time right-click create motion tween you cannot do that unless you convert it to cymbal and if you do try to do something like that let's just say I'd want my ground line to become a symbol don't follow along for this just watch I tried it without converting it to a simple first it's gonna pop up this warning pop-up and it's gonna say the selected item cannot be tween you must convert it to a symbol in order for its between do you want to convert it and create a tween if you click OK it's going to give it some generic name you're not gonna be able to change any of the settings so by default whatever type of symbol you have it on like whether it be a graphic a movie clip or button you wouldn't be able to select that easily so it's always best to actually convert it first just an FYI so now I'm gonna go ahead and lock this layer and I'm gonna go back to my ball air just to show you because it turned light blue again that would be right click I'll just go ahead and remove motion tween really quickly that's right click create motion tween so what I'm gonna do is I'm going to bring this down to frame 15 so on frame 1 I have it starting off stage and on frame 15 I'm gonna go ahead and erase holding shift I wanted to bounce straight down so I'm gonna have it come straight down that's it so from frame 1 to 15 we have a ball that goes from point A to B the next thing I want to do is I want to take that ball and bring it back up to my starting position I'm gonna go ahead and just drag that right up so now I'm frame 1 it falls down and then from frame 15 to 30 it goes back up so now I've created this bouncing ball now the other thing I want to do is I want to get a little bit more complicated as far as on the animator side to start sort of showing you some of these really important principles of animation so right now we just kind of have this motion graphic that just kind of goes from point A to point B back to point a now we wanted to sort of bring it to life by adding some animation to it some more animation and what we're going to be doing is we're going to add a squash and stretch now the squash and stretch is a really really important principle in animation you see it all the time and we'll watch some discussion video and I will point out specific areas where the squash and stretch is really exaggerated so in this case I'm gonna really really exaggerate it and what I'm gonna do is the first thing I want to do if I try to just start doing a squash and stretch I want you to just follow along really quickly if I go to frames before hand I select my free transform tool and select this and I'm using my free transform tool because I can modify the scale now what happens is if I play this back it starts at its starting position goes to the stretch but then it stays at that stretch and I don't like that because I wanted to remain that perfect circle of my starting position here so I'm going to undo that a couple times and now I'm back to this point and what I'm gonna do is this is a really really really important concept so try to try your best to remember it write it down I'm going to do what is called insert keyframe all so what just happened was when we first animated this we only told it to key the position at these points and what happened when we did this scale is that these points these little diamonds here never actually changed and keyframed the scale it only keyframed the position so that's all you see here if I double-click on here you'll see that I only have location now I'm gonna double click on here so if that ever happens to you it's just because you double clicked just double click again and that is known as the graphing editor basically so from this point what I want to do is I want to insert keyframe off so I click here I'm going to click once on the little diamond right click and I'm gonna do insert keyframe all and I'm gonna do that one more time here on the return bounce at the starting position right-click on the very last diamond insert keyframe oh and now what I can do is let's just say two frames beforehand I'm gonna give it a little stretch so when it falls it actually gets some exaggeration that the gravity is sort of pulling that ball down and then when it makes contact it just goes back to its standard shape but on the return I'm going to do this one more time I'm gonna go ahead and do a squash and stretch so it goes down bounces this is try to picture this is like a really rubbery ball kind of thing and then when it bounces back up it starts to get that shape to return back to its original shape whereas before I did that you did not see that happening so it retained that same scale but now that we told it to key it at the scale now I'm gonna go ahead and double click here so you'll see skew scale and I've got all these extra little things in there because I ran an insert keyframe all it has my location transform rotation skew and scale and if I go ahead and just double click on here insert keyframe all you'll see position scale skew rotation color filter if it's applied to this but in this case we won't even worry about it right now so now I've got this ball bouncing up and down now the last thing I want to do is on this ball using my free transform tool I'm gonna go ahead and just do a full squash and stretch all your really exaggerated with this and I want to just sort of reposition this down so when it comes down I got this really neat little bounce back womp-womp and one more quick little note is that actually if you want you can click on one of these little diamonds once just highlight it and then go ahead and click and drag it and I'll do the same thing here and you'll see when I play this back I get a little bit a reaction on it and it's not exactly the greatest because I I should probably bring these back a little bit closer because that's how I sort of originally animated it and maybe I want to bring it just one frame it only just yeah I don't even want to do that I think though I think it's fine the way it looks but just to give you an idea you can slide these around so let's just say I wanted to click highlight all of these and slide these over here so now it falls slower but bounces more quickly so you can do stuff like that all in all this is exactly what I'm looking for for this particular lab it falls from point a it does a stretch to a squash back to a stretch and returns back here so if you have any questions go ahead and shoot me a message and I hope you enjoyed this lab

Channel: Henrik Host-Madsen

Views: 119,191

Keywords:

Id: 8CBvgBARve0

Length: 12min 12sec (732 seconds)

Published: Wed Aug 31 2016