Copy link to clipboard
Copied
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.
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_dimm
...Copy link to clipboard
Copied
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);
}
*/
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
use the code i suggested and assign the symbol instance names i suggested.
Copy link to clipboard
Copied
I tried. Cannot get either method to work. In the first, nothing happens when I click the target. Here's the code:
for(var i=0;i<6;i++){
this["Mer_dimmer"+i].addEventListener("click",f.bind(this));
}
function f(e){
}
var _this = this;
_this.stop();
And in the second, I get a blank screen:
createjs.Tween.get(e.currentTarget).to({alpha:.1}, 1000);
}
Copy link to clipboard
Copied
what are the instance names of your symbols?
Copy link to clipboard
Copied
Just one that I'm trying this on so far: Mer_dimmer
Copy link to clipboard
Copied
again, add all 6 and assign appropriate names and use the code only option.
symbol_0, symbol_1,..,symbol_5
Copy link to clipboard
Copied
Like this? And then repeat it for the other five?
for(var i=0;i<6;i++){
this["Mer_dimmer"+i].addEventListener("click",f.bind(this));
}
function f(e){
createjs.Tween.get(e.currentTarget).to({alpha:.1}, 1000);
}
Copy link to clipboard
Copied
yes, and that's all the code needed for all 6 movieclips that you want to fade.
Copy link to clipboard
Copied
Nothing happens. The symbols don't need to be buttons, right? They are just movie clips. But I don't get a finger symbol when I hover of them, and nothing happens if I click.
Copy link to clipboard
Copied
do the movieclips have instance names (in the properties panel)?
Copy link to clipboard
Copied
Yes. That is what is referenced here:
for(var i=0;i<6;i++){
this["Mer_dimmer"+i].addEventListener("click",f.bind(this));
}
function f(e){
createjs.Tween.get(e.currentTarget).to({alpha:.1}, 1000);
}
Copy link to clipboard
Copied
what are the instance names?
Copy link to clipboard
Copied
Mer_dimmer in the code above.
Copy link to clipboard
Copied
you have 6 movieclips. they must have different instance names. what are they?
Copy link to clipboard
Copied
Mer_dimmer
Miata_dimmer
Cam_dimmer
BM_dimmer
Jag_dimmer
Lex_dimmer
Copy link to clipboard
Copied
you failed to follow my naming suggestion so your code will be a little more complicated:
this.dimmerA=[list your mc names here with a comma delimiter];
for(var i=0;i<6;i++){
this[this.dimmerA[i]].addEventListener("click",f.bind(this));
}
function f(e){
//same as before
}
Copy link to clipboard
Copied
Thanks. I didn't understand you were suggesting a naming convention. I'll give this a go.
Copy link to clipboard
Copied
At least the symbols are showing on the stage, but still not getting the fading behavior.
this.dimmerA=[Mer_dimmer, Jag_dimmer, Cam_dimmer, Mia_dimmer, BM_dimmer, 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);
}
Copy link to clipboard
Copied
replace
this.dimmerA=[Mer_dimmer, Jag_dimmer, Cam_dimmer, Mia_dimmer, BM_dimmer, Lex_dimmer];
with
this.dimmerA=["Mer_dimmer", "Jag_dimmer", "Cam_dimmer", "Mia_dimmer", "BM_dimmer", "Lex_dimmer"];
and in the future use instance names amenable to shortcuts like for-loops.
Copy link to clipboard
Copied
Thanks. Still nothing.
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);
}
Copy link to clipboard
Copied
re-read my message, or if you use the version with the array references (instead of strings), edit the for-loop:
for(var i=0;i<6;i++){
this.dimmerA[i].addEventListener("click",f.bind(this));
}
Copy link to clipboard
Copied
Copy link to clipboard
Copied
I've reread several times, but my newbie eyes aren't getting it. I'll try with the sample you sent. Thank you.