Skip to main content
D
DavidacrossAmerica
Inspiring
March 30, 2021
Answered

Timeline control (I think)

  • March 30, 2021
  • 1 reply
  • 2650 views

I have six symbols on the stage. When a user clicks each, I want it to lose most of its opacity. As a beginner, it seems like there are many ways to acheive this, but I'm not sure which way to go, and so far, haven't been able to do it. Do you get the transparency effect on separate timelines for each object or on the main timeline, or is it easier through js? Some basic setup advice would be appreciated.

This topic has been closed for replies.
Correct answer kglad

In your example, there is one symbol with six different instances. In mine, there are six different symbols (because they are all different images converted to symbols). Is that why this isn't working for me?


no, that's irrelevant.

 

use:

 

this.dimmerA=["Mer_dimmer", "Jag_dimmer", "Cam_dimmer", "Mia_dimmer", "BM_dimmer", "Lex_dimmer"];

for(var i=0;i<6;i++){
this[this.dimmerA[i]].addEventListener("click",f.bind(this));
}
function f(e){
createjs.Tween.get(e.currentTarget).to({alpha:.1}, 1000);

}

-----------------------------------------------------------------------------------------------------------------------------------------

or use:

 

 

 

this.dimmerA=[this.Mer_dimmer, this.Jag_dimmer, this.Cam_dimmer, this.Mia_dimmer, this.BM_dimmer, this.Lex_dimmer];

for(var i=0;i<6;i++){
this.dimmerA[i].addEventListener("click",f.bind(this));
}
function f(e){
createjs.Tween.get(e.currentTarget).to({alpha:.1}, 1000);

}

 

-----------------------------------------------------------------------------------------------------------------------------------------

 

or rename your dimmer instance as suggested in the first message and use the code from the first message

 

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 30, 2021

you have to use scripting.  you could do part of with a timeline or all code.

 

first, you have to use code to detect a click and do something about it.  for example, if you have symbol_0, symbol_1,..,symbol_5 on stage:

 

for(var i=0;i<6;i++){

this["symbol_"+i].addEventListener("click",f.bind(this));

}

function f(e){

/* if each symbol were a movieclip that were timeline faded with a this.stop() on the last frame

e.currentTarget.play()

*/

/* if you were to use all code and no timeline fade

createjs.Tween.get(e.currentTarget).to({alpha:.1}, 1000);
}

*/

}

D
DavidacrossAmericaAuthor
Inspiring
March 30, 2021

Thanks kglad. I didn't quite follow all that, so I looked at code snippets, and managed to get what I want with this (with an exception below).

var Box_dim_FadeOutCbk = fl_FadeSymbolOut.bind(this);
this.addEventListener('click', Box_dim_FadeOutCbk);
this.Box_dim.alpha = 1;

function fl_FadeSymbolOut()
{
this.Lexus_dim.alpha -= 0.7;
if(this.Lexus_dim.alpha <= 0)
{
this.removeEventListener('tick', Box_dim_FadeOutCbk);
}
}

I need two adjustments, however. First, if you click the object a second time, it completly disappears. So I need this to happen just once so that you can only make it dim once.. And second, I need to reverse it if clicked a second time. In other words, clicking it after dimming it restores it to full alpha. I tried the "fade in movie clip" snippet but cannot get the two to work together.

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 30, 2021

use the code i suggested and assign the symbol instance names i suggested.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices