Dynamically creating graphics
Video: Dynamically creating graphicsActionScript is very powerful. It allows you to control graphics really well, and also allows you to create many graphics that can then be animated, as well. In this case I have this raindrop, and it's just one raindrop, but what if you need to create a whole landscape of raindrops, say about hundred of them? Well, animating all of those in a different way would take quite a while, and that's where ActionScript comes in handy. So first off, let's just go ahead and take a look at our raindrop that's currently being animated down.
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.
- Creating graphics and reusable assets
- Importing graphics
- Making an object move
- Animating a mask
- Using and customizing motion presets
- Morphing shapes
- Animating in 3D
- Adding bones to a character
- Controlling the Timeline with ActionScript
- Randomizing content
Dynamically creating graphics
ActionScript is very powerful. It allows you to control graphics really well, and also allows you to create many graphics that can then be animated, as well. In this case I have this raindrop, and it's just one raindrop, but what if you need to create a whole landscape of raindrops, say about hundred of them? Well, animating all of those in a different way would take quite a while, and that's where ActionScript comes in handy. So first off, let's just go ahead and take a look at our raindrop that's currently being animated down.
Again, I am going to fill the sky with raindrops. The first thing I am going to do is just delete this raindrop layer, because I'm going to dynamically pull this raindrop from the library and place it on the stage. In fact, I am going to pull a hundred of them on. So let me go to my Actions layer and open up the Actions panel. Here is my current code and all this does is animate my raindrop. I don't even need these comments right here - so I'll just delete them and do a couple of Returns - because I'm going to add my own comments in here.
So I'll just do two forward slashes, which allows me to add my own comment, and I want to dynamically pull raindrops from the library, and I am going to do that, but the first thing I need to do, before I can start writing any code, is make it available to ActionScript. So I am going to right-click on that rain movie clip, go to Properties, and I might need to twirl down the Advanced tab right here, and under Linkage, you'll see that it says Export for ActionScript.
So I want to make sure that's checked. Then I am going to give it a specific name. I am going to call it Rain, with a capital R. Class files usually have a capital letter. Either way, you just want to be really mindful of whether it's capitalized or not, and to stick with one or the other. But in general, do an initial cap. This is called Rain. I'll click OK. It says that it's going to create a class path. I am like, that's fine, just click OK from there, and notice how under Linkage, it says Rain. So now it's available to ActionScript.
So back in my Actions panel, I can go ahead and create a new variable called raindrop, and it is a movie clip. I'll type that in. I've selected movie clip. It adds that import statement. I am going to type in new Rain, because that's the class that I just made. So I need to make sure this word matches up with this linkage word right here. Okay, so this new variable was created. Now I need to do an add child raindrop.
That's what I'm adding. I am adding this raindrop to the stage. So I am going to go ahead and run this. Do a test movie. We should see it animate on down from the upper left-hand corner. So there's my one raindrop. Let's close that, go back into my code, because I need to generate 100 raindrops. So I want to dynamically pull 100 raindrops from the library. I am going to do this by creating an array.
So the first thing I am going do, right up here, is create an array called rainArray, and it is of type Array, and I'm instantiating it. It is a new Array. It's my big rain cloud, full of rain. Currently, there is nothing in it. But I did just create this Array, which I am going to use in a second. All right, with this new Array created, what I want to do next is I want to create a For loop, and I'll talk you through what this does.
But I first need to create a variable, that's a number, that starts at 0, and as long as my number is less than 100, then Loop through this For Loop, just like that. That's what I want. I'll do an open curly brace. If I hit Return, it adds the closing curly brace. This says it's going to start at 0. So here's my variable name. This could be anything, but as long as i is less then 100, then it'll loop through this code.
This just adds one each time it goes through. Right in here, this is where I need to add my raindrop, where I have instantiated it from the library. I am going to go ahead and tab that in, but now I've created that new raindrop. But I haven't put it in this array that I've made. So I need to put it in my rainArray. So rainArray push raindrop. Push it into that big rain-cloud.
rainArray.push(raindrop);. So that's what I have done. I've dynamically pulled 100 raindrops from the library, and I've put them on the stage. In fact, let's just autoformat my code. So I'll click that button, and that will make sure all my code looks nice and neat. That just adds in any tabs and any line breaks that might make it easier to read. I'll check my syntax, it's another thing I might consider. Then I'll just do a test movie, and again, there is my 100 raindrops.
There is only one that animates, so I want to animate them all. So again, it's going to be a matter of creating this For Loop again. Just to make this a little simpler on me, I am going to actually copy this For right here, because down in here, instead of just animating one raindrop, I want to create that For Loop right in here that's going to animate them all. So I've just pasted in the same For Loop. So as long as i is going to be less than whatever is in the array.
So there might only be a couple in there initially. So I would probably want to change this to rainArray.length. So whatever is in the array, just loop through it, and you're going to loop through all of this content. I've just added a closing curly brace down here, because anything within these two curly braces is going to execute in this For Loop. That's why this Auto Format button comes in handy.
So if I click on it, it actually nests that all nice and neat, and there is my For Loop. So we're looking pretty good so far. It will loop through all of this, but it's still only moving that one raindrop. So I actually need to change that. I need to say rainArray. Whatever is in my rainArray - I am not sure what's in there - I could actually define within these two braces. I could maybe point to the second raindrop, or the third, or the fourth. But I want to change this to i, because it's going to Loop through here.
The first time through it might be sort of equal to 0. Then it will refer to the first one, then it will refer to the second one. But if I keep that at i, it's always going to reference every single one. So I'll copy that, and change that raindrop to rainArray. Pretty much wherever it says raindrop, I am going to change that to rainArray, because again, that's going to change each time it Loops through this For Loop. Lastly, I'll just copy this line and paste it below because I want to change my X position to 0 as well.
So you're just going to see pretty much all of my raindrops animate from the upper left-hand corner and then just down at an angle. So that's all this does. In fact, if I hit Return, I can add a comment in here. So loop through the array, and animate all raindrops. That's what that does. I'd say that looks pretty good. We're dynamically pulling the 100 raindrops into my scene. So let's do a test movie.
Again, there's my one big raindrop, 100 of them stacked on top of another, and they animate. So really, my next task is to go ahead and randomly position all of these raindrops sort of across this whole scene and have them rain down. So that would really be the next step for this.
There are currently no FAQs about Flash Professional CS5: Animation Projects.