SlideShare una empresa de Scribd logo
1 de 125
PLAY WITH
VECTORS
  FITC 09 - KOEN DE WEGGHELEIRE
      www.newmovieclip.com
SESSION OVERVIEW




FITC, Feb 2009       http://www.newmovieclip.com
SESSION OVERVIEW

  Talk about myself...
  Introducing Mr. Vector
  Where does Mr. Vector live
  How can we use Mr Vector


  Examples
  Q and hopefully A




FITC, Feb 2009                  http://www.newmovieclip.com
My DO’s and DONT’s




FITC, Feb 2009         http://www.newmovieclip.com
My DO’s and DONT’s

  I DO lecture, speak, coordinate, write, manage...




FITC, Feb 2009                               http://www.newmovieclip.com
My DO’s and DONT’s

  I DO lecture, speak, coordinate, write, manage...
  I STILL DO NOT
        Renovate my house (sorry dad)
        Do Sports
        Eath Healty
        Have a girlfriend 




FITC, Feb 2009                               http://www.newmovieclip.com
INTRODUCING MR VECTOR




FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR
<< Sega begins 24-hour countdown to quot;Vectormaniaquot;;
$160,000 in cash and prizes at stake as VectorMan, Sega's
most advanced, challenging Genesis game ever hits store
shelves tomorrow, Oct. 24 >> (Oct 23, 1995)




FITC, Feb 2009                                 http://www.newmovieclip.com
INTRODUCING MR VECTOR
<< Sega begins 24-hour countdown to quot;Vectormaniaquot;;
$160,000 in cash and prizes at stake as VectorMan, Sega's
most advanced, challenging Genesis game ever hits store
shelves tomorrow, Oct. 24 >> (Oct 23, 1995)




FITC, Feb 2009                                 http://www.newmovieclip.com
INTRODUCING MR VECTOR




FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR

 = Array whose elements have the same data type




FITC, Feb 2009                            http://www.newmovieclip.com
INTRODUCING MR VECTOR

 = Array whose elements have the same data type
         the base type (eg: int, String, Number, MyObject,...)




FITC, Feb 2009                                                http://www.newmovieclip.com
INTRODUCING MR VECTOR

 = Array whose elements have the same data type
         the base type (eg: int, String, Number, MyObject,...)


  = Using the postfix type parameter syntax




FITC, Feb 2009                                                http://www.newmovieclip.com
INTRODUCING MR VECTOR

 = Array whose elements have the same data type
         the base type (eg: int, String, Number, MyObject,...)


  = Using the postfix type parameter syntax
                 0     1        2         3        4        5

                 “A”   “B”      “C”      “D”       “E”      “F”




FITC, Feb 2009                                                  http://www.newmovieclip.com
INTRODUCING MR VECTOR

 = Array whose elements have the same data type
         the base type (eg: int, String, Number, MyObject,...)


  = Using the postfix type parameter syntax
                 0     1        2         3        4        5

                 “A”   “B”      “C”      “D”       “E”      “F”




                       var v:Vector.<String>




FITC, Feb 2009                                                  http://www.newmovieclip.com
INTRODUCING MR VECTOR




FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR

  So, it is actually just an Array ?




FITC, Feb 2009                          http://www.newmovieclip.com
INTRODUCING MR VECTOR

  So, it is actually just an Array ?
        YEAH    but...




FITC, Feb 2009                          http://www.newmovieclip.com
INTRODUCING MR VECTOR

  So, it is actually just an Array ?
        YEAH    but...


  VECTOR = dence Array !




FITC, Feb 2009                          http://www.newmovieclip.com
INTRODUCING MR VECTOR

  So, it is actually just an Array ?
        YEAH    but...


  VECTOR = dence Array !


       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;
       v[2] = “ROCKS !”;




FITC, Feb 2009                             http://www.newmovieclip.com
INTRODUCING MR VECTOR

  So, it is actually just an Array ?
        YEAH    but...


  VECTOR = dence Array !


       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;            RangeError: Error #1125:
       v[2] = “ROCKS !”;




FITC, Feb 2009                               http://www.newmovieclip.com
INTRODUCING MR VECTOR




FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR

  VECTOR = bounds checked !




FITC, Feb 2009                 http://www.newmovieclip.com
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;
       v[1] = “ROCKS !”;
       trace(v[2]);




FITC, Feb 2009                             http://www.newmovieclip.com
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;
                                  RangeError: Error #1125:
       v[1] = “ROCKS !”;
       trace(v[2]);




FITC, Feb 2009                               http://www.newmovieclip.com
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;
                                  RangeError: Error #1125:
       v[1] = “ROCKS !”;
       trace(v[2]);

  VECTOR can be fixed length !




FITC, Feb 2009                               http://www.newmovieclip.com
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;
                                  RangeError: Error #1125:
       v[1] = “ROCKS !”;
       trace(v[2]);

  VECTOR can be fixed length !
       var v:Vector.<String> = new Vector.<String>(2,true);
       v[0] = “FITC”;
       v[1] = “ROCKS”;
       V[2] = “AGAIN”;




FITC, Feb 2009                                 http://www.newmovieclip.com
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “FITC”;
                                  RangeError: Error #1125:
       v[1] = “ROCKS !”;
       trace(v[2]);

  VECTOR can be fixed length !
       var v:Vector.<String> = new Vector.<String>(2,true);
       v[0] = “FITC”;
       v[1] = “ROCKS”;              RangeError: Error #1125:
       V[2] = “AGAIN”;




FITC, Feb 2009                                 http://www.newmovieclip.com
INTRODUCING MR VECTOR




FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR

  Vector() global function :




FITC, Feb 2009                  http://www.newmovieclip.com
INTRODUCING MR VECTOR

  Vector() global function :



      var arr:Array = new Array();
      arr[0] = quot;FITCquot;;
      arr[1] = quot;ROCKS!quot;;

      var v:Vector.<String> = Vector.<String>(arr);
      trace( v[0]+ “ ” + v[1] );




FITC, Feb 2009                                 http://www.newmovieclip.com
INTRODUCING MR VECTOR

  Vector() global function :



      var arr:Array = new Array();
      arr[0] = quot;FITCquot;;
      arr[1] = quot;ROCKS!quot;;

      var v:Vector.<String> = Vector.<String>(arr);
      trace( v[0]+ “ ” + v[1] );

                                         OUTPUT: FITC ROCKS!




FITC, Feb 2009                                 http://www.newmovieclip.com
INTRODUCING MR VECTOR




                                          DEMO



FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR

  Some interesting Vector methods :
        every : do test function until item returns false
        some : do test function untill item returns true
        filter : do test function and return new Vector.
        forEach : do a function on each item
        map : do a function on each item and return new
       Vector


                                                                  DEMO



