PRIORITY MAIL
US POSTAGE PAID
info@newmovieclip.com
PERMIT NO 97
play with pixels
BITMAP MANIPULATION WITH FLASH CS3
Koen De Weggheleire Creative Fun
Technical

SESSION OVERVIEW
DOMESTIC - INTERNATIONAL
 Talk about myself...
 Bitmap transformation
 Bitmap manipulation
 Examples
 Q and hopefully A
N° 2 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
 I DO lecture, speak, coordinate, write, manage,..
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
 I DO lecture, speak, coordinate, write, manage,..
 I DO NOT
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
 I DO lecture, speak, coordinate, write, manage,..
 I DO NOT
 Renovate my house (sorry dad)
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
 I DO lecture, speak, coordinate, write, manage,..
 I DO NOT
 Renovate my house (sorry dad)
 Do sports
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
 I DO lecture, speak, coordinate, write, manage,..
 I DO NOT
 Renovate my house (sorry dad)
 Do sports
 Eat healthy
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
 I DO lecture, speak, coordinate, write, manage,..
 I DO NOT
 Renovate my house (sorry dad)
 Do sports
 Eat healthy
 Have a girlfriend 
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com

BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com

BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
 Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)
Using a transformation MATRIX...
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com

BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
 Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)
Using a transformation MATRIX...
 Indeed... It is all about
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com

BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
 Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)
Using a transformation MATRIX...
 Indeed... It is all about
MATH
Oooooh noooo
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c
d e f
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
d e f
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i  Dimensions of a matrix
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i  Dimensions of a matrix
= number of rows by number of
columns
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i  Dimensions of a matrix
= number of rows by number of
columns
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i  Dimensions of a matrix
= number of rows by number of
columns
 Each value stores a piece of data that can be used in a calculation !
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i  Dimensions of a matrix
= number of rows by number of
columns
 Each value stores a piece of data that can be used in a calculation !
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c  MATRIX
= rectangular table of numbers
d e f  3 x 3 matrix
= three rows x three colums
g h i  Dimensions of a matrix
= number of rows by number of
columns
 Each value stores a piece of data that can be used in a calculation !
 Representation in Flash : [a , b , c , d , e , f , g , h , i]
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx X and Y scale values
c d ty 1 = 100% scale
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx X and Y scale values
c d ty 1 = 100% scale
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
Y and X skew values
0 = no skew
1 = skew value equal to
c d ty the width or height of
an object at a scale of 1
u v w
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
Y and X skew values
0 = no skew
1 = skew value equal to
c d ty the width or height of
an object at a scale of 1
u v w
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx Y and X translation values
c d ty value in pixels
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does the transformation MATRIX look ? ?
a b tx Y and X translation values
c d ty value in pixels
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 and ROTATION ?
 Rotation is combination of a, b, c, d !
a b tx
c d ty
u v w
N° 9 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 and ROTATION ?
 Rotation is combination of a, b, c, d !
a b tx
c d ty
u v w
N° 9 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 and ROTATION ?
 Rotation is combination of a, b, c, d !
a b tx Example :
c d ty rotate around angle q
 a = cos(q)
u v w
 b = sin (q)
 c = -sin(q)
 d =-cos(q)
N° 9 - FITC Feb 2008 - http://www.newmovieclip.com

Using the transformation matrix
DOMESTIC - INTERNATIONAL
 How does that work in Flash ?
 Matrix.createBox(scaleX, scaleY, rotation, tx, ty);
 Matrix.rotate(rotation);
 Matrix.scale(scaleX, scaleY);
 Matrix.translate(tx,ty)
Time for a demo
N° 10 - FITC Feb 2008 - http://www.newmovieclip.com

BITMAP MANIPULATION
DOMESTIC - INTERNATIONAL
Purpose:
Understanding how PIXEL manipulation
works to do some cool and fun stuff on BITMAPS!
N° 11 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
B
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
B
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
B
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
G
B
A
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorTransform object
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform
R
//new red value = (old red value * //
redMultiplier) + redOffset
var transfRed:ColorTransform =  G
new ColorTransform();
transfRed.greenMultiplier =0;
transfRed.blueMultiplier=0; B
MC.transform.colorTransform =
transfRed;
A
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com

