Adobe AIR2011.04.24 19:34

 얼마 전에 Adobe AIR 기반으로 다음 뮤직의 음원을 다운받는 어플리케이션을 개발했습니다. AIR 기반으로 어플리케이션을 개발한다는것 이 많은 사례를 가지고 있지 않았고 국내에는 2권 정도의 AIR 개발 서적밖에 존재 하지 않아 구글링에만 의존해서 여러가지로 고생을 했습니다. 


  지금부터 작성할 포스팅은 제목 그대로 AIR 개발을 하기 전에 알아 두면 좋은 것들입니다. 제가 몰라서 실수 했던 것들은 정리 한다는 의미가 더 크니 읽기 전에 참고 하세요.


 AIR 기반으로 개발한다는것은 사용자 컴퓨터에 설치 후에 실행되는 어플리케이션을 만드는 것 입니다. Flash Player 기반은 주로 웹에 올려져서 사용되고 브라우저 라는 종속된 공간 안에서 실행 되는 것이기 때문에 사용자에게 영향을 미치는 범위가 AIR 에 비해 작습니다. 그래서 AIR 개발시에는 Flash Player 기반으로 개발 할 때는 하지 않았던 Applications & Installer Setting 작업을 하게 됩니다. 이번 포스팅에는 Application Setting 에 대해 다루겠습니다. 


 Flash IDE 나 Flex/Flash Builder 를 보면 어플리케이션과 설치할때 사용되는 인스톨러를 셋팅하는 패널이 있습니다. 이 패널 셋팅을 통해 기본적인 내용과 세부적인 내용을 셋팅 합니다. Flash IDE 에서는 위의 패널을 통해 셋팅을 하고 어플리케이션이 컴파일 될때 -app.xml 파일에 해당 내용이 포함되어 컴파일 됩니다. Flash Builder 에서는 -app.xml 파일을 직접 셋팅해서 어플리케이션과 인스톨러를 셋팅합니다. 셋팅된 내용들은 결과 적으로 -app.xml 파일로 작성 되는데 기본적인 내용들은 다음과 같습니다.




	AirTest
	AirTest
	AirTest
	v1
	
	


-app.xml 이 많은 설정 값을 가지고 있기 때문에 모든 노드에 대해 설명하는건 의미 없을것 같고, 주의 해서 봐야할 부분은 다음과 같습니다.


1. <id></id>

어플리케이션의 고유 이름이다. 다른 어플리케이션과 겹치게 하면 절대로 안되며, 고유성을 유지 해야 한다. 배포시 변경했을 경우 새로운 어플리케이션으로 인식 되므로 업데이트가 안된다. 브라우저에서 어플리케이션을 실행 시킬때도 이 id 값을 이용한다.


trace(NativeApplication.nativeApplication.applicationID);


2. <version></version>

어플리케이션의 버전이다. 어플리케이션을 업데이트 할때 사용되며, 설치 파일을 생성할 당시 설정한 Version 과 Updater 클래스를 이용하여 업데이트 할때 전달하는 버전 정보가 다를때 업데이트를 실패 한다.


var descriptor:XML = NativeApplication.nativeApplication.applicationDescriptor;
var air:Namespace = descriptor.namespaceDeclarations()[0];
var currentVersion:String = descriptor.air::version;


3. <programMenuFolder></programMenuFolder>

프로그램 메뉴 설정 옵션이고 아래는 Daum 뮤직 다운로드 매니저를 <programMenuFolder>Daum</programMenuFolder> 에 설정한 화면이다.



4. <installFolder></installFolder>

기본 설치 폴더를 설정하는 옵션이다. 아래는 Daum 뮤직 다운로드 매니저를 <installFolder>Daum</installFolder> 에 설정한 화면이다.



 다음으로 다룰 내용은 어플리케이션 인증에 관한 부분입니다. AIR 기반의 어플리케이션은 사용자 컴퓨터에 설치 되고 악의적으로 사용자의 컴퓨터를 조작할 수 있는 기능들을 가질수 있기 때문에 사용자로 하여금 설치 전에 해당 어플리케이션이 안전한가를 인증서를 통해 입증 하는 것 입니다. 아래는 인증서 설정 탭 입니다.



 인증서는 어플리케이션 설치 파일을 만들때만 사용됩니다. 이 인증서는 설치 파일이 배포된 후에 어플리케이션을 배포한 사람 외의 개발자가 어플리케이션을 임의로 수정하여 배포 하는 것도 방지해 줍니다. 실제로 AIR 개발 결과물인 .air 파일은 .zip 파일로 확장자만 바꾼다면 그 안에 포함되어 있는 .swf 파일 등을 볼수 있기 때문에 이 설치 파일을 임의로 변경 한다면 파일이 손상되어 어플리케이션이 설치 될 수 없다는 에러 메시지가 나타나게 됩니다.




인증서 발급 기관

