Week 5: The Drawing API, Custom Cursors

Posted on by

>>week5 EXAMPles

Topics

  • Variable Scope
  • Creating a Custom Cursor
  • Working with the Drawing API

Variable Scope

This is something we haven’t talked about specifically, but is important to understand as you start to write more complicated code.

A variable’s scope refers to where in the code it is defined. A variable is either global or local. A global variable is available to all code within the program. A local variable is only available to the function or statement where it is defined. For the most part, we’ve been dealing with global variables. However, variables that we’ve defined within conditional statements or loops are confined in scope to those statements.

Let’s take the example of the addMe Function from an earlier class:

function addMe(var x:Number, var y:Number):Number {
 var z:Number = x + y;
 return z;
 }

In this case, the variables x, y, z are all local to the addMe function. The problem with this is that the function returns the value of z, but there is no way to access this value, because it only has meaning within the function. Instead, you might want to define z outside the function:

var z:Number;
function addMe(var x:Number, var y:Number):Number {
z = x + y;
return z;
}

Now, when you call this function you will have access to the returned value of z. Note, however, that x and y are still local variables, because you defined them within the parameters of the function.

We’ll look at this issue more specifically in the next example.

Creating a Custom Cursor

There may be cases in a application where you want to display a different cursor icon than the standard arrow or hand that your computer usually uses. In flash, this icon is a property of the Mouse object. There is no direct way to replace this icon, what you do instead is hide the default icon, and then attach a new symbol in Flash to the position of the mouse.

To hide the mouse is a simple method of the Mouse object:

Mouse.hide();

Then it’s a simple matter of creating the new instance of the cursor symbol, adding it to the display list, and pinning it’s x and y coordinates to the position of the mouse. You can get the position of the mouse with these properties:

  • mouseX
  • mouseY

The Drawing API

If you are using simple shapes in your application, you can avoid creating library symbols completely and instead use ActionScript 3.0’s Drawing API to create vector graphics.

The Drawing API (Application Programming Interface) is part of the Graphics class. Any Sprite or Shape instance you create includes a graphics instance that you can draw within. There are a number of methods you use to draw and fill vector shapes.

> Live Docs > Graphics Class

Setting a Line Style

The graphics.lineStyle method takes three arguments – thickness, color, and alpha:

graphics.lineStyle(1);

Drawing Straight Lines

To draw a straight line from the last point that the “pen” landed, use lineTo, which takes two arguments, x and y coordinates.

graphics.lineTo(50,0);

Moving the Pen

To move the pen position without drawing a line, use moveTo, which also takes x,y coordinates.

graphics.moveTo (-50,50);

Drawing Curved Lines

A curved line requires four points of reference – controlx, controy, anchorx, anchory

graphics.curveTo(0,-50,0,0);

Primitive Shapes

There are built in methods for creating circles, ellipses, rectangles and rounded rectangles in ActionScript 3.0. They take various arguments depending on the shape:

  • drawCircle(x:Number, y:Number, radius:Number)
  • drawEllipse(x:Number, y:Number, width:Number, height:Number)
  • drawRect(x:Number, y:Number, width:Number, height:Number)
  • drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number)

Fills

To fill in lines or shapes created with the drawing API, you define a fill style with beginFill, which takes two arguments, color and alpha:

graphics.beginFill(0xFFFF00,1);

All shapes will be filled with this style until you invoke the endFill method:

graphics.endFill();

Homework

  1. Using just the Drawing API methods (no Library symbols or objects drawn on the Stage) draw a self-portrait.
  2. Make a drawing application that lets the user draw on the screen using the mouse. (Hint: You can use the custom cursor example as a starting point for this application)

 

Leave a Reply