FLEX{er} » Tweening http://www.flexer.info flex developers web corner Tue, 04 Oct 2011 16:23:21 +0000 http://wordpress.org/?v=abc en hourly 1 http://www.flexer.info http://www.flexer.info/favicon.ico FLEX{er} Tweensy – Tweening & Effects Library – Includes Particles Generator Engine http://www.flexer.info/2009/05/01/tweensy-tweening-effects-library-includes-particles-generator-engine/ http://www.flexer.info/2009/05/01/tweensy-tweening-effects-library-includes-particles-generator-engine/#comments Fri, 01 May 2009 00:32:36 +0000 Andrei Ionescu http://www.flexer.info/?p=704
Google Buzz

This week I’ve been searching for a tweening library. Previously I’ve been using more than one tween library like: TweenMax, TweenLight, Tweener, GTween, Adobe’s Tween, etc.

tweensy2But I found about a new tweening library called Tweensy by Shane McCartney on Lost In Actionscript blog.

If you wonder what is new to this tweening library, well…

  • A Bitmap rendering feature allowing for Bitmap Effects not easily achieved from the Adobe filter set such as Directional Motion Blur, Liquid Theshold, Directional Displacement and Buldge/Skew Displacement
  • Particle Emitters to generate smoke, fire, abstract, and magical effects from your motion tweens
  • Vector shape Tweening
  • Gradient Tweening

I’ve playing with it a little bit and the particle generation module is working very well. Although the examples provided with the library are for Flash I’ve been able to generate a fire in Flex, based on an example found in there.

With the particle generator nice effects can be achieved and integrated in different components. For example, a button that will be on fire at rollover and many, many other.

Now that you’ve seen the fire take a look into the code:

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="600" height="400"
    creationComplete="create()"
    updateComplete="update()">
    <mx:Canvas id="mainCanvas" x="0" y="0"
        width="600" height="400">
        <mx:UIComponent id="myUIComponent" 
            x="0" y="0"
            width="600" height="400" />
        <mx:Button id="myButton" horizontalCenter="0" y="300" width="120"/>
    </mx:Canvas>
    <mx:Script>
        <![CDATA[
            // imports
            import com.flashdynamix.motion.effects.core.ColorEffect;
            import com.flashdynamix.motion.effects.core.FilterEffect;
            import com.flashdynamix.motion.extras.Emitter;
            import com.flashdynamix.motion.effects.PerlinDisplacementEffect;
            import com.flashdynamix.motion.layers.BitmapLayer;
 
            // bitmap layer that will hold and add all effect and
            // filters needed 
            private var _layer:BitmapLayer;
            // color transformation
            private var _colorTransform:ColorTransform;
            // displacement effect
            private var _displacementEffect:PerlinDisplacementEffect;
            // our emitter which will generate particles
            private var _emitter:Emitter;
            // another two effects
            private var _filterEffect:FilterEffect;
            private var _colorEffect:ColorEffect;
            // fire particle model
            // emitter will generate particles based on it
            [Embed(source="assets/images/fire.png")]
            private var _fireParticle:Class;
 
            // button labels
            private var _startFireText:String = "Start the fire!";
            private var _endFireText:String = "Stop the fire!";
 
            // create method
            // called before all objects are added to stage
            // stage is not available when this method is called
            private function create():void
            {
                myButton.addEventListener(MouseEvent.CLICK, startFire);
                myButton.label = _startFireText;
                // setting up the fire effect but not showing it
                createFire();
            }    
 
            // update method
            // this will be called when all objects are added to stage
            // stage is available at the moment this method is called
            private function update():void
            {
                // setting the quality to low
                // making it higher will overload the processor
                // and because of heavy calculation artefact may appear
                stage.quality = StageQuality.LOW;
            }
 
            // creating the fire
            // setting it up
            private function createFire():void
            {
                // width
                var tW:Number = 600;
                // height 
                var tH:Number = 400;
                // scale 
                var tS:Number = 2;
 
                // creating bitmap layer
                _layer = new BitmapLayer(tW,tH,tS);
                // creating displacement effect
                _displacementEffect = 
                    new PerlinDisplacementEffect(tW/2,tH/2,tS,-6,1);
                _displacementEffect.baseX = 50;
                _displacementEffect.baseY = 40;
                // creating filter effect
                _filterEffect = new FilterEffect(new BlurFilter(3,3,1));
                // creating color effect
                _colorEffect = new ColorEffect(
                    new ColorTransform(1,1,1,0.95,-20,-20,-20));
                // adding the above effects to bitmap layer
                _layer.add(_displacementEffect);
                _layer.add(_filterEffect);
                _layer.add(_colorEffect);
                // creating color transformation
                _colorTransform = new ColorTransform(0,0,0,1,80,30,15);
                // creating the emitter that will generate particles
                _emitter = new Emitter(
                    _fireParticle, // our particle
                    {
                        rotation: "-22, 44", // rotation: starting from -22 deg 
                                             // and having an interval of 44 deg
                        scaleX: tS,
                        scaleY: tS
                    }, // target's properties
                    2, // frequency: how many particles are created on each frame
                    1, // random: how often the particles are created
                    "255, 285", // angle: allowed movement angle
                    "5, 60", // distance: allowed distance
                    0.5, // speed: time (in sec) to reach destination
                    BlendMode.ADD // blend mode
                );
                // adding color tranformation
                _emitter.transform.colorTransform = _colorTransform;
                // setting the emitter's scale
                _emitter.scale = 0.2;
                // setting x & y position
                _emitter.x = 300 - 20;
                _emitter.y = 150;
                // drawing the bitmap layer
                _layer.draw(_emitter.holder);
                // stoping rendering
                _layer.stopRender();
                // hidding the effect
                myUIComponent.visible = false;
                // adding the bitmap layer to our object holder
                myUIComponent.addChild(_layer);
            }
 
            // starting the fire effect
            private function startFire(e:MouseEvent):void
            {
                // showing the object holder
                myUIComponent.visible = true;
                // starting the effect
                _layer.startRender();
                // events and label set for button
                myButton.removeEventListener(MouseEvent.CLICK, startFire);
                myButton.addEventListener(MouseEvent.CLICK, endFire);
                myButton.label = _endFireText;
            }
 
            // ending the fire effect
            private function endFire(e:MouseEvent):void
            {
                // hiddinh the object holder
                myUIComponent.visible = false;
                // stoping the effect
                _layer.stopRender();
                // events and label for button
                myButton.removeEventListener(MouseEvent.CLICK, endFire);
                myButton.addEventListener(MouseEvent.CLICK, startFire);
                myButton.label = _startFireText;
            }
        ]]>
    </mx:Script>
