First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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%):

shade=0xff0000;
alph=50;
stop();

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) {
    _root.shade=0x00ff00;
}
And on a button to change to the color to blue:
on (press) {
    _root.shade=0x0000ff;
}

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) {
        _root.alph+=10;
    }
}

Similarly, on the alpha decreasing button we add this:

on (press) {
    if (_root.alph<%gt%>0) {
        _root.alph-=10;
    }
}

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);
        endFill();
    }
}

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!

Comments

  • 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: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.