Play With Vectors in Flash CS4

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


My DO’s and DONT’s



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



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


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)



= 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”




0 1 2 3 4 5

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

var v:Vector.<String>



 So, it is actually just an Array ?



 YEAH  but...



 YEAH  but...

 VECTOR = dence Array !



 YEAH  but...


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



 YEAH  but...


v[0] = “FITC”; RangeError: Error #1125:
v[2] = “ROCKS !”;



 VECTOR = bounds checked !




v[0] = “FITC”;
v[1] = “ROCKS !”;
trace(v[2]);




v[0] = “FITC”;
RangeError: Error #1125:
v[1] = “ROCKS !”;
trace(v[2]);




v[0] = “FITC”;
v[1] = “ROCKS !”;
trace(v[2]);

 VECTOR can be fixed length !




v[0] = “FITC”;
v[1] = “ROCKS !”;
trace(v[2]);

var v:Vector.<String> = new Vector.<String>(2,true);
v[0] = “FITC”;
v[1] = “ROCKS”;
V[2] = “AGAIN”;




v[0] = “FITC”;
v[1] = “ROCKS !”;
trace(v[2]);

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



 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] );




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!



DEMO



 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



 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.


WHERE DOES MR VECTOR LIVE ?



 Vectors in 3D MATRIX OPERATIONS



 Vectors in ADVANCED DRAWING



 2D drawing



 2D drawing
 3D drawing



 2D drawing
 3D drawing

Let’s start with 3D Matrices ...


3D MATRIX TRANSFORMATIONS



 Matrix3D class



 Matrix3D class
 in flash.geom package



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



 Matrix3D class
 Used for 3D transformations:



 Matrix3D class
 Translation, scaling, perspective projection,...



 Matrix3D class
 Translation, scaling, perspective projection,...

INDEED, it is again all about...



MATH
Oooooooooh noooooo...


Background: defining a matrix



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



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



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 !



 How does the 3D transformation matrix look:




scaleX 0 0 tx

0 scaleY 0 ty

0
0 scaleZ tz
0
0 0 tw




scaleX 0 0 tx

0 scaleY 0 ty

0
0 scaleZ tz
0
0 0 tw

x-axis




scaleX 0 0 tx

0 scaleY 0 ty

0
0 scaleZ tz
0
0 0 tw

x-axis y-axis




scaleX 0 0 tx

0 scaleY 0 ty

0
0 scaleZ tz
0
0 0 tw

x-axis y-axis z-axis




Orientation and scaling

scaleX 0 0 tx

0 scaleY 0 ty

0
0 scaleZ tz
0
0 0 tw





Orientation and scaling Translation

scaleX 0 0 tx

0 scaleY 0 ty

0
0 scaleZ tz
0
0 0 tw





scaleX 0 0 tx

scaleY
0 0 ty

0 scaleZ tz
0
0
0 0 tw




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




tx
scaleX 0 0

ty
0 scaleY 0

0 tz
0 scaleZ
0
0 0 tw




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



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

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



 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


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



 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



 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;
...



...
 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() 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 )



 Graphic Data Classes



 in the flash.display package



 = data containers for the Drawing API



 All Graphic Data Classes implement the IGraphicsData
interface



interface

 Some examples :



interface

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



DEMO


 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


 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


 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


 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)



(100 , 0)
(0 , 0)

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



A
B


 PROBLEM : What if two triangles share points ?

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


 PROBLEM : What if two triangles share points ?

(100 , 0)
(0 , 0)
A
B
(100 , 100)
(0 , 100)
Vector.<Number>([
A 0,0, 100,0, 0,100,
B 100,0, 100,100, 0,100
]));


 SOLUTION: The indices parameter :

A
B



POINT 0
A
B



POINT 1
POINT 0
A
B



POINT 1
POINT 0
A
B
POINT 2



POINT 1
POINT 0
A
B
POINT 3
POINT 2



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



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

Vector.<Number>([
0,0, 100,0, 0,100,
100,0, 100,100, 0,100
]));


 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)



V=0

A
B
V=1

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


 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)




eg : T = 200 / (200 + 200) = 0.5
DEMO
eg : T = 20 / (20 + 200) = 0.09

 How to determine the scale ratio T ?

eg : T = 200 / (200 + 200) = 0.5
DEMO
eg : T = 20 / (20 + 200) = 0.09

T = focalLenght / (focalLength + z);

eg : T = 200 / (200 + 200) = 0.5
DEMO
eg : T = 20 / (20 + 200) = 0.09


focalLength
eg : T = 200 / (200 + 200) = 0.5
DEMO
eg : T = 20 / (20 + 200) = 0.09


focalLength z value
eg : T = 200 / (200 + 200) = 0.5
DEMO
eg : T = 20 / (20 + 200) = 0.09

Q and hopefully A


Q and hopefully A

Q?

THANKS
Slides and Demos available at
www.newmovieclip.com


Play With Vectors in Flash CS4

Recommended

Recommended

More Related Content

Similar to Play With Vectors in Flash CS4

Similar to Play With Vectors in Flash CS4 (8)

Recently uploaded

Recently uploaded (20)

Play With Vectors in Flash CS4