FITC, Feb 2009                                    http://www.newmovieclip.com
INTRODUCING MR VECTOR




FITC, Feb 2009            http://www.newmovieclip.com
INTRODUCING MR VECTOR

  SUMMARY :
        Type Safety : compiler identifies data type errors.
        Performance: MUCH faster then Arrays !!
                  Depending on what you do you can get 40-60%
                 performance boost.




FITC, Feb 2009                                             http://www.newmovieclip.com
WHERE DOES MR VECTOR LIVE ?




FITC, Feb 2009                  http://www.newmovieclip.com
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS




FITC, Feb 2009                       http://www.newmovieclip.com
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS
  Vectors in ADVANCED DRAWING




FITC, Feb 2009                       http://www.newmovieclip.com
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS
  Vectors in ADVANCED DRAWING
        2D drawing




FITC, Feb 2009                       http://www.newmovieclip.com
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS
  Vectors in ADVANCED DRAWING
        2D drawing
        3D drawing




FITC, Feb 2009                       http://www.newmovieclip.com
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS
  Vectors in ADVANCED DRAWING
        2D drawing
        3D drawing


 Let’s start with 3D Matrices ...




FITC, Feb 2009                       http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS




FITC, Feb 2009                http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  Matrix3D class




FITC, Feb 2009                http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package




FITC, Feb 2009                   http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the position and
       orientation of a 3D display object.




FITC, Feb 2009                                  http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the position and
       orientation of a 3D display object.
  Used for 3D transformations:




FITC, Feb 2009                                  http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the position and
       orientation of a 3D display object.
  Used for 3D transformations:
        Translation, scaling, perspective projection,...




FITC, Feb 2009                                    http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the position and
       orientation of a 3D display object.
  Used for 3D transformations:
        Translation, scaling, perspective projection,...



                    INDEED, it is again all about...

FITC, Feb 2009                                    http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS




FITC, Feb 2009                http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS




                 MATH
                    Oooooooooh noooooo...




FITC, Feb 2009                http://www.newmovieclip.com
Background: defining a matrix




FITC, Feb 2009                    http://www.newmovieclip.com
Background: defining a matrix


                 ab   c   d
                 ef   g   h
                 ij   k   l
                 mn   o   p




FITC, Feb 2009                    http://www.newmovieclip.com
Background: defining a matrix


                 ab   c   d    MATRIX
                                   = rectangular table of numbers
                 ef   g   h    4 x 4 matrix
                                   = four rows x 4 columns
                 ij   k   l    Dimensions of a matrix


                 mn   o   p
                                   = number of rows by number of
                                   columns




FITC, Feb 2009                                 http://www.newmovieclip.com
Background: defining a matrix


                 ab   c   d    MATRIX
                                   = rectangular table of numbers
                 ef   g   h    4 x 4 matrix
                                   = four rows x 4 columns
                 ij   k   l    Dimensions of a matrix


                 mn   o   p
                                   = number of rows by number of
                                   columns




FITC, Feb 2009                                 http://www.newmovieclip.com
Background: defining a matrix


                 ab              c        d              MATRIX
                                                             = rectangular table of numbers
                 ef              g        h              4 x 4 matrix
                                                             = four rows x 4 columns
                 ij              k        l              Dimensions of a matrix


                 mn              o        p
                                                             = number of rows by number of
                                                             columns




              Each value stores a piece of data that can be used in a calculation !
              Preseted in Flash by a Vector !


FITC, Feb 2009                                                           http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS




FITC, Feb 2009                http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:




FITC, Feb 2009                            http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0        0      tx

                   0      scaleY     0      ty

                            0
                   0               scaleZ   tz
                            0
                   0                 0      tw



FITC, Feb 2009                                   http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0        0      tx

                   0      scaleY     0      ty

                            0
                   0               scaleZ   tz
                            0
                   0                 0      tw

                 x-axis


FITC, Feb 2009                                   http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0         0      tx

                   0      scaleY      0      ty

                            0
                   0                scaleZ   tz
                            0
                   0                  0      tw

                 x-axis    y-axis


FITC, Feb 2009                                    http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0         0      tx

                   0      scaleY      0      ty

                            0
                   0                scaleZ   tz
                            0
                   0                  0      tw

                 x-axis    y-axis   z-axis


FITC, Feb 2009                                    http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:

                  Orientation and scaling

                 scaleX      0          0      tx

                   0      scaleY        0      ty

                             0
                   0                scaleZ     tz
                             0
                   0                    0      tw

                 x-axis    y-axis     z-axis


FITC, Feb 2009                                      http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:

                  Orientation and scaling      Translation

                 scaleX      0          0          tx

                   0      scaleY        0          ty

                             0
                   0                scaleZ         tz
                             0
                   0                    0          tw

                 x-axis    y-axis     z-axis


FITC, Feb 2009                                               http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX 0       0     tx

                      scaleY
                  0             0     ty

                        0      scaleZ tz
                  0
                        0
                  0              0    tw



FITC, Feb 2009                             http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX 0       0     tx   X, Y and Z scale values
                                           1 = 100% scale

                      scaleY
                  0             0     ty

                        0      scaleZ tz
                  0
                        0
                  0              0    tw



FITC, Feb 2009                               http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                                            tx
                 scaleX     0        0

                                            ty
                   0      scaleY     0

                            0               tz
                   0               scaleZ
                            0
                   0                 0      tw



FITC, Feb 2009                                   http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                                            tx
                 scaleX     0        0           X, Y and Z
                                                 translation values

                                            ty
                   0      scaleY     0           Value in pixels


                            0               tz
                   0               scaleZ
                            0
                   0                 0      tw



FITC, Feb 2009                                     http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS




FITC, Feb 2009                http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does that work in Flash CS 4 ?
        Transform property of a 3D display object
        transform.matrix3d property

  Built in methods:
        appendTranslation
        appendRotation
        appendScale
        ...




FITC, Feb 2009                                       http://www.newmovieclip.com
3D MATRIX TRANSFORMATIONS

  How does that work in Flash CS 4 ?
        Transform property of a 3D display object
        transform.matrix3d property

  Built in methods:
        appendTranslation
        appendRotation
        appendScale
        ...


                                                                     DEMO



FITC, Feb 2009                                       http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API

  Sprite, MovieClip and Shape have a graphics property
       = instance of Grahics class

  What can you do with it ?
        Generate vector shapes at runtime
        Alter vector shapes at runtime
        Create 3D effects

  and ...drawing is done by using Vectors ! 




