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

Using variables to reference symbols in HTML canvas.

Explorer ,
Dec 30, 2016 Dec 30, 2016

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. 

849
Translate
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

LEGEND , Dec 30, 2016 Dec 30, 2016

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;

Translate
LEGEND ,
Dec 30, 2016 Dec 30, 2016

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;

Translate
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 ,
Dec 30, 2016 Dec 30, 2016

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?

Translate
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
LEGEND ,
Dec 30, 2016 Dec 30, 2016

You're saying you tested that and it didn't work? Because I just tested that and it did.

Translate
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 ,
Dec 30, 2016 Dec 30, 2016

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");
Translate
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
LEGEND ,
Dec 30, 2016 Dec 30, 2016

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;

Translate
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 ,
Dec 30, 2016 Dec 30, 2016
LATEST

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! 

Translate
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