19 Replies Latest reply on Nov 19, 2006 8:49 PM by kglad

    URGENT: setPixel and bitmaps

    Think_Like_a_Winner Level 1
      Hi,

      We have an application that uses a colour picker to dynamically alter the colour of products. Will use a greyscale image as a base, which then has its greys changed to colours using a base colour. Or this is what we want any way. The problem I was having was I can not seem to load the gif image into the flash movie. And I am not sure I am using the set pixel function correctly. Btw , does set pixel take a 255255255 or FFFFFF value. I am not sure how to get the colours converted to hex from rgb in action script I saw a (r << ?) example some where. Is it possible to retain transparency in a gif using setpixel.

      I have a gif image called kittens.gif, and a

      import flash.display.BitmapData;

      var Red = 0;
      var Green = 102;
      var Blue = 204;
      var i = 0;

      var linkageId:String = "Kittens"
      var myBitmapData:BitmapData = BitmapData.loadBitmap(linkageId);
      this.kittensmovie.attachBitmap(myBitmapData, this.getNextHighestDepth());

      for (i=0; i<100; i++)
      {
      var j = 0;
      for (j=0; j<=100; j++)
      {
      pixel = myBitmapData.getPixel(i, j)
      pixel = pixel/10000;
      pixel = pixel-155;
      Red = Red+pixel;
      Green = Green+pixel;
      Blue = Blue+pixel;
      if (Red>255) {
      Red = 255;
      }
      if (Green>255) {
      Green = 255;
      }
      if (Blue>255) {
      Blue = 255;
      }
      if (Blue<0) {
      Blue = 0;
      }
      if (Red<0) {
      Red = 0;
      }
      if (Green<0) {
      Green = 0;
      }
      Red = Red*10000;
      Green = Green*100;
      pixelcolor = Red+Green+Blue;
      myBitmapData.setPixel(i, j, pixelcolor)
      }

      }
        • 1. Re: URGENT: setPixel and bitmaps
          kglad Adobe Community Professional & MVP
          you can use toString(16) to convert decimal to hex numbers and then use substring() to separate red, green and blue. prefix pixelcolor with "0x" to convert your string to a hex string for use by setPixel().
          • 2. URGENT: setPixel and bitmaps
            Think_Like_a_Winner Level 1
            Ok that should solve one problem. Do you know how i can change the pixels in a standard bitmap that is loaded using File>Import>Import to stage. Assuming the file name was called kittens.gif, i tried converting it to a symbol called "Kittens". I really have no idea how to do this, and can't find any thing on the web.

            myBitmapData.setPixel(i, j, "0x" + Red.toString(16) + Green.toString(16) + Blue.toString(16))


            • 3. Re: URGENT: setPixel and bitmaps
              kglad Adobe Community Professional & MVP
              the code in your first message should work if you right clicked on the image, ticked export for actionscript and typed a linkage id of Kittens. remove the image from the stage.

              what color changes are you trying to make? if you want to remap the colors of your bitmap check the paletteMap method of bitmaps. it's more efficient than going through each pixel of your bitmap.
              • 4. URGENT: setPixel and bitmaps
                Think_Like_a_Winner Level 1
                ".. if you right clicked on the image, ticked export for actionscript and typed a linkage id of Kittens. Remove the image from the stage." I am using flash from studio 8, and this option does not seem to be available? Do you know what it might be called or how I could access it?

                " ... paletteMap", will check it out.
                • 5. Re: URGENT: setPixel and bitmaps
                  kglad Adobe Community Professional & MVP
                  i know nothing about studio 8. are you right clicking on the image in your library (and NOT the on-stage image)???
                  • 6. URGENT: setPixel and bitmaps
                    Think_Like_a_Winner Level 1
                    Well finally got it going, mde some new code and it seems to work well.
                    • 8. Re: URGENT: setPixel and bitmaps
                      Think_Like_a_Winner Level 1
                      There are still a few problems though.

                      1) The set pixel method is very slow (takes around 4 seconds .. and causes a prompt to appear) _ I have had a look at the paletteMap method and it is a bit confusing. How exactly would you map 256 grey scale colours to other coulours of my choice. I have worked out a function for changing the colours but am not sure how to use the paletteMap function.
                      • 9. Re: URGENT: setPixel and bitmaps
                        kglad Adobe Community Professional & MVP
                        no, palleteMap won't work for gray scale. use the threshold method of bitmaps to run through your 256 rgb gray colors starting with 0xff000000 and increasing to 0xffffffff.
                        • 10. URGENT: setPixel and bitmaps
                          Think_Like_a_Winner Level 1
                          I tried this but it does not alter the image at all any ideas why not???

                          function ChangeColourMap(r,g,b) {

                          var linkageId:String = "Kittens";
                          var myBitmapData:BitmapData
                          myBitmapData = BitmapData.loadBitmap(linkageId);
                          this.attachBitmap(myBitmapData, this.getNextHighestDepth());

                          var greys:Array = new Array();
                          greys[0] = 0x000000
                          greys[1] = 0x111111
                          greys[2] = 0x222222
                          greys[3] = 0x333333
                          greys[4] = 0x444444
                          greys[5] = 0x555555
                          greys[6] = 0x666666
                          greys[7] = 0x777777
                          greys[8] = 0x888888
                          greys[9] = 0x999999
                          greys[10] = 0xAAAAAA
                          greys[11] = 0xBBBBBB
                          greys[12] = 0xCCCCCC
                          greys[13] = 0xDDDDDD
                          greys[14] = 0xEEEEEE
                          greys[15] = 0xFFFFFF
                          for (i=15; i> -1; i--) {
                          myBitmapData.threshold(myBitmapData, new Rectangle(0, 0, 640, 480), new Point(0, 0), ">=", greys , getNewColour(greys, r,g,b));
                          }
                          }

                          • 11. Re: URGENT: setPixel and bitmaps
                            kglad Adobe Community Professional & MVP
                            you have a few errors, but i can't get this to work because as you run through the for-loop (which should have 256 grayscale colors) you change the bitmap. the new value is repeatedly changed unless the new values are always less than the grey array threshold value. and even if that's true you eventually are going to have an all black bitmap.

                            so, going back to the paletteMap i now think that should work. you just need to test for one array (say red).

                            because you have a grayscale image if the red value is 0xmn, you know the pixel has color value 0xmnmnmn. make your changes accordingly.
                            • 12. Re: URGENT: setPixel and bitmaps
                              Think_Like_a_Winner Level 1
                              Ok will try paletteMap, will include an example below. Does any one know how to move a bitmp that has been attached with attachBitmap, to an x, y coordinate position.




                              • 13. Re: URGENT: setPixel and bitmaps
                                kglad Adobe Community Professional & MVP
                                you can adjust the _x,_y properties of the bitmap before its attached or adjust the _x,_y properties of the movieclip to which its attached, after its attached.
                                • 14. Re: URGENT: setPixel and bitmaps
                                  Think_Like_a_Winner Level 1
                                  Ok will try that, thanks. The thing I am having the most problem with at the moment is getting the movie to run fast enough.

                                  As previously mentioned I am tring to change a grey scale gif to to a monotone coloured image, based upon the grey scale previously input. This is done on the fly by sending a colour value which is used to generate the tonal colours.

                                  The problem is there are far to many greys to calculate. I would imagine the speed would be far too slow. Is there a way to get a list of the colours that already exist in the colour pallette which in this case woulld be around 256. Otherwise all grey scale colours must be calculated which is a huge number.

                                  As an example is it possible to do something like the following:

                                  existingPallete:array = SomeGetCurrentPalleteMethod()

                                  foreach(existingPallete as palleteColour){
                                  colours = CalculateNewColour(palleteColour)
                                  }

                                  then place the colours back into the image using the mapPallete function.
                                  • 15. Re: URGENT: setPixel and bitmaps
                                    kglad Adobe Community Professional & MVP
                                    there are exactly 256 gray colors. your image may use some number less than that, but 256 shouldn't be a problem.

                                    you only need to define the color you want to replace each of the 256 gray colors. if, for example, you wanted to replace your grays with shades of red you could use:

                                    • 16. URGENT: setPixel and bitmaps
                                      Think_Like_a_Winner Level 1
                                      Here is the code so far. The problem I am having is not understanding the number formatting used in the red, green, and blue arrays. I have integer 0 - 255 values, the format you used was 0xFF000000 the thing i don't understand is the hexdecimal number being used is odd, most colours i am familiar with use RRGGBB which would make a hex string FF0000 for solid red. When I use "0xFF" + Red.ToString(16) + "000000" it messes with the opacity. When i user an integer the image always comes out blue, regardless of the colours input, but the opacity remains intact.

                                      The pallet map array you used starts with FF? Then the red value .. then "000000" that is a lot of zeros.

                                      import flash.display.BitmapData;
                                      import flash.geom.Rectangle;
                                      import flash.geom.Point;

                                      //These need to be global

                                      // This needs to be global
                                      _root.NewRedArray = [];
                                      _root.NewGreenArray = [];
                                      _root.NewBlueArray = [];

                                      function AdjustPallete(hexColour){

                                      hex = "0x" + hexColour
                                      r = hex >> 16
                                      g = (hex >> 8) & 0xff
                                      b = hex & 0xff

                                      for(var i=0; i<256; i++)
                                      {
                                      Adjust = (i - 128) //(i - 128)- 32

                                      Red = r + Adjust
                                      if(Red > 255) {
                                      Red = 255
                                      } else if(Red < 0){
                                      Red = 0
                                      }
                                      Green = g + Adjust
                                      if(Green > 255) {
                                      Green = 255
                                      } else if(Green < 0){
                                      Green = 0
                                      }

                                      Blue = b + Adjust
                                      if(Blue > 255) {
                                      Blue = 255
                                      } else if(Blue < 0){
                                      Blue = 0
                                      }
                                      _root.NewRedArray = Red
                                      _root.NewGreenArray
                                      = Green
                                      _root.NewBlueArray =Blue
                                      }
                                      }



                                      function UpdateImageColour(colours:Array){
                                      bmp3 = BitmapData.loadBitmap("bedbase");
                                      _root.createEmptyMovieClip("mbedbase", this.getNextHighestDepth());
                                      mbedbase.attachBitmap(bmp3, 1);
                                      mbedbase._x = 0
                                      mbedbase._y = 0

                                      AdjustPallete(colours[0])
                                      bmp = BitmapData.loadBitmap("bed");
                                      _root.createEmptyMovieClip("mbed", this.getNextHighestDepth());
                                      mbed.attachBitmap(bmp, 1);
                                      mbed._x = 20.0
                                      mbed._y = 3.5
                                      bmp.paletteMap(bmp, new Rectangle(0, 0, bmp.width, bmp.height), new Point(0, 0), _root.NewRedArray, _root.NewGreenArray, _root.NewBlueArray, null);

                                      if(colours.length == 2)
                                      {
                                      AdjustPallete(colours[1])
                                      }
                                      bmp2 = BitmapData.loadBitmap("trims");
                                      _root.createEmptyMovieClip("mtrims", this.getNextHighestDepth());
                                      mtrims.attachBitmap(bmp2, 1);
                                      mtrims._x = 16.9
                                      mtrims._y = 2.9

                                      bmp2.paletteMap(bmp2, new Rectangle(0, 0, bmp2.width, bmp2.height), new Point(0, 0), _root.NewRedArray, _root.NewGreenArray, _root.NewBlueArray, null);
                                      }

                                      color = []
                                      color[0] = "224488"
                                      color[1] = "FFCC33"

                                      UpdateImageColour(color)



                                      • 17. Re: URGENT: setPixel and bitmaps
                                        kglad Adobe Community Professional & MVP
                                        flash bitmaps use 32 bits for colors: AARRGGBB, where the AA are alpha bits instead of the 24 bits to which you may be familiar.

                                        and 0x designates base 16 follows. i'm more comfortable working with colors using base 16 and using string methods is a must because leading zeros are dropped from numbers in flash.

                                        if all your colors have full alpha use 0xFFRRGGBB to designate your RGB colors if you want to use base 16.

                                        p.s. use the attach code option (not in quick reply) to display code. otherwise, this forum is likely to trash your code. in particular, [ i ] encodes italic font. so, what you intend to show as an array element does not appear to be one.

                                        p.p.s. if you can explain into what colors you want to change your 256 grays, i'll show you the code you should use.
                                        • 18. Re: URGENT: setPixel and bitmaps
                                          Think_Like_a_Winner Level 1
                                          Ok I got it going. It worked ok. But one of the designers here came up with a better way to actually do this. By creating a colour overlay and using the multiply property.

                                          The only problem is all of use here are nubies with flash actionscript properties. Does any one know what property to use to alter the colour of a vector object that has been changed to a Symbol (MovieClip).

                                          I tried the following where BedCovers is the movie clip instance name, and BedCoversImage is the insatnce of the vector contained in the movie clip.

                                          function UpdateBedColours()
                                          {
                                          _root.BedCovers.BedCoversImage.setRGB("0xFFFFFF")
                                          _root.TrimColours.TrimColoursImage.setRGB("0xFF0000")

                                          }

                                          And

                                          function UpdateBedColours()
                                          {
                                          _root.BedCovers.setRGB("0xFF0000")
                                          _root.TrimColours.setRGB("0xFF0000")
                                          }
                                          • 19. Re: URGENT: setPixel and bitmaps
                                            kglad Adobe Community Professional & MVP
                                            define a color object for you movieclip and then adjust the rgb property of that color object: