hey!!!
for those who love code i have one technique pretty nice and relatively easy to use once you have understanded, for do this you must have a movie clip instanciated in your canvas, or whatever you have, but it must be a movieclip and must be instanciated, now the code, i will explain below:
this code fires a transition animation when the movie loads, consisting in an horizontal translation, a vertical translation, and a rotation transition, note that the rotation transition loops continuosly, you can implement it to whatever you want
CODE
import mx.transitions.Tween;
import mx.transitions.easing.*;
var xposT:Tween = new Tween(my_mc, "_x", Strong.easeIn, 0, Stage.width, 1, true);
var yposT:Tween = new Tween(my_mc, "_y", Bounce.easeOut, 0, Stage.Height, 1, true);
var rotationT:Tween = new Tween(my_mc,"_rotation",Elastic.easeInOut,0,360,true);
rotationT.onMotionFinished = function() {
this.yoyo();
};
xposT.onMotionFinished = function() {
this.continueTo(Stage.width/2,1);
};
yposT.onMotionFinished = function() {
this.continueTo(Stage.height/2,1);
};
well, first things first, in the very first two lines you have an importation senteences, you have to import the packages for the tweening and easing features, note that flash uses this classes internally, so you have the power to make transitions with great performance.
CODE
import mx.transitions.Tween;
import mx.transitions.easing.*;
then you create the objects that will make all the dirty work for you, first i will explain the main structure of the constructor of the class and then i will show you very interesting things about this class:
CODE
Tween(target, "property", tweenType, initState, endState, interval, time);
this is the constructor of ower Tween class, and here are the params:
*target: this is the movieclip you want to tween and the one you instanciated before
*"property": this is the property that you want to tween, it could be _x,_y,_width,_alpha,_xscale
*tweenType: this is my favourite, there is several types of tweening, and different methods of ease, and here i will list all of them:
+Back: Extends the transition over one or both ends of the tween.
+Bounce: makes a bouncing effect in the tween at one or both ends.
+Elastic: Creates a mixture of the bounce and back easings. The transition is extended over and bounces back at one or both ends of the Tween.
+Regular: Slower motion at one or both ends of the tween.
+Strong: same thing that regular but is more pronounced when combined with the various easing methods.
+None: the linear transition of ever.
and each tween type has its methods to control the easing:
-easeIn: The ease is applied at the start.
-easeOut: The ease is applied at the end.
-easeInOut – The ease is applied at both the beginning and end of the tween.
and back to the parameters:
*initState: this is a numeric value, and refers to the initial value of the property you specified before
*endState: this is a numeric value too, and refers to the end value for the property you specified before, and ends with the transition
*interval: this is a numeric value too, and specifies, ho much do you want it to delay the transition according with the next parameter, it could be measured in seconds or frames.
*time: it's a boolean(true or false), and specifies the measure of time, if it's true, you are working on seconds, else you are on frames.
now that i have explained the structure of the class's constructor, let's take a look at the rest
here you initialize your objects, as i told you
CODE
var xposT:Tween = new Tween(my_mc, "_x", Strong.easeIn, 0, Stage.width, 1, true);
var yposT:Tween = new Tween(my_mc, "_y", Bounce.easeOut, 0, Stage.Height, 1, true);
var rotationT:Tween = new Tween(my_mc,"_rotation",Elastic.easeInOut,0,360,true);
and here is one of the methods of the Tween class
CODE
rotationT.onMotionFinished = function() {
this.yoyo();
};
with onMotionFinished method, you are telling to the Tween object that when the transition is finished, loops it again with the yoyo() method so it will loops forever
finally we have a nice method useful to control translations of ower movieclip, with only one line of code, and i'm talking about continueTo(nextValue,duration) method
CODE
xposT.onMotionFinished = function() {
this.continueTo(Stage.width/2,1);
};
continueTo(nextValue,duration) method, tells to the tween object the next transition you want to do, from the last value you entered, to the nextValue numeric value.
you could control your transitions from any event of any object of flash, for examples, this will tell to the tween object to move the movieclip to the right-bottom corner in two seconds:
CODE
_root.onPress = function(){
xposT.continueTo(Stage.width,2);
yposT.continueTo(Stage.height,2);
};
almost forgot, Stage.width and Stage.height, are the width and height of your swf.
well i hope this don't look ugly or confuse, good luck!
Reply