LA Flash and Flex Developer
9 Aug
People don’t always realize that the Macromedia Tween Classes does more than just move MovieClips or fade MovieClips in and out. I wish I got a nickel for everytime I heard someone say I didn’t know you could do “that” with the Tween class. Most people do not realize you can tween filters (blur, dropshadow, glows, bevel, etc). And even more people don’t realize you can use the tween class to control volume on a sound object or change the font size of a text field. Basically you can blur any property. Here is an example of text being blured via the tween class.
import flash.filters.BlurFilter;
import mx.transitions.easing.Regular;
import mx.transitions.Tween;
var template_mc:MovieClip = this;
var textHolder:MovieClip = template_mc.createEmptyMovieClip('textHolder_mc',
template_mc.getNextHighestDepth());
var tf:TextFormat = new TextFormat();
tf.font = '_serif';
tf.color = 0x000000;
tf.size = 18;
textHolder.createTextField('text_txt', 1, 0, 0, 200, 50);
textHolder.text_txt.text = 'This is my device font uber blur test';
textHolder.text_txt.autoSize = 'left';
textHolder.text_txt.setTextFormat(tf);
textHolder._x = (Stage.width/2) - (textHolder._width/2);
textHolder._y = (Stage.height/2) - (textHolder._height/2);
var blurText = new Tween(textHolder, "blur", Regular.easeOut, 0, 16, 3, true);
blurText.onMotionChanged = function(ev:Object) {
ev.obj.filters = [new BlurFilter(ev.obj.blur, ev.obj.blur, 3)];
}
blurText.onMotionFinished = function() {
this.yoyo();
}
Here is an example using the tween class to change the font size of a text field.
import flash.filters.BlurFilter;
import mx.transitions.easing.Elastic;
import mx.transitions.Tween;
var template_mc:MovieClip = this;
var textHolder:MovieClip = template_mc.createEmptyMovieClip('textHolder_mc',
template_mc.getNextHighestDepth());
var tf:TextFormat = new TextFormat();
tf.font = '_serif';
tf.color = 0x000000;
tf.size = 18;
textHolder.createTextField('text_txt', 1, 0, 0, 200, 50);
textHolder.text_txt.text = 'This is my device font test uber size test';
textHolder.text_txt.autoSize = 'center';
textHolder.text_txt.setTextFormat(tf);
textHolder._x = (Stage.width/2) - (textHolder._width/2);
textHolder._y = (Stage.height/2) - (textHolder._height/2);
var stretchText = new Tween(textHolder.text_txt, "size", Elastic.easeOut, 18, 75, 2, true);
stretchText.onMotionChanged = function(ev:Object) {
var newSize = Math.round(ev._pos);
var tf:TextFormat = new TextFormat();
tf.size = newSize;
ev.obj.setTextFormat(tf);
}
stretchText.onMotionFinished = function() {
this.yoyo();
}
Any numeric value can be “tweened”, try it out yourself, it is a very useful class.
Leave a reply