FITC, Feb 2009                               http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API

  We are used to :
        Graphics.LineTo() , Graphics.curveTo(), Graphics.moveTo(),

  NOW :
        GraphicsPathCommand.NO_OP                 =         0
        GraphicsPathCommand.MOVE_TO               =         1
        GraphicsPathCommand.LINE_TO               =         2
        GraphicsPathCommand.CURVE_TO              =         3
        GraphicsPathCommand.WIDE_MOVE_TO =                  4
        GraphicsPathCommand.WIDE_LINE_TO          =         5




FITC, Feb 2009                                          http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API

  How can we use those commands ?
        Graphics.Drawpath( ) method expects a COMMANDS VECTOR
                 var cmds:Vector.<int> = new Vector.<int>();
                 cmds[0] = GraphicsPathCommand.MOVE_TO;
                 cmds[1] = GraphicsPathCommand.LINE_TO;
                 cmds[2] = GraphicsPathCommand.LINE_TO;
                 ...




FITC, Feb 2009                                           http://www.newmovieclip.com
ADVANCED DRAWING API

  How can we use those commands ?
        Graphics.Drawpath( ) method expects a COMMANDS VECTOR
                 var cmds:Vector.<int> = new Vector.<int>();
                 cmds[0] = GraphicsPathCommand.MOVE_TO;
                 cmds[1] = GraphicsPathCommand.LINE_TO;
                 cmds[2] = GraphicsPathCommand.LINE_TO;
                 ...
        Graphics.DrawPath() method also expects a DATA VECTOR
                 var data:Vector.<Number>   = new Vector.<Number>();
                 data[0] = 50; data[1] =    200;
                 data[2] = 100; data[3] =   250;
                 data[4] = 200; data[5] =   300;




FITC, Feb 2009                                             http://www.newmovieclip.com
ADVANCED DRAWING API

  How can we use those commands ?
        Graphics.Drawpath( ) method expects a COMMANDS VECTOR
                 var cmds:Vector.<int> = new Vector.<int>();
                 cmds[0] = GraphicsPathCommand.MOVE_TO;
                 cmds[1] = GraphicsPathCommand.LINE_TO;
                 cmds[2] = GraphicsPathCommand.LINE_TO;
                 ...
        Graphics.DrawPath() method also expects a DATA VECTOR
                 var data:Vector.<Number>   = new Vector.<Number>();
                 data[0] = 50; data[1] =    200;
                 data[2] = 100; data[3] =   250;
                 data[4] = 200; data[5] =   300;



                 Graphics.drawPath(cmds , data )


FITC, Feb 2009                                             http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API

  Graphic Data Classes




FITC, Feb 2009            http://www.newmovieclip.com
ADVANCED DRAWING API

  Graphic Data Classes
        in the flash.display package




FITC, Feb 2009                          http://www.newmovieclip.com
ADVANCED DRAWING API

  Graphic Data Classes
        in the flash.display package
        = data containers for the Drawing API




FITC, Feb 2009                                   http://www.newmovieclip.com
ADVANCED DRAWING API

  Graphic Data Classes
        in the flash.display package
        = data containers for the Drawing API
        All Graphic Data Classes implement the IGraphicsData
       interface




FITC, Feb 2009                                        http://www.newmovieclip.com
ADVANCED DRAWING API

  Graphic Data Classes
        in the flash.display package
        = data containers for the Drawing API
        All Graphic Data Classes implement the IGraphicsData
       interface


  Some examples :




FITC, Feb 2009                                        http://www.newmovieclip.com
ADVANCED DRAWING API

  Graphic Data Classes
        in the flash.display package
        = data containers for the Drawing API
        All Graphic Data Classes implement the IGraphicsData
       interface


  Some examples :
        GraphicsBitmapFill( ), GraphicsSolidFill( ),
       GraphicsGradientFill( ), GraphicsPath( ),...




FITC, Feb 2009                                          http://www.newmovieclip.com
ADVANCED DRAWING API




                                         DEMO



FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
  Graphics.drawGraphicsData()
        Used to render a collection of Graphic Data Classes
        You need to pass a VECTOR (type IGraphicsData) which
       contains all the the necessary Graphic Data




                                                                        DEMO



FITC, Feb 2009                                          http://www.newmovieclip.com
ADVANCED DRAWING API
  Graphics.drawGraphicsData()
        Used to render a collection of Graphic Data Classes
        You need to pass a VECTOR (type IGraphicsData) which
       contains all the the necessary Graphic Data

          var drawing:Vector.<IGraphicsData> = new
          Vector.<IGraphicsData>();

          //stroke = GraphicsStroke instance
          drawing[0] = stroke;
          //fill = GraphicsSolidFill instance
          drawing[1] = fill;
          // path = GraphicsPath instance
          drawing[2] = path;

          graphics.drawGraphicsData(drawing);                           DEMO



FITC, Feb 2009                                          http://www.newmovieclip.com
ADVANCED DRAWING API
  DEMO: Draw Graphics Data from FXG 1.0 file
         FXG 1.0 describes and XML based graphics interchange
        format for the Flash Platform




Specifications of FXG : http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification



FITC, Feb 2009                                                                                   http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
  Graphics.drawTriangles( ) method:
        Can be used for 3D effects through ActionScript
        You need to pass a VECTOR with vertices ()




FITC, Feb 2009                                 http://www.newmovieclip.com
ADVANCED DRAWING API
  Graphics.drawTriangles( ) method:
        Can be used for 3D effects through ActionScript
        You need to pass a VECTOR with vertices ()

                                   (100 , 0)
                 (0 , 0)




            (0 , 100)



FITC, Feb 2009                                 http://www.newmovieclip.com
ADVANCED DRAWING API
  Graphics.drawTriangles( ) method:
        Can be used for 3D effects through ActionScript
        You need to pass a VECTOR with vertices ()

                                   (100 , 0)
                 (0 , 0)



                              graphics.beginFill(0xFF3701);
                              graphics.drawTriangles(
            (0 , 100)             Vector.<Number>([
                                      0,0,     100,0,      0,100
                                    ]));


FITC, Feb 2009                                   http://www.newmovieclip.com
ADVANCED DRAWING API




                 A
                     B




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
    PROBLEM : What if two triangles share points ?

                           (100 , 0)
  (0 , 0)
                   A
                       B
                           (100 , 100)
(0 , 100)




  FITC, Feb 2009                             http://www.newmovieclip.com
ADVANCED DRAWING API
    PROBLEM : What if two triangles share points ?

                                (100 , 0)
  (0 , 0)
                   A
                        B
                                (100 , 100)
