Count down timer to allow a button to become clickable

[Jasi04]

Hi there,

I'm trying to create a Xmas Advent calendar that will allow a user to click on a button to reveal a product but only on that day.  Once clicked it can stay open indefinitely.  For example Day 1 would be clickable and reveal a product discount but subsequent buttons ( eg Day  2, Day 3, Day 4 etc) wouldn't be clickable until the day that that button is allowed to be clicked (if that makes sense).  Would a count down timer be best to achieve something like this ie  a timer to calcuatate 24 hours after which time a trigger would activate the next sequential button (eg Day 2) to be clickabe?  Any suggestions or help would be greatly appreciated.

[kglad]

something checking the date would be better if that's what you want to check.

[Jasi04]

that would be better but is there an action script capable of this or do I need to go a different direction?

[kglad]

if you trust the user's system clock, you can use:

var d = new Date();  // current date/time per local system clock

/*

getFullYear()	Get year as a four digit number (yyyy)
getMonth()	Get month as a number (0-11)
getDate()	Get day as a number (1-31)
getDay()	Get weekday as a number (0-6)
getHours()	Get hour (0-23)
getMinutes()	Get minute (0-59)
getSeconds()	Get second (0-59)
getMilliseconds()	Get millisecond (0-999)
getTime()	Get time (milliseconds since January 1, 1970)

*/

[Jasi04]

Thank you kindly for that.  In your opinion, would you say that the functionality of what I've described for the Advent calendar complex as my coding skills are more on the basic side?

[kglad]

well, it's not easy, but it is quick so you can get lots of help here. eg,

checkDateF();
var checkDateI = setInterval(checkDateF,3600000); // checking once per hour in case someone has their browser open and your site is loaded for hours..

function checkDateF(){
var date = new Date();
if(date.getMonth()==10 && date.getDate==22){
// do whatever it's november, 22
} else if(date.getMonth()==11 && date.getDate==24){
// it's christmas eve, do whatever
} else if(date.getMonth()==11 && date.getDate==25){
// it's christmas day, do whatever
}
//etc
}

[Nicktendo28]

Stick with kglad he is very knowledgeable when it comes to coding in Animate. 

[Jasi04]

OK.  Thank you.

[Jasi04]

Hi kglad.  Thank you very much for that. I get the logic of the code but I'm still not sure how to integrate the code I've used for the buttons with the code above.   The code I've used makes a button disappear, once clicked, to reveal an object which is on a separate layer directly underneath the button.  I've attached a screen recording as well to help explain what I mean.

Following is the code used for the buttons:-

var _this = this;
_this.Day1_btn.on('click', function(){
_this.Day1_btn.visible = false;
});

var _this = this;
_this.Day2_btn.on('click', function(){
_this.Day2_btn.visible = false;
});

var _this = this;
_this.Day3_btn.on('click', function(){
_this.Day3_btn.visible = false;
});

[kglad]

how's that related to a date/timing?

eg, does the picture that appears each button vary depending on the date?

[Jasi04]

The script and example video I sent doesn't relate to the date/timing only the functionality of the button itself (to show how I'd like the buttons to work) ie when the button is clicked the object will be revealed and the other buttons (ie Day2_btn & Day3_btn) will only become active according to the date relative of Day1_btn.  For example if Day1_btn is set to be the 16th Nov,  Day2_btn won't be clickable until the 17th Nov and Day3_btn won't be clickable until the 18th Nov.  So to clarify, when you say // do whatever it's november, 22 (22 Nov being the example) what code do I need to insert here to satisfy the button action as described above?  Sorry if I'm missing the point but my coding skills are on the basic side.

[RvdT · Accepted solution]

Day1_btn.mouseEnabled = false;
Day2_btn.mouseEnabled = false;
Day3_btn.mouseEnabled = false;

image1.visible = false;
image2.visible = false;
image3.visible = false;

// checking once per hour in case someone has their browser open and your site is loaded for hours.
var checkDateI = setInterval(checkDateF,3600000); 

function checkDateF(){
	var date = new Date();
	if(date.getMonth()==10 && date.getDate()==15){
	trace("15");			
		Day1_btn.mouseEnabled = true;
	} else if(date.getMonth()==10 && date.getDate()==15){
		Day2_btn.mouseEnabled = true;
	} else if(date.getMonth()==10 && date.getDate()==15){
		Day3_btn.mouseEnabled = true;
	}
}

checkDateF();

Day1_btn.addEventListener(MouseEvent.CLICK, fn1);

function fn1(event:MouseEvent){
	trace("hi1");	
	Day1_btn.visible = false;
	image1.visible = true;
}

Day2_btn.addEventListener(MouseEvent.CLICK, fn2);

function fn2(event:MouseEvent){
	trace("hi2");	
	Day2_btn.visible = false;
	image2.visible = true;
}

Day3_btn.addEventListener(MouseEvent.CLICK, fn3);

function fn3(event:MouseEvent){
	Day3_btn.visible = false;
	image3.visible = true;
}

Add 3 images to your stage and name them image1, image2, image3.

Maybe not the best way to write AS3, but it works.

Change the date of the functions. They are now set to today.

November = 10

December = 11

[Jasi04]

Hi Rvdt, thank you for your help.  I tried the code but the button images don't seem to be showing?  I copied the code directly from your post and saved the images as graphics, renaming them as you suggested.   I also tried changing the 'true/false' options for the buttons that didn't seem to make any difference.  Any suggestions?

[RvdT]

Hi Jasi04,

Having 3 buttons/symbols with instance names 'Day1_btn', etc and 3 images/symbols with instance names image1, etc should be enough.

Properties > Object > Instance name

Only thing you need to change is the date.

I would like to share the file but cannot upload the fla:
"The attachment's advent calendar.fla content type (application/octet-stream) does not match its file extension and has been removed."

[Jasi04]

Hi Rvdt,

Thanks for your reply. Following is a link to my file.  Hopefully you an access it OK?  Xmas Advent Calendar 

[RvdT]

Hi Jasi04,

If i understand correctly, you want to have html5 canvas output.

The earlier suggested script only works as ActionScript 3.

I'm also new to html5/canvas. So i can't help you much on that.

But the script works now. See script and download link below.

Advent Calendar_HTML5 Canvas v2.fla 

var _this = this;
_this.image1.visible = false;
_this.image2.visible = false;
_this.image3.visible = false;

_this.Day1_btn.mouseEnabled = false;
_this.Day2_btn.mouseEnabled = false;
_this.Day3_btn.mouseEnabled = false;

var checkDateI = setInterval(checkDateF,3600000); 

function checkDateF(){
	alert("hi");
	var date = new Date();
	if(date.getMonth()==10 && date.getDate()==18){
		alert("november 18");
		_this.Day1_btn.mouseEnabled = true;
	} else if(date.getMonth()==10 && date.getDate()==19){
		alert("november 19");
		_this.Day2_btn.mouseEnabled = true;
	} else if(date.getMonth()==11 && date.getDate()==20){
		alert("december 20");
		_this.Day3_btn.mouseEnabled = true;
	}
}

checkDateF();


_this.Day1_btn.on('click', function(){
	alert("day1");
	_this.Day1_btn.visible = false;
	_this.image1.visible = true;
	}
)

_this.Day2_btn.on('click', function(){
	alert("day2");
	_this.Day2_btn.visible = false;
	_this.image2.visible = true;
	}
)

_this.Day3_btn.on('click', function(){
	alert("day3");
	_this.Day3_btn.visible = false;
	_this.image3.visible = true;
	}
)

The alerts are for testing purposes. You can delete them.

KR RvdT

[kglad]

@Jasi04 