</mx:Application>

I hope the code is clear and well documented. The values used are taken from the examples found in the Tweensy archive and some of them modified by trial and error to suit my needs. The documentation is ok but it can be better because some details are missing. There is a need to specify that the particle model is a png image – a flame image (see source file archive).

Anyway, Shane did a great job with this effects library because is more than a tween library.

If you’re wondering which of the three available Tweensy version I used… the answer is Tweensy FX. Only Tweensy FX contains the particles generation module.

Attention: Do not right click on the application. It seems that there is a problem with this because the browser window freezes a while.

As usual source files are available for download.

Resources on Tweensy:
Preview article on Lost in Actionscript blog
Tweensy on Google Code
Download page for Tweensy on Google Code

]]> http://www.flexer.info/2009/05/01/tweensy-tweening-effects-library-includes-particles-generator-engine/feed/ 0 How To Use FIVe3D And Tweening in Flex http://www.flexer.info/2008/06/19/how-to-use-five3d-and-tweening-in-flex/ http://www.flexer.info/2008/06/19/how-to-use-five3d-and-tweening-in-flex/#comments Thu, 19 Jun 2008 10:50:46 +0000 Andrei Ionescu http://www.flexer.info/?p=209

Table of contents

  1. How To Use FIVe3D In Flex
  2. How To Use FIVe3D And Tweening in Flex
Google Buzz

In a previous article I explained how to use FIVe3D with Flex and because fl.motion is not included into the Flex Framework we had to find out a workaround. I commented out the lines that referenced fl.motion but Kelvin Luck found another way: “copy the classes from Flash CS3 Actionscript framework into the project”. So this time the FIVe3D framework is untouched and fl.motion is included into the project.

Lets skip the intro and get into it… In this article I added some tweening to the example from the previous article. The framework I used are:

These are the tree tweening frameworks we will add but from all of them TweenLite seems to be the easiest to use.

There is no visible difference between TweenLite, fl.transition and Tweener but in the future I may add some benchmarks.

