각도가 있는 Adobe Edge Animate 사용JS 및 각도UI 라우터
현재 Adobe Edge Angular로 제작된 여러 애니메이션을 하나의 Angular로 통합하는 프로젝트를 진행하고 있습니다.JS application.이 애니메이션들이 게임의 비주얼 역할을 할 것이고 플레이어의 입력을 바탕으로 구성을 조절할 것입니다.이 단계에 이르려면 몇 가지 실험이 필요하지만 모든 것이 완벽하게 작동합니다.
플레이어가 현재 보기를 종료하고 두 번째로 액세스할 때마다 문제가 발생합니다.어떤 이유로 Adobe Edge Animate Javascript API에 문제가 발생하여 구성을 로드하지 못합니다.
기본적으로 저는 작곡을 한 번만 로드할 수 있지만 더 이상은 로드할 수 없습니다.컴포지션을 다시 로드하려고 할 때마다 다음과 같은 자바스크립트 오류가 발생합니다.
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(...)(예프노페를 통해)라고 불리며, 예프노페에게 주입된 자바스크립트를 다시 불러오라고 요청하는 방법이 없는 것 같습니다. 표준 대신 이를 처리하기 위해 사용할 수 있는 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: [ ]});
});
지금까지 잘 작동하고 있습니다!프로젝트의 나머지 게임을 구축하고 문제가 생기면 이를 게시하는 데 사용하겠습니다.
이것이 다른 사람의 많은 마음의 고통을 덜어주기를 바랍니다!
롭 신튼의 답변:
브라우저에서 해당 *_edge.js의 내용을 다시 처리하면 문제가 해결되는 것 같습니다.이것들이 주입되기 때문에<head>언제든지AdobeEdge.loadComposition(...)(예프노페를 통해)라고 불리며, 예프노페에게 주입된 자바스크립트를 다시 불러오라고 요청하는 방법이 없는 것 같습니다. 표준 대신 이를 처리하기 위해 사용할 수 있는 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: [ ]});
});
지금까지 잘 작동하고 있습니다!프로젝트의 나머지 게임을 구축하고 문제가 생기면 이를 게시하는 데 사용하겠습니다.
이것이 다른 사람의 많은 마음의 고통을 덜어주기를 바랍니다!
언급URL : https://stackoverflow.com/questions/29209565/using-adobe-edge-animate-with-angularjs-and-angularui-router
'programing' 카테고리의 다른 글
| 워드프레스:next_post_link() / previor_post_link() 매개변수에 if-else 문을 삽입하시겠습니까? (0) | 2023.10.26 |
|---|---|
| window.on before unload and window.on unload가 Firefox, Safari, Opera에서 작동하지 않습니까? (0) | 2023.10.26 |
| Oracle: 자동 증분 ID 열을 사용하여 보기 생성 (0) | 2023.10.26 |
| 날짜가 DateTime보다 크거나 같은 라라벨 웅변 (0) | 2023.10.26 |
| Angular 뒤에 코드JS애니메이션이완료되었습니다. (0) | 2023.10.26 |