Flash + color + images

Community Forums/General Help/Flash + color + images

Jaydubeww(Posted 2011) [#1]
Hello everyone, I would like to do something like NikeID does: http://nikeid.nike.com/nikeid/index.jsp

I would like to be able to change the color / material of sections on an object like they do in the site above. The thing is I have never used flash before, so I'm just asking what would the best way to do this.

Basically, I was thinking about creating a black and white image of the item and then using something like blitzmax's 'setcolor' or 'overlay' an image to get the right texture on the image.

Is this a viable approach?

EDIT: Changed the link, sorry about that!

Last edited 2011


Kryzon(Posted 2011) [#2]
I think that page is an error page; the actual one might be this: http://nikeid.nike.com/nikeid/index.jsp

But anyway. I'm not sure of which element on that page you're talking about, but I see a lot of alpha-blending and fading going on there. That is, elements filled with a color that has an opacity below 1.0 and overlayed among eachother.
You can control opacity animation through Motion-Tweens (not Shape), and\or through ActionScript.
The name is actually non-intuitive: motion-tweens would be best suited with "property tweens", because you are interpolating a property of the symbol such as position\rotation\scale, color, opacity etc.

One thing that's not clear to me: do you want to do this in Flash or BlitzMax?

Last edited 2011


Jaydubeww(Posted 2011) [#3]
Yes, I would like to do this in flash.

Let me clarify, once you get to a shoe, you can then customize it by changing the color of different sections on the shoe.I would like to do something similar.

I assume the best option would be to cut the image into the desired sections, turn the picture into black and white then use a color overlay to get the desired look?


Kryzon(Posted 2011) [#4]
You could, but you would probably lose detail with the required blending this overlay would need. I agree on the "splitting in several sections" though, there doesn't seem to be a way around that. You need different symbols to have exclusive coloring for each.

For the colors you're better off using the Adjust Color filter to change the Hue of the symbol - this would work very much like BMax's SetColor.
You can also use the Tint property of your symbols, but then you might lose detail depending on the luminance of the color you chose.
In any case, the filter would be a better choice.

Last edited 2011


Warner(Posted 2011) [#5]
In code, you can use the movieclips colortransform field. In this thread, there are a few samples:
http://www.actionscript.org/forums/showthread.php3?t=154652