'Flashplatform'에 해당되는 글 3건

  1. 2010.06.13 [AS3] callback 과 dispatchEvent (9)
  2. 2009.08.25 What is "Flashplatform" ? (3)
  3. 2009.01.20 Actionscript3.0 학습법 (9)
Actionscript3.02010.06.13 20:43

Actionscript 3.0 의 Event Model 은 이벤트를 dispatch 하는 방식으로 이루어져 있습니다. 많은 클래스들이 클래스 내부적으로 "어떠한 행동"에 대해 이벤트를 외부로 알려주는 방식을 사용하고 있습니다. 예를 들어 Loader 클래스를 사용할때, 이미지나 파일들을 로드한 후에 Loader 클래스 내부적으로 이벤트 dispatch 가 일어나서 사용자나 개발자는 그 상황에 따른 후 처리를 할 수 있습니다.


import flash.display.Loader;
import flash.events.Event;
import flash.events.EventDispatcher;

var ld:Loader = new Loader();
ld.addEventListener(Event.COMPLETE, hnLoaded);

function hnLoaded( e:Event ):void{   
	// 로드끝
}

// Loader 내부
public class Loader extends EventDispatcher{
	public function Loader(){}
	private function loaded(){
		dispatchEvent(new Event(Event.COMPLETE));
	}
}

개발자들은 addEventListener 를 이용하여 내부적으로 dispatchEvent 되는걸 청취(addEventListener) 하고 있다가 반응이 오면 다운로드 된 데이터에 접근 가능 하게 됩니다. 이렇게 대부분의 AS3 이벤트 모델은 dispatch event 에 근거 하고 있습니다.


저도 AS3을 공부하고 초기에는 dispatchEvent 의 개념에 익숙하지 않아, 바보 같은 짓을 하곤 했는데요. 예를 들어 Event.ENTER_FRAME 으로 이벤트가 끝날때 까지 기다린다던지, Timer 를 이용하여 비슷한 방법을 사용하곤 했습니다. 

var ld:Loader = new Loader();
ld.addEventListener(Event.ENTER_FRAME, hnLoaded);

function hnLoaded( e:Event ):void{    
   // 로드끝
   if(ld.content) {

        // null 이 아니면 로드끝이라 판단
	ld.removeEventListener(Event.ENTER_FRAME, hnLoaded);
	
        // 로드후 후처리 로직 구현    
   } 
}



dispatch Event 는 그 밖에도 클래스의 재사용성에 대한 강점을 가지고 있습니다. 내부적으로 dispatch 되는 이벤트(행동)들을 addEventListener를 이용하여 청취하기만 하기 때문에 객체 유연성이 높습니다. 그 밖에도 여러 장점이 있지만, 자랑은 여기까지 하겠습니다.



dispatchEvent를 사용하지 않고 대안으로 사용할 수 있는 방법이 해당 행동에 대한 callback 메소드를 이용하는 것 입니다. Adobe에서 제공한 flashplatform optimizing content 문서를 보면 플래시 콘텐츠 최적화 방법중에 이벤트 구현을 dispatchEvent를 사용하기 보단 callback 을 사용하는게 더 효율적이라고 하고 있습니다. 이유는 여러가지가 있겠지만, 제가 생각하는 걸 나열해 보면 다음과 같습니다.


  • dispatchEvent 가 일어났다는걸 알기 위해서 addEventLister 를 등록해야 한다.
  • 너무 많은 addEventListener 사용은 메모리나 퍼포먼스에 영향을 줄수 있다.
  • 너무 많은 addEventListener 사용 코드를 지져분 하게 한다. (개인적 취향입니다.)

그래서 그 문서에서는 dispatchEvent 를 사용하지 말고 callback 메소드를 전달하여 이벤트 후처리를 수행하는게 퍼포먼스에 이점이 있다고 말하고 있습니다. 아래와 같은 방식으로요.