Now take a look at the code and you can choose what tweenning library you’ll use.

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    backgroundGradientColors="[#dddddd,#dddddd]"
    layout="absolute" 
    width="500"
    height="600"
    creationComplete="start()">
    <mx:UIComponent id="mainUI" 
        width="500" height="500"/>
    <mx:Script>
        <![CDATA[
 
            import five3D.typography.HelveticaBold;
            import five3D.utils.Drawing;
            import five3D.display.Scene3D;
            import five3D.display.DynamicText3D;
            import five3D.display.Shape3D;
            import five3D.display.Sprite3D;
 
            import gs.TweenLite;
            import caurina.transitions.Tweener;
            import fl.transitions.Tween;
            // we will use Exponential.easeOut 
            // function in tweening
            import mx.effects.easing.Exponential;
 
            private var scene3D:Scene3D;
            private var sprite3D:Sprite3D;
            private var star3d:Shape3D;
            private var flexerWord:DynamicText3D;
            private var hiWord:DynamicText3D;
 
            // start drawing
            private function start():void
            {
                // create the scene
                scene3D = new Scene3D();
                scene3D.x = 250;
                scene3D.y = 250;
                // create the round rectangle/square
                sprite3D = new Sprite3D();
                sprite3D.graphics3D.beginFill(0x000000);
                sprite3D.graphics3D.drawRoundRect(-150,-150,300,300,40,40);
                sprite3D.graphics3D.endFill();
                // rotate the round rectangle/square randomly
                sprite3D.rotationX = Math.random()*100-50;
                sprite3D.rotationY = Math.random()*100-50;
                sprite3D.rotationZ = Math.random()*100-50;
                // create the star
                star3d = new Shape3D();
                Drawing.star(star3d.graphics3D,20,60,50,0,0x6699cc);
                star3d.x = 120;
                star3d.y = -80;
                // rotate the start
                star3d.addEventListener(Event.ENTER_FRAME,
                    function (event:Event):void {
                        // rotate on Z axe 
                        event.target.rotationZ++; 
                    }
                );
                // "fxr" word
                flexerWord = new DynamicText3D(HelveticaBold);
                flexerWord.size = 45;
                flexerWord.color = 0xFFFFFF;
                flexerWord.text = "Fxr";
                flexerWord.x = 88;
                flexerWord.y = -110;
                // "hi" word
                hiWord = new DynamicText3D(HelveticaBold);
                hiWord.size = 100;
                hiWord.color = 0x555555;
                hiWord.text = "Hi!";
                hiWord.x = -112;
                hiWord.y = -34;
                // click event on the round rectangle/square
                sprite3D.addEventListener(MouseEvent.CLICK,handleSquareClick);
                sprite3D.mouseChildren = false;
                sprite3D.buttonMode = true;
                // adding scene to the main UI component
                mainUI.addChild(scene3D);
                // adding round rectangle/square to the scene
                scene3D.addChild(sprite3D);
                // adding the start to the round rectangle/square
                sprite3D.addChild(star3d);
                // adding "fxr" word to the round rectangle/square
                sprite3D.addChild(flexerWord);
                // adding "hi" word to the round rectangle/square
                sprite3D.addChild(hiWord);
            }
 
            private function handleSquareClick(event:MouseEvent):void
            {
                // rotate the round rectangle/square randomly
                // all 3 axes
                switch (whichTween.selectedValue)
                {
                    case "notween":
                    {
                        // no tween
                        event.target.rotationX = Math.random()*100-50;
                        event.target.rotationY = Math.random()*100-50;
                        event.target.rotationZ = Math.random()*100-50;
                        break;
                    }
                    case "tweenlite":
                    {
                        // using TweenLite
                        TweenLite.to(
                            // target object
                            event.target,
                            // duration
                            1.5,
                            {
                                // target property: value
                                rotationX:Math.random()*100-50,
                                // target property: value
                                rotationY:Math.random()*100-50,
                                // target property: value
                                rotationZ:Math.random()*100-50,
                                // easing function
                                ease:Exponential.easeOut
                            }
                        );
                        break;
                    }
                    case "tweener":
                    {
                        // using Tweener
                        Tweener.addTween(
                            // target object
                            event.target,
                            {
                                // target property: value
                                rotationX:Math.random()*100-50,
                                // target property: value
                                rotationY:Math.random()*100-50,
                                // target property: value
                                rotationZ:Math.random()*100-50,
                                // duration
                                time:1.5,
                                // easing function
                                transition:"easeoutexponential"
                            }
                        );
                        break;
                    }
                    case "fltransition":
                    {
                        // using fl.transition from Flash 
                        // CS3 Actionscript 3 Framework
                        var xTween:Tween = new Tween(
                            event.target /* target object */,
                            "rotationX" /* target property */,
                            Exponential.easeOut /* easing function */,
                            event.target.rotationX /* start point */,
                            Math.random()*100-50 /* end point */,
                            1.5 /*duration in seconds */,
                            true /* use seconds */
                        );
                        xTween.start();
                        var yTween:Tween = new Tween(
                            event.target /* target object */,
                            "rotationY" /* target property */,
                            Exponential.easeOut /* easing function */,
                            event.target.rotationY /* start point */,
                            Math.random()*100-50 /* end point */,
                            1.5 /*duration in seconds */,
                            true /* use seconds */
                        );
                        yTween.start();
                        var zTween:Tween = new Tween(
                            event.target /* target object */,
                            "rotationZ" /* target property */,
                            Exponential.easeOut /* easing function */,
                            event.target.rotationZ /* start point */,
                            Math.random()*100-50 /* end point */,
                            1.5 /*duration in seconds */,
                            true /* use seconds */
                        );
                        zTween.start();
                        break;
                    }
                }
            }
 
        ]]>
    </mx:Script>
    <mx:RadioButtonGroup id="whichTween"/>
    <mx:RadioButton x="10.0" y="572" label="No Tween" groupName="whichTween" 
        value="notween" selected="true"/>
    <mx:RadioButton x="105" y="572" label="TweenLite" groupName="whichTween" 
        value="tweenlite"/>
    <mx:RadioButton x="202" y="572" label="fl.transition" groupName="whichTween" 
        value="fltransition"/>
    <mx:RadioButton x="307" y="572" label="Tweener" groupName="whichTween" 
        value="tweener"/>
</mx:Application>

This is all for now… the source files are available to download.

Some additional resources regarding tweening: TweenLite, Tweener, TweenLite Basic Tutorial, Tweens tutorial and fl.transition at LiveDocs

Previous in series
]]> http://www.flexer.info/2008/06/19/how-to-use-five3d-and-tweening-in-flex/feed/ 5