В настоящий момент я работаю над проектом, который будет включать в себя несколько анимаций, созданных с помощью Adobe Edge Animate, в одно приложение AngularJS. Идея состоит в том, что эти анимации будут выступать в качестве визуальных эффектов для игры, и я буду управлять композицией на основе ввода от игрока. На этот этап предприняли некоторые эксперименты, но все это прекрасно работает.
Мои проблемы начинаются всякий раз, когда игрок выбирает выйти из текущего представления и получить к нему доступ во второй раз. По какой-то причине это вызывает проблему с API Javascript Adobe Edge Animate и композиция не загружается.
По сути, я могу загрузить композицию один раз, но не более. Всякий раз, когда я пытаюсь загрузить композицию во второй раз, я получаю следующие ошибки Javascript...
Uncaught TypeError: Cannot read property 'stage' of undefined edge.5.0.1.js:4872
Uncaught TypeError: Cannot read property 'stage' of undefined edge.5.0.1.js:4519
Я сейчас загружаю композицию непосредственно из контроллера, как показано ниже.
.controller('GameTest', function($scope, $state) {
AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
scaleToFit: "width",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "2048px",
height: "1134px"
}, {dom: [ ]}, {dom: [ ]});
})
Я также отключил кеширование для этого состояния...
.state('game-test', {
cache: false,
url: "/games/test",
controller: 'GameTest',
templateUrl: 'templates/games/test.html'
})
Все предложения приветствуются и ценят любую помощь!
Спасибо
Обновление: я разработал решение! Будем надеяться...
Проблема, похоже, решена, если браузер снова обрабатывает содержимое соответствующего * _edge.js. Поскольку они вводятся в <head>, когда AdobeEdge.loadComposition(...) вызывается (через yepnope), и, похоже, не существует какого-либо метода запроса yepnope перезагрузить вложенный Javascript, я написал небольшую услугу для Angular, чтобы я может использоваться для обработки этого вместо стандартной функции AdobeEdge.loadComposition(...). Это, по сути, оболочка, которая проведет соответствующие проверки заранее.
.service('$AdobeEdge', function() {
var head = document.getElementsByTagName('head')[0],
scripts = head.getElementsByTagName('script');
return {
loadComposition: function(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM) {
// Determine the filename for our project
var projectFile = projectPrefix + '_edge.js';
var newScript = null;
// Iterate through each script tag in the header to search for our file
angular.forEach(scripts, function(script, index, scripts) {
// Does the script src tag end with our project filename?
if (script.src.substr(script.src.length - projectFile.length) == projectFile) {
// It already loaded! Let go about removing it and injecting a fresh script tag...
script.remove();
newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
newScript.setAttribute('src', script.src);
head.insertBefore(newScript, scripts[0]);
// Let also delete the composition within the Adobe Edge API so that events
// like 'compositionReady' are fired again when we call loadComposition()
delete AdobeEdge.compositions[compId];
}
});
// Ultimately we always need to call loadComposition() no matter what
AdobeEdge.loadComposition(projectPrefix, compId, opts, preloaderDOM, downLevelStageDOM);
}
}
})
Используя этот метод, я могу просто вызвать эту службу в соответствующих контроллерах и загрузить композицию аналогично нормальному. В этом конкретном случае...
.controller('GameTest', function($scope, $state, $AdobeEdge) {
$AdobeEdge.loadComposition('edge-animate/GameTest', 'GameTest', {
scaleToFit: "width",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "2048px",
height: "1134px"
}, {dom: [ ]}, {dom: [ ]});
});
Пока это отлично работает! Я буду использовать его для создания остальных игр в нашем проекте и публикации любых проблем, с которыми я сталкиваюсь.
Надеюсь, это сэкономит кому-то много душевной боли!
