Flash3D profesionnal tool

Archive for the 'Resources' Category

Flash player 8 sous Linux !

Saturday, March 11th, 2006 by kiroukou :: General, Resources, en :: 4 Comments

Hi all,

This morning a friend of mine with a good knowledge of Linux platform told me about ies4linux !

Quote from their website:

IEs for Linux is a simple Bash Script program that installs Internet Explorer 6, 5.5 and 5 on Linux using Wine. The whole process is automatic and very easy.
… You don’t need to click on anything to install IE6, IE5.5 and IE5 - with FlashPlayer 8! 

A really good news for all Linux fanatics :)

Webcam 3D objects texturing thanks to BitmapData

Wednesday, November 16th, 2005 by Kiroukou :: Resources, en :: 1 Comment

All the people who were interested by 3D has thought about the texturing thing. . We all hoped to be able to distort a bitmap to fits it on the 3D object's face. But who expected to be able to texture with a live video such as webcam?

People who have already looked at our examples files should know that Sandy gives the possibility to easily texture an object with your webcam video stream, and I will explain this point a bit more in this post

Since Flash8, as all of you already know, you are allowed to access to pixel with the BitmapData class. But the best thing is that Macromedia gave us the possibility to use this thing pretty much everywhere ! We have a complete MovieClip BitmapData relation which is really powerful. Moreover, you can use directly some transformations for the bitmap drawing.

We use this new feature in our API to texture a face. Basically we align the whole bitmap to fit it with our 3 points, and then use MovieClip.beginBitmapFill() to draw only what we need. So now, our TextureSkin class, which is the class used to texture Object3D, is basically a composition of a bitmapData with some face's points access.

You should be able to find the following part by yourself now :)

Since a Video object must be into a MovieClip, we just have to draw every time we want the Video's clip into our TextureSkin classbitmapData property with MovieClip.draw method , that's all And as we use a single bitmapData, it's not more CPU intensive than a BitmapData containing a static picture (well if we forgot the clip's draw into the bitmapdata for sure).

Here is the example :
placeholder for flash movie
and a picture for those who don't have a webcam :

webcam texturing

And for those who don't have tried our API, here is the code needed to realize that :

PLAIN TEXT
JavaScript:
  1. import mb.sandy.core.data.*;
  2. import flash.display.BitmapData;
  3. import mb.sandy.primitive.*;
  4. import mb.sandy.view.*;
  5. import mb.sandy.core.transform.*;
  6. import mb.sandy.core.*;
  7. import mb.sandy.core.group.*;
  8. import mb.sandy.skin.*;
  9. import mb.sandy.event.*;
  10.  
  11. class Test extends Sandy
  12. {
  13.     private var _ts:TextureSkin;
  14.    
  15.     public function Test( mc:MovieClip )
  16.     {
  17.         super( mc );
  18.         // -- _mc.clip.vid is the link to our video object on the scene
  19.         _mc.clip.vid.attachVideo( Camera.get() );
  20.     }
  21.  
  22.     public static function main( mc:MovieClip ):Void
  23.     {
  24.         var t:Test = new Test( mc );
  25.         t.start ();
  26.     }
  27.        
  28.     public function start( Void ):Void
  29.     {
  30.         // -- object skin creation. Here a bitmapData
  31.         _ts = new TextureSkin( new BitmapData(200, 200) );
  32.         // The 3D object, here a simple box
  33.         var box:Box = new Box( 100, 50, 100);
  34.         // -- we attach the skin to the object
  35.         box.setSkin( _ts );
  36.         // -- we place our objet on the scene at x:0, y:0, z:550.
  37.         box.setPosition(0,0,550);
  38.         // -- we create the group (group of objects or of groups too)
  39.         var g:Group = new Group();
  40.         // -- we create a transformation to apply to our object, here a rotation ( parameters are axis, speed as angle in degrees)
  41.         var r:Transform3D = new Rotation3D( new Vector4(1,1,1), 2 );
  42.         // -- we create the transformGroup which manage all the transformations to aply to the objects of a group (here a single rotation)
  43.         var tg:TransformGroup = new TransformGroup();
  44.                 // We add the rotation to the group
  45.         tg.addTransform( r );
  46.                 // we compile it to be faster later
  47.         tg.compile();
  48.         // -- we attach the transformGroup to this group.
  49.         g.setTransformGroup( tg );
  50.         // -- we add the Box to our group
  51.         g.addObject( box );
  52.         // -- we add our group to our world object
  53.         _world.addGroup( g );
  54.         // -- we create some Frame call to wake the realtime rendering & texturing
  55.         var fcall:FrameCall = new FrameCall( this, "rendering" );
  56.         fcall.connect ();
  57.         var tcall:FrameCall = new FrameCall( this, "camTexturing" );
  58.         tcall.connect();
  59.     }
  60.    
  61.     private function camTexturing( Void ):Void
  62.     {
  63.         // -- we just copy the movieclip containing the webcam stream into our texture bitmapdata.
  64.         _ts.texture.draw( _mc.clip );      
  65.     }
  66.    
  67.     private function rendering(Void):Void
  68.     {
  69.         // we render the world scene (here a simple group owning a simple object)
  70.         _world.render();
  71.     }
  72.    
  73. }

