Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Dynamically creating graphics

From: Flash Professional CS5: Animation Projects

Video: 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.

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.

Show transcript

This video is part of

Image for Flash Professional CS5: Animation Projects
Flash Professional CS5: Animation Projects

25 video lessons · 23450 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional CS5: Animation Projects.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.