Video Training – Tutorials

Flash CS4 Tutorial – Copy Motion – Animation

January 30, 2009 at 12:31 am Leave a comment

Flash CS4 Tutorial – Copy Motion

Learn how to use Flash CS4 and ActionScript to create complex animations.

From Flash CS3 onwards Adobe introduced a new feature that enables users to copy timeline animation and paste it straight into the actions panel. This allows developers to cut corners when creating complex animations that aren’t so easy to create with just pure Actionscript. The pasted animation has several arrays and variables, take a look at Example 1.1 for an example. The example motions an object from the left of the stage to the right, nothing fancy just a simple animation. At first glance you’ll notice some familiar Actionscript properties such as scaleX and scaleY, these properties are what essentially make up the animation. In this article we’ll be at this technique in greater detail by adding making the code reusable by adding it to other stage objects and building a reusable class.

The files used in this Flash tutorial can be downloaded here

Example 1.1

  import fl.motion.MotionBase;

  import flash.filters.*;

  import flash.geom.Point;

  var __motion_ps:MotionBase;

  if(__motion_ps == null) {

  import fl.motion.Motion;

  __motion_ps = new Motion();

  __motion_ps.duration = 39; 

__motion_ps.addPropertyArray("x", [0,5.78946,11.5789,17.3684,
23.1579,28.9473,
34.7368,40.5263,46.3158,52.1052,57.8947,63.6842,
69.4736,75.2631,81.0526,86.8421,92.6315,98.421,
104.21,110,115.789,121.579,127.368,133.158,
138.947,144.737,150.526,156.316,162.105,167.895,
173.684,179.474,185.263,191.053,196.842,
202.632,208.421,214.211,220]);

 __motion_ps.addPropertyArray("y", [0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);

  __motion_ps.addPropertyArray("scaleX", [1.000000]);

  __motion_ps.addPropertyArray("scaleY", [1.000000]);

  __motion_ps.addPropertyArray("skewX", [0]);

  __motion_ps.addPropertyArray("skewY", [0]);

  __motion_ps.addPropertyArray("rotationConcat", [0]);

  __motion_ps.addPropertyArray("blendMode", ["normal"]);
var __animFactory_ps:AnimatorFactory = new AnimatorFactory(__motion_ps);

__animFactory_ps.transformationPoint = new Point(0.500000, 0.500000);

// __animFactory_ps.addTarget(<instance name goes here>, 0);

  }

In this first part of this tutorial we’ll use the Copy Motion as Actionscript 3.0 technique to make an advertisement banner that’ll have 3 spinning adobe logos. In the download file the stage is already set up with some text and a single spinning Flash logo created on the timeline. The timeline consists of 6 layers that include actions, text, fl, ps and dw. The layer that’s important to us is the fl layer; this layer contains the Motion Tween that we’ll copy and paste into the actions panel, using the Copy Motion as Actionscript 3.0 feature.

Step 1 – Copy The Animation

The first step is to copy the animation itself, so with the very last Keyframe of the fl layer selected we drag and hold the mouse button back to the first Keyframe, highlighting every frame of the animation layer. So it looks like this;

With the frames highlighted we right click and select Copy Motion as Actionscript 3.

Step 2 – Adding The Code To Another MovieClip

Our first objective after copying the timeline animation is to paste the animation into the actions panel, we’ll then be able to add the animation to another MovieClip by making a few changes. To add this too another object in Flash CS4 is simple, near the bottom of the packaged animation you’ll find a line that’s been commentated shown in Example 2.3

Example 2.3

//__animFactory_fl.addTarget(<instance name goes here>, 0);

All that is required is to uncomment the line by deleting the 2 forward slashes then, add the instance name of the object we want to animate, and then enter the amount of times we want the animation to fire. In this case we’re animation the DW MovieClip on the stage and telling the animation to fire once.

Example 2.4

__animFactory_fl.addTarget(dw, 1);

To add the animation to more than one stage object just copy and paste the same line but add a different instance name. For example;

__animFactory_fl.addTarget(dw, 1);

  __animFactory_fl.addTarget(ps, 1);

This would animate the Dreamweaver and Photoshop logos.

Build a Custom Class

Now this animation may not be worth building into a custom class as it only fades and spins an object, but the techniques used to create the class will come in handy. We’ll start by creating a new actionscript file, saving it and calling it Spinner. Inside actionscript file we’ll create the bare bones of a class file.

Package{

Public class Spinner extends MovieClip{

public function spin():void

  {

}

  }

  }

Step 2 – Pasting the Animation Code

We need to copy the animation again using the Copy as Actionscript 3.0 feature so we can paste it inside the Actionscript file. The copied animation should still be on the clipboard but we’ll repeat this anyway. Switching back to the Spinner actionscript file we paste the code below the class code, keeping it out of the way for the time being.

Step 3 –Importing Classes

We need to import the relevant classes or otherwise the animation won’t work. We already have the appropriate classes imported inside the pasted timeline animation; it’s just a matter of having them in correct part of the code. To do this we simply scroll down and copy all the classes from inside the copied timeline animation and paste them inside our package.

Package{

import fl.motion.AnimatorFactory;

  import fl.motion.MotionBase;

  import flash.filters.*;

  import flash.geom.Point;

Public class Spinner extends MovieClip{

 

public function spin():void

  {

}

  }

  }

Step 4 – Declaring the AnimatorFactory

In this next step we’ll declare the AnimatorFactory inside our class, looking at the pasted timeline animation we have an AnimatorFactory object declared inside the function. This is fine but we want to make sure we’re declaring it as an element of the class and not just the function.

Package{

import fl.motion.AnimatorFactory;

  import fl.motion.MotionBase;

  import flash.filters.*;

  import flash.geom.Point;

Public class Spinner extends MovieClip{

var __animFactory_fl:AnimatorFactory;

public function spin():void

  {

}

  }

  }

 

Step 5 – Adding the Animation 

Inside the our spin() function we paste the remaining animation code.

Package{

import fl.motion.AnimatorFactory;

  import fl.motion.MotionBase;

  import flash.filters.*;

  import flash.geom.Point;

Public class Spinner extends MovieClip{

var __animFactory_fl:AnimatorFactory;

public function spin():void

  {

  var __motion_fl:MotionBase;

  if(__motion_fl == null) {

  import fl.motion.Motion;

  __motion_fl = new Motion();

  __motion_fl.duration = 39;

 __motion_fl.addPropertyArray("x", [0]);

  __motion_fl.addPropertyArray("y", [0]);

  __motion_fl.addPropertyArray("scaleX", [1.000000]);

  __motion_fl.addPropertyArray("scaleY", [1.000000]);

  __motion_fl.addPropertyArray("skewX", [0]);

  __motion_fl.addPropertyArray("skewY", [0]);

  __motion_fl.addPropertyArray("rotationConcat", [0,-66.3156,-132.631,
-198.947,-265.263,-331.579,-397.894,
-464.21,-530.526,-596.842,-663.158,
-729.473,-795.789,-862.105,-928.421,
-994.736,-1061.05,-1127.37,-1193.68,
-1260,-1326.32,-1392.63,-1458.95,
-1525.26,-1591.58,-1657.89,-1724.21,
-1790.53,-1856.84,-1923.16,-1989.47,
-2055.79,-2122.1,-2188.42,-2254.74,
-2321.05,-2387.37,-2453.68,-2520]);

  __motion_fl.addPropertyArray("blendMode", ["normal"]);

  __motion_fl.addPropertyArray("alphaMultiplier", [0.000000,0.026316,
0.052632,0.078947,0.105263,0.131579,0.157895,0.184210,0.210526,
0.236842,0.263158,0.289474,0.315789,0.342105,0.368421,0.394737,
0.421052,0.447368,0.473684,0.500000,0.526316,0.552631,0.578947,
0.605263,0.631579,0.657895,0.684210,0.710526,0.736842,0.763158,
0.789474,0.815789,0.842105,0.868421,0.894737,0.921053,
0.947368,0.973684,1.000000]);

 var __animFactory_fl:AnimatorFactory = new AnimatorFactory(__motion_fl);

  __animFactory_fl.transformationPoint = new Point(0.500000, 0.500000);

 //__animFactory_fl.addTarget(<instance name goes here>, 0);

  }

}

}

Step 6 – Adding this Keyword

At the bottom of the code inside our constructor function we have one final piece of code to alter. Just like earlier we uncomment the addTarget line (example 6.1) but this time instead of adding an instance name we use the “this” keyword. The “this” keyword references the object that contains the script. So basically it will animate any object that we connect to this actionscript file.

Example 6.1

//__animFactory_fl.addTarget(<instance name goes here>, 0);

Example 6.2

__animFactory_fl.addTarget(this,1);

Now Lets See The Classes In Action

Now we have our new class lets see it in action. In a new Flash file we have a square drawn out onto the stage that has been converted to a MovieClip, and then has been exported to our Spinner Actionscript class (shown in example 7.1).

Example 7.1

Inside the actions panel of the new Flash file we add the following code. This code creates an instance of our spinner class, adds it to the stage using the addChild() method and finally calls the spin() function.

var test:Spinner = new Spinner();

  addChild(test);

  test.spin();

Entry filed under: ActionScript. Tags: actionscript tutorial, AS3, Flash CS4, Flash Tutorial.