Step 6: Let's create the color palette to enable the user to select a color.  (I'm going to show you a quick way to do this.  This is perhaps not the most efficient or elegant way, but it will do for illustration purpose.)

First, create a symbol (Insert->New Symbol).  Name the symbol: PaletteEntry, set behavior to Button.

Draw a filled-rectangle on the Up frame (frame1).  Use white as the fill color and black as the outline.

Now, go back to Scene 1.  Create a new layer, name it: Palette.  This layer should be above the Outlines and FillAreas layer.

Put  an instance of PaletteEntry symbol into the layer.  

Add this action for the PaletteEntry button:

on (press) 

0xFFFFFF corresponds to the RGB hexadecimal value of the color white.  (I'll show you an easy way to get this value later, there's a tutorial on RGB colors in case you want to know.)

Put  another instance of PaletteEntry button, positioned next to the previous one.  

Now, open up the Effect Window (accessible via Window->Panels->Effect menu), then set the R value to 255.  Now, we need to get the hexadecimal RGB value of this color.  An easy way to do this is to click the square next to Tint Color label (it will be red square in this case), and the hex color value will be displayed.  It's #FF0000.

Add this action to the button (this is the same action as the first button, except the fillColor value now is set to the RGB hex value of red:

on (press) 

Add more colors with the steps described above.

Step 7: We need to make it so that when user click an area, that area will be colored with the selected color.  Well, good news: this is already done.  

How and why?

In Step 6, a variable named fillColor is set.  When the user clicks one of the colored button, fillColor is set o the color value of the button.  For instance, when the user clicks the white button, the variable fillColor is set to 0xFFFFF, and when user clicks the red button, fillColor variable will be set to 0xFF0000.  

When the user clicks any part of the pumpkin, the pumpkin will be painted with the color specified in the fillColor variable.  The code that does this painting is already done on the previous page (Step 5).

Test the movie.  It should work like below.

Pick a color by clicking a colored-square first, then click any part of the pumpkin to color it.

Notice that there are some improvements that can be made.

  • The picture should not be colored already when the program starts.

  • There's no indicator of what color is currently selected.

  • If the user click an area before selecting a color, that area turns black.

To see how these can be handled, continue to the next part.


(C) 2001-2005 F. Permadi