• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Count down timer to allow a button to become clickable

New Here ,
Nov 11, 2022 Nov 11, 2022

Copy link to clipboard

Copied

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.

TOPICS
ActionScript , Code

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Nov 15, 2022 Nov 15, 2022

 

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 && da
...

Votes

Translate

Translate
Community Expert ,
Nov 11, 2022 Nov 11, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 12, 2022 Nov 12, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 12, 2022 Nov 12, 2022

Copy link to clipboard

Copied

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)

*/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 13, 2022 Nov 13, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 13, 2022 Nov 13, 2022

Copy link to clipboard

Copied

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
}

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 13, 2022 Nov 13, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

OK.  Thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

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;
});

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

how's that related to a date/timing?

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 16, 2022 Nov 16, 2022

Copy link to clipboard

Copied

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

RvdT_0-1668587699696.png

 

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."

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 17, 2022 Nov 17, 2022

Copy link to clipboard

Copied

Hi Rvdt,

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 18, 2022 Nov 18, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2022 Nov 20, 2022

Copy link to clipboard

Copied

@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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 21, 2022 Nov 21, 2022

Copy link to clipboard

Copied

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. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 22, 2022 Nov 22, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 23, 2022 Nov 23, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

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

 

so, what exactly do you want?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 24, 2022 Nov 24, 2022

Copy link to clipboard

Copied

Hi Jasi,

 

This is what i've come up with.

fla v5

 

Can't help you with kglad's code. 

 

Good luck

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines