Copy link to clipboard
Copied
I'm trying to create a banner that just plays symbols one at a time. The number of symbols will change as we create them. When a symbol finishes playing it calls a function that fades it out and fades-in and starts playing the next one. It's basically a content slider without any controls.
How can I do this using variables rather than hard coding instance names?
At the end of the symbol's animate this is triggered in its timeline.
this.getStage().getChildAt(0).changeSlide(1);
1 in the function name is the order number of the symbol which in this case is called symbol1
Here is the function on the stage:
this.changeSlide = function(slideNum)
{
var totalnumSlides = 4;
var nextSlide;
var self = this;
self.curSlide = "self.symbol"+slideNum;
if (slideNum == numSlides)
{
nextSlide = "self.symbol1"
}
else {
slideNum ++;
nextSlide = "self.symbol" + slideNum;
}
createjs.Tween.get(curSlide).to({alpha:0}, 1000);
nextSlide.gotoAndPlay(0);
createjs.Tween.get(nextSlide).to({alpha:1}, 1000);
}
Needless to say, this does not work. using nextSlide in gotoAndPlay is undefined and using curSlide in the createjs line I've attempted to assign a readonly property. I could use some help. Thanks.
1 Correct answer
This has nothing to do with export settings. It's basic JavaScript syntax. If you have a movieclip on the stage with its instance named "bob", these are all functionally identical:
this.bob.visible = false;
this["bob"]["visible"] = false;
this["bob"].visible = false;
this.bob["visible"] = false;
var bobRef = this.bob;
bobRef.visible = false;
var bobName = "bob";
this[bobName].visible = false;
Copy link to clipboard
Copied
Stuff like "self.symbol" is never going to work because that's just sticking self's name into a string, not its value. The correct way to reference object names by a variable is to use bracket notation instead of dot notation.
Property accessors - JavaScript | MDN
So you'd do something like:
self.curSlide = self["symbol" + slideNum];
Which if slideNum was 9001 would be equivalent to:
self.curSlide = self.symbol9001;
Copy link to clipboard
Copied
This is helpful. My question is why does:
createjs.Tween.get(self.symbol9001).to({ alpha: 0}, 1000);
self.symbol9001.gotoAndPlay(1);
work but,
someVariable = self["symbol9001"];
createjs.Tween.get(someVariable).to({ alpha:0},1000);
someVariable.gotoAndPlay(1);
does not?
Copy link to clipboard
Copied
You're saying you tested that and it didn't work? Because I just tested that and it did.
Copy link to clipboard
Copied
It does not work for me. Is it possible that my export settings are wrong? I'm using the standard HTML Canvas option with Animate. Do I need to include anything else in the actions screen like:
stage = new createjs.Stage("demoCanvas");
Copy link to clipboard
Copied
This has nothing to do with export settings. It's basic JavaScript syntax. If you have a movieclip on the stage with its instance named "bob", these are all functionally identical:
this.bob.visible = false;
this["bob"]["visible"] = false;
this["bob"].visible = false;
this.bob["visible"] = false;
var bobRef = this.bob;
bobRef.visible = false;
var bobName = "bob";
this[bobName].visible = false;
Copy link to clipboard
Copied
your comments helped me solve this. I think I was declaring some of the variables incorrectly. It helped to know that the syntax worked on your end. Thank you!