var ld:LoaderCallback = new LoaderCallback(hnLoaded);

public class LoaderCallback extends EventDispatcher{
	private var _callback:Function;   
	private var _ld:Loader;    
	
	public function LoaderCallback() {
		_ld = new Loader();
		_ld.addEventListener(Event.COMPLETE, loaded);
	}    
	public function load(url:String,callback:Function):void {
		_callback = callback;       
		_ld.load(new URLRequest(url));
	}    
	private function loaded(e:Event) {
		callback(e);
	}
}


callback 메소드를 로드를 수행하는 LoaderCallback의 load 메소드에 파라미터로 넘기기 때문에 따로 addEventListener를 등록할 필요도 없고 이벤트 관리를 효율적으로 할 수 있습니다.


프로젝트를 하면서 고민했던 부분이 바로 이 부분이었는데요. 퍼포먼스를 생각하면 (그밖에도 여러이점이 있겠지만) callback 을 사용해야 하지만, dispatchEvent 를 이용하면 나중에 API 로 변경 했을때 추가 작업없이 바로 사용 할 수 있다는 장점 때문에 두가지 선택 사항에서 고민을 많이 하였습니다. 그래서 내린 결론은 addEventLister 등록을 최소한으로 하고 API 로서 기능을 수행할 가능성이 적은 클래스는 callback 를 사용하고 API 의 기능을 수행해야 하는 객체에는 dispatchEvent 를 사용하였습니다. dispatchEvent 도 일일히 각각의 이벤트를 등록하여 청취하는 방법이 아니라, 하나의 이벤트를 수신하여 커스텀 이벤트에 있는 type 으로 이벤트 유형을 판단 하도록 하였습니다.


아래와 같은 방법은 3번의 addEventListener를 해야 되지만


stream.addEventListener(StreamEvent.PLAY,hnStreamPlay);
stream.addEventListener(StreamEvent.STOP,hnStreamStop);
stream.addEventListener(StreamEvent.PAUSE,hnStreamPause);

public class Stream extends EventDispatcher{ 
	public function Stream(){}
        public function play():void { 
		dispatchEvent(new StreamEvent(StreamEvent.PLAY));
	}  
	public function stop():void {
		dispatchEvent(new StreamEvent(StreamEvent.STOP));
	}
	public function pause():void {
		dispatchEvent(new StreamEvent(StreamEvent.PAUSE));
	}
}

function hnStreamPlay( e:StreamEvent ):void{}
function hnStreamStop( e:StreamEvent ):void{}
function hnStreamPause( e:StreamEvent ):void{}


아래 방법은 한개의 등록만으로 처리가 가능 합니다.

stream.addEventListener(StreamEvent.ECHO,hnStreamEcho);

public class Stream extends EventDispatcher{ 
	public function Stream(){}       
	public function play():void {
		dispatchEvent(new StreamEvent(StreamEvent.ECHO,StreamEvent.PLAY));
	}
	public function stop():void {
		dispatchEvent(new StreamEvent(StreamEvent.ECHO,StreamEvent.STOP));
	}
	public function pause():void{
		dispatchEvent(new StreamEvent(StreamEvent.ECHO,StreamEvent.PAUSE));
	}
}
function hnStreamEcho( e:StreamEvent ):void{ 
	// StreamEvent 에 label 을 구현함    
	if(e.label == StreamEvent.PLAY){} 
	else if(e.label == StreamEvent.STOP){}
	else if(e.label == StreamEvent.PAUSE){}
}


개인적으로 두번째 방법을 더 선호 하는데요. 그때 그때 상황에 따라 선택이 중요한것 같습니다.


Flashplatform 개발 작업이 다른 언어에 비해 이벤트를 관리해야 되는 상황이 많은데요. 사용하기 편한것도 좋지만, 메모리나 퍼포먼스, 코드 가독성을 생각하여 판단하는 능력이 필요 하다는 생각이 드네요.


posted by dongkang




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.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 동강