JOIN OVER 31,000HAPPY CUSTOMERS AND GET ACCESS TO OUR FULL COLLECTION OF SENSATIONAL THEMES - 33 FOR THE PRICE OF ONE!

Flash AS3 Tutorial: Simple Calendar

Our WordPress minimalistic Calendar has been very well received so we decided to share some of the knowledge behind it. This Flash Calendar Series will consist of three editions. We will first create a simple calendar that will highlight the current day. Second edition of our tutorial will then implement scrolling through months and years (forward and backward) and in final edition we will add a simple event on certain days. It will give you an opportunity to build a basic calendar with a lot of possibilities for further development.

STEP 1: SETTING VARIABLES

Since code is not as simple as in most previous tutorials I would recommend that you first download the source files and then follow the tutorial. We will first define all the variables that we are going to use:

var daysMonth:int; //variable that holds a value of all days in the current month
var daysNumber:int; //counter for days
var weeks:Number;//variables that hold weeks of the date
var days:Number;// variables that hold current day
var year:Number;// variables that hold current year
var month:Number;//variables that hold current month
var firstDayOfMonth:Number; // variable that holds the position of first day in current month

Variables weeks, days, year and month simply hold the value of current date. We will use those values to determine which day to highlight as the current one. Variable daysMonth holds a number of all days in current month (for example 30 for November). FirstDayOfMonth is a variable that sets the position of first day in certain month. For example november starts with Tuesday and that means that position of first day in november is set to number two. In december that number will be four.

Now add three variables that will define the size of the number holders,margin between them and color of the Flash calendar:

If we define date class without any parameter it will always return the current date. But we also have to get the position of first day and how many days are in the current month. We can accomplish that by using date class with parameters year, month, day,etc. In our case we use parameters year and month (values were assigned in previous step) and use them to get values for firstDayOfMonth and daysMonth.

We now have to calculate how many weeks there is in a specific month:

weeks = daysMonth/7;
if (weeks > 4)//making 5 lines in some cases when month starts with the end of the week
weeks = 5;

STEP 3: BUILD THE CALENDAR

We can now start building our calendar. Two for loops will be needed (one for columns and one for rows):

for (var i:int = 1; i <= weeks; i++) {
for (var j:int = 1; j <= 7 ; j++) {
[/cc]
First for loop will scroll through weeks and the second one will make a break every seven days (each week).
Now add the counter that will increase by one for each day:
[cc lang="actionscript3"]
daysNumber++;
[/cc]
In our WordPress Calendar we used premade graphic assets for background, text holders,events, etc. In our example we will draw shapes with actionscript. It will not look as cool but on the other hand that means our flashcalendar is currently only 2kb long. We will first draw the background and position it on the center of the stage:
[cc lang="actionscript3"]
var calendarBackground:Shape = new Shape();
calendarBackground.graphics.lineStyle();
calendarBackground.graphics.beginFill(calendarBackgroundColor,1);
calendarBackground.graphics.drawRoundRect(0,0,shapeButtonWidth * 8, shapeButtonHeight * 6,8);
calendarBackground.graphics.endFill();

this.addChild(calendarBackground);
setChildIndex(calendarBackground, 0);//set the background to have the lowest index

Many aspects can be changed like color of the fill, width, height and roundness. Play with settings a bit to get the desired design.

It is now finally time to actually implement days of the month of our calendar. We will need two if sentences that will make some limitations:

if (daysNumber <= daysMonth){
if (daysNumber >= firstDayOfMonth){

Our two for loops produce 35 days all together and we have to get rid of 5 (for november). First if sentence will eliminate last four days and the second if sentence will eliminate the first one. This values only apply for november, they will be different for other months of the calendar. What we actually achieve here is that we always list just the days of the current month positioned properly.

First line will take care of position along x axis and second one will position the numbers properly along y axis.

STEP 4: HIGHLIGHTING THE CURRENT DAY OF THE FLASH CALENDAR

We will draw a round border around the current day of the calendar. Add an if sentence that compares the current day with the text found on days. When that condition is met draw a border around that day:

We drew a border that is 4px thick and will appear as inner stroke (shapeButtonWidth – 3).

CONCLUSION

First edition of our Flash Calendar Tutorial series is at an end. We made a very basic calendar that highlights the current day. In next edition we will implement forward and backward buttons so we will be able to scroll through months and years, so stay tuned.

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.

MARKET FOR CREATIVES

OPTIN MONSTER NEWSLETTER

Our Sponsors

Popular posts

OUR NEWSLETTER

Subscribe to our newsletter to receive news, updates, freebies and new WordPress Themes releases by email. We never spam.

Enter your email address...

Premiumcoding offers premium WordPress themes for corporate and personal use. From clean and minimal, to complex and multi-functional, every one of our themes is professional, responsive and beautiful.