Dave Gardner

They say that to become a better programmer, you should learn a new programming language. Exposure to a new language allows you to step outside of the patterns and workflow you’re used to and tackle a problem from a different perspective. There are extremes to this, for instance learning Haskell (an advanced purely functional programming language). I’ve decided to postpone my learning of Haskell, for now, and instead learn Adobe Flash AS3.

This blog post aims to give an introduction to Flash AS3. One good thing about Flash is the large volume of tutorials out there; however this is a double-edged sword. Seperating the wheat from the chaff can be hard work. This post aims to give an introduction to Flash from the perspective of an experienced PHP programmer; someone who already understands the key ideas of OOP. It covers:

1. Getting started; how to organise code
2. Adding Movie Clips to the scene
3. Handling events
4. The power of arrays
5. Download source code

Once you’ve put it all together, you’ll have a super-duper rocket-firer (the big white space below is the finished article – hint click on the milk bottle bottom left to launch a rocket)

One more thing… a big shout out to other tutorials I’ve found helpful, especially the concise and engaging tutorials from untoldentertainment.com. You can check out all my AS3 links on Delicious.

How to organise code

As Ryan explains in this tutorial, Flash beginners tend to put Actionscript code everywhere.

On different frames of the timeline, embedded in nested MovieClips – if i can write code on it, i do”

The fast path to Flash Pro is to put all your Actionscript in seperate files and break your application down into objects (classes). To get started, fire up Flash (I’m using CS4) and create a new “Flash File (ActionScript 3.0)”. Get the Properties window up (click “Window” > “Properties” if you can’t see it). It should look like this:

Type “Main” into the Class box. This is the name of the class that will be attached to main movie; the entry-point of the application. Now we can create this class. Click “File” > “New” and choose “ActionScript File”. Paste in the following code:

package
{
  import flash.display.MovieClip;

  /**
   * Main class - entry point for App
   */
  public class Main extends MovieClip
  {
    /**
     * Constructor
     */
    public function Main()
    {
      trace('It works! - blatantly ripped off from the other tutorial');
    }

    /**
     * Another method
     */
    public function myFirstMethod():void
    {
    }
  }
}

This is a basic “Main” class. We could create other classes in a similar fashion. However we should put each class in its own file. Press CTL-Enter to compile and run; you should find the OUTPUT tab shows the “It works” message.

package

Namespacing basically; I’m just leaving this blank for now. Could be package myExcellentPackage

import flash.display.MovieClip

Similar to PHP’s require_once. We need to make sure that everything this class needs is imported. This starts to be a pain when you use various libraries / built-in Flash classes as you need to know what to import. For example, need to change colour? You’ll need import flash.geom.ColorTransform. Easiest way of knowing what to import is simply to Google it.

public class Main extends MovieClip

The class declaration.

trace(’some text’);

The Flash equivalent of print_r, ish. Useful for outputting console messages for debugging.

public function myFirstMethod():void

Another method declaration. Notice the :void bit which defines the return type explictly; I quite like this feature. Another important thing to note is that the constructor Main must not have any return type defined.

Adding Movie Clips to the scene

To more further down the Flash Pro road, we need to be able to setup the scene (Flash canvas) programatically. We need to be able to add things and remove things as needed, for example adding a high-score table at the end of a game or a splash screen at the beginning. In this example we’ll add everthing to the scene using code. It’s dead simple.

For my rocket firing example, I want to fire the rockets from a milk bottle. We’ll create this as a Symbol. According to the first thing I found on Google (it must be right), a Symbol is simply a reusable object. From a code sense, a Symbol is like a class. We can create copies (instances) of the Symbol and place them in our scene; we can do this from code or from within the Flash GUI. To create the Sybmol, from the FLA, click “Insert” > “New Symbol”. I’ve added a JPEG picture of a milk bottle on the Symbol.

