WebPattern & ControlPanel

I've finally finished my first visually impressive AS3 project: the WebPattern class. It takes four arrays as arguments: branches, which represents the number of branches originating from each node; branchAngles, which determines the angle between the two farthest branches of a node; branchLengths, which determines the length of the branches originating at a node; and jointWidths, which governs the width of the branches where they connect at a node. If you don't understand my explanation, you can check out a demo.

Here are a couple of warnings before you start fiddling. First, this program is relatively processor intensive, because each new layer of branches dramatically increases processing time. If you want a pattern with five layers, you had better make sure that none of the nodes has more than five branches. This program will kill your computer if you aren't careful.

Second, all of the arrays you pass in as arguments have to be the same length. Otherwise, you'll get silent failure, unless you have the debug Flash plug-in. Also make sure that all of the nodes have at least two branches and none of the other arrays have a zero in them.

WebPattern may be a unique and incredibly fun-to-play-with class, but ControlPanel is a very useful class for demoing classes and apps. That box in the top-right corner that lets you create patterns is an instance of ControlPanel. Creating that panel took only six lines of code: one for instantiation, one for each input field, and one to add it to the stage. It seals away most of the painful interface construction and data management steps.

For example, for this implementation, I had to do only three things to implement the control panel and hook it up to my web pattern drawer. First, I had to construct it:

fields = ['Branches:', 'Branch Angles', 'Branch Lengths:', 'Joint Widths:'];
defaults = ['2, 5, 3','180, 180, 60','50, 50, 50','6, 6, 2']
controlPanel = new ControlPanel('Arial');
for (var i:uint = 0, j:int = fields.length; i < j; i++) {
 controlPanel.addTextInput(fields[i], defaults[i]);
}
addChild(controlPanel);

I only used the arrays to abstract the naming of the fields; you can call it manually if you would like. Next, I added some event listeners:

controlPanel.addEventListener(ControlPanel.SUBMIT, submitListener, false, 0, true);
controlPanel.addEventListener(ControlPanel.CLOSE, closeListener, false, 0, true);

Finally, I created some listening functions. Notice how the submitListener() function only has to retrieve the data from controlPanel with data and access it through the input field names:

private function submitListener(evt:Event):void {
 destroyWebPattern();
 var arguments:Array = [];
 var rawData:Object = controlPanel.data;
 try {
  for (var i:uint = 0, j:int = fields.length; i < j; i++) {
   var fieldData:String = rawData[fields[i]];
   fieldData.replace(' ', '');
   arguments[i] = fieldData.split(',');
  }
  createWebPattern(arguments[0], arguments[1], arguments[2], arguments[3]);
 } catch (e:Error) {
  trace(e);
 }
}
  
private function closeListener(evt:Event):void {
 removeChild(controlPanel);
}

Even if you don't want to analyze that code, the lack of TextField, embedFonts, and defaultFormat should be apparent. Just remember that the ControlPanel relies on embedded fonts; make sure to embed whatever font you'd like it to use and export it for ActionScript.

Check out the demo and the source. I hope you'll have fun with my new toy and new tool.

Leave the physics to me!

I'm finally "done" with my AS3 game engine now. It doesn't play music, support sound effects, or use character animation at all (okay, maybe a little), but it doesn't try to. I'll give you an example of how it would work.

First, you'd have to download the file. Then, you alter the levels.xml file with to point to the levels' background images and ground profiles. You add the enemies with the <enemy /> tag, the player controlled character with the <fighter /> tag, and the goal with the <goal /> tag. You can alter the position of the fighter, the goal, and the enemies and change the background image and layout of the level without even recompiling the code.

To add a character, you do have to start up flash, but you don't have to do any real coding. Simply make a class for your character in the com.flashgames.bunnyhopper file, set the max speed, jump height, and acceleration through simple variables, and associate the class with a library object. Now, you can add your character to the level by simply altering the levels.xml file.

It's not the most sophisticated game engine, or the most open-ended, but anybody (with flash) can easily reshape the game with a little HTML understanding and little-to-no programming knowledge. Let's see you do that with APE or Box2D!

Play a quick demo or download the source.

Convenient AS3 Positioning Class

I'm sure I'm not the only new-to-AS3 programmer who longed for the convenience of HTML. In HTML, everything you put on the page spreads out and covers the viewing area.

Not so with ActionScript. In ActionScript 3, you must position each object manually by setting its x and y coordinates. It's precise, but it's a pain when you just want all your interface buttons visible. 

Enter Styler 0.1! This convenient class allows you to position objects relative to each other, more like you would with HTML. It's pretty simple to use, and its behavior is pretty easy to predict. You can download it, see some examples, and a try out a demo at my site. I hope it makes your life easier!

ActionScript 3 packages done right

As a somewhat semi-experienced XHTML/CSS programmer, I made several large mistakes when I started object-oriented programming in AS3. There just isn't much documentation on the basics of AS3 packages and package structure, even in instructional books. So here's my take on it, based on hard experience.

You should start your AS3 programming adventure by creating a high-level directory for all your your classes. I called mine 'Classes'. Now, open up Flash and register this directory so that Flash can find it and use the classes in it. In windows, you can do this by going to Edit>Preferences, clicking on ActionScript in the tab on the side, clicking the button that says 'ActionScript 3 Settings...', and clicking the button with the crosshairs on it. In the dialog box that pops up, find your 'Classes' directory and click 'Ok'. Now, Flash can find your classes!

Say that you're creating an AS3 application for somesite.com called Flashy Flash App. The tradition would be to create this file structure in your class directory: com>somesite>flashyflashapp. This way, all the classes for that site will be in one central place, separate from all your other sites' classes. In this file, you would create a document class called FlashyFlashApp.as. Here's how you would start the class:

package com.somesite.flashyflashapp {
 public class FlashyFlashApp {
   /* Lots of code goes here */
 }
}

You should note several key details. First, the file path between package and first bracket is relative to the main class directory. That means, the location of your .fla, flashyflashapp.fla, is completely irrelevant to the package info. Second, note that the class' name exactly matches its filename, including capitalization. If you don't do this, you'll encounter all sorts of nasty errors.

To link the .fla to the document class (the code that starts up the program), type its location into the text box that says 'Document Class' beside it like so:

com.somesite.flashyflashapp.FlashyFlashApp

This, too, is case sensitive, so be very careful with your caps. Now, any code inside the document class, FlashyFlashApp.as, will execute as soon as the program runs.

If you're like me, you've got a big question right now: "What about once I try to put the finished swf on my site? Won't I have to move all those classes and update all those package definitions?" Luckily for you, the answer is no. Unlike CSS, Javascript, or any of the other web technologies I was comfortable using, all of the required code for a Flash swf to run is in the one central swf. The only part of all this work that you will put on your actual web server is the final swf. Unless your script uses one of AS3's loading classes, like Loader or URLRequest (or whatever), you won't have any problems using just that one small swf.

If you've managed to stay interested this long, I commend you. I hope this post will help at least one person avoid some of the mistakes I made. Thanks for reading!