To make the picture start out uncolored, just open each ButtonArea symbol, then fill the shape with white.  

To create an indicator for which color is currently selected, there are several ways.  For instance, visually mark the selected color, by adding a marker (arrow, frame, etc) on the selected color.  This can be done by moving around the Marker symbol to the selected color position.  For example:

[yellow arrow is the marker]

Another way to accomplish the same function is to change the cursor icon.  The cursor icon can have a different color representing the actual selected color.  An example of this is shown on the final project below.  Click here to learn about changing the cursor icon.  

The last problem that needs to be handled is the fact that if an user click an area before selecting a color, that area turns black.  This problem is caused because the variable fillColor is not initialized, so it defaults to 0 (the color black).  There are several ways to overcome this.  One is not to allow the user to fill a shape at all until he/she selects a color.  The second and the one I prefer is just to set the fillColor value to white (0xFFFFFF).  

The Final Example



(C) 2001-2005 F. Permadi