Tuesday, April 12, 2011

AS 3.0 Change Shape Color

Click onto the above application, and then you should be able to use the color picker box to change the color of the rectangle to the color of your choice.

Eg. It should open up the Flash color picker like this:

FL Color Pic App screen

The above application came from an awesome website called "developphp.com" where the AS 3.0 Flash section is located at:


On this page there are lots of free AS3.0 lessons.

For each lesson, we can get a full download of source files, the code, and the "How To" Video as well.

For Example, here is the Tutorial for the above Flash Color Picker, that can change the color of the rectangle shape that we have.


This web page includes a YouTube "How To video", as well as AS 3.0 code and Downloadable Source files.

Here is the YouTube video from that web page, which takes us through all of the steps for creating the application.

Use the bottom right hand corner player controllers to watch it in full screen HD.

There is one tricky part, when we set up the Color Picker component.

Flash fails with a compile error “ Color Picker could not be found”. This is because we need to have the color picker component in our project’s library.

So to get the Flash color picker defined, we need to do Window > Components, and then drag the color picker out of the pop up window and place it anywhere on the stage.

We then immediately delete the color picker box from the stage, but it still remains as an item in our library. This will remove the “not found” compile error.

Note that all we draw on the stage is the background and the instructions text.

(The grey background was made 540x300 pixels big, so it would fit on our Blog).

Flash Stage setup

The rectangle is actually dynamically drawn onto the stage using Flash Actionscript.

This is done as part of the Actionscript Code for this project, as shown below.

AS3 code for color changer

The following PDF document supplies Actionscript Code that can be copied in for this project.

Highlight the code and use Ctrl-C to copy, and then Ctrl-V to paste it into the Flash Actionscript edit screen. (Access the edit screen using Window > Actions).

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the full size PDF by clicking the link below:

So why not give this little Flash AS 3.0 project a go, it is fun to make and gives a good intro to how to integrate Flash supplied components into our own projects.

Big Passy Wasabi

No comments:

Post a Comment