Saturday, July 3, 2010

How to create a calendar using only Actionscript 3 - Part 1

Ever wanted to learn how to create your own calendar, using only ActionScript 3? Now you can!
In this tutorial, we will cover the creation of cells of a calendar, and setting it up for work in future.

First, let's create one cell.
To do this, we will create a text field and edit it to look like a cell.

var cell:TextField = new TextField();
cell.background=true
cell.backgroundColor=0x99CCFF
cell.border=true
cell.borderColor=0x9999CC
cell.selectable=false
cell.text="1"
cell.width = cell.height = 24

addChild(cell);
cell.x=30
cell.y=30

If you test your movie now, you will see a blue square with "1" written in it.


We can create a TextFormat class and apply it to the text to make it look better:

var cellformat:TextFormat = new TextFormat();
cellformat.color=0x012943
cellformat.size=16
cellformat.align="right"

var cell:TextField = new TextField();
cell.background=true
cell.backgroundColor=0x99CCFF
cell.border=true
cell.borderColor=0x9999CC
cell.selectable=false
cell.text="1"
cell.width = cell.height = 24
cell.setTextFormat(cellformat)

addChild(cell);
cell.x=30
cell.y=30

Alright, now we have a nicely looking cell with a number in it.


Now we will need to make 6 rows of 7 cells like this, and add each of the cell into an array. We will use a loop:

var cellformat:TextFormat = new TextFormat();
cellformat.color=0x012943
cellformat.size=16
cellformat.align="right"

var i:uint
var allcells:Array = new Array();

for (i=0; i<42; i++){
 
var cell:TextField = new TextField();
cell.background=true
cell.backgroundColor=0x99CCFF
cell.border=true
cell.borderColor=0x9999CC
cell.selectable=false
cell.text=(i+1).toString();
cell.width = cell.height = 24
cell.setTextFormat(cellformat)

addChild(cell);
cell.x=10+(30*(i-(Math.floor(i/7)*7)))
cell.y=40+(30*Math.floor(i/7))

allcells.push(cell);
}



As you can see, we created a loop for 42 cells. First we apply all the format to it, and then (using addChild) we add it to the stage. The placement is the trickiest part - the cell's coordinates on the x axis should be 30 pixels more than the previous cell only if it is not a new row. How do we check whether it's a new row?

We use Math.floor(); to round the result of i/7, this way we will know how many full rows we already have. By multiplying it by 7, we will see how many cells are in full rows, and by doing i-(Math.floor(i/7)*7) we will find which spot in the row does the current cell take. We multiply it by 30, add 10 (the starting position) and we're done.

It is more simple with the y axis, you just add 40 (the starting position) to the number of full rows multiplied by 30.

Now that we have a working table, and each cell is added into a global array, we need to add what every calendar needs - the week days. This won't be too hard, we just create a new loop for them and we will also have to create a new format, because we don't want the text to be in a cell.
var cellformat:TextFormat = new TextFormat();
cellformat.color=0x012943
cellformat.size=16
cellformat.align="right"

var cformat:TextFormat = new TextFormat();
cformat.color=0x000000
cformat.size=14
cformat.align="center"

var weekdays:Array = new Array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");

var u:uint
// the first loop to add week day names

for (u=0; u<7; u++){
 
var c:TextField = new TextField();
c.selectable=false
c.width=30
c.text=weekdays[u]
c.setTextFormat(cformat)

addChild(c);
c.x=10+(30*u)
c.y=10

 }

var i:uint
var allcells:Array = new Array();
// the second loop to create cells

for (i=0; i<42; i++){
 
var cell:TextField = new TextField();
cell.background=true
cell.backgroundColor=0x99CCFF
cell.border=true
cell.borderColor=0x9999CC
cell.selectable=false
cell.text=(i+1).toString();
cell.width = cell.height = 24
cell.setTextFormat(cellformat)

addChild(cell);
cell.x=10+(30*(i-(Math.floor(i/7)*7)))
cell.y=40+(30*Math.floor(i/7))

allcells.push(cell);
}

There we go, we created the base for our calendar.


Next time, we will learn how to add functionality to it!

Related:

How to create a calendar using only Actionscript 3 - part 2
How to create a calendar using only Actionscript 3 - part 3
How to create a calendar using only Actionscript 3 - part 4
How to create a calendar using only Actionscript 3 - part 5
How to create a calendar using only Actionscript 3 - part 6
How to create a calendar using only Actionscript 3 - part 7
How to create a calendar using only Actionscript 3 - part 8
How to create a calendar using only Actionscript 3 - part 9
How to create a calendar using only Actionscript 3 - part 10
How to create a calendar using only Actionscript 3 - part 11
How to create a calendar using only Actionscript 3 - part 12

No comments:

Post a Comment