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

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Writing an ActionScript 3 Tween Function


Now that we have set the foundation for the Tween animation in our FlashR project, we are ready to code the ActionScript that will run the animation. First, we will add an Event Listener to listen for a mouse click. When a mouse click occurs, a function will run that will create the Tween. Open the project that you have been working on with the previous tutorial and let's get started.

First, we need to decide what will start the Tween animation. Will it start as soon as the Flash file loads into the browser or will it be started by a certain event. Let's use the second method by adding an Event Listener to the stage.

  1. This Event Listener will call the showRec function when a mouse click occurs.

    stage.addEventListener(MouseEvent.CLICK, showRec);

  2. Next, we will write the code for the showRec function. Let's start the function code with the usual function keyword and brackets. As you can see, we add the name of the function after the function keyword. Also, we tie the function to the MouseEvent Event Listener.

    function showRec(event:MouseEvent):void
    { }

  3. Now we are ready to add our first line of the function code between the brackets. We will make a variable that will create an instance of the recMC movie clip, which is stored in the Library.

    var newRec:recMC = new recMC();

  4. With the next line of code, we add this new instance of the movie clip to the display list. This will make the rectangle visible on the stage.

    this.addChild(newRec);

    Finally, we are ready to add the Tween code. We will create the variables that we will use to Tween our object, the rectangle. To move an object on the stage, we need at least one variable that will control one property of the object. For example, if we want to move our rectangle horizontally across the stage, we need to use a variable to control the x location of the object. On the other hand, to move the rectangle both horizontally and vertically, we will need a variable for both the x and y locations.

  5. In the sample code below, we have done just that. Our new variables are xMove and yMove. The Tween code after the colon tells Flash that these are variables of the Tween type.

    var xMove:Tween = new Tween(newRec, "x", Back.easeIn, 100, 150, 2, true);
    var yMove:Tween = new Tween(newRec, "y", Back.easeIn, 100, 150, 2, true);

Let's look at what comes after the equal sign. This code initializes our new xMove and yMove variables with the Tween class constructors. As you can see, there are several arguments between the parenthesis. Let's take a look at each.

var xMove:Tween = new Tween(newRec, "x", Back.easeIn, 100, 150, 2, true);

newRec
This argument identifies the object that we will animate.

"x"
This argument identifies the object's property that we want to control, the x location of the object.

Back.easeIn
This argument identifies the type of easing that we want to use. There are several easing types, or classes, that come with the fl.transitions.easing package. They are Back, Bounce, Elastic, None, Regular and Strong. Here we are using the Back class.

Back.easeIn
Notice that the Back class is followed by a period and then the easeIn method. There are three easing functions to choose from including easeIn, easeInOut and easeOut.

100
This next argument will give Flash the initial x location for the object on the stage. This is the spot where the animation will begin. Because, our rectangle is not on the stage until we click the mouse, we are also telling Flash where to draw the rectangle on the stage.

150
This argument gives Flash the end location for the Tween. We will be moving the rectangle 50 pixels on the stage. So we need to set this argument to 150. Another option would be to move the rectangle to the location on the stage where we clicked the mouse.

2
This argument tells Flash the duration of the Tween animation. This number value can refer to either seconds or frames, depending on the value of the last argument.

true
This argument tells Flash what measurement to use for the Tween. When this argument is set to true, Flash will measure in seconds. For a false value, Flash will measure the duration in frames.

The second statement does the same for the y property of the object. Here is the code for our sample Tween.

var yMove:Tween = new Tween(newRec, "y", Back.easeIn, 100, 150, 2, true);


← Back

Join us in the Flash forum.




Add Writing+an+ActionScript+3+Tween+Function to Twitter Add Writing+an+ActionScript+3+Tween+Function to Facebook Add Writing+an+ActionScript+3+Tween+Function to MySpace Add Writing+an+ActionScript+3+Tween+Function to Del.icio.us Digg Writing+an+ActionScript+3+Tween+Function Add Writing+an+ActionScript+3+Tween+Function to Yahoo My Web Add Writing+an+ActionScript+3+Tween+Function to Google Bookmarks Add Writing+an+ActionScript+3+Tween+Function to Stumbleupon Add Writing+an+ActionScript+3+Tween+Function 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 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

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