Timeline control (I think)

Explorer ,
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

479

Likes

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

Adobe Community Professional , 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_...

Likes

Translate

Translate
Adobe Community Professional ,
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);
}

*/

}

Likes

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
Explorer ,
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.

Likes

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

Copy link to clipboard

Copied

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

Likes

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

 

Likes

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

Copy link to clipboard

Copied

what are the instance names of your symbols?

Likes

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

Copy link to clipboard

Copied

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

Likes

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
Adobe Community Professional ,
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

Likes

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

Likes

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
Adobe Community Professional ,
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.

Likes

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
Explorer ,
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.

Likes

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

Copy link to clipboard

Copied

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

Likes

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

Likes

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

Copy link to clipboard

Copied

what are the instance names?

Likes

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

Copy link to clipboard

Copied

Mer_dimmer in the code above. 

Likes

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

Copy link to clipboard

Copied

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

Likes

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

Copy link to clipboard

Copied

Mer_dimmer

Miata_dimmer

Cam_dimmer

BM_dimmer

Jag_dimmer

Lex_dimmer

 

Likes

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
Adobe Community Professional ,
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 

}

 

Likes

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
Explorer ,
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.

Likes

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

Likes

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
Adobe Community Professional ,
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.

 

 

Likes

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

Likes

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
Adobe Community Professional ,
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));
}

 

 

 

Likes

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

Copy link to clipboard

Copied

Likes

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
Explorer ,
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.

Likes

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