v1.06

index

readme

support

history

terms of use

download

 

Step by Step Tutorial

Create a new Flash document, save it in your project folder that contains the needed packages for AnimationPackage (all supplied folders except "docs"). Write

import de.alex_uhlmann.animationpackage.*;
import de.alex_uhlmann.animationpackage.animation.*;
import de.alex_uhlmann.animationpackage.drawing.*;
import de.alex_uhlmann.animationpackage.utility.*;
import com.robertpenner.easing.*;

APCore.initialize();

  

Let's get it on:

 

 

Let's draw half of a wedge.

 

var myArc:Arc = new Arc();
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.draw();



  

By default our wedge is positioned at the upper left corner at 0,0. Let's do the same, just position it better, so we can better see it.

 

var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.draw();

  

 

Modify the outline. Remember the lineStyle() method of MovieClip? It's just the same:

 

var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.lineStyle(15,0xff0000,50);
myArc.draw();

  

 

Our wedge has a black fill by default, so let's change that. Color it red:

 

var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.lineStyle(15,0xff0000,50);
myArc.fillStyle(0xff0000,100);
myArc.draw();

  

 

You could have omitted the second parameter of fillStyle(), since this is the _alpha property and it defaults to 100 anyway.

So, where is the animation, you ask? Just change draw() to animate() and specify the start and end value in percentage.

 

var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.lineStyle(15,0xff0000,50);
myArc.fillStyle(0xff0000);
myArc.animate(0,100);

 

You can modify the animation with animationStyle().

 

var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.lineStyle(15,0xff0000,50);
myArc.fillStyle(0xff0000);
myArc.animationStyle(2000,Circ.easeInOut);
myArc.animate(0,100);

 

Now, we want to do something after the animation. For this, we can either use callbacks or Macromedia's EventDispatcher / Grant Skinner's GDispatcher. In this example I'll show how to use callbacks. Take a look into the readme to know more about the latter approaches.

First, we have to create a listener object...

 

var myListener:Object = new Object();

 

and subscribe the listener object to all events from AnimationPackage. The APCore class handles the subscription.

 

APCore.addListener(myListener);

 

We can add a callback parameter as the third parameter to animationStyle. Later, we will define a function to our myListener object with the same name as the callback parameter. For now, our code looks like this:

 

var myListener:Object = new Object();
APCore.addListener(myListener);


var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.lineStyle(15,0xff0000,50);
myArc.fillStyle(0xff0000);
myArc.animationStyle(2000,Circ.easeInOut,"onFirstAnimation");
myArc.animate(0,100);
var mc:MovieClip = myArc.movieclip;
  

 

Note that we have also saved the movieclip property of myArc in the variable mc. This is the movieclip that contains the wedge. We might need it for later animations.

Here is the new function we define on the myListener object to be called after our wedge animation is done.

 

myListener.onFirstAnimation = function(source, value) { 
	trace(source+" just completed at "+value); 
	//do stuff
}

  

Because of the animationStyle() invocation, our myArc instance knows a callback property of "onFirstAnimation". We don't want to call the onFirstAnimation() again, so inside onFirstAnimation(), let's just change the callback property to the next function to be called.

 

myArc.callback = "onSecondAnimation";

  

 

All other animationStyle properties stay the same. In onFirstAnimation() we want our wedge animation to continue to 300 degrees.

 

myListener.onFirstAnimation = function(source, value) { 
	trace(source+" just completed at "+value); 
	myArc.callback = "onSecondAnimation"; 
	myArc.setEndValue(300);
	myArc.animate(myArc.getCurrentPercentage(),100);
}

 

Inside our next function, move the wedge to the center of the screen.

 

myListener.onSecondAnimation = function(source, value) {     
	trace(source+" just completed at "+value);       
	new Move(mc).run(275,200,500,"onCentered");        
}
  

 

Note, that most functions in AnimationPackage offer you flexiblility how to use them. See the specific class documentation HTML file for more details. Above, I have used the Move class in just one line. We could also use the animationStyle() method like we did for the wedge animation...

 

var myMove:Move = new Move(mc);
myMove.animationStyle(500,"onCentered")
myMove.run(275,200);
  

 

...or could have set the animationStyle properties one by one:

 

var myMove:Move = new Move(mc);
myMove.duration = 500;
myMove.callback = "onCentered";
myMove.run(275,200);

 

...or like this:

 

