Life as Clay

Learning Actionscript 3 with Adobe Flash Builder / Flex Builder

with one comment


I tried to learn Flash several times over the past few years but I always gave up because the Adobe Flash CS3 interface is littered with a bunch of stuff that distracts me. As a brief aside, I decided that I wanted to learn Actionscript several years ago, when Jenova Chen posted his thesis game, Flow, to the web. This game later became Flow on the PS3. I was wowed with the graphics and overall feeling of the game, so I contacted him to ask how he made it. His response: it was procedurally generated in Flash and programmed with Actionscript. I bought Flash, got distracted to 100 other things, tried to learn Actionscript several times, and never made any progress.

The good news is that there’s a far better way to work on Actionscript: get yourself a copy of Adobe Flex Builder, which soon will be renamed to Adobe Flash Builder to distinguish it from the free Flex SDK.  The cool thing is that you can get a copy of it for free if you are a student or if you are unemployed by the current recession. Just visit this link. You also can download a trial version through Adobe’s website.

I mentioned in a previous post that setting up and understanding IDEs is difficult. Flex Builder / Flash Builder is simpler than most. This tutorial is meant to show you what to do after installing the application.

  1. Download it from Adobe or get the free student edition. You also can get the Flash Builder 4 Beta 2 trial for 60 days.
  2. Install it.
  3. Now, remember… this brief tutorial is geared towards learning Actionscript, NOT Flex… I can’t help with that.
  4. Launch the software.
  5. Select File > New > Actionscript Project
  6. Name the project something that has two words, like “Arrow Field” (the example later) and click ok.
  7. You’re now looking at the main class for the project. This is the code that will run automatically when you run something that you build in Flash Builder / Flex Builder. It looks like this:
package
{
	import flash.display.Sprite;

	public class main extends Sprite
	{
		public function main()
		{

		}
	}
}

To get started, I’m going to give you some instructions and code so that you can get a small project up and running. This is partially derived from the Actionscript 3.0 Animation book by Keith Peters. It’s a good book.

  1. In the left hand pane you’ll see a hierarchical list of the files in the project you just created. Right-click on the parent Folder and select Properties.
  2. Click where it says “Actionscript Compiler”
  3. Enter this is the “Additional Compiler Arguments” field: -default-size 800 600 -default-frame-rate 30 -default-background-color 0xffffff
  4. Hit ok to exit the dialog box.
  5. If you named your project something that was one word, the names of the functions in the primary .as file will be that word. If you named the project with two words, the primary .as file should be called main.as. Paste this code into main.as:
package
{
	import flash.display.Sprite;
	import flash.events.Event;

	public class main extends Sprite
	{
		private var arrowArray:Array = new Array();

		public function main()
		{
			init();
		}

		private function init():void
		{
			// This creates the arrows; parameters are (# across, # down)
			createArrows(20,20);

			// This makes the arrows move when the mouse is over the movie
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		private function createArrows(xnum:Number, ynum:Number):void
		{
			// Create an array of arrows
			var totalArrows:Number = xnum * ynum;
			for (var i:Number = 0; i <= totalArrows; i++)
			{
				var arrow:Arrow = new Arrow();
				arrowArray.push(arrow);
			}

			// Call the function to draw the arrows here
			drawArrows(arrowArray, xnum, ynum);
		}

		private function drawArrows(drawArray:Array, xnum:Number, ynum:Number):void
		{
			// Pass an array to this to draw the arrows in the array
			var startxpos:Number = 25;
			var startypos:Number = 25;

			var currentxpos:Number = startxpos;
			var currentypos:Number = startypos;

			var xshift:Number = (stage.stageWidth - 25) / xnum;
			var yshift:Number = (stage.stageHeight - 25) / ynum;

			var xcount:Number = 0;
			var ycount:Number = 0;

			// Iterate through each arrow in the array
			for (var i:Number = 0; i < drawArray.length - 1; i++)
			{
				var current:Arrow = drawArray[i];
				addChild(current);

				// set the x value
				if (xcount < xnum)
				{
					// Place it at the current x and y position
					current.x = currentxpos;
					current.y = currentypos;

					// Increment the x position
					currentxpos = currentxpos + xshift;

					// Increment the counter so we know how many we have placed on the x
					xcount +=1;
				} else {
					// Set the x back to 0 because we are starting a new row
					xcount = 0;

					// Set the x position back to the starting position
					currentxpos = startxpos;

					// Increment to the new row on the y
					currentypos = currentypos + yshift;

					// Place the arrow
					current.x = currentxpos;
					current.y = currentypos;

					// Increment the x position for the next one
					currentxpos = currentxpos + xshift;

					// Increment the number across the x
					xcount +=1;
				}

				// This code just changes the arrow size, based on how many there are
				if (xnum == ynum)
				{
					current.scaleX = 1/xnum;
					current.scaleY = 1/xnum;
				} else if (xnum < ynum) {
					current.scaleX = 1/ynum;
					current.scaleY = 1/ynum;
				} else {
					current.scaleX = 1/xnum;
					current.scaleY = 1/xnum;
				}
			}
		}

		public function onEnterFrame(event:Event):void
		{
			// this loops goes through each arrow in the array
			for (var i:Number = 0; i < arrowArray.length - 1; i++)
			{
				// Get an arrow from the array
				var current:Arrow = arrowArray[i];

				// Determine the distance between the mouse and the arrow
				var dx:Number = mouseX - current.x;
				var dy:Number = mouseY - current.y;

				// Use the distances to calculate an angle
				var radians:Number = Math.atan2(dy, dx);

				// Use the angle to set the rotation of the arrow
				current.rotation = radians * 180 / Math.PI;

			}
		}
	}
}
  1. Now you’ll create a class file to hold the code for the simple class. Objects created look like simple arrows. The code you just pasted in will make them follow the mouse around. Go to File > New > Actionscript Class.
  2. Name it Arrow. Click ok and ignore the warnings. The Package Explorer pane on the left now will show a file called Arrow.as. It will open automatically, too.
  3. Click Arrow.as to get into the class file. Paste in this code:
package
{
	import flash.display.Sprite;

	public class Arrow extends Sprite
	{
		public function Arrow()
		{
			init();
		}
		public function init():void {
			graphics.lineStyle(4, 0, 1);
			graphics.moveTo(0, 0);
			graphics.lineTo(-100, 100);
			graphics.moveTo(0, 0);
			graphics.lineTo(-100, -100);
		}
	}
}
  1. Now click the “Run” button on the toolbar at the top or select “Run main” from the Run menu. The field of arrows should open in the browser.
  2. Notice the comments in the code – tweaking some of the numbers and/or variables might help you understand what’s going on.  It’s pretty simple code, but has a few twists thrown in so that you can see a few techniques for making things happen.

One thing that you will notice is that the behavior is generated by an array or Arrow objects. An array is created with the total number of arrows that you specify. They are positioned by iterating through the array. Their rotation is set by a separate iteration through the array.

I hope that this helped get you started! Good luck!

Advertisements

Written by Clay

January 22, 2010 at 21:55

One Response

Subscribe to comments with RSS.

  1. Thank You.Just what I was looking for.

    phil

    April 21, 2013 at 17:21


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: