Java GUI Lesson 9 | Animation With Frames

Hey, this is Maads 101. My name is Jake, and as promised in this tutorial, I'm going to be showing you, um, a relatively easy way to animate with some frames in Java. So, I'm just going to show you these, uh, frames, and, um, here's the frames I imported them in the last tutorial. It's just, um, 15 frames of this little creature eating a cheeseburger. I did not make these frames; just to give credit where credit's due, they're made by a different Maads 101, and that's the guy who makes all our flash tutorials. He made them for me. Uh, I told him I was going to be making a tutorial on animating in Java, and so I asked him for some frames, and he gave me some frames.

So, uh, yeah. The first thing we're going to do here is, um, we'll make a timer. Private timer, and I'll call it animator. What a timer does is you give it a number and then an action listener, and the number is going to be how many milliseconds it's going to wait before it does the action listener again.

All right, so then we have private image icon, and we're actually going to have an array of them, so I'll call it Image array. This is going to have an array that is going to store all our frames. Then, I'm going to make three ints here: private int delay, which is equal to 50, so that's going to be how long before we switch frames for each frame. The delay is 50 total frames equals 15 because we have 15 frames, and current frame equals zero. Current frame is going to be, um, actually changing based on what frame, but right now we're going to set it to zero because we want to start at the very first frame.

So, now we make the Constructor public second, and in here, we're going to do a few things. One, image array equals new ImageIcon total frames. Basically, total frames is equal to 15, so I could just put 15 in there, but then there would have been no point in making total frames. So, basically, this just means we created an array and it's going to be storing 15 image icons which are going to be our 15 frames.

So, now is a really cool way to add all of them. If you name them something very similar, I named all mine frame 0.png, frame 1.png, frame 2.png, and I did that for a very specific reason. Because I learned about a way that I can add all these elements, um, with just two lines of code, and it's going to be a loop for. In all, z, i is less than image array.length, and if this doesn't make all that much sense to you now, I promise it'll make sense, um, by the end of the tutorial because I'm probably going to go over everything too.

So, i++, so basically, here's what we're going to do. We're going to do image array[i] equals, so we're actually going to be looping through this array and assigning it a value, assigning each space in the array in a value. How we're going to do that is new ImageIcon, and in here we normally put, give it a string which is the name of our icon. So, since I named them all something very similar, I can do frame + i because that's the only part in my name that actually changed.

PNG C, so when I equals zero, the zero element is going to equal frame zero because I can do this because I named them frame 0, 1, 2, 3, 4, 5, 6, 7, 8, whatever. And the only reason I made i what I change is that, um, that's the only thing in my name that changes, and it's just an integer. So, basically, if I had named them something completely different, I couldn't use this. I couldn't do this, but it saves you so much code, so that's why I named them all like that.

So, it's going to loop through this and assign it, um, the value of one of the frames in that order. So now I'm just going to do animator equals new timer, and I'm going to give it. It takes two parameters: uh, delay and this, and that's going to be this action listener. And then I just have to, uh, start it because it doesn't start by default. Uh, you can also stop it, and in the next tutorial, we're actually going to be making two buttons to start and stop it, but let's get a little ahead of myself.

So now, outside this Constructor, we'll do public void paintComponent, and if you remember from the last tutorial, Graphics G, that's what allowed us to draw our images to the window, and that's how we're going to...