Categories
Featured jobs
» More ActionScript, Flash and Flex jobs.
» Advertise a job for free
Our network
Advertisement

 »  Home  »  Tutorials  »  Flash  »  Beginner  »  Getting started with Actionscript 3.

Getting started with Actionscript 3.

By Milan Toth | Published 05/25/2007 | Beginner | Rating:
Part Two - Advencing the program
We have a beautiful orange circle, play with its x and y coordinates. If you are bored, we should do something more exciting, let's move the ball.

Create a new class, File menuitem -> New -> Actionscript Class, name it MovingBall, press Enter. MovingCircle.as appeared in Navigator view, and in the source editor also. This class will contain our moving circle-related code.

package
{
   
    import flash.display.Shape;
    import flash.events.Event;
   
    public class MovingCircle extends Shape
    {
       
        public var xspeed:Number;
        public var yspeed:Number;
       
        public function MovingCircle ( )
        {
           
            // graphics is an inherited property from Shape
           
            graphics.beginFill( 0xff9933, 1 );           
            graphics.drawCircle( 0 , 0 , 40 );   
           
        }
       
        // initialization, called after parent addChild
       
        public function init ( ):void                   
        {
           
            // x , y and stage are inherited properties
           
            x = Math.random( ) * ( stage.stageWidth );       
            y = Math.random( ) * ( stage.stageHeight );
           
            xspeed = Math.random( ) * 10;
            yspeed = Math.random( ) * 10;
           
            // start step triggering function based on enterframe event
           
            addEventListener( Event.ENTER_FRAME , step );   
           
        }
       
        public function step ( event:Event ):void
        {
           
            // bounce ball at stage edges
           
            if ( x + xspeed > stage.stageWidth ) xspeed *= -1;
            else if ( x + xspeed < 0 ) xspeed *= -1;
           
            if ( y + yspeed > stage.stageHeight ) yspeed *= -1;
            else if ( y + yspeed < 0 ) yspeed *= -1;
           
            // set position
           
            x += xspeed;
            y += yspeed;
           
        }
       
    }
   
}


We extend it from Shape class, because we want drawing inside us, and we need repositioning. We have two public properties: x and y component of our speed.

The public function MovingCircle is our constructor, this function runs once when we instantiate the class. Constructor functions don't have returning values, because the returning value of an instantiation is the instance itself, we cannot pass back anything else. But every other function should have a returning value, or void, if it doesn't return a value, like init and step function above. Returning values should be defined after the function name and brackets with a duble dot. Variable types also should be defined by the same way.

In the constructor our orange circle is drawn. In function init, we randomize our starting speed and position, and initialize an event listener for triggering our step function, and function step is for bouncing our ball at stage edges.

Save MovingCircle.as and switch back to FirstCircle.as, a few modifications have to be done here.

package
{
   
    import flash.events.Event;
    import flash.display.Sprite;

    public class FirstCircle extends Sprite
    {

        public function FirstCircle()
        {
           
            stage.addEventListener( Event.ENTER_FRAME , init );
                                   
        }
       
        public function init ( event:Event ):void
        {
           
            stage.removeEventListener( Event.ENTER_FRAME , init );
           
            var circle:MovingCircle = new MovingCircle( );
            addChild( circle );
           
            circle.init( );
           
        }

    }

}


In function init we instantiate one MovingCircle class, add it to the display list, and init it.
Run the program, if everything is ok, you should see an orange bouncing ball.

Testing our program in the browser is a little bit annoying, let's use the stand-alone debug player shipped with flex. Project menuitem - Properties - Actionscript compiler menuitem, under HTML wrapper uncheck generate HTML wrapper file, press OK twice, so flex won't start our browser any more.

Let's examine this program deeper, and a few tricks come to light. Why do we have to use an extra init function in MovingCircle class, when we could generate our speed and position in the constructor also? Well, that's an annoying issue of flash player. Until a displayobject is not attached to a display list, its stage property is null, so we couldn't reach it to generate our position, and we couldn't attach any object to the display list before its instantiation. So, we have to instantiate it first, then attach it to display list, then call init function from its parent object.

And why do we have to wait for the first enterframe event of the stage in the main class? This is the other very-very annoying thing of flash player, until the first enterframe event, the stage's width and height is zero, and we cannot use it to calculate a random position.

The other interesting thing is event ( and error ) handling. As you see in the constructor, we initialize an event handler which listens for enterframe events. AS3 has a quite advanced event and error handling model, events can bubble through objects, hold properties, and so on. Errors are special events, they are generated when a runtime exception appears, for example, when we cannot reach an object's property.

Try it. Move the code from init function to the constructor of MovingCircle class, and encapsulate it in a try - catch - finally statement like this:

try
            {
           
                x = Math.random( ) * ( stage.stageWidth );       
                y = Math.random( ) * ( stage.stageHeight );
               
                xspeed = Math.random( ) * 10;
                yspeed = Math.random( ) * 10;
           
            }
            catch ( error:Error )
            {
               
                trace( "Cannot randomize properties, Error: "error.message );
                trace( "I rather randomize the values by myself" );
               
                x = Math.random( ) * 400;       
                y = Math.random( ) * 400;
               
                xspeed = Math.random( ) * 10;
                yspeed = Math.random( ) * 10;               
               
            }
            finally
            {

                trace( "Well, the properties are defined" );               
               
            }


