Known Participant

Question

URGENT: setPixel and bitmaps

Forum|Forum|19 years ago
November 7, 2006
10 replies
1030 views

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

}

ActionScript

This topic has been closed for replies.

kglad

Community Expert

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.

T

Think Like a WinnerAuthor

Known Participant

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")
}

kglad

Community Expert

define a color object for you movieclip and then adjust the rgb property of that color object:

T

Think Like a WinnerAuthor

Known Participant

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.

kglad

Community Expert

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:

T

Think Like a WinnerAuthor

Known Participant

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)

kglad

Community Expert

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.

T

Think Like a WinnerAuthor

Known Participant

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.

kglad

Community Expert

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.

kglad

Community Expert

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.

T

Think Like a WinnerAuthor

Known Participant

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));
}
}

kglad

Community Expert

good.

T

Think Like a WinnerAuthor

Known Participant

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.

kglad

Community Expert

i know nothing about studio 8. are you right clicking on the image in your library (and NOT the on-stage image)???

T

Think Like a WinnerAuthor

Known Participant

Well finally got it going, mde some new code and it seems to work well.

kglad

Community Expert

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.

T

Think Like a WinnerAuthor

Known Participant

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

kglad

Community Expert

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

T

Think Like a WinnerAuthor

Known Participant

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded