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
Put an instance of PaletteEntry symbol into the
Add this action for the PaletteEntry button:
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
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:
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
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
The picture should not be colored already when the program
There's no indicator of what color is currently selected.
If the user click an area before selecting a color, that area
To see how these can be handled, continue to the next part.