파일 night.webgl.fla를 다운로드하여 Adobe Flash Professional CC에서 엽니다. 스테이지의 밤 하늘을 표현한 비트맵 이미지가 파일에 포함되어 있습니다.
마지막 업데이트 날짜
2022년 11월 28일
Flash WebGL 런타임 API를 사용하여 대화형 애니메이션 만들기
다음은 Flash WebGL 런타임 API를 사용하여 애니메이션에 대화형 기능을 추가하는 방법을 익힐 수 있는 단계별 자습서입니다. 이 자습서를 참조하여, 우선 간단한 FLA 파일로 시작하고 API를 사용하여 스테이지에 MovieClip 인스턴스를 추가할 수 있습니다.
-
-
CTRL+Enter(Windows의 경우) 또는 Cmd+Enter(Mac의 경우)를 눌러 동영상을 테스트할 수 있습니다. 브라우저 창에 비트맵이 표시됩니다.
-
.fla 파일이 들어 있는 폴더로 이동하여 해당 폴더에 다음이 포함되어 있는지 확인하십시오.
- Canvas 요소가 포함된 HTML 파일
- WebGL 런타임 JavaScript 라이브러리가 포함된 ‘libs’ 폴더
- 애니메이션을 렌더링하는 데 필요한 에셋이 포함된 ‘assets’ 폴더
-
Flash 창을 엽니다. Library 창에는 변조된 투명도의 간단한 별이 포함된 MovieClip “Star”가 있습니다.
-
library 창에서 Star MovieClip 옆에 있는 ‘linkage’ 열을 더블 클릭하고 “StarMC”를 입력합니다. 이 단계에서는 API를 사용하여 이 MovieClip의 어떤 인스턴스를 만들 수 있는지를 나타내는 연결 이름을 지정합니다. 이 작업을 수행하면 스테이지에서 사용되지 않은 경우에도 이 MovieClip이 제작됩니다.
-
HTML 파일을 열고 <canvas> 태그가 포함된 행 뒤에 다음 3개 행을 추가합니다. 이렇게 하면 HTML에 버튼이 추가되고, 만든 별의 수를 나타내는 자리 표시자가 만들어 집니다.
<br>
<button onclick="onAdd();">Add</button>
<p id="count"></p>
-
handleComplete() 함수 뒤에 다음과 같은 코드를 추가합니다.
var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("StarMC"); 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 클래스를 사용하여 별의 위치 및 크기가 설정되었습니다.
-
변경 사항을 HTML 파일에 저장합니다.
-
제작 중 HTML의 변경 사항을 Flash가 덮어쓰지 않도록 하려면 제작 설정 대화 상자에서 'HTML 덮어쓰기' 확인란을 지우십시오.
-
동영상을 다시 테스트해보십시오. 이제 브라우저 배경 이미지 아래에 추가 버튼이 표시됩니다. 스테이지에 별을 추가하려면 추가를 여러 번 클릭하십시오.
참고:
- HTML 내의 Canvas에서 WebGL 애니메이션을 렌더링하므로 주위 HTML을 수정할 필요가 없습니다. 이 예제에서는 만든 별의 수를 나타내는 카운트를 유지 관리합니다.
- 위의 예제는 대화식 애니메이션과 게임을 만드는 방법을 보여줍니다. 장면 그래프를 제어하는 다른 방법을 알아보려면 WebGL 런타임 API 설명서 페이지를 참조하십시오.
- 내용을 제작할 때 Flash는 아트워크를 GPU 호환 형식으로 변환합니다. 컴퓨팅이 집중적으로 수행되므로 이 작업을 완료하는 데 몇 분 정도 소요됩니다. 가장 좋은 방법으로, 아트워크에 행 및 커브 수를 최소화합니다. 수정 > 모양 메뉴 아래에 있는 옵션을 사용하여 아트워크를 최적화, 스무딩 및 스트레이팅하면 아트워크 작업을 간소화할 수 있어 렌더링 성능을 높이고 제작에 소요되는 시간을 줄일 수 있습니다.
참고:
완성된 예제는 여기에서 다운로드할 수 있습니다.