- [Instructor] This movie will be boring, it will be long, and it will be really important. I don't want you to skip it. So basically, if you're a user of the former versions of this program, when it was called Flash, you might be wondering if you can watch this course. The short answer is yes. You simply make changes where appropriate. They made small adjustments throughout this entire span of history, but there's no reason why a Flash 8 veteran from Macromedia 2005 can't use this course. So, let's move on.
Here is the very old version of the interface and if I just toggle ahead a few years, you can see it's pretty much the same. The Properties panel is now vertical, not horizontal. And now we have the latest version of the program, very, very similar. And it's even more similar when I correct the scaling of the icons. So if you have an interface or a program that looks like this, let me help you fix it because it's a little too bloated. So if you're using a Windows computer and you're on Windows 7, and I think Windows 8 will be quite similar to this, you open the Control Panel and in Appearance and Personalization, you select the Display option where you find Make text and other items larger or smaller.
And there you can adjust the interface as you need. You might have a monitor that's a 4K monitor and it looks too small. In which case, you just make it bigger. And here's the options for doing it on Windows 10 with the URL at the bottom from the Adobe website. If you have some kind of problem years in the future that I can't anticipate, believe me, always check with Google because there could be some problem that you might not even know there's a solution to. So when you open the Animate software for the first time, you may see something like this. It might not be exactly like this, but they come with default setups that usually aren't the best, so let's fix it.
First things first, I will open a new project and just accept that default for now, click OK. So we have to arrange some things first. You might see a grid, you might not, so the grid option is achieved by right-clicking here and showing grid. I love the grid, so let's show the grid, right-click and go Edit Grid. And actually, let me wait until later. We'll ignore that for now. So let's fix this workspace. We'll go Workspaces, Classic.
My clicking here will get rid of that little flyout. By clicking here, we've moved to something that's a little more familiar. So I'm going to grab the toolbar and just slide to the right. And if you don't see the toolbar, it's under Windows, Tools, here we go. So, that's one thing corrected. Now the Properties panel has all these settings that we don't need. It just cultures the interface. So let's collapse SWF history. These are things we never need during the course of a production, so I don't know why they're choked down our throat, so let's make them go away.
On the next thing I want to do is to have easier access to the various windows. And I absolutely despise this method because I think it's just utterly cluttered and flaky, so I'm going to pull these off of that and close the ones we don't need. I don't need Info. I like Align and Transform. I use them fairly often, so I'm going to grab them by the tab and drag them here until I see the blue outline, and then release. The same thing with Transform. I also want to have the Library in here, and here's the Library.
And if you can't see that there, then you can also find it here. So we'll tear that off, tear off Motion Presets, if you see that. Anything you think you don't need, we can get rid of it. The Library will be dragged to here and docked. And I like the Library in this position. Properties, Library, Align, and Transform. We have this CC Libraries that I never use, so I'm going to tear that off as well and kiss it goodbye. Now, very important that we have easy access to these two panels. And honestly, that tool there was not easy access for me anyway, so I'm going to drag the Color down to the bottom until I see that blue line.
If you see the blue, horizontal line, it's ready to release. And Swatches should travel with Color, so now we have this and this. Very nice. If you feel that this is eating up room, then double-click that dark area here to collapse and you can add more tabs here from any other windows that you think you might need but these are pretty much the core that we'll be using now. So this default color is a crime against the human eye, so let's bring in a nicer one that I built earlier. So click on this little icon here with the lines and go Replace Colors.
And in the Exercise Files folder, 01_01_setup, you'll find a palette, so we click on that. Now it looks a bit weird at first, but you can see exactly what it is if we stretch it out, the window, a little further, and they line up. And now when you click here, very, very nice. So this gives you an easier way of choosing colors. Let's make it the default again by clicking here and go Save as Default. Click Yes. And if you want the old horror back, then you can click Web216 or you can Load Default to go back to my better palette.
So now that we have a nicer palette, I can fine-tune this grid. So right-click on the stage and go Grid, Edit Grid, and we can pick one of the nice subtle grays, and this one is really pretty. So we'll save that as our default. Now, any future grids will look like this. Now that we have the workspace, I think this workspace is pretty decent, so let's save it. Under Windows, Workspaces, New Workspace. We'll save this as animation_H.
I'm calling it H because the timeline is horizontal. Later on in this course, we'll be needing a vertical timeline, so I'm just going to drag that and rearrange this and I'm going to save this also as Workspaces, New Workspace, animation_V. And now I can go from one to the other. Also, this means that sometimes I've done a project where the timeline disappeared and a bunch of panels get messed up, so I can just go Workspaces, Reset, animation_H, and we reset.
So if you ever mess up your interface, you have that option. Now we should fix some things in the Preferences, so go Edit, Preferences. Be sure you go to Object-level Undo. Switch Yes. What this means is that every symbol that you create now has its own dedicated history and it makes it much easier, if you make mistakes, to correct them because instead of threading all of your history through multiple symbols, they're now discreet. And give yourself 200 levels if you have the memory for it, and you should.
Now, if you prefer the old interface, you can make Light. We're going to stick with Dark for this. And under Drawing, I think the Contact-Sensitive Selection for the Lasso tool is too sensitive, you end up selecting the wrong things more often than the thing you want, so I will switch that off. You may prefer the other way, fine, but that's the way I'll be using it. One more thing, under View, Snapping, Edit Snapping, make sure that all the snaps are deselected and saved as default. It drives me crazy when I see artists working on character scenes that have Snap Align on, and they have these ridiculous horizontal and vertical lines popping on and off the screen.
The only time you'll ever really need snapping for most of your work will be snapping to objects, which you can access through this cool, little magnet down here. Now one problem that you're going to hit when you work with this program as a default is that one of the things that you're going to need will be the ability to move from keyframe to keyframe to keyframe. Basically, a tool that works as a keyframe jumper. So I'm going to make a point here and hit F5 and I'm just going to randomly put down F7 to make some empty keyframes. Now, what I can do is if I use the shortcuts for the comma and period, I can go back and forth along the timeline.
That's the symbol above them or the mathematical symbols for less than and greater than. So that's great, but the problem is sometimes I just want to jump here from here to here. So let's see how we will implement that feature because it requires us to install a little extension. So if you go into the Exercise Files folder, you will see a folder called flash CC next key. So if we go into this folder, and I called it flash because I've used this program since 1999, so I can't help myself. I don't care what they call it.
In my head, it's Flash. So, what we have here are a bunch of extensions. Now these are from some wizard who you can find on this page here on the Adobe website and he has created this wonderful script that will jump to the next keyframe or back to the previous keyframe. I have made these commands and I'll show you why these are also going to be wonderful. So select these. Click and copy or drag into your Commands folder. Now the Commands folder can be found in different places in different operating systems, so I can't give you the location for every computer.
Again, Google is your friend on this because they all vary from version to version, on Mac to PC, but ultimately, you're looking for a folder path of en_US, inside that, a folder called Configuration. Inside that, a folder called Commands. And then it's as simple as dragging and dropping. And here's the beautiful thing. Now, I don't even have to restart the program, and here they are. So let's start on frame one and trigger this command, Select Next Keyframe. And look what happened. Wonderful. What about those commands that I made? If I select a frame here and go Commands, tween motion -80, then I just made motion tween with a minus 80 ease in.
So this is going to make life much easier, much less time will be spent going over to the Properties panel once we set up the shortcuts, so bear with me. This is something that will be a little time on the front end. It's going to save us hours on the backend. So we'll go Edit, Keyboard Shortcuts. Now one thing we can't do is edit the Default Set. We have to make our own, so click on this, and we will make our own. We'll just call it animation. And we're going to call it animation_01 because sometimes you might want to make a variant.
So hit Save. Now we can mess with this. And it's pretty easy. We hit the Commands' twirler, and here are our commands. So, Select the Next Keyframe on This Layer and then select the Add button. Now the keys, if you remember the keys to go forward by one frame and back one frame are the comma and period key. And if you put your ring finger and your middle finger on those, your index finger will naturally move to the top row to the semicolon and the quotation mark keys, just to the left of the Enter key.
These are the ones that work nicest for me. You may have a different preference, but these are the ones I'm going to choose and implement throughout the rest of this course. So, Select the Next Keyframe on This Layer and I'm going to tap the key I want, which is the quotation key. And then the next one, Add, and I'm going to hit the semicolon/colon key. So, colon/semicolon goes to the previous keyframe and the quotation mark, and I think I see apostrophe key, that goes forward one keyframe. Click OK, and now we test it.
That will save you so much time, you won't believe. Now, one other thing. Edit, Keyboard Shortcuts, Commands, all of these are some of the most tedious things you can do in the program because you're constantly setting motion tweens of this kind, with that kind, and it's tedious to do it through the dropdowns. So, what I'm going to do is map these onto the numeric keypad. The beauty of the numeric keypad is that if you're familiar with customizing keyboard shortcuts in Flash, they're a horror show.
They involve you using the Control and the Alt and the Shift keys. It's like doing magic tricks. The beauty of the numeric keypad is that most of the keys on that pad can trigger a shortcut with one single press. Now, if you don't have a numeric keypad, you should get one, one of the small ones that you plug in if you have a small keyboard. But if you have a normal keyboard that has a numeric keypad, here's what we're going to do. So the keys four, five, and six will control the motion tweens. So we're going to go to this one, the zero key, and that will be number five.
I'm going to go to minus 80 and add this one, and that will be four. Plus 80 will be six. So what this means is if you look at the keyboard, the middle key will be a tween with no ease in. The one to the left, number four will be easing in, and the one to the right will be, number six will be easing out. We repeat the pattern with the shape tweens on the lower row. So this will be two, this will be one, and this will be three.
And that becomes a muscle memory very quickly. Now, tween off is also very useful, so I'm going to make that key number eight. So now, watch this. This is so great. I can just add different key, and if you look over here, you'll see ease in, ease out. Watch what's happening, with the touch of one key, I can make a shape tween. It is so easy to do. So there's this one other thing that was wearing me down animating in this program was constantly having to mess around typing in numbers over here.
Now it's automatic. Why did I choose 80? Because I think 80 is one of the nicer tweens in this setting. It's not very subtle. If you want the subtle tweens, then you have to use this graph here, but this will see you through a vast number of your tweening needs. So that's it. That's the program setup. We have the interface set the way we like. We have all our shortcuts taken care of. We have our nice color palette. It's been a long movie. I appreciate you sitting through it. So now that we have this under our belt, we are ready to work.
- Assembling a scene
- Setting up a project
- Importing a reference
- Creating and cleaning up a background
- Animating an action scene
- Adding camera moves
- Animating a human
- Setting up a character
- Importing and editing audio
- Importing audio and exporting a scene