Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Flash Professional CS5: Animation Projects, Paul Trani shows how to create dynamic and visually rich animations in Flash Professional CS5. This course demonstrates how to create and import assets, and then take those assets and bring them to life with dynamic motion. It also shows how to create more unique and natural movement by adding special effects, 3D, masks, and even bones to animate characters. Exercise files accompany the course.
One of the powerful features of ActionScript is its ability to just randomize content, and that's where I'm at with this project is I want to be able to just randomize the position of these movie clips, because what's currently going on is there's about 100 raindrops coming down in the same position. So this is, again, a perfect case for ActionScript where I want to randomize some of those properties for those movie clips. So I'm going to select this first layer, I'll open up the Actions panel, and again here's where I place all of the movie clips.
They actually get added to the stage. They're all called raindrop, and then down here, I referenced each one in this rainArray, which I have kind of been referring to as a big cloud, because it contains lots of raindrops. So this is the motion up here. This is where they get created. So after they are created - and quite frankly I want to change the position of each one as they get added to the stage - so right in here, this is where I want to change the properties of each raindrop.
So all I need to do is say raindrop, and for this raindrop, maybe I will change the X position. So to left or right, change its X position. In this case, I want to go ahead and find a random number. I'll show you an easy way to do that, because if I open up my Code Snippets panel - just minimize that a little bit - under the Actions folder, there is Generate a Random Number.
So let me just go ahead and double- click on Generate a Random Number. There's instructions for it, but overall, what I want to do is I want to go ahead and get a random number, and that's right in here. This gets the random number. So that's what I want to use. There is also Math floor as well. Math floor, that sort of rounds the number down. Anytime you use Math random, it actually gets a number between 0 and 1, and it might be 0.25, whatever the case may be.
This rounds it down to a whole number. So I'm going to just steal this code right here. So I'm going to copy it, and I'll just delete that. But I encourage you to use the Code Snippets panel as a way to sort of start writing your code. Okay, raindrop X, and I will just go ahead and paste in that Math floor, Math random. I do want to get a random number, but I want to get a random number between 0 and the stage width.
So Math random, times, let's do stage, stageWidth. It highlights. I can Hit enter, and it will add it, just like that. So whatever that random number is, go ahead and multiply it by the stage width. So that's going to give me a number between 0 and the width of the stage, which happens to be 1,000 pixels. But in case my stage ever changes, that's why I'm typing this in.
I'll just keep this as Math.floor. So that's going to randomize the X position. Well, if I run this code now - I'll just do a quick test movie - you can see it animates all of them down, and again, that was pretty drastic. So in fact, if I run that again, you'll also notice that it just animates them all down, and then when they reach the bottom, they all are back where they were. So that's why I have to take this line of code, copy it, and down below, right in here, instead of putting it at zero, I need to go ahead and paste in that line of code.
So again, it's not raindrop X. I'm referring to, actually, the rainArray, and whatever raindrop that is being animated. Again, I've changed this from 0 to that random number. Now, if I do a test movie, it will not only be random here, but when they come down again, they will also be in a random position. Again, I haven't seen rain like this, so I probably want to change it, but it's the same process.
I'll just copy this line again, paste it, and I'll change it from X to Y, and let's make this equal to the stage height. It's going to go ahead and randomize the position for each one that way, as well Let's do a test movie. Now, it looks pretty good. At least everything is random, but overall, I think it needs more depth, because all my raindrops are the same size. So I want to adjust the opacity, and even the size of each raindrop.
So back in here, next line. I'm going to change the alpha, and the alpha is usually a number between 0 and 1, which happens to be what Math random returns. So I'll just copy that and paste it below. So now it's going to get a random number for my alpha. Next up, raindrop.scale X is going to be equal to again Math random, because scale X is a number between 0 and 1.
0.5 would be 50%, so it's 50% opaque, or transparent - whichever way you want to look at it. Next up, I have raindrop scale Y. Now, I don't want to do a random number for the scale Y because I always want it to be the same scale as the scale X. So I'll actually copy this and paste it right here. Now, it's always going to scale it down proportionately.
Lastly, what I'm going to do is I'm going to click the Auto format button and the Check Syntax button, just to make sure it cleans up my code. In fact, I'll just go ahead and remove all those spaces as well, and add some final comments, since my code seems to be down right now. Move the raindrops. Again, this is so in case I come into this code later on or want to reuse it, I'll remember what everything does. But I'd say that looks pretty good. I'd say it looks set up.
But this final test movie will prove if it does and sure enough, it does work out just great. You can see those different-sized raindrops. I'd say my only complaint now, which might be my last edit, is to increase the speed of these raindrops. So let's up this to about 16, and let's make this, say, 4. The raindrops are going to go a lot faster. That's better! I like that, and again, I can start to play with those various properties.
But you can see that it is pretty straightforward to manipulate movie clips. Again, these are all being pulled from the library, and I'm manipulating them randomly, and you can see the results I get are quite impressive, considering animating these separately would take me a long time.
There are currently no FAQs about Flash Professional CS5: Animation Projects.
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.