VeriSign ( http://www.versign.com )

thawte ( http://www.thawte.com ) 


인증서가 없어도 개발자가 본인의 인증서를 만들어 사용할 수 있습니다. 하지만 공인 인증 기관에서 발급하지 않은 인증서는 위의 이미지와 같이 제작자 ID 가 알수 없다고 나오게 됩니다. 또한 어플리케이션을 출시한 뒤에 정상적으로 서비스를 하는 도중 인증서를 바꾸게 되면 기존에 서비스 하고 있는 어플리케이션이 새로운 버전의 어플리케이션으로 업데이트 할 수 없습니다.


오랜만에 쓰는 글이라 역시 힘드네요. 다음 포스팅에서는 업데이트에 대해 다룰 예정 입니다. 잘못된 내용이나 AIR 개발 중 고민하고 있는 부분들은 댓글을 통해 공유 주세요~ 

Posted by Flash 동강
Flash Programming 란?2010.03.07 15:05

 지금까지 Flash 에서의 Timeline 에 대해 알아보았습니다. Timeline 에 대한 개념이 정리가 되셨는지요? 보통 사람들은 아래 그림 A와 같이 흰 도화지 안에 Timeline이 존재 하는 줄 알고 있습니다. 하지만 실제로는 반대입니다.



그림 A

그림 B



 그림 B와 같이 Timeline 안에 희 도화지가 속해 있는 형식으로 구성되어 있습니다. Timeline의 한 프레임 당 하나의 흰 도화지를 가지고 있고, 코드를 입력 할 수 있는 공간을 가지고 있습니다. 그림 A와 B는 단순히 Timeline 이 흰 도화지 보다 크다 (Timeline > 흰 도화지) 라는 의미를 뜻하지만, Flash의 구조 안쪽으로 들어가면 Flash에서의 객체라는 것의 뿌리가 되는 개념입니다. 왜냐 하면 모든 객체들은 이 Timeline에 속하게 되므로서 사용자들에게 보일 수 있게 되는 것이기 때문입니다. 이번 장을 진행하면서 왜 Timeline이 Flash의 구조의 뿌리가 되는 이유에 대해 살짝 엿보고, Flash에서의 객체가 어떻게 정의 되어 있고, 생성 되었다가 소멸 되는 과정에 대해 이야기 해 볼 것입니다.


 Flash는 객체기반 툴입니다. Flash에서 사용되는 것들 중에 객체가 아닌 것은 없을 정도로 모두 객체로 이루어져 있습니다. 지금 말하고 있는 객체란, MovieClip과 Button 그리고 툴로 그릴 수 있는 모든 것들을 의미 합니다. 잠시 객체의 의미에 대해 잠깐 짚고 넘어가겠습니다. 사전에서는 객체를 이렇게 정의 하고 있습니다.



 객체 [客體, object]

객체 지향 프로그래밍(OOP)이나 설계에서, 데이터(실체)와 그 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념. 예를 들어 기차역에서 승차권을 발매하는 경우, 실체인 ‘손님’과 동작인 ‘승차권 주문’은 하나의 객체이다. 실체인 ‘역무원’과 동작인 ‘승차권 발매’도 하나의 객체이다.



백과 사전에서 정의한 것과 같이 동작의 주체가 되는 사람이나, 사람이 하는 동작 자체도 모두 객체라고 할 수 있습니다. 프로그래밍을 처음 접하는 사람들은 객체를 이해 할 때 사람과 같은 정해진 사물은 객체라고 이해 하지만, 동작이나 수학 공식을 처리해 주는 객체 같은 경우에는 객체가 아니라고 생각하는 경우가 많습니다. 객체는 보통 생각하는 것 보다 더 커다란 의미를 가지고 있습니다. 예를 들어 놀이터에 철수와 영희라는 객체가 놀고 있습니다. 놀이터에는 그네 객체, 미끄럼틀 객체가 있고 철수와 영희는 이들 놀이 기구 객체들을 사용할 수 있습니다. 이 경우는 모두 객체의 구분이 분명하기 때문에 이해하기에 어려움이 없을 것입니다. 하지만, 객체는 이러한 경우뿐만 아니라 우리가 행하는 동작이나, 기계들이 가지고 있는 기능들의 모음 또는 문서에 저장되는 데이터 모두 객체라고 할 수 있습니다. 이러한 객체들을 이용하는 툴을 객체 기반 툴이라고 하고, 객체 기반 언어라고 하는 것입니다. 그럼 Flash 에서의 객체는 어떤 것이 있을까요? 예를 들어 보겠습니다. Flash를 실행시키면 바로 보이는 것은 흰 도화지입니다. 그리고 그 아래 타임라인, 옆에는 Color패널과 Properties 와 라이브러리패널이 위치하고 있습니다. 이들 모두 객체입니다. 그리기 툴을 이용해서 사각형을 그린다고 하면, Color 패널을 사용하여 그리고 난 후에 사각형의 색상을 변화 시킬 수 있습니다. 왜 변화 시킬 수 있을까요? 그건 그려진 사각형에 color 라는 속성을 가지고 있기 때문에 변경을 할 수 있는 것입니다. 객체는 아무 것도 없는 빈 상태로 다른 객체를 담을 수 있는 역할도 하고, 속성과 메소드를 추가하여 그 자체로서 역할을 갖기도 합니다.

객체의 의미에 대해서 어느 정도 감이 왔을 것이라 생각이 듭니다. 그럼 본격적으로 Flash의 객체 구조에 대해서 다뤄 보도록 하겠습니다.


  • Flash 의 Display 구조

 Flash는 기본적으로 가지고 있는 구조가 있습니다. 과일을 담으려면 바구니가 필요하듯, Flash는 자체적으로 객체를 담을 그릇을 가지고 있습니다. 그 그릇이 바로 이전 포스팅에서 배웠던 Timeline입니다. 지금까지는 Timeline이라고 말했지만, 이 Timeline은 실제로 MainTimeline이라고 불리는 Flash에서 최상위 부모(바구니) 역할을 하는 객체입니다. 하지만 바구니가 있다고 해서 그 바구니가 가장 크기가 큰 개념은 아닙니다. MainTimeline 위에는 Stage 라는 객체가 더 존재하게 됩니다. 이러한 관계는 부모와 자식의 관계로 비유 하는 경우가 많으나, 여기에서는 바구니를 놓는 공간과 큰 바구니의 관계로 비유해 보겠습니다. Flash는 기본적으로 Stage 라는 공간 안에, MainTimeline 이라는 Timeline을 가지고 있는 바구니가 들어가게 됩니다. 그리고 그 MainTimeline 안에 모든 객체들이 만들어 지는 것입니다. 아래 그림을 보면 그러한 관계가 나타나 있습니다. 실제로 이러한 관계는 코드를 통해 확인해 볼 수 있습니다.





첫 번째 프레임에 아래 코드를 입력 합니다.

trace("this.parent : "+this.parent);

trace("this : "+this);


실행결과

this.parent : [object Stage]

this : [object MainTimeline]

 


실행 결과에서 볼 수 있듯이, 아무 것도 존재 하지 않은 상태의 this 는 MainTimeline을 가리키고 있습니다. 그리고 부모 객체를 알 수 있게 해 주는 parent 속성을 통해 MainTimeline의 부모를 보니 Stage 라고 나오는 것을 확인할 수 있습니다. 이와 같이 Flash는 사용자가 객체를 만들기 전에 그 객체가 담겨질 그릇에 해당하는 Stage와 MainTimeline을 준비해 놓고 객체가 만들어 지기만을 기다립니다.

Flash의 display 구조는 Stage-MainTimeline-만들어지는객체 로 이루어져 있습니다. 하지만 같은 객체를 나타내는 것이라도, 표현 방법은 여러 가지가 있습니다.



// 기본 display list

trace("this :"+this);

trace("this.parent :"+this.parent);

trace("this.stage :"+this.stage);

trace("-------------------------");


// root 에 관하여

trace("root : "+root);

trace("this.root :"+this.root);

trace("this.stage.root :"+this.stage.root);


//결과

this :[object MainTimeline]

this.parent :[object Stage]

this.stage :[object Stage]

-------------------------

root : [object MainTimeline]

this.root :[object MainTimeline]

this.stage.root :[object Stage]

 



이와 같이 같은 의미 이지만, 다르게 표현 될 수 있는 경우가 많이 있습니다. 또한 코드를 MainTimeline에 작성했을 경우에는 위와 같은 결과를 나타내지만, 빈 스테이지에 무비클립을 만든 후 그 안에 아래와 같은 코드를 입력할 경우에는 결과가 달라집니다.



 

// 기본 display list

trace("this :"+this);

trace("this.parent :"+this.parent);

trace("this.stage :"+this.stage);

trace("-------------------------");

// root 에 관하여

trace("root : "+root);

trace("this.root :"+this.root);

trace("this.stage.root :"+this.stage.root);

// 결과

this :[object Symbol1_1]

this.parent :[object MovieClip] // MainTimline이 나올 것이라 예상했을 것이다.

this.stage :[object Stage]

-------------------------

root : [object MovieClip]

this.root :[object MovieClip]

this.stage.root :[object Stage]



stage 관련 코드를 제외 하고는 모두 결과가 바뀌었습니다. 왜 그럴까요? 결과 분석에 앞서 root의 개념에 대해 짚고 넘어 가겠습니다. root 속성은 어떠한 객체가 포함되고 있는 최상위 부모객체를 나타내는 속성입니다. 예를 들어 보겠습니다. 빈 스테이지에 SuperMother이 있고, 그 안에 Mother, 또 그 안에 Child 라는 무비 클립 객체가 있습니다.




// 각각의 무비 클립은 포함 관계에 있으며 instanceName이 부여 되어 있다.

trace(_supermother.root);

trace(_supermother._mother.root);

trace(_supermother._mother._child.root);

// 결과

[object MainTimeline]

[object MainTimeline]

[object MainTimeline]

 


결과와 같이 root는 자기 자신이 존재하고 있는 최상위의 부모를 나타냅니다. MainTimeline 과 Stage는 자기 자신이 최상위이기 때문에 root 속성을 보아도 자신이 출력 되는 것입니다.

 

Adobe에서 제공하고 있는 as3.0 설명서에서 DisplayObject에 root 속성을 찾아보면 상황에 따라 root 가 어떻게 다르게 쓰이는가를 볼 수 있습니다. 아직 배우지 않은 개념들을 이용해서 설명해야 하므로 관련된 포스팅에서 더 자세히 알아보도록 하겠습니다.

 

 다시 이전 예제로 돌아가서, MainTimeline으로 나올 것이라 생각했던 값이 MovieClip으로 출력되었습니다. 그 이유는 스테이지 위에 생성된 무비클립에서는 자기 자신의 부모의 타입이 MovieClip 이라는 것은 알고 있지만, 정확한 이름을 알고 있지 못하기 때문에 MovieClip 이라고 출력해준 것입니다. 해결 방법은 간단합니다. Flash에 이름을 알려주면 되는 것이지요. 소스는 생성된 무비 클립 안에 작성 되었으니, trace(this.root); 코드를 MainTimeline에 입력해 봅시다.



 

// 기본 display list

trace("this :"+this);

trace("this.parent :"+this.parent);

trace("this.stage :"+this.stage);

trace("-------------------------");

// root 에 관하여

trace("root : "+root);

trace("this.root :"+this.root);

trace("this.stage.root :"+this.stage.root);

// 결과

[object MainTimeline]

this :[object Symbol1_1]

this.parent :[object MainTimeline]

this.stage :[object Stage]

-------------------------

root : [object MainTimeline]

this.root :[object MainTimeline]

this.stage.root :[object Stage]



MainTimeline 에서는 자신이 MainTimeline이라는 것을 알고 있었기 때문에, MainTimeline이라 출력해 주었고, Flash는 가장 먼저 실행되는 trace(this.root);를 통해서 정보를 알게 되었기 때문에 MovieClip 으로 출력해 주었던 것은 MainTimeline 으로 좀 더 객체를 명확하게 나타내 주었습니다. 이와 같이, 같은 키워드를 사용하는데도 불구하고 자신의 의도와는 다르게 나타나는 경우가 있습니다. 특히 this 와 root 그리고 parent의 개념을 잘 알고 사용해야 버그를 줄일 수 있습니다. 


 

this 의 의미 변화


AS2.0때까지만 해도 this가 의미 하는 것은 같은 코드 페이지에서 사용하여도 this를 사용하는 함수에 따라 달라졌습니다. AS2.0 코드에서는 아무것도 없는 스테이지상에서 trace(this);를 입력해 보면 _level0 이라는 최상위 표시객체를 나타내 줍니다. 하지만 스테이지 상에 mc 라는 무비 클립을 만든 후에 onRelease 이벤트를 걸어준 후에 나타나는 this는 _level0.mc입니다.


 이와 같이 같은 페이지(객체)에 코딩을 하고 있더라도, this의 의미는 어떤 이벤트에서 사용되는가에 따라 그 이벤트의 행위의 주체가 되는 객체로 의미가 바뀌면서 사용 됩니다. 아래의 코드를 보면 이벤트에 속해 있지 않았을 때의 this 는 _level0 은 나타내고 있지만, onRelease 라는 이벤트 안에서는 이벤트의 주체가 되는 _level0.mc를 가리키고 있는 것을 보면 이와 같이 동작하고 있다는 것을 알 수 있습니다. 하지만 as3.0 에서는 달라졌습니다.



trace(this);

mc.onRelease = function(){ // AS2.0 에서의 Click 이벤트입니다.

trace(this);

}

 

// 결과

_level0

_level0.mc // mc 라는 무비 클립을 클릭했을 때



 as3.0 의 경우 ‘같은 객체’ 안에서 사용되는 this의 의미는 항상 코드가 입력되고 있는 자기 자신을 나타냅니다. 우리가 지금 하고 있는 프레임 코딩 같은 경우에는 코드를 입력하는 장소가 MainTimeline 이기 때문에 최상위의 프레임일 경우 this는 항상 MainTimeline을 가리킵니다. 위에서 ‘같은 객체’ 라고 표현한 이유는 앞으로 우리들은 MainTimeline 뿐만 아니라, 새로운 객체(클래스)를 만들어서 그 안에 코딩 할 것이기 때문에 표현을 한정시킨 것입니다. 빈 스테이지에 무비 클립을 만든 후에 더블클릭으로 만들어진 무비클립의 타임라인에 trace(this); 라고 코딩해 보면 [object Symbol1_1] 라는 결과를 출력합니다. 무비 클립을 만들 당시에 객체 이름 즉, 클래스 이름을 정의 하지 않았기 때문에 Flash에서는 임의로 Symbol1_1 이라는 이름을 부여한 것입니다. 이 이름은 무비클립을 만들 때 입력했던 Name을 바탕으로 만들어 지는 것이나, 실제로 여기서 만든 무비 클립을 바로 동적으로 생성하여 사용할 수는 없습니다. Linkage 라는 클래스 연결 작업을 통해서 하나의 클래스 객체가 되는 것입니다. 다시 this의 의미로 돌아와서, as3.0 에서의 this는 항상 자기 자신을 가리킵니다. this를 통해서 자신의 부모객체인

this.parent 로 접근할 수 있으며, 자신의 자식 객체가 존재할 경우에는 this.자식객체이름 으로 접근 가능한 것입니다. 마지막 예로 AS2.0 에서는 이벤트에 포함했을 때 this의 의미가 바뀌었으니, as3.0 에서는 이벤트에 포함된 this 는 어떤 의미를 나타내는지 보겠습니다. 위의 예제와 같이 빈 스테이지에 무비 클립을 만든 후 이벤트를 걸어 줍니다.



trace(this);
mc.addEventListener(MouseEvent.CLICK, onClickHandler);  // as3.0의 Click이벤트
function onClickHandler(event:MouseEvent):void
{
trace(this);
}

// 결과
[object MainTimeline]
[object MainTimeline]     // mc 라는 무비 클립을 클릭했을 때



이와 같이 MainTimeline 에 작성된 this 는 모두 MainTimeline을 가리킵니다.


Posted by Flash 동강
Flash Programming 란?2010.01.30 15:34

  • Timeline 제어

 Flash의 Timeline이 그냥 시간에 따라 진행 되는 것만은 아닙니다. AS를 통해서 이를 제어하고 코드가 발생하는 순서를 정할 수 있습니다. 기본적으로 Timeline을 제어 하는데 사용하는 액션은 다음과 같습니다.


- stop() : Timeline에 있는 재생헤드를 정지합니다.

- play() : Timeline에 있는 재생헤드를 움직입니다.

- gotoAndPlay(frame, scene =null) : 해당 Scene 에 존재하는 frame으로 이동한 후 재생헤드를 움직입니다.

- gotoAndStop(frame, scene =null) : 해당 Scene 에 존재하는 frame으로 이동한 후 정지 합니다. (정지상태)



 gotoAndPlaygotoAndStop의 파라미터로 들어가는 scene 의 경우는 생략이 가능합니다. 위에서 =null 이라고 선언되어 있는 것은 해당 파라미터가 입력되지 않았을 때는 scene 값을 null 값으로 처리 하겠다는 의미입니다. Timeline에 여러개의 프레임이 존재 하고 있을 때 재생헤드는 현재 머물고 있는 프레임에 해당하는 일을 마친 뒤 다음 프레임이 존재 한다면 다음 프레임으로 자동으로 넘어가서 또 그 프레임에 있는 일을 처리 합니다. 하지만 이러한 동작은 사용자가 원하지 않는 것일 수도 있습니다. 평소에는 프레임 1에 있는 것을 보여 주다가 어떠한 이벤트가 발생 했을 때 다른 프레임으로 이동 시키고 싶은 경우 평소에는 재생 헤드가 항상 프레임 1에 존재해야 되기 때문에 stop() 함수를 사용하게 됩니다. Timeline을 제어 하는 액션은 아주 다양한 용도로 사용 되고, 많은 것을 만들 수 있게 도움을 주는 메소드입니다. 예를 들어, Flash에는 마우스가 오버, 다운, 업 일 때의 이벤트를 처리를 미리 구현해 놓은 SimpleButton이라는 객체가 있습니다. SimpleButton은 내부적으로 구현되어 있는 객체지만 위의 Timeline을 제어 하는 메소드만을 이용하여 만들 수 있습니다. 우선 SimpleButton이 어떻게 구성되어 있는지부터 알아보겠습니다. 



 1. Flash File(Actionscript3.0) 로 새로운 파일을 생성 한후, Rectangle Tool(R)을 이용하여 사각형을 만듭니다.



2. 사각형을 선택 한 후, F8 또는 Modify-Convert to Symbol...을 선택하고 Type을 MovieClip으로 선택 한 후 OK를 누릅니다. 




3. 만들어진 MovieClip 객체를 마우스로 클릭 한 후, 우측 상단에 있는 Properties에 Instance Name을 입력하는 곳에 rect_mc라고 이름을 입력합니다.

 


4. 사각형을 더블클릭하여 하위 객체의 Timeline으로 이동한 후 2,3 프레임에 마우스 오버일 때의 상황과 마우스 버튼을 클릭 했을 때의 상황을 정의 합니다. 이 예제에서는 3개의 프레임에 각각 아래와 같은 도형을 그려 넣었습니다. 그리고 프레임 1에 stop(); 메소드를 입력 합니다.


 




5. 다시 상단에 있는 네비게이션 버튼을 클릭하여 Scene1(상위객체)로 올라 와서 프레임 1에 아래의 코드를 입력 합니다.




// 코드

stop();                   // 재생헤드가 움직이지 않게 정지 시킨다.// 각각의 이벤트를 등록해 준다.rect_mc.addEventListener(MouseEvent.MOUSE_UP,onUphandler);rect_mc.addEventListener(MouseEvent.MOUSE_OVER,onOverhandler);rect_mc.addEventListener(MouseEvent.MOUSE_OUT, onOuthandler);rect_mc.addEventListener(MouseEvent.MOUSE_DOWN,onDownhandler); function onUphandler(event:MouseEvent):void{        rect_mc.gotoAndStop(1);}function onOverhandler(event:MouseEvent):void{         rect_mc.gotoAndStop(2);}function onOuthandler(event:MouseEvent):void{         rect_mc.gotoAndStop(1);}function onDownhandler(event:MouseEvent):void{         rect_mc.gotoAndStop(3);}



 위에서 만든 사각형에 rect_mc 라는 이름(Instance Name)을 적용하므로써 코드에서 접근을 할 수 있게 되었습니다. rect_mc 에 Flash가 정의하고 있는 4가지 마우스 이벤트를 정의하고, 이벤트에 종류에 따라 gotoAndStop 문을 써서 재생헤드의 위치를 변경 하였습니다. 이 예제에서는 마우스의 움직임에 따라 rect_mc안에 있는 Timeline을 조작하므로 SimpleButton와 같은 동작을 하게 됩니다. (객체에 마우스 이벤트가 발생하는 과정은 후에 자세히 다룰 것임으로 생략 합니다.) 이러한 원리를 이용하면, 사용자의 마우스 움직임에 따라 마우스 이벤트가 발생한 객체뿐만 아니라, Timeline을 가지고 있는 모든 객체의 Timeline 속성을 조절할 수 있습니다. 여러 웹 사이트를 돌아다니다 보면, 화려한 모션과 함께 사용자의 반응에 따라 액션이 일어나는 사이트들이 많이 존재 합니다. 이러한 사이트들의 대부분이 이러한 Timeline을 메소드를 사용하는 이벤트만으로도 쉽게 만들 수 있습니다. 다만 Adobe AfterEffect 와 같은 모션 툴에서 한 작업을 Flash 의 Timeline으로 가져와서 조절하기 때문에 가능해지는 것입니다. 물론 Flash로 작업한 애니메이션도 가능합니다. 이렇게 타임라인을 이용한 작업은 간단하게 멋진 결과물이 나올 수 있게 도와줍니다. 


 하지만, Timeline 의 프레임 번호만을 가지고 재생헤드를 이동시키는 것은 여간 번거로운 작업이 아닐 수 없습니다. 프레임 번호를 맞춰가면서 gotoAndPlay를 사용해 가며 인터렉션을 만들었다고 해도, 유지보수가 있을 때 Timeline의 길이가 변하거나, 효과가 변하는 일은 비일비재 하게 일어나는 일이기 때문에 또 다른 방법을 요구 하게 됩니다. 그래서 Flash는 이러한 번거로움을 줄이기 위해 Timeline에 label 속성을 제공해 주고 있습니다. label 속성이란, Timeline을 조절할 때 프레임 번호로 위치를 참조해야 하는 번거로움을 없애기 위해 해당 프레임에 이름을 부여 하는 기능입니다. 아래 그림과 같이 마우스로 프레임을 선택하면 Properties 창에 LABEL 속성이 나타나게 됩니다. Name 에 해당 프레임으로 지정하고 싶은 Name을 입력하게 되면 해당 프레임은 지정된 이름의 참조 값을 갖게 됩니다. 



이 그림에서는 프레임 1에 Out, 프레임 10에 Over, 프레임 20에, Down 이라는 이름을 지정하였습니다. 이렇게 LABEL 값이 정해지게 되고, 위에서 구현했던 소스를 다음과 같이 변경하면 같은 기능을 하게 됩니다.


// 코드

부록 CD: Example\1-4\1_4_3.fla// 이벤트 등록 부분이 동일함으로 생략하였습니다.// 바뀐 부분은 bold 처리 되었습니다.function onUphandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Out");}function onOverhandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Over");}function onOuthandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Out");}function onDownhandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Down");}


 이러한 간단한 구조의 Timeline 에서는 필요하다는 느낌을 받지 못할 수도 있습니다. 하지만, 언제 바뀔지 모르는 프레임 번호를 신경 쓰기보다는 label을 지정함으로서 예측 할 수 없는 유지 보수에 대해 대비 할 수 있고, 훨씬 유연하게 대처할 수 있는 작업 방법입니다.


 지금까지 Timeline을 제어 하는 방법에 대해 알아보았습니다. Timline을 어떻게 조절하고 어떤 효과를 삽입하느냐에 따라 gotoAndPlay 만으로도 멋진 Flash를 만들 수 있는 비결이 될 수 있습니다. 그만큼, Timeline을 기반으로 하고 있는 Flash 프로그래밍에서 Timeline 제어는 중요한 부분을 차지하고 있습니다. 

 

Posted by Flash 동강
Flash Programming 란?2010.01.24 09:33
  • TimeLine

 시작부터 Timeline의 중요성에 대해 강조를 했습니다. 그 이유는 메인에 존재 하는 Timeline 이 실제로 MainTimeline 이라는 Flash 객체이기 때문입니다. 많은 사람들이 Timeline은 그냥 Flash툴에 속해 있는 도구로만 인식하는 경우가 많이 있습니다. 하지만 Timeline은 단지 도구로서의 의미보다 더 중요한 위치를 차지하고 있습니다. 왜냐 하면 Flash에서 생성되고 삭제되는 모든 객체들은 이 MainTimeline 위에 생성되고 삭제되기 때문 입니다. 모든 객체를 담는 그릇과 같은 역할을 하는 것입니다. 즉, 최상위에 있는 부모역할을 담당하고 있습니다. Actionscript 에서도 MainTimeline은 중요한 역할을 합니다. 최상위의 부모 역할 뿐만 아니라, 일반적으로 .as (클래스파일)로 작성되지 않은 AS 코딩은 타임라인 위에 작성되기 때문입니다.

Flash는 Timeline에 코드를 삽입 할 수 있는 특징을 가지고 있습니다. 아래 그림과 같이 자신이 원하는 프레임을 선택하고 F9또는 상단메뉴의 Window-Actions를 선택하면 코드를 입력할 수 있는 창이 뜨게 됩니다.



 각각의 프레임들은 코드를 입력 할 수 있는 공간을 가지고 있지만, 모든 프레임에 코드를 입력 할 수 있는 것은 아닙니다. 프레임은 빈 프레임과 키 프레임 두 가지 종류가 있는데, 오직 키 프레임에만 코드를 입력 할 수 있습니다. Timeline을 선택하고 마우스 오른쪽 버튼을 클릭 하였을 때 아래 그림과 같이 Insert Keyframe을 이용하여 삽입한 프레임이 키 프레임입니다. 



 빈 프레임은 프레임에 아무런 표시가 없지만 키 프레임은 아래쪽에 원이 표시 되어 구분 할 수 있습니다. Timeline에는 오직 키 프레임에만 코드를 입력할 수 있고, 타임라인 위에 작성 되어지는 AS는 키 프레임의 순서에 따라 실행 되게 됩니다. 1 프레임에 작성된 AS 가 먼저 실행이 되고 시간의 흐름에 따라 2,3,4 .... 순서대로 실행됩니다. 예를 들어 보겠습니다. 


 1. Flash CS를 실행시킨후, Flash File(Actionscript3.0) 로 새로운 파일을 생성 합니다.



2. 하단에 있는 Timeline의 1 프레임을 선택 한 후 F9를 눌러 Script를 입력 할 수 있는 창을 띄움니다.


3. Actions창에 다음 코드를 입력 합니다.

trace("프레임 1“);   // trace는 문자나 객체의 속성을 output창에 나타내 주는 메소드입니다. 



4. Timeline에서 15 프레임을 선택하고 F6 또는 마우스 오른쪽 버튼 - Insert keyframe을 선택 하여 15 프레임을 키 프레임으로 생성 합니다. 



5 . 위의 1~3 작업과 같이 F9를 눌러서 Actions창에 다음 코드를 입력 합니다.


trace("프레임 15“);


6. Crtl + Enter 또는 Control - Test Movie메뉴를 이용하여 지금까지 만든 작업을 실행 시킵니다. 


실행 결과

프레임 1

프레임 15

프레임 1

프레임 15

프레임 1

반복 ..... 


 

 결과에서 볼 수 있듯이 프레임의 순서에 따라 액션코드가 실행된다는 것과 마지막 프레임에 가서 멈추는 것이 아니라 계속 루프가 돈다는 것을 알 수 있습니다. 액션코드 및 애니메이션의 시작은 Timeline 위에 존재하는 재생헤드(빨간 라인)의 움직임에 따라 실행됩니다. fps를 조절 함에 따라 재생헤드의 움직임을 조작할 수 있는 것이고, 위의 예제와 같이 각각의 프레임에 입력된 코드가 순서에 따라 실행 되는 것처럼, 애니메이션도 각각의 프레임에서는 움직임이 없지만, 재생헤드가 이동함에 따라 움직이는 것처럼 보이게 되는 것입니다. 이렇게 Flash는 프레임을 이동하므로 액션과 이벤트가 실행되는 절차 기반 프로그래밍 구조를 가지고 있습니다.




Posted by Flash 동강
Flash Programming 란?2010.01.16 23:58


  예전부터 간간히 써오던 문서를 블로그에 올리기 시작하였습니다. 문서의 내용이 Flash 프로그래밍의 기초를 다루고 있고 제가 예전에 썼던 "동강의 AS3.0 강좌" 의 내용을 자세히 풀어 썼다고 보시면 될것 같습니다. 처음 Flash 공부를 시작 하시는 분들에게 도움이 되었으면 하네요. 문서 내용에 대한 질문은 댓글로 달아 주세요.

 

  • Flash 프로그래밍이란 ?

 

 새롭게 Flash 를 배우려고 하시는 분들은 Flash 버젼은 뭐가 있고 언어는 뭘로 시작해야 하는지 막막 하실 겁니다. 우선은 Actionscript3.0 학습법을 읽고 본 문서를 보는 것을 추천 드립니다. 그러면 자연스레 AS3.0 과 Flash CS3 이상의 Flash IDE로 공부를 해야 겠다는 마음을 먹으실 겁니다. 본 문서는 Flash CS4 로 진행 됩니다.

 

 

 예전에 쓴 문서를 보면 왜 Actionscript3.0(이하 AS3.0) 을 사용해야만 하는가에 대해 다루고 있습니다. 하지만 AS2.0 보다 좋다는 것을 알았다고 해서 그동안 편리하게 사용해왔던 AS2.0에서 AS3.0으로 옮기기란 여간 힘든 일이 아닙니다. 저 또한 AS1.0, 2.0을 사용하여 Actionscript 프로그래밍을 시작해서, AS3.0으로 옮기기까지는 적지 않은 노력을 해야만 했습니다.

 

 Flash 프로그래밍은 이미 많은 개발자들이 사용하고 있는 C, C++, Java 보다 쉬워 보이면서 접근하기 어려운 면을 가지고 있습니다. 물론 개인적인 차이도 있겠지만, 제 주위에는 Java를 하던 C 를 하던 AS는 프로그래밍 언어 이면서 조금 다른 느낌이 난다고 어려워 하는 사람들을 보았습니다. 디자이너나 타언어의 개발자들이 Flash 프로그래밍을 어렵다고 생각하는 이유는 무엇일까요? 바로 Timeline 이 존재하기 때문입니다. 일반 언어와는 다르게 시간의 흐름에 따라 이벤트가 발생하고 애니메이션이 움직이는 Timeline 의 존재가 있기 때문에 다들 어렵다고 합니다. 하지만 이러한 Timeline 이 있기 때문에 Flash 프로그래밍이 가능해 지는 것이고, 모든 Actionscript(이하 AS)의 원리는 이 Timeline에서부터 시작하게 됩니다.

 

 Flash CS4를 실행 시키면 흰색 캔버스가 눈에 들어옵니다.

 

 

앞에서 Flash는 Timeline을 가지고 있다고 말 하였는데, 위 그림 하단에 보이는 것이 바로 Timeline입니다. 이곳에 애니메이션을 적용하거나, Flash CS4에서 제공하는 많은 툴 작업을 통해 간단하게 플래시 애니메이션을 적용시킬 수 있는 공간입니다. 이 공간은 단지, 애니메이션을 위한 공간으로서 존재 하는 것은 아닙니다. Timeline 이 존재 하므로 Actionscript를 사용하지 않아도 화려한 모션이라든지, 간단한 인터렉티브가 가능해 집니다. (타임 라인에 코드 삽입도 가능합니다 )

 

  • Frame rate

 

Flash에는 Timeline이 존재함과 더불어 FPS(framerate)를 통해서 Flash가 SWF로 컴파일 됐을 때 렌더링 속도를 조절하는 방법을 제공해 주고 있습니다. 아래 그림에서 오른쪽에 FPS : 24.00 부분에서 이 속성을 조절할 수 있습니다.

 

 FPS 가 24 라는 의미는 1초에 24 프레임이 이동하는 속도로 렌더링을 하겠다는 의미입니다. 애니메이션에서 그림을 24 프레임으로 처리 했다는 의미와 같습니다. 이 FPS 는 보통 24~36 frame 으로 조절하여 사용합니다. 숫자가 커질수록 처리에 사용하는 프레임을 많이 사용하겠다는 의미이고 컴파일 된 SWF 는 더욱 부드러운 느낌을 줍니다. 반대로 작아질수록 화면이 자연스럽지 않고 끈기는 느낌을 주게 됩니다. 이러한 FPS를 조절하는 것은 작업자의 몫입니다. 물론 FPS를 높게 하여 더욱 부드러운 느낌을 주면 좋겠지만, FPS를 높게 설정 할수록 단위시간당 처리해야 되는 프레임 수가 늘어나므로 SWF가 요구 하게 되는 CPU 사용량을 증가 하게 됩니다. 더욱이 SWF는 주로 html 에 올려 웹에서 보여 지는 경우가 많기 때문에 FPS를 잘 설정 하여 테스트 하는 것이 중요합니다. 이 속성은 작업자가 fla파일 자체에서 컨트롤 할 수도 있지만 AS를 이용하여 동적으로 조작하는 것도 가능합니다. frameRate라는 속성을 조작하여, SWF가 전반적으로 CPU를 적게 차지하고 있을 때는 frameRate(fps)를 높게 주어 부드럽게 동작 시키고, 데이터를 불러 오는 작업이나, 한번에 많은 모션이 동작할 때에는 CPU의 부담을 덜어 주기 위에 frameRate는 줄이는 방법을 사용하기도 합니다.

Posted by Flash 동강
Actionscript3.02009.08.25 10:27


목차

  •  Flash platform 에 대해서
  •  Flash 와 Flex 그리고 AIR
  •  Actionscript 버젼벌 정보
  •  Flash player 버젼별 정보


Welcome to "Flash platform"




Flash platform 이란?

Flash 컨텐츠를 개발 하기 위한 방법은 여러 가지가 있다. Flash IDE (CS3, CS4) 를 이용하는 방법이나, Flex Builder 나 Flash Builder 를 이용하여 MXML 이나 Actionscript Project 를 컴파일 하는 방법, 또는 FDT 를 이용하여 컴파일 하여 SWF 를 생성하는 방법이 있다. 이 모든 Flash 컨텐츠의 결과는 SWF 형식으로 되어 있고 이러한 작업들은 Flash 컨텐츠 개발이라 한다. (곧 Flash Catalyst 가 정식 배포 되지만, 논외로 하겠다.)


얼마 전까지만 해도 Flash 와 Flex 의 네이밍은 따로 따로 존재 했다. 애초 부터 Flex Builder 라고 개발툴을 만들고, Flex 개발 방법을 강조해 오던 Adobe의 잘못으로 인해, Flex 를 새로운 툴이라고 생각하는 사람들이 많다. 하지만, Flex Builder 의 차기 버젼으로 준비되고 있던 Flex 4가 Flash Builder로 네이밍을 변경하여 나오게 되고, Flash IDE 와 Flash Bulder  그리고 Flash Catalyst 등을 이용하여 Flash 컨텐츠를 만드는 모든 것들을 Flash platform 이라고 통합 되었다.


Flash 와 Flex 그리고 AIR 는 무엇인가?



Flash 를 처음 시작 하는 사람이 가장 궁금해 하는 것이 "Flash 와 Flex 그리고 AIR가 무엇인가" 하는 것이다. 우선 AIR 에 대해 말하면 Flash player 와 같은 역할을 하는 환경을 말한다. Flash player 는 웹 브우저나, 모바일 디바이스에서 실시간으로 SWF 를 실행할 수 있는 환경을 제공해 주는데, AIR 는 데스크톱에서 Flash platform 환경에서 만들어진 어플리케이션을 설치하여 실행 시키는 환경이다. Flash player 와 같은 Runtime 환경이므로 Flash IDE 를 이용하여 만들든 Flex framework 를 이용하여 만들던 AIR 환경에서 돌아 가게 만들수 있다. 단 AIR 로 만드면 Flash player 에서 제공되지 않고, 제약 사항이 많았던 환경에서 벗어나서 여러 가지 장점을 가질 수 있다.


Flash 와 Flex 는 무엇인가? 많은 사람들이 Flash IDE (Flash 툴)로 만든 것을 Flash 컨텐츠라 하고 Flex Builder 로 만든 것을 Flex 컨텐츠 라고 알고 있다. 일부는 맞고 일부는 틀리다. Flex Builder 란 Flex framework를 구현하여 Flash 컨텐츠를 만들기 위한 툴이지만 Flex Builder 에서 Flex framework 를 사용하지 않고도 컨텐츠를 만들수 있다. 다만 Flex framework 를 사용하기에 편하게 만들어져 있다. Flex 란 단지 Framework 인데, 이 사실을 잘 알지 못하고 Flash 는 디자이너가 하는거고 Flex 는 개발자가 하는거다 라는 잘못된 생각을 가지게 된 것이고, Flash 와 Flex 가 전혀 다른 컨텐츠라고 생각하게 되는 오류를 발생한 것이다. 결론 적으로 Flash IDE와 Flex Builder는 같은 SWF 를 만들어 내는 툴이다. 다만 Flex Builder 는 Flex Framework 를 사용하기 쉽게 되어 있을 뿐이고 Flash platform 개발을 할때 코드를 짤 수 있는 비교적 편한 환경을 제공해 준다. (이클립스 기반으로 만들어져 있다.) 

Flash platform 개발언어인 Actionscript

Actionscript는 초기 Actionscript1.0 버젼을 시작하여, 현재 3.0 버젼까지 나왔다. Flash 버전 별로 나타낸 표는 다음과 같다.

 Flash player

Flash IDE

Actionscript 
 Flash player 4
 Flash 4
 AS1.0
 Flash player 5  Flash 5
 AS1.0
 Flash player 6
 Flash MX
 AS1.0
 Flash player 7
 Flash MX2004
 AS2.0
 Flash player 8
 Flash 8
 AS2.0
 Flash player 9
 Flash CS3
 AS3.0
 Flash player 10
 Flash CS4
 AS3.0

위의 표와 같이 Actionscript 는 Flash player 의 변화에 맞추어 버전업을 하였다. 버전이 2단계 밖에 바뀌지 않았지만, Actionscript1.0 과 3.0 의 차이는 전혀 다른 언어라고 봐도 될 정도로 다르다. 이 때문에 디자이너나 비 전공자가 Actionscript3.0을 시작하기 어려운 이유이기도 하다. 하지만  그리고 AS1.0 , 2.0 과 AS3.0 은 스크립트를 해석하여 컴파일 하는 엔진 자체가 다르다. Actionscript는 AVM(Actionscript Virtual Machine)에서 돌아가는데, 1.0과 2.0 은 AVM1 에서 돌아 가고 3.0은 AVM2에서 돌아 간다. AVM2가 AVM보다 엄청나게 좋은 퍼포먼스를 내므로 AS3.0 은 1.0, 2.0에 비해 몇배에서 몇십배 백배 차이가 나는 퍼포먼스를 낼수 있다.


Actionscript 의 버전별 언어 형식은 다음과 같다.


AS1.0 언어 형식

on(release){

    // 마우스가 클릭했을때 실행 되는 이벤트

}


AS2.0 언어 형식

객체.onRelease  = function(){

   // 마우스가 클릭했을때 실행 되는 이벤트

}


AS3.0 언어 형식

객체.addEventListener(MouseEvent.CLICK, hnClick);

function hnClick(e:MouseEvent):void{

   // 마우스가 클릭했을때 실행 되는 이벤트

}

 



 

AVM

Actionscript Virtual Machine(액션스크립트 가상 머신) Flash player 포함된 Actionscript 만들어진 SWF 재생하는 엔진이다. Java 실행되려면 JVM 있어야 하듯, Actionscript Java 실행되는 원리와 같다. Flash player(AVM) 설치되어 있다면 어느 디바이스라도 SWF 실행할  있다.


Flash player 에 대해

 위와 같이 Actionscript 버전이 바뀌었다고 해서, 상위 버전의 Flash player에서 AS1.0과 AS2.0 을 실행할 수 없는건 아니다. Flash player 들은 하위 호환성에 맞게 제공 되고 있으므로, 버전에 관계 없이 실행 가능 하다. 하지만, Flash player의 하위버전 즉, Flash player 9 이전 버젼에서는 Actionscript3.0 으로 만든 Flash 컨텐츠를 실행 할 수 없다. 실행 했을때는 상위 버전의 Player 를 설치하라는 경고창이 뜬다. 


'Actionscript3.0' 카테고리의 다른 글

Actionscript3.0의 DisplayList  (2) 2009.09.22
What is "Flashplatform" ?  (3) 2009.08.25
OpenCV in Flash  (2) 2009.08.21
Flash player 의 보안  (17) 2009.06.24
Posted by Flash 동강
Actionscript3.02009.06.24 13:51
Front - End 개발을 하다 보면 Flash player의 보안 범위를 판단하지 못해 곤란한 일을 겪은 일이 있을것이다.  Flash 개발자의 경우에는 미쳐 알지 못한 내부 보안 설정을 하지 않아서 데이터를 못불러 온다거나, 바뀐 Flash player 보안 정책 때문에 고생을 했을 수도 있고, UI개발자의 경우에는 Flash 개발자가 없는 상태에서 여러 상황을 판단을 해야 하지만 Flash player의 보안 규칙에 대해 알지 못해서 혼란 스러운 경우가 있을 것이다. 이 문서는 모든 Flash 개발자와 UI개발자가 알아야 할 Flash player의 보안에 대해 기초적인 내용을 다룰 것이다.

Flash player 보안 개요

Flash player의 보안은 Flash, Flex 로 만들어진 SWF 파일이 발생 시킬 수 있는 보안 이슈에 대해 정의 및 제한 하고 있다. 텍스트 파일이나 이미지, 오디오 파일들을 로드 하거나 SWF 사이에 크로스 스크립팅을 할때 발생 할 수 있는 이슈들이 모두 여기에 포함 되어 있다. 예를 들어 SWF에서 http://www.ddongkang.com 에 존재 하는 http://www.ddongkang.com/data.xml 을 로드 한다고 할때, http://www.ddongkang.com 도메인에 crossdomain.xml 파일이 없다면 SecurityError를 발생시킨다. Flash player의 보안은 위와 같은 문제에 대해 Flash player 구현상으로 올바른 접근법을 제시 하고 있다. 

기본적으로 다음과 같은 보안 규칙이 적용 된다.

  • 동일한 보안 샌드 박스의 리소스를 항상 서로 접근(Excess) 할 수 있다.
  • 원격 샌드박스의 SWF파일에서는 로컬 파일과 데이터에 접근 할 수 없다.


안 샌드 박스 타입


Actionscript는 Flashplayer가 로드하는(열거나, 불러온 파일 포함) 모든 SWF파일에 보안 샌드박스 타입이라 불리는 보안 상태를 할당한다. Flashplayer는 아래와 같이 4가지 경우의 보안 샌드 박스 타입이 존재 한다.

  • remote 샌드박스 - Flash Player는 인터넷의 SWF 파일을 포함하여 에셋을 해당 웹 사이트의 원래 도메인에 해당하는 별도의 샌드박스에 분류한다. 기본적으로 이러한 파일은 해당 서버의 모든 리소스에 대한 액세스가 허용된다. 원격 SWF 파일은 URL 정책 파일 및 Security.allowDomain() 메서드와 같은 명시적인 웹 사이트 및 제작자 권한을 사용하여 다른 도메인의 데이터에 추가로 액세스할 수 있다.

  • local-with-filesystem 샌드박스 - 보안을 위해 Flash Player는 기본적으로 모든 로컬 SWF 파일을 local-with-file-system 샌드박스를 적용한다. 이 샌드박스에서 SWF 파일은 URLLoader 클래스 등을 사용하여 로컬 파일을 읽을 수 있지만, 네트워크와는 어떤 방식으로도 통신할 수 없다.


  • local-with-networking 샌드박스 - SWF 파일을 컴파일할 때, 로컬 파일로 실행되지만 네트워크 액세스가 가능하도록 지정할 수 있다. 이러한 파일은 local-with-networking 샌드박스가 적용 된다. local-with-networking 샌드박스에 할당된 SWF 파일에서는 해당 로컬 파일에 액세스할 수 없다. 대신, SWF 파일은 네트워크의 데이터에 액세스할 수 있다. 하지만 URL 정책 파일이나 Security.allowDomain() 메서드에 대한 호출을 통해 권한이 부여되지 않는 한 local-with-networking SWF 파일은 여전히 네트워크의 데이터를 읽을 수 없다. 이러한 권한을 부여하려면 URL 정책 파일에서<allow-access-from domain="*"/> 또는 Security.allowDomain("*")을 사용하여 모든 도메인에 권한을 부여해야 한다.


  • local-trusted 샌드박스 - 사용자나 설치 프로그램에 의해 신뢰할 수 있는 파일로 등록된 로컬 SWF 파일은 local-trusted 샌드박스에 배치된다. 시스템 관리자와 사용자는 보안 고려 사항에 따라 local-trusted 샌드박스에 또는 해당 샌드박스로부터 로컬 SWF 파일을 재할당하거나 이동할 수도 있다. local-trusted 샌드박스에 할당된 SWF 파일은 다른 SWF 파일과 상호 작용하고 원격이나 로컬의 모든 위치에서 데이터를 로드할 수 있다.


 각각의 보안 샌드 박스 타입은 종류에 따라 Flashplayer의 보안 수행 범위가 정해 진다. 다음은 모든 보안 샌드 박스 타입에서 금지 할 가능성이 수도 외부 작업 들이다.

  • 데이터 불러오기
  • 데이터에 접근하기 
  • 크로스 스크립팅 
  • 외부 URL에 데이터 보내기
  • 사용자의 카메라와 마이크로폰에 접근하기
  • 로컬 공유 객체에 접근하기
  • 사용자가 선택한 파일 업로드 또는 다운로드
  • .swf 파일에서의 HTML (javascript) 페이지 스크립팅과 그 반대 작업
  • LocalConnection 채널에 연결하기


보안 샌드 박스 타입이 할당 되는 방법

.SWF 파일의 보안 샌드박스 타입을 결정하기 위해 액션스크립트는먼저 .SWF 파일을 불러오거나 연 위치를 고려한다. 원격 샌드 박스(주로 에서 구동되는 SWF)는 remote 샌드박스가 적용되고, 컴파일러 설정, 환경 설정 파일등 로컬에서 구동되는 SWF 컨텐츠는 local-with-filesystem, local-with-networking, local-trusted 샌드박스에서 선택하여 작업 해야 한다.(각각 보안 기준이 다르다)

UI개발시 고려해야 할 Flash player의 보안

주로 UI개발시 고려해야 하는 상황은 웹이기 떄문에 remote 샌드박스를 고려 하면 된다. 아래 4가지 경우는 UI개발과 Flash개발 사이에 발생 할 수 있는 보안 이슈들이다.

1. SWF에서 외부 파일 로드 (이미지,오디오,텍스트파일 등등)

아무런 통신을 안하는 SWF에 대해서는 이러한 보안 이슈에 대해 주의해야 할 점들이 없지만, 대부분은 SWF들은 데이터를 불러오는 작업을 한다. SWF안에서 좀 더 깔끔한 폰트 처리를 위해서 font.swf를 로드 한다거나, 외부 데이터 파일을 불러와서 뿌려줘야 되는 경우가 종종 발생한다. 이때 font.swf 파일이나, data.xml 파일이 메인이 되는 SWF와 같은 도메인에 있다면 따로 보안 설정을 안해줘도 되지만, 다른 도메인에 존재 할 경우에는 설정을 해 줘야 한다. 좀 더 쉬운 상황 설명을 위해 로딩의 주체가 되는 SWF 파일을 main.swf , 로드 되어 지는 파일인 폰트 파일을 font.swf, 로드 되어 지는 데이터 파일을 data.xml 이라고 하자.

상황 1 .3개의 SWF파일들은 모두 http://www.ddongkang.com/flash/ 폴더안에 존재 하고 main.swf 에서 font.swf 와 data.xml 를 로드 하는 경우

모두 같은 폴더에 존재 하기 때문에 따로 보안 설정을 해줄 필요가 없다.

상황 2 .main.swf 파일은 http://www.ddongkang.com/flash/ 폴더에 존재 하고, font.swf 와 data.xml 은 http://www.daum.net/flash/data/ 에 존재 하는 경우

주체가 되는 main.swf 와 로드 되어 지는 데이터가 도메인에 존재 하기 때문에 Flash player의 보안에 막히게 된다. main.swf 에서 font.swf 와 data.xml 을 로드 하기 전에 main.swf 는 데이터가 존재 하는 http://www.daum.net 에 크로스 도메인 파일(정책파일)이 존재 하는지 확인 하고 그 설정이 맞는다면 로드를 하게 된다. (따로 확인 하지 않아도 Flash에서 Load 를 하게 되면 crossdomain.xml 파일을 로드 한다. 크로스 도메인 파일의 이름을 바꿔서 로드 하고 싶은 경우
Security.loadPolicyFile("파일URL"); 을 로드 하기 전에 호출 하면 된다. 주의 해야 할 점은 crossdomain.xml 파일의 위치이다. main.swf 가 data.xml의 로드를 시작 하면 Flashplayer에서는 우선 data.xml 파일이 존재 하는 폴더에서 crossdomain.xml 파일이 존재 하는지 확인 한다. 존재하면 바로 확인이 되어 로드를 하겠지만, 존재 하지 않는다면 상위 폴더에 crossdomain.xml 파일이 존재 하는지 확인하게 된다. 처음에 flash/data/ 폴더를 확인 하고 없으면 flash/ 폴더를 확인한다. crossdomain.xml(정책 파일)이 계속 존재 하지 않는다면 계속 상위 폴더에서 확인하고 결국엔 서버의 루트까지 확인하게 된다. 위의 예제에서는 http://www.daum.net 이 루트이다. 루트에도 crossdomain.xml(정책파일)이 존재 하지 않으면 Flashplayer는 로드를 못하게 되고 보안 에러를 발생 시키게 된다. 그러므로 상황에 따라 crossdomain.xml 파일의 위치를 잘 판단하여 업로드 해야 한다.

상황 3 .이미지 오디오 파일 로드

이미지 파일이나 오디오 파일을 로드 할때도 crossdomain.xml(정책파일)이 필요 하다. 하지만 정책 파일이 있더라도 Actionscript에서 보안 설정을 안해주면 이미지 파일의 크기를 조작하거나, 오디오 파일을 불러와서 조작 할 수 없다. 이미지를 조작할때 이러한 문제가 자주 발생하는데, 보안 설정을 안해주고 이미지의 크기가 변하지 않는 다고 이상하게 생각했던 경험을 가지고 있는 사람들이 많이 있을것이다. Flash 상에서 이미지를 로드 하는 것은 결국에는 Flash player에서 이미지를 BitmapData 로 가지고 있는 것이기 때문에 다음과 같은 설정을 해줘야만 로드된 이미지의 BitmapData에 접근할 수 있어서 이미지 크기 조작과 같은 동작이 가능하다.

LoaderContext 설정 방법 소스
// 정책파일이 기본 위치에 없다면
Security.loadPolicyFile("정책파일의위치");			
var loadcontext:LoaderContext = new LoaderContext();
loadcontext.checkPolicyFile = true;
var loader:Loader = new Loader();
loader.load(new URLRequest("이미지 URL"),loadcontext);			

사운드의 경우도 마찬가지로 다음과 같은 설정을 해줘야 한다.

SoundLoaderContext 설정 방법 소스
// 정책파일이 기본 위치에 없다면
Security.loadPolicyFile("정책파일의위치");			
var soundcontext:SoundLoaderContext = new SoundLoaderContext();
soundcontext.checkPolicyFile = true;
var sloader:Sound = new Sound();
sloader.load(new URLRequest("오디오 URL"),soundcontext);			

crossdomain.xml (정책 파일)



위의 정책파일은 www.ddongkang.com 과 ddongkang.com 에 대해 접근 허락을 나타내고 있다. 더 자세한 정책 파일 옵션은 웹 사이트 컨트롤(정책파일) 에서 확인할 수 있다.



2. SWF에서 HTML 브라우져 객체의 접근

AS3.0의 통신 - 브라우저와의 통신 에서 다뤘듯이 SWF는 자신을 가지고 있는 HTML객체와 통신을 할 수 있다. SWF를 HTML에 Embed 할때 allowScriptAccess매개변수를 설정하는데, 이 매개변수는 SWF파일 내에서 HTML에 있는 객체를 접근하는 것에 대한 기능을 제어한다.


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
             id="FlashVar" width="500" height="375"
             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
         <param name="movie" value="FlashVar.swf" />
         <param name="quality" value="high" />
         <param name="bgcolor" value="#869ca7" />
         <param name="allowScriptAccess" value="sameDomain" />
    <param name="FlashVars" value="data0=DongHyuk&data1=동혁&data2=http:www.ddongkang.com" />
         <embed src="FlashVar.swf" quality="high" bgcolor="#869ca7"
             width="500" height="375" name="FlashVar" align="middle"
             play="true" loop="false" quality="high" allowScriptAccess="sameDomain"
             type="application/x-shockwave-flash"
             FlashVars="data0=DongHyuk&data1=동혁&data2=http:www.ddongkang.com"
             pluginspage="http://www.macromedia.com/go/getflashplayer">
         </embed>
 </object>


allowSCriptAccess는 "always","sameDomain","never" 값중 하나를 가질 수 있다.

allowScriptAccess="always" : SWF파일은 HTML 페이지와 다른 도메인에 있는 경우에도 SWF파일이 포함된 HTML페이지와 통신 할 수 있다.

allowScriptAccess="sameDomain" : SWF파일은 HTML 페이지와 동일한 도메인에 속해 있는 경우에만 SWF파일이 포함된 HTML 페이지와 통신할 수 있다.

allowScriptAccess="never" : SWF파일에서 어떠한 HTML페이지와도 통신 할 수 없다.

allowScriptAccess에 따라 ExternalInterface.call 을 이용하여 HTML 에 있는 javascript 함수를 자유롭게 호출 할 수 있다. 하지만, HTML 객체에서 SWF 객체에 접근 할 때는 SWF 내부의 보안 정책이 필요 하다.  javascript에서 아무런 제약 없이 SWF에 있는 모든 객체들에 접근 할 수 있다면, 심각한 보안 문제가 발생할 것이다.

상황 1. 같은 도메인에 HTML과 SWF파일이 존재 하는 경우(html파일이 swf파일을 포함할때)

같은 도메인에 존재 하기 때문에 따로 보안 설정을 안해줘도 된다. 예를 들어 http://www.ddongkang.com/html/ 폴더에 index.html이 있고 http://www.ddongkang/html/flash/ 에 swf파일이 존재할 경우 HTML에서 SWF에 존재 하는 객체에 제한 없이 접근 할 수 있다.

상황 2. 다른 도메인에 HTML과 SWF파일이 존재 하는 경우(html파일이 swf파일을 포함할때)

index.html 파일이 http://www.daum.net/html/ 폴더에 있고, movie.swf파일이 http://www.ddongkang.com/html/flash 폴더에 있을 경우 movie.swf파일에서 반드시 Security.allowDomain("http://www.daum.net/html/"); 해줘야 index.html 파일에서 movie.swf 에 있는 객체로 접근이 가능해 진다. AS3.0의 통신 - 브라우저와의 통신 에서 다뤘듯이 ExternalInterface.addCallback 을 이용하여 html 에서 swf에 있는 메소드를 실행 하는 것이 이 경우에 해당 한다.

3. 크로스 스크립팅

AS3.0 부터는 서로 다른 SWF 간에 크로스 스크립팅이 가능하다. 크로스스크립팅이란, 아래 그림과 같이 swfA.swf 에서 swfB.swf 를 로드 했을 경우 swfA.swf 에서 swfB.swf의 객체에 접근하여 스크립팅 하거나 swfB.swf 에서 swfA.swf로 접근하여 스크립팅 하는 것을 말합니다. 두개의 SWF파일이 같은 도메인에 있으면 따로 보안 설정을 안해줘도 되지만, 다른 도메인에 있으면 설정을 해 줘야 한다



siteA.com 에 있는 swfA.swf가 siteB.com 에 있는 swfB.swf를 로드 하여 크로스 스크립팅 하는 경우 swfB.swf 에서 Security.allowDomain("siteA.com") 를 호출해야만 swfA.swf에서 swfB.swf로의 접근이 가능하다. allowDomain으로 설정된 보안은 비대칭적이기 때문에 swfB.swf 에서는 swfA.swf 로 크로스 스크립팅을 할 수 없다. swfA.swf 에서도 위와 마찬가지로 Security.allowDomain("siteB.com") 이라 해줘야 쌍방향으로 크로스 스크립팅이 가능하다. 더 자세한 내용은
Adobe Actionscript3.0 Document - Security 에서 확인 할 수 있다.


이 문서에서는 Flash player의 보안중 극히 일부분만을 다루었다. 그 만큼 방대한 보안 설정이 존재 하고 때에 따라 보안 규약을 맞춰서 작업해야 발생할 가능성이 있는 보안 취약점들은 미리 파악하여 대처 할 수 있다. 지금 까지 나온 다양한 이슈들에 대해 Adobe Flash Developer Center - Security 에서 다루고 있으니 참고하라.



Posted by Flash 동강
Actionscript3.02009.02.06 01:14

문서 원본 : AdobeRIA 기술문서


작성된 날짜 : 2009-02
저자 : 강동혁
저자 소개 : Daum communications에서 UI 개발 업무를 하고 있으며, Flash 커뮤니티에서 ‘동강’ 이라는 닉네임으로 활동 중이다. 뭐든지 사용하기 편해야 한다는 생각으로 개발을 하고 있으며, RIA와 HCI에 관심이 많다. 

Blog : www.ddongkang.com

목차
1. 서론 : 왜 Actionscript 3.0 인가? 

2. 본론 : Actionscript3.0을 배워야 하는 이유
  - 향상된 연산속도                          
  - 보다 엄격한 디버깅 기능
  - 크로스 스크립팅
  - OOP를 위한 지원
  - Flashplatform의 언어
  - Flash API와 Display 및 Event

3. 결론 : 다음 편 예고


 Actionscript 3.0 사용해야만 하는가?

 Actionscript 3.0(이하 AS3.0) 소개되고, Flash CS3 나와서 우리에게 정식으로  모습을보여   2 가까이 되었다. 이미 웹에는 AS3.0으로 만든 많은 결과물이 우리의 욕구를 충족해 주고 있다. 웹뿐만 아니라 AIR 이용한 데스크톱 애플리케이션과  밖에 여러 디바이스에서 AS3.0 기술을 느낄  있다. AS3.0 소개되고 나서, 많은 개발자와 디자이너는 코드의 유연함과 AVM2 강력함을 직접 체험하고 더욱  멋진 결과물을 만들  있는 무기를갖게 되었다. 반면에, 여러 가지 이유가 있지만 AS3.0 배우기를 꺼리거나, 어려워하는 사람이 많이 있음을 커뮤니티에서 느낄  있었다. 그래서  기술 문서는 AS3.0으로 Flash 플랫폼 개발을 시작하고 싶거나, AS2.0 사용하고 있지만 AS3.0 배우기를 원하는 디자이너와 개발자를 대상으로 하고, AS2.0 비해 달라진 점과, 강력해진 점을 중점적으로 다루고 Flash CS4 AS3.0 이야기할 것이다.

 

-   AS3.0인가?

 

 커뮤니티에 많이 올라오는   이런 질문이 있다.

Flash 시작하려고 하는데, AS1.0부터 순서대로 공부해야 하나요?

 무수히 많은 댓글이 달리고, 댓글 대부분은 AS3.0으로 시작해도 무방하다는 의견이다. 물론 나도  의견에 전적으로 동의한다. 물론 AS1.0 AS3.0까지 순서대로 공부하면, Actionscript 원리를 습득하고, AS3.0 배우는 것이라  수월해지기는 하겠지만, 시간 투자에 비해 얻는 것은 적다. 그리고 AS1.0, 2.0 비해 AS3.0 달라진 개념이 많아 AS2.0 주로 사용하는 디자이너나 개발자가 AS3.0으로 넘어오지 못하는 이유가 되기도 한다. AS3.0 배우라고 권장하는 사람들은 Java 공부를 하라고 권유하기도 한다.  이유가 AS3.0 컴파일하는 AVM2 JVM(Java Virtual Machine) 기반으로 하기 때문에, 문법 면에서 아주 비슷하다. 더구나 많은 양질의 Java 서적을 시중에서 쉽게 구해   있으니, 아직 국내에 뚜렷하게 AS3.0 대한 기초 개념서가 나오지 않은 상태에는 Java 서적을 보는  현명한 선택일지도 모른다. 물론 Java 대해  안다면 필요 없는 일이다.

AVM

Actionscript Virtual Machine(액션스크립트 가상 머신) Flash player 포함된 Actionscript 만들어진 SWF 재생하는 엔진이다. Java 실행되려면 JVM 있어야 하듯, Actionscript Java 실행되는 원리와 같다. Flash player(AVM) 설치되어 있다면 어느 디바이스라도 SWF 실행할  있다.


    Actionscript
에는 버전이 있다. 다른 언어에도 분명 버전은 존재하지만, 다른 언어에서보다Actionscript에서  부분을 중요하게 봐야 하는 이유는, AS1.0 2.0 같은 런타임(AVM1)에서 실행되지만 AS3.0 AVM2에서 실행되기 때문이다. 또한 AS2.0에서 AS3.0으로 넘어오면서 완전 다른 언어라고 착각할 정도로 문법 구조에서 많은 부분이 바뀌었다. 그래서 AS1.02.0 배우지 않아도 AS3.0    있다. AS3.0 공개된   2년이 지났지만, 아직 많은 사람이 AS1.0 2.0 사용 중이고  상에는 AS1.0, 2.0 시절에 만들어진 SWF 비율이  높은 비율을 차지하고 있다. 하지만  추세는 금방 뒤집어질 정도의 차이다.


 AS3.0 연산 속도가 이전 버전에 비해 최대   빨라졌다는 평가를 받는다. AS1.0 2.0 프로그래머에게 외면 아닌 외면을 받았던 이유도 C Java 비해 연산이 느렸기 때문이다. 하지만 AS3.0 들어와서는  문제가 어느 정도 해소되었다. 속도뿐만 아니라 더욱 강력한 Flash API 기능을 가지고 있다. 하지만  아직까지 AS2.0 사용하는 것일까?  물음에 대한 다양한 이슈가 존재한다.


1.
       
Flash player 호환성에 따른 문제

많은 사용자가 이용하는 서비스는, 모든 사람에게 똑같이 보여야 한다는 점이 최우선고려사항이다. AS3.0 재생할  있는 Flash player 9 보급률이 이미 98% 넘었지만, 아직 Flash player 8 설치된 나머지를 위해 AS2.0으로 작업하는 경우가 있다. 간단한 코딩이나 모션 작업 같은 경우에는 AVM2 컴파일했을  약간의 이익을   있겠지만 익숙하지 않은 AS3.0 사용으로 작업 능률이 떨어질 수도 있다는  단점이다.  보급률 문제는 점점 많은 사람이 Flash player 9 이상을 설치함에 따라 빠르게 해결될  있는 문제다. 

그림1. Flash player 보급률

2.       AS3.0을 다룰 수 있는 사람 부족

AS3.0이 나오고 난 직후에는 Flash 프로젝트에 AS3.0을 도입하길 꺼려했다결과물이 나와도 유지 보수할 인력이 없다는 이유였다하지만 2년이 지난 후 상황은 점점 나아지고 있다여러 책과 커뮤니티 기술 문서 덕에 AS3.0을 사용하는 사람도 많이 늘어났으며덩달아 상당수 프로젝트가 AS3.0으로 진행되고 있다.


3.       AS3.0은 어렵다

AS3.0은 분명 이전 버전보다시작하기 어렵다하지만 원리를 익히고 나면 이전 버전에 비해 휠씬 편리함을 느낄 수 있을 것이다왜 어렵게 느껴질까간단하게 컴퓨터에 있는 부품을 비유해 보겠다. AS2.0까지 객체를 다루고 구현하는 방법은 주로 이미 만들어진 기능을 사용하는 방식이었다예를 들어 이미 만들어져 있는 사운드 카드를 컴퓨터에 설치하는 것처럼, AS2.0는 많은 기능을 손 쉽게 가져다 쓸 수 있었다하지만 AS2.0에서 사운드 카드 자체를 만들 수는 없었다. AS2.0의 기본 기능들을 사운드 카드라 비유했다면 AS3.0의 기본 기능들은 사운드 카드 안에 들어 있는 각각의 부품이다(저항이나다이오드 같은 사운드 카드를 구성하는 부품들). 각각의 부품들로 이미 만들어져 있는 것이 아니라(AS3.0에서 제공되는 Flash API에서는 휠씬 많은 기능을 구현하여 제공한다), 자신만의 독창적인 것을 만들 수 있다. AS3.0을 시작하기 어려운 이유가 바로 여기에 있다부품 종류가 너무 많아 다 외워야 할 것 같은 느낌이 들기 때문이다하지만 뭐든 처음 시작할 때 가장 고생하는 법이다조금만 인내하면서 원리를 파악해 보자그럼 AS3.0이 어느 순간 다르게 보일 것이다 

AS2.0 사용자가 AS3.0으로 넘어오지 못하는(필요성을 느끼지 않아 AS2.0을 사용하는 것은 제외가장 큰 이유는 자신이 잘 하는 AS2.0으로는 간단히 만들 수 있는데문법도 제대로 알지 못하는 AS3.0으로 구현하기가 답답하고 힘들어서일 것이다이 글을 쓰는 나 자신도, AS2.0을 주로 사용하다 AS3.0을 사용했을 때 답답함을 많이 느꼈기 때문에 그 마음을 잘 안다하지만 조금만 고생한다면 몇 종류 안 되는 만들어진 기능이 아니라,마음대로 조절할 수 있는 자신만의 기능을 만드는 즐거움과 더욱 강력해진 Flash API(이미 구현되어 있어서제공되는 객체들)를 직접 느낄 수 있을 것이다.


 AS3.0의 좋은 점을 설명한다고 해서, AS1.0 2.0이 나쁘다는 말은 아니다그 자체로 충분히 좋은 언어다. AS3.0에 비해 구조가 더 직관적이고 이해하기 쉽다는 장점을 가지고 있다세계적인 Flash 아티스트인 Koshua Davis나 Erik Natzke도 작업을 할 때 AS1.0 2.0을 사용한다고 한다그만큼 비교적 쉽고구현이 간편하다하지만 AS3.0은 이러한 AS2.0의 장점을 다 커버하고도 남을 만한 장점을 가지고 있다지금부터  AS3.0  써야만 하는가? 대해 구체적으로 이야기  보겠다.

 

-AS3.0을 배워야 하는 이유

AS3.0이 완성도 있는 스펙으로 나온 계기는 Adobe Macromedia를 인수하면서 유능한 개발자가 많이 Flash 개발에 투입되었기 때문일 것이다. Flash 8 AS2.0 기반의 향상된 언어 스펙으로 런칭되고곧 바로 Adobe 개발자들은 Flash 9에 대한 준비를 하면서 AVM1 스펙으로 갈 수 없다고 생각하였다고 한다. AVM1 스펙으로는 사용자들에게 만족할 만한 속도와 메모리 관리를 제공하지 못하기 때문이었다그리고 결과적으로 AVM2라는 높은 성능을 내는 가상 머신을 만든다.


1.      향상된 연산 속도

기존 Flash 사용자들이 AS3.0이 나오고 난 뒤 가장 기뻐했던 것은 AS3.0의 속도가 놀라울 정도로 향상되었단 소식을 들었기 때문이다. Adobe AS3.0 도움말에는 속도 향상을 다음과 같이 기술하고 있다.

While Actionscript3.0 is not required for content that runs in Adobe Flash Player 9, it allows performance improvements that are available only with the new Actionscript Virtual Machine. Actionscript3.0 code can execute up to ten times faster than legacy Actionscript code

AS3.0만을 가지고 있는 코드(외부 데이터를 가지고 있지 않는 경우)를 실행할 경우 이전 버전에 비해 열 배의 속도 향상이 된다. Flash CS4에서의 AS2.0 AS3.0의 연산속도 비교는 그림 2와 같다.


그림2.

 

그림3 Flash CS4에서의 AS2.0(AVM1)과 AS3.0(AVM2) 수행 시간

 그림 2, 3을 보아 알 수 있듯이 같은 코드를 실행하였을 때, Flash CS4에서 AS2.0 AS3.0은 엄청난 수행 시간 차이가 났다위의 예제를 수십 번 반복했을 때도 결과는 같게 나왔다또한 수행 시간 격차를 줄일 의도로 for문의 수행 횟수를 1000에서 100000으로 올려 보았다. AVM2(AS3.0)에서는 제대로 수행되었지만 AVM1(AS2.0)에서는 그림 4와 같은 경고 팝업 메시지가 떴다.

그림 4 연산이 많은 코드를 실행했을 때 나타나는 경고 메시지

물론 코드와 컴퓨터 상태에 따라 수행 시간 차이는 줄어 들 수 있겠지만, AVM2가 AVM1에 비해 월등히 빠른 속도를 낸다는 것은 의심한 여지가 없는 사실이다또한 AVM2의 향상된 기능을 사용하려면 AS3.0을 사용해야 한다이러한 차이는 AS3.0이 내부적으로 새로운 바이트 코드 명령어를 도입해 객체 추적 시스템 개선자료구조 시스템 개선 작업을 함으로써 가능해졌다.

 

-         객체 추적 시스템 개선

AS2.0에서는 prototype을 사용하여이미 정의되어 있는 MovieClip이나 기타 객체들에 속성 메서드를 추가할 수 있었다코드를 짤 때 아무 곳이나, prototype을 사용하면 뭐든 기존 객체에 메서드를 추가할 수 있어 편리했다하지만 이렇게 동적으로 객체를 정의하는 방법은 굉장히 비효율적이었다. Flash player prototype을 사용했기 때문에 컴파일할 때 알아야 하는 객체 정보를 다시 추적해야 하는 문제가 있었다또한 AVM1에서는 prototype을 사용하든사용하지 않든 모든 객체의 정보 추적을 위한 테이블을 만들어 놓기 때문에 상당한 메모리를 쓰고 수행 속도를 떨어뜨리는 요인이 되기도 하였다그래서 AVM2에서는 기본적인 객체 선언은 정적(뒤에 다루는 봉인 클래스를 참고)으로 하게 했고객체를 선언할 때 dynamic 키워드를 사용해 동적으로 객체를 조작할 수 있는 기능을 남겨 두었다하지만 dynamic 키워드를 사용하는 것은 성능을 저하시키는 요인이 될 수 있다.

 

-         객체의 타입 선언

위에서 언급했듯이 AS2.0에서는 객체가 동적으로 생성되었기 때문에 객체의 타입 유형(런타임 유형)을 선언할 필요가 없었다. AS3.0에서 객체가 정적으로 생각되는 방식으로 바뀜에 따라 런타임 유형을 선언해줘야만 하고이렇게 객체 타입을 선언해 객체의 정보를 AVM에 미리 알려주는 방식은 시스템의 유형 안전성을 높이고메모리를 좀 더 효율적으로 관리하는 데 도움이 된다(AS2.0의 경우 내부적으로동적으로 만들어진 객체의 추적을 위한 메모리 테이블이 필요하다).


2.      더 엄격한 디버깅 기능

 AS3.0에서는 이전 버전보다 엄격한 디버깅 기능 및 런타임 오류 상황을 알려 준다. AS2.0을 사용하면 런타임 오류 상황을 알려주지 않는 경우가 많아서 어떤 이유인지 모르고 SWF가 다운되어 버리거나 메모리가 새는 경우가 있었다하지만 AS3.0의 더 엄격한 디버깅 기능은 어디에서 어떤 오류가 발생했는지 자세히 알려주므로 프로그램의 완성도를 높이는 데 기여하고 있다그리고 Flash player 9부터는 Debug 버전의 Flash player가 제공되어 브라우저에서 실행되는 SWF 파일의 에러를 실시간으로 확인할 수 있다.            


3.      크로스 스크립팅

 크로스 스크립팅이란, A.swf B.swf가 있을 경우 A에서 B를 로드한 후(B A 객체의 자식 객체가 된다) A에서 B.swf 파일의 변수객체속성메서드에 접근할 수 있는 기능을 말한다. AS3.0에서 크로스 스크립팅이 가능해지고 난 후에야 비로소 Flash 프로그래밍의 디자인 부분과 개발 부분을 확실하게 나눠서 처리할 수 있는 기반이 만들어졌다. Flash 콘텐츠를 만들기 위해 디자이너들은 여러 가지 도구를 이용하여 나온 작업 소스를 Flash로 객체화한 후 B.swf라는 파일을 Flash 개발자에게 넘겨 준다디자이너가 넘겨준 B.swf에는 디자이너가 작업한 무수히 많은 객체가 Flash CS3부터 제공된 ‘Linkage’라는 기능을 통해 객체화되어 있다. B.swf를 받은 개발자들은 디자이너들이 만들어 놓은 시안과 네이밍(객체의 이름즉 클래스 이름이다)대로 작업을 하면 된다디자인이 바뀌면 개발자가 fla 파일을 넘겨 줘야 한다거나포토샵으로 만든 디자인 파일을 fla 파일에 임포트할 필요 없이디자이너가 수정한 B.swf를 넘겨 주면 된다개발자들은 Loader로 B.swf를 로드한 후에 약간의 보안 처리만 해 준다면 손 쉽게 디자이너가 만든 객체를 불러와 사용할 수 있다이렇게 각각의 역할을 확실하게 구분해 줄 수 있게 도움을 주는 기능이 크로스 스크립팅 이다또한 중복 데이터 등 라이브러리의 관리 소홀로 인한 SWF의 용량 문제를 피하는 방법이기도 하다또한 따로 작업한 SWF를 하나의 부모 SWF로 로드하여자식 객체처럼 사용할 수 있는 방법을 제공한다.


그림 5. 크로스 스크립팅

 4.      객체 지향 프로그래밍(OOP)을 위한 지원


-  봉인 클래스

 AS3.0을 처음 접한 Java 개발자는 즐거웠을 것이다. Java와 굉장히 구조가 비슷하기 때문이다혹자는 AS3.0에 와서야 비로소 프로그램 언어다운 모습을 갖췄다고 말한다그 이유는 객체 지향 프로그래밍을 위한 다양한 지원을 하기 때문이다우선 AS3.0에서는 봉인 클래스 개념이 도입되었다. MovieClip으로 모든 것을 처리했던 AS2.0에서는 MovieClip이 동적으로 생성되기 때문에 이를 위한 메모리가 추가로 필요했다하지만 봉인 클래스 개념이 도입되면서 dynamic 클래스로 지정하지 않는 한 속성과 메서드를 동적으로 추가할 수 없었다하지만 이 덕에 불필요한 수정에 대해 객체를 보호하고덩달아 메모리 효율을 높일 수 있게 되었다.

- override

  override란 상위 클래스를 상속 받은 하위 클래스에서 상위 클래스의 함수를 변경하여 사용하는 것을 말한다그림 6에서, Parent를 상속 받은 Child override를 이용해 Parent init() 메서드를 재정의하고 있다이렇게 상속에 의한 확장을 할 때에 override를 이용하여 코드의 유연성을 더해주고객체 지향 프로그래밍을 도와 주는 기능이 AS3.0부터 도입됐다. 




그림 6. override  쓰임


-         Package


AS3.0에서는 클래스를 package 안에 정의하여 package로 클래스 경로를 지정한다이 경로는 클래스를 import로 로드할 때 위치 값으로 참조된다. Package 안에는 한 개 이상의 클래스가 존재할 수 없지만 package 밖에는 package 안에 있는 클래스 외의 클래스가 존재할 수 있다하지만 package 밖에 정의된 클래스는 외부에서 접근이 불가능하다그러므로 이러한 특성을 이용해 Singleton(디자인 패턴)을 구현하기도 한다.



5.       Flash, Flex, AIR  모든 Flash 플랫폼의 언어

 AS3.0 Flash Flex 그리고 AIR뿐만 아니라 앞으로 나올 모든 Flash 플랫폼의 기본이 되는 언어가  것이다최소한  언어를 기반으로 하여새롭게 업그레이드되어  것이다언어하나를 배워서 서너 가지를 동시에   있다는 것은 Flash 처음 배우는 사람이나 전부터Flash 플랫폼을 접해 왔던 사람이나욕심이 가는 장점 중에 장점일 것이다.


6.      강력한 Flash API, 달라진 Display 시각 표현 방법 및 이벤트

 AS3.0으로 풀어 낼 수 있는 Flash player API는 정말 다양해졌고이러한 객체들을 화면에 보여 주는 기능을 관장하는 Display 시각표현 방법이 바뀌었다또한 이벤트 핸들링 방식도 더욱 많은 것을 표현하고 조작할 수 있게 바뀌었다이 새로운 기능에 대한 것은 다음 편에 더욱 자세히 다루겠다.


글을 마치면서

지금까지 AS3.0 어떤 점이 달라졌고 이전 버전에 비해 업그레이드된 스펙이 우리에게 영향을 미칠  있는 좋은 점을 중심으로 이야기해 보았다분명 AS3.0 AS2.0 길들어진 사람에게는  나라 언어처럼 보일지도 모른다특히 AS2.0 현란하게 구사 하는 사람일수록 AS3.0 써야 하는 필요성을  느낄 것이다하지만, Flash 도구가 간단한 애니메이션을 만들  있는 도구에서 애플리케이션을 구축할  있을 정도로 발전한 것처럼새로운 것을 익혀서 우리에게 돌아 오는 것은 스트레스가 아니라 좋은 작품과 무한한 상상력일 것이다.

다음 편에서는 AS2.0에서 AS3.0으로 버전이 올라가면서 어떤 점이 달라졌는지 구체적으로 살펴볼 것이다. AS2.0 사용하는 사람들이라면다음 편이 AS3.0 이해하는  도움이 많이  것이다.




Posted by Flash 동강
Actionscript3.02009.01.20 23:49

 커뮤니티의 질문들 중에서 단연 1위를 달리고 있는 "Actionscript 학습법" 에 대해, 오직 제 견해와 경험을 통해 작성해 보려고 합니다.

- Flash MX , Flash 8, Flash CS3, Flash CS4 먼놈의 버젼이 이렇게 많은 건지 많이 혼동 됩니다.
 
시중에 나와 있는 책들을 보면 벌써 CS4가 출시 되었음에도 불구 하고, MX 버젼과 그 이하 버젼의 책들을 종종 보게 됩니다. 당연히 Flash를 처음 시작 해야 겠다고, 다짐하고 서점에 간 분들은 혼동 될 수 밖에 없지요. 보통 액션 스크립트 책은 Flash 라는 제목을 작게 표기 하고 Actionscript를 크게 표기 하기 때문에(?) Flash 8 이라 크게 적혀 있는 책을 고르게 됩니다. 그리고 카페에 와서 물어 봅니다. " Flash 8 책 샀는데, 이걸로 공부 시작 해도 될까요? " 많은 분들이 처음 시작 할때 혼동이 많았을 거라 생각 됩니다. 

 
Flash MX : AS1.0 과 AS2.0 지원
Flash 8 : AS1.0 과 AS2.0 지원 , AS2.0의 스펙이 향상 되었습니다.

Flash CS3 : AS3.0 지원, AS1.0 및 2.0 으로 작업 할 수 있으나, AS3.0 과는 같이 사용할 수 없다.
Flash CS4 : AS3.0 지원, AS3.0의 스펙이 향상 되었습니다.
 

버젼 별로 제공 하고 있는 언어 스펙은 위와 같습니다. 책을 고를 떄는 CS3 이나 CS4 라고 써 있는 것이나, Actionscript3.0 이라고 써 있는 책을 골라야 합니다. 중요한 점은 AS2.0 과 AS3.0 은 완전 다른 문법을 가지고 있는 언어 라는 점 입니다. (비슷한 부분이 많이 존재 하지만 ) AS2.0 에서 업그레이드 한 언어라고 보기엔 Java 와 더 닮아 있는 언어 입니다. 

-무슨 버젼으로 공부를 시작 해야 되나요?
 
 현재 Flash 최신 버젼은 Flash CS4 입니다. 스크립트는 AS1.0, 2.0, 3.0 모두 지원 합니다. Flash는 배우고 싶은데, 어떤 툴 버젼으로 어떤 언어 버젼을 공부 해야 해야 할까요. 

 회사에서 흥쾌히 Flash CS4를 제공해 준다면 Flash CS4로 시작 하는 것이 좋습니다. 언어야 뭐든 다 지원을 하고 있고, 무엇보다 Flash player10 을 지원 하므로 해서 Flash CS4에서만 구현 할 수 있는 다양한 스펙들을 비교적 손 쉽게 사용이 가능 합니다. 여건이 안된다면 Flash CS3를 사용해도 무관 합니다. Flash CS4에 대한 문서 라든지 책이 부족하고, 거의 대부분이 Flash CS3 의 Actionscript3.0 스펙을 기본으로 하고 있기 때문에 Flash CS3후에 추가로 Flash CS4에서 제공 하는 기능을 배우면 됩니다. 
 
 어떤 버젼으로 시작 해야 할까요. 많은 입문자들이 가장 혼동을 일으키고 있는 부분 입니다. Actionscript면 똑같은 Actionscript라고 생각하고 아무 책이나 덜컥 샀다가는 후회 합니다. 
Actionscript는 현재 3.0 버젼 까지 나와 있습니다. AS1.0 , 2.0, 3.0 모두 기본적인 프로그래밍 문법을 따르고 있지만, AS1.0 . 2.0 과 AS3.0 은 큰 차이가 있습니다. AS1.0 과 AS2.0 은 하나의 fla 에서 두 버젼을 동시에 사용가능 합니다. 하지만 AS3.0은 오직 AS3.0 단일로만 사용 가능 합니다. 그 이유는 Actionscript Virtual machine 이라 불리는 엔진이 다르기 때문입니다. AS1.0, 2.0 은 AVM1 을 사용하고 AS3.0 은 AVM2 를 사용 합니다. 

 어떤 언어가 좋다고는 견해 차이가 많지만, 분명한 것은 AS3.0 이 AS1.0,2.0 으로 구현한 것에 비해 훨씬 빠르다는 것 입니다. Actionscript3.0 설명서에서는 순수하게 Actionscript만 실행 시켰을때 AS3.0이 이전 버젼보다 최대 10배 빠른 연산 속도를 가진다고 합니다. 또한 AS3.0 은 Flash CS3 와 CS4 에서만 쓰이는 언어가 아닙니다. 현재 Flex 3, AIR 등에서도 같은 언어 스펙을 가지고 사용 되고 있으며 앞으로 나올 모든 Flash playform에서 쓰이는 언어들은 모두 AS3.0을 기반으로 하여 만들어 질 것 입니다. 하지만, 비교적 스크립트를 공부 하는 초기에 어렵게 느껴지는 부분이 존재 합니다. 하지만 그걸 극복 하면 쉽고, 더 많은 것을 구현하고 만들 수 있는 언어가 AS3.0 입니다.


- Actionscript 를 공부 하려고 하는데 무엇 부터 해야 하나요?
 
많은 분들이 AS3.0, 을 공부 하면서 고생을 많이 하셨을 꺼라 생각 됩니다. 저 또한 AS2.0 을 하다가 AS3.0이 나오고 왕성한 배움에 욕구로 무작정 달려들었지만 완전 "GG" 를 친 적이 하루 이틀이 아니었습니다. 그럼 무엇 부터 해야 하나, 저는 이렇게 하였습니다. 

 
1. Flash CS3 나 CS4 관련 무작정 따라 하기 책을 보고, Flash 툴을 무작정 따라해 보세요. Actionscript를 배우고 싶다고 해서 Flash 와 Actionscript를 따로 쓰는건 아닙니다. 어쩔 때는 툴로 해결 해야 하는 부분도 있고 스크립트로 해결 해야 하는 부분도 있기 때문에 툴에 대한 이해는 필수 입니다. 감이 않오는 분은 2권 3권 계속 따라해 보세요. 
 

2. 툴에 대한 충분히 되었다고 생각 되면 인터넷을 활용하여 AS3.0 에 대한 공부를 시작해 보세요. 인터넷에는 좋은 분들이 아주 쉽게(?) AS3.0 에 대한 강의를 진행 하고 있습니다. 
3. 위의 3 강좌들의 모두 보았고, 이해 했을 정도라면 AS의 기초는 되는 수준이 되었을 것 입니다. 이때 책을 구입 하세요. 책은 언노운님이 친절하게 리뷰를 해 놓으셨으니 참고 하세요. 
Actionscript 책 추천

동강의 AS3.0 기초 강좌
- 쎈님의 Actionscript 강좌 모음 
- 윤훈남님의 AS 동영상 강좌

 

 전 Essential Actionscript3.0 과 Actionscript3.0 Cookbook , 그리고 새롭게 시작하는 플래시 CS3 Actionscript3.0을 추천 합니다. 앞의 두 책은 Flash 를 하는 동안 계속 봐야 할 정도로 방대한 내용을 다루고 있습니다. 그리고 새롭게 시작하는 플래시 CS3 Actionscript3.0 로 그동안 인터넷 강좌로 봤던 개념을 리뷰 하세요. 전체적인 틀을 잡기 딱 좋은 책 입니다. 책은 보는 동안 모르는 부분이 생길 수 밖에 없습니다. 그럴때 마다 Flash 단축키 F1 을 눌러 설명서를 틈틈히 확인 하세요. F1은 없는게 없을 정도로 Actionscript에 대한 모든것을 설명 하고 있습니다. 그리고 검색을 생활화 하세요.

 

4. 책까지 봤겠다. 이제 무서울게 없는 이론을 갖췄다고, 착각의 늪에 빠져 있을 것 입니다. 하지만 지금 부터가 시작 입니다. 지금 까지의 강좌나 책은 혼자서 공부 할 수 있는 체력을 갖게 해 준 것 입니다. 이제 자신만의 프로젝트를 계획해 보세요. 그리고 시작 하세요. 그리고 삽질 하세요. 시행 착오를 겪고, 혼자 힘으로 생각해서 만들고, 시행 착오를 하면 할 수록 실력은 급격히 상승 하는 것을 느낄 수 있을 것 입니다. 그리고 항상 F1 을 살펴보는 습관을 가지세요.

 

Actionscript3.0 은 어렵다고들 많은 분들이 말 합니다. 하지만 어려운 만큼 재미 있습니다. 제가 AS3.0 을 공부 했던 방법이 정답은 아니지만, 새롭게 Flash를 시작하시는 분들이 더욱 많아 졌으면 하는 바람 입니다.

 
 

posted by 동강


  

Posted by Flash 동강
Actionscript3.02008.12.15 02:02



윤훈남님의 AS3.0 동영상 강좌


Content  


Chapter 01.플래시 액션 스크립트 3.0의 개요[1:10분]  


Chapter 02.액션 스크립트 3.0 기초 문법[36분]  


Chapter 03. 데이터를 저장할수 있는 공간 생성과 선언[47분]  


Chapter 04.05 반복문과 조건문[49분]  


Chapter 06. 명령들의 그룹, 함수[1:12분]  


Chapter 07. 계산을 위한 명령, 연산자[22분]  


Chapter 08.OOP 문법-데이터 형 정의 문법[1:13분]  


Chapter 08.OOP 문법-은닉성[1:03분]  


Chapter 08.OOP 문법-상속성 및 다형성[1:02분]  


Chapter 09.Display Object-DisplayObject 클래스 이해[1:03분]  


Chapter 09.Display Object-InteractiveObject 클래스 이해[39분]  


Chapter 09.Display Object-DisplayObjectContainer 클래스 이해[47분]  


Chapter 09.Display Object-Sprite와 MovieClip, Loader, Stage클래스[1:00분]  


Chapter 09. DisplayObject 관련 샘플 3개[1:17분]  


Chapter 10. 이벤트 모델1[50분]  

Chapter 10. 이벤트 모델2[1:10분]  


Chapter 10. 이벤트 모델3[43분]  


Chapter 10. 이벤트 모델4-이벤트 객체 처리 과정(중요!!)[33분]  


Chapter 10. 이벤트 모델5[55분]  


Chapter 11. Flash Security[1:05분]  


Chapter 12. XML 1- 개요[1:05분]  


Chapter 12. XML 2- E4X[1:12분]  


Chapter 12. XML 3- 클래스[44분]  


Chapter 13. Video 이해 1 - DirectShow[49분]  


Chapter 13. Video 이해 2 - Video,Camera,NetStream 클래스[27분]  

Chapter 13. Video 이해 3 - Cuepoint, MetaData[18분]  


Chapter 13. Video 이해 4 - Microphone[26분]  


Chapter 13. Video 이해 5 - Camera[20분]

 


 

 


Posted by Flash 동강
Actionscript3.02008.12.11 11:42

동적으로 라이브러리에 있는 무비 클립이나 bitmap 파일을 어떻게 불러 올수 있을까요? 

as3.0 에서 class 개념이 좀더 확장 되면서 Linkage 에서 identifial 지정 뿐만 아니라 class 및 base 클래스를 지정 할수 있습니다. 라이브러리에 있는 객체들을 동적으로 불러 오기 위해서는 Linkage 와 class 와 new 와 addChild 이 필요 합니다.   

우선 Linkage 창을 보면 (라이브러리에서 우클릭 Linkage)


Export for Actionscript 를 클릭하면

 무비 클립을 Linkage 하셨다면 flash.display.MovieClip 가 Base로 지정되게 되고 자신이 이름 붙일수 있는 Class 창이 활성화 됩니다 ( 여기서는 cursor ) 원하는 class 이름을 써 놓고 ok 를 누르게 되면 이제 해당 객체가 클래스로 정의가 된 것입니다. (매우 간단히 클래스를 만들수 있다는 ) ( 아마 내부적으로  fla 파일에 매여 있는 class 가 생성됩니다. )

만약 아래와 같은 무비 클립을 Linkage 하셨다면.

 

var cur:cursor = new cursor(); <-- var mc:MovieClip = new MovieClip();
addChild(cur);

하게 되면 좌표 0,0 값에 cur 가 보여 지게 됩니다.

 

동적으로 다른 위치에 5개 생성 

for(var i:int= 0; i < 5; i++){

     var cur:cursor = new cursor();
     cur.x = i*5;
     addChild(cur);

}

 이런식으로 연결하여 사용하시면 되고요, 이것 이용해서 우리가 지금까지 토의 했던 상속이라는 개념을 적용할수 있습니다. 위의 cursor는 단지 화살표 모양의 무비 클립일 뿐 속성이 정의가 안되어 있는데 여기서 속성을 추가해 보겠습니다. 같은 폴더에 Ccursor.as 를 생성하시고 아래 코드 입력. 


  1. // 테스트를 위한 Ccursor 생성
  2.  
  3. package{
  4.  import flash.display.*;
  5.  import flash.events.*;
  6.  
  7.  public class Ccursor extends cursor           //fla 파일에서 정의한 cursor class 를 상속 받는다.
  8.  {
  9.   public function Ccursor():void
  10.   {
  11.    addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  12.    addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  13.      
  14.   }
  15.   private function Overhandler(ev:MouseEvent):void
  16.   {
  17.    trace("오버");
  18.   }
  19.   private function Outhandler(ev:MouseEvent):void
  20.   {
  21.    trace("아웃");
  22.    
  23.   }
  24.  
  25.  }
  26.  
  27. }

 
  1. //fla 파일 두가지 종류의 클래스 생성
  2.  
  3. var cur:cursor = new cursor();
  4. cur.x = 200;
  5. cur.y = 200;
  6. addChild(cur);
  7.  
  8.  
  9.  
  10. var cur2:Ccursor = new Ccursor();
  11. cur2.x = 300;
  12. cur2.y = 200;
  13. addChild(cur2);

 

 Ccursor class 로 addChild 된 왼쪽 객체 만이 마우스 이벤트에 반응하게 됩니다. 이와 같이 Flash 는 라이브러리에 있는 사용자 정의 객체들을 자유 롭게 사용할수 있는 편안한 인터페이스를 제공합니다.

 



Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 01:41

10강을 시작으로 다룰 내용은 Flash Navigation 입니다. 플래시 메뉴라고 하면 되겠네요. 아주 간단한 메뉴에서 시작해서 xml 을 이용한 메뉴 구성 까지 계획을 하고 있습니다. 우선 적으로 알아야 할것이 Array Class 와  caurina Tweener 의 사용법을 알아야 합니다.  

 

  Array 

  Package    :loadClassListFrame('class-list.html')" href="file:///C:/Documents%20and%20Settings/All%20Users/Application%20Data/Adobe/Flash%20CS3/en/Configuration/HelpPanel/Help/ActionScriptLangRefV3/package-detail.html">Top Level
  Class            public dynamic class Array
  Inheritance  : Array -> Object

 Array 는 배열 입니다. ( 기본 속성은 레퍼런스를 참조하세요 )

 
  1. var twoArray:Array = ["z"]; 
  2.  twoArray[0] = "z";            
  3.  trace(oneArray);              
  4.  

 여기서 알고 넘어 갈 부분은 push, pop , Array 속성의 함수 입니다. push 는 배열에 넣어 주는 역할 pop 은 배열의 가장 끝에 있는 객체를 반환에 주는 함수 입니다.

  

  push 예제  a,b,c String 을 letters 에 넣어 주고 toString 으로 확인해 봅니다.

  1. var letters:Array = new Array();
  2.  
  3. letters.push("a");
  4. letters.push("b");
  5. letters.push("c");
  6.  
  7. trace(letters.toString()); // a,b,c

 

 

 pop 예제  // 자료구조에서 pop 과 의미가 같다. 배열의 가장 뒤에 있는 객체를 반환한다. (반환된 객체를 받지 않으면

 소멸 된다 )

  1. var letters:Array = new Array("a", "b", "c");
  2. trace(letters); // a,b,c
  3. var letter:String = letters.pop();
  4. trace(letters); // a,b
  5. trace(letter);     // c

 

 
  1. var mc:MovieClip = new MovieClip();
  2. var a_arr:Array = new Array();
  3. var b_arr:Array = new Array();
  4.  
  5. a_arr[0] = mc;
  6. b_arr[0] = mc;
  7.  
  8. trace("a_arr[0] : "+a_arr[0].name);
  9. trace("b_arr[0] : "+b_arr[0].name);
  10.  

  1. a_arr[0] = mc;
  2. b_arr[0] = mc;

이 부분을 a_arr.push(mc);  b_arr.push(mc) 로 해도 같은 결과가 출력됩니다. 요지는, Array 의 사용에 있어서 push 와 pop 을 잘 활용 해야 된다는 점 입니다. push 와 [0] = mc 로 인해 배열에 저장되는 값은 실체 그 객체가 아니라, 그 객체가 저장되어 있는 주소 값이 라고 생각하시면 될것 같습니다. 지금까지는 언급하지 않았지만 , 배열을 사용할때 Actionscript 에서의 메모리 문제를 잘 이해 하시고 사용하셔야 됩니다. 우선 Actionscript 에서의 메모리 참조 해제 방식은 Flash Player 에 있는 가비지 콜렉션  이 관장을 하고 있습니다. 가비지 콜렉션이란, 뜻 그대로 쓰레기 값들을 모아 준다는 말입니다. 일반적으로 Java 에서는 객체 = null 하면 메모리가 바로 해제 되는 경우였지만 플레시 에서는 조금 다름이다. 예제를 보면

 
  1. var mc:MovieClip = new MovieClip();
  2. mc = null;
  3.  

 mc 라는 무비 클립의 메모리가 바로 해제 되는 것이 아니라, 가비지 콜렉션의 수집 대상이 되는 것입니다. ( 수집이 완료된 후에 메모리 해제가 일어 나는 것이지요 ) 이 경우는 addEventListener 의 경우에서도 똑같이 적용 됩니다.   

addEventListener () 메서드  

public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
 
마지막 파라미터 값인 useWeakReference 로 인해  리스너에 대한 참조가 강한지 아니면 약한지를 결정합니다. 강한 참조(기본값)는 해당 리스너의 가비지 수집을 막습니다. 약한 참조는 이를 막지 못합니다.
 
addEventListener 을 하고 removeEventListener 를 해 줬다고 해서 메모리가 바로 해제 되는 것은 아니라는 점입니다. 일반 적으로 addEventListener 를 사용할때 두 가지 파라 미터만 쓰는 경우가 많은데 이 경우도 알아 놓으시기 바람니다.
 
한가지의 예제를 더 보면
 
  1. var mc:MovieClip = new MovieClip();
  2. addChild(mc);
  3. var a_arr:Array = new Array();
  4. var b_arr:Array = new Array();
  5.  
  6. a_arr[0] = mc;
  7. b_arr[0] = mc;
  8.  
  9. mc = null;
  10.  
  11. trace("a_arr[0] : "+a_arr[0].name);
  12. trace("b_arr[0] : "+b_arr[0].name);
  13.  
  14. output
  15. a_arr[0] : instance1
    b_arr[0] : instance1
  16.  
 
  1. var mc:MovieClip = new MovieClip();
  2. addChild(mc);
  3. var a_arr:Array = new Array();
  4. var b_arr:Array = new Array();
  5.  
  6. a_arr[0] = mc;
  7. b_arr[0] = mc;
  8.  
  9. mc = null;
  10. a_arr[0] = null;
  11. b_arr[0] = null;
  12. trace("a_arr[0] : "+a_arr[0].name);
  13. trace("b_arr[0] : "+b_arr[0].name);
  14.  
  15. output
  16. TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.
     at Untitled_fla::MainTimeline/frame1()

 mc = null 로 객체의 주소 값에 대한 참조를 삭제 하긴 했지만

  1. a_arr[0] = mc;
  2. b_arr[0] = mc;

여기에서 새로운 참조가 생겨 가비지 콜렉션의 수집을 막게 됩니다. 수집대상으로 만들기 위해서는 모든 연결을 없애 주어야 겠지요?

요지는 쓸대 없는 객체의  = null 을 생활화 하자 입니다. 어려운 내용이니 계속 반복해서 보세요.  

가비지 콜렉션의 자세한 내용은 : http://memolog.blog.naver.com/dongkang0626/38
 
Caurina Tweener
caurina 트위너는 Google code 에 업댓 되고 있는 AS2.0, AS3.0 트윈 클래스 입니다.    

클래스원본위치

http://code.google.com/p/tweener/  

사용을 위해서는 우선 caurina 패치지를 다운 받으시고, (첨부 파일) fla 나 as 파일이 있는 곳에 압축을 풀어 놓으심니다. 그후

import caurina.transitions.Tweener;               // 클래스를 사용하기 위한 import

여기에서 import 를 잘못해서 헤매시는 분이 있는데, fla 이 만들어져 있는 폴더에 caurina 폴더가 함께 있으면 됩니다.  

 

아주 간단한 사용법

Tweener.addTween(myMovieClip, {속성이 들어감});

myMovieClip 은 무비 클립 이름입니다 (지금까지 무비 클립의 이름을 지정해서 사용했던 방법으로 입력하면 됨)

그리고 트위너 자체에서 제공 하고 있는 엄청난 종류의 속성들

x , y , width ,height , scaleX, scaleY , alpha , _bezier:[],time, onComplete:,onCompleteParams:[],onStart:,onUpdate, rotation,delay, 등등.

 

onStart : tween 시작 핸들러 등록
onComplete : tween 큰 핸들러 등록
onUpdate : tween 진행중 핸들러 등록

onCompleteParams:[], onComplete 함수 지정시 넘길 파라미터를 지정해 준다.(onStart 와 onUpdate로 똑같이적용)

 

_bezier: [] 이동할때 베지어 곡선을 만들기 위한 점을 지정해 준다.

time : 변화가 진행되는 시간을 정해준다.

delay : 명령문이 실행되고, delay: 몇초 가 흐른 뒤에 해당 명령문을 실행 시켜 준다.

 

transition:"" 변화 진행되는 그래프를 지정해 준다.

 

 
 그럼 사용해 보겠습니다. circle_mc 무비 클립을 만들고,

 
  1. import caurina.transitions.Tweener;
  2.  
  3. Tweener.addTween(circle_mc,{x:300,y:300,time:2.0,transition:"easeoutinelastic"});

 Flash 자체의 Tween 과 다르게 한번에 여러 속성을 변경 시킬수 있습니다. 해당 속성에 들어 가는 값은 목표치 즉, 변경 하고자 하는 결과 위치를 나타 냄니다. 괴물투수 형님이 쓰신 팁을 인용하면

 

 

간단히 사용해보기

<A>

Tweener.addTween(myObject , {x:20, time:1, transition:"easeOut"});

 

<B>

Tweener.addTween(myObject , {_frame:20, time:1, transition:"easeOut"});

 

간단한 설명

이것은 기본적으로 1. 바꾸고 싶은 것과 바꾸고 싶은것의 2. 목표치를 적어넣음으로써 작동합니다.

 

위의 <A>에서 바꾸고 싶은건 x 좌표이고 목표치는 20이 되겠고

<B>에서는 바꾸고 싶은건 프레임이고 가고 싶은 프레임은 20프레임이 되겠네요

 

그리고 뒤의 time은 이동하는 시간이고 뒤의 transitions는 운동의 느낌을 나타냅니다.

 

<A>

x는 myObject 이놈이 원래 가지고 있는 속성입니다.

myObject가 무비클립이라면 x , y , alpha , width , height 등등이 되겠죠?

 

<B>

여기서 _frame은 myObject란 놈이 원래 가지고 있는 속성이 아닙니다

이것은 google tweener에서 스페셜하게도 제공하는 스페셜한 special properties인 것입니다

frame , color , sound 등등이 있고 사용은 동일하게 하되 ,

속성명 앞에 _(언더바)가 붙는 특징이 있습니다.

 

 

 
  1. import caurina.transitions.Tweener;
  2.  
  3. startfunc(circle_mc);
  4.  
  5. function startfunc(_mc:MovieClip):void
  6. {
  7.         Tweener.addTween(_mc,{onComplete:completefunc,onCompleteParams:[_mc],scaleX:5.0,scaleY:5.0,time:2.0,transition:"easeoutinelastic"});
  8. }
  9. function completefunc(_mc:MovieClip):void
  10. {
  11.         trace("트윈종료 : "+_mc);
  12. }

 

참 쉽지요? ;;; 

저는 Tween 보다 caurina 를 자주 사용 한담니다. 그 만큼 편하고, 속도도 나름(?) 괜찬게 나오는 좋은 녀석입니다. 지금까지 네비게이션을 만들기 위한 기초 부분에 대해 써 보았습니다. 다음에는 iMac navigation 디자인 및, 구현 방법, 프로토 타입을 만들어 보도록 하겠습니다.   

이제 3월 18일이면 AIR 가 우리나라에서도 정식으로 나오게 되고, Flex 3 도 런칭이 되게 됩니다. 이 말은 Actionscript 3.0 이 더이상 Flash Flex 만을 위한 조금한 일부분을 벗어나 RIA 의 선두 주자로의 도약을 시작할것이라 생각됩니다. 많은 분들이 Actionscript 3.0 은 선택이 아니라, 필수라는 말을 하심니다. 이제 그 말이 현실이 되어 나타 나고 있습니다. 곧 Adobe 에서 디자이너와 개발자의 협업을 위한

"Thermo"(http://labs.adobe.com/wiki/index.php/Thermo) 가 출시 될 것이고, Actionscript3.0 의 중요성은 더욱 강조될 것입니다.  

Adobe 에서 이렇게 발빠르게 움직이고 있는데, 쓰는 사람이 가만히 있을수는 없겠지요??

"자 공부 합시다. 그리고 삽질 합시다."

역시나 잘못된 부분이나, 질문 사항 거침 없이 댓글 부탁드립니다. 



Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 01:37

스터디에서 같이 해보게 될 이미지 슬라이드  소스 파일 입니다.
3가지 클래스를 메인으로 사용하고 있습니다.    

1. Tween
2. Loader
3. Timer 

지금까지의 강좌에서 계속 사용해 왔고, 언급했으므로 소스를 파악하시기엔 무리가 없을듯 합니다.
중점적으로 볼 부분에는 강조를 해 놓았으니 그 부분에 대해 어떤 구조로 이미지가 돌아가고 있구나 정도 파악하시고 참여 하시면 됩니다. 소스를 미리 올리는 이유는 로직적으로 이해하기 어려운 부분이 포함되어 있기 때문에  미리 올리는 것이니 꼭 꼭 실행 시켜 보세요.   

 CustomMain.as ( Document class)

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.         import flash.utils.Timer;
  5.         import fl.transitions.Tween;
  6.         import fl.transitions.easing.*;
  7.         import Circle;
  8.                
  9.         import flash.events.TimerEvent;
  10.  
  11.                
  12.         public class CustomMain extends MovieClip
  13.         {
  14.                 private var frame_arr:Array;
  15.                 private var frame_time:Timer;
  16.                 private var frame_num:int;
  17.                
  18.                 private var position_arr:Array;
  19.                
  20.                 public function CustomMain():void
  21.                 {
  22.                          frame_num = -1;
  23.                          frame_arr = new Array();
  24.                          position_arr = [-500,0,500];
  25.                          frame_arr[0] = new Circle(-500,0);
  26.                          frame_arr[1] = new Circle(-500,0);
  27.                          frame_arr[2] = new Circle(-500,0);
  28.                                                  
  29.                                                  
  30.                                                  frame_arr[0].loadimage("http://dongkang.ivyro.net/data/image.jpg");
  31.                                                  frame_arr[1].loadimage("http://dongkang.ivyro.net/data/image2.jpg");
  32.                                                  frame_arr[2].loadimage("http://dongkang.ivyro.net/data/image3.jpg");
  33.                                                  
  34.                          addChild(frame_arr[0]);
  35.                          addChild(frame_arr[1]);
  36.                          addChild(frame_arr[2]);
  37.                          
  38.                          frame_time = new Timer(3000);
  39.                          frame_time.start();
  40.                          frame_time.addEventListener("timer",frametimehandler);
  41.              
  42.                 }
  43.                 private function frametimehandler(e:TimerEvent):void
  44.                 {              
  45.                                
  46.                                                
  47.                         if(frame_num == -1)
  48.                         {
  49.                             new Tween(frame_arr[0],"x",Strong.easeInOut,frame_arr[0].x,position_arr[1],20,false);  
  50.                                                        
  51.                         }
  52.                         else
  53.                         {       
  54.                                                        
  55.                                                         var targetF:int = frame_num%3;
  56.                                                         var targetB:int = (frame_num+1)%3;
  57.                                                         trace(targetB);
  58.                                                        
  59.                       new Tween(frame_arr[targetF],"x",Strong.easeInOut,position_arr[1],position_arr[2],20,false);      
  60.                       new Tween(frame_arr[targetB],"x",Strong.easeInOut,position_arr[0],position_arr[1],20,false);
  61.                                                        
  62.                            
  63.                                
  64.                         }
  65.                                                 frame_num++;
  66.                                                
  67.                        
  68.                        
  69.                 }              
  70.                
  71.         }
  72.        
  73.        
  74. }

 

 Circle.as
 
  1. package {
  2.         import flash.display.DisplayObject;
  3.         import flash.display.Loader;
  4.         import flash.display.MovieClip;
  5.         import flash.events.Event;
  6.         import flash.net.URLRequest;   
  7.  
  8.         public class Circle extends MovieClip {
  9.  
  10.                 public function Circle(xn:int,yn:int):void {
  11.                         this.x = xn;
  12.                         this.y = yn;
  13.  
  14.  
  15.                 }
  16.                 public function loadimage(url:String):void {
  17.  
  18.                         var ld:Loader = new Loader();
  19.                         ld.load(new URLRequest(url));
  20.                         ld.contentLoaderInfo.addEventListener(Event.COMPLETE, onldComplete);
  21.                         addChild(ld);
  22.  
  23.                 }
  24.                 public function onldComplete(e:Event):void
  25.                 {
  26.                          var mObject:DisplayObject = e.target.content;
  27.              mObject.width=500;
  28.              mObject.height=450;               
  29.                 }
  30.                
  31.         }
  32. }

 

Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 01:36

요즘엔 구글링을 하면서, 이 사이트 저 사이트 많이 돌아 다니고 있는데, 정말 세상을 넓고, 대단한 사람들은 많다 라고 세삼 느껴지네요.  

월요일 입니다. 다들 피곤하시져?? 주말에도 일하신 분들도 있으실테고, 주말 동안 푹 쉬신 분들도 있을 겁니다.  월요일이고, 새롭게 시작하는 느낌으로 일주일을 시작하는것도 좋을듯 싶습니다.  

이번에 볼 내용은 Timer class 와 Loader class 입니다. 두 클래스 모두 강력한 기능으로 작업의 능률을 높여 주는 그런 클래스들 입니다. 우선 Timer class 부터 레퍼런스를 살펴 봅시다.  

 Timer 

클래스  public class Timer
상속 Timer  EventDispatcher  Object

언어 버전 :  ActionScript 3.0
Player 버전 :  Flash Player 9

 

 
  Timer(delay:Number, repeatCount:int = 0)
  지정된 지연 및 반복 횟수 상태를 사용하여 새 Timer 객체를 만듭니다.  
 
  1. var time:Timer = new Timer(1000,5);
  2. time.start();

  delay 시간은 ms 단위로 합니다. 1000 = 1초가 되는 거지요. repeatCount 는 이 timer을 몇번 반복해서 실행 시키겠는가?

  위에서는 5번 실행 시키고 실행을 중단하게 됩니다.

 꼭 start() 를 해줘야 시작이 되고, 멈추는건 stop(); 으로 멈출수 있습니다. 그러면 저거 두개만 으로 어떻게 Timer 를 활용하는가? 보통 TimerEvent 라는 Timer 가 가지고 있는 기본 이벤트와 함께 사용됩니다.

 

 
  1. package{
  2.        
  3.         import flash.display.Sprite;                  
  4.         import flash.events.TimerEvent;                // 기본 import
  5.         import flash.utils.Timer;
  6.        
  7.         public class TimerExample extends Sprite
  8.         {
  9.                 private var time:Timer;                   // 객체 정의
  10.                
  11.                 public function TimerExample():void
  12.                 {
  13.                         time = new Timer(1000,5);
  14.                         time.start();
  15.                         time.addEventListener(TimerEvent.TIMER,ontimerhandler);
  16.                         time.addEventListener(TimerEvent.TIMER_COMPLETE,onCompletehandler);
  17.                
  18.                 }
  19.                 private function ontimerhandler(event:TimerEvent):void
  20.                 {
  21.                         trace("1초");
  22.                        
  23.                 }
  24.                 private function onCompletehandler(event:TimerEvent):void
  25.                 {
  26.                         trace("타임 끝");
  27.                 }
  28.                
  29.         }
  30. }

 

time.addEventListener(TimerEvent.TIMER,ontimerhandler);
1초 마다 실행되는 함수를 정의합니다. 지정한 시간에 호출되는 함수를 정의(이벤트를 생성시켜줌)

time.addEventListener(TimerEvent.TIMER_COMPLETE,onCompletehandler);
time 이 모두 실행 된 후에 실행되는 함수를 지정 (이벤트를 생성시켜줌)

//output

1초
1초
1초
1초
1초
타임 끝

우리가 쓰고 있는 enterframe 이 fps 단위로 실행되는 반면, Timer 는 초 단위로 실행 됩니다. Timer 가 enterframe 에 비해서 정확할수 있다고 말하는것도 여기에 있는듯 합니다. 다른 속성도 있으나 잘 쓰이지 않으므로 레퍼런스를 한번 보시는것도 좋을듯  싶습니다.

 

 Loader

 

 
  클래스 public class Loader
  상속 Loader  DisplayObjectContainer InteractiveObject  DisplayObject  EventDispatcher  Object

 

 
 Loader()
 SWF, JPEG, GIF 또는 PNG 파일 등을 로드하는 데 사용할 수 있는 Loader 객체를 만듭니다.
 
 
  1. var ld:Loader = new Loader();
  2. ld.load(new URLRequest("image.jpg"));

 ld 라는 로더를 만들어서 URLRequest 로 정의된 주소값의 jpg나 gif png swf 파일을 로드 합니다.

 

참고 ) URLRequest

URLRequest 클래스는 하나의 HTTP 요청에 포함된 모든 정보를 캡처합니다.

말이 어려워지므로, 걍 주소를 정의하기 위해서는 URLRequest 타입으로 해야 된다는것만 알아 주세요

(2.0 과의 차이점입니다. )

 

 

 
  1. package{
  2.        
  3.         import flash.display.Sprite;
  4.         import flash.display.Loader;
  5.         import flash.events.*;
  6.         import flash.net.URLRequest;
  7.         import flash.display.DisplayObject;
  8.  
  9.         public class LoaderExample extends Sprite{
  10.                
  11.                 private var ld:Loader;
  12.                
  13.                 public function LoaderExample():void
  14.                 {
  15.                         ld = new Loader();
  16.                         var url:URLRequest = new URLRequest("image.jpg");
  17.                         ld.load(url);
  18.                         ld.contentLoaderInfo.addEventListener(Event.COMPLETE, completehandler);
  19.                         ld.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progresshandler);
  20.                        
  21.                         addChild(ld);                  
  22.                 }
  23.                 private function completehandler(event:Event):void
  24.                 {
  25.                          var mObject:DisplayObject = event.target.content;
  26.                          mObject.width=100;
  27.                          mObject.height=100;
  28.                        
  29.                 }
  30.                 private function progresshandler(event:ProgressEvent):void
  31.                 {
  32.                         var mPercent:Number =int( event.bytesLoaded/event.bytesTotal*100.0);
  33.  
  34.                         trace(mPercent);
  35.                 }
  36.                
  37.         }
  38.        
  39. }

 

같은 폴더에 image.jpg 라는 파일이 있어야 로드가 됩니다. 없으면 URL 에러를 일으킴니다.

 

//output

로드중
로드중
로드중
로드중
로드끝

 

여기서 contentLoaderInfo 는 뭔가?

  contentLoaderInfo : LoaderInfo
[read-only] 로드 중인 객체에 해당하는 LoaderInfo 객체를 반환합니다.
 

LoaderInfo 란 Loader 에 의해 불러와지는 데이터의 정보 입니다. 예를 들면 jpg 이미지라면 크기 (width, height 가 있겠지요?)

Loader 는 이러한 LoaderInfo 를 참조하여 그 값들을 변경할수 있습니다. 어쩌피 이미지가 swf 파일이 로드 되는 것도 bitmapdata 를 거쳐서 들어 오는것이기 때문에 변환이 가능합니다. ( 하지만 크로스 브라우징 문제가 발생할수도 있습니다 )

 

  1.  
  2. package{
  3.        
  4.         import flash.display.Sprite;
  5.         import flash.display.Loader;
  6.           import flash.display.DisplayObject;
  7.         import flash.events.*;
  8.     import flash.net.URLRequest;
  9.  
  10.         public class LoaderExample extends Sprite{
  11.                
  12.                 private var ld:Loader;
  13.                
  14.                 public function LoaderExample():void
  15.                 {
  16.                         ld = new Loader();
  17.                         var url:URLRequest = new URLRequest("image.jpg");
  18.                         ld.load(url);
  19.                         ld.contentLoaderInfo.addEventListener(Event.COMPLETE, completehandler);
  20.                         ld.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progresshandler);
  21.                        
  22.                         addChild(ld);                  
  23.                 }
  24.                 private function completehandler(event:Event):void
  25.                 {
  26.                          var mObject:DisplayObject = event.target.content;
  27.                          mObject.width=100;
  28.                          mObject.height=100;              // 로드된 이미지는 100 / 100 으로 사이즈 변경
  29.                        
  30.  
  31.                 }
  32.                 private function progresshandler(event:ProgressEvent):void
  33.                 {
  34.                         var mPercent:Number =int( event.bytesLoaded/event.bytesTotal*100.0);
  35.  
  36.                         trace(mPercent);                // 로드 되는 과정을 알수 있다.
  37.                 }
  38.  
  39.                
  40.         }
  41.        
  42. }

 

위의 completehandler 함수에서는 event.target.content 로 정보를 받은 뒤 변경을 해 주게 되고 progresshandler 에서는 byteLoaded 를 이용해서 실시간 로드된 값을 알수 있습니다. 이것을 이용해서 로딩 바를 만들수 있습니다.  앞으로 만들어 볼것의 기본이 되는 두 클래스를 설명해 보았습니다. 잘 이해 안되는 부분은 질문 날려 주시고요 . 잘못된 부분이나 추가 내용은 댓글이나 답글 달아 주세요. 이 공간의 저 만의 강좌 공간이 아니라, 강좌라는 주제에 대해 토의하는 공간입니다. 쑥스러워 하지 마시고, 참여 부탁드립니다. 그럼 두 클래스를 이용한 간단한 해보기 입니다.  

1. 5장의 이미지를 준비

2. 배열에 5장의 이미지를 저장

3. Timer class 를 이용해 2초에 한번씩 로드 되는 겔러리를 만든다.   

겔러리를 만들면서 Ctrl + Alt + del 을 눌러 메모리가 늘어 나는 상황을 관찰해 봅시다! 기초 스터디 팀에게는 미리 낸 해보기라, 미리 올라온 소스를 참고해 보시는것도 좋을듯 합니다. 다하신 분들은 꼭 메모리가 늘어 나는 상황을 관찰해 보시기 바람니다.   

수고 하셨습니다. 기분좋은 한주 시작 하세요!

 

Posted by Flash 동강
Actionscript3.02008.12.11 01:08
 Actionscript3.0 이 나오고 많은 사람들이 Actionscript2.0 에서 3.0 으로 넘어 왔고 그 강력함에 대해 매우 기뻐하고 있다. 그러나 아직 디자이너와 소통을 하기 위해 새로운 언어로 넘어 오지 못하는 많은 사람들이 있다. 그 이유는 여러가지가 있겠지만 같은 작업을 하는거에 대해 Actionscript3.0 이 더 복잡하다는 잘못된 생각들이 있기 때문 이다. 이 기술문서에서는 당신이 왜Actionscript3.0 을 사용해야만 하는지에 대해 알려주고 Actionscript3.0 에 대한 잘못된 생각들을 풀어 주겠다.

 우리는 Actionscript 코드를 사용하는 사람들이 두 그룹이 있다는 것을 알게 되었다. 첫번째는 hardcore developer로 이루어진 그룹이다. 그들은 일반적으로 Java 나 C# 을 미리 접하고 사용했던 사람들이다. 그들에겐 Actionscript3.0 은 반가운 언어 였을것이다.  왜냐하면 그들이 이미 알고 있던 언어들과 비슷하기 때문이다. 두번째 그룹은 interactive designer 로 이루어진 그룹이다. "Interactive designer" 이란 플래시 프로그래밍을 하므로 해서 그들의 비젼을 높일수 있는 디자인 기반의 혹은 애니메이션을 하는 사람들을 말한다. Interactive designer는 종종 타임라인에 코드를 삽입한다. 하지만 그들도 역시 약간의 프로그래밍에서의 object-origented programming(OOP) 를 알고 있다.

이 기술문서에서는 후자의 그룹을 고려 하였다. 그리고 Actionscript3.0 으로 전환하기에 혼란을 느끼시는 분들을 위해 글을 써내려 가겠다.

A brief history of ActionScript ( Actionscript 의 역사 )

 Actionscript 는 Flash player4 에서 처음으로 소개 되었다. 그것은 Flash 에서 인터렉티브에 많은 변화를 가져다 주었지만 언어 자체가 정교 하지고 않았으며 그때 까지 써왔던 언어와도 달랐다. 비록 다음 버젼에서는 ECMAScript 구문이 적용되었지만 초기에 ACtionscript는 ECMAScript 와 많이 달랐다.
Actionscript 1.0 은 Flash player 5 에서 소개 되었다. 1.0은 ECMAScript 기반으로 구문과 문법이 적용되었다. Flash player 6과 7로 Player 가 버젼업 하면서 많은 질타를 받았지만 형태는 그대로 유지 되었다.

 Actionscript2.0 은 Flash MX2004 와 Flex 1.0 에서 공개 되었다. 이 새로운 버젼 역시 Flash player6과 7에서 사용되었다. 왜냐하면 Actionscript2.0 은 실제로 Actionscript1.0 runtime 을 기반으로 하고 있기 때문에 결과적으로 Actionscript2.0 은 좋은 퍼포먼스를 낼수 없었다. 왜냐하면 결국 기반은 Actionscript1.0 모델로 구성되어 있기 때문이다.

 Flash Player 9를 준비 하는 동안, 우리는 더이상 낮은 퍼포먼스를 내는 Actionscript1.0, Actionscript2.0 기반의 Actionscript engine 으로 계속 나아 갈수 없다는 것을 확신하게 되었다. 그래서 Adobe 는 Actionscript Virtual Machine(AVM) 을 다시 만들기 시작한다. 그 결과 AVM2 이라고 알려진 높은 퍼포먼스를 낼수 있는 가상 머신을 만들게 되고 새로운 Actionscript 언어를 탑재하게 된다.  비록 AVM2 이 주요한 Actionscript 의 가상머신이 되겠지만 웹상에 존재 하는 무수히 많은 이전 버젼의 컨텐츠들을 위해 Flashplayer 에서 그 컨텐츠들을 지원에 주는 기능을 남겨 두게 된다.

Reasons to use ActionScript 3.0 ( Actionscript3.0 을 사용해야 하는 6가지 이유 )

지금부터 언급하는 내용들은 Actionscript3.0 을 배움으로해서 좋은 점들은 어떠한 규칙없이 나열한 것이다.

1. Your skills will be in high demand

내 생각으로 이것은 현재 Flash developer 로 일하고 있던 일할 계획을 가지고 있던 새로운 언어를 배워야 하는 주된 이유이다. 대부분의 커다란 Flash 일들은 Actionscript3.0 으로 제작되고 있다. 앞으로 Actionscript2.0 기술을 요구하는 일들은 점점 작아 질것이므로 당신이 Flash 로 일을 할 계획을 가지고 있다면 Actionscript3.0 은 필수다.

2. Everything you build will be faster

Flash 개발자들은 새롭게 낸 아이디어나, 정말 기발한 생각으로 만들어진 컨텐츠들이 Flash player 에 한계에 부딛히는걸 보며 좌절을 느껴왔다.
Actionscript3.0 은  이전 언어의(Actionscript2.0) 10배 이상의 퍼포먼스를 제공한다. 이 의미는 Stage 위에 더 많은 객체들을 동시에 조절
할 수 있다는 것을 의미 한다. 만약 당신의 프로젝트를 부드럽게, 보기 좋은 퍼포먼스를 내기를 원한다면 Actionscript3.0 이 그것을 도와줄 것이다.

3. There's an abundance of new APIs

Flash 개발자로서 새로운 장난감( Class package 를 묘사한것 같다. ) 을 자신의 프로젝트에 통합 하는 것 만큼 즐거운 일은 없을것이다. Actionscript3.0 은  XML, 정규식, binary sockets 와 같은 100가지의 새로운 APIs 를 포함하고 있다. 더 대단한 것은 Actionscript 의 모든 부분이 새로운 언어의 특징에 맞게 찾아 쓰기 편하도록 package 별로 namespaces 별로 나눠져 있다는 것이다. 당신은
Actionscript3.0 을 사용할때 Flash toolbox 가 더이상 가득 차 있어서 찾기 불편한것이 아닌, 잘 정리되어 있는것을 볼 수 있을것이다.

4. The display list rocks

Actionscript3.0 에서는 Flash 가 visual object(DisplayObject)를 처리 하는 방법이 달라졌다. ( 이전 버젼과 가장 큰 차이점 ) 이전 버젼의 언어에서는, Flash movie 에서 객체들의  display order(depth) 를 조절하기 위해  black art 를 사용하였다. 이 언어를 배우기 시작하는 사람들은 이해 할수 없는 많은 꼼수와 대안이 존재 한다. 예를 들어 이것은 보통 가장 깊은 곳에 있는 visual object 들을 어떤 무엇보다 가장 높은 곳에 위치시키기 위해 사용된다. 이것은 큰 단위 프로젝트시 많은 문제를 일으키고 depth 를 조절하는 메뉴얼을 필요로 한다. Actionscript3.0 에서 visual object 를 조작하는 새로운 규율은 이러한 객체들을 rendering 하는데 간단한 메카니즘으로 되어 있다. 한번 Actionscript3.0 을 사용하기 시작하면 다시는 3.0 없이는 작업을 못할 것이다.  ( depth를 조절 하는 방법이라든지 규칙(내부적으로)이 변하였다는 것을 말하고 있다. )

5. The object-oriented structure is better

개발자들은 특히 Actionscript3.0 의 object-oriented structure 에 만족하고 있다. 3.0은 runtime typing, class, package, namespace 그리고 정밀하게 이루어져 있는 이벤트 모델을 포함하고 있다. Actionscript3.0 을 프로그래밍 하는 것은 Java 나 C# 과 같은 high-level 언어로 프로그래밍 하는 것과 같은 수준이다. Actionscript3.0 의 새로운 기능들은 당신의 코드를 보다 단단하게, 가독성 있게 그리고 확장 가능하게 만들어 준다. 만약 당신이 interactive designer 라면 이 기능들은 많이 사용하지 않을지도 모른다. 하지만 당신이 프로그램능력의 향상을 원할때 이 언어의 구조는 당신을 지원해 줄것이다.

6. It's more enjoyable to work with ActionScript 3.0

지금 까지 언급한 모든 내용을 읽고도 여전히 Actionscript3.0 을 배울 마음이 안생긴다면 그냥 Actionscript2.0 으로 프로젝트를 진행하기를 바란다. 그러나 Flash platform 이 진화하고 앞으로 나올 새로운 기술들은 모두 Actionscript 3.0이 사용될 것이다. 예를들어 Flex 3 이나 Adobe AIR 는 Actionscript3.0 을 필요로 한다. 그리고 만약 당신이 이러한 기술들을 이용한 작업을 원한다면 Actionscript3.0을 사용하는 것 외에는 선택의 여지가 없을 것이다.

FAQs about ActionScript 3.0

이 섹션에서는 Actionscript3.0 에서 자주 받는 질문에 대해 이야기 해 볼까 한다. 그리고 당신이 새로운 언어로 바꾸는 것에 대한 걱정과 질문거리를 씻어내 주겠다.

* Why does ActionScript 3.0 require more code than ActionScript 2.0? ( 왜 Actionscript3.0 은 2.0 보다 많은 코드를 필요로 하는가? )

많은 경우에서 Actionscript3.0 는 더 많은 코드를 필요로 하지 않는다. 이 질문을 하는 대부분의 사람들은 button click 과 같은 이벤트 리스너를 등록하는 작업을 예를들며 질문을 하곤한다. 하지만 Actionscript 3.0 이 코드를 더 많이 필요로 하는게 확실하다 할지라고 그에 따른 이득을 가져다 준다. 3.0으로 작성된 코드는 보다 코드 전체의 가독성을 높여 주고 코드를 구조화 시켜 준다. ( 결합도가 높다) 만약 당신이 Actionscript2.0 의 이벤트가 동작하는 것을 hack 을 이용하여 본다면 새로운 언어 모델이 더욱 더 센스 있게 만들어져 있다는 것을 알게 될 것이다.

* Why can't I attach code directly to symbols anymore? ( 왜 symbol 에 코드를 삽입할수 없게 되었는가? )

불행하게도 이러한 작업은 대 단위의 프로젝트에서 커다란 혼란을 가져온다. 어디에 있는지 모르는 Actionscript code 는 프로젝트의 대부분의 시간을 소비 하게 한다. 심볼에 보다 잘 알아 볼수 있게
표시를 하더라도 당신이 주요한 코드 위치를 정해 놓고 작업을 하는게 ( document class 와 같이 class 기반 프로젝트를 뜻함 ) 보다 가독성있고 유지 보수하기 좋을 것이다. 이러한 이유로
Flash 를 만든 사람들은 Flash CS3 에서 Actionscript3.0 을 이용하는 프로젝트 작업시 이러한 기능을 막아 놓았다.

* What if I don't want to write everything in class files? ( 나는 모든 코드를 class 파일에 작성하기를 원하지 않는데, 어떻게 해야 하는가? )

Actionscript 3.0 의 오해 중 하나는 모른 code 를 class 파일에 작성해야 된다는 점이다. 이것은 맞는 말이 아니다. 당신은 여전히 Timeline 에 스크립트를 삽입할수 있다. 나 역시도 여전히
Timeline 을 이용한 작업을 하고 있다. 그러나 당신 스스로 보다 객체지향 코드를 작성하고 싶다면 Actionscript3.0 는 객체지향 프로그래밍을 보다 쉽게 도와줄 것이다.

* Why is Adobe focusing all of its attention on developers? ( 왜 Adobe 는 개발자들을 위한 것에 주력하는가 ? )

난 이해할수가 없다. Adobe 는 많은 시간을 디자이너를 위한 기능을 만드는데 쓰고 있다. Actionscript3.0는 개발자가 Flash 를 더욱 발전할 수 있게 하는 핵심적인 요소이다. Actionscript3.0 에 대한 프로젝트가 끝났고 곧있으면 Adobe 는 다시 디자인과 애니메이션 기능에 촛점을 맞출 것이다.  Flash Player 10 beta 의 기능을 보라. 3D  커스텀 필터, 물리역학 등등 모두 interactive designer 가 요청한 것들이다.

Where to go from here

아래 자료들은 Actionscript3.0 을 시작하는데 매우 도움을 줄 것이다.

  • ActionScript 3.0 overview discusses the goals and features of the language, as well as describing ECMAScript for XML (E4X) and Flash Player API features.
  • Emmy Huang of the Flash Player team compiled some tips and common issues you might encounter during development to help ease your transition to ActionScript 3.0.
  • To get more articles and online resources, be sure to check out the ActionScript 3.0 section of the ActionScript Technology Center.
  • I also highly recommend Learning ActionScript 3.0. It is a great book for beginners who are learning the new language. You can review three chapters of the book on the Adobe Developer Connection.
  • For more advanced coders, Colin Moock's book Essential ActionScript 3.0 is largely considered the bible of ActionScript 3.0 development. You can review two chapters of Colin's book on the Adobe Developer Connection as well.
  • If you prefer to learn by watching videos, there are many resources available. Lynda.com is a great place to learn about ActionScript 3.0. In particular, ActionScript 3.0 in Flash CS3 Professional is a great introduction to the language. I also run a free video tutorial site (gotoandlearn.com) that has a large number of tutorials featuring ActionScript 3.0.


원문 링크 번역 : 동강 www.ddongkang.com

Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 00:53

지난 강에서 DisplayObject 의 개념에 대해 잠깐 언급하였습니다. 그때 클래스 다이어 그램은 기억이 나시는지요? ( 4강참고) 그 다이어 그램과 같이 Flash 에 존재 하는 모든 객체속성( class ) 들은 상속에 상속을 거쳐서 자신의 속성을 만들게 됩니다.  

예를 들어 F1 을 눌러 봅시다.

 

 

MovieClip

패         키지 :loadClassListFrame('class-list.html')" href="file:///C:/Documents%20and%20Settings/All%20Users/Application%20Data/Adobe/Flash%20CS3/en/Configuration/HelpPanel/Help/ActionScriptLangRefV3/flash/display/package-detail.html">flash.display
클래스 public dynamic class MovieClip
상속 MovieClip  Sprite  DisplayObjectContainer  InteractiveObject  DisplayObject  EventDispatcher  Object

모든 클래스의 최상위인 Object 에서 DisplayObject Sprite 를 거쳐서 MovieClip 이 만들어 짐니다. 이게 바로 상속관계지요

그러면 1) 상속되면 머가 좋은거냐??  2) 왜 상속 되는 거냐??  

