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
• Method 2: HTML5 and Javascript
• The Canvas Element
• Drawing With Javascript

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();

 Method 2: HTML5 and Javascript

The Canvas Element

This is a new element in HTML5 that allows you to directly create graphics and animations in your html document without a plug-in. You create an empty canvas element like so:

<canvas id="myCanvas"></canvas>

This is it as far as the html is concerned, everything else is handled by javascript. However, it’s a good idea to put some text in between the canvas tags in case someone is viewing the page with a browser that doesn’t support the canvas element:

<canvas id="myCanvas">Hey, you really ought to upgrade your browser!</canvas>

The Javascript

Next, add some script tags to contain the Javascript:

<script type="text/javascript">
// script goes here
</script>

Now, you need to tell the javascript what element in the page you want to draw in:

var c=document.getElementById("myCanvas");

Then, you need to define the context of the canvas. This just means you are either defining it as a 2d or 3d space. We are going to stick with 2d:

var ctx=c.getContext("2d");

Now you are set up to draw! Here are the drawing methods for the canvas element. You will see they are pretty similar to Actionscript:

Canvas 2D Drawing Methods

Homework:

1. Weigh in on the Flash / HTML5 Divide by writing a short essay as a post on this site. Find at least 3 articles online discussing the issue – One from Apple or Microsoft explaining their position, one from Adobe explaining theirs, and one from an objective third party. Cite the URLs of these source in your response. Briefly discuss the key issues, the pros and cons of each technology, and where you fall in the debate.

2. Create a self-portrait using the two code drawing techniques we covered today. The two portraits do not need to be identical, or even in the same style, but they can be the same or similar if you wish. Bring the files to class next week and we’ll review them.