Life as Clay

Archive for the ‘Actionscript 3.0’ Category

Flex Builder 3, AS 3, and embedding fonts on a Mac

leave a comment »

For whatever reason, the common examples for how to embed fonts using Actionscript 3 do not work on the Mac, when coding in Flex Builder 3. There are many examples for how to do this, on the web and in books, but they just don’t work on OS X. Bummer.

The good news is that I found a working example. The bad news is that it was in the Internet Archive. I’m reposting it here in case somebody comes along and needs assistance. Here is the link to the Internet Archive. Here’s the example described:

… here i will show you the way you can embed fonts in AS3 project without passing through SWF files.

First of all, I recommend you to use a AssetManager class to have an easy access to all you need (these includes fonts obviously!).

And now let’s see how can we build this class (we take for example that we must embed two different fonts)

public final class AssetManager
{
[Embed(source="/assets/fonts/Arista.ttf", fontName="arista")]
public static var arista:Class;

[Embed(source="/assets/fonts/kroe0656.ttf", fontName="kroeger")]
public static const kroeger:Class;
}

… now where we want to use these fonts we may write this …

import flash.text.Font;
Font.registerFont(AssetManager.arista);
var myTF:TextField = new TextField();
var tf:TextFormat = new TextFormat();
tf.size = 48;
tf.font = "arista";
myTF.embedFonts = true;
myTF.antiAliasType = AntiAliasType.ADVANCED;
myTF.defaultTextFormat = tf;
myTF.text = "Light the moon";

I hope this helps somebody!

Written by Clay

January 25, 2010 at 19:30

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!

Written by Clay

January 22, 2010 at 21:55