(0 , 100)
             graphics.beginFill(0xFF3701);
             graphics.drawTriangles(
                 Vector.<Number>([
   A                   0,0,        100,0,     0,100,
   B                   100,0,      100,100,   0,100
                   ]));


  FITC, Feb 2009                                  http://www.newmovieclip.com
ADVANCED DRAWING API




                 A
                     B




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
  SOLUTION: The indices parameter :



                 A
                     B




FITC, Feb 2009                         http://www.newmovieclip.com
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

POINT 0
                   A
                       B




  FITC, Feb 2009                         http://www.newmovieclip.com
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                   A
                       B




  FITC, Feb 2009                         http://www.newmovieclip.com
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                   A
                       B
POINT 2




  FITC, Feb 2009                         http://www.newmovieclip.com
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                   A
                       B
                           POINT 3
POINT 2




  FITC, Feb 2009                         http://www.newmovieclip.com
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                                     Rectangle A=
                   A                 POINT 0 POINT 1         POINT 2
                                     INDICES = 0, 1 , 2

                       B             Rectangle B=
                                     POINT 1 POINT 3         POINT 2
                                     INDICES = 1, 3, 2
                           POINT 3
POINT 2




  FITC, Feb 2009                                 http://www.newmovieclip.com
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                                   POINT 1
POINT 0
                                             Rectangle A=
                      A                      POINT 0 POINT 1         POINT 2
                                             INDICES = 0, 1 , 2

                             B               Rectangle B=
                                             POINT 1 POINT 3         POINT 2
                                             INDICES = 1, 3, 2
                                   POINT 3
POINT 2

   graphics.beginFill(0xFF3701);
   graphics.drawTriangles(
       Vector.<Number>([
                    0,0,         100,0,      0,100,
                    100,0,       100,100,    0,100
                   ]));

  FITC, Feb 2009                                         http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
  Texturing the triangles : UV Data




FITC, Feb 2009                         http://www.newmovieclip.com
ADVANCED DRAWING API
  Texturing the triangles : UV Data



                                                   V=0

                 A
                     B
                                                   V=1




U = value in % (0-1)            U=0    U=1
V = value in % (0-1)

FITC, Feb 2009                          http://www.newmovieclip.com
ADVANCED DRAWING API
  Texturing the triangles : UV Data



                                                   V=0

                 A
                     B
                                                   V=1




U = value in % (0-1)            U=0    U=1
V = value in % (0-1)                                     DEMO

FITC, Feb 2009                          http://www.newmovieclip.com
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds perspective projection
        = scale ratio at that location in Z direction


                 Looks like 3D, but is an illusion (it is 2D)
       




FITC, Feb 2009                                                  http://www.newmovieclip.com
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds perspective projection
        = scale ratio at that location in Z direction


                 Looks like 3D, but is an illusion (it is 2D)
       




FITC, Feb 2009                                                  http://www.newmovieclip.com
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds perspective projection
        = scale ratio at that location in Z direction


                 Looks like 3D, but is an illusion (it is 2D)
       




FITC, Feb 2009                                                  http://www.newmovieclip.com
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds perspective projection
        = scale ratio at that location in Z direction


                 Looks like 3D, but is an illusion (it is 2D)
       




FITC, Feb 2009                                                  http://www.newmovieclip.com
ADVANCED DRAWING API




                 eg : T = 200 / (200 + 200) = 0.5
                                                                     DEMO
                 eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                      http://www.newmovieclip.com
ADVANCED DRAWING API
  How to determine the scale ratio T ?




                 eg : T = 200 / (200 + 200) = 0.5
                                                                     DEMO
                 eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                      http://www.newmovieclip.com
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




                    eg : T = 200 / (200 + 200) = 0.5
                                                                        DEMO
                    eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                         http://www.newmovieclip.com
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




                    eg : T = 200 / (200 + 200) = 0.5
                                                                        DEMO
                    eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                         http://www.newmovieclip.com
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




                    eg : T = 200 / (200 + 200) = 0.5
                                                                        DEMO
                    eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                         http://www.newmovieclip.com
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




                 focalLength
                     eg : T = 200 / (200 + 200) = 0.5
                                                                         DEMO
                     eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                          http://www.newmovieclip.com
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




                 focalLength               z value
                     eg : T = 200 / (200 + 200) = 0.5
                                                                         DEMO
                     eg : T = 20 / (20 + 200) = 0.09
FITC, Feb 2009                                          http://www.newmovieclip.com
Q and hopefully A




FITC, Feb 2009        http://www.newmovieclip.com
Q and hopefully A




                 Q?
FITC, Feb 2009        http://www.newmovieclip.com
FITC, Feb 2009   http://www.newmovieclip.com
THANKS
                 Slides and Demos available at
                    www.newmovieclip.com




FITC, Feb 2009                              http://www.newmovieclip.com

Más contenido relacionado

Similar a Play With Vectors in Flash CS4

Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhonekentbrew
 
Introduction to VeriFast @ Kyoto
Introduction to VeriFast @ KyotoIntroduction to VeriFast @ Kyoto
Introduction to VeriFast @ KyotoKiwamu Okabe
 
Containerize vs Virtualize
Containerize vs VirtualizeContainerize vs Virtualize
Containerize vs VirtualizeAndy d
 
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008Baruch Sadogursky
 
AstriCon 2015: WebRTC: How it Works, and How it Breaks
AstriCon 2015: WebRTC: How it Works, and How it BreaksAstriCon 2015: WebRTC: How it Works, and How it Breaks
AstriCon 2015: WebRTC: How it Works, and How it BreaksMojo Lingo
 

Similar a Play With Vectors in Flash CS4 (6)

Spring ME JavaOne
Spring ME JavaOneSpring ME JavaOne
Spring ME JavaOne
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
Introduction to VeriFast @ Kyoto
Introduction to VeriFast @ KyotoIntroduction to VeriFast @ Kyoto
Introduction to VeriFast @ Kyoto
 
Containerize vs Virtualize
Containerize vs VirtualizeContainerize vs Virtualize
Containerize vs Virtualize
 
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
 
AstriCon 2015: WebRTC: How it Works, and How it Breaks
AstriCon 2015: WebRTC: How it Works, and How it BreaksAstriCon 2015: WebRTC: How it Works, and How it Breaks
AstriCon 2015: WebRTC: How it Works, and How it Breaks
 

Último

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 

