将 Adobe Edge Animate 与 AngularJS 和 AngularUI 路由器一起使用

Question

我目前正在进行一个项目，该项目将把使用 Adobe Edge Animate 创建的多个动画合并到一个 AngularJS 应用程序中。我的想法是，这些动画将充当游戏的视觉效果，我将根据玩家的输入来控制构图。到达这个阶段需要进行一些试验，但所有这些都运行良好。

每当玩家选择退出当前视图并再次访问它时，我的问题就会出现。出于某种原因，这会导致 Adobe Edge Animate Javascript API 出现问题，合成无法加载。

基本上，我只能加载一次合成，但不能再加载了。每当我尝试第二次加载合成时，我都会收到以下 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的内容，问题似乎可以解决。由于每当调用 AdobeEdge.loadComposition(...) 时（通过 yepnope），这些都会被注入到 <head> 中，并且似乎没有任何方法要求 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'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);
    }
  }
})

使用此方法，我可以简单地在相关控制器中调用此服务，并以与正常情况类似的方式加载合成。在这种特殊情况下...

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

到目前为止，一切都很好！我将使用它来构建我们项目中的其余游戏以及 post 我运行遇到的任何问题。

希望这能让其他人免去很多心痛！

Answer 1

Rob Sinton 的回答：

如果浏览器重新处理相关*_edge.js的内容，问题似乎可以解决。由于每当调用 AdobeEdge.loadComposition(...) 时（通过 yepnope），这些都会被注入到 <head> 中，并且似乎没有任何方法要求 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'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);
    }
  }
})

使用此方法，我可以简单地在相关控制器中调用此服务，并以与正常情况类似的方式加载合成。在这种特殊情况下...

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

到目前为止，一切都很好！我将使用它来构建我们项目中的其余游戏以及 post 我运行遇到的任何问题。

希望这能让其他人免去很多心痛！

将 Adobe Edge Animate 与 AngularJS 和 AngularUI 路由器一起使用

Using Adobe Edge Animate with AngularJS and AngularUI Router

javascript

angularjs

adobe-edge

angular-ui-router

将 Adob​​e Edge Animate 与 AngularJS 和 AngularUI 路由器一起使用

Using Adobe Edge Animate with AngularJS and AngularUI Router

javascript

angularjs

adobe-edge

angular-ui-router

将 Adobe Edge Animate 与 AngularJS 和 AngularUI 路由器一起使用