Flash As3 Kalender bukan digital : Aneh yah judulnya ,.. abis gak tau harus nulis judul apa. yang jelas tutorial kalender yang kali ini bukan seperti tutorial kalender yang biasanya,karna biasanya kita membuat kalender terbuat dari digital tapi untuk kali ini tidakuntuk lebih jelas klik tombol demo untuk lihat demonya
Hal yang anda butuhkan :
- Software adobe flash action scripth 3 (minimal Flash Cs 4)
- cuma itu aja soalnya disini kita tidak perlu menggambar hanya menggunakan action scripth murni.
copy kan scripth berikut di frame pertama
/* VARIABLES THAT HOLD THE DATE */
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 currentMonth:Number;
var currentYear:Number;
var firstDayOfMonth:Number;// variable that holds the position of first day in current month
var dayHolder:Sprite = new Sprite();
var monthsHolder:Sprite = new Sprite();
var yearsHolder:Sprite = new Sprite();
var calendarNumberHolders:Sprite = new Sprite();
var borderHolder:Sprite = new Sprite();
/*VARIABLES THAT HOLD VALUES FOR CALENDAR PROPERTIES LIKE SIZE AND COLORS */
var shapeButtonWidth:int = 35; // size of day holders
var shapeButtonHeight:int = 35;
var marginBetweenButtons:int = 2; // margin between days
var calendarBackgroundColor:uint = 0x120F13; // color of calendar background
var calendarNumberHolderColor:uint = 0x0A7E21; // color of day holders
var calendarNumberTextColor:uint = 0xEAEAEA; // color of text on days and months
var dayHighlightBorderColor:uint = 0xDAED23; // color of border around the current day
var forwardButtonSize:int = 15; // size of forward and backward button
var forwardButtonColor:uint = 0xEAEAEA; // color of forward and backward buttons
var forwardButtonHolder:Sprite = new Sprite();
var listofButtonHolder:Array = new Array();
/*ARRAY THAT HOLDS ALL THE MONTHS - CAN BE USED FOR TRANSLATION */
var listOfMonths:Array = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
/* HERE WE GET THE STARTING DATE / CURRENT DATE */
var nowDate:Date = new Date();//get current date
days = nowDate.getDate() ;//get current day
month = nowDate.getMonth() ;//get current month
year = nowDate.getFullYear() ;//get current year
currentYear = nowDate.getFullYear() ;//get current year for later reference
currentMonth = nowDate.getMonth() ;//get current month for later reference
var firstDay:Date = new Date(year, month, 1);
firstDayOfMonth = firstDay.getDay();
var numberOfDays:Date = new Date(year,month , 0);
daysMonth = numberOfDays.getDate();
weeks = daysMonth/7;
if (weeks > 4)//making 5 lines in some cases when month starts with the end of the week
weeks = 5;
/* MAIN FUNCTION THAT CREATES AN INSTANCE OF CALENDAR */
function createCalendar(){
for (var i:int = 1; i <= weeks; i++) { //two for loops that take care of weeks and moving to second line after the week ends
for (var j:int = 1; j <= 7 ; j++) {
daysNumber++;
if (firstDayOfMonth == 0)//setting back when week is over
firstDayOfMonth = 7;
/* DRAW CALENDAR BACKGROUND AND ADD IT TO THE STAGE */
var calendarBackground:Shape = new Shape();
calendarBackground.graphics.lineStyle();
calendarBackground.graphics.beginFill(calendarBackgroundColor,1);
calendarBackground.graphics.drawRoundRect(0,0,shapeButtonWidth * 8, shapeButtonHeight * 7,8);
calendarBackground.graphics.endFill();
calendarBackground.x = stage.stageWidth / 2 - calendarBackground.width / 2;
calendarBackground.y = stage.stageHeight / 2 - calendarBackground.height / 2;
this.addChild(calendarBackground);
setChildIndex(calendarBackground, 0);//set the background to have the lowest index
if (daysNumber <= daysMonth){
if (daysNumber >= firstDayOfMonth){
/* DRAWING SQUARE SHAPES FOR EACH DAY OF THE MONTH AND ADD IT TO THE STAGE */
var dayC:Shape = new Shape(); //variable of custom class
dayC.graphics.lineStyle();
dayC.graphics.beginFill(calendarNumberHolderColor,1);
dayC.graphics.drawRoundRect(0,0,shapeButtonWidth, shapeButtonHeight,8);
dayC.graphics.endFill();
dayHolder.addChild(dayC);
/* CREATING TEXT FIELDS FOR EACH SHAPE THAT REPRESENT NUMBERS OF DAYS */
var calendarNumbers:TextField = new TextField();
calendarNumbers.textColor = calendarNumberTextColor;//coloring the text
var myFormat:TextFormat = new TextFormat();//formating the size of font
myFormat.size = 16;
calendarNumbers.defaultTextFormat = myFormat;//applying the font format
calendarNumbers.text = String(daysNumber - firstDayOfMonth + 1);//setting the proper number of day to our text holders
calendarNumberHolders.addChild(calendarNumbers);//adding it to the sprite container
/* POSITIONING OF DAYS */
dayC.x = calendarNumbers.x = (dayC.width + marginBetweenButtons) * (j - 1) + calendarBackground.x + 12;
dayC.y = calendarNumbers.y = (dayC.height + marginBetweenButtons) * (i-1) + dayC.height/2 + calendarBackground.y - 5 + shapeButtonHeight;
if (daysNumber < 11)
calendarNumbers.x = dayC.x + 11;
else
calendarNumbers.x = dayC.x + 7;
calendarNumbers.y = dayC.y + 5;
/* DRAWING A BORDER AROUND THE CURRENT DAY */
if (calendarNumbers.text == String(days) && currentMonth == month && currentYear == year){
var borderDay:Shape = new Shape();//here we draw border around current day
borderDay.graphics.lineStyle(4,dayHighlightBorderColor);//width and color of border around current day
borderDay.graphics.drawRoundRect(dayC.x+1, dayC.y+1, shapeButtonWidth - 3,shapeButtonWidth - 3,8);
borderDay.graphics.endFill();
borderHolder.addChild(borderDay);//adding border to stage
}
}
}
}
}
/* CREATING TEXT FIELD FOR MONTHS */
var nameOfTheMonth:TextField = new TextField();//create text field for calendar month
nameOfTheMonth.x = calendarNumbers.x - 20;
nameOfTheMonth.y = 15;
nameOfTheMonth.textColor = calendarNumberTextColor;//color of months text
var myFormatMonths:TextFormat = new TextFormat();//setting the size of the text
myFormatMonths.size = 22;
nameOfTheMonth.defaultTextFormat = myFormatMonths;//applying the font format
nameOfTheMonth.text = String(listOfMonths[month]);//add the text from the array
monthsHolder.addChild(nameOfTheMonth);
/* CREATING TEXT FIELD FOR YEARS */
var nameOfTheYear:TextField = new TextField();//create text field for calendar month
nameOfTheYear.x = calendarNumbers.x + nameOfTheMonth.width - 20;
nameOfTheYear.y = 15;
nameOfTheYear.textColor = calendarNumberTextColor;//color of year text
nameOfTheYear.defaultTextFormat = myFormatMonths;//applying the font format
nameOfTheYear.text = String(year);//add the text from the array
yearsHolder.addChild(nameOfTheYear);
/* DRAWING A TRIANGLE FOR OUR FORWARD BUTTON */
var buttonForward:MovieClip = new MovieClip();
buttonForward.graphics.beginFill(forwardButtonColor);
buttonForward.graphics.moveTo(forwardButtonSize/2, 5);
buttonForward.graphics.lineTo(forwardButtonSize, forwardButtonSize+5);
buttonForward.graphics.lineTo(0, forwardButtonSize+5);
buttonForward.graphics.lineTo(forwardButtonSize/2, 5);
buttonForward.rotation = 90;
buttonForward.x = calendarBackground.x + calendarBackground.width;
buttonForward.y = forwardButtonSize*1.5;
this.addChild(buttonForward)
buttonForward.buttonMode = true;
buttonForward.addEventListener(MouseEvent.CLICK, ForwardMonth);
/* DRAWING A TRIANGLE FOR OUR BACKWARD BUTTON */
var buttonBackward:MovieClip = new MovieClip();
buttonBackward.graphics.beginFill(forwardButtonColor);
buttonBackward.graphics.moveTo(forwardButtonSize/2, 5);
buttonBackward.graphics.lineTo(forwardButtonSize, forwardButtonSize+5);
buttonBackward.graphics.lineTo(0, forwardButtonSize+5);
buttonBackward.graphics.lineTo(forwardButtonSize/2, 5);
buttonBackward.rotation = -90;
buttonBackward.x = calendarBackground.x;
buttonBackward.y = forwardButtonSize*2.5;
this.addChild(buttonBackward);
buttonBackward.buttonMode = true;
buttonBackward.addEventListener(MouseEvent.CLICK, BackwardMonth);
}
/* FUNCTION THAT FIRST EMPTIES ALL THE SPRITES THEN ADDS ONE MONTH AND CALLS CREATE CALENDAR AGAIN TO DRAW THE NEXT MONTH */
function ForwardMonth(evt:MouseEvent):void{
/* WE FIRST HAVE TO REMOVE ALL CHILDREN FROM OUR CONTAINERS SO WE CAN START WITH FRESH CONTAINERS FOR EACH MONTH */
for (var i:uint = dayHolder.numChildren; i > 0; i--){//removing all children
dayHolder.removeChildAt(i-1);
}
for (var j:uint = calendarNumberHolders.numChildren; j > 0; j--){//removing all children
calendarNumberHolders.removeChildAt(j-1);
}
for (var k:uint = monthsHolder.numChildren; k > 0; k--){//removing all children
monthsHolder.removeChildAt(k-1);
}
for (var l:uint = borderHolder.numChildren; l > 0; l--){//removing all children
borderHolder.removeChildAt(l-1);
}
for (var m:uint = yearsHolder.numChildren; m > 0; m--){//removing all children
yearsHolder.removeChildAt(m-1);
}
month++;//moving to next month
if (month == 12){//resetting the months on year turn
year++;
month = 0;
}
var firstDay:Date = new Date(year, month, 1);
firstDayOfMonth = firstDay.getDay()
daysNumber = 0;
createCalendar();//calling calendar draw function again
}
/* FUNCTION THAT FIRST EMPTIES ALL THE SPRITES THEN SUBSTRACTS ONE MONTH AND CALLS CREATE CALENDAR AGAIN TO DRAW THE PREVIOUS MONTH */
function BackwardMonth(evt:MouseEvent):void{
/* WE FIRST HAVE TO REMOVE ALL CHILDREN FROM OUR CONTAINERS SO WE CAN START WITH FRESH CONTAINERS FOR EACH MONTH */
for (var i:uint = dayHolder.numChildren; i > 0; i--){//removing all children
dayHolder.removeChildAt(i-1);
}
for (var j:uint = calendarNumberHolders.numChildren; j > 0; j--){//removing all children
calendarNumberHolders.removeChildAt(j-1);
}
for (var k:uint = monthsHolder.numChildren; k > 0; k--){//removing all children
monthsHolder.removeChildAt(k-1);
}
for (var m:uint = yearsHolder.numChildren; m > 0; m--){//removing all children
yearsHolder.removeChildAt(m-1);
}
for (var l:uint = borderHolder.numChildren; l > 0; l--){//removing all children
borderHolder.removeChildAt(l-1);
}
if (month == 0){//resetting the months on year turn
year--;
month = 12;
}
month--;//moving to previous month
var firstDay:Date = new Date(year, month, 1);
firstDayOfMonth = firstDay.getDay()
daysNumber = 0;
createCalendar();//calling calendar draw function again
}
/* ADDING OF ALL SPRITE CONTAINERS TO THE STAGE */
addChild(monthsHolder);
addChild(yearsHolder);
addChild(dayHolder);
addChild(calendarNumberHolders);
addChild(borderHolder);
/* CALLING OUR MAIN FUNCTION FOR THE FIRST TIME TO CREATE CURRENT MONTH */
createCalendar();
itu sedikit tutorial tentang Flash As3 Kalender bukan digital semoga bisa membantu jika masih ada pertanyaan dan yang kurang dimengerti jangan ragu untuk bertanya
1. Download Source Code disini
0 komentar:
Post a Comment