Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 2 of 2
  1. #1
    Veteran Enthusiast LeadingManNigel's Avatar


    Join Date
    May 2005
    Location
    New York City
    Posts
    6,213

    [AS3] Document Class and External ActionScript Files


    [center:2rjeiebq][AS3] Document Class and External ActionScript Files[/center:2rjeiebq]

    External ActionScript files are exactly what the name implies, they are actionscript files located outside your movie. Using external classes allows much more flexibility when coding in Actionscript. The use of external AS[Actionscript] files is often called Object Oriented Programming. I am not going to try and explain what OOP is so here is the wiki article: http://en.wikipedia.org/wiki/Object-ori ... rogramming
    You are not expected to truly understand it, I am sure I only got the absolute basics of what it is.

    On to the tutorial. The Document Class is a external AS file that represents your movie, it makes it easier to maniplulate code and other external AS files.

    1. Make a new AS3 Document and go to the properties panel.

    2. In the Class text box type in the name of the external AS file that will represent your movie. You will get a message saying the class does not exist, just ignore it and hit Ok.
    [img]http://**********.com/img/1257561611.jpg[/img]

    3. Now save your movie. I suggest using a special folder to store your movie along with the AS files.

    4. Next go to File > New and choose ActionScript File.
    [img]http://**********.com/img/1257561767.png[/img]

    5. Ok when working with external AS files in AS3 whenever who want to use certain things like movieclips and text fields they must be imported.

    6. To import something into your AS file the sytax is as follows:
    Code:
    import name.name.name
    7. If you want to import everything from a certan directory you simply use:
    Code:
    import name.*
    7a. Its often best to only import the things you need.

    8. We want our Document Class to inherit movieclip properties but before we get to that part we must import the moviecilip. First write package and open up a pair of brackets then write:
    Code:
    import flash.display.MovieClip;
    9. So far your class should look like this:
    Code:
    package
    	{
    		import flash.display.MovieClip;
    		public class Base extends MovieClip
    		{
    			public function Base():void{
    				
    				
    			}
    			
    			
    		}
    		
    		
    	}
    I like a lot of white space in my code...


    The breakdown:

    package
    This is not important right know just know that you start all your external AS files with this keyword.

    public class
    Public means that this Class can be accessed by any other class. Class is basically what they call external AS files in Actionscript.

    extends MovieClip
    This tells Flash that our class is going to inherit all of a movieclips functions and properties. We use movieclip because they are so versatile and can pretty much do everything. If we extended say textfield we couldn't draw anything in it because that's not one of its functions.

    Base
    The name of our file/class O.o

    There is a bracket after package and public class Base extends movieclip so remeber to close them!

    10. Save your file in the same folder as your .fla! This is important because if you don't flash wouldn't be able to find it :3.
    [img]http://**********.com/img/1257562755.jpg[/img]

    11. In your class brackets type:
    Code:
    public function Base():void{
    				
    			}
    12. Yes this is a function but its a special function known as the Constructor of our class. The constructor is called as soon as the class is created and because this class represents our movie it will be called as soon as the movie starts to load. :void is just the return type you can learn a bit about return type here: http://www.youtube.com/watch?v=whVArKVfZ50

    13. Ok, we have our document class but all it does is sit there. Lets have it add some balls to the screen. To do this we are going to create a Ball AS file.

    14. Once again go to File > New and Actionscript file is selected of course.

    15. We are going to set it up the same way we set up our Base AS file but with a few diffrences. Instead of movieclip we are going to import and extend sprite. Why sprite? Well our Ball file is going to be very simple and we don't need all the extra stuff that comes with movieclips.

    16. Your code(if you paid attention) should look like this:
    Code:
    package
    {
    	import flash.display.Sprite;
    	public class Ball extends Sprite
    					  {
    						  public function Ball():void
    						  {
    							  
    							  
    						  }
    						  
    					  }
    					  
    }
    16a. Save as Ball. Make sure all your brackets are closed.

    17. Unlike our Base class in our Ball class we are going to pass in some custom Parameters. We are going to add 4, defx,defy,radius,color
    Code:
    public function Ball(defx:int,defy:int,radius:int,color:int):void
    18. Now type this:
    Code:
     graphics.beginFill(color);
    	  graphics.drawCircle(defx,defy,radius);
    	  graphics.endFill();
    The Breakdown:
    graphics.beginFill(color);
    This is an API function that simply beings a fill. We want to set the color ourselves when we create the ball later.

    graphics.drawCircle(defx,defy,radius);
    Take a guess.... Again we want to set the X,Y and Radius at creation.

    graphics.endFill();
    C'mon really?

    19. Now that is out the way save and head over to your Base class.

    20. We are going to create a new function called createBalls. Go outside the brackets of your Base constructor but make sure you are still within the class brackets.

    21.Type:
    private function createBalls():void
    {

    }
    21a. We make this function private because no other class will need access to it.

    22. Inside the body of our createBalls function type the following:
    Code:
    var colorArray:Array = [0x00FF00,0x00F0F0,0xFF0000,0xF42521,0xFAF445]
    				for(var i:int; i < 10; i++){
    					var colorrand:int = Math.random()* colorArray.length;
    					var randx:int = Math.random()* 550
    					var randy:int = Math.random()* 400
    					var randrad:int = Math.random()* 50 + 20;
    					var ball = new Ball(randx,randy,randrad,colorArray[colorrand]);
    					addChild(ball);
    				}
    The Breakdown:
    var colorArray:Array = [0x00FF00,0x00F0F0,0xFF0000,0xF42521,0xFAF445]
    We create an array to hold all of our colors.

    for(var i:int; i < 10; i++){
    We create a for loop. If enough people don't understand how to use a for loop, I will make a tutorial on them. Our loop will run 10 times thus creating 10 balls.

    var colorrand:int = Math.random()* colorArray.length;
    var randx:int = Math.random()* 550
    var randy:int = Math.random()* 400
    var randrad:int = Math.random()* 50 + 20;

    We create a bunch of random variables to place for our ball to use. The first one chooses a random color.
    randx and randy pick a random x and y position
    The last picks a random radius or size for our ball. It is going to choose a number between 50 and 20 rather than starting from 0 because we don't want invisible balls.

    var ball = new Ball(randx,randy,randrad,colorArray[colorrand]);
    Here we create our ball. We pass in our values to the constructor and it will create the ball with them! This means each ball will be unique in a number of ways.

    addChild(ball);
    We created the ball but now with this line of code we add it to the display list allowing us to see it.


    23. Now put the lets call the ball function in out constructor and go back to your movie and hit ctrl+enter to run it. Now everytime you run your movie will will create randomly sized balls at random positions with random colors!
    [img]http://**********.com/img/1257565735.jpg[/img]

    Final Code for Base Class:
    Code:
    package
    	{
    		import flash.display.MovieClip;
    		public class Base extends MovieClip
    		{
    			public function Base():void{
    				
    				createBalls();
    			}
    			private function createBalls():void
    			{
    				var colorArray:Array = [0x00FF00,0x00F0F0,0xFF0000,0xF42521,0xFAF445]
    				for(var i:int; i < 10; i++){
    					var colorrand:int = Math.random()* colorArray.length;
    					var randx:int = Math.random()* 550
    					var randy:int = Math.random()* 400
    					var randrad:int = Math.random()* 50 + 20;
    					var ball = new Ball(randx,randy,randrad,colorArray[colorrand]);
    					addChild(ball);
    				}
    				
    				
    			}
    			
    			
    		}
    		
    		
    	}
    Final Code for Ball Class:
    Code:
    package
    {
    	import flash.display.Sprite;
    	public class Ball extends Sprite
    					  {
    						  public function Ball(defx:int,defy:int,radius:int,color:int):void
    						  {
    							  graphics.beginFill(color);
    							  graphics.drawCircle(defx,defy,radius);
    							  graphics.endFill();
    							  
    						  }
    						  
    					  }
    					  
    }
    Once again if you have any errors or find any errors in the tutorial please feel free to post or pm me. If you have any suggestions for a future tutorial post or PM me. I hope you learned something today.
    This tutorial is kid tested and mother approved.

  2. #2
    #1 KUMIHO Ahri's Avatar

    Join Date
    Nov 2008
    Location
    Fields of Justice
    Posts
    3,702

    Re: [AS3] Document Class and External ActionScript Files

    Awesome job Nigel.

    It's quite a long tut though, I'm trying it out right now.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •