Verwenden von Adobe Edge Animieren mit AngularJS und AngularUI Router

Question

Ich arbeite gerade an einem Projekt, bei dem mehrere mit Adobe Edge Animate erstellte Animationen in eine einzelne AngularJS-Anwendung integriert werden. Die Idee ist, dass diese Animationen als visuelle Elemente für ein Spiel dienen und ich die Komposition basierend auf den Eingaben des Spielers steuern werde. Es hat einige Experimente gebraucht, um zu diesem Stadium zu kommen, aber all das funktioniert perfekt.

Meine Probleme beginnen immer dann, wenn der Spieler die aktuelle Ansicht verlässt und ein zweites Mal darauf zugreift. Aus irgendeinem Grund verursacht dies ein Problem mit der Adobe Edge Animate JavaScript-API, und die Komposition kann nicht geladen werden.

Im Wesentlichen kann ich eine Zusammensetzung einmal aber nicht mehr laden. Jedes Mal, wenn ich versuche, die Zusammensetzung für eine zweite Mal, dass ich die folgenden Javascript-Fehler erhalten zu laden ...

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 

Ich bin derzeit die Zusammensetzung direkt aus der Steuerung geladen wie folgt ...

.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: [ ]}); 
}) 

ich habe auch deaktiviert Caching für diesen Zustand ...

.state('game-test', { 
    cache: false, 
    url: "/games/test", 
    controller: 'GameTest', 
    templateUrl: 'templates/games/test.html' 
}) 

Alle Vorschläge willkommen und freuen uns über jede Hilfe!

Dank

Update: Ich habe eine Lösung ausgearbeitet! Hoffentlich ...

Das Problem scheint gelöst zu sein, wenn der Browser den Inhalt der relevanten * _edge.js erneut behandelt. Da diese in die injiziert werden, wann immer AdobeEdge.loadComposition(...) (über yepnope) aufgerufen wird, und es scheint keine Methode zu geben, yepnope zu bitten, injiziertes Javascript neu zu laden, habe ich einen kleinen Dienst für Angular geschrieben, den ich verwenden kann, um damit umzugehen Ort der Standard AdobeEdge.loadComposition(...) Funktion. Es ist im Wesentlichen ein Wrapper, der die relevanten Prüfungen im Voraus durchführt.

.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); 
    } 
    } 
}) 

Mit dieser Methode I kann einfach diesen Dienst in den entsprechenden Reglern aufrufen und eine Zusammensetzung, in ähnlicher Weise wie normale Last. In diesem speziellen Fall ...

.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: [ ]}); 
}); 

Bis jetzt hat es funktioniert großartig! Ich werde es verwenden, um den Rest der Spiele in unserem Projekt aufzubauen und alle Probleme zu posten, auf die ich stoße.

Hoffentlich spart dies jemand anderen viel Herzeleid!

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.