Week 1: Drawing With Code

Topics:

• Skills Survey
• Flash/Actionscript vs. HTML5/Javascript
• Drawing with Code
  • Basic Concepts
    • Coordinates
    • Lines
    • Fills
    • Shapes
  • Method 1: Flash and Actionscript
    • Dynamic Display Objects
    • The Sprite Class
    • The Flash Drawing API

Skills Survey

Please click the link about and fill out the survey so I can get an general idea of where the class is at in terms of technical knowledge and skills.

Flash/Actionscript vs. HTML5/Javascript

As you might be aware, major mobile device manufacturers like Apple and Microsoft have decided not to support the Flash Player browser plug-in for the mobile browsers of their smart phones and tablets. This, along with the enhanced features of HTML5, has put the future of Flash and Actionscript into question.

In the past, the class has focused exclusively on the use of Flash and Actionscript for the development of rich media interfaces. Recognizing the shift in support for this platform, and the fact that Javascript and Actionscript share the same foundation, this semester we are going to look at how to create complex interfaces in both Flash/Actionscript 3 and HTML5/Javascript.

Drawing with Code – Basic Concepts

When you are creating graphics entirely with code, instead of using the tools provided by a program like Illustrator or the Flash IDE, we write out a set of instructions for the program to follow.

Coordinates

In both Actionscript and Javascript, the area of your virtual canvas is expressed as a grid that is described in X and Y coordinates.

• The X coordinates describe the horizontal axis of the grid
• The Y coordinates describe the vertical axis of the grid

Colors

Colors are expressed as hexidecimal codes (white is #FFFFFF) or as RGB values (white is 255,255,255)

Lines

Lines connect two x,y coordinates. You can set line color, alpha value and thickness.

Curves

Lines that have additional coordinates that act as control points of a curve.

Fills

Color fields that fill the space in between lines, curves or shapes. You can set the color and alpha values.

Shapes

Primitive shapes that are comprised of starting coordinates and height, width, and/or radius parameters.

Method 1: Flash and Actionscript

To use the Actionscript drawing methods, you first need to create a canvas on which to draw. The drawing methods are all part of the graphics class, but you can’t directly create a graphics object to draw in. So we’ll use a simple display object called a Sprite. A Sprite has all the properties of a MovieClip, but without a timeline. You can learn more about the Sprite class here:

Sprite Class

We can’t create a sprite directly on the Flash Stage, so we have to create it and add it to the display with Actionscript. There are two steps to do this with Actionscript 3. First we create the Sprite, which we are going to call “canvas”:

var canvas:Sprite = new Sprite();

Next, we add our Sprite to the stage:

addChild(canvas);

The next thing we’re going to do is position the canvas in the center of the stage:

drawing.x = stage.stageWidth / 2;
drawing.y = stage.stageHeight / 2;

The graphics class that is associated with this object is called, handily enough, “graphics”. To draw in it, we reference it using the name of the parent Sprite, using dot notation:

canvas.graphics

You can learn more about the Graphics class here:

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:

2. Create a self-portrait using the drawing techniques we covered today. Bring your .fla and .swf files to class next week and we’ll review them.