Attualmente sto lavorando a un progetto che incorporerà più animazioni create con Adobe Edge Animate in un'unica applicazione AngularJS. L'idea è che queste animazioni agiranno come elementi visivi di un gioco e controllerò la composizione in base all'input del giocatore. Ci sono voluti alcuni esperimenti per arrivare a questo stadio, ma tutto ciò funziona perfettamente.Utilizzo di Adobe Edge Animate con AngularJS e AngularUI Router
I miei problemi iniziano quando il giocatore sceglie di uscire dalla vista corrente e accedervi per la seconda volta. Per qualche motivo questo causa un problema con l'API Javascript di Adobe Edge Animate e la composizione non riesce a caricare.
In sostanza, posso caricare una composizione una volta ma non di più. Ogni volta che tento di caricare la composizione per la seconda volta ottengo i seguenti errori 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
Attualmente sto caricando la composizione direttamente dall'interno del controller come segue ...
.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: [ ]});
})
ho anche la cache disabilitata per questo stato ...
.state('game-test', {
cache: false,
url: "/games/test",
controller: 'GameTest',
templateUrl: 'templates/games/test.html'
})
Tutti i suggerimenti di benvenuto e apprezzare qualsiasi aiuto!
Grazie
Aggiornamento: ho lavorato una soluzione! Speriamo ...
Il problema sembra essere risolto se il browser gestisce nuovamente il contenuto del * _edge.js pertinente. Poiché questi sono iniettati nello <head> ogni volta che viene chiamato AdobeEdge.loadComposition(...) (tramite yepnope), e non sembra esserci alcun metodo per chiedere a yepnope di ricaricare Javascript iniettato, ho scritto un piccolo servizio per Angular che posso usare per gestirlo in luogo della funzione standard AdobeEdge.loadComposition(...). È essenzialmente un wrapper che farà i controlli in anticipo.
.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's already loaded! Let's 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's 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);
}
}
})
Usando questo metodo posso semplicemente richiamare questo servizio nei regolatori pertinenti e caricare una composizione in modo simile alla normalità. In questo caso particolare ...
.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: [ ]});
});
Finora funziona benissimo! Lo userò per costruire il resto dei giochi nel nostro progetto e pubblicare eventuali problemi in cui mi imbatto.
Speriamo di risparmiare a qualcun altro un po 'di angoscia!
Grazie per questo post ben scritto (e modifiche) e si prega di aggiornare con eventuali ulteriori risultati come io, e sono sicuro che altri, stanno facendo cose simili con EA e AngularJS. – inki
Post eccellente. Saresti disposto a condividere parte del tuo codice dal tuo progetto? Mi sto imbarcando per la stessa strada e mi piacerebbe saltare più del processo iniziale di tentativi ed errori di fusione dei due framework. – user681814
Ha effettivamente funzionato? Ho provato a implementare qualcosa di simile per me (basato su questo codice), e ottengo ancora il TypeErrors ... Quello che non capisco nel tuo codice è il motivo per cui elimini il nodo '