I'm getting ready to start working on a flash project that I would like to work just like this. However, I would be using dog collars. I'm having a lot of difficulty finding a tutorial that shows how to go about changing the color of the product when you click on the squares. Ideally, I'd like a link to such a tutorial if one exists.
Could someone tell me how this is being done these days? I know the long way would be making a button for each color and have an image for each color. I think that there is an easier and more flexible way of doing it, but just don't know where to find it.
You can achive this effect in css - using layered transparent pngs, is this for a shopping cart system? if so which one. Email me and i can let you know some more details of how to do it.
There is no short way of doing it - hence the lack of response - it is long hand or nothing mate.
It is possible to realize this effect without drawing new images for every color indeed. To achieve this, you need to color the part of the product, which changes its appearance, with a color, that isn't used anywehre else. For example something like this:
#f0f
You still can maintain shadows by not using only the color above, but also its shadings. Then you scan the product image pixel per pixel, everytime your software finds a pixel whose color matches x * #f0f, where x is a float, you know that the pixel belongs to the part of the image, which can change its appearance. Let's say you want to select red (#f00) as the product color, then your new color is computed by: (pixel.color / #f0f) * #f00. This way you have only one image and can easily select the color you want. I haven't implemented this in flash yet and I'm not sure, if its performance is high enough to do per pixel manipulation in real time.