Main Content
Drawing a Circle
Hello and welcome. Today we will expand on the last tutorial, by using a separate .as file to draw a circle on the stage, which we can play around with in later tutorials. The first thing to do is to create a new project with one .fla and an ActionScirpt File. Save the ActionScript file as graphical.as. We start with the same opening as we had last time:
package{
but then we meet our first change, as we need to use some extra functions that Flash has, that we don't normally use, so we import them:
import flash.display.*;
That means we are using the flash.display library of information, and the * means that we are using everything inside that. The next line is slightly different from our previous tutorial too:
public class graphical extends MovieClip{
So our class is called graphical. the "extends MovieClip" is something that we have to use this time, as we will be creating and manipulating a Movie Clip.
public var mc1:MovieClip = new MovieClip();
We create a new Movie Clip, that is "public" and called mc1. If you case your mind back, you will remember that we now have to define our function:
public function graphical(){
This is important, so remember it: this is a constructor function! Why? It has the same name as the class. What does it do? Well, as soon as an object is created, this bit is done. If you do what we do later with the document class, it will be done ASAP even without object creation. In other words, this bit will happen immediately in the Flash animation. Well, let's get creating our circle. We use three basic functions, but there are more listed on the .
mc1.graphics.lineStyle(1);
That function sets out what the line surrounding the circle is going to look like. We have specified the only thing we have to, but as you can see below, there are many more optional ones:
lineStyle(thickness:Number, color [opt. default black], alpha [opt., default 1], pixelHinting [opt.], scaleMode [opt.], caps[opt.], joints[opt.], miterLimit[opt.]):
The next two are pretty simple, underneath I have listed what the arguments are you could use:
mc1.graphics.beginFill(0xff0000); //beginFill(color [in hex form]) mc1.graphics.drawCircle(200,200,50);<br /> //drawCircle(x to start at, y to start at, radius);
And the last lines:
this.addChild(mc1);mc1.graphics.endFill(); } } }
this.addChild takes one argument - which Movie Clip to use. What it basically does is to display the circle we have just created. endFill just is good practice, and it helps to stop problems later on.
Save and move on to the Flash document. Click on the empty stage, and in the properties panel, you should see a box that says "Document Class:" We have a video of adding a Document Class if you're lost. The document class is loaded as soon as the swf is compiled. Type in there "graphical", which loads our external file immediately, triggering the constructor function, drawing the circle.
Let's test that and compile it by pressing "Test Project" in the project window: you should see a red circle appear on the stage. Well done! You have mastered graphics. An example of what you could do with simple drawing functions is at shapes.txt.
See you next time!
Harry.