1) 상속되면 하위 클래스에서 상위 클래스의 속성을 그대로 가져다 쓸수 있기 때문에 속성을 재 정의할 필요가 없습니다.

단적인 예를들면 MovieClip 은 Sprite 를 상속 받는데 이 Sprite 속성은 F1 을 보시면 알겠지만 MovieClip 에서 타임라인이 없는 Class 라고 보시면 됩니다. 따라서 MovieClip 에서 사용가능한 gotoAndPlay, gotoAndStop 속성을 사용할수가 없습니다.  

2) 왜 상속되는거냐? class 에 대해 확실하게 이해 하고 있지는 않지만, 제 의견은 이렇습니다. 있던 속성을 갔다 쓰면 되지 또 만들 필요가 있는가? 라는 생각입니다. 자세한건 객체 지향 프로그램 관련 서적을 참고 하세요.  

위와 같이 우리가 가장 많이 쓰고 있는 MovieClip 은 이렇게 만들어 지는 것입니다. 상속에 개념은 여기 까지 하고 이제 DisplayObject 와 DisplayObejectContainer 개념을 적용해 보겠습니다.

우선 fla action 창에
trace(root, stage); 
를 찍어 봅시다.
// output
[object MainTimeline] [object Stage]

그리고
var mc:MovieClip = new MovieClip();
trace(mc); 
// output
[object MovieClip] 

