Home » 3d parts libraries, ActionScript 3.0, Adobe, Flash AS 3

USING TWEENSY : particle runtime effects with Actionscript 3 and FLASH CS4

15 August 2009 2 Comments

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 ;)

tweensy

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.

tweensysamples

USING TWEENSY

sample 1: BLURRED MOVIECLIP ANIMATION EFFECT

Live Demo:

This movie requires Flash Player 10

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:

This movie requires Flash Player 10

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.

2 Comments »

  • Sharedtut said:

    I gave this a try and succeeded , thank you for sharing.

  • Jordan 6 rings said:

    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!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.