Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now you can do a lot of really cool animations on the timeline in Flash. It is definitely very powerful. But sometimes what you're going to want to do is use ActionScript to animate objects. This is really helpful if you need to animate a lot of different objects and it would just take forever to do it in the Timeline, or if you want to create random movements. Well, you can use ActionScript to do that as well. Or even potentially user-initiated movement - maybe you want some animation to follow the cursor.
All this would have to be done using ActionScript, or at least that's the most effective way. I am going to just start with a simple example of animating with ActionScript, and I'm going to use this raindrop. It's actually called rain right in here. But if I drag this onto the stage, notice that it's just one raindrop. So let's just zoom in on it. This is my one raindrop that I want to animate, coming down from the top, at an angle. The first thing I need to do is I need to give this object an instance name.
So in my Properties panel, I am going to call it raindrop. So there is my raindrop. It has an instance name of raindrop, and I'm going to animate it actually using code snippets. So if I go to Window, down to Code Snippets, notice that there is plenty of different code snippets in here, but I want to focus on this Animation folder, because if I open that up, so I just minimize that panel, you can see that there is quite a few things I can do in here.
I can move movie clips with the keyboard arrows, I can just move objects horizontally and vertically, I can rotate them, fading them in and out is an option as well, but again, what I want to do is I want to animate vertically. So that's what I am going to start with. So with that object selected, I'm going to double-click Animate Vertically, and that's adds the code to this frame right here in this Actions layer that it creates. So in my code, you notice that it gives me some comments, not only what it does, but how to modify it.
So the default direction of the animation is up. So it's referring to this code right down here, and it says raindrop. So I'm pretty much at the Enter_Frame of the movie. So if this movie is going 24 frames per second, that's how often this function is going to execute, 24 times per second. In this case, this raindrop is going to move its Y position. So it's going to move vertically, like it's saying here, and it's going to go up.
That's what this says. It's says -10. So it's going to move it upwards. It's going to -10, because 0 and positive numbers are down. Negative numbers go up. So, the first thing I need to do is modify this, just like it says here, to modify this, change the minus to a plus, if you want to change the direction of the animation. Again, that's what I'll do. I'll just change that to a Plus sign. Now, it's going to move down. So let's do a test movie.
And we can see it moved down. That happened pretty fast. So let's go back into our code, and we'll change this to 5. Now, this should go at least half as fast, but now we can see it moves straight down. It's not bad, but as you'll notice, this raindrop is at an angle. So I might consider moving the raindrop at an angle as well. So I'm going to type in "raindrop." Its X position, so, horizontally, I want it to move += 1.
So this is going to move it to the right one pixel pretty much every second. So let's see if it goes at a nice angle now, and it does. That looks pretty good. It's going at an angle, and it works really well. But what's happening is it still animating that raindrop, even though you can no longer see it. So it's off of my stage. It's way down there, but it's still animating. So what I want to do next is I want it to reappear up here at the top, once it leaves the stage.
So I'm going to go back into this code here, and I'm going to add a comment. So just like you have comments up here, I can add my own comments down here. If I just do it two forward slashes, I can go ahead and type in a comment, because I want to basically say, if it's off the stage, have it reappear at the top. Off the stage on the bottom, is what I mean.
Let's expand this out, because I am going to write a couple of lines of ActionScript. So let's just put in some hard Returns, just so I have some room, and right underneath that comment, I'm going to add an if statement. So if the raindrop, its Y position is greater than stage.stageHeight - so you notice how I start typing in stage.stageHeight, which happens to be a property of the stage - I get this code hinting here.
So anytime I see what I want in here, and I can just hit Enter, and it adds it. So anytime it's greater than the height of the stage, which means it's off the bottom, then do whatever is in between these two curly braces. And in this case, what I want to do is I want to reposition the raindrop, its Y position, and I'm just going to make it = 0. So that's puts it right back up to the top. That's all the code I'm going to write.
If you are curious about the position of things, what you can do is open up your Info panel, because this gives me to X and Y coordinates of my mouse. So notice as I scroll up, the Y numbers decrease, and of course they increase as I scroll down. So if that helps determining the position of things for you, then consider using that Info panel. But with that code in place, I'm going to do a test movie. We should see animate off, and it should come back on up at the top. There it is! I'm not modifying the X position at all, but I could do that as well.
That's really just one raindrop, and this might be the start of a storm, which is fine, but what if I want to create more rain? That would really be my next step with this, which is sort of creating more raindrops and having them all come down randomly.
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 37363 Viewers
100 Video lessons · 8417 Viewers
94 Video lessons · 26572 Viewers
147 Video lessons · 6088 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.