night_webgl.fla 파일을 다운로드하여 Adobe Flash Professional CC 2014에서 엽니다. 스테이지의 밤 하늘을 표현한 비트맵 이미지가 파일에 포함되어 있습니다.
마지막 업데이트 날짜
WebGL 런타임 API를 사용하여 대화형 애니메이션 만들기
다음은 Flash WebGL 런타임 API를 사용하여 애니메이션에 대화형 기능을 추가하는 방법을 익힐 수 있는 단계별 자습서입니다. 이 자습서를 참조하여, 우선 간단한 FLA 파일로 시작하고 API를 사용하여 스테이지에 MovieClip 인스턴스를 추가할 수 있습니다.
-
-
CTRL+Enter(Windows의 경우) 또는 Cmd+Enter(Mac의 경우)를 눌러 동영상을 테스트할 수 있습니다. 브라우저 창에 비트맵이 표시됩니다.
-
해당 .fla 파일이 포함된 폴더로 이동합니다. 제작 후에 다음 파일 및 폴더를 확인할 수 있습니다.
- night_webgl.html 파일
- WebGL 런타임 JavaScript 라이브러리가 포함된 ‘libs’ 폴더
- 애니메이션을 렌더링하는 데 필요한 에셋이 포함된 ‘assets’ 폴더
-
Flash Professional로 돌아갑니다. 라이브러리 패널에 투명도가 조절된 별 애니메이션이 포함된 “Star” MovieClip이 표시됩니다.
-
라이브러리 패널에서 Star MovieClip 옆에 있는 ‘연결’ 열을 두 번 클릭하고 “star”를 입력합니다. 이 단계에서는 API를 사용하여 런타임에 이 MovieClip의 어떤 인스턴스를 만들 수 있는지를 나타내는 연결 이름을 지정합니다. 이 작업을 수행하면 스테이지에서 사용되지 않은 경우에도 이 MovieClip이 제작됩니다.
-
HTML 파일을 열고 태그가 포함된 행 뒤에 다음 3개 행을 추가합니다. 이렇게 하면 HTML에 버튼이 추가되고, 만든 별의 수를 나타내는 자리 표시자가 만들어 집니다.
-
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 클래스를 사용하여 별의 위치 및 크기가 설정되었습니다.
-
변경 사항을 HTML 파일에 저장합니다.
-
제작 중 HTML의 변경 사항을 Flash가 덮어쓰지 않도록 하려면 제작 설정 대화 상자에서 'HTML 덮어쓰기' 확인란을 지우십시오.
-
동영상을 다시 테스트해보십시오. 이제 브라우저 배경 이미지 아래에 추가 버튼이 표시됩니다. 스테이지에 별을 추가하려면 추가를 여러 번 클릭하십시오.
참고:
완료된 예제를 아래에서 다운로드할 수 있습니다.
다운로드
참고:
- HTML 내의 Canvas에서 WebGL 애니메이션을 렌더링하므로 주위 HTML을 수정할 필요가 없습니다. 이 예제에서는 만든 별의 수에 대한 카운트를 유지합니다.
- 위의 예제는 대화식 애니메이션과 게임을 만드는 방법을 보여줍니다. 장면의 요소를 제어하는 다른 방법에 대한 자세한 내용은 WebGL 런타임 API 설명서 페이지를 참조하십시오.
- 내용을 제작할 때 Flash는 아트워크를 GPU 호환 형식으로 변환합니다. 많은 계산이 필요하므로 작업을 완료하는 데 몇 분 정도 소요될 수 있습니다. 따라서 아트워크에서 선 및 커브의 수를 최소화하는 것이 가장 좋습니다. [수정] > [모양] 메뉴 아래의 옵션을 사용하여 아트워크를 최적화하고, 부드럽게 만들고, 곧게 만들면 아트워크를 단순화할 수 있습니다. 그러면 렌더링 성능이 향상되고 제작 시간이 단축됩니다.
내 계정 로그인