After you learned how to draw lines and curves with ActionScript, let’s see how to make shapes that will be filled with colors.
1 Open a new Flash document.Call the first layer actions. Click in the first keyframe of this layer and press F9 (PC) or ALT+F9 (Mac) to open up the Actions panel. Enter the following code:
_root.lineStyle(2, 0x003366, 100);
_root.moveTo(200, 100);
_root.lineTo(300, 100);
_root.lineTo(300, 200);
_root.lineTo(200, 200);
_root.lineTo(200, 100);
Test your movie and you will see a rectangle with a blue border drawn on stage.
2 Add the following code to the existing one (shown in bold):
_root.lineStyle(2, 0x003366, 100);
_root.moveTo(200, 100);
_root.beginFill(0xFF6600, 100);
_root.lineTo(300, 100);
_root.lineTo(300, 200);
_root.lineTo(200, 200);
_root.lineTo(200, 100);
_root.endFill();
Test your movie and you will see your rectangle filled with a nice hue of orange.
The first added line,
_root.beginFill(0xFF6600, 100);
begins the filling, and starts before the first line is drawn. That is important – you must always give Flash the command to start filling your drawing before any lineTo command. Why? Try the following: put the line with the beginFill command after the fourth line of code (shown below). Test the movie and see the result.
_root.lineStyle(2, 0x003366, 100);
_root.moveTo(200, 100);
_root.lineTo(300, 100);
_root.lineTo(300, 200);
_root.beginFill(0xFF6600, 100);
_root.lineTo(200, 200);
_root.lineTo(200, 100);
_root.endFill();
You will get garbage, not a nice drawing, as a result. You can return the line with the beginFill command at its proper place now. The first parameter of the beginFill command determines the color of the fill, the second one its alpha property (i.e. its transparency), with 0 being completely transparent, and 100 completely opaque.
The line
_root.endFill();
simple ends the filling. Notice that it is placed after the last line has been drawn. This command (or method, as it is called in programming languages) has no parameters – the parentheses are empty because it simply ends the fill. There is no need to say with which color the fill should end.
3 If you want, you can also make a shape with no border at all. Try this:
_root.beginFill(0xFFCC00, 100);
_root.moveTo(180, 20);
_root.lineTo(300, 20);
_root.lineTo(300, 120);
_root.lineTo(180, 120);
_root.lineTo(180, 20);
_root.endFill();
As you probably noticed, there is no lineStyle method in this case. That is possile when using fills to draw a shape. When there is no fill, you must use the lineStyle method.
4 You can fill the shapes drawn with the curveTo command also. Erase the former code (after saving it under a different name, so you can keep the rectangle example) and enter the following:
_root.lineStyle(8, 0xAA00AA, 100);
_root.moveTo(240, 100);
_root.beginFill(0xFF51A8, 100);
_root.curveTo(60, 0, 240, 300);
_root.curveTo(420, 0, 240, 100);
_root.endFill();
You should see a nice pink-filled heart appear! Since this isn’t enough to impress your loved one, you must learn how to make gradient fills. 😉
Interesting stuff. I have been playing around with this for a little while and am stumped trying to create an application that will allow a user to draw a message over a masked picture and have the message knockout the mask. like a finger on a frosted window.
Becuase you cant use lines to create masks, i have had to attempt fills but the effect is much less intuitive.
Any ideas on how to do something like this?
regards,
Kit
Kit: You are right. You MUST use fills. And I find the idea interesting. I will try to develop a tutorial based on it. Basically, the idea is like this: You can create a movieclip which will be set as a mask via ActionScript at the very start. And then make some functions which will enable drawing in the movieclip. The image below it should be associated with it, of course, inside a second movieclip to be able to apply the masking effect to it.
Just what I needed! I followed all of the series 😀
Congrats! 🙂