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

Creating movement with ActionScript

From: Flash Professional CS5: Animation Projects

Video: Creating movement with ActionScript

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.

Creating movement with ActionScript

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.

Show transcript

This video is part of

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

25 video lessons · 23473 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.