Skip to main content
Participant
October 20, 2022
Question

Create a chronological timeline

  • October 20, 2022
  • 1 reply
  • 228 views

Hey.
I want to create an animated chronological timeline on my website. I'm making a site about a band and wants to have a chronological timeline with the dates of releases, new members, live perfomance, etc. Anyone that has some tips, advices, and/or links to tutorials that can help me?

//Thanks in advance

This topic has been closed for replies.

1 reply

JoãoCésar17023019
Community Expert
Community Expert
October 20, 2022

Hi.

 

My suggestion would be for you to add prev/next buttons for desktop and a drag behavior for mobile. And both should have a pagination.

 

But we need to know exactly how you intend to implement this timeline. Can you tell us?

 

Regards,

JC

Participant
October 20, 2022

a line with years / months / dates, on a date there will be a headline /image that you can click to get more information

kglad
Community Expert
Community Expert
October 20, 2022

create your timeline with dates and make each date a movieclip. 

 

on each date's inital frame, just put what you want displayed by default.  add a this.stop() to that initial frame's actions panel.  create another frame (labeled eg, "clicked" that shows what you want displayed if that date is clicked.  (before spending a lot of time on the "clicked" frame, check what it looks like by taking the steps below.  you'll most likely find you want a background for the clicked frame and/or you want to reposition the "clicked" frame contents.)

 

on the main timeline put each date movieclip on the timeline where you want it positioned, and assign it an instance name (eg, date_10202022).  on the main timeline actions panel use:

 

this.date_10202022.addEventListener("click", dateF.bind(this);

 

function dateF(e){

if(e.currentTarget.currentFrame==0){

e.currentTarget.gotoAndStop("clicked");

} else {

e.currentTarget.gotoAndStop(0);

}

}

 

//////////////////////

the same dateF can be used for all your date movieclips.  they all need a different instance names and they all need listener functions.

 

eg, if you had todays date 10/20/2022 and the previous 3 days date, in addition to the code above, use:

 

this.date_10192022.addEventListener("click", dateF.bind(this);

this.date_10182022.addEventListener("click", dateF.bind(this);

this.date_10172022.addEventListener("click", dateF.bind(this);