여기서 말하는 stage 는 위에서 output 으로 나온것과 같이 object Stage 타입의 하나의 객체 입니다.
보이는 화면이라고 해서 객체가 아닌것이 아니라 그 화면 자체도 객체인 것입니다.
단적인 예를 들어 지구 = stage , 사람 = MovieClip 이라 볼수 있습니다.


위와 같은 계층도로 되어 있습니다. 복잡하니깐 여기에선 Stage 와 Main 부분만 보도록 하겠습니다. 

trace(stage.root);
trace(this.parent);
trace(stage.getChildAt(0));

trace(stage.getChildAt(0).root);
trace(stage.getChildAt(0).parent);

(getChildAt 은 (안) 안에 있는 숫자의 뎁스로 접근하여 그 뎁스에 있는 객체를 반환 합니다. 

// output

[object Stage]
[object Stage]
[object MainTimeline]
[object MainTimeline]
[object Stage] 

parent 는 객체.parent  ==> 객체의 부모에 접근한다는 말 입니다. 여기서 유심이 볼 부분은 빨간색 입니다. stage 에 0 뎁스에 있는 것은 MainTimeline 이다. stage 가 시작 부터 가지고 있는 객체 이지요 ( 그냥 첫 화면에서 보는 타임 라인 이라고 생각하시면 됩니다 ) 이렇게 stage 는 담을 공간을 마련해 주고, 우리는 그 위에 무비클립을 생성하여 사용하는 것이지요. 어려운 개념이니 어렵다고 대충 넘어 가지 마시고 찬찬히 trace 찍어 보시기 바람니다.

 

자 이제 stage 에 마우스 클릭으로 무비 클립을 만들어 circle_mc 를 만들어 봅시다.
action 창에는 ( 앞으로 action 이라고만 쓰겠습니다 )  

removeChild(circle_mc);
trace(circle_mc); 

짠! 어디로 갔을까요??  화면에서는 사라졌지만 아직도 trace 문에서는 찍히고 있는 것을 알수 있습니다. 이 말은 뭘 의미하는 것일까요?

화면에서 사라졌다고 해서 메모리에서도 지워진 건 아님니다.
장난 하냐 ? 그럼 어떻게 지워야 다 지워지는 거냐?   

removeChild(circle_mc);
trace(circle_mc);
circle_mc = null;
trace(circle_mc);  

// output
[object MovieClip]
null  

null 값을 넣어 줘야 지워 지게 됩니다. ( 어렵게 말하면 플레시에는 가비지 콜렉션이라는 쓰레기 값들을 ( 메모리에서 필요하지 않은 부분 ) 을 수집하는 장치가 있습니다. 그 수집 장치의 수집되는 후보가 되는 것이지요 ) 이 개념은 단순 코딩할때는 그냥 지나치는 부분 이지만 Loader class 나 URLLoader

로 파일을 불러 들일 때는 광장히 중요하게 작용하는 부분입니다. 예를 들어 Loader 로 이미지를 주기적으로 10개씩 로드 한다고 생각하면 removeChild 와 null 값으로 이미 지나간 이미지를 지워주지 않는다면 메모리는 점점 쌓이게 되어 컴퓨터 다운!!! 의 결과를 볼수 있으실 것입니다.  

지워주는건 이제 어떻게 하는지 알았고, 같은 무비 클립을 어떻게 동적으로 생성 할거냐? 가 문제 인데 2.0 에서는 duplicateMovieClip 나 attachMovie 을 사용하였지만, 3.0 으로 오면서 모두 사라졌습니다. 대신에 좀더 강력한 세부적으로 작용하는 addChild 나왔습니다.
우선 아까 소스에서

removeChild(circle_mc);
trace(circle_mc);
addChild(circle_mc); 

다시 원이 나타남니다. 그럼  


removeChild(circle_mc);
trace(circle_mc);
circle_mc = null;
addChild(circle_mc);
// output
[object MovieClip]
TypeError: Error #2007: 매개 변수 child은(는) null이 아니어야 합니다.
 at flash.display::DisplayObjectContainer/addChild()
 at Untitled_fla::MainTimeline/frame1()

이미 참조 할수 없게 되어 버렸다는 에러가 나오네요.


addChild removeChild 를 알았다고 해서 동적 생성을 할수 있는건 아님니다. 이제 부터 중요한 라이브러리에 있는 무비클립을 Linkage 하는 절차에 대해 알아 보겠습니다. 우선 아까 것에 이어서 circle_mc 를 stage 에서 지워 버림니다. 그리고 라이브러리에 등록되어 있는 무비클립 위에서 마우스 우클릭을 합니다.

Linkage 에 Export for Actionscript 를 클릭하면 아래와 같이 바뀌게 됩니다. Class 명에는 자신이 지정하고 싶은 이름을 쓰면 됨니다 여기서는 Circle 로 하겠습니다.



이제 준비가 끝났습니다. 이제 addChild 해 볼까요?

var cir:Circle = new Circle();       // 방금전 Circle 이라는 Class 를 생성하였습니다. 이제 그

addChild(cir);                                 클래스를 이용하는 것이지요.  

짠! 붙었습니다. 부모인 stage 에 자식인 cir 을 addChild 했습니다. stage.addChild(cir); 도 같은
의미 입니다. (stage 상에서만 )

변수를 생성하는 방법은

var 이름:클래스명 = new 클래스명();  

본래 검은색으로 써있는 클래스명은 인터페이스 명이라고 해야 되는게 맞지만 그냥 넘어 가겠습니다.( 인터 페이스는 아주 나중에...)  

이제 이걸 이용하여 좀더 재미난걸 만들어 보겠습니다.   

 
  1. import fl.transitions.easing.*;
  2. import fl.transitions.Tween;
  3.  
  4. for(var i:int = 0; i < 50; i++)
  5. {
  6.         var cir:Circle = new Circle();
  7.         cir.x = Math.random() * 550;
  8.         cir.y = Math.random() * 400;
  9.         addChild(cir);
  10. }
  11.  
  12. addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);
  13.  
  14. function mouseOverhandler(event:MouseEvent):void
  15. {
  16.         var targetX = Math.random() * 550;
  17.         var targetY = Math.random() * 400;
  18.         new Tween(event.target,"x",Strong.easeOut,event.target.x,targetX, 30,false);
  19.         new Tween(event.target,"y",Strong.easeOut,event.target.y,targetY, 30,false);
  20.        
  21.        
  22. }

