Haxe/Flash로 시작하기

AS3 개발자 가이드


http://www.haxenme.org/developers/documentation/actionscript-developers/

HelloWorld

Haxe로 정말 쉽게 플래시 애플리케이션을 개발해봅시다. 우리의 첫 "HelloWorld" 샘플이 여기 있습니다.
아주 간단하고 프로그래밍을 위한 도구 구성의 대부분을 보여줍니다.

Test.hx

"Text.hx"라는 파일을 작성합니다.

class Test {
    static function main() {
        trace("Hello World !");
    }
}

compile.hxml

같은 폴더에 "compile.hxml" 이라는 파일을 작성합니다.

-swf test.swf
-main Test

test.swf

간단하게 "compile.hxml"을 더블클릭 하거나, 커맨드 라인에서 "haxe compile.hxml" 를 입력하면 컴파일을 할 수 있습니다. 뭔가 에러가 난다면 화면에 표시될겁니다.

만약 "Standard library not found" 나 "Class not fount : Test" 같은 에러가 난다면, Haxe가 라이브러리 파일과 표준 디렉터리, Test.hx 파일 자체를 찾을 수 있게 해줘야 합니다. 기본적으로 Haxe는 Test.hx 및 표준 디렉토리가 Haxe가 실행되는 현재 디렉토리에 있어야 합니다. 여러분이 "HAXE_LIBRARY_PATH" 환경변수를 설정하여 경로를 변경할 수 있습니다. 예) "/home/mjs/local/lib/haxe/std:." (콜론과 마침표 포함)

"Invalid class name -swf9 test.swf" 라는 에러가 난다면 .hxml 파일을 ANSI 인코딩으로 변경하세요.

test.html

모든 것이 원활하게 진행 되었다면 "test.swf" 파일이 생성되었을 것입니다. 이제 "test.html"이라는 페이지를 만들어 봅시다.

<html>
<head><title>Haxe Flash</title></head>
<body bgcolor="#dddddd">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="400"
    height="300"
    id="haxe"
    align="middle">
<param name="movie" value="test.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ffffff"/>
<embed src="test.swf"
       bgcolor="#ffffff"
       width="400"
       height="300"
       name="haxe"
       quality="high"
       align="middle"
       allowScriptAccess="always"
       type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
</body>
</html>

"test.html"파일을 웹 브라우저에서 열어보면, "Hello World"라는 글자와 파일과 라인에 대한 정보가 보일 겁니다.

유의 사항: 이 예제는 플래시를 웹페이지에 표시하는 일반적인 방법 중 하나를 사용하고 있습니다. 자세한 내용은 이 게시물을 읽어보세요. :
Flash Embedding Cage Match.
모든 인자가 두번씩 나오는 위와 같은 코드가 싫다면 자바스크립트 라이브러리를 이용할 수도 있습니다.

사각형을 그려봅시다

지금까지는 플래시의 특정 API를 사용하지 않고 순수하게 Haxe만을 이용한 내용이었습니다. "trace"는 어떤 내용을 추적해서 화면에 표시해주는 기능입니다. 이제 사각형을 화면에 그려봅시다. 플래시의 "MovieClip"이라는 것을 이용해야 합니다. "Test.hx" 파일을 다음과 같이 수정해봅시다. :

class Test {
    static function main() {
        var mc:flash.display.MovieClip = flash.Lib.current;
        mc.graphics.beginFill(0xFF0000);
        mc.graphics.moveTo(50,50);
        mc.graphics.lineTo(100,50);
        mc.graphics.lineTo(100,100);
        mc.graphics.lineTo(50,100);
        mc.graphics.endFill();
    }    
}

이 코드는 현재 무비클립에 드로잉 API를 이용하여 사각형을 그립니다.

"compile.hxml"을 실행하고 다시 "test.html"을 열어보면 사각형이 그려진 걸 확인할 수 있습니다.

라이브러리 이용하기

플래시에서는 그래픽, 사운드, 폰트 등의 라이브러리를 사용합니다. 이 리소스들은 linkage name이라는 것으로 정의되어 있습니다. Flash IDE나 다른 SwfMill, Sam Haxe 같은 오픈소스 툴을 사용했을 때, Haxe는 linkage name을 통해 리소스를 참조해서 사용합니다.

예제로, "button"이라는 linkage name을 가진 무비클립을 가진 "resources.swf" 라는 SWF를 만들어 봅시다. 다음과 같이 코드가 변경될 겁니다. :

Flash 8 code:

class Test {
    static function main() {
         var but = flash.Lib.current.attachMovie("button", "but001", 0);
         but._x = 10;
         but._y = 20;
    }
}

Flash 9 code:

class Test {
    static function main() {
         var but = flash.Lib.attach("button");
     // 클래스 이름이 대문자로 시작한다면
         // var but = new Button(); 와 같이
         // 클래스 이름대로 작성해 주세요.
         flash.Lib.current.addChild(but);
         but.x = 10;
         but.y = 20;
    }
}

이 샘플을 "button"이 추가되고 0뎁스에 위치하고 "but001" 이라는 고유이름을 가지게 됩니다. (고유이름과 뎁스는 오브젝트마나 하나씩 주어집니다) 그리고 (10, 20) 위치에서 보여지게 됩니다.

버튼이 화면에 표시되기 위해선, Haxe가 "resource.swf" 파일을 찾을 수 있게 해야 합니다. "compile.hxml"을 다음과 같이 수정합니다. :

