A Flash Developer Resource Site
|
Internet Commerce
Developer ChannelFlashKit.com
JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com
internet.com
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Interactivity
Another Flash MX Drawing TutorialSince 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 MovieI’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 PlayersThis 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 StageFor 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 VariablesBecause 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 ActionsWe 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<100) {
_root.alph+=10;
}
}
Similarly, on the alpha decreasing button we add this: on (press) {
if (_root.alph>0) {
_root.alph-=10;
}
}
Setting Up the ActionClip ActionsNow 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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Another Flash MX Drawing Tutorial
 |
 |
|