使用AdobeEdge动画与AngularJS和AngularUI路由器

Using Adobe Edge Animate with AngularJS and AngularUI Router

本文关键字：AngularUI 路由器 AngularJS AdobeEdge 动画 使用      更新时间：2023-09-26

我目前正在做一个项目，该项目将把用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>中，而且似乎没有任何方法要求yepnape重新加载注入的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: [ ]});
});

到目前为止，它一直工作得很好！我会用它来构建我们项目中的其余游戏，并发布我遇到的任何问题。

希望这能让其他人省心！

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

到目前为止，它一直工作得很好！我会用它来构建我们项目中的其余游戏，并发布我遇到的任何问题。

希望这能让其他人省心！

相关文章：