My abilities as an artist extends to drawing stick figures. Although this might be enough for internet comics such as xkcd, I always wanted to create complex geometric based artwork. I played around with Flash before, but I found many of the designer oriented concepts in the Flash authoring tool a bit to cumbersome for my programmer mindset. I didn’t want to start with a timeline, I wanted to start with a main method. Fortunately for programmers like me that want to dabble with Flash animations, Flash fully supports ActionScript, a programming language based on JavaScript. With Flash, I could write ActionScript programs that would create designs as precise as my programming abilities would dictate, not my drawing abilities. The only major drawback to using Flash, if it is not part of your job, is the is the price tag. The Flash CS4 authoring tool is priced well beyond my budget for Open Source projects, which is $0. Fortunately, FlashDevelop fits right between my price range.
FlashDevelop is a free and open source editor for Flex, Air, and ActionScript projects. FlashDevelop is a .NET project and has a look and feel similar to Visual Studio. To get started with FlashDevelop you will need to download the latest version of Flex SDK and FlashDevelop.
To configure FlashDevelop, you need to point to the location where you unzipped the Flex SDK. I typically unzip Open Source libraries under C:\OSDEV. Once FlashDevelop has been configured to point to the Flex SDK, you can create an ActionScript 3.0 project by going to Project | Create Project and selecting ActionScript 3.0 project from the project wizard.
Creating a new project will create a project directory structure with a bin, lib, and src folders. Under the src folder there is an Main.as ActionScript file with the following scaffold code…
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* ...
* @author DefaultUser (Tools -> Custom Arguments...)
*/
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
}
}
Inside the init function, below the comment ‘entry point’ you can add your custom ActionScript code. For example, to create the standard ‘Hello, World!’ example you can add the following code.
var texty:TextField = new TextField();
texty.text = "Holla, World!";
texty.textColor = 0xFF00f0;
this.addChild(texty);
If you want to work with shapes here is an example to create a square and a circle.
var shapely:Shape = new Shape();
shapely.graphics.beginFill(0xFF0000);
shapely.graphics.moveTo(0, 0);
shapely.graphics.lineTo(100, 0);
shapely.graphics.lineTo(100, 100);
shapely.graphics.lineTo(0, 100);
shapely.graphics.endFill();
shapely.graphics.beginFill(0x00FF00);
shapely.graphics.drawCircle(150, 150, 50);
shapely.graphics.endFill();
this.addChild(shapely);
Build the project and open launch the index.html file under the bin directory.
Technorati Tags: flash, air, flex, flashdevelop, actionscript, graphics, vector, development