All the code responsible for drawing our hexagonal cylinder at runtime is contained in the custom class HexCylinder. We discuss the class on the next page but the class uses the simple 3d mechanism from our tutorial Simple 3D Drawing in Flash CS3 . The class HexCylinder has two public properties: curTheta and curPhi. Those properties correspond to the current horizontal and the current vertical angular displacements of the observer. (curTheta and curPhi angles are measured in degrees.) The public method, renderView(t,p) draws the view of the cylinder corresponding to two values of the view angles. We use the two properties and the method in conjuction with the Tween class to produce the animation effects in the applet on the previous page.
The code that does it is placed on the MainTimeline of tween.fla. (The fla file and the nested folders com-flashandmath-solids must be in the same directory for the fla file to find The HexCylinder class and to compile.) Let us have a look at the Timeline code (skipping only obvious and repetitious parts). To keep the flow of the code intact, we put our comments in the form of comments to the code enclosed between /* ..*/.
/*
We import the classes that we need related to tweening and easing.
We also import our custom HexCylinder class. We define two variables: one will keep
track if a tween is in progress, the other will hold an
instance of the Tween class.
*/
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import com.flashandmath.solids.HexCylinder;
var isMoving:Boolean=false;
var twRotate:Tween;
/*
We created a radio button group by dragging radio buttons
onto the Stage and setting the name of the group and the value
for each button in the components' Parameters panel.
We are now accessing the group via the first
button, rbBounce, and store the group in the variable
rbgGroup.
*/
var rbgGroup:Object = rbBounce.group;
/*
We are creating an instance of HexCylinder. The constructor
takes the radius and the height of the cylinder as parameters.
The registration point of the instance, named 'cylinder', will be
located in the upper left corner. The HexCylinder class
extends Sprite. We position our instance on the Stage
using the Sprite methods.
*/
var cylinder:HexCylinder=new HexCylinder(80,200);
this.addChild(cylinder);
cylinder.x=60;
cylinder.y=90;
/*
We customize the appearance of our cylinder. Except for faces' colors
we use defaults, so we could skip the next two lines.
*/
cylinder.setBorderColorAndThick(0xCC0000,1);
cylinder.setOpacity(0.8);
cylinder.setFacesColors([0xB4B5FE,0xABFEFD,0xFFFFCC,0xFF9A9A,0xCCCCFF,0xB5FDE0,0xE9FEB4,0xFFCCFF]);
/*
The next function gets the easing function corresponding to the radio button selected.
*/
function getEaseFunction():Function {
var curSel:String=rbgGroup.selectedData;
var curFunction:Function;
if(curSel=="Bounce"){
return Bounce.easeOut;
}
else if(curSel=="Back"){
return Back.easeOut;
}
else if(curSel=="Elastic"){
return Elastic.easeOut;
} else {
return Strong.easeOut;
}
}
/*
Each of the arrow buttons when clicked responds only if 'isMoving' is false;
that is, only if the previous motion ended. In that case, an instance
of the Tween class is created and stored in the variable 'twRotate'.
The constructor of the Tween class takes the following parameters.
First an object, in our case 'cylinder'. Then a numerical property of the object,
in our case curTheta or curPhi. ('curTheta' and 'curPhi' are public properties
of the HexCylinder class. 'curTheta' corresponds to the horizontal angular
displacement of the observer, curPhi to the vertical displacement.)
The next parameter is an easing function. The choice of this function is done
by getEasyFunction based on which radio button is selected. The next two parameters
are the beginning and the end value of the parameter which is being tweened: curTheta
or curPhi. The last parameter gives the duration of the tween, in number of frames.
In our case, the instance of the Tween class itself does not produce motion directly.
It gradually over time changes the value of the angle curTheta (or curPhi). The way values
of curTheta change over time is determined by the choice of an easing function.
Each easing function, Bounce.easeOut etc, produces bouncing, acceleration,
or decceleration in the changes for curTheta. (Or in curPhi for the up and down
arrows.) The actual motion corresponding to the changing values of the angles
is produced by the listener to MOTION_CHANGE event attached to the Tween instance, twRotate.
That listener defined later in the script, calls the cylinder.renderView method.
The method draws the cylinder corresponding to changing values of the angles.
*/
btnRight.addEventListener(MouseEvent.CLICK, rotateRight);
function rotateRight(e:MouseEvent):void {
if(isMoving==false){
isMoving=true;
twRotate = new Tween(cylinder, "curTheta", getEaseFunction(), cylinder.curTheta,
cylinder.curTheta+60, 20);
twRotate.addEventListener(TweenEvent.MOTION_FINISH, tweenDone);
twRotate.addEventListener(TweenEvent.MOTION_CHANGE, tweenChange);
}
}
//Similar listeners to CLICK are attached to the other three arrow buttons.
.............................
.............................
function tweenChange(e:TweenEvent):void {
cylinder.renderView(cylinder.curTheta, cylinder.curPhi);
}
function tweenDone(e:TweenEvent):void {
isMoving=false;
twRotate.removeEventListener(TweenEvent.MOTION_FINISH, tweenDone);
twRotate.removeEventListener(TweenEvent.MOTION_CHANGE, tweenChange);
twRotate=null;
}
Download
- Download all 'fla', and 'as' files corresponding to this tutorial: tween3d.zip
On the next page, we discuss briefly the HexCylinder class.