Now we need to set it up so we can tie the Symbol to ActionScript. Get the Symbol properties window up. The easiest way is to find the Symbol from the library, right click on it and click “Properties”. Fill out the details, as shown below:

The key thing is the Class property. This is the class it will be tied to in ActionScript.

Now we’ll adjust our Main class to get this added to the scene. Adjust Main.as by adding in the property launchpad and adding to the constructor:

  /**
   * Main class - entry point for App
   */
  public class Main extends MovieClip
  {
    /**
     * Milk bottle (launch pad)
     * @var MovieClip
     */
    private var launchPad:MovieClip;

    /**
     * Constructor
     */
    public function Main()
    {
      launchPad = new milkBottle();
      launchPad.x = 50;
      launchPad.y = stage.stageHeight-25;
      launchPad.height = 40;
      launchPad.scaleX = launchPad.scaleY;
      addChild(launchPad);
    }
  }

private var launchPad:MovieClip;

So you’ll probably recognise this as declaring a private class property. The key things is the :MovieClip which defines what type of variable this is. You’ll see this a lot in Flash.

launchPad = new milkBottle();

Create an instance of our milkBottle class (Symbol). You’ll notice that we don’t need to bother with this. (or $this->) as we would in PHP to access the member property launchPad.

addChild(launchPad);

This adds the object to the stage. It’s a bit like the JavaScript DOM in a lot of ways. This is the simplest way of adding an object to the scene; we can also use other methods like addChildAt(launchPad, 1).

launchPad.height = 40;

Resize the object. launchPad.scaleX = launchPad.scaleY completes the job – adjusting the width automatically to make the aspect ratio correct.

Handling events

Event handling in AS3 will be instantly familiar to anyone who’s used jQuery, or indeed JavaScript, so long as they’ve stuck to the idea of seperating content from functionality (no inline event handlers). For the rocket launching app, we need the launchPad object to handle a mouse click event and fire off a rocket (click on the milk bottle to fire a rocket!) We can attach an event handler by adding the following line to Main().

  launchPad.addEventListener(MouseEvent.CLICK, launchRocket);

To access the event handler functionality, we also have to make sure we import the right libraries.

  import flash.events.Event;
  import flash.events.MouseEvent;

Finally, we need a method to handle this event. We’ll add this to our class:

  /**
   * Launch a new rocket
   * @param Event e
   */
  public function launchRocket(e:Event):void
  {
    trace('Launch!');
  }

The power of arrays

So we’ve made a good start. Next up, we want to be able to launch a rocket. We want to launch one whenever the milk bottle is clicked. Some how we need to keep track of all these rockets. This is where an array proves useful. We can add a new class property.

  /**
   * Rockets
   * @var Array
   */
  private var rockets:Array;

Within the Main class constructor we’ll initialise the rockets array.

	rockets = new Array();

Then we’ll flesh out the event handler to create new rocket objects.

  var rocket = new firework();
  rocket.x = 50;
  rocket.y = stage.stageHeight-25;
  rocket.height = 40;
  rocket.scaleX = rocket.scaleY;
  addChildAt(rocket,1);
  rockets.push(rocket);

Now the rocket class is an interesting one. This is where I’ve started to get a bit more interesting – starting to explore Flash. The key thing to realise is that the rocket class encapsulates the behaviour of a rocket. It sets itself up (via the constructor) and then it adjusts its own behaviour (in this instance location on the stage) each frame. How it does this is another interesting part of Flash: the Event.ENTER_FRAME event. Within the firework class constructor we have:

  addEventListener(Event.ENTER_FRAME, updateState);

This fires off an event every time Flash starts a new “frame” – n times a second, where n is defined within the main Flash file’s properties.

If you dig through the firework class (and indeed the smoke class), you’ll see how they set themselves up, update their state once a frame and eventually remove themselves once a predefined lifetime has completed.

Source code

Click here to download the full source code.

Tags: as3, Flash, tutorial

This entry was posted on Wednesday, January 27th, 2010 at 9:00 pm and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.