below you advent_calendar with the first button (only) fixed (though i didn't know what picture is supposed to be revealed).  you can fix that by editing Day1_mc.

the rest of the buttons should be converted to movieclips and done the same way.

https://www.kglad.com/Files/forums/cal/ad_cal.html

https://www.kglad.com/Files/forums/cal/AdventCalendar_v4.fla

[Jasi04]

Hi kglad,

Thank you kindly for modifying the button code.  It's very impressive coding and certainly way beyond my capabilites! I'll update the other buttons accordingly and attempt to combine the button coding with the original date checker coding you suggested earlier on.  Thank again. 🙂

[kglad]

you're welcome.

you only need to convert each button to a movieclip just like i did with the first one.  actually, those buttons are so messed-up i found it easier to just create a new movieclip and copy the up, over and down frames.  

you'll find it easiest to duplicate that movieclip and then just replace the on-stage stuff for the up, over, down and click frames.

then replace the two remaining on-stage buttons with those movieclips and assign them instance names (eg, d2 and d3).

then the only code you need to add is below:

this.d1.addEventListener("click",clickFF);
this.d1.addEventListener("mouseover",overFF);
this.d1.addEventListener("mouseout",upFF);
this.d1.addEventListener("mousedown",downFF);

add:

this.d2.addEventListener("click",clickFF);
this.d2.addEventListener("mouseover",overFF);
this.d2.addEventListener("mouseout",upFF);
this.d2.addEventListener("mousedown",downFF);

this.d3.addEventListener("click",clickFF);
this.d3.addEventListener("mouseover",overFF);
this.d3.addEventListener("mouseout",upFF);
this.d3.addEventListener("mousedown",downFF);

no code needs to be changed and no code needs to be removed.  just add the listeners for the two movieclips.

[Jasi04]

Thanks kglad but I don't understand how it checks for the day / month that allows a button to become active?  I do see however the following bit of code - stage.enableMouseOver(10);  - where I presume (10) is the month of November or have I misunderstood??  Again please excuse my basic level of understanding and scripting capabilities.

[kglad]

nothing about dates is included because you never explained what you wanted.

so, what exactly do you want?

[Jasi04]

Hi kglad,

Sorry for any confusion. When I first posted to the community I was trying to create buttons that are date activated.  

You came up with a good idea with the following script:-

checkDateF();
var checkDateI = setInterval(checkDateF,3600000); // checking once per hour in case someone has their browser open and your site is loaded for hours..

function checkDateF(){
var date = new Date();
if(date.getMonth()==10 && date.getDate==22){
// do whatever it's november, 22
} else if(date.getMonth()==11 && date.getDate==24){
// it's christmas eve, do whatever
} else if(date.getMonth()==11 && date.getDate==25){
// it's christmas day, do whatever
}
//etc
}

The part that I wasn't sure about was how to integrate the button code with the lines that were commented, for example, // do whatever it's november, 22.   When I tried to integrate my original button code (before you came up with your brilliant updated button code) it didn'twork.  That is what I was getting stuck on.  The idea is that the button can only become active based on a date.  Alternatively it could be a countdown scenario where each buttons becomes active after 24 hours but I don't now how complicated or functional this is.

Thank you.

[kglad]

and i'm not sure what you want.  without some explanation users will be confused to find non-functioning buttons, but if that's what you want, i'll encode that.

also, even if there is a. explanation, it's customary to apply an alpha (~.3) to buttons that are disabled.

[Jasi04]

Perhaps there's a totally differnt way to do this and I'm approaching this from the wrong angle.  The objective is to have an advent calendar that when a user clicks on the button for that day, it reveals an object (for a discounted price).  There would be 10 buttons altogether but they wouldn't be clickable until the relevant day. eg Dec 1 = Day 1 button, Dec 2 = Day 2 button etc.

[RvdT]

Hi Jasi,

This is what i've come up with.

fla v5

Can't help you with kglad's code. 

Good luck