ColorMatrixFilter
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 flash.filters.ColorMatrixFilter
 Yes again a matrix... This time a 4 x 5 matrix.
N° 13 - FITC Feb 2008 - http://www.newmovieclip.com

ColorMatrixFilter
DOMESTIC - INTERNATIONAL
 Transform colors of a display object:
 flash.filters.ColorMatrixFilter
 Yes again a matrix... This time a 4 x 5 matrix.
R G B A Off
R 1 0 0 0 0 SUM red
G 0 1 0 0 0 SUM green
B 0 0 1 0 0 SUM blue
A 0 0 0 1 0 SUM alpha
N° 13 - FITC Feb 2008 - http://www.newmovieclip.com

ColorMatrixFilter
DOMESTIC - INTERNATIONAL
 Example : p(x,y) with colorvalue 0xFF123456
 R = (1*0x12) + (0*0x34) + (0*0x56) + (0*0xFF)+120
 G = (0*0x12) + (2*0x34) + (0*0x56) + (0*0xFF)+0
 B = (0*0x12) + (0*0x34) + (1*0x56) + (0*0xFF)+0
 A = (0*0x12) + (0*0x34) + (0*0x56) + (1*0xFF)+0
  ARGB is resulting color R G B A Off
R 1 0 0 0 120
G 0 2 0 0 0
B 0 0 1 0 0
A 0 0 0 1 0
N° 14 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 “One of the reasons for capturing an image digitally is to allow
us to manipulate it to better serve our needs. Often this will include
trying to improve the subjective appearance of an image through
smoothing of grainy features or sharpening of indistinct features.
These goals sometimes can be accomplished through the use of a
discrete convolution operation.”
Dale A. Schumacher – Graphic Gems II, 1991
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 “One of the reasons for capturing an image digitally is to allow
us to manipulate it to better serve our needs. Often this will include
trying to improve the subjective appearance of an image through
smoothing of grainy features or sharpening of indistinct features.
These goals sometimes can be accomplished through the use of a
discrete convolution operation.”
Dale A. Schumacher – Graphic Gems II, 1991
 Sounds COOL... BUT... what is a convolution filter now?
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 “One of the reasons for capturing an image digitally is to allow
us to manipulate it to better serve our needs. Often this will include
trying to improve the subjective appearance of an image through
smoothing of grainy features or sharpening of indistinct features.
These goals sometimes can be accomplished through the use of a
discrete convolution operation.”
Dale A. Schumacher – Graphic Gems II, 1991
 Sounds COOL... BUT... what is a convolution filter now?
 A convolution filter combines pixel data in a bitmap with
data from neighboring pixels.
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 “One of the reasons for capturing an image digitally is to allow
us to manipulate it to better serve our needs. Often this will include
trying to improve the subjective appearance of an image through
smoothing of grainy features or sharpening of indistinct features.
These goals sometimes can be accomplished through the use of a
discrete convolution operation.”
Dale A. Schumacher – Graphic Gems II, 1991
 Sounds COOL... BUT... what is a convolution filter now?
 A convolution filter combines pixel data in a bitmap with