만들어 보시면 알겠지만 여기서 Tween 클래스의 치명적인 버그가 존재(?) 한다는 걸 알수 있습니다.
움직이다 멈춰 버리지요..ㅋㅋㅋ 그래서 ENTER_FRAME 을 돌리던가 google Tweener 를 쓰곤 한담니다. 한번 영역 밖으로 나가지 않게 소스를 수정해 보세요.
Math.random() 함수는 뒤에 오는 인자 값으로 랜덤한 값을 반환해 줍니다.
예)
Math.random() * 10; 
0~ 10 까지 숫자중 하나는 반환해 줌.  

이제 클래스 개념이 본격적으로 시작 되었슴니다. 다음 강 부터는 Frame 액션에서 벗어나 class 액션으로의 업그래이드를 해 보겠습니다.  

역시나 잘못된 점이나 질문들을 거침없는 댓글 부탁드리고요.



Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 00:45

자 오랜만에 공부를 시작하겠습니다. 이것 저것 참고하면서 쓰니 덩달아 잘 이해가 안되었던 부분까지 이해가 되니 기분이 좋습니다. ㅎㅎ 정작 보는 사람은 이해 못하고 있는데 나만이해 되는건 아닌지;;;; ;후덜덜 지난 시간에 ENTER_FRAME 을 이용해서 노가다로 객체의 크기를 변화 시켜 보았는데 먼저 그 코드의 길이를 줄이겠습니다.  