And run the program. The movie runs smoothly, the circle is moving, but examine the debug console of flex:

Cannot randomize properties, TypeError: Error #1009: Cannot access a property or method of a null object reference.
I rather randomize the values by myself
Well, the properties are defined

So, it runned into the stage == null problem, but our code caught this error, and randomized the numbers from constants.

You can insert as many catch in a "try - catch - finally" statement as many error types you want to listen to.

Play with the code a little : with a for loop create more instances.

FirstCircle.as:
package
{
   
    import flash.events.Event;
    import flash.display.Sprite;

    public class FirstCircle extends Sprite
    {
        public function FirstCircle()
        {
           
            for ( var a:int = 0 ; a < 10 ; a++ )
            {
               
                var circle:MovingCircle = new MovingCircle( );
                addChild( circle );
                circle.init( );           
               
            }
           
        }
       
    }
   
}


Fantastic, isnt it?


Spread The Word / Bookmark this content

Clesto Digg it! Reddit Furl del.icio.us Spurl Yahoo!

Related Articles
Article Series
This article is part 1 of a 2 part series. Other articles in this series are shown below:
  1. Getting started with Actionscript 3.
  2. Camera-motion controlled ball
Comments
  • Comment #1 (Posted by frank - fmixson at ameritech.net)
    Rating
    I like the site, and the first 2 tutorials I looked where great. This however, says its for beginners, and thats me, for sure. But the first thing you say to do is open 'flex builder'. What is that? What does it have to do with A.S. 3.0? Better yet, what does it have to do with Flash? I stopped reading it after that.

    If this is not a beginner's tut, label as such, please. You seem be assuming a lot about us.

    The history was nice, but prerequisite knowledge should be listed. A quick goal could be stated.. a summary of whats going to be done in the tut to teach lesson.. (what the example will be about). Stuff like that.. so we're not wondering whats going on

    Thanks!
     
  • Comment #2 (Posted by rashmin - rayrash at rediffmail.com)
    Rating
    yes i believe frank is very much true since as i saw the heading 'begginer' i thought some basics must have been cleared..but to our amusement, i saw the word flex builder. hence forth pls clarify....such things .... think of us a dummies...
     
  • Comment #3 (Posted by Jon Perez - jbperez808 at yahoo.com)
    Rating
    This article is exactly what I was looking for. It seems that all the manuals and books out there fail to show a straightforward and simple way of compiling actionscript source code directly to SWF.
     
  • Comment #4 (Posted by Karl - defcom2 at gmail.com)
    Rating
    Thank you very much for your tutorial!! I am a begginer and found it very informative. The stuff I didn't know about I used my commonsense and googled it. Thanks for spending some of your time to educate others! Appreciated!
     
  • Comment #5 (Posted by Jon Perez - jbperez808 at yahoo.com)
    Rating
    This tutorial was exactly what I was looking for. I do agree with the author that it is a beginner level tutorial, but mainly for those who already know how to code.
     
  • Comment #6 (Posted by zalah)
    Rating
    First Run, test movie and I've gotten two errors from the start.
    1046: type was not found or was not a compile-time constant: Shape
    1180: Call to a possibly undefined method shape.

    What a waste of time and effort.

     
  • Comment #7 (Posted by Kristall - sternlganz at gmx.de)
    Rating
    -----------------
    @zalah
    You must import
    flash.display.Shape;
    Then you didn't get this error.
    -----------------

    It is a very good Tutorial for Beginners, who know other programming languages.

    Greetings
     
  • Comment #8 (Posted by Mohamed - khalifmk at samref.com.sas)
    Rating
    When I first read the very first few lines of the article, I thought I was so stupid since it is supposed to be a beginner's and I have been developing materials using flash for quite some time now. However, after reading some of the comments I feel I am not the only one in the dark.

    Thanks
     
  • Comment #9 (Posted by umit - omurgasiz at gmail.com)
    Rating
    thank you very much. this and the second part of this tutorial very cleared my mind about creating class methods.

    appreciated !:)
     
  • Comment #10 (Posted by Dasn - info at danieldewald.com)
    Rating
    All works fine but
    After changing the MovingCircle.as at the last step I get this error:

    TypeError: Error #1007: Instantiation attempted on a non-constructor.
    at MovingCircle()
    at FirstCircle/init()
     
Submit Comment



Search Entire Site
Add to Google
Advertisements
Article Options
Latest New Articles
Set up a simple IIS Server for Flash
by Peter McBride

Day 1 at FITC Toronto 2008
by Anthony Pace

Simple reflection effect with AS2
by Jean André Mas

ActionScript.org Meets Josh Tynjala (aka dr_zeus)
by ActionScript.org Staff

Rapidly Create Online Flash Movies to Help Users Market, Sell and Support Software and Hardware
by Sabrina F

mailing list
Enter your email address:
mailing list
Subscribe Unsubscribe
© 2000-2007 actionscript.org! All Rights Reserved.
Read our Privacy Statement and Terms of Use...
Our dedicated server is hosted and managed by WebScorpion Webhosting.