RSS link icon

Drawing basics with AS3 part 3 

 

This is yet another Flash actionscript 3.0 tutorial about the basics of shapes drawing, and this time we are going to be a bit more advanced, we are going to apply the code into a class file called .as and import it into our flash project file.

 

This method of using external files to hold code is very effective, and I would recommend you learn it right away so you know what its all about when we get to more complex examples in the future.

 

Here is what we are going to make, all by coding with Flash actionscript 3.0.

 

 

First make a flash class file called BasicShape.as and type in the following code, I will explain along the way what we are doing in the code, the comments lines contains // to comment it out in flash.

 

 

// all code in a class file has to be contained within a package { }

package

{

 

// Now we import the shapes class from the library because we need it below

import flash.display.Shape;

 

// We name our Class BasicShape, the name here is very important, we will

// refer to it in the flash file.

public class BasicShape extends Shape

{

 

// Here we make our constructor, a constructor is a "function" automatically called

// when the flash file is executed.

// Lets take a look at whats inside the ( ), here we set the function to receive some

// values, an x location, y location, the radius of our circle, and a color code.

function BasicShape(xLoc:Number, yLoc:Number, radius:Number, color:uint):void {

 

// This is quite simple, we tell the function to draw a fill color with

// the received color code.

graphics.beginFill(color);

 

// And here we tell flash to draw the circle with the locations and radius.

graphics.drawCircle(xLoc, yLoc, radius);

 

// Remember to close all the } brackets!!

}

}

}

 

Well that was quite a lot of code, but we are not finished at all, this is only the class file, it tells flash what to do, (I know its a lot of code only to draw a circle, but imagine if we where to draw more complex models, I will do that in another tutorial).

 

 

Now save the BasicShape.as file in a folder, and open a new flash document, (actionscript 3.0) save it in the same folder as we saved the class .as file.

 

Now type in the following code.

 

 

// First we import the BasicShape class we just created

// if we put it in a sub directory we would need to do

// something like this import subdirectory.BasicShape;
import BasicShape;

// Now we create a new instance of the BasicShape object

// and remember to send in the location, radius and color information.

var myCircle:BasicShape = new BasicShape(100,100,30,0x00ff00);

 

 

// Now we add the myCircle shape to the flash scene with the addChild method.

addChild(myCircle);

 

 

// We place it 10 pixel to the right, just to show you

// that you have the same possibilities to change properties as

// you did with a normal movieclip.

myCircle.x = 10;

 

 

// to make it more interesting I added some motion to it,

// just made it go from right to left adding one pixel.

myCircle.addEventListener(Event.ENTER_FRAME, animate);

 

 

// This is the function doing the animation.

function animate(event:Event):void

{

myCircle.x += 1;

}

 

 


TABAHeee says: Monday, May 12, 2008

Indeed Very Clear code. Has answered all my questions.

Thank you very much


Admin Bob says: Friday, April 25, 2008

thanks, always good to hear that people like my work :-)


manutenAS3 says: Thursday, April 24, 2008

Very very very clear the explanation of your code!!!

Congratulations and very thanks!

...Now I can understand the use of classes.

even...


Richard says: Thursday, April 24, 2008

Very clear explanation of your code. Thanks!

   


 

 

 

 3

 
 
   Web Premium
 
 

All rights reserved, Copyright 2008. Contact