FLEX{er} » 3D 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} Adobe® AIR® and Adobe Flash® Player Incubator – Flash Player 11 Available http://www.flexer.info/2011/03/01/adobe%c2%ae-air%c2%ae-and-adobe-flash%c2%ae-player-incubator-flash-player-11-available/ http://www.flexer.info/2011/03/01/adobe%c2%ae-air%c2%ae-and-adobe-flash%c2%ae-player-incubator-flash-player-11-available/#comments Mon, 28 Feb 2011 21:33:57 +0000 Andrei Ionescu http://www.flexer.info/?p=1810
Google Buzz

The Adobe® AIR® and Adobe Flash® Player Incubator is a technology preview program for more adventurous developers who are willing to experiment with Flash Platform runtime features that are in early development stages. Test the bleeding-edge capabilities of runtimes and contribute to the future of the Flash Platform. Please note that the capabilities in the Incubator builds may or may not be supported in future releases of the runtimes.

Adobe Flash Player 11 Incubator can be downloaded from http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html and debug versions are also available.

The main thing added in Flash Player 11 Incubator is “Molehill” 3D APIs for Flash Player and AIR which is a new set of low-level, GPU-accelerated 3D APIs that enable advanced 3D experiences across devices through the Adobe Flash Platform runtimes.

This is a video to see what’s about “Molehill”:

To test the new 3D capabilities of Flash Player 11 Incubator see:

Read more:
http://blog.everythingflex.com/2011/03/01/flash-player-11-incubator-program/

]]> http://www.flexer.info/2011/03/01/adobe%c2%ae-air%c2%ae-and-adobe-flash%c2%ae-player-incubator-flash-player-11-available/feed/ 0 Anaglyphs with Pixel Bender http://www.flexer.info/2010/07/26/anaglyphs-with-pixel-bender/ http://www.flexer.info/2010/07/26/anaglyphs-with-pixel-bender/#comments Mon, 26 Jul 2010 17:54:21 +0000 Andrei Ionescu http://www.flexer.info/?p=1677 There are multiple kinds of 2 color glasses used with anaglyphs but the demo in Jozef’s article is for the common cyan-magenta glasses. To find out more read Jozef’s article: http://blog.yoz.sk/2010/06/anaglyphs-with-pixel-bender-and-depth-map/ ]]>
Google Buzz

Jozef Chúťka has did manage to create anaglyphs using Pixel Bender and displacement maps. The result is amazing!

There are multiple kinds of 2 color glasses used with anaglyphs but the demo in Jozef’s article is for the common cyan-magenta glasses.

To find out more read Jozef’s article: http://blog.yoz.sk/2010/06/anaglyphs-with-pixel-bender-and-depth-map/

]]> http://www.flexer.info/2010/07/26/anaglyphs-with-pixel-bender/feed/ 4 ROXIK Sharikura 3D Library http://www.flexer.info/2008/06/27/roxik-sharikura-3d-library/ http://www.flexer.info/2008/06/27/roxik-sharikura-3d-library/#comments Fri, 27 Jun 2008 12:00:32 +0000 Andrei Ionescu http://www.flexer.info/?p=216
Google Buzz

Today I found a new 3D engine: AS3 ROXIK Sharikura 3D Library. It is great from what I could see from their demos. Interesting is this demo where you can add more and more object to the animation but the animation is not jerky.

The library at this moment is not released but Masayuki Kido said the following to Manfred Weber in this post:

I am going to exhibit Sharikura 3D as an open source.
However, Sharikura 3D is unfinished.
Because Sharikura 3D is my private work,
please understand that it takes time to release.

Releasing AS3 ROXIK Sharikura 3D Library as open source is great and we are anxious to work with it. But till then enjoy this links:
http://roxik.com/toy1.html
http://temp.roxik.com/datas/perform/index.html
http://temp.roxik.com/datas/web_edition_tour/index.html
http://temp.roxik.com/datas/bone/index.html
http://temp.roxik.com/datas/physics/index.html
http://temp.roxik.com/datas/cloth/index.html
http://temp.roxik.com/datas/max2007/index.html
http://temp.roxik.com/datas/mobile/index.html
http://temp.roxik.com/
http://roxik.com/pictaps/

]]> http://www.flexer.info/2008/06/27/roxik-sharikura-3d-library/feed/ 8 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 How To Use FIVe3D In Flex http://www.flexer.info/2008/06/17/how-to-use-five3d-in-flex/ http://www.flexer.info/2008/06/17/how-to-use-five3d-in-flex/#comments Tue, 17 Jun 2008 13:18:03 +0000 Andrei Ionescu http://www.flexer.info/?p=205

Table of contents

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

For some time I’ve been planning to use FIVe3D of Mathieu Badimon, in Flex, not in Flash. I’ve been trying to make it work but no success ’till now.

After more than 4, 5 tries, I’ve managed to take the example from the FIVe3D framework and implemented it in Flex. It was not an easy task because of some compile errors, regarding the missing fl.motion package. What I found out is that fl.motion package is included in Flash CS3 but not into Flex framework and although FIVe3D is AS3 is not fully compatible with Flex framework (see it in livedocs).

