logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Modular Functions in Flash CS3 and ActionScript 3.0 - Particle System Snow Scene Animation


In this particle system tutorial series we will be creating a snow scene animation with ActionScript and FlashR. For our scene, there are many snowflakes falling at the same time. Each flake falling on the stage will be one instance of the same movie clip. So we need to write ActionScript to animate all of the instances, or snowflakes, on the stage. We will use modular, or reuseable, code that can be used to animated as many flakes as we wish.

The best way to begin a series like this is to familiarize yourself with some of the terminology. In this first tutorial, we will take a general look at the function and function call. This function will move three flakes a certain number of pixels down the vertical axis.

To set the scene, I have created two layers in the Timeline which I have named "background" and "snowflakes". I have imported a background image into the Flash Library. With Frame 1 of the background layer selected, I dragged the background image on to the stage. Next, I imported into the Library the snowflake image as a movie clip with the name "mcSnowflake". We will animate three instances of this movie clip.

  1. Select Frame 1 on the snowflakes layer in the Timeline and drag one instance of the mcSnowflake movie clip from the Library to the top of the stage. In the Properties Inspector, give this snowflake an Instance Name of "snowflake1_mc".

    Repeat this for two more instances of the mcSnowflake movie clip. Name these instances "snowflake2_mc" and "snowflake3_mc". You should now have three flakes at the top of the stage ready to fall into the snow scene. Now, we will write the modular function that will create this animation.

  2. Create a new layer in the Timeline and rename this layer "Actions". Select Frame 1 on this layer and open the Actions Panel (Window Actions). Type this code into the panel and then we will discuss the code.

    function snowfall(snowflake:MovieClip, movement:Number):void
    {
    snowflake.y = movement;
    }

    snowfall(snowflake1_mc, 10);
    snowfall(snowflake2_mc, 20);
    snowfall(snowflake3_mc, 30);
function snowfall():void
This line of code will create the function which we will call "snowfall". The void after the parentheses tells Flash that no data will be returned by this function. Next, we will talk about the information that we will put inside the parentheses.

function snowfall(snowflake:MovieClip, movement:Number):void
The first piece of information inside the parentheses tells Flash that our function will be applied to a MovieClip named "snowflake". But wait! Our movie clip instances are snowflake1_mc, snowflake2_mc and snowflake3_mc. Why did we use "snowflake" inside the parentheses? This "snowflake" is a variable that can hold the name of any of the three instances. By using a variable instead of the actual name of the instance, we can use the same code to move any flake on the stage by passing a different instance name to this "snowflake" variable.

The second piece of information inside the parentheses tells Flash how we want to move the flake. Just as "snowflake" is a variable that will hold the instance name of any flake, "movement" is a variable that will hold the Number of pixels that we wish to move the flake. By using this "movement" variable, we have the option to move each individual flake a different number of pixels.

Let's skip down to the three lines of code that will "call" the function and pass the expected information to our variables.

snowfall(snowflake1_mc, 10);
snowfall(snowflake2_mc, 20);
snowfall(snowflake3_mc, 30);
As you can see, the snowfall function is called three times with the same basic function call.

snowfall();

The difference is in the information that is passed each time the function is called. The first function call tells Flash to move snowflake1_mc 10 pixels. The second call moves snowflake2_mc 20 pixels and the third call moves snowflake3_mc 30 pixels.

Now we only have to write the body of the function. This code is what will cause the flakes to move. The code for the body of a function is placed between curly brackets.

{
snowflake.y = movement;
}
Here we encounter our snowflake and movement variables again. The .y after the snowflake variable tells Flash to move the flake alone the Y axis. The equal sign assigns to the snowflake.y the number of pixels passed by the movement variable. I know this is a difficult concept to follow. If we could magically see inside the two variables, the code would look like this.

snowflake1_mc.y = 10;

The number 10 is passed from the movement variable and the instance name snowflake1_mc is passed from the snowflake variable.

When you test your movie, you will notice that the snowflakes have moved down from the top of the stage just as we wanted them to do. However, they are not moving. This is because we have only moved them once. To keep them falling down the stage, we need to change our code a little.

For reference, save your Flash movie as SnowScene1.fla. We will be using functions and function calls to run our particle system animation.





Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Twitter Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Facebook Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to MySpace Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Del.icio.us Digg Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Yahoo My Web Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Google Bookmarks Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Stumbleupon Add Modular+Functions+in+Flash+CS3+and+ActionScript+3%2E0+%2D+Particle+System+Snow+Scene+Animation to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor