Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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 Vec...
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                               ...
My DO’s and DONT’s

  I DO lecture, speak, coordinate, write, manage...
  I STILL DO NOT
        Renovate my house (sor...
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 V...
INTRODUCING MR VECTOR
<< Sega begins 24-hour countdown to quot;Vectormaniaquot;;
$160,000 in cash and prizes at stake as V...
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...
INTRODUCING MR VECTOR

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

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

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

 = Array whose elements have the same data type
         the base type (eg: int, String, Number,...
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.newmov...
INTRODUCING MR VECTOR

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




FITC, Feb 2009                  ...
INTRODUCING MR VECTOR

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


  VECTOR = dence Array !




FITC...
INTRODUCING MR VECTOR

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


  VECTOR = dence Array !


      ...
INTRODUCING MR VECTOR

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


  VECTOR = dence Array !


      ...
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] = “...
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “...
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “...
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “...
INTRODUCING MR VECTOR

  VECTOR = bounds checked !

       var v:Vector.<String> = new Vector.<String>();
       v[0] = “...
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;;
...
INTRODUCING MR VECTOR

  Vector() global function :



      var arr:Array = new Array();
      arr[0] = quot;FITCquot;;
...
INTRODUCING MR VECTOR




                                          DEMO



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

  Some interesting Vector methods :
        every : do test function until item returns false
   ...
INTRODUCING MR VECTOR




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

  SUMMARY :
        Type Safety : compiler identifies data type errors.
        Performance: MUC...
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.newmov...
WHERE DOES MR VECTOR LIVE ?

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




FITC, Feb 2009         ...
WHERE DOES MR VECTOR LIVE ?

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




FIT...
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS
  Vectors in ADVANCED DRAWING
        2D drawing
       ...
WHERE DOES MR VECTOR LIVE ?

  Vectors in 3D MATRIX OPERATIONS
  Vectors in ADVANCED DRAWING
        2D drawing
       ...
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://ww...
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the posit...
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the posit...
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the posit...
3D MATRIX TRANSFORMATIONS

  Matrix3D class
        in flash.geom package
        = the matrix that describes the posit...
3D MATRIX TRANSFORMATIONS




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




                 MATH
                    Oooooooooh noooooo...




FITC, Feb 2009          ...
Background: defining a matrix




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


                 ab   c   d
                 ef   g   h
                 ij   k   l
      ...
Background: defining a matrix


                 ab   c   d    MATRIX
                                   = rectangular ta...
Background: defining a matrix


                 ab   c   d    MATRIX
                                   = rectangular ta...
Background: defining a matrix


                 ab              c        d              MATRIX
                         ...
3D MATRIX TRANSFORMATIONS




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

  How does the 3D transformation matrix look:




FITC, Feb 2009                            ht...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0        0      t...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0        0      t...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0         0      ...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX     0         0      ...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:

                  Orientation and scaling

    ...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:

                  Orientation and scaling      ...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX 0       0     tx

   ...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                 scaleX 0       0     tx   X,...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                                            t...
3D MATRIX TRANSFORMATIONS

  How does the 3D transformation matrix look:



                                            t...
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
      ...
3D MATRIX TRANSFORMATIONS

  How does that work in Flash CS 4 ?
        Transform property of a 3D display object
      ...
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 ...
ADVANCED DRAWING API




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

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

  NOW :
  ...
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
  ...
ADVANCED DRAWING API

  How can we use those commands ?
        Graphics.Drawpath( ) method expects a COMMANDS VECTOR
  ...
ADVANCED DRAWING API

  How can we use those commands ?
        Graphics.Drawpath( ) method expects a COMMANDS VECTOR
  ...
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                    ...
ADVANCED DRAWING API

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

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

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

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




                                         DEMO



FITC, Feb 2009           http://www.newmovieclip...
ADVANCED DRAWING API
  Graphics.drawGraphicsData()
        Used to render a collection of Graphic Data Classes
        ...
ADVANCED DRAWING API
  Graphics.drawGraphicsData()
        Used to render a collection of Graphic Data Classes
        ...
ADVANCED DRAWING API
  DEMO: Draw Graphics Data from FXG 1.0 file
         FXG 1.0 describes and XML based graphics inte...
ADVANCED DRAWING API




FITC, Feb 2009           http://www.newmovieclip.com
ADVANCED DRAWING API
  Graphics.drawTriangles( ) method:
        Can be used for 3D effects through ActionScript
       ...
ADVANCED DRAWING API
  Graphics.drawTriangles( ) method:
        Can be used for 3D effects through ActionScript
       ...
ADVANCED DRAWING API
  Graphics.drawTriangles( ) method:
        Can be used for 3D effects through ActionScript
       ...
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)
 ...
ADVANCED DRAWING API
    PROBLEM : What if two triangles share points ?

                                (100 , 0)
  (0 ,...
ADVANCED DRAWING API




                 A
                     B




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



                 A
                     B




FITC, Feb 2009 ...
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

POINT 0
                   A
                       B




  F...
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                  ...
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                  ...
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                  ...
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                           POINT 1
POINT 0
                  ...
ADVANCED DRAWING API
    SOLUTION: The indices parameter :

                                   POINT 1
POINT 0
          ...
ADVANCED DRAWING API




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




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



                                                   V=0

     ...
ADVANCED DRAWING API
  Texturing the triangles : UV Data



                                                   V=0

     ...
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 per...
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds per...
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds per...
ADVANCED DRAWING API
  Adding perspective : UVT Data
        UV data for bitmap mapping to vertices

        T adds per...
ADVANCED DRAWING API




                 eg : T = 200 / (200 + 200) = 0.5
                                               ...
ADVANCED DRAWING API
  How to determine the scale ratio T ?




                 eg : T = 200 / (200 + 200) = 0.5
       ...
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




   ...
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




   ...
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




   ...
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




   ...
ADVANCED DRAWING API
  How to determine the scale ratio T ?
                 T = focalLenght / (focalLength + z);




   ...
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         ...
Próxima SlideShare
Cargando en…5
×

Play With Vectors in Flash CS4

6.705 visualizaciones

Publicado el

When people hear the word "vector" most of them immediately think of mathematical equations, to represent images in computer graphics. But it is not only that where this technical-creative session will focus on. In this session Koen also will explain in great depth how you can get the most out of the new Vector type in Flash CS4. From graphics vector data to 3D matrix transformations and lots more. Fasten your seatbelt for a round trip with "Mr. Vector" in an inspirational hour full of vector madness and fun!

Publicado en: Tecnología
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn }
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×