동영상 클립 예제: RuntimeAssetsExplorer

Flash Player 9 이상, Adobe AIR 1.0 이상

[ActionScript에 내보내기] 기능은 둘 이상의 프로젝트에 유용하게 사용할 수 있는 라이브러리의 경우 특히 장점이 많습니다. Flash Player 또는 AIR에서 SWF 파일을 실행하는 경우 ActionScript로 내보낸 심볼은 심볼을 로드하는 SWF와 동일한 보안 샌드박스 내의 모든 SWF 파일에 사용할 수 있습니다. 이런 방식으로 하나의 Flash 문서는 그래픽 에셋을 보유하기 위한 용도로만 지정된 SWF 파일을 생성할 수 있습니다. 이 기술은 "래퍼" SWF 파일을 만든 다음 런타임 시 그래픽 에셋 SWF 파일을 로드하는 개발자와 디자이너가 함께 시각적 에셋을 사용하는 큰 프로젝트에 특히 유용합니다. 이 메서드를 사용하여 일련의 버전 관리된 파일을 유지 관리할 수 있습니다. 이러한 파일에서는 그래픽 에셋이 프로그래밍 개발 과정의 영향을 받지 않습니다.

RuntimeAssetsExplorer 응용 프로그램은 RuntimeAsset의 하위 클래스인 모든 SWF 파일을 로드하며 해당 SWF 파일의 사용 가능한 에셋을 찾아볼 수 있습니다. 다음은 이러한 경우에 대한 예제입니다.

  • Loader.load() 를 사용하여 외부 SWF 파일 로드

  • ActionScript에 내보낸 라이브러리 심볼을 동적으로 만들기

  • MovieClip 재생의 ActionScript 컨트롤

시작하기 전에 Flash Player에서 실행할 각 SWF 파일을 동일한 보안 샌드박스에 반드시 배치하십시오. 자세한 내용은 보안 샌드박스 를 참조하십시오.

이 샘플의 응용 프로그램 파일을 얻으려면 Flash Professional 샘플 을 다운로드하십시오. RuntimeAssetsExplorer 응용 프로그램 파일은 Samples/RuntimeAssetsExplorer 폴더에 있습니다. 이 응용 프로그램은 다음과 같은 파일로 구성됩니다.

파일

설명

RuntimeAssetsExample.mxml

또는

RuntimeAssetsExample.fla

Flex(MXML) 또는 Flash(FLA)용 응용 프로그램의 사용자 인터페이스입니다.

RuntimeAssetsExample.as

Flash(FLA) 응용 프로그램용 문서 클래스입니다.

GeometricAssets.as

RuntimeAsset 인터페이스를 구현하는 클래스에 대한 예제입니다.

GeometricAssets.fla

ActionScript용으로 내보내진 심볼을 포함한 GeometricAssets 클래스(FLA의 문서 클래스)에 연결된 FLA 파일입니다.

com/example/programmingas3/runtimeassetexplorer/RuntimeLibrary.as

탐색기 컨테이너로 로드될 모든 런타임 에셋 SWF 파일을 반환할 필수 메서드를 정의하는 인터페이스입니다.

com/example/programmingas3/runtimeassetexplorer/AnimatingBox.as

회전 상자 모양에 있는 라이브러리 심볼의 클래스입니다.

com/example/programmingas3/runtimeassetexplorer/AnimatingStar.as

회전 별 모양에 있는 라이브러리 심볼의 클래스입니다.

런타임 라이브러리 인터페이스 구축

탐색기가 SWF 라이브러리와 적절히 상호 작용하려면 런타임 에셋 라이브러리의 구조를 정형화해야 합니다. 이러한 구조는 예상 구조를 보여 주는 메서드의 청사진이라는 점에서 클래스와 유사하지만 클래스와는 다르게 메서드 본문이 포함되지 않은 인터페이스를 만들어 정형화할 수 있습니다. 이 인터페이스는 런타임 라이브러리와 탐색기 모두에 서로 통신할 수 있는 방법을 제공합니다. 브라우저에 로드되는 런타임 에셋의 각 SWF는 이 인터페이스를 구현합니다. 인터페이스 및 그 활용에 대한 자세한 정보는 ActionScript 3.0 학습 에서 인터페이스를 참조하십시오.

RuntimeLibrary 인터페이스는 매우 간단합니다. 심볼을 내보내고 런타임 라이브러리에서 사용할 수 있는 클래스 경로 배열을 탐색기에 제공할 수 있는 함수만 있으면 됩니다. 이 작업을 수행할 수 있도록 인터페이스에 getAssets() 라는 메서드 하나가 있습니다.

package com.example.programmingas3.runtimeassetexplorer 
{ 
    public interface RuntimeLibrary 
    { 
        function getAssets():Array; 
    } 
}

에셋 라이브러리 SWF 파일 만들기

RuntimeLibrary 인터페이스를 정의하여 다른 SWF 파일로 로드할 수 있는 여러 에셋 라이브러리 SWF 파일을 만들 수 있습니다. 에셋의 개별 SWF 라이브러리를 만들려면 다음 네 가지 작업을 수행해야 합니다.

  • 에셋 라이브러리 SWF 파일의 클래스 만들기

  • 라이브러리에 포함된 개별 에셋의 클래스 만들기

  • 실제 그래픽 에셋 만들기

  • 그래픽 요소를 클래스와 연결하고 라이브러리 SWF 제작

