First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Devon O. Wolfgang | Website: http://www.devonair.tk/

Another Flash MX Drawing Tutorial

Since the release of Flash MX, there has been an abundance of tutorials and .fla’s describing the use of new actionscript features to create movieclips “on the fly.” This one, though, will demonstrate how to dynamically manipulate properties (in this case color and alpha) of these scripted m.c.’s.

Setting Up the Movie

I’ll leave the number of layers to the reader’s discretion. I personally like to keep things well separated, so my demo .fla contains six layers labeled (from top to bottom) “script,” text,” “menu,” “actionclip,” “nodes,” and “background.”

Setting Up the Players

This demo contains a handful of premade movieclips and buttons, the design of which, again, is at the creator’s discretion. First, there is a “node” m.c. This is just a point which will serve as the “frame” of our scripted movie clip and could be just a simple 1 pixel by 1 pixel dot or a “throwable” sphere (as in the demo) or even omitted if you prefer (though it will be easier to follow this tutorial if one is included).

Note: this tutorial will not delve into the actionscripting necessary to “throw” an m.c. There are plenty of fine tutorials out there explaining bodies in motion. I, personally, learned at bit-101.com (and wasn’t even paid to say that).

Next, we need an “actionclip” m.c. This is simply an empty movieclip that will sit on the stage and function as a container for most of the upcoming actionscript.

Finally, we need a smattering of simple (or fancy) buttons, which will allow the user to control the color and transparency (alpha) of our scripted movieclip. In the example .fla there is five color changing buttons (one per color) and two alpha changing buttons (one to increase the alpha and one to decrease the alpha).

Setting the Stage

For this example, I dragged four instances of the “node” m.c. onto the stage, arranged them in a square, and gave them instance names of “node1”, “node2”, “node3”, and “node4” (the instance names are important for upcoming actionscript). The empty “actionclip” m.c. I placed on a separate layer to the upper left corner of the stage. On yet another layer I arranged all the buttons in a simple menu fashion.

Initializing the Variables

Because it is the color (“shade”) and the transparency or alpha of the scripted movieclip we wish the user to be able to manipulate, we’ll establish these variables right off the bat. In the first frame of the movie (in the “script” layer if you included one) add this actionscript (I gave the movieclip an initial color of red and alpha value of 50%):


Setting Button Actions

We want the color changing buttons to change the “shade” variable we just initialized accordingly. So, for example, on a button intended to change the movieclip’s color to green, add this simple script:

on (press) {
And on a button to change to the color to blue:
on (press) {

And so on.

The alpha changing buttons we want to change the “alph” variable we initially set to 50, in this example, in increments of 10. So, on the alpha increasing button we add this simple script:

on (press) {
    if (_root.alph<%lt%>100) {

Similarly, on the alpha decreasing button we add this:

on (press) {
    if (_root.alph<%gt%>0) {

Setting Up the ActionClip Actions

Now that we have our two main variables initialized and all our controls set up, we can dive into the heart of the situation at hand. On the empty movie clip (I’ve been referring to as “actionclip”) add the following script:

onClipEvent (enterFrame) {
    _root.createEmptyMovieClip("draw", 1);
    with (_root.draw) {
        beginFill(_root.shade, _root.alph);
        lineStyle(1, 0x00ff00, 50);
        moveTo(_root.node1._x, _root.node1._y);
        lineTo(_root.node2._x, _root.node2._y);
        lineTo(_root.node3._x, _root.node3._y);
        lineTo(_root.node4._x, _root.node4._y);
        lineTo(_root.node1._x, _root.node1._y);

EXPLANATION: what this MX actionscript essentially does is create a square shaped movieclip named “draw” on level one with corners at node1, node2, node3, and node4. The square is bordered by a green line with a thickness of 1 and alpha of 50% (this can be easily modified by changing the properties of the “lineStyle” action line of script). The square is filled (logically enough using the “beginFill”/”endFill” actions) with the color and alpha we set with the “shade” and “alph” variables initialized in frame one, which, thanks to our button actions, can be changed by the user at any time.

And that is it. In essence, we have created a movieclip using actionscript with alpha and color properties dynamically controlled by the user. Making the node m.c.’s “dragable” (as they are in the example .fla) can add yet another level of interactivity.

If you have any questions, take a look at the .fla and/or email me.

Above all, have fun.

» Level Intermediate

Added: 2002-04-17
Rating: 4.95 Votes: 77
(10 being the highest)
» Author
some bum currently down and out in MI
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.