Your SlideShare is downloading. ×
0
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Play with Pixels, Bitmap Manipulation with Flash! -  Koen De Weggheleire
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

14,545

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 …

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
14,545
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
2
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. My personal DO’s and DONT’s DOMESTIC - INTERNATIONAL N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. 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. 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. 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. BITMAP TRANSFORMATION DOMESTIC - INTERNATIONAL N° 4 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ColorTransform object DOMESTIC - INTERNATIONAL N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ConvolutionFilter DOMESTIC - INTERNATIONAL N° 15 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ConvolutionFilter DOMESTIC - INTERNATIONAL  Some Convolution Kernels Basic blur Med Blur Gauss blur 5 Sharp N° 21 - FITC Feb 2008 - http://www.newmovieclip.com
  • 73. ConvolutionFilter DOMESTIC - INTERNATIONAL  Some Convolution Kernels 9 Sharp Edge Extrude Emboss N° 22 - FITC Feb 2008 - http://www.newmovieclip.com
  • 74. BitmapData class and pixel manipulation DOMESTIC - INTERNATIONAL N° 23 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. BitmapData class and pixel manipulation DOMESTIC - INTERNATIONAL N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
  • 79. BitmapData class and pixel manipulation DOMESTIC - INTERNATIONAL  Manipulate the little tiny PIXELS: N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. DisplacementMapFilter DOMESTIC - INTERNATIONAL N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  • 96. DisplacementMapFilter DOMESTIC - INTERNATIONAL  ApplyFilter()  DISPLACEMENTMAPFILTER N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  • 97. DisplacementMapFilter DOMESTIC - INTERNATIONAL  ApplyFilter()  DISPLACEMENTMAPFILTER  What you need: N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  • 98. DisplacementMapFilter DOMESTIC - INTERNATIONAL  ApplyFilter()  DISPLACEMENTMAPFILTER  What you need:  A source BitmapData object N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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. 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. DisplacementMapFilter DOMESTIC - INTERNATIONAL R(x,y) N° 26 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. DisplacementMapFilter DOMESTIC - INTERNATIONAL  How to make your DisplacementMap? Pinch effect Perspective effect N° 27 - FITC Feb 2008 - http://www.newmovieclip.com
  • 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. 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

×