FLASH hide class announcement/Use

Source: Internet
Author: User
Tags rewind

FLASH hide class announcement/Use

--------------------------------------------------------------------------------
Original MM unpublished Tween/Easing class tutorial translations
Original tutorial translations and demos of un-published Tween/Easing classes by MM

The original article is as follows:
Http://www.actionscript.org/tutorials/advanced/Tween-Easing_Classes_Documented/index.shtml

A few days ago, I translated the full text and added the demo and demo source files:

Unpublished Tween/Easing class in Flash MX 2004

By Devon Wolfgang
Translator: xfykzz

Preface

I don't plan to become a professional AS writer. Sometimes I don't even know what I am doing. Now everything is over. Forgive me for being a master who really understands the.

I have a lot of nonsense. In fact, even though the tutorials I wrote are under FlashMX 2004, the examples are written in AS1.0.

Introduction

When I was hanging out on the Internet, I found that many posts on some forums were discussing unpublished classes in Flash, but I found that there were no articles about the Tween/Easing class,

So I spent a lot of time researching, and now I want to help you.

Body

I. Tween class

Flash now supports a very special new class "Tween" class, which can simplify the movement of many MC functions. Its usage is as follows:
SomeTweenID = new mx. transitions. Tween (object, property, function, begin, end, duration, useSeconds)
The parameters are described as follows:
Object: the name of the MC instance for which you want to add the Tween action.
Property: an attribute of the MC, that is, the attribute of the Tween action to be added.
Function: A method of the easing class (as mentioned below ).
Begin: the value at the start of the attribute.
End: the value at the end of the attribute.
Duration: The number/time of Consecutive Frames.
UseSeconds: A boolean value, which determines whether to use the number of frames (false) or the number of seconds (true). The default value is false.

Now, let's take a look at the methods available in the easing class.

II. Easing class

MX 2004 supports 16 different easing class methods (19 methods should be supported, but four methods are the same). In general, there are five classes of Easing methods, each class and

There are three types, and finally there is the sixth class (only one method is provided, that is, no easing ).

Specifically, there are the following six types:

Strong
Back
Elastic
Regular
Bounce
None

Each type has four methods:

EaseIn
EaseOut
EaseInOut
EaseNone

None is the same as easeNone, So I ignore them. The complete call to this method should be as follows:

Mx. transitions. easing. Bounce. easeOut

Now you need to replace the Placeholder "function" with the above string.

III. combine the two

Now that we have mastered all the basic elements, let's make a complete animation. Imagine that we have created an instance named"

Ball_mc "ball, think of moving from x coordinate to 20 on the side to the place where x coordinate is 380, it takes 0.5 seconds, and play twice at the end. Then we need to write like this:

BallTween = new mx. transitions. Tween (ball_mc, "_ x", mx. transitions. easing. Bounce. easeOut, 20,380,. 5, true );

This string of code is really ugly! We 'd better write it as a function:

Function tweenBall (){
EaseType = mx. transitions. easing. Bounce. easeOut;
Var begin = 20;
Var end = 380;
Var time =. 5;
Var mc = ball_mc;
BallTween = new mx. transitions. Tween (mc, "_ x", easeType, begin, end, time, true );
}

This looks much better. Of course, we still need to call this function. Next we will create a button named "myButton_btn" for the instance, and then add the following on the frame:

Code:
MyButton_btn.onRelease = function (){
TweenBall (); // call Tween
};
Function tweenBall (){
EaseType = mx. transitions. easing. Bounce. easeOut;
Var begin = 20;
Var end = 380;
Var time =. 5;
Var mc = ball_mc;
BallTween = new mx. transitions. Tween (mc, "_ x", easeType, begin, end, time, true );
}

It's not bad, but we can also improve it by setting the easing class method as the entry parameter so that we can customize the running motion mode:
MyButton_btn.onRelease = function (){
TweenBall (mx. transitions. easing. Bounce. easeOut); // pay attention to the easing method parameters of the entry.
};
Function tweenBall (easeType) {// adds a parameter.
Var begin = 20;
Var end = 380;
Var time = 20;
Var mc = ball_mc;
BallTween = new mx. transitions. Tween (mc, "_ x", easeType, begin, end, time );
}

Note that when the time variable is 20, the frame rate is adjusted to 25, and the last boolean parameter "useSeconds" is removed. In this way, the motion is based on the frame,

Now our code looks similar to the previous one, but we need to add 15 buttons to pass different parameters to the function.

All the buttons only call a function, which is more useful.

IV. Further research

In fact, MM also provides several events and methods for this class. The most useful event I found is the onMotionFinished event. What about the method? There are yoyo () and

Rewind ().
For example, if we want to make the ball move cyclically, we just need to change it a little like this:

MyButton_btn.onRelease = function (){
TweenBall (mx. transitions. easing. Bounce. easeOut );
};
Function tweenBall (easeType ){
Var begin = 20;
Var end = 380;
Var time = 20;
Var mc = ball_mc;
BallTween = new mx. transitions. Tween (mc, "_ x", easeType, begin, end, time );
BallTween. onMotionFinished = function (){
This. yoyo ();
}; // An additional event and Method
}
The rewind () method resets the MC with the added Tween motion to the initial state (before the Tween is not added.

Conclusion

Well, I know that I still haven't introduced some things, because some of them are useless, and some of them have no idea how to use them! Of course

The above points will be able to correctly use the Tween/Easing class.

A practical example:

After receiving a lot of emails, I decided to give more examples. After all, no one would just think of moving the ball. The following example will show you where it is used.

The following code is used:
NavText_array = new Array ("Home", "About", "Work", "Play", "Contact ");
SetUpButtons ();
Stop ();
Function setUpButtons (){
Var btnCnt = navText_array.length;
For (I = 0; I var temp = this ["tab" + I + "_ mc"];
Temp. navText. text = navText_array;
Temp. begin = temp. _ y;
Temp. end = temp. _ y-100;
Temp. time = 8; // added three properties for temp
Temp. onrolover = function (){
EaseUp (this );
};
Temp. onrolout = function (){
EaseDown (this );
};
}
}
Function easeUp (what ){
Var tabUp = new mx. transitions. Tween (what, "_ y", mx. transitions. easing. Bounce. easeOut, what. begin,

What. end, what. time);/* here, what is a parameter of the MC type and what is called. begin and other attributes. from this we can see that the author uses the AS1.0 syntax (for example

He said ).*/
}
Function easeDown (what ){
Var begin = what. _ y;
Var tabDown = new mx. transitions. Tween (what, "_ y", mx. transitions. easing. Strong. easeIn, begin, what.

Begin, what. time );
}

To achieve the above effect, you must create a menu item ("tab" + I + "_ mc") for the btnCnt instance.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.