3 lines of code every Flash user needs to know
No more easing with Motion Tweens. These 3 lines of code are (in my opinion) the most important for ANY flash user:
This code creates realistic high quality tweens with easing and can be applied to any movie clip in your Flash movie. Using actionscript to animate greatly reduces the file size of your flash movies (which makes your load times much quicker) because it eliminates the need for a timeline to execute the tween. You should get to know these 3 lines of code intimately. If you are a beginner at actionscript, this can look scary at first, but I promise you, it will save you endless hours of work. Download the examples and play with the code. Each example on this page is a single-frame flash movie.
The Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(instanceName, property, func, begin, finish, duration, useSeconds);
I’ll explain. Here is a visual aid to get us started:
How to use this actionscript:
Open your flash file or create a new one. Make sure your movie clip is on the stage and it has an instance name. Put the actionscript above in your actions layer on the frame where you want the tween to begin, fill in your desired options from the chart above, test your movie, and watch the magic happen! It’s that simple. Important: YOU HAVE TO IMPORT THE CLASSES ON EACH FRAME WHERE YOU WANT A TWEEN TO HAPPEN. Download one of the example flash movies (source files below) if this sounds confusiong.(the first 2 lines of the code above)
What are my options?
1. Instance name: Can be a String or a variable. The instance name of the movie clip on the stage that you want to tween.
2. Property: The property of the movie clip you want to tween or change.
Examples - _alpha, _x, _y, _width, _height, etc.
3. Type of Tween: Your options are - Back, Bounce, Elastic, Regular, Strong, or None.
Important: You MUST capitolize the first letter of this option.
4. Type of Easing Your options are - easeIn, easeOut, or easeInOut. (note the capitalization here)
[kml_flashembed movie="http://www.bittbox.com/wp-content/uploads/2007/01/rotationEasing.swf" height="100" width="465" /]
5. Beginning Value: Can be a Number or a variable. The value of the property you choose when the tween begins.
Example: If you want to fade an image in ( using _alpha (opacity), you would begin at 0 and end at 100 )
6. Ending Value: Can be a Number or a variable. The value of the property you choose when the tween is finished.
7. Duration: The number of frames or seconds it takes to execute the tween.
8. useSeconds: Set to true to use seconds. Set to false to use frames. Note: using frames - adjust your frame rate to see better results.
Working Examples:
Related Posts:
- Troubleshooting a Flash Preloader.
- How to make Smooth Lines in Illustrator
- Have a Website? It’s Time to Add a WebClip Icon
- Illustrator: Using Swift as a powerful 3D Illustration Tool
- Fun with Illustrator’s Blend Tool
- Free Stuff: 3 Copies of Swift3D V5 Up for Grabs, Comment to Win
excelente!!! very good mini-tutorial. i love it.!!! thanks a lot for your time.!! good work. greats from argentina.
They could quite possibly be the most important three lines of code….
| am currently building a one frame animated flash site, because as you pointed out the download time of any site is crucial.
Thank you
I can’t even count the times I’ve used those same 3 lines.
~BittBox
Very nice hint. Thank you.
Reminds me of the XPathAPI in that its essential code that seems to have slipped through the cracks. If you use the tweening code a lot you should check out
sorry, the link I tried to post was this…
http://www.mosessupposes.com/Fuse/
brilliant bit of code just what I needed. I am using it to build a drop down menu I have placed a load of standard buttons inside a movieclip and applied the code trouble is none of the button rollovers or code applied to them works anymore! does anyone know why? Thanks
nick,
I’m guessing here, but you have to import the classes (the first 2 lines of code above) on every frame that you tween something, even inside movieclips.
~BittBox
Hi I’ve tried importing the classes as you suggested BittBox but it is still not working. I have a graphic within a button within a movieclip all with classes imported to each frame. Do you have any other suggestions?
This is really cool!
If anyone has trouble really understanding it there is a Cartoonsmart lesson specifically for this. Did I spell specifically right? Who cares.
Bittbox friggin rules!
very good tutorial. i like it.!!!
good work
How would you code the .fla so that the actions happen when the app is loaded as opposed to a user command suck as a click or mouse over?
- Josh
why is the script being put at the first frame; and also inside each MCs?
owesom!!!!!!!
owesome!!!!!!
Very helpful code, but I am not able to use it. I am using Flash CS3 and Action Script 3, and the compiler blows up when I try to import mx.transitions.Tween. It appears that it is not included with AS3. I have searched and searched for a workaround but to no avail.
Any guidance would be greatly appreciated.
Hello again,
I thought some others may be interested in this. After struggling to use this code with AS3, I found that it has been changed slightly, and you now must import fl.transitions.Tween and fl.transitions.easing.*.
Unfortunately, I also found that the Tween class has some bugs in it, and will randomly only play about halfway through the Tween and then fail to finish. I am currently unaware of any workarounds.
Just thought this may be useful information for anyone trying to use the code with AS3, as I spent entirely too long figuring this out for myself.
Great, thank you
wow this is funny ;-) Very nice
thank you .
Thanx
Nice..
[...] Using Flash? Then you gotta know this: three simple lines of code that’ll help create realistic easing…much more realistic than using the old fashioned Motion Tweening–and Bitbox’ll show ya how. It involves a bit of ActionScript, but if you’re a noob to this sort of thing, fear not. Says Bit, “If you are a beginner at actionscript, this can look scary at first, but I promise you, it will save you endless hours of work.” Get tha goods! [...]
thanks…. online dizi dizi izle seyret
Thanks its verry veryy cool help
i appreciate to your work
Thanks again
This is awesome! I have one question though, how can I edit it so that it doesn’t make the movements random? I’m not an actionscript expert and I was wondering how to control the movements. I’m trying to use it to build an accordion style menu.
Thanks!
same thing i tried on button click but it does not work
can anyone help me on it….pls