Tween 
패키지 fl.transitions
클래스 public class Tween
상속 Tween  EventDispatcher  Object  
Tween 클래스는 Flash 에서 객체의 움직임을 조절할수 있도록 정의해놓은 내장 class 입니다.
사용방법은 아래와 같습니다.  

import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(myObject, "x", Elastic.easeOut, 0, 300, 3, true);

import 는 사용자 정의 class 나 flash 에서 사용되는 내장 class 를 불러올때 쓰입니다.
1)  import 패키지이름.클래스이름;
2_  import 패키지이름.*; 

* 는 패키지 안에 있는 모든 class 를 불러 올때 쓰입니다.  

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)
Tween(객체:Object, 변화시킬속성:String, 변화스타일:Function, 시작위치:Number, 끝위치:Number, 변화시간:Number, useSeconds:Boolean = false)
우선 stage 에 import 를 시킨뒤 my_mc 라는 무비클립을 만드세요 여기서는 Tween 이름을 myTween으로 하겠습니다.   

 
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3.  
  4. var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 100, 300, 1, true);
  5.  

 어떻게 되나요? 움직임을 자세히 보기 위해 마우스 이벤트를 넣어 보겠습니다

 
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3.  
  4. my_mc.addEventListener(MouseEvent.MOUSE_OVER, myOverhandler);
  5. function myOverhandler(event:MouseEvent):void
  6. {
  7.         var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 100, 300, 1, true);
  8.        
  9. }
  10.  
  11. my_mc.addEventListener(MouseEvent.MOUSE_OUT, myOuthandler);
  12. function myOuthandler(event:MouseEvent):void
  13. {
  14.        
  15.         var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 300, 100, 1, true);
  16.  
  17.  
  18. }

 여기서는 "x" 속성을 바뀌었지만 여기에 들어 갈수 있는 속성은 MovieClip 이나 Sprite 등 이 가지고 있는 모든(?) 속성이 들어 갈수 있습니다. 그럼 크기를 바꾸려면 어떻게 해야 될까요? "scaleX" 와 "scaleY" 를 동시에 바꿔주어야 합니다. Elastic.easeOut 이라는 변화 속성을 넣어 줬는데, 이것 외에도 여러가지가 있습니다

