AS3 CLASSES

4 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

AS3 CLASSES
hungryhounduk
ACTIONSCRIPT 3 CLASSES TUTORIAL.................

Hey Flashers

I am learning AS3 and i thought i would post up this Tutorial of how you can Create your Own Classes in AS3.
Classes are a great way to Program within Flash and it also keeps all the Code off the Timeline which makes it more robust and stable = also you can do so much with Classes that just was not possible before AS3.

Its pretty straight forward and if you come from AS2 then i am sure you will pick it all up in no time cooll;

OK Lets get Flashing :)

1. Create a New AS3 Flash doc = you are presented with a blank stage

Create your MovieClip

( Draw a Circle on the Stage ) Select the Circle and Press F8 = name it "circle".

From the same Convert to Symbol window, find the area marked Linkage. If you do not see the Linkage area, press the Advanced button to display it. Check the box that says Export for Actionscript. A few lines above that, in the Class field, replace whatever text is displayed (probably circle) with the text BlueCircle:

Check 'Export for ActionScript and enter BlueCircle for your class

Creating the BlueCircle Class

We are going to be adding our code to the BlueCircle class itself. But, where is our BlueCircle class? It doesn't exist in a form that we can see or access. By default, the BlueCircle class is created in the background with its contents being magically thrown into the SWF file during publish/export.

To override the default behavior, we are going to manually create the BlueCircle class.

From Flash, go to File | New to display the New Document window. From this window, select ActionScript file and press the OK button:

The New Document window will disappear, and your Flash drawing area will now be replaced by what is essentially a large code editor.

let's save this file. Go to File | Save, navigate to the folder where your current Flash project is, change the current default filename to BlueCircle.as, and hit the Save button.

A BlueCircle.as file will now be created in the same location as your rotatingCircles.fla:

save your BlueCircle.as file in the same location as your rotatingCircles.fla

Now, its time for us to add some code to make all of this work. With your BlueCircle.as file open in Flash, copy and paste the following code into it:
Code: Select all
package { 
import flash.display.*; 
import flash.events.*; 
  
public class BlueCircle extends MovieClip { 
  
var radians = 0; 
var speed = 0; 
var radius = 5; 
  
public function BlueCircle() 
{ 
speed = .01+.5*Math.random(); 
radius = 2+10*Math.random(); 
  
this.addEventListener(Event.ENTER_FRAME, RotateCircle); 
} 
  
function RotateCircle(e:Event) 
{ 
radians += speed; 
  
this.x += Math.round(radius*Math.cos(radians)); 
this.y += Math.round(radius*Math.sin(radians)); 
} 
} 
} 
Now save this file by pressing Ctrl + S.


Now Press Ctrl + Enter to view your Flash File you have made


All this time, your rotatingCircles.fla file should have been open also, so tab into it by clicking on the rotatingCircles tab:

Right Lets recap so far :)

You have created your ( BlueCircle.as ) file and copied and pasted some code into the Code Editor. When you tested your movie, you should have noticed that the blue circle you had on your stage was now moving in a circular path.

look at the code and see how its structured and what the code you pasted does.
Code: Select all
package { 
  
.. 
.. 
.. 
  
} 
The very first line of code in BlueCircle.as is our package declaration. If you are familiar with packages in other languages such as Java or namespaces in .NET, this should be very familiar to you.

A package is like a folder under which all of your classes can be referenced through. In this case, I am not specifying a package name, so specifying them is more of a formality than something that you need to consciously keep in mind when writing your code.
Code: Select all
import flash.display.*; 
import flash.events.*; 
The above two lines are import statements. In ActionScript 3, whenever you need to use functionality found in built-in classes, you will need to reference the path to the classes via import statements. For example, you will soon find that I use the enterframe event to create my animation. Unless I actually import the various event-related classes as shown above, the compiler will have no idea what an enterframe event actually is.
Code: Select all
public class BlueCircle extends MovieClip { 
.. 
.. 
.. 
} 
This line is probably the most important line in this application. Here, I define my BlueCircle class. If you recall, when you created your circle movie clip earlier, you specified the name of the class:

With the above line of code, you create the magical link between your movie clip in your Library and the BlueCircle class you just created.

There is another important thing to note about our BlueCircle class definition. I am using the extends keyword to let the compiler know that BlueCircle is basing a lot of its functionality from the MovieClip class. This is important because, the base class for our movie clip is flash.display.MovieClip.