data from neighboring pixels.
 = FULL CONTROL on pixel level
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
DIVISOR : sum of matrix coefficients
y [i,j] = 1/22 . (a[x,y] + 2a[x-1,y] + 2a[x-1,y-1] + 2a[x,y-1] + 3a[x,y+1]…
N° 16 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
2 2 3
Convolution Kernel: 2 1 3
3 3 3
Source Bitmap A Output Bitmap B
a [x,y] b [x,y]
DIVISOR : sum of matrix coefficients
y [i,j] = 1/22 . (a[x,y] + 2a[x-1,y] + 2a[x-1,y-1] + 2a[x,y-1] + 3a[x,y+1]…
N° 16 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
0 0 0
Convolution Kernel: 0 1 0
0 0 0
Source Bitmap A Output Bitmap B
a [x,y] b [x,y]
SOLUTION : The output image is the same as the input image
N° 17 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
0 0 0
Convolution Kernel: 0 0 1
0 0 0
Source Bitmap A Output Bitmap B
a [x,y] b [x,y]
SOLUTION : The output image is shifted 1 pixel to left
N° 18 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 Some Convolution Kernels
Basic Smooth 3x3 Basic Smooth 5x5
Basic High Pass Filter 3x3 Basic High pass Filter 5x5
N° 19 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 Some Convolution Kernels
Horizontal edges Vertical edges
Left diagonal edges Right diagonal edges
N° 20 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 Some Convolution Kernels
Basic blur Med Blur
Gauss blur 5 Sharp
N° 21 - FITC Feb 2008 - http://www.newmovieclip.com

ConvolutionFilter
DOMESTIC - INTERNATIONAL
 Some Convolution Kernels
9 Sharp Edge
Extrude Emboss
N° 22 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 = a photographic snapshot of the pixels contained
within a bitmap.
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 = a photographic snapshot of the pixels contained
within a bitmap.
 = the class has built-in methods for creation and
manipulation of pixel data.
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 = a photographic snapshot of the pixels contained
within a bitmap.
 = the class has built-in methods for creation and
manipulation of pixel data.
var myBitmapDataObject:BitmapData = 
new BitmapData(150, 150, false, 0xFF0000);
var myImage:Bitmap = new Bitmap(myBitmapDataObject);
addChild(myImage);
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
 Other interesting methods:
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
 Other interesting methods:
 applyFilter()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
 Other interesting methods:
 applyFilter()
 colorTransform()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
 Other interesting methods:
 applyFilter()
 colorTransform()
 compare()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
 Other interesting methods:
 applyFilter()
 colorTransform()
 compare()
 threshold()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
 Manipulate the little tiny PIXELS:
 getPixel(x,y) and getPixel32(x,y)
 setPixel(x,y) and setPixel32(x,y)
 getPixels(rect)  returns ByteArray
 setPixels(rect,bytes)
 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED
 draw()  transformations are NOT copied!
 Other interesting methods:
 applyFilter()
 colorTransform()
 compare()
 threshold()
 ...
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 ApplyFilter()  DISPLACEMENTMAPFILTER
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 ApplyFilter()  DISPLACEMENTMAPFILTER
 What you need:
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 ApplyFilter()  DISPLACEMENTMAPFILTER
 What you need:
 A source BitmapData object
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 ApplyFilter()  DISPLACEMENTMAPFILTER
 What you need:
 A source BitmapData object
 A displacement map image (BitmapData object)
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 ApplyFilter()  DISPLACEMENTMAPFILTER
 What you need:
 A source BitmapData object
 A displacement map image (BitmapData object)
 How it works :
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 ApplyFilter()  DISPLACEMENTMAPFILTER
 What you need:
 A source BitmapData object
 A displacement map image (BitmapData object)
 How it works :
 uses pixel color values from the displacement map to do
displacement in x and y direction !
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
R(x,y)
N° 26 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
S(x,y) D(x,y) R(x,y)
Source Displace Result
Map
[
R[x, y] = S x + ( (doCompX(x, y) - 128 ) * scaleX) / 256 ,
y + ( (doCompY(x, y) - 128) * scaleY) / 256) ]
Multipliers to SCALE
the X- and Y displacement
doCompX = get componentX value from D(Sx-Dx , Sy-Dy)
doCompY = get componentY value from D(Sx-Dx , Sy-Dy)
N° 26 - FITC Feb 2008 - http://www.newmovieclip.com

DisplacementMapFilter
DOMESTIC - INTERNATIONAL
 How to make your DisplacementMap?
Pinch effect
Perspective effect
N° 27 - FITC Feb 2008 - http://www.newmovieclip.com

PRIORITY MAIL
US POSTAGE PAID
info@newmovieclip.com
PERMIT NO 97
EXAMPLES...
Slides and code : www.newmovieclip.com
Koen De Weggheleire Creative Fun
Technical

PRIORITY MAIL
US POSTAGE PAID
info@newmovieclip.com
PERMIT NO 97
Q AND A
THANK YOU ALL AND CU NEXT TIME !
Koen De Weggheleire Creative Fun
Technical
Slid
esh
ow
&d
new em
mo at os
viec
lip.
com