-swf test.swf
-swf-lib resource.swf
-main Test

"compile.hxml"을 실행해봅시다. "test.swf"가 생성되고 "resource.swf"의 콘텐츠 전체가 Haxe 컴파일 코드에 포함됩니다. "test.hml"을 열어서 테스트 해보세요.

유의하실 점은 "test.swf"는 "resource.swf"의 폭, 높이, 배경색상, 플래시 버전, fps 등의 영향을 받지 않습니다. Haxe의 기본 파라미터의 영향을 받게 됩니다. 이 파라미터 대부분은 "test.html" 파일에서 볼 수 있듯이 HTML에서 재정의 할 수 있습니다.

SWF 속성 바꾸기

SWF속성은 "-swf-header" 를 컴파일 옵션에 추가해 변경할 수 있습니다. HXML 파일을 다음과 같이 수정합니다. :

-swf test.swf
-main Test
-swf-header 200:300:40:FF0000

200x300 사이즈, 40FPS, 빨간 배경색을 가지도록 설정되었습니다. 하지만 사이즈와 배경색상은 HTML에서도 재정의 될 수 있습니다.

"-swf-version" 을 이용하면 플래시 플레이어 버전을 선택할 수 있습니다. Haxe가 적절히 처리해 줄 것입니다 :

  • -swf-version 9 : ActionScript3를 이용해 플래시 플레이어 9용 파일을 만듭니다.
  • -swf-version 10: 플래시 플레이어 10용 파일을 만듭니다. (Haxe 2.07+ 버전에서의 기본값입니다)
  • -swf-version 11: 3D API를 포함한 플래시 플레이어 11용 파일을 만듭니다.

구형 플래시 플레이어도 지원합니다 :

  • -swf-version 6 : 플래시 플레이어 6.0 용 파일을 만듭니다(레지스터를 사용하지 않아 느립니다). 이 버전에서는 지원되지 않는 API등이 있으므로 전용 API클래스/메소드를 사용하세요.
  • -swf-version 7 : 플래시 플레이어 7용 파일을 만듭니다. 플래시 8용 API를 사용할 수 없습니다.
  • -swf-version 8 : 플래시 플레이어 8용 파일을 만듭니다. 플레이어 7용과 거의 같지만 플래시 8에서 추가된 새 API들을 사용할 수 있습니다.

보안 샌드박스 변경하기

로컬 swf가 네트워크 자원에 접근하려면 swf의 보안 샌드박스 설정을 local-with-network 로 설정해야합니다.

-D network-sandbox

를 HXML 에 추가하세요.

FlashVars 입력받아 사용하기

플래시를 삽입하는 방벙에 따라서 차이가 있을 수 있습니다.
위에서 플래시를 삽입하는 방법에 대한 문서들을 참조하세요.

        var params:Dynamic<String> = flash.Lib.current.loaderInfo.parameters;
        // 간단히 trace 해봅시다.
        trace("param named name is :" + params.name);
        trace(haxe.Serializer.run(params));

참고 자료 :
loaderinfo

어도비 공식 참조 설명서의 LoaderInfo 문서 . 타이머를 이용한 체크 보다는 flash.Lib.current의 Event.ADDED_TO_STAGE를 수신하고, flash.Lib.current.stage.loaderinfo 의 Event.INIT 을 수신하는게 좋습니다. 그러나 flash.Lib.current.stage != null 이고 Std.is( flash.Lib.current.stage.stageWidth , Int ) 가 true 인 상태라면 이벤트가 이미 발생한 이후라 수신하지 못할 수 있습니다. 위의 게시물에서는 타이머 방식을 이용해서, 잘 테스트 되고 있습니다.

이제 해야 할 것들

위의 내용들에 익숙해졌다면, 이제 여러분은 플래시 API로 응용프로그램을 구현하는데 필요한 것들을 배워야 합니다. Haxe는 플래시 6-8을 위한 어도비 공식 참조 설명서 ("ActionScript 2.0 참조 설명서"부분을 보세요) 나 플래시 9-11을 위한 어도비 공식 참조 설명서 의 도움을 받을 수 있도록 API에 대해 보수적 입장을 취합니다.

Haxe API와 ActionScript2 API 사이에는 약간의 차이가 있습니다 :

  • "Date", "Array", "String"과 같은 클래스는 Haxe 플랫폼에도 공통적으로 존재하기 때문에 Haxe가 약간의 변경을 할 수 있습니다. Haxe API 를 읽어보세요.
  • "XML"과 "XMLNode" 클래스는 Xml 클래스에 병합되고 확장되어 제공됩니다.
  • "MovieClip", "TextField"같은 플래시 핵심 클래스들은 "flash" 패키지에 있습니다. "MovieClip"대신에 "flash.MovieClip"이라고 사용하거나, 클래스의 시작에 "import flash.MovieClip;" 을 선언해야 합니다.
  • "_root" 대신에 "flash.Lib._root" 를 사용합니다. "_global" 대신에 "flash.Lib._global"을 사용합니다. "flash.Lib.current"는 local root 에 접근할 수 있습니다. (Haxe code의 SWF가 로드되었다면 "_root" 가 여러분이 생각하는 것과 다를 수 있습니다. "stage"나 "getTimer()" 등과 같은 추상적 영역입니다.)

이런 사소한 차이들을 제외하고는 쉽게 기존의 플래시 API들을 모두 사용할 수 있습니다.

version #14101, modified 2012-05-22 02:54:06 by nlovej