Elastic.easeOut, easeIn, easeInOut
Bounce.easeOut, easeIn, easeInOut
None.easeOut, easeIn, easeInOut
Strong.easeOut, easeIn, easeInOut

등등 한번식 사용해 보세요. 은근 Tween 클래스를 가지고 노는건 재미 있답니다.  

그럼 저번시간에 했던 것을 바꿔보겠습니다.

 
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3.  
  4. var ori_W = my_mc.width
  5. var ori_H = my_mc.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 my_mc 의 값을 저장
  6. var targetW = 120;
  7. var targetH = 120;
  8. //var bo:Boolean = false;
  9. addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  10. addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  11. var myTween:Tween;
  12. function Overhandler(event:MouseEvent):void
  13. {
  14.         myTween = new Tween(my_mc, "width", Elastic.easeOut, ori_W, targetW, 1, true);
  15.         myTween = new Tween(my_mc, "height", Elastic.easeOut, ori_H, targetW, 1, true);
  16.    
  17. }
  18. function Outhandler(event:MouseEvent):void
  19. {
  20.         myTween = new Tween(my_mc, "width", Elastic.easeOut,targetW ,ori_W,1, true);
  21.         myTween = new Tween(my_mc, "height", Elastic.easeOut,targetW, ori_H,1, true);
  22.  
  23. }

 어떤가요? 저는 Tween 을 알게 되었을때 ENTER_FRAME 으로 왜 노가다를 했을까 하고 한탄을 했었는데, 이 Tween 클래스 는 잘만 사용하면 정말 편리하고 강력하게 사용됩니다. 그밖에 가지고 있는 속성들은 후에 다루도록 하겠습니다.  