So, why am I not writing BlueCircle extends flash.display.MovieClip? If you check a few lines earlier, you already imported flash.display.*, and the * wildcard allows you to get away with using any class stored inside flash.display without fully specifying its name. That is why I simply write extends MovieClip as opposed to the longer variant I just asked about.
Code: Select all
var radians = 0; 
var speed = 0; 
var radius = 5; 
The first five lines inside our BlueCircle class are pretty straightforward. I am declaring five variables that I will be using, and the radians, speed, and radius variables are initialized to some default values.
Code: Select all
public function BlueCircle() 
{ 
.. 
.. 
.. 
} 
If the class definition was the most important line of code in this movie, then our BlueCircle constructor shown here would be the second most important line of code. A constructor is the name for a method that gets called whenever you create new instances of a class.

Each time you drag and drop a new circle movie clip from your library, you are basically creating a new user of of your BlueCircle class. A user of a class is known as an instance. Whenever you create a new instance by inserting another circle movie clip into your stage, a method whose name is the same as that of your class gets called. That method is known as a constructor.

Notice that our class is called BlueCircle, and our constructor's name is also called BlueCircle. With the exception of it being called when an instance is created, a constructor is largely the same as any regular method. feel free to add functionality in your constructor that you used to add in an OnLoad event!

Ok, so far we've covered most of the important parts of our code that are relevant to seeing the link between movie clips and classes. There is still some code left to cover, but let's first look at how to actually use this movie clip both manually and programmatically.

You got a brief overview of the code that makes our class work.
let's look at how to actually add more circles - both manually as well as programmatically.

Adding More Circles Manually
The easiest way to get more circles on your stage is to drag and drop more instances of your circle movie clip from your Library and onto your stage:

You can add as many circles as you want, adjust their size, their alpha values, etc.

When you run your movie, each circle will move with its own independent values for speed, radius, etc. That should be pretty clear by now since you already saw from the explanation of how your BlueCircle class works, what its constructor does, etc.

Adding More Circles Programmatically

While adding your movie clips manually is easy, there will be many cases where that can be tedious. For complicated scenarios where you cannot predict the quantity of movie clips to display or what properties your movie clips exhibit, you need to know how to add movie clips from your Library programmatically via code.

In your Timeline, right click on a keyframe and select the Actions item. Your Actions window will appear:
Copy and paste the following code into your Actions window:
Code: Select all
function DisplayCircles() 
{ 
for (var i:int = 0; i < 10; i++) 
{ 
var newCircle:BlueCircle = new BlueCircle(); 
this.addChild(newCircle); 
  
newCircle.x = Math.random()*300; 
newCircle.y = Math.random()*200; 
newCircle.alpha = .2+Math.random()*.5; 
  
var scale:Number = .3+Math.random()*2; 
newCircle.scaleX = newCircle.scaleY = scale; 
} 
} 
DisplayCircles(); 
When you run your application, notice that you now display ten circles with random positions, alpha, and scale! you didn't really have to manually drag and drop any circles in order to do that.


Right i think thats about it on the AS3 Classes Tutorial

Hopefully you will get a good insight as to how the relationship between Flash\AS3\Classes all fits together

AS3 Flash Files Below in the attachment :)

Chris
You do not have the required permissions to view the files attached to this post.
Last edited by hungryhounduk on Thu Mar 24, 2011 9:20 am, edited 1 time in total.
Image
User avatar
Skillful
Skillful Coders
Skillful Coders
Posts: 969
Joined: Tue Nov 16, 2010 10:07 am

Re: AS3 CLASSES
Skillful
Good tutorial hungryhounduk! cooll;
Keep the tutorials coming!
+rep!!
Instead of LOL use this -
LSIBMHBIWFETALOL

Which means -
Laughing silently in between my head because it wasn't funny enough to actually laugh out loud!
GoodGuy17
Coding God
Coding God
Posts: 1610
Joined: Mon Sep 07, 2009 12:25 am

Re: AS3 CLASSES
GoodGuy17
Did you learn from this place? http://www.kirupa.com/developer/flashcs ... S3_pg3.htm

I'm not saying you stole it, just is that where you learned from?

Nice tutorial, +rep :)
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Re: AS3 CLASSES
hungryhounduk
Yay thats the Kiddie :)
I have been using Kirupa ever since i got into Flash 5 which was back in 2002, and I think it is the Best Website to Learn from, they make all things easy to explain and it will have you up and running in no time...

What i usually do is find something that i know will be helpfull to me, and possibly others wanting to learn.. then i try these things out from scratch, Follow the Tutorials, get it right, if they work then great, if they dont then its not worth posting up something that does not work.

So Enjoy it

Chris
Image
4 posts Page 1 of 1
Return to “Tutorials”