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!
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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