как нацелить MovieClip с помощью createjs

Я пытаюсь экспортировать анимацию групповой фотографии, которая отлично работает во флэш-памяти, но не при экспорте в холст html5.

Хитрость «простая»: каждая фотография — это кнопка, и когда вы наводите указатель мыши на чье-либо изображение, появляется его должность.

Я не могу сделать это с помощью createjs!

У меня есть экземпляр MovieClip на моей сцене с именем «jobs_cont», временная шкала которого имеет разные ключевые кадры и метки для всех должностей.

Дело в том, что мне не удалось настроить таргетинг на «jobs_cont» и использовать gotoAndPlay для определенного кадра или метки на временной шкале при наведении кнопки.

распознается только «инструкция предупреждения», но не «jobs_cont.gotoAndPlay»:

var frequency = 3;
stage.enableMouseOver(frequency);
this.mybutton.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler(){ 
    this.jobs_cont.gotoAndPlay("mylabel");
    alert("hovered by mouse");
    // end of your personalized code
}

Я думаю, что должен пропустить что-то, нацеленное на «jobs_cont» в createjs, но я новичок в javascript и не могу понять это, несмотря на мой день исследований. Если кто подскажет. Спасибо.


javascript html html5-canvas createjs flash-cc
person CactusZeus Chonch    schedule 10.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы имеете дело с проблемами масштаба. Если вы определяете функцию на временной шкале, используя приведенный выше синтаксис, функция не имеет области действия, поэтому this становится Window.

Вы можете изменить синтаксис функции, который будет определен для текущего объекта:

this.fl_MouseOverHandler = function(){ 
    this.jobs_cont.gotoAndPlay("mylabel");
    alert("hovered by mouse");
    // end of your personalized code
}

Наконец, JavaScript не предоставляет автоматически область действия для обработчиков событий (пока!), поэтому вам нужно определить область действия функции самостоятельно. Если у вас EaselJS версии 0.7.0 или более поздней, вы можете использовать метод on вместо addEventListener (документы). Обратите внимание, что вы также должны использовать this.fl_MouseOverHandler.

this.mybutton.on("mouseover", this.fl_MouseOverHandler, this);

Вы также можете ограничить функцию с помощью служебного метода, такого как Function.prototype.bind() (документы):

this.mybutton.addEventListener("mouseover", this.fl_MouseOverHandler.bind(this));

Надеюсь, это поможет!

person Lanny    schedule 10.11.2015
comment
Да, это определенно так! В некотором смысле вы должны объявить функцию саму по себе и впоследствии добавить к ней прослушиватель событий. Это было действительно сложно для меня. Спасибо за ваш быстрый и исчерпывающий ответ. Теперь это работает как шарм ;-) - person CactusZeus Chonch; 11.11.2015