haxe_introduction_part

wiki/haxe_introduction_part_2

haXe Journey: The Gentle Introduction Part 2

Basic Graphics

After getting through the first part of your haXe/Flash introduction (you did read it, right?) you should have a folder with some boilerplate code that you are going to copy to a new folder under your haxe folder. Well, you don't really need any .swf file because that will be rebuilt. So you have a folder with your Main.hx, build.hxml and test.html files. You have your Notepad up and your Command Prompt blinking at you intently. We're ready to go.

Graphics

The point of Flash is a provide a robust multimedia platform for web authors. The first part of multimedia is graphics (then sound, interactivity, video, etc. but that's later). Drawing is the fundamental aspect of it all.

Now look at your Main.hx program.

Main.hx

class Main {
  static function main() {
    trace("Hello World!");
  }
}

It's pretty boring. Let's take a look at what facilities are available in our environment. First off, it is important to understand that there is an internal tree structure of graphical components that the Flash environment uses to know that to draw. Much in the same vein as HTML has a tree of tags to know how to draw a page. For every tree there is a root. Your effective root to know about is available in the flash.Lib.current. That's a little verbose to type so just save it in a variable like this.

var root = flash.Lib.current;

With that line you declare a variable called root and assign the runtime graphical root to it. The data type of the root graphical component is a MovieClip, which is the most feature full graphical component offered by the Flash library. Note: learn more about the 'MovieClip' from the Adobe livedocs here

Since data types are part of the haXe language we can—and probably should— declare the variable that way. Rewrite the line as.

var root : flash.display.MovieClip = flash.Lib.current;

That brings is to our first language lesson! y'all ready for this.. ba dun dun dah dah dah da da da da dah dah dah dee dee dee dee

Language Lesson

haXe is a statically typed language. That means that the compiler must know the type of your variables at compile time. That means that the values you assign to a particular variable must be compatible with the type that the variable was declared as. For example if you try to compile the following lines you will receive a compiler error:

Input

var myInt : Int = 5;
myInt = 5.5;

Output

Main.hx:5: characters 4-15 : Float should be Int

The compiler is telling us that myInt wants integer values and not floating point values. So be sure that the variables are defined correctly in the following form.

var myVariableName : Type;

or...

var myVariableName : Type = value;

Be aware of this when writing your haXe code.

The Stage Object

The stage represents the visible area that your Flash program can occupy. One convenient thing that Flash 9 does for us is adding a stage variable on graphical components for easy access. Your root variable has the stage member variable.

Compile and run your program as written below:

class Main {
  static function main() {
    var root : flash.display.MovieClip = flash.Lib.current;
    trace(root.stage.stageWidth);
    trace(root.stage.stageHeight);
  }
}

When you run that program you will see the size of your Flash object printed out. This is a nice programmatic way to get your boundaries in your Flash program. Note: For more information on the 'Stage' type go to the Adobe livedocs here

The Graphics Object

Along with the stage you also have a Graphics object available from the root graphics component. This object has some very powerful functions to do drawing. We're going to look at the path functions and a basic shape function.

The path functions we're using are moveTo() and lineTo(). If you're familiar with the pen tool in Photoshop the API for path drawing mimics the behavior of that tool. Also, like the pen tool, there is a stroke style for the path that is actually set with the function of lineStyle(). Using that function you set the width and the color of the stroke that is going to follow the path.

The basic shape we're going to use is the circle using the, you guessed it, drawCircle() function. Also like path tools in drawing applications like Photoshop and Illustrator, we need to set the fill style for the shape. For that we have two function calls, beginFill() and endFill().

Let's look at the code:

Main.hx

class Main {
  static function main() {
    var root : flash.display.MovieClip = flash.Lib.current;

    var g : flash.display.Graphics = root.graphics;

    g.lineStyle(3, 0xFF0000);
    g.moveTo(0, 0);
    g.lineTo(root.stage.stageWidth, root.stage.stageHeight);
    g.moveTo(root.stage.stageWidth, 0);
    g.lineTo(0, root.stage.stageHeight);

    var centerX : Float = root.stage.stageWidth / 2;
    var centerY : Float = root.stage.stageHeight / 2;

    g.beginFill(0x0000FF);
    g.drawCircle(centerX, centerY, 50);
    g.endFill();
  }
}

Build and run this. Once you run it you'll see some interesting behaviors based on this little bit of code. First off, you used some color to highlight the way color is represented in Flash. It's very easy. Just use hex notation and it's the familiar RGB representation where each color channel has 255 values available. The lineStyle() was called to set our pathing to have a width of three and to color the paths in red. The lines cross the entirety of the Flash object because you were able to get the dimensions of the stage. Also note that the blue circle overlays the lines with the origin—the x,y we sent to drawCircle()— is the center of the circle. The circle overlays the lines because it was rendered after the lines were. There is another important behavior to notice. There is a red line around the blue circle. That is because shapes are essentially paths themselves. They have functions for useful shapes in Flash for the convenience factor.

The Graphics object is worth researching. Spend some real quality time with the documentation.

This is all well and good but we're not in the business of drawing static images. We want some dynamic graphics, as well as some interaction. But that will be our next episode.