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

Create a chronological timeline

New Here ,
Oct 20, 2022 Oct 20, 2022

Copy link to clipboard

Copied

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

TOPICS
ActionScript , How to , Performance , Timeline

Views

86

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 ,
Oct 20, 2022 Oct 20, 2022

Copy link to clipboard

Copied

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

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 ,
Oct 20, 2022 Oct 20, 2022

Copy link to clipboard

Copied

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

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 ,
Oct 20, 2022 Oct 20, 2022

Copy link to clipboard

Copied

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

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 ,
Oct 20, 2022 Oct 20, 2022

Copy link to clipboard

Copied

Thank you for your help.

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 ,
Oct 20, 2022 Oct 20, 2022

Copy link to clipboard

Copied

LATEST

you're welcome.  if you're in need of help as you get started (or at any point), just ask.

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