var myMove:Move = new Move(mc);
myMove.animationStyle(500,"onCentered");
myMove.setStartValues([mc._x,mc._y]);
myMove.setEndValues([275,200]);
myMove.run();

You can also send the parameters of the calling function with the constructor and use the animate() method with its percentage properties that specify to what extent you want the animation to take place or to reverse the animation. This is especially useful if you use the Parallel, Sequence, Animation or Drawer class of AnimationPackage. Take a look at their class documentations for more information.

 

var myMove:Move = new Move(mc,275,200,500);
myMove.animate(0,100);
  

 

btw. you could also change the tween-engine that AnimationPackage uses internally. With

 

AnimationCore.setTweenMode("FRAMES");

 

you can use frame-based tweening instead of time-based tweening. Take a look at class documentations, especially from APCore, AnimationCore and the readme.htm for more information.

 

Note, that we didn't specify the easing property. If we don't specify a property, the default property is used. You can make use of this if you have i.e. different classes that might want to share some properties. Then, you can overwrite the default property and don't specify anything to the instance, so that the instance retrieves your default property. All default properties belong to a class (they are static) and have the same name like their instance properties except for the suffix "_def" for default. i.e. if you want all your classes to move according to the Elastic.easeOut easing equation do this:

 

AnimationCore.easing_def = Elastic.easeOut;

  

 

Now, if some class does need another easing equation, just override the default property with animationStyle(), the method or directly on the animationStyle property.

To know what default properties are available and what values they have by default, take a look at the documentation for the specific class you are using. If you can't find the property you are looking for, make sure you've checked the AnimationCore or Shape class documentation.

Now, let's return to our animation:

So, whatever move you used to center the wedge, after this animation the onCentered() function should be called. Inside onCentered() use Bounce easing to drop the wedge to the bottom of the screen.

 

myListener.onCentered = function(source, value) {      
	trace(source+" just completed at coordinates "+value);
	var myMove:Move = new Move(mc);
	myMove.animationStyle(4000,Bounce.easeOut,"onDrop");
	myMove.run(275,300);
}
  

 

In onDrop() use the Move and Rotation class to simulate that your wedge is rolling off the screen.

 

myListener.onDrop = function(source, value) {            
	trace(source+" just completed at coordinates "+value);
	AnimationCore.duration_def = 3000;
	AnimationCore.easing_def = Quad.easeIn;     
	new Rotation(mc).run(360);
	new Move(mc).run(675,mc._y);
}

 

And here is all the code:

import de.alex_uhlmann.animationpackage.*;
import de.alex_uhlmann.animationpackage.animation.*;
import de.alex_uhlmann.animationpackage.drawing.*;
import de.alex_uhlmann.animationpackage.utility.*;
import com.robertpenner.easing.*;

APCore.initialize();
var myListener:Object = new Object();
APCore.addListener(myListener);

var myArc:Arc = new Arc(100,100);
myArc.setArcType("PIE");
myArc.setEndValue(180);
myArc.lineStyle(15,0xff0000,50);
myArc.fillStyle(0xff0000);
myArc.animationStyle(2000,Circ.easeInOut,"onFirstAnimation");
myArc.animate(0,100);
var mc:MovieClip = myArc.movieclip;

myListener.onFirstAnimation = function(source, value) { 
	trace(source+" just completed at "+value); 
	myArc.callback = "onSecondAnimation"; 
	myArc.setEndValue(300);
	myArc.animate(myArc.getCurrentPercentage(),100);
}
myListener.onSecondAnimation = function(source, value) {     
	trace(source+" just completed at "+value);       
	new Move(mc).run(275,200,500,"onCentered");        
}
myListener.onCentered = function(source, value) {      
	trace(source+" just completed at coordinates "+value);
	var myMove:Move = new Move(mc);
	myMove.animationStyle(4000,Bounce.easeOut,"onDrop");
	myMove.run(275,300);
}
myListener.onDrop = function(source, value) {            
	trace(source+" just completed at coordinates "+value);
	AnimationCore.duration_def = 3000;
	AnimationCore.easing_def = Quad.easeIn;     
	new Rotation(mc).run(360);
	new Move(mc).run(675,mc._y);
}

and the resulting .swf file.

 

Thanks for following me. Have a better example? Found bugs? Let me know. mailX@XalexX-uhlmann.de . Remove the X's.

creating powerful animations fast.