(If anyone cares, let me know what you think in the comments. The puzzles kinda progress in difficulty, but they haven’t been balanced at all, and some of them are pretty bad. There, you’ve been warned.)

The “in progress” title screen of Nonogram Madness. Yeah, I decided on a name.

Makin’ another game! It’s a nonogram game, inspired by Mario’s Picross (read more details about the whole genre at Game Set Watch).

Admittedly, nonograms aren’t for everyone. I enjoy them, however, because they’re simple logic puzzles that have a visual component… they’re more interesting to me than the straight-up numbers of sudoku. When I explained the concept to Chandra, she seemed interested! It’s my goal to make something that she’ll play through =]

One of the most basic events in Actionscript is the “enter frame” event. This triggers every time the SWF is redrawn, and basically corresponds to the SWF frame rate. In the following example, we’re going to create a new class, and add an “enter frame” event listener to it, so that whenever a new instance of that class is created, a function will run at frame rate.

package {
  import flash.display.Sprite;
  import flash.events.Event;  // Required to add event listeners

  // Set our SWF framerate, width, height, and background color
  [SWF(frameRate='30', width='640', height='480', backgroundColor='0xffffff')]

  public class EventListenerExample extends Sprite {

    [Embed(source="ball.svg")]
    public var BallGraphic:Class;

      // Variables used to store movement data
      private var dx:int = 5;
      private var dy:int = 5;

    public function EventListenerExample():void
    {
      // Create instance of imported graphic
      var b:Sprite = new BallGraphic();

      // Add to this display object
      this.addChild(b);

      // Attach event listener
      // Listen for "ENTER_FRAME" event
      // Run the "enterFrame" function
      this.addEventListener(Event.ENTER_FRAME, enterFrame);
    }

	public function enterFrame(e:Event):void
	{
	  // Increment position
	  this.x += this.dx;
	  this.y += this.dy;

	  // If object passes beyond SWF boundaries,
	  // reverse direction
	  if(this.x >= 640 - this.width || this.x <= 0)
	    this.dx *= -1;
	  if(this.y >= 480 - this.height || this.y <= 0)
	    this.dy *= -1;
	}
  }
}

Save this code in a file named ‘EventListenerExample.as’. You can see that we’ve elaborated a bit on our last example, importing and displaying an SVG graphic. However, this time we add some variables to the class that represent speed (delta-x and delta-y). We attach the event listener by calling this.addEventListener (Event.ENTER_FRAME, enterFrame);. The first argument is the type of event the listener is triggered by, and the second is the name of the function to run when the event is detected.

In the declaration of the ‘enterFrame’ function, we pass it details of the event that triggered it by putting e:Event in the arguments list. The function doesn’t actually use that information, but simply moves our graphic around, bouncing off the “walls” of the SWF. Movement is just one possible application of the ‘enter frame’ event; collision detection can also be calculated this way, among other things.

First, you’ll want to get a vector illustration program. Adobe makes Illustrator, which might be your first thought, but we’re trying to do things on the cheap here, otherwise we’d just get the Flash IDE. Inkscape is a free program which can save files in the SVG (scalable vector graphics) format. Grab a copy of Inkscape, and fire it up (OS X users prior to 10.5 will need to install X11).

Inkscape starts up by creating a default document, which is much larger than anything we would normally use. From the ‘File’ menu, navigate to the ‘New 32×32 Icon’ option. Now, in the smaller image, use the ‘Circle’ tool to create a circle. Take some time here to play around with Inkscape: experiment with changing the color of the circle, give it a border, do whatever you like. When you’re satisfied with what you have, click ‘Save’ and save the image as a ‘Plain SVG.’ Now, create a new Actionscript file in the same directory as the graphic file called ‘SVGExample.as’, and enter the following code:

package {
  import flash.display.Sprite;

  public class SVGExample extends Sprite {

    [Embed(source="ball.svg")]
    public var BallGraphic:Class;

    public function SVGExample():void
    {
       var b:Sprite = new BallGraphic();
       b.x = 100;
       b.y = 100;
       addChild(b);
    }
  }
}

The way that graphics are embedded is as follows: first, you use the ‘Embed’ syntax to specify where the image is, and then you link that embedded asset to a unique class name. Here, I call it “BallGraphic,” but you can use anything that makes sense to you. Creating an instance of that class (when I call new BallGraphic()) loads the graphic, and it can then be added to a display object container and shown on the screen. When you compile this code and run the SWF, you should see your graphic on the stage. You can now easily import SVG graphics (or even other image types, such as .gif/.jpg) via Actionscript.

Anyway, check out the most recent build. I got some simple “alien” type guys moving around in there, and am experimenting with a background. I’d like to try making the background move in relation to the ship, but I’m not sure how the effect will turn out. Guess we’ll see!

One benefit of the Flash IDE is that you can easily create vector graphics and use them in your movie/program. In my initial research, it wasn’t immediately apparent if you could create vector graphics in another program and then import to Flash. Of course, you can do it with Adobe Illustrator, but how about some other (free) program?

Turns out that you can. Inkscape is a free vector graphics editor, which can output SVG file format images that can be directly imported via Actionscript into your Flash program. Pretty great! One of my goals for today is to learn the basics of a vector graphics editor… I’m fairly familiar with programs like Photoship/GIMP, but Inkscape seems to have some different paradigms that I’ll have to pick up.

Obviously, getting from displaying a keyboard-controlled object to a more “game-like” state is pretty easy. Here I’ve loaded an external PNG (that represents a spaceship of some kind) and attached it to a “ship” class instance. The left/right arrow keys control the object’s internal “rotation” value, and pressing the up arrow key moves the ship. The direction is determined by trigonometry functions; the movement vector along the x-axis is cos(ship.rotation) and the y-axis movement vector is sin(ship.rotation). (For example, if our ship is pointing straight up (90°), cos(90)=0 and sin(90)=1, so it’ll move straight up.)

So here’s the first real result of my toying Actionscript. If you’ll notice, the last post where I actually first downloaded the Flex 3 SDK was two months ago. It didn’t take me two months to do this, but rather took me that long to figure out when I could fit in extra programming time. The past two weeks I’ve started waking up super early, in order to study Actionscript before work. Anyway, I digress. This SWF was created with multiple classes, including a keyboard handler, main program class, and “entity” class (which in this case displays a blue box). Slowly figuring stuff out, like how to import graphics and associate them with an object, as well as event handling. Once the language-specific stuff gets figured out, things get easier because you know how to implement abstract algorithms/ideas. (Ah, just to reduce any potential confusion, you have to click the SWF in order to set focus, since it’s not embedded in the page. Apparently WordPress doesn’t like to embed SWFs…)