Using variables to reference symbols in HTML canvas.

Question

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.

ClayUUID · Accepted Answer

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

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;

ClayUUID · Answer

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;

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded