An Introduction to the Canvas

by: Caleb Jonasson - May 8th, 2012   Filed under: javascript Add Comment

Before we get started we are going to need to setup our coding environment. This will be a quick and dirty copy paste solution for you.

We need two files. The first will be index.html and the second file will be: main.js Fill the index.html file with the following code…

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE HTML5>
<html>
<head>
<script src="main.js"></script>
<title>Caleb Jonasson Canvas Demo</title>
</head>
<body onload="onLoad()" style="margin:0px; padding:0px;">
<canvas id="canvas" width="800" height="400"></canvas>
</body>
</html>

Now paste this code into the main.js file. The two files should be placed in the same directory.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var ctx = null;
 
function onLoad() {
// Get the context from the canvas
ctx = document.getElementById("canvas").getContext("2d");
 
// Add an event listener
document.addEventListener("click", registerInteraction, true);
 
}
var registerInteraction = function()
{
var x = window.event.pageX;
var y = window.event.pageY;
log("clicked: x"+x+", y"+y);
}
function log(content) {
console.log(content);
}

Using the Context

You will notice that in the onLoad function we are getting the context of the canvas from the page. This ctx value will allow us to draw on the canvas. The common variable for the context is either “ctx” or “context”. This value is declared at the top of the document and will be public for everything to use.

We are going to start this lesson by drawing a background onto the canvas so we know where it starts and ends. Add the following code to the onLoad function.

1
2

ctx.fillStyle = "#94B73E";
ctx.fillRect(0,0, 800, 400);

The fill style is a variable sets the fill color of the item. The fillRect function simply fill a rectangle. The first two parameters are the x and y coordinates of where you would like to start drawing the rectangle. The second parameters are the ending coordinates of the rectangle. Upon running the script you will notice that we now have a solid background.

Tags: , , ,

Introduction to AS3: Variable types

by: Caleb Jonasson - February 8th, 2010   Filed under: AS3, Introduction Series 4 Comments

The language of actionscript doesn’t use traditional variable types like advanced computer languages (java, C++, c.) Actionscript does things a little different. They like to be a little more generic since creating room in memory is not a heavy issue. Because of this the data types are a fair amount more user friendly.

The variable types flash uses are as follows:

“Int” This stands for integer and can be a negative or positive and thus include 0. (-4,-3,-2,-1,0,1,2,3,4,5 are all examples of the int data type.)

“Uint” This is very similar to the int data type however it cannot hold negative numbers, or ‘0.’ It can only hold whole numbers.

‘Number’ A number can be any number. This include negatives, 0, positives, and decimal numbers (floating point) which is the equivalent of declaring a double, float, or single.

‘String’ This data type will display characters of text. An example of this would be “text,”

‘Array’ An array data type is more than one item in a variable. This means that could store a list of bowling scores.(1,6,2,4,2).

‘Boolean’ A Boolean data type traditionally takes up one bit of data because it only stores a 0, or a 1 which is interpreted to true or false.

‘Custom object’ This can be whatever you want and is declared as a variable type because it is stored in memory much like a variable. The difference is that this can store multiple variable types.

Tags: , , , ,

Introduction to AS3: Creating the package.

by: Caleb Jonasson - February 7th, 2010   Filed under: AS3, Introduction Series Add Comment

Setting up a package for your flash traditionally means that you will be going in the direction of object oriented programming. This means that you will be able to create different class files and use them as objects.

The simplest way to look at this is using any general object such as a city. In order for the city to be properly run we will need an object for power grid, roads, and sewer system. These sub objects can be split up into their own classes and used in the main movie clip by setting up a package.

The basic package layout looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12

package {
import flash.display.MovieClip;
 
public class Main extends MovieClip {
 
public function Main(){
trace("If this appears in the output you have done well.");
} // end of main function
 
} // end of main
 
} //end of package

Tip: When creating a swf object you need to make sure that you do not mix together AS1 and AS2 with action script 3. This is unlikely to happen if you are learning from scratch or teaching yourself but if you need to update a previous project then you will need to make sure you are not mixing levels of actionscript. This is caused by the way they are put together in the creation of the swf file.

Inside of this file you can add all of your movie clips and declare them as variables. You can also import all of the needed files along with create the code required to do what you would like to do.

The last thing that is required when creating a package is the link to your movie clip. You can create this link simply by clicking on the stage, making sure it is your default document, then adding the document class name as shown below.

If everything is ok and your flash program runs you will have a line of confirmation in the output.

Introduction to flash AS3
Tags: , , , , ,

Introduction to flash AS3

by: Caleb Jonasson - February 7th, 2010   Filed under: AS3, Introduction Series, Projects Add Comment

This is a quick briefing before going in depth on different bits and pieces of flash AS3. I will be creating a series of brief introductions into certain aspects and components of the language along with a tutorial using said component.

All of the articles will consist of key notes and source code. These tutorials are a project in their own and will take up a fair amount of time. They will also receive their own section from the top menu and a brief updates in the projects section.

Tags: , , , ,