2014-05-23 4 views
1

Flash 캔버스로 제작 된 애니메이션이 브라우저에서 반응 할 수 있습니까? 즉, 원래의 종횡비를 유지하면서 브라우저 창의 크기를 기반으로 캔버스와 애니메이션 자체의 크기를 조정할 수 있기를 바랍니다.플래시 캔버스 반응 애니메이션 크기

내 캔버스를 게시 할 때 얻게되는 코드는 다음과 같습니다. 하루 종일이 문제를 파악하려고 노력했지만 올바른 결과를 얻을 수는 없습니다.

<script> 
var canvas, stage, exportRoot; 

function init() { 
    canvas = document.getElementById("canvas"); 
    exportRoot = new lib.test_1(); 

    stage = new createjs.Stage(canvas); 
    stage.addChild(exportRoot); 
    stage.update(); 

    createjs.Ticker.setFPS(lib.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 
} 
</script> 

<canvas id="canvas" width="640" height="360" style="background-color:#FFFFFF"></canvas> 

는 누군가가 저를 도와 주실 수 있습니까? 자바 스크립트 나 캔버스에 대한 많은 경험이 없으며 코드 업데이트에 대한 시도가 너무 멀었습니다. 여기 stackoverflow 다른 게시물의 도움으로 나는 내 캔버스가 반응하지만, 애니메이션도 관리 할 수 ​​있습니다. 애니메이션은 같은 장소에 머물렀다. 대단히 감사드립니다! Bellow는 내 도움이 필요하다면 내 캔버스를 반응 적으로 만드는 코드입니다.

답변

1
Adobe 포럼에서 작동하는 솔루션을 찾았습니다. 그것은 완벽하지는 않지만 일을합니다 : https://forums.adobe.com/message/6405264

기본적으로 CSS를 사용하고 캔버스에 너비 100 %를 추가하면 캔버스와 애니메이션이 모두 올바르게 조정됩니다. 그래서 캔버스는 다음과 같이 보일 것입니다 :

<canvas id="canvas" width="720" height="660" style="background-color:#FFFFFF; width: 100%;"></canvas> 

이 솔루션의 문제는 캔버스와 애니메이션 모두를 조정하면서 품질이 다를 수 있으므로,이 벡터로 확장되지 않는다는 것입니다. 내 상황에서 애니메이션은 약 10kb이므로 300px 간격으로 약 3 가지 크기로 만들 예정입니다.

javascript에서 더 많은 경험을 할 수있는 보조 메모는 동영상 클립과 애니메이션을 하나의 부모 동영상에 넣으면 플래시에서 게시 할 때 처음 몇 줄 당신의 .js 파일의 코드 :

this.my_anim_container.setTransform(360,329.2,2,2,0,0,0,0,8.6); 

2 개의 "2"의 제어 애니메이션의 규모, 당신은 예를 들어 3으로 변경한다면, 그래서 애니메이션은 이제 확대 될 것이다. 귀하의 브라우저 크기에 따라 수정할 수있는 방법을 찾아내는 것이 더 좋을지 모르지만 개인적으로는 자바 스크립트 지식이 없습니다.