DisplayObject
DisplayObjectContainer

도대체 이놈들은 뭐냐?  

나열되는객체
나열되는 객체 그릇 

한글로 써진 그대로 입니다. stage 에 올려진 것들은 모두 DisplayObject 이고 그 중에서는 DisplayObjectContainer 기능을 하는것도 있습니다. 쉽게 말하면(?) , 바구니는 그 자체로 하나의 객체가 될수 있지만 그안에 다른 물체들을 담을수도 있지요. 이 바구니가 DisplayObjectContainer 입니다. 이게 왜 중요한가?  

DisplayObject

패키지              :loadClassListFrame('class-list.html')" href="http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/display/package-detail.html">flash.display
클래스 public class DisplayObject
상속 DisplayObject EventDispatcher Object
구현 IBitmapDrawable
하위 클래스 AVM1Movie, Bitmap, InteractiveObject, MorphShape, Shape, StaticText, Video

 

DisplayObjectContainer

패키지            :loadClassListFrame('class-list.html')" href="http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/display/package-detail.html">flash.display
클래스 public class DisplayObjectContainer
상속 DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
하위 클래스 Loader, Sprite, Stage

위와 같이 DisplayObject 에서 시작하여 stage위에서 구현되는 객체들이 정의되게 됩니다. (상속관계를 잘 보세요) 그럼 상속은 뭔가? 신상품과 구상품의 예를 들어 보겠습니다. 구상품이 상위 클래스 이고, 신상품이 하위 클래스 입니다.  

구상품이 출시되고 신상품이 출시 될때 신상품이 가지고 있는 기능은 무엇일까요? 구상품이 가지고 있는 기능들은 모두 가지고 있고 그 기능을 변화 시키던가, 새로운 기능을 추가 해 주어서 신상품이 만들어 지는 것입니다. 따라서 신상품은 구상품보다 덩치(가지고 있는 기능들) 가 더 커지게 되는 것이지요.

 이 관계는 우리가 지금까지 써 보았던 MovieClip 과 DisplayObject 와 의 관계라고 할수 있습니다. MovieClip 이 신상품이고 DisplayObject 가 구상품이지요. 

상속관계를 더 살펴 보면 모든 클래스의 최상위 클래스인 Object 는 모든것을 쓸수 있는 전자 제품을 예로 들면 아무것도 추가 시키지 않은 기판이라 할수 있습니다. ( 여기서, 공대생 특징이 나오는군요;; )

다현아빠 님의 글을 인용해 보겠습니다

 

red : 추상화 클래스(3.0에서는 추상화 클래스가 없지만 추상화 계념의 기반클래스이다.

물론 추상화이니 당연히 인스턴스도 생성을 해서는 안된다.)

yellow : 생성제한(MorphShape/StaticText는 플래시 오서링툴로만 생성가능.

AVM1Movie는 2.0이하 기반에서 제작한 swf 또는 심볼 객체이다.) 

green : 동적으로 인스턴스 생성이 가능한 클래스 

purple : 마커 인터페이스(마커 인터페이스에 대한 포스팅글 참조.)

뭐야 왜이렇게 갑자기 어려워 진거냐, 이거 기초 강좌 아니었냐  

어려워도 이것만은 꼭 알아 두고 넘어가야할 부분입니다. DisplayObject 야 말로 flash 의 핵심이고 flash 그 자체라고 해도 과언이 아닐 정도로 중요한 class 입니다. (위의 그림과 연관하여 ) http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/display/DisplayObject.html

 정독하면서 읽어 보세요. 무슨말인지 모르겠다고 해도, 다음 강에서는 예를 들어 이해 시켜 드리기 위해 노력하겠습니다. flash 에 이런 class 들이 있구나 참고 하시고 공부하시는것도 좋을것 같습니다.

 

역시나 잘못된 부분이나 질문은 거침없이 댓글 날려 주세요.

 

http://dongkang.ivyro.net/zbxe/?module=file&act=procFileDownload&file_srl=3846&sid=493dd3dea32e8baf0c73221c13a66134

클래스 다이어그램 링크 입니다. 


Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 00:37

1, 2 강에서 Event 중 마우스 이벤트와 ENTERFRAME 이벤트에 대해 잠깐 훑어 보았습니다. 이 두가지 이벤트는 Flash 에서 가장 많이 쓰이는 이벤트에 불과 하고요( 하지만 굉장히 중요한 이벤트들 입니다 ) 상상하지 못할 별에 별 신기한 이벤트 들이 Actionscript 3.0 에 존재 하고 있고, 사용자는 단지 이벤트의 전달 구조만 이해 한다면 손 쉽게 사용할수 있습니다.  

시작에 앞서 사람들이 말하는 "F1 형님" 에 대해 알아 보겠습니다. F1 형님이란, Flash 에서 제공하는 도움말입니다. Actionscript 에서 제공하는 거의 모든 클래스를 포함하고 설명하고 예제로 사용법을 알려 주는 아주 편안한 도구 입니다.  

사용법은 그냥 F1 키를 누르면 도움말 기본이 뜨고 위에 있는 검색 창에 모르는 클래스나 함수를 써주게 되면 도움말에 들어 있는 파일중에서 그 단어가 포함된 링크들을 찾아 줍니다. ( 실제로 이 도움말은 html 파일로 되어 있습니다 )  



이건 단순한 사용법이고 좀더 효율적으로 해당 클래스를 찾으려면 아래 그림과 같이 문자열을 마우스로 드레그 하고 F1 을 누르면 해당 클래스나 메소드로 바로 이동하게 됩니다. ( 아래 그림에서는 MouseEvent ) 처음 시작할때 부터 F1 습관을 들여 놓는 것이, 실력이 쭉쭉쭉 향상 되는 지름길 입니다. 영어가 부담스러우신 분들은 CS3 한글판을 설치 하시던가,

  http://cafe.naver.com/flashactionscript/9310 

이글을 참고 하세요.

1. Event 이용하기

지금까지 배웠던 3 가지 이벤트로 간단한 크기 변환 버튼을 만들어 보겠습니다. 우선 Stage 에 자신이 원하는 버튼의 모양을 3개를 만들어 주세요. ( 이름을 : bu_mc1, bu_mc2, bu_mc3 이라 하겠습니다.


이름을 입력 하고 레이어를 추가한 후에 action 을 추가 하겠습니다. 

  1. bu_mc1.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  2. bu_mc2.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  3. bu_mc3.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  4. bu_mc1.addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  5. bu_mc2.addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  6. bu_mc3.addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  7.  
  8. function Overhandler(event:MouseEvent):void
  9. {
  10.         trace("오버");
  11.  
  12. }
  13. function Outhandler(event:MouseEvent):void
  14. {
  15.         trace("아웃");
  16.  
  17. }

다 타이핑 하기 지겨우시지요? for문을 이용해서 간략화 하겠습니다.

  1. for(var i:int= 1; i < 4; i++)
  2. {
  3.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);        
    // bu_mc1 를 [] 를 통해 표현하는방법
  4.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);      
    // addEventListener 사이에 .() 이없다는것 주의
  5.  
  6.                                                                                                                    
  7. }
  8.  
  9. function Overhandler(event:MouseEvent):void
  10. {
  11.  
  12.  trace("오버");
  13. }
  14. function Outhandler(event:MouseEvent):void
  15. {
  16.  trace("아웃");
  17.  
  18. }

같은 기능을 수행 하지만 보기에 더 깔끔합니다. 그런데 6개의 Event 에 대해 작용하는 함수를 왜 두개 밖에 않만들었을까요? Actionscript 의 EventListener 는 함수를 이어 주는 역할만 하는게 아니라 이벤트가 발생한 객체와 이벤트를 전달할 객체 그리고 이벤트 자체에서 포함하고 있는 정보 들도 전달해 주는 기능을 합니다.

  1. event.target
  2.  
  3. function Overhandler(event:MouseEvent):void
  4. {
  5.    trace(event.target.name);
  6. }
  7. function Outhandler(event:MouseEvent):void
  8. {
  9.    traceevent.target.name);
  10.  
  11. }

어떤 결과가 나올까요???? 직접 해 보시기 바랍니다. 위와 같이 event 는 정보 덩어리 입니다. ( 위에서는 무비 클립의 name 속성을 이용했습니다 ) name 속성 뿐만 아니라 event.target.x , event.target.width, event.target.alpha 등등.. 전달되는 객체가 가지고 있는 ( 여기서 전달 되는 객체는 bu_mc 들이고, bu_mc 들은 MovieClip 으로 정의 했다는 거 기억 하시지요? ) 속성들을 알아 볼수 있습니다. ( 엄격하게 따지면 달라지는 경우도 있지만 여기에서는 그냥 넘어 가겠습니다.) 소스를 보다 보면 event.target 이 아니라 event.currentTarget 으로 전달 받는 경우가 있는데, 잠깐 언급하고 지나가겠습니다.

2. event.target , event.currentTarget 

 target <- 이벤트를 쏜놈 입니다. 보통은 EventDispatcher 이며 EventDispatcher를 상속받은 클래스. IEventDispatcher를 구현한 클래스만이 event.target 이 될 수 있습니다. currentTarget 은 보통은 화면에 출력되는 객체 입니다. DO와 DOC는 트리구조이죠. 간다한 예를 들어... 나무가 있습니다. 나무의 뿌리(target) 부분에 링겔(이벤트리스너)을 꼽습니다. 최초 뿌리 부분에서의 약물이 잎사귀 까지 가는 단계를 캡쳐 단계라 합니다. 약물이 잎사귀(타겟)에 도달한 후 다시 (약물을 전달한)수액은 뿌리로 돌아갑니다. 이것은 버블링 단계라 합니다. currentTarget 은 현재 (약물을 전달하는)수액이 어느지점에 있는가를 나타냅니다. - 퍼옴 

한마디로 target 은 이벤트를 발생 시킨 객체고 currentTarget 은 이벤트가 발생하는 객체 입니다. 따라서 target 과 currentTarget 이 같은 경우도 있고 달라지는 경우도 있습니다. 두가지를 잘 구분해서 써야 원하는 코딩이 이루어 질수 있습니다. ( 저도 확실하게 이해 하고 있지 않은 부분이라 더 깊게 들어 가는건 조금 공부를 더 한후에 하겠습니다.. ㅜㅡ;; 곧 수정하겠습니다. (2008-12-11)  

또 지겨운 이론을 이렇게 줄줄줄 늘어 놓았네요... 다시 돌아 와서 ..위와 같은 원리로 함수는 두개만 있어도 상관이 없다는 말을 하고 싶었습니다..   

변수를 추가 해서 제일 상단에 처음 width 값과 height 값을 저장합니다.
var ori_W = bu_mc1.width
var ori_H = bu_mc1.height           
// bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장 
 

그리고 변화 시키고 싶은 target 값을 지정하겠습니다.
var targetX = 120;
var targetY = 120; 
  1. var ori_W = bu_mc1.width
  2.  
  3. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  4.  
  5.  
  6.  
  7. var targetW = 120;
  8.  
  9. var targetH = 120;
  10.  
  11.  
  12.  
  13. for(var i:int= 1; i < 4; i++)
  14. {
  15.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);         // bu_mc1 를 [] 를 통해 표현하는방법
  16.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);       // addEventListener 사이에
  17.  
  18.                                                                                                                     .() 이없다는것 주의
  19. }
  20.  
  21. function Overhandler(event:MouseEvent):void
  22. {
  23.  
  24.      event.target.width = targetW;
  25.      event.target.height = targetH;
  26.  }
  27. function Outhandler(event:MouseEvent):void
  28. {
  29.    event.target.width = ori_W;
  30.      event.target.height = ori_H;
  31.  
  32.  
  33. }
    실행! 생각한 대로의 결과 인가요?
  1. 그럼 여기에 부드러운 크기 변화를 위한 ENTER_FRAME 이벤트를 적용해 보겠습니다. fpt 는 36으로 조절
    var ori_W = bu_mc1.width
  2. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  3. var targetW = 120;
  4. var targetH = 120;
  5. for(var i:int= 1; i < 4; i++)
  6. {
  7.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  8.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  9.                                                                                                      
  10. }
  11.  
  12. function Overhandler(event:MouseEvent):void
  13. {
  14.  
  15.    event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  16.    
  17. }
  18. function Outhandler(event:MouseEvent):void
  19. {
  20.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);    
  21.    
  22. }
  23. function enterframehandler(event:Event):void
  24. {
  25.  if(targetW > event.target.width){        // targetW 에서 정한 크기보다 작을때 까지 +3 씩 해 준다.
  26.   event.target.width += 3;                    
  27.   event.target.height += 3;
  28.  }
  29.  else                                              // 그 크기가 되면 이벤트 삭제
  30.   event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  31.  
  32.  
  33. }

아놔...  왜 크게만 되고 작게는 안되요?


  1. var ori_W = bu_mc1.width
  2. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  3. var targetW = 120;
  4. var targetH = 120;
  5. for(var i:int= 1; i < 4; i++)
  6. {
  7.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  8.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  9.                                                                                                      
  10. }
  11.  
  12. function Overhandler(event:MouseEvent):void
  13. {
  14.  
  15.  event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  16.    
  17. }
  18. function Outhandler(event:MouseEvent):void
  19. {
  20.    event.target.addEventListener(Event.ENTER_FRAME, enterframehandler2);    
  21.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);    
  22.  
  23.    
  24. }
  25. function enterframehandler(event:Event):void
  26. {
  27.  if(targetW > event.target.width){
  28.   event.target.width += 3;
  29.   event.target.height += 3;
  30.  }
  31.  else
  32.   event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  33.  
  34.  
  35. }
  36. function enterframehandler2(event:Event):void
  37. {
  38.  if(ori_W < event.target.width){
  39.   event.target.width -= 3;
  40.   event.target.height -= 3;
  41.  }
  42.  else
  43.   event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler2);
  44.  
  45.  
  46. }


코드가 점점 길어 짐니다.. 으악!!! 어떻게 코드를 줄일수 있을까요? if 문을 사용해 봅시다.

  1. var ori_W = bu_mc1.width
  2. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  3. var targetW = 120;
  4. var targetH = 120;
  5. var bo:Boolean = false;
  6. for(var i:int= 1; i < 4; i++)
  7. {
  8.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  9.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  10.                                                                                                      
  11. }
  12.  
  13. function Overhandler(event:MouseEvent):void
  14. {
  15.  bo = true;
  16.  event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  17.    
  18. }
  19. function Outhandler(event:MouseEvent):void
  20. {
  21.   bo = false;
  22.  event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  23.  
  24. }
  25. function enterframehandler(event:Event):void
  26. {
  27.  if(bo){
  28.   if(targetW > event.target.width){
  29.    event.target.width += 3;
  30.    event.target.height += 3;
  31.   }
  32.   else
  33.   {
  34.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  35.    bo = false;
  36.   }
  37.  }
  38.  else
  39.  {
  40.   if(ori_W < event.target.width){
  41.    event.target.width -= 3;
  42.    event.target.height -= 3;
  43.   }
  44.   else{
  45.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  46.    bo = true;
  47.   }
  48.  }
  49.  
  50. }


bo 값을 이용해 ture, false 를 조절해서 enterframehandler 를 하나로 줄였습니다. 어렵다고요?
제가 봐도 어렵습니다. 최종 코드를 하나하나 타이핑 해 보시고, 이 ENTERFRAME 과 MouseEvent 와의 이벤트 전달 관계를 잘 이해해야 뒤에 나오는 더 어려운 이벤트들의 관계를 이해 할수 있을꺼라 생각이 됩니다. 우리의 생각을 컴퓨에서 전달하기 위해서는 한글을 이해를 못하는 멍청한 컴퓨터를 배려 해서 10101111111001 로 전달해 줘야 되는데 그 10101111101의 중심에는 if 문이 있습니다. 잘 활용하면 명검이 될수도 있고 잘 활용못한다면 무수히 많은 에러로 인해 프로그램을 망가뜨릴수 있으니 잘 이해 하고 넘어 가세요. 

버튼 크기 바꾸는데 왜이리 복잡하냐!!!!!!!!! 라고 말하시는 분들을 위해

 위의 방법을 쓴 것은 ENTERFRAME 의 이해를 위해서 사용한 것이고, actionscript 에는 알아서 계산해 주는 Tween 이라는 클래스가 있습니다. 위의 방법은 강력한 Tween 클래스를 사용하기 전의 연습단계이고,, Tween클래스는 좀 후에 다루겠습니다. 궁금하신 분들은 Tween 클래스를 F1 에서 찾아 보는것도 좋을것 같습니다.  

ps : 위와 같이 enterframe 을 하나로 사용하면 문제가 발생합니다. 왜 발생하는 것일까요?  
       생각해 봅시다.

 

 문제 수정전 swf 파일
 

 

Posted by Flash 동강