RuntimeLibrary 인터페이스 구현을 위한 클래스 만들기

다음으로 RuntimeLibrary 인터페이스를 구현할 GeometricAssets 클래스를 만듭니다. 이 클래스가 FLA의 문서 클래스가 되며 이 클래스의 코드는 RuntimeLibrary 인터페이스와 매우 유사합니다. 단, 클래스 정의에는 getAssets() 메서드에 메서드 본문이 있다는 점이 다릅니다.

package 
{ 
    import flash.display.Sprite; 
    import com.example.programmingas3.runtimeassetexplorer.RuntimeLibrary; 
     
    public class GeometricAssets extends Sprite implements RuntimeLibrary  
    { 
        public function GeometricAssets() { 
             
        } 
        public function getAssets():Array { 
            return [ "com.example.programmingas3.runtimeassetexplorer.AnimatingBox", 
                     "com.example.programmingas3.runtimeassetexplorer.AnimatingStar" ];     
        } 
    } 
}

두 번째 런타임 라이브러리를 만들려는 경우 자체 getAssets() 구현을 제공하는 다른 클래스(예: AnimationAssets)를 기초로 다른 FLA를 만들 수 있습니다.

각 MovieClip 에셋의 클래스 만들기

이 예제에서는 사용자 정의 에셋에 기능을 추가하지 않고 MovieClip 클래스만 확장할 것입니다. AnimatingStar에 대한 다음 코드는 AnimatingBox에 대한 코드와 비슷합니다.

package com.example.programmingas3.runtimeassetexplorer 
{ 
    import flash.display.MovieClip; 
     
    public class AnimatingStar extends MovieClip 
    { 
        public function AnimatingStar() { 
        } 
    } 
}

라이브러리 제작

이제 새 FLA를 만들고 속성 관리자의 [문서 클래스] 필드에 GeometricAssets를 입력하여 MovieClip 기반 에셋을 새로운 클래스에 연결합니다. 이에 대한 예를 들기 위해 360개가 넘는 프레임에 하나의 시계 방향 회전을 만들기 위해 타임라인 트윈을 사용하는 매우 기본적인 모양 두 개를 만들 것입니다. animatingBox animatingStar 심볼은 모두 [ActionScript에 내보내기]로 설정되고 [클래스] 필드는 getAssets() 구현에 지정된 각각의 클래스 경로로 설정됩니다. 표준 MovieClip 메서드를 하위 클래스로 사용하려고 하면 flash.display.MovieClip 의 기본 클래스가 그대로 유지됩니다.

심볼의 내보내기 설정을 지정한 후 FLA를 제작합니다. 이제 첫 번째 런타임 라이브러리가 있습니다. 이 SWF 파일은 다른 AVM2 SWF 파일에 로드될 수 있으며 새 SWF 파일에 대해 AnimatingBox 및 AnimatingStar 심볼을 사용할 수 있습니다.

다른 SWF 파일로 라이브러리 로드

마지막으로 설명할 기능은 에셋 탐색기의 사용자 인터페이스입니다. 이 예제에서 런타임 라이브러리 경로는 ASSETS_PATH 라는 변수로 하드 코딩되어 있습니다. FileReference 클래스를 사용할 수도 있습니다. 예를 들어, 하드 드라이브에서 특정 SWF 파일을 탐색하는 인터페이스를 만들려는 경우에 FileReference 클래스를 사용합니다.

런타임 라이브러리가 성공적으로 로드되면 Flash Player는 runtimeAssetsLoadComplete() 메서드를 호출합니다.

private function runtimeAssetsLoadComplete(event:Event):void 
{ 
    var rl:* = event.target.content; 
    var assetList:Array = rl.getAssets(); 
    populateDropdown(assetList); 
    stage.frameRate = 60; 
}

이 메서드에서 변수 rl은 로드된 SWF 파일을 나타냅니다. 코드는 로드된 SWF 파일의 getAssets() 메서드를 호출하고 사용 가능한 에셋 목록을 가져온 다음, 이 에셋을 사용하여 populateDropDown() 메서드 호출로 사용 가능한 에셋 목록을 ComboBox 구성 요소에 채웁니다. 그리고 해당 메서드는 각 에셋의 전체 클래스 경로를 저장합니다. 사용자 인터페이스에서 [추가] 버튼을 클릭하면 addAsset() 메서드가 트리거됩니다.

private function addAsset():void 
{ 
    var className:String = assetNameCbo.selectedItem.data; 
    var AssetClass:Class = getDefinitionByName(className) as Class; 
    var mc:MovieClip = new AssetClass(); 
    ... 
}

이 메서드는 ComboBox에 현재 선택되어 있는 에셋의 클래스 경로를 가져오고( assetNameCbo.selectedItem.data ), flash.utils 패키지의 getDefinitionByName() 함수를 사용하여 에셋의 클래스에 대한 실제 참조를 가져와 에셋의 새 인스턴스를 만듭니다.