Thank you! I will analyze this and see if I understand how it works. This is very close to what I wanted. The only thing that is not quite right is, when you click on Illustrator it opens, but when you click on someting else the menu just closes. it should close Illustrator and open the other. I started making something similar - timeline based rather than code based, and it didn't seem to work the way I wanted it to either.
In the file I shared above - I updated the code on my side with this (I didn't update the file in the above link I previously shared, but if you replace the code in the main actions layer with the below, you'll see what I mean) :
var accordion = this.accordion_mc;
//=======================
var tab1 = accordion.tab1_head;
var tab2 = accordion.tab2_head;
var tab3 = accordion.tab3_head;
var t1Icon = tab1.icon_mc;
var t2Icon = tab2.icon_mc;
var t3Icon = tab3.icon_mc;
var tab3start = -410.45 + 11;
var tab3end = -12.75;
var tab2start = -434.6 + 11;
var tab2end = -35;
var lastDataDate = "January 31, 2020";
var content_tab1 = accordion.content_tab1_mc;
var content_tab2 = accordion.content_tab2_mc;
var content_tab3 = accordion.content_tab3_mc;
var tab1Disclaimer = accordion.content_tab1_mc.content_mc.disclaimer_txt;
tab1Disclaimer.text = "Source: federalreserve.gov; Morningstar Direct. As of " + lastDataDate;
tab3Pos = 0;//0 = up, 1=down
content_tab1.alpha = 0;
content_tab2.alpha = 0;
content_tab3.alpha = 0;
function openTab1() {
//tab 1 does not move
}
function openTab2() {
createjs.Tween.get(tab2, {
override: true
})
//.wait(1500)
.to({
y: tab2end
}, 500, createjs.Ease.quartInOut)
}
function openTab3() {
createjs.Tween.get(tab3, {
override: true
})
//.wait(1500)
.to({
y: tab3end
}, 500, createjs.Ease.quartInOut)
tab3Pos=1;
}
function closeTab2() {
createjs.Tween.get(tab2, {
override: true
})
//.wait(1500)
.to({
y: tab2start
}, 500, createjs.Ease.quartInOut)
}
function closeTab3() {
createjs.Tween.get(tab3, {
override: true
})
//.wait(1500)
.to({
y: tab3start
}, 500, createjs.Ease.quartInOut)
}
tab1.addEventListener("click", chooseTab1.bind(this));
function chooseTab1() {
openTab2();
openTab3();
createjs.Tween.get(content_tab1, {
override: true
})
//
.wait(500)
.to({
alpha: 1
}, 500, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab2, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab3, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
t1Icon.gotoAndPlay("open");
t2Icon.gotoAndStop("default");
t3Icon.gotoAndStop("default");
tab1.removeEventListener("click", chooseTab1.bind(this));
tab1.addEventListener("click", closeAll.bind(this));
//tab1.addEventListener("click", chooseTab1.bind(this));
tab2.removeEventListener("click", closeAll.bind(this));
tab3.removeEventListener("click", closeAll.bind(this));
tab2.addEventListener("click", chooseTab2.bind(this));
tab3.addEventListener("click", chooseTab3.bind(this));
}
tab2.addEventListener("click", chooseTab2.bind(this));
function chooseTab2() {
closeTab2();
openTab3();
createjs.Tween.get(content_tab1, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab2, {
override: true
})
//.wait(500)
.to({
alpha: 1
}, 500, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab3, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
t1Icon.gotoAndStop("default");
t2Icon.gotoAndPlay("open");
t3Icon.gotoAndStop("default");
tab2.removeEventListener("click", chooseTab2.bind(this));
tab2.addEventListener("click", closeAll.bind(this));
tab1.removeEventListener("click", closeAll.bind(this));
tab3.removeEventListener("click", closeAll.bind(this));
tab1.addEventListener("click", chooseTab1.bind(this));
//tab2.addEventListener("click", chooseTab2.bind(this));
tab3.addEventListener("click", chooseTab3.bind(this));
}
tab3.addEventListener("click", chooseTab3.bind(this));
function chooseTab3() {
closeTab2();
closeTab3();
createjs.Tween.get(content_tab1, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab2, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab3, {
override: true
})
//.wait(300)
.to({
alpha: 1
}, 500, createjs.Ease.quartInOut)
t1Icon.gotoAndStop("default");
t2Icon.gotoAndStop("default");
t3Icon.gotoAndPlay("open");
tab3.removeEventListener("click", chooseTab3.bind(this));
tab3.addEventListener("click", closeAll.bind(this));
tab1.removeEventListener("click", closeAll.bind(this));
tab2.removeEventListener("click", closeAll.bind(this));
tab1.addEventListener("click", chooseTab1.bind(this));
tab2.addEventListener("click", chooseTab2.bind(this));
//tab3.addEventListener("click", chooseTab3.bind(this));
}
function closeAll() {
closeTab2();
closeTab3();
tab1.addEventListener("click", chooseTab1.bind(this));
tab2.addEventListener("click", chooseTab2.bind(this));
tab3.addEventListener("click", chooseTab3.bind(this));
createjs.Tween.get(content_tab1, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab2, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
createjs.Tween.get(content_tab3, {
override: true
})
//.wait(500)
.to({
alpha: 0
}, 1, createjs.Ease.quartInOut)
t1Icon.gotoAndStop("default");
t2Icon.gotoAndStop("default");
t3Icon.gotoAndStop("default");
}
It seems to work for a little while, but then gets bogged down when you click on the buttons several times and ultimately becomes unresponsive. I'm sure I probably just have to turn something off at some point so it stops running.
All that said, I'm going to take a look at the file you shared and see if I can get that to work the way I want. Thanks for taking the time to look at this with me!!
Rich
13
Replies
AdChoices