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

Timeline control (I think)

Participant ,
Mar 30, 2021 Mar 30, 2021

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.

TOPICS
How to

Views

758

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

correct answers 1 Correct answer

Community Expert , Mar 31, 2021 Mar 31, 2021

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

...

Votes

Translate

Translate
Community Expert ,
Mar 30, 2021 Mar 30, 2021

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

*/

}

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
Participant ,
Mar 30, 2021 Mar 30, 2021

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.

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 ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

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

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
Participant ,
Mar 30, 2021 Mar 30, 2021

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

 

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 ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

what are the instance names of your symbols?

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
Participant ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

Just one that I'm trying this on so far: Mer_dimmer

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 ,
Mar 30, 2021 Mar 30, 2021

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

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
Participant ,
Mar 30, 2021 Mar 30, 2021

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

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 ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

yes, and that's all the code needed for all 6 movieclips that you want to fade.

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
Participant ,
Mar 30, 2021 Mar 30, 2021

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.

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 ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

do the movieclips have instance names (in the properties panel)?

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
Participant ,
Mar 30, 2021 Mar 30, 2021

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

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 ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

what are the instance names?

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
Participant ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

Mer_dimmer in the code above. 

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 ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

you have 6 movieclips.  they must have different instance names.  what are they?

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
Participant ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

Mer_dimmer

Miata_dimmer

Cam_dimmer

BM_dimmer

Jag_dimmer

Lex_dimmer

 

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 ,
Mar 30, 2021 Mar 30, 2021

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 

}

 

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
Participant ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

Thanks. I didn't understand you were suggesting a naming convention. I'll give this a go.

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
Participant ,
Mar 31, 2021 Mar 31, 2021

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

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 ,
Mar 31, 2021 Mar 31, 2021

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.

 

 

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
Participant ,
Mar 31, 2021 Mar 31, 2021

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

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 ,
Mar 31, 2021 Mar 31, 2021

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

 

 

 

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 ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

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
Participant ,
Mar 31, 2021 Mar 31, 2021

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.

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