USING TWEENSY : particle runtime effects with Actionscript 3 and FLASH CS4
In the market are existing a lot of Tween libraries to help Flash/Flex developers to build cool actionscript animation making their life easier, like TweenLite/ TweenMax or Caurina Tweener.
These libraries included cool stuff not provided from the default AS3 tween class like colors animation, animated drop, blur, shadow effect and much more.
So, in this post, i want to show you another tween engine, Tweensy, that provide a lot of cool bitmap and particle effects like smoke, fire and other “magical” stuff
In the first sample we’ll play with the TweensyTimeline to create blurred animations with a track effect.
In the second sample we’ll use the Emitter class to create a cool rollover effect over a Button.
USING TWEENSY
sample 1: BLURRED MOVIECLIP ANIMATION EFFECT
Live Demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | package { import flash.display.*; import flash.filters.BlurFilter; import flash.geom.ColorTransform; import com.flashdynamix.motion.*; import com.flashdynamix.motion.effects.*; import com.flashdynamix.motion.layers.BitmapLayer; import flash.events.MouseEvent; import fl.motion.easing.*; public class TrackBlur extends MovieClip { private var tween : Tweensy; private var layer : BitmapLayer; private var bf : BlurFilter; public var horizzBar : HorizzontalBar; public var mousePointer : MousePointer; public function TrackBlur() { tween = new Tweensy(); // Create a Bitmap Layer where we'll draw the movieclip container, applying some effects too bf = new BlurFilter(6, 6, 1); layer = new BitmapLayer(550, 400, 2); layer.add(new ColorEffect(new ColorTransform(1, 0.5, 1, 0.85))); layer.add(new FilterEffect(bf)); addChild(layer); // Create MovieClip Container var holder : Sprite = new Sprite(); // Create Horizzontal White Bar horizzBar = new HorizzontalBar(); horizzBar.x = 0; horizzBar.y = 20; holder.addChild(horizzBar); // Create Mouse pointer mousePointer = new MousePointer(); mousePointer.x = 230; mousePointer.y = 50; holder.addChild(mousePointer); // Horizzontal Bar animation var tlRectLine : TweensyTimeline = tween.to(horizzBar, {y:300, alpha:0.2, rotation:10}, 2, Back.easeOut); tlRectLine.easeParams = [0.5]; tlRectLine.repeatable = TweensyTimeline.YOYO; // Display Layer on screen layer.draw(holder); // Mouse Click this.buttonMode = true; this.stage.addEventListener(MouseEvent.CLICK, moveMouseCursor) } /** * When mouse is clicked */ private function moveMouseCursor(e:MouseEvent):void { // Move the mouseCursor Movieclip at current mouseX and mouseY var tlMousePointer : TweensyTimeline = tween.to(mousePointer, {x: mouseX, y:mouseY}, 1, Back.easeInOut); tlMousePointer.easeParams = [0.5]; } } } |
sample 2 : PARTICLE ROLLOVER EFFECT
Live Demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | package { import flash.display.*; import flash.events.*; import flash.filters.BlurFilter; import flash.geom.ColorTransform; import flash.text.TextField; import flash.utils.getDefinitionByName; import com.flashdynamix.motion.*; import com.flashdynamix.motion.effects.*; import com.flashdynamix.motion.extras.Emitter; import com.flashdynamix.motion.layers.BitmapLayer; public class MenuEmitter extends Sprite { public var menuButton:MovieClip; private var emittor : Emitter; private var layer : BitmapLayer; private var ct : ColorTransform; private var bf : BlurFilter; private var tx : Number; private var ty : Number; public function MenuEmitter() { // Create a Bitmap Layer where we'll draw the Emitter and apply some effects layer = new BitmapLayer(900, 400); bf = new BlurFilter(10, 10, 2); layer.add(new ColorEffect(new ColorTransform(1, 1, 1, 0.9))); layer.add(new FilterEffect(bf)); // Set quality to LOW to get better performance stage.quality = StageQuality.LOW; // The Emitter MovieClip "BluePrint" var Box : Class = getDefinitionByName("Box") as Class; // Emitter Creation ct = new ColorTransform(1, 1, 1, 1, -115, -30, 70); emittor = new Emitter(Box, null, 2, 1, "0, 360", "1, 110", 1, BlendMode.ADD); emittor.transform.colorTransform = ct; emittor.endColor = {redOffset:255, greenOffset:-10, blueOffset:-270, alphaOffset:-255}; // We can't build the emitter on 0,0 because it will be cutted on the top and on the left side emittor.x = 150 emittor.y = 150 // Display on screen layer.draw(emittor.holder); menuButton.addChildAt(layer,0); // Stop emitter at startTime emittor.stop() // RollOver / RollOut on button menuButton.gfx.buttonMode = true; menuButton.gfx.addEventListener(MouseEvent.ROLL_OVER, onMenuRollOver) menuButton.gfx.addEventListener(MouseEvent.ROLL_OUT, onMenuRollOut) // ENTER_FRAME event // We'll update the emittor properties to generate random addEventListener(Event.ENTER_FRAME, update) } /** * Update emittor rotation properties to have different rotation for each particle */ private function update(e : Event) : void { emittor.rotation += 20; } /** * At Button rollOver start the emitter */ private function onMenuRollOver(e : MouseEvent) : void { emittor.start() } /** * At Button rollOut stop the emitter */ private function onMenuRollOut(e : MouseEvent) : void { emittor.stop() } } } |
Download Source Code (FLASH CS4)
NOTE: you won’t find the Library source code in the zip file because you should download the last version from http://code.google.com/p/tweensy/
Tweensy is still in beta and to create the samples above (getting much more than inspiration from the provided demo) I used an old library version, so when you’ll download the new one you could get some compiler errors.











I gave this a try and succeeded , thank you for sharing.
I am just amazed to recognize how much of content I received on this specific matter. I m so extremely grateful of you. The one thing I can say that, after learning this post I became stored from the whole ineffective search I ought to have done on this problem.
Leave your response!
Archives
Categories
Blogs
3D ActionScript Adobe AIR AIR for Android android Arduino Binding burrito hero 4.5 TabbedMobileApplication Chat Chrome Cocomo code optimization components custom/generic components custom components DataList developer central Emitter FLARToolkit Flash Flash Builder Flex HTTPService illustrator Infrared Interactions itemRenderer Joystick Loader mobile Papervision PHP Rss Servo singleton Skin Skinning Transitions Tween URLLoader URLRequest Vertical Scrollbar VScrollbar youtube
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.