WebGL 런타임 API를 사용하여 대화형 애니메이션 만들기   

다음은 Flash WebGL 런타임 API를 사용하여 애니메이션에 대화형 기능을 추가하는 방법을 익힐 수 있는 단계별 자습서입니다. 이 자습서를 참조하여, 우선 간단한 FLA 파일로 시작하고 API를 사용하여 스테이지에 MovieClip 인스턴스를 추가할 수 있습니다.

  1. night_webgl.fla 파일을 다운로드하여 Adobe Flash Professional CC 2014에서 엽니다. 스테이지의 밤 하늘을 표현한 비트맵 이미지가 파일에 포함되어 있습니다.

  2. CTRL+Enter(Windows의 경우) 또는 Cmd+Enter(Mac의 경우)를 눌러 동영상을 테스트할 수 있습니다. 브라우저 창에 비트맵이 표시됩니다.

  3. 해당 .fla 파일이 포함된 폴더로 이동합니다. 제작 후에 다음 파일 및 폴더를 확인할 수 있습니다.

    • night_webgl.html 파일
    • WebGL 런타임 JavaScript 라이브러리가 포함된 ‘libs’ 폴더
    • 애니메이션을 렌더링하는 데 필요한 에셋이 포함된 ‘assets’ 폴더
  4. Flash Professional로 돌아갑니다. 라이브러리 패널에 투명도가 조절된 별 애니메이션이 포함된 “Star” MovieClip이 표시됩니다.

  5. 라이브러리 패널에서 Star MovieClip 옆에 있는 ‘연결’ 열을 두 번 클릭하고 “star”를 입력합니다. 이 단계에서는 API를 사용하여 런타임에 이 MovieClip의 어떤 인스턴스를 만들 수 있는지를 나타내는 연결 이름을 지정합니다. 이 작업을 수행하면 스테이지에서 사용되지 않은 경우에도 이 MovieClip이 제작됩니다.

  6. HTML 파일을 열고 태그가 포함된 행 뒤에 다음 3개 행을 추가합니다. 이렇게 하면 HTML에 버튼이 추가되고, 만든 별의 수를 나타내는 자리 표시자가 만들어 집니다.





  7. handleComplete() 함수 뒤에 다음과 같은 코드를 추가합니다.

    var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("star"); player.getStage().addChildAt(star, 0); var x = Math.random() * 540; var y = Math.random() * 180; var s = Math.random(); var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]); star.setLocalTransform(mat); count++; document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : "star"); }

    다음과 같은 상황이 발생합니다.

    • 변수 ‘player’는 WebGL 플레이어의 인스턴스를 참조하며 API의 façade입니다.
    • SceneGraphFactory에 대한 참조를 가져왔습니다. MovieClip의 인스턴스를 만드는 데 사용됩니다.
    • MovieClip 인스턴스는 createMovieClipInstance() 함수를 사용하고 Flash에서 지정한 연결 이름을 전달하여 만들어집니다.
    • 플레이어에서 스테이지에 대한 참조(root timeline)를 가져왔습니다.
    • addChildAt() 함수를 사용하여 새로운 MovieClip 인스턴스가 스테이지의 자식으로 추가됩니다. 이 함수에 0을 전달하면 스테이지(비트맵 이상)의 다른 모든 자식 위에 자식으로 추가됩니다.
    • Matrix 클래스를 사용하여 별의 위치 및 크기가 설정되었습니다. 
  8. 변경 사항을 HTML 파일에 저장합니다.

  9. 제작 중 HTML의 변경 사항을 Flash가 덮어쓰지 않도록 하려면 제작 설정 대화 상자에서 'HTML 덮어쓰기' 확인란을 지우십시오.

  10. 동영상을 다시 테스트해보십시오. 이제 브라우저 배경 이미지 아래에 추가 버튼이 표시됩니다. 스테이지에 별을 추가하려면 추가를 여러 번 클릭하십시오.

참고:

완료된 예제를 아래에서 다운로드할 수 있습니다.

다운로드

night_webgl

참고:

  • HTML 내의 Canvas에서 WebGL 애니메이션을 렌더링하므로 주위 HTML을 수정할 필요가 없습니다. 이 예제에서는 만든 별의 수에 대한 카운트를 유지합니다.
  • 위의 예제는 대화식 애니메이션과 게임을 만드는 방법을 보여줍니다. 장면의 요소를 제어하는 다른 방법에 대한 자세한 내용은 WebGL 런타임 API 설명서 페이지를 참조하십시오.
  • 내용을 제작할 때 Flash는 아트워크를 GPU 호환 형식으로 변환합니다. 많은 계산이 필요하므로 작업을 완료하는 데 몇 분 정도 소요될 수 있습니다. 따라서 아트워크에서 선 및 커브의 수를 최소화하는 것이 가장 좋습니다. [수정] > [모양] 메뉴 아래의 옵션을 사용하여 아트워크를 최적화하고, 부드럽게 만들고, 곧게 만들면 아트워크를 단순화할 수 있습니다. 그러면 렌더링 성능이 향상되고 제작 시간이 단축됩니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책