Último (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 

Play With Vectors in Flash CS4

  • 1. PLAY WITH VECTORS FITC 09 - KOEN DE WEGGHELEIRE www.newmovieclip.com
  • 2. SESSION OVERVIEW FITC, Feb 2009 http://www.newmovieclip.com
  • 3. SESSION OVERVIEW  Talk about myself...  Introducing Mr. Vector  Where does Mr. Vector live  How can we use Mr Vector  Examples  Q and hopefully A FITC, Feb 2009 http://www.newmovieclip.com
  • 4. My DO’s and DONT’s FITC, Feb 2009 http://www.newmovieclip.com
  • 5. My DO’s and DONT’s  I DO lecture, speak, coordinate, write, manage... FITC, Feb 2009 http://www.newmovieclip.com
  • 6. My DO’s and DONT’s  I DO lecture, speak, coordinate, write, manage...  I STILL DO NOT  Renovate my house (sorry dad)  Do Sports  Eath Healty  Have a girlfriend  FITC, Feb 2009 http://www.newmovieclip.com
  • 7. INTRODUCING MR VECTOR FITC, Feb 2009 http://www.newmovieclip.com
  • 8. INTRODUCING MR VECTOR << Sega begins 24-hour countdown to quot;Vectormaniaquot;; $160,000 in cash and prizes at stake as VectorMan, Sega's most advanced, challenging Genesis game ever hits store shelves tomorrow, Oct. 24 >> (Oct 23, 1995) FITC, Feb 2009 http://www.newmovieclip.com
  • 9. INTRODUCING MR VECTOR << Sega begins 24-hour countdown to quot;Vectormaniaquot;; $160,000 in cash and prizes at stake as VectorMan, Sega's most advanced, challenging Genesis game ever hits store shelves tomorrow, Oct. 24 >> (Oct 23, 1995) FITC, Feb 2009 http://www.newmovieclip.com
  • 10. INTRODUCING MR VECTOR FITC, Feb 2009 http://www.newmovieclip.com
  • 11. INTRODUCING MR VECTOR = Array whose elements have the same data type FITC, Feb 2009 http://www.newmovieclip.com
  • 12. INTRODUCING MR VECTOR = Array whose elements have the same data type   the base type (eg: int, String, Number, MyObject,...) FITC, Feb 2009 http://www.newmovieclip.com
  • 13. INTRODUCING MR VECTOR = Array whose elements have the same data type   the base type (eg: int, String, Number, MyObject,...)  = Using the postfix type parameter syntax FITC, Feb 2009 http://www.newmovieclip.com
  • 14. INTRODUCING MR VECTOR = Array whose elements have the same data type   the base type (eg: int, String, Number, MyObject,...)  = Using the postfix type parameter syntax 0 1 2 3 4 5 “A” “B” “C” “D” “E” “F” FITC, Feb 2009 http://www.newmovieclip.com
  • 15. INTRODUCING MR VECTOR = Array whose elements have the same data type   the base type (eg: int, String, Number, MyObject,...)  = Using the postfix type parameter syntax 0 1 2 3 4 5 “A” “B” “C” “D” “E” “F” var v:Vector.<String> FITC, Feb 2009 http://www.newmovieclip.com
  • 16. INTRODUCING MR VECTOR FITC, Feb 2009 http://www.newmovieclip.com
  • 17. INTRODUCING MR VECTOR  So, it is actually just an Array ? FITC, Feb 2009 http://www.newmovieclip.com
  • 18. INTRODUCING MR VECTOR  So, it is actually just an Array ?  YEAH  but... FITC, Feb 2009 http://www.newmovieclip.com
  • 19. INTRODUCING MR VECTOR  So, it is actually just an Array ?  YEAH  but...  VECTOR = dence Array ! FITC, Feb 2009 http://www.newmovieclip.com
  • 20. INTRODUCING MR VECTOR  So, it is actually just an Array ?  YEAH  but...  VECTOR = dence Array ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; v[2] = “ROCKS !”; FITC, Feb 2009 http://www.newmovieclip.com
  • 21. INTRODUCING MR VECTOR  So, it is actually just an Array ?  YEAH  but...  VECTOR = dence Array ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; RangeError: Error #1125: v[2] = “ROCKS !”; FITC, Feb 2009 http://www.newmovieclip.com
  • 22. INTRODUCING MR VECTOR FITC, Feb 2009 http://www.newmovieclip.com
  • 23. INTRODUCING MR VECTOR  VECTOR = bounds checked ! FITC, Feb 2009 http://www.newmovieclip.com
  • 24. INTRODUCING MR VECTOR  VECTOR = bounds checked ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; v[1] = “ROCKS !”; trace(v[2]); FITC, Feb 2009 http://www.newmovieclip.com
  • 25. INTRODUCING MR VECTOR  VECTOR = bounds checked ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; RangeError: Error #1125: v[1] = “ROCKS !”; trace(v[2]); FITC, Feb 2009 http://www.newmovieclip.com
  • 26. INTRODUCING MR VECTOR  VECTOR = bounds checked ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; RangeError: Error #1125: v[1] = “ROCKS !”; trace(v[2]);  VECTOR can be fixed length ! FITC, Feb 2009 http://www.newmovieclip.com
  • 27. INTRODUCING MR VECTOR  VECTOR = bounds checked ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; RangeError: Error #1125: v[1] = “ROCKS !”; trace(v[2]);  VECTOR can be fixed length ! var v:Vector.<String> = new Vector.<String>(2,true); v[0] = “FITC”; v[1] = “ROCKS”; V[2] = “AGAIN”; FITC, Feb 2009 http://www.newmovieclip.com
  • 28. INTRODUCING MR VECTOR  VECTOR = bounds checked ! var v:Vector.<String> = new Vector.<String>(); v[0] = “FITC”; RangeError: Error #1125: v[1] = “ROCKS !”; trace(v[2]);  VECTOR can be fixed length ! var v:Vector.<String> = new Vector.<String>(2,true); v[0] = “FITC”; v[1] = “ROCKS”; RangeError: Error #1125: V[2] = “AGAIN”; FITC, Feb 2009 http://www.newmovieclip.com
  • 29. INTRODUCING MR VECTOR FITC, Feb 2009 http://www.newmovieclip.com
  • 30. INTRODUCING MR VECTOR  Vector() global function : FITC, Feb 2009 http://www.newmovieclip.com
  • 31. INTRODUCING MR VECTOR  Vector() global function : var arr:Array = new Array(); arr[0] = quot;FITCquot;; arr[1] = quot;ROCKS!quot;; var v:Vector.<String> = Vector.<String>(arr); trace( v[0]+ “ ” + v[1] ); FITC, Feb 2009 http://www.newmovieclip.com
  • 32. INTRODUCING MR VECTOR  Vector() global function : var arr:Array = new Array(); arr[0] = quot;FITCquot;; arr[1] = quot;ROCKS!quot;; var v:Vector.<String> = Vector.<String>(arr); trace( v[0]+ “ ” + v[1] ); OUTPUT: FITC ROCKS! FITC, Feb 2009 http://www.newmovieclip.com
  • 33. INTRODUCING MR VECTOR DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 34. INTRODUCING MR VECTOR  Some interesting Vector methods :  every : do test function until item returns false  some : do test function untill item returns true  filter : do test function and return new Vector.  forEach : do a function on each item  map : do a function on each item and return new Vector DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 35. INTRODUCING MR VECTOR FITC, Feb 2009 http://www.newmovieclip.com
  • 36. INTRODUCING MR VECTOR  SUMMARY :  Type Safety : compiler identifies data type errors.  Performance: MUCH faster then Arrays !!  Depending on what you do you can get 40-60% performance boost. FITC, Feb 2009 http://www.newmovieclip.com
  • 37. WHERE DOES MR VECTOR LIVE ? FITC, Feb 2009 http://www.newmovieclip.com
  • 38. WHERE DOES MR VECTOR LIVE ?  Vectors in 3D MATRIX OPERATIONS FITC, Feb 2009 http://www.newmovieclip.com
  • 39. WHERE DOES MR VECTOR LIVE ?  Vectors in 3D MATRIX OPERATIONS  Vectors in ADVANCED DRAWING FITC, Feb 2009 http://www.newmovieclip.com
  • 40. WHERE DOES MR VECTOR LIVE ?  Vectors in 3D MATRIX OPERATIONS  Vectors in ADVANCED DRAWING  2D drawing FITC, Feb 2009 http://www.newmovieclip.com
  • 41. WHERE DOES MR VECTOR LIVE ?  Vectors in 3D MATRIX OPERATIONS  Vectors in ADVANCED DRAWING  2D drawing  3D drawing FITC, Feb 2009 http://www.newmovieclip.com
  • 42. WHERE DOES MR VECTOR LIVE ?  Vectors in 3D MATRIX OPERATIONS  Vectors in ADVANCED DRAWING  2D drawing  3D drawing Let’s start with 3D Matrices ... FITC, Feb 2009 http://www.newmovieclip.com
  • 43. 3D MATRIX TRANSFORMATIONS FITC, Feb 2009 http://www.newmovieclip.com
  • 44. 3D MATRIX TRANSFORMATIONS  Matrix3D class FITC, Feb 2009 http://www.newmovieclip.com
  • 45. 3D MATRIX TRANSFORMATIONS  Matrix3D class  in flash.geom package FITC, Feb 2009 http://www.newmovieclip.com
  • 46. 3D MATRIX TRANSFORMATIONS  Matrix3D class  in flash.geom package  = the matrix that describes the position and orientation of a 3D display object. FITC, Feb 2009 http://www.newmovieclip.com
  • 47. 3D MATRIX TRANSFORMATIONS  Matrix3D class  in flash.geom package  = the matrix that describes the position and orientation of a 3D display object.  Used for 3D transformations: FITC, Feb 2009 http://www.newmovieclip.com
  • 48. 3D MATRIX TRANSFORMATIONS  Matrix3D class  in flash.geom package  = the matrix that describes the position and orientation of a 3D display object.  Used for 3D transformations:  Translation, scaling, perspective projection,... FITC, Feb 2009 http://www.newmovieclip.com
  • 49. 3D MATRIX TRANSFORMATIONS  Matrix3D class  in flash.geom package  = the matrix that describes the position and orientation of a 3D display object.  Used for 3D transformations:  Translation, scaling, perspective projection,... INDEED, it is again all about... FITC, Feb 2009 http://www.newmovieclip.com
  • 50. 3D MATRIX TRANSFORMATIONS FITC, Feb 2009 http://www.newmovieclip.com
  • 51. 3D MATRIX TRANSFORMATIONS MATH Oooooooooh noooooo... FITC, Feb 2009 http://www.newmovieclip.com
  • 52. Background: defining a matrix FITC, Feb 2009 http://www.newmovieclip.com
  • 53. Background: defining a matrix ab c d ef g h ij k l mn o p FITC, Feb 2009 http://www.newmovieclip.com
  • 54. Background: defining a matrix ab c d  MATRIX = rectangular table of numbers ef g h  4 x 4 matrix = four rows x 4 columns ij k l  Dimensions of a matrix mn o p = number of rows by number of columns FITC, Feb 2009 http://www.newmovieclip.com
  • 55. Background: defining a matrix ab c d  MATRIX = rectangular table of numbers ef g h  4 x 4 matrix = four rows x 4 columns ij k l  Dimensions of a matrix mn o p = number of rows by number of columns FITC, Feb 2009 http://www.newmovieclip.com
  • 56. Background: defining a matrix ab c d  MATRIX = rectangular table of numbers ef g h  4 x 4 matrix = four rows x 4 columns ij k l  Dimensions of a matrix mn o p = number of rows by number of columns  Each value stores a piece of data that can be used in a calculation !  Preseted in Flash by a Vector ! FITC, Feb 2009 http://www.newmovieclip.com
  • 57. 3D MATRIX TRANSFORMATIONS FITC, Feb 2009 http://www.newmovieclip.com
  • 58. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: FITC, Feb 2009 http://www.newmovieclip.com
  • 59. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: scaleX 0 0 tx 0 scaleY 0 ty 0 0 scaleZ tz 0 0 0 tw FITC, Feb 2009 http://www.newmovieclip.com
  • 60. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: scaleX 0 0 tx 0 scaleY 0 ty 0 0 scaleZ tz 0 0 0 tw x-axis FITC, Feb 2009 http://www.newmovieclip.com
  • 61. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: scaleX 0 0 tx 0 scaleY 0 ty 0 0 scaleZ tz 0 0 0 tw x-axis y-axis FITC, Feb 2009 http://www.newmovieclip.com
  • 62. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: scaleX 0 0 tx 0 scaleY 0 ty 0 0 scaleZ tz 0 0 0 tw x-axis y-axis z-axis FITC, Feb 2009 http://www.newmovieclip.com
  • 63. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: Orientation and scaling scaleX 0 0 tx 0 scaleY 0 ty 0 0 scaleZ tz 0 0 0 tw x-axis y-axis z-axis FITC, Feb 2009 http://www.newmovieclip.com
  • 64. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: Orientation and scaling Translation scaleX 0 0 tx 0 scaleY 0 ty 0 0 scaleZ tz 0 0 0 tw x-axis y-axis z-axis FITC, Feb 2009 http://www.newmovieclip.com
  • 65. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: scaleX 0 0 tx scaleY 0 0 ty 0 scaleZ tz 0 0 0 0 tw FITC, Feb 2009 http://www.newmovieclip.com
  • 66. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: scaleX 0 0 tx X, Y and Z scale values 1 = 100% scale scaleY 0 0 ty 0 scaleZ tz 0 0 0 0 tw FITC, Feb 2009 http://www.newmovieclip.com
  • 67. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: tx scaleX 0 0 ty 0 scaleY 0 0 tz 0 scaleZ 0 0 0 tw FITC, Feb 2009 http://www.newmovieclip.com
  • 68. 3D MATRIX TRANSFORMATIONS  How does the 3D transformation matrix look: tx scaleX 0 0 X, Y and Z translation values ty 0 scaleY 0 Value in pixels 0 tz 0 scaleZ 0 0 0 tw FITC, Feb 2009 http://www.newmovieclip.com
  • 69. 3D MATRIX TRANSFORMATIONS FITC, Feb 2009 http://www.newmovieclip.com
  • 70. 3D MATRIX TRANSFORMATIONS  How does that work in Flash CS 4 ?  Transform property of a 3D display object  transform.matrix3d property  Built in methods:  appendTranslation  appendRotation  appendScale  ... FITC, Feb 2009 http://www.newmovieclip.com
  • 71. 3D MATRIX TRANSFORMATIONS  How does that work in Flash CS 4 ?  Transform property of a 3D display object  transform.matrix3d property  Built in methods:  appendTranslation  appendRotation  appendScale  ... DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 72. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 73. ADVANCED DRAWING API  Sprite, MovieClip and Shape have a graphics property = instance of Grahics class  What can you do with it ?  Generate vector shapes at runtime  Alter vector shapes at runtime  Create 3D effects  and ...drawing is done by using Vectors !  FITC, Feb 2009 http://www.newmovieclip.com
  • 74. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 75. ADVANCED DRAWING API  We are used to :  Graphics.LineTo() , Graphics.curveTo(), Graphics.moveTo(),  NOW :  GraphicsPathCommand.NO_OP = 0  GraphicsPathCommand.MOVE_TO = 1  GraphicsPathCommand.LINE_TO = 2  GraphicsPathCommand.CURVE_TO = 3  GraphicsPathCommand.WIDE_MOVE_TO = 4  GraphicsPathCommand.WIDE_LINE_TO = 5 FITC, Feb 2009 http://www.newmovieclip.com
  • 76. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 77. ADVANCED DRAWING API  How can we use those commands ?  Graphics.Drawpath( ) method expects a COMMANDS VECTOR var cmds:Vector.<int> = new Vector.<int>(); cmds[0] = GraphicsPathCommand.MOVE_TO; cmds[1] = GraphicsPathCommand.LINE_TO; cmds[2] = GraphicsPathCommand.LINE_TO; ... FITC, Feb 2009 http://www.newmovieclip.com
  • 78. ADVANCED DRAWING API  How can we use those commands ?  Graphics.Drawpath( ) method expects a COMMANDS VECTOR var cmds:Vector.<int> = new Vector.<int>(); cmds[0] = GraphicsPathCommand.MOVE_TO; cmds[1] = GraphicsPathCommand.LINE_TO; cmds[2] = GraphicsPathCommand.LINE_TO; ...  Graphics.DrawPath() method also expects a DATA VECTOR var data:Vector.<Number> = new Vector.<Number>(); data[0] = 50; data[1] = 200; data[2] = 100; data[3] = 250; data[4] = 200; data[5] = 300; FITC, Feb 2009 http://www.newmovieclip.com
  • 79. ADVANCED DRAWING API  How can we use those commands ?  Graphics.Drawpath( ) method expects a COMMANDS VECTOR var cmds:Vector.<int> = new Vector.<int>(); cmds[0] = GraphicsPathCommand.MOVE_TO; cmds[1] = GraphicsPathCommand.LINE_TO; cmds[2] = GraphicsPathCommand.LINE_TO; ...  Graphics.DrawPath() method also expects a DATA VECTOR var data:Vector.<Number> = new Vector.<Number>(); data[0] = 50; data[1] = 200; data[2] = 100; data[3] = 250; data[4] = 200; data[5] = 300; Graphics.drawPath(cmds , data ) FITC, Feb 2009 http://www.newmovieclip.com
  • 80. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 81. ADVANCED DRAWING API  Graphic Data Classes FITC, Feb 2009 http://www.newmovieclip.com
  • 82. ADVANCED DRAWING API  Graphic Data Classes  in the flash.display package FITC, Feb 2009 http://www.newmovieclip.com
  • 83. ADVANCED DRAWING API  Graphic Data Classes  in the flash.display package  = data containers for the Drawing API FITC, Feb 2009 http://www.newmovieclip.com
  • 84. ADVANCED DRAWING API  Graphic Data Classes  in the flash.display package  = data containers for the Drawing API  All Graphic Data Classes implement the IGraphicsData interface FITC, Feb 2009 http://www.newmovieclip.com
  • 85. ADVANCED DRAWING API  Graphic Data Classes  in the flash.display package  = data containers for the Drawing API  All Graphic Data Classes implement the IGraphicsData interface  Some examples : FITC, Feb 2009 http://www.newmovieclip.com
  • 86. ADVANCED DRAWING API  Graphic Data Classes  in the flash.display package  = data containers for the Drawing API  All Graphic Data Classes implement the IGraphicsData interface  Some examples :  GraphicsBitmapFill( ), GraphicsSolidFill( ), GraphicsGradientFill( ), GraphicsPath( ),... FITC, Feb 2009 http://www.newmovieclip.com
  • 87. ADVANCED DRAWING API DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 88. ADVANCED DRAWING API  Graphics.drawGraphicsData()  Used to render a collection of Graphic Data Classes  You need to pass a VECTOR (type IGraphicsData) which contains all the the necessary Graphic Data DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 89. ADVANCED DRAWING API  Graphics.drawGraphicsData()  Used to render a collection of Graphic Data Classes  You need to pass a VECTOR (type IGraphicsData) which contains all the the necessary Graphic Data var drawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>(); //stroke = GraphicsStroke instance drawing[0] = stroke; //fill = GraphicsSolidFill instance drawing[1] = fill; // path = GraphicsPath instance drawing[2] = path; graphics.drawGraphicsData(drawing); DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 90. ADVANCED DRAWING API  DEMO: Draw Graphics Data from FXG 1.0 file  FXG 1.0 describes and XML based graphics interchange format for the Flash Platform Specifications of FXG : http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification FITC, Feb 2009 http://www.newmovieclip.com
  • 91. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 92. ADVANCED DRAWING API  Graphics.drawTriangles( ) method:  Can be used for 3D effects through ActionScript  You need to pass a VECTOR with vertices () FITC, Feb 2009 http://www.newmovieclip.com
  • 93. ADVANCED DRAWING API  Graphics.drawTriangles( ) method:  Can be used for 3D effects through ActionScript  You need to pass a VECTOR with vertices () (100 , 0) (0 , 0) (0 , 100) FITC, Feb 2009 http://www.newmovieclip.com
  • 94. ADVANCED DRAWING API  Graphics.drawTriangles( ) method:  Can be used for 3D effects through ActionScript  You need to pass a VECTOR with vertices () (100 , 0) (0 , 0) graphics.beginFill(0xFF3701); graphics.drawTriangles( (0 , 100) Vector.<Number>([ 0,0, 100,0, 0,100 ])); FITC, Feb 2009 http://www.newmovieclip.com
  • 95. ADVANCED DRAWING API A B FITC, Feb 2009 http://www.newmovieclip.com
  • 96. ADVANCED DRAWING API  PROBLEM : What if two triangles share points ? (100 , 0) (0 , 0) A B (100 , 100) (0 , 100) FITC, Feb 2009 http://www.newmovieclip.com
  • 97. ADVANCED DRAWING API  PROBLEM : What if two triangles share points ? (100 , 0) (0 , 0) A B (100 , 100) (0 , 100) graphics.beginFill(0xFF3701); graphics.drawTriangles( Vector.<Number>([ A 0,0, 100,0, 0,100, B 100,0, 100,100, 0,100 ])); FITC, Feb 2009 http://www.newmovieclip.com
  • 98. ADVANCED DRAWING API A B FITC, Feb 2009 http://www.newmovieclip.com
  • 99. ADVANCED DRAWING API  SOLUTION: The indices parameter : A B FITC, Feb 2009 http://www.newmovieclip.com
  • 100. ADVANCED DRAWING API  SOLUTION: The indices parameter : POINT 0 A B FITC, Feb 2009 http://www.newmovieclip.com
  • 101. ADVANCED DRAWING API  SOLUTION: The indices parameter : POINT 1 POINT 0 A B FITC, Feb 2009 http://www.newmovieclip.com
  • 102. ADVANCED DRAWING API  SOLUTION: The indices parameter : POINT 1 POINT 0 A B POINT 2 FITC, Feb 2009 http://www.newmovieclip.com
  • 103. ADVANCED DRAWING API  SOLUTION: The indices parameter : POINT 1 POINT 0 A B POINT 3 POINT 2 FITC, Feb 2009 http://www.newmovieclip.com
  • 104. ADVANCED DRAWING API  SOLUTION: The indices parameter : POINT 1 POINT 0 Rectangle A= A POINT 0 POINT 1  POINT 2 INDICES = 0, 1 , 2 B Rectangle B= POINT 1 POINT 3  POINT 2 INDICES = 1, 3, 2 POINT 3 POINT 2 FITC, Feb 2009 http://www.newmovieclip.com
  • 105. ADVANCED DRAWING API  SOLUTION: The indices parameter : POINT 1 POINT 0 Rectangle A= A POINT 0 POINT 1  POINT 2 INDICES = 0, 1 , 2 B Rectangle B= POINT 1 POINT 3  POINT 2 INDICES = 1, 3, 2 POINT 3 POINT 2 graphics.beginFill(0xFF3701); graphics.drawTriangles( Vector.<Number>([ 0,0, 100,0, 0,100, 100,0, 100,100, 0,100 ])); FITC, Feb 2009 http://www.newmovieclip.com
  • 106. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 107. ADVANCED DRAWING API  Texturing the triangles : UV Data FITC, Feb 2009 http://www.newmovieclip.com
  • 108. ADVANCED DRAWING API  Texturing the triangles : UV Data V=0 A B V=1 U = value in % (0-1) U=0 U=1 V = value in % (0-1) FITC, Feb 2009 http://www.newmovieclip.com
  • 109. ADVANCED DRAWING API  Texturing the triangles : UV Data V=0 A B V=1 U = value in % (0-1) U=0 U=1 V = value in % (0-1) DEMO FITC, Feb 2009 http://www.newmovieclip.com
  • 110. ADVANCED DRAWING API FITC, Feb 2009 http://www.newmovieclip.com
  • 111. ADVANCED DRAWING API  Adding perspective : UVT Data  UV data for bitmap mapping to vertices  T adds perspective projection  = scale ratio at that location in Z direction Looks like 3D, but is an illusion (it is 2D)  FITC, Feb 2009 http://www.newmovieclip.com
  • 112. ADVANCED DRAWING API  Adding perspective : UVT Data  UV data for bitmap mapping to vertices  T adds perspective projection  = scale ratio at that location in Z direction Looks like 3D, but is an illusion (it is 2D)  FITC, Feb 2009 http://www.newmovieclip.com
  • 113. ADVANCED DRAWING API  Adding perspective : UVT Data  UV data for bitmap mapping to vertices  T adds perspective projection  = scale ratio at that location in Z direction Looks like 3D, but is an illusion (it is 2D)  FITC, Feb 2009 http://www.newmovieclip.com
  • 114. ADVANCED DRAWING API  Adding perspective : UVT Data  UV data for bitmap mapping to vertices  T adds perspective projection  = scale ratio at that location in Z direction Looks like 3D, but is an illusion (it is 2D)  FITC, Feb 2009 http://www.newmovieclip.com
  • 115. ADVANCED DRAWING API eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 116. ADVANCED DRAWING API  How to determine the scale ratio T ? eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 117. ADVANCED DRAWING API  How to determine the scale ratio T ? T = focalLenght / (focalLength + z); eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 118. ADVANCED DRAWING API  How to determine the scale ratio T ? T = focalLenght / (focalLength + z); eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 119. ADVANCED DRAWING API  How to determine the scale ratio T ? T = focalLenght / (focalLength + z); eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 120. ADVANCED DRAWING API  How to determine the scale ratio T ? T = focalLenght / (focalLength + z); focalLength eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 121. ADVANCED DRAWING API  How to determine the scale ratio T ? T = focalLenght / (focalLength + z); focalLength z value eg : T = 200 / (200 + 200) = 0.5 DEMO eg : T = 20 / (20 + 200) = 0.09 FITC, Feb 2009 http://www.newmovieclip.com
  • 122. Q and hopefully A FITC, Feb 2009 http://www.newmovieclip.com
  • 123. Q and hopefully A Q? FITC, Feb 2009 http://www.newmovieclip.com
  • 124. FITC, Feb 2009 http://www.newmovieclip.com
  • 125. THANKS Slides and Demos available at www.newmovieclip.com FITC, Feb 2009 http://www.newmovieclip.com