Play with Pixels, Bitmap Manipulation with Flash! - Koen De Weggheleire

15,143 views

Published on

Maybe you've used a displacement or convolution filter but never understood how it actually works...maybe you need some inspiration for your next mashup or you just want some tips on how you can make your daily bitmapdata life easier. In this session Koen will explain in depth how to use Flash CS3 to do real time image processing. Fasten your seatbelt for an inspirational hour full of displacement, manipulation, convolution, matrices, webcam and of course a lot of bitmapdata and fun!

Published in: Technology, Business
2 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total views
15,143
On SlideShare
0
From Embeds
0
Number of Embeds
1,336
Actions
Shares
0
Downloads
0
Comments
2
Likes
20
Embeds 0
No embeds

No notes for slide

Play with Pixels, Bitmap Manipulation with Flash! - Koen De Weggheleire

  1. 1. 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
  2. 2. 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
  3. 3. My personal DO’s and DONT’s DOMESTIC - INTERNATIONAL N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. BITMAP TRANSFORMATION DOMESTIC - INTERNATIONAL N° 4 - FITC Feb 2008 - http://www.newmovieclip.com
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Background : defining a matrix DOMESTIC - INTERNATIONAL a b c d e f g h i N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. ColorTransform object DOMESTIC - INTERNATIONAL N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
  43. 43. ColorTransform object DOMESTIC - INTERNATIONAL  Transform colors of a display object:  ColorTransform object  flash.geom.ColorTransform N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
  44. 44. ColorTransform object DOMESTIC - INTERNATIONAL  Transform colors of a display object:  ColorTransform object  flash.geom.ColorTransform N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
  45. 45. ColorTransform object DOMESTIC - INTERNATIONAL  Transform colors of a display object:  ColorTransform object  flash.geom.ColorTransform N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
  46. 46. ColorTransform object DOMESTIC - INTERNATIONAL  Transform colors of a display object:  ColorTransform object  flash.geom.ColorTransform N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. ConvolutionFilter DOMESTIC - INTERNATIONAL N° 15 - FITC Feb 2008 - http://www.newmovieclip.com
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. ConvolutionFilter DOMESTIC - INTERNATIONAL  Some Convolution Kernels Basic blur Med Blur Gauss blur 5 Sharp N° 21 - FITC Feb 2008 - http://www.newmovieclip.com
  73. 73. ConvolutionFilter DOMESTIC - INTERNATIONAL  Some Convolution Kernels 9 Sharp Edge Extrude Emboss N° 22 - FITC Feb 2008 - http://www.newmovieclip.com
  74. 74. BitmapData class and pixel manipulation DOMESTIC - INTERNATIONAL N° 23 - FITC Feb 2008 - http://www.newmovieclip.com
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. BitmapData class and pixel manipulation DOMESTIC - INTERNATIONAL N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
  79. 79. BitmapData class and pixel manipulation DOMESTIC - INTERNATIONAL  Manipulate the little tiny PIXELS: N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. 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
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. DisplacementMapFilter DOMESTIC - INTERNATIONAL N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  96. 96. DisplacementMapFilter DOMESTIC - INTERNATIONAL  ApplyFilter()  DISPLACEMENTMAPFILTER N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  97. 97. DisplacementMapFilter DOMESTIC - INTERNATIONAL  ApplyFilter()  DISPLACEMENTMAPFILTER  What you need: N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  98. 98. DisplacementMapFilter DOMESTIC - INTERNATIONAL  ApplyFilter()  DISPLACEMENTMAPFILTER  What you need:  A source BitmapData object N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  99. 99. 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
  100. 100. 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
  101. 101. 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
  102. 102. DisplacementMapFilter DOMESTIC - INTERNATIONAL R(x,y) N° 26 - FITC Feb 2008 - http://www.newmovieclip.com
  103. 103. 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
  104. 104. DisplacementMapFilter DOMESTIC - INTERNATIONAL  How to make your DisplacementMap? Pinch effect Perspective effect N° 27 - FITC Feb 2008 - http://www.newmovieclip.com
  105. 105. PRIORITY MAIL US POSTAGE PAID info@newmovieclip.com PERMIT NO 97 EXAMPLES... Slides and code : www.newmovieclip.com Koen De Weggheleire Creative Fun Technical
  106. 106. 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

×