I hope you find this article interessting and please leave a comment if you have a question or if you want to notice something. Sorry if I made some English mistake, I'll do my best (feel free to correct me !)

Regards thomas

DistordImage, the way to distord bitmaps by code

Tuesday, November 1st, 2005 by Kiroukou :: Resources, en :: 34 Comments

Who never hoped to be able to transform some bitmaps directly by code. Yes We can now skew and scale a MovieClip in Flash8, but when you need to map a bitmap on a more complex support, you just can't.

But thanks to Andre Michelle we were able to do that for two years, but this technics wasn't really optimized and precise.

Today Flash 8 brings some new possibilities making this very accurate.

Here is the example :
placeholder for flash movie

Play with the anchors clips to distort the picture :)

Here is the class :

PLAIN TEXT
JavaScript:
  1. /**********************************************
  2. * Copyright (c) 2005 Thomas PFEIFFER. All rights
  3. * reserved.
  4. *
  5. * Licensed under the CREATIVE COMMONS Attribution-NonCommercial-ShareAlike 2.0
  6. * you may not use this file except in compliance with the License.
  7. * You may obtain a copy of the License at
  8. *                      http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.en_GB
  9. *
  10. * DistortImage class
  11. * Availability : Flash Player 8.
  12. *
  13. * Description
  14. * _________
  15. * Tesselate a movieclip into several triangles
  16. * to allow free transform distorsion.
  17. ****************************
  18. * From an idea and a first implementation from (C) Andre Michelle
  19. * http://www.andre-michelle.com
  20. ****************************
  21. * @author Thomas Pfeiffer - kiroukou
  22. * @contact kiroukou@@gmail..com
  23. **********************************************/
  24.  
  25. import flash.geom.Matrix;
  26. import flash.display.BitmapData;
  27.  
  28. class com.kiroukou.graphics.DistordImage
  29. {
  30.     private var _mc: MovieClip;
  31.     private var _w: Number;
  32.     private var _h: Number;
  33.     // -- skew and translation matrix
  34.     private var _sMat:Matrix ;
  35.     private var _tMat:Matrix ;
  36.  
  37.     private var _xMin, _xMax, _yMin, _yMax: Number;
  38.  
  39.     private var _hseg: Number;
  40.     private var _vseg: Number;
  41.  
  42.     private var _hsLen: Number;
  43.     private var _vsLen: Number;
  44.  
  45.     private var _p: Array;
  46.     private var _tri: Array;
  47.    
  48.     private var _texture:BitmapData;
  49.  
  50.     /* Constructor
  51.      *
  52.      * @param mc MovieClip :  the movieClip containing the distorded picture
  53.      * @param symbolId String : th link name of the picture in the library
  54.      * @param vseg Number : the vertical precision
  55.      * @param hseg Number : the horizontal precision
  56.      */
  57.     public function DistordImage( mc: MovieClip, symbolId: String, vseg: Number, hseg: Number )
  58.     {
  59.         _mc = mc;
  60.         _texture = BitmapData.loadBitmap( symbolId );
  61.         _vseg = vseg;
  62.         _hseg = hseg;
  63.        
  64.         _w = _texture.width ;
  65.         _h = _texture.height;
  66.         __init();
  67.        
  68.     }
  69.  
  70.  
  71.     private function __init( Void ): Void
  72.     {
  73.         _p = new Array();
  74.         _tri = new Array();
  75.        
  76.         var ix: Number;
  77.         var iy: Number;
  78.  
  79.         var w2: Number = _w / 2;
  80.         var h2: Number = _h / 2;
  81.  
  82.         _xMin = _yMin = 0;
  83.         _xMax = _w; _yMax = _h;
  84.        
  85.         _hsLen = _w / ( _hseg + 1 );
  86.         _vsLen = _h / ( _vseg + 1 );
  87.  
  88.         var x: Number, y: Number;
  89.         // -- we create the points
  90.         for ( ix = 0 ; ix <_vseg + 2 ; ix++ )
  91.         {
  92.             for ( iy = 0 ; iy <_hseg + 2 ; iy++ )
  93.             {
  94.                 x = ix * _hsLen;
  95.                 y = iy * _vsLen;
  96.                 _p.push( { x: x, y: y, sx: x, sy: y } );
  97.             }
  98.         }
  99.         // -- we create the triangles
  100.         for ( ix = 0 ; ix <_vseg + 1 ; ix++ )
  101.         {
  102.             for ( iy = 0 ; iy <_hseg + 1 ; iy++ )
  103.             {
  104.                 _tri.push([ _p[ iy + ix * ( _hseg + 2 ) ] , _p[ iy + ix * ( _hseg + 2 ) + 1 ] , _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) ] ] );
  105.                 _tri.push([ _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) + 1 ] , _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) ] , _p[ iy + ix * ( _hseg + 2 ) + 1 ] ] );
  106.             }
  107.         }
  108.  
  109.         __render();
  110.     }
  111.  
  112.     /* setTransform
  113.      *
  114.      * @param x0 Number the horizontal coordinate of the first point
  115.      * @param y0 Number the vertical coordinate of the first point 
  116.      * @param x1 Number the horizontal coordinate of the second point
  117.      * @param y1 Number the vertical coordinate of the second point 
  118.      * @param x2 Number the horizontal coordinate of the third point
  119.      * @param y2 Number the vertical coordinate of the third point 
  120.      * @param x3 Number the horizontal coordinate of the fourth point
  121.      * @param y3 Number the vertical coordinate of the fourth point 
  122.      *
  123.      * @description : Distord the bitmap to ajust it to those points.
  124.      */
  125.     function setTransform( x0:Number , y0:Number , x1:Number , y1:Number , x2:Number , y2:Number , x3:Number , y3:Number ): Void
  126.     {
  127.         var w:Number = _w;
  128.         var h:Number = _h;
  129.         var dx30:Number = x3 - x0;
  130.         var dy30:Number = y3 - y0;
  131.         var dx21:Number = x2 - x1;
  132.         var dy21:Number = y2 - y1;
  133.         var l:Number = _p.length;
  134.         while( --l> -1 )
  135.         {
  136.             var point:Object = _p[ l ];
  137.             var gx = ( point.x - _xMin ) / w;
  138.             var gy = ( point.y - _yMin ) / h;
  139.             var bx = x0 + gy * ( dx30 );
  140.             var by = y0 + gy * ( dy30 );
  141.  
  142.             point.sx = bx + gx * ( ( x1 + gy * ( dx21 ) ) - bx );
  143.             point.sy = by + gx * ( ( y1 + gy * ( dy21 ) ) - by );
  144.         }
  145.  
  146.         __render();
  147.     }
  148.  
  149.     private function __render( Void ): Void
  150.     {
  151.  
  152.         var t: Number;
  153.         var vertices: Array;
  154.         var p0, p1, p2:Object;
  155.         var c:MovieClip = _mc;
  156.         var a:Array;
  157.         c.clear();
  158.         _sMat = new Matrix();
  159.         _tMat = new Matrix();
  160.        
  161.         var l:Number = _tri.length;
  162.         while( --l> -1 )
  163.         {
  164.             a = _tri[ l ];
  165.             p0 = a[0];
  166.             p1 = a[1];
  167.             p2 = a[2];
  168.             var x0: Number = p0.sx;
  169.             var y0: Number = p0.sy;
  170.             var x1: Number = p1.sx;
  171.             var y1: Number = p1.sy;
  172.             var x2: Number = p2.sx;
  173.             var y2: Number = p2.sy;
  174.                
  175.             var u0: Number = p0.x;
  176.             var v0: Number = p0.y;
  177.             var u1: Number = p1.x;
  178.             var v1: Number = p1.y;
  179.             var u2: Number = p2.x;
  180.             var v2: Number = p2.y;
  181.  
  182.             _tMat.tx = u0;
  183.             _tMat.ty = v0;
  184.        
  185.             _tMat.a = ( u1 - u0 ) / _w;
  186.             _tMat.b = ( v1 - v0 ) / _w;
  187.             _tMat.c = ( u2 - u0 ) / _h;
  188.             _tMat.d = ( v2 - v0 ) / _h;
  189.        
  190.             _sMat.a = ( x1 - x0 ) / _w;
  191.             _sMat.b = ( y1 - y0 ) / _w;
  192.             _sMat.c = ( x2 - x0 ) / _h;
  193.             _sMat.d = ( y2 - y0 ) / _h;
  194.        
  195.             _sMat.tx = x0;
  196.             _sMat.ty = y0;
  197.        
  198.             _tMat.invert();
  199.             _tMat.concat( _sMat );
  200.            
  201.             c.beginBitmapFill( _texture, _tMat, false, false );
  202.             c.moveTo( x0, y0 );
  203.             c.lineTo( x1, y1 );
  204.             c.lineTo( x2, y2 );
  205.             c.endFill();
  206.         }
  207.     }
  208. }

You can find the fla : here

Have fun :)

 Next Entries »