Playing with Circles

Move your mouse over the area below to create fading blue dots. Click the mouse to make fading red dots. (Download)

Lesson Learned: Events

It only takes writing a couple of event handlers to get the hang of them. First off, the signature of the function to register event handler functions is the same as JavaScript. For hardcore ajax hackers, it should all look very familiar.

    this.root.stage.addEventListener(flash.events.MouseEvent.MOUSE_MOVE,
                                     this.onMouseMove);

The addEventListener() is a method that will be implemented by components that will generate events (duh). Better said, components will implement the EventDispatcher interface if they have events to listen to. The first argument is just a nice way to categorize what is effectively a string identifier of the event type. Like in JavaScript you would add a listener for "click". Here you can just use the, readable, named constant out of the API. The second argument is a runtime binding of a object+method call. Just like JavaScript. Things to note though are that you have to make sure you're listening to the right component and that the component will fire the event you're listening for. Or else your code will never be executed.

Lesson Learned: Implicit Tasklet

There is an event firing constantly with a default environment of flash. That is the flash.event.Event.ENTER_FRAME event that you can listen to off of the root MovieClip.

    this.root.addEventListener(flash.events.Event.ENTER_FRAME,
                               this.onEnterFrame);

That is essentially the hook to call to allow updates for the frame. This is where you would update the graphical scene that you're working with in an incremental way.

In a way you can think of this as a call to what I would call a tasklet. A tasklet is a routine that will process a small part of a long running job and then return to the caller to resume the processing at a later time. In this example the tasklet is part of the frame rendering. With a tasklet there is always a routine that is performs some unit of work that will update the state of a task and return. In the circle test example the top-level tasklet is the frame rendering itself:

  public function onEnterFrame(event:flash.events.Event) {
    textField.text = "Counter: " + circles.length + "\n" +
                      "Stage Width: " + root.stage.stageWidth + "\n" +
                      "Stage Height:" + root.stage.stageHeight + "\n" +
                      "Width: " + root.stage.width + "\n" +
                      "Height: " + root.stage.height ;
    root.graphics.clear();

    // Render the circles
    for (circle in circles)
      circle.render(this.root);

    // Purge finished objects from the list of circles 
    var newList = new Array<Circle>();
    for (circle in circles) {
      if (circle.size != 0)
        newList.push(circle);
    }
    circles = newList;
  }

This updates the state of the graphics rendering by resetting the text of our textField and then updating the frame with a call to the each active circle's render() method:

  public function render(canvas:flash.display.Sprite) {
    var alpha = size / 20.0;
    canvas.graphics.beginFill(color, alpha);
    canvas.graphics.drawCircle(x, y, size);
    canvas.graphics.endFill();
    --this.size;
  }

The render method fills in the circle at the current size and then adjusts the size for the next call to get smaller. The part that really drives the example is this one line:

    --this.size;

This is the step-wise modification of state that really drives the graphics world. This modification of state in various manners, be it matrix multiplication, transforms, scaling, etc. is the back bone of graphical animation.

Notice that the render() method itself can also be considered a tasklet. It's the composition of all of the components tasklets that make up the frame rendering. Not only could you make size modifications of circles but you can modify color (like the transparency modification) for fading, position for motion, scaling for zooming and so on.

What Now?

At this point it should be less daunting to read either haXe or ActionScript code and make sense of it. Hopefully there will be more examples to build but even here there should be a budding understanding of Flash appliation structure.