What I did to make it work?

  1. Downloaded the FIVe3D framework from five3d.mathieu-badimon.com. Sometimes the site is not working and the user is redirected to 404.online.net.
  2. Created a new Flex Project and copied the whole five3D folder (with display, geom, typography and utils) from the archive into it.
  3. Taken the Main.as file from first_example folder and started copying lines into my new project
  4. Commented out the lines of code from (commented where fl.motion is used):
    • Shape3D.as – line 17 and from line 279 to 282
    • Sprite3D.as – line 18 and from line 302 to 306
    • Bitmap3D.as – line 21 and from line 477 to 480

My FIVe3D example is bellow (working application and code).

You can click on the rounded square to rotate it randomly.
 

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

<?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="500"
    creationComplete="start()">
    <mx:UIComponent id="mainUI"/>
    <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;
 
            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, 
                    function(event:MouseEvent):void
                    {
                        // rotate the round rectangle/square randomly
                        // all 3 axes
                        event.target.rotationX = Math.random()*100-50;
                        event.target.rotationY = Math.random()*100-50;
                        event.target.rotationZ = Math.random()*100-50;
                    }
                );
                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);
            }
        ]]>
    </mx:Script>
</mx:Application>

The FIVe3D framework is simple and is seems to draw very fast. What can be the next step: using tweening with FIVe3D in Flex.

Some related resources:
http://labs.vizar.de/blog/2008-05-12/first-steps-with-five3d/
http://tech.nitoyon.com/blog/2008/05/keynote_like_cube_transition.html

Next in series
]]> http://www.flexer.info/2008/06/17/how-to-use-five3d-in-flex/feed/ 9 Alternativa 3D – two new examples http://www.flexer.info/2008/04/18/alternativa-3d-two-new-examples/ http://www.flexer.info/2008/04/18/alternativa-3d-two-new-examples/#comments Fri, 18 Apr 2008 16:19:12 +0000 Andrei Ionescu http://www.flexer.info/?p=145

Table of contents

  1. Framework spotlight
  2. Alternativa 3D – two new examples
Google Buzz

In a previous article we presented a new 3D engine framework. Now this engine evolved and now is moving better/faster. On the site of this engine are two new examples and you can see that this engine is the future of online gaming.

Enjoy the examples and great job done by the guys at Alternativa.

Previous in series
]]> http://www.flexer.info/2008/04/18/alternativa-3d-two-new-examples/feed/ 0 Actionscript and Flash 3D Experiments – Mr. Doob http://www.flexer.info/2007/12/04/actionscript-and-flash-3d-experiments-mr-doob/ http://www.flexer.info/2007/12/04/actionscript-and-flash-3d-experiments-mr-doob/#comments Tue, 04 Dec 2007 09:01:17 +0000 Andrei Ionescu http://www.flexer.info/2007/12/04/actionscript-and-flash-3d-experiments-mr-doob/
Google Buzz

Today I found a great site with a lot of flash and actionscript 3D experiments. Great examples. Although some of them have some error there are still a lot of 3D examples to see.

This is not directly connected with Flex but inside those application are thousands of code lines written in actionscript.

The best examples in my opinion are the ones that experiments the Depth of Field and some Audio Visualization.

Here it is: http://mrdoob.com/.

]]> http://www.flexer.info/2007/12/04/actionscript-and-flash-3d-experiments-mr-doob/feed/ 2 Sandy 3D Engine in Actionscript http://www.flexer.info/2007/11/14/sandy-3d-engine-in-actionscript/ http://www.flexer.info/2007/11/14/sandy-3d-engine-in-actionscript/#comments Wed, 14 Nov 2007 08:53:08 +0000 Andrei Ionescu http://www.flexer.info/2007/11/14/sandy-3d-engine-in-actionscript/
Google Buzz

This 3D engine already at version 3.0 thing that means it is growing.

Here it is: http://www.flashsandy.org/.

Demos here: http://www.flashsandy.org/demos

This is the demo I liked: http://www.flashsandy.org/demos/protopop_walk

Sandy 3D Engine in Actionscript - demo screenshot

We had another post (Framework spotlight) in the past also regarding another 3D framework and seeing how this is evolving we can say that in the future we may have MMORPGs and Shooters directly in the browser window (without installation). And if we keep in mind that the next flash player may have access to 3D hardware acceleration this dream may come true. This also will put Adobe in a good position in the game development market and that means competition and more good/cheap/quality games/applications.

]]> http://www.flexer.info/2007/11/14/sandy-3d-engine-in-actionscript/feed/ 1 Framework spotlight http://www.flexer.info/2007/10/26/framework-spotlight/ http://www.flexer.info/2007/10/26/framework-spotlight/#comments Fri, 26 Oct 2007 08:14:16 +0000 Virgil Cristea http://www.flexer.info/2007/10/26/framework-spotlight/

Table of contents

  1. Framework spotlight
  2. Alternativa 3D – two new examples
Google Buzz

Today a friend send me a link that I feel I need to share with the others:

AlternativaGame- a 3d framework done in flash.

For a demo go here

Next in series
]]> http://www.flexer.info/2007/10/26/framework-spotlight/feed/ 3