메뉴 건너뛰기

FLASHCAFE

(*.138.65.73) 조회 수 33570 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print 수정 삭제
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print 수정 삭제
http://cafe.naver.com/q69/26656




플래쉬 액션스크립트의 세계로 (1) - 플래쉬와 액션스크립트 소개


2003년 새해가 밝았다. 새해에 각광받을 기술 중의 하나는 플래쉬가 아닌가 싶다. 거의 모든 운영체제웹브라우저에서 동작할 뿐만 아니라 독립 응용프로그램으로도 실행가능하고 애니메이션, 사운드 출력 뿐만 아니라 소켓 연결, XML 처리, 자바스크립트 수준의 프로그래밍이 가능한 한마디로 프로그래밍/멀티미디어 저작 환경이라고 할 수 있다.

이제부터 4회에 걸쳐 플래쉬와 액션스크립트에 관해 연재를 진행해보고자 한다. 왜 프로그래밍 잡지에서 플래쉬에 대한 기사가 나와야 하는지 의아해하는 사람들도 있을 것이다. 만일 플래쉬를 디자이너들이 사용하는 애니메이션 툴 내지는 웹 사이트에서 광고 내지는 멋있는 인트로를 만들기 위해서 사용된다고만 알고 있다면 큰 오해라는 점을 밝히고 싶다. 그것은 플래쉬로 할 수 있는 일 들 중 빙산의 일각(?)에 불과하다.

필자 역시 처음에는 플래쉬를 디자이너들만 사용하는 툴로 생각했었고 (물론 디자인 감각이 있어야 쓸 수 있는 툴이란 점은 인정한다) 내가 저걸 사용할 날이 오리라고는 꿈도 꾸지 못했다. 하지만 플래쉬로 만든 게임들과 사이트들을 보면서 또 액션스크립트에 관한 이야기를 들으면서 프로그래밍툴로의 가능성을 인식했고 언젠가 한번은 플래쉬로 뭔가를 만들어봐야겠다고 생각해왔다. 필자도 사실 플래쉬 관련 책은 몇 권 샀는데 집에 묵혀두고 있다가 이번에 필자 회사의 사이트(http://www.edgariq.com)를 플래쉬로 만들면서 플래쉬를 좀더 심각하게 사용해볼 기회를 갖게 되었고 거기서 배운 점들을 여러분과 공유하고자 한다. 역시 사람은 필요의 동물이라고 프로그래밍이나 툴 사용법을 배우는데는 뭔가 강제적인 요소가 필요한 듯 하다. 본론으로 돌아와서 도대체 플래쉬의 어떤 점이 장점인지에 대해서는 차차 이야기를 진행해가면서 설명하기로 하겠다.

참고로 이 연재는 C 혹은 자바 혹은 파스칼 혹은 비주얼 베이직과 같은 프로그래밍 언어를 사용해본 경험이 있는 사람을 대상으로 한다. 즉 프로그래밍에 관해서는 기본 지식이 있다고 가정하겠다는 것이다.


1. 플래쉬의 역사와 발전 방향


플래쉬의 시작은 벡터용 애니메이션 툴이었지만 이제는 그 세계를 일종의 프로그래밍 언어로 넓혀가고 있다. 그럼 플래쉬가 어떤 과정을 걸쳐 오늘날에 이르기 되었는지 먼저 간단하게 살펴보도록 하자.

1.1 플래쉬의 역사


퓨처스플래쉬/플래쉬 1.0

플래쉬의 처음 시작은 퓨처웨이브(FutureWave)라는 6명이 전부인 작은 벤처기업이 1996년 5월에 발표한 퓨처스플래쉬(FutureSplash) 애니메이터라는 것에서 비롯한다 (이걸 처음 만든 사람의 이야기를 듣고 싶다면 참고문헌 1을 보기 바란다). 이 것은 GIF 기반 애니메이션의 한계점을 극복하기 위해 만들어진 벡터 기반의 멀티미디어 소프트웨어(정확히 말하자면 애니메이션 저작도구플레이어)였는데 벡터 기반이었기 때문에 용량이 작다는 것과 웹브라우저에서 플레이할 수 있도록 해주는 작은 용량의 플러그인 소프트웨어(매크로미디어 플래쉬 플레이어의 전신이라고 할 수 있겠다)도 제공된다는 장점을 갖고 있었다. 이 소프트웨어는 1996년 8월에는 MSN과 디즈니 온라인에서 사용될 정도로 각광받기 시작했고 마침내는 매크로미디어사가 이 기술의 미래를 보고 1996년 12월에 퓨처웨이브를 아예 인수했다. 인수와 함께 매크로미디어는 퓨처스플래쉬를 플래쉬 1.0이란 이름으로 발표하였다. 인수당시 매크로미디어는 디렉터(Director)와 쇽웨이브(Shockwave)가 주력 제품이었고 잘나가는 회사였지만 플래쉬가 가진 장점을 인식하고 현명한 투자를 한 것이다.

플래쉬 2.0

매크로미디어가 퓨처웨이브를 인수하고 바로 내놓은 첫번째 작품이 바로 플래쉬 2이며 여기에는 사운드 기능과 비트맵/색상 효과 기능이 추가되었다.

플래쉬 3.0

1998년 5월 플래쉬 3.0이 발표되었고 여기에는 무비클립 심벌, 마스크 레이어, 무비로딩 및 Tell Target 액션, 투명효과, 세이프트위닝 등의 기능이 추가되었다. 또 플래쉬 파일을 임베드한 HTML 파일을 생성해주는애프터샥(AfterShock)이라는 프로그램도 함께 발표되었다.

플래쉬 4.0

1999년 6월 뜨거운 관심과 기대를 받으면서 액션스크립트와 MP3 오디오 압축기술로 무장한 플래쉬 4가 발표되었다. 여기서 발표된 액션스크립트는 프로그래밍 환경으로서의 플래쉬의 가능성을 보여주기에 충분했다 (하지만 프로그래머 입장에서 볼때 만족할만한 수준은 아니었다). 또한 플래쉬 3에서는 별도 유틸리티로 존재하던 애프터샥을 메뉴 버튼에 포함시키는 등 인터페이스가 보다 깔끔하게 단장되었다.

플래쉬 5.0

2000년 7월 플래쉬 5가 발표되었다. 플래쉬 5의 외관상 변화는 패널의 등장으로 인해 사용하기가 편리해졌다는 것이다. 하지만 뭐니뭐니 해도 가장 큰 변화는 액션스크립트가 프로그래밍 언어처럼 강력해졌다는 것이다. 뒤에서 다시 설명하겠지만 플래쉬 5의 액션스크립트는 ECMA-262(European Computers Manufacturers Association)라는 자바 스크립트 문법 표준을 따르기 때문에 보다 체계적이고 객체지향 스크립트 프로그래밍이 가능해졌고 이때부터 액션스크립트가 널리 사용되기 시작했다 (프로그래머 입장에서 볼때 스크립트 언어라고 할 수 있는 정도의 수준이 된 것이 이 버전부터 이다)

플래쉬 MX

플래쉬 MX의 발표 이전까지 매크로미디어는 멀티미디어 및 웹 관련 클라이언트 개발 툴 (플래쉬, 쇽웨이브, 드림위버 등등) 회사에 지나지 않았다고 할 수 있는데 매크로미디어에서는 자신의 영역을 서버 시장으로 넓히기를 원했고 그 일환으로 2001년 초에 알레어 (Allaire)라는 회사를 인수하였다. 이 회사는 콜드퓨전 웹서버와 JRun 웹서버를 개발하는 회사였다. 여담으로 이 회사는 알레어라는 창업자가 자신의 이름을 따서 만들었고 이 사람이 합병 후 매크로미디어의 CTO가 되었다

이 회사와의 합병 이후 매크로미디어는 자사 제품군을 하나의 패밀리로 묶어서 MX(참고로 MX가 무엇의 줄임말이냐는 질문에 매크로미디어 CTO는 무엇인가의 줄임말이 아니라 하나의 컨셉을 대표하는 말이라고 얼버무렸다)라는 이름으로 발표하였다. 그 제품군 중 하나가 바로 플래쉬 MX이며 이를 플래쉬 5.0의 다음 버전인 6.0으로 생각하면 될 듯 하다. 다음 그림은 플래쉬 MX의 실행 화면이다.



<그림 1. 플래쉬MX의 실행 화면>

플래쉬MX 자체의 새로운 특징은 플래쉬 내에서 비디오를 압축·스트리밍하는 등 비디오 제어가 가능하며 리얼미디어·윈도미디어 등 별도의 플레이어 없이도 동영상을 실행할 수 있다는 것이고 액션스크립트의 기능이 대폭 강화되었고 성능이 개선되었다는 것을 들 수 있다. 또한 개발자들은 PDA, 게임기 등 플랫폼에 관계없이 다양한 인터넷 장비에서 구현되는 플래쉬를 제작할 수 있게 됐다. 다시 말해서 이러한 장비들에서 플래시MX 플레이어가 내장된다는 것이다. ‘플래쉬MX’를 지원하는 장비업체로는 심비안(Symbian), 삼성전자, 카시오, 인텔, 소니, 오픈TV, 마이크로소프트, 리버레이트(Liberate), 피닉스테크놀러지(Phoenix Technologies) 등이 있다. 또한 써드파티에 의한 컴포넌트 제작이 가능해진 것도 MX 버전서부터이다. 참고문헌 7에 이러한 확장 컴포넌트를 제공해주는 웹사이트들 목록을 적어두었으니 참고하기 바란다.




참고 1. 스튜디오MX

스튜디오MX는 매크로미디어에서 내놓은 인터넷 응용프로그램 개발 관련 통합제품군으로 웹페이지 저작툴인 ‘플래쉬MX’와 ‘드림위버MX’, 웹그래픽 툴인 ‘파이어웍스MX’, 인쇄물 그래픽툴인 ‘프리핸드 10’ 등으로 구성되어 있다. 특히 이번 제품은 뛰어난 통합과 향상된 기능, 자바기술과 산업 표준에 대한 강력한 지원이 가능하다. 전체 웹 개발에서 그래픽을 만들고, HTML 페이지의 레이아웃을 제작하고, 응용 프로그램 로직을 코딩, 인터페이스 구축에 이르기까지 웹 사이트 상에서 풍부한 인터넷 응용 프로그램까지 전반적인 웹 솔루션 제작에 필요한 모든 기능을 제공한다. 매크로미디어 스튜디오MX는 장점은 다음과 같다.

- 각 제품간의 연동
스튜디오MX에 포함되어 있는 제품들(플래쉬MX , 드림위버MX ,파이어웍스MX ,프리핸드 10)은 각 제품에서 만들어진 결과물을 서로 공유하며 제어 할 수 있는 통합 기능을 제공한다.

- 공통 사용자 인터페이스
각 제품들이 일관된 표준 인터페이스를 적용하고 있다. 컬러 관리, 드로잉 툴, 코드 편집, 속성 설정 패널 등 사용자들이 자주 사용하는 기능을 모든 제품에서 공통적으로 사용할 수 있다.

- 윈도우 XP, 맥 OS X 등 다양한 운영체제 지원





1.2 플래쉬의 향후 발전 방향


플래쉬 MX 이외의 다른 매크로미디어 제품을 보면 플래쉬와 서버 소프트웨어와의 연동을 쉽게 하기 위한 여러가지 다른 제품군을 지원하고 있다. 이를 살펴보면 플래쉬가 앞으로 어떤 식으로 발전할 것인지 가늠해 볼 수 있으리라 생각된다. 이 관점에서 볼때 주시할만한 매크로미디어 MX 제품군으로는 콜드퓨전 MX(ColdFusion)와 플래쉬 리모팅 MX(Flash Remoting)를 들 수 있다.

콜드퓨전은 CFML(ColdFusion Markup Language)라는 태그기반 서버 스크립팅 언어를 사용해 웹 서비스를 만들어주는 툴(콜드퓨전 파일의 확장자는 .cfm이다. 만일 웹 서핑 중에 웹 페이지의 확장자가 .cfm인 사이트가 있다면 그 사이트는 콜드퓨전으로 만들어진 사이트이다)이자 웹서비스 환경이다. 문법 자체는 HTML/XML과 비슷한 형태를 띈다. 또한 JDBC와 LDAP을 지원하기 때문에 거의 모든 데이터베이스와 디렉토리 서버에 연결 가능하며 XML, HTTP, J2EE/자바, .NET/COM, CORBA 등 거의 모든 주요 인터넷 표준 컴포넌트 모델을 지원한다.

콜드퓨전에서 HTML 코드와 CFML 코드를 사용하는데 드림위버 MX를 사용할 수 있다. 그리고 클라이언트단에서 콜드퓨전 서버를 액세스하는데 플래쉬 리모팅 MX를 사용할 수 있다. 이를 이용하면 마치 콜드퓨전 서버가 로컬에 존재하는 것처럼 컴포넌트 레벨에서 액세스할 수 있다. 플래쉬 리모팅 MX를 이용하면 콜드퓨전 서버 뿐만 아니라 .NET 서버, 자바 서버, SOAP 서버 등을 모두 컴포넌트처럼 사용하여 액세스할 수 있다.

즉 플래쉬는 이제 단순한 클라이언트 뿐만 아니라 서버단까지 연동하는 종합적인 프로그래밍 및 멀티미디어 제작 환경으로 발전해가고 있다.




참고 2. 플래쉬 제네레이터

플래쉬 제네레이터에 대해 들어봤는지 모르겠다. 플래쉬 제네레이터는 서버 자체에 설치되어 동적으로 플래쉬 파일을 생성하는 서버 기반 소프트웨어이다. 즉 이를 이용하면 사용자의 입력 정보에 맞춰 플래쉬의 내용을 동적으로 재구성하여 발생시키는 일이 가능하다.

여기에는 제네레이터 개발자 버전과 제네레이터 엔터프라이즈 버전이 존재하는데 그 차이점은 확장성에 있다. 즉, 동시처리 가능 사용자수에만 차이가 난다는 것이다. 그리고 뒤에서 다시 언급하겠지만 플래쉬 파일 포맷이 공개되어 있기 때문에 오픈소스 형태로 이러한 기능을 제공하는 소프트웨어를 개발하는 사이트도 있고 아예 이러한 소프트웨어를 만들어 판매하는 곳도 있다. 그 중 대표적인 곳이 플래쉬플러스 (http://www.flashplus.co.kr/)이다.

그런데 플래쉬MX의 발표와 더불어 매크로미디어는 제네레이터 소프트웨어에 대한 지원 중단을 발표했고 이를 대체할 새로운 제품으로 발표된 것이 플래시 커뮤니케이션 서버 MX이다. 이 제품은 플래쉬 클라이언트와 서버간의 비디오, 오디오 등의 라이브 데이터 스트리밍을 지원한다.





2. 왜 플래쉬가 널리 사용되는가 ?


플래쉬의 장점에 대해 설명하기에 앞서 플래쉬로 어떤 것들이 가능한지 살펴보고자 한다. 매크로미디어 사이트를 가면 플래쉬의 가능성을 보여주기 위해 플래쉬를 이용해서 만들어진 괜찮은 사이트들을 보여주는 페이지가 있다. 참고문헌 3에 있는 페이지에 가서 어떤 것들이 가능한지 둘러보기 바란다. 또한 플래쉬로 구현된 사이트를 보여주면서 어떤 과정을 통해 사이트들이 구현되었는지 소개해주는 쇼케이스 (참고문헌 4 참조) 페이지도 있는데 거기도 둘러보기 바란다. 다음 그림은 플래쉬로 제작된 ESPN의 NBA 농구 실시간 중계 방송 프로그램의 모습이다. 작년까지만 해도 이 프로그램은 자바애플릿으로 만들어졌는데 올해들어 플래쉬로 교체되었다.



<그림 2. 플래쉬로 만들어진 ESPN NBA 중계 프로그램>

자 그럼 플래쉬가 왜 널리 사용되고 있으며 앞으로 더욱더 각광받을 것인지 그 이유를 알아보도록 하자.

덩치가 작다

플래쉬 파일(.swf)은 크기가 작기 때문에 인터넷을 통해 주고 받는데 오버헤드가 작다. 작은 이유는 첫 번째로 벡터 기반 그래픽을 지원하기 때문에 플래쉬 파일의 문서크기가 크더라도 비트맵 기반 그래픽에 비해 크기가 작기 때문이고 두 번째로 객체(심볼이라고 한다) 재사용이 가능하기 때문에 같은 객체를 반복재사용해도 크기가 증가하지 않는다.

어디서나 동작한다

사실 이것이 플래쉬의 가장 큰 장점이 아닌가 싶은데 플래쉬 파일을 실행해주는 플래쉬 플러그인이나 플래쉬 플레이어는 웬만한 컴퓨터에는 이미 설치되어 있다 (매크로미디어의 통계에 의하면 약 3억2천5백만대의 컴퓨터에 플래쉬 플레이어가 설치되어 있다고 한다). 즉, 사용자로 하여금 이것을 새로 설치하도록 해야하는 오버헤드가 거의 없다고 봐도 된다는 점이다.

또한 거의 모든 웹브라우저(인터넷 익스플로어, 넷스케이프 브라우저, 오페라 등등)에서 플래쉬를 지원한다. 운영체제의 경우에도 윈도우, 매킨토시, 리눅스를 지원한다. 플래쉬가 동작하는 운영체제와 브라우저에 대해 알고 싶다면 참고문헌 2를 보기 바란다. 이러한 PC 운영체제뿐만 아니라 앞서 플래쉬MX의 특징에서 언급한 것처럼 웬만한 PDA(Personal Digital Assistant)에서도 플래쉬를 지원한다.




참고 3. 현재 플래쉬가 동작하지 않는 웹브라우저

어디서나 동작한다고 했지만 사실 정확히 이야기하자면 거의 어디서나가 정답일 듯 하다. 플래쉬가 동작하지 않는 대표적인 웹브라우저로는 매킨토시상의 익스플로어와 넷스케이프 6.x 버전의 웹브라우저들을 들 수 있다. 세상에 완벽한 것은 없다. :)





사실상 거의 모든 운영체제에도 가능한데 플래쉬 파일 포맷 자체가 특정 운영체제와 관련없기 때문이다. 자바 애플릿과 비슷하게 가상머신과 바이트코드 체계로 구성되어 있다. 참고로 플래쉬 파일 포맷은 공개되어 있기 때문이다. 이에 대해 관심이 있다면 www.openswf.org 사이트를 방문해보기 바란다. .swf 파일로부터 바이트코드를 보고 싶다면 (액션스크립트 소스를 보여준다는 것이 아니다) http://flasm.sourceforge.net/에 가보기 바란다. 여기에서 제공해주는 툴을 이용하면 바이트코드를 볼 수 있을 뿐만 아니라 바이트코드를 수정할 수도 있다. 이는 주로 매뉴얼하게 플래쉬가 생성한 코드를 최적화하는데 사용된다.

대부분의 환경에서 동작한다는 것은 엄청난 잇점을 가져온다. 웹 환경에서 말하는 씬 클라이언트(Thin client) 개념에 딱 맞어들어가기 때문이다(사실 플레이어나 플러그인을 다운로드받아야 하므로 엄밀한 의미에서 씬클라이언트라고 할 수는 없지만 대부분의 시스템에 설치되어있기 때문에 별도로 실행 모듈을 다운로드받지 않아도 된다는 점에서 씬 클라이언트라고 해도 무방할 듯 하다).

웹의 근간이 되는 HTML 자체는 원래 일방적으로 데이터를 보여주기 위한 언어이다. 웹브라우저는 처음에 HTML파일을 읽어다가 보여주는 용도로 개발되었다. 근데 HTML 자체는 사용자와의 상호작용을 처리하는 기능이 없다. 그렇기 때문에 간단하게 클라이언트단에서 처리할 수 있는 것도 서버가 처리해서 다시 결과를 보여주어야 했다. 이러한 단점을 극복하기 위해 여러가지 시도가 이뤄졌는데 그 중의 초창기에 이루어진 것이 자바스크립트와 같은 클라이언트 스크립트를 HTML과 함께 이용하는 것이다. 근데 자바스크립트의 문제는 HTML 내에 그 소스가 바로 들어가고 웹브라우저에 따라 문법이 조금씩 다르기 때문에 관리가 쉽지 않으며 자바스크립트 자체의 기능이 그리 강력하지 않다는 것이다.

그래서 나타난 것이 다양한 종류의 플러그인들이다. 넷스케이프 브라우저의 플러그인은 넷스케이프에서만 동작하며 마이크로소프트의 액티브X 컨트롤은 윈도우 환경하의 인터넷 익스플로어에서만 동작한다 (필자 회사 사이트 사용자의 브라우저 타입을 통계적으로 분석해보니 약 92% 정도의 웹 사용자가 윈도우 환경하에서 다양한 종류의 인터넷 익스플로어를 사용하고 있었다). 자바 애플릿은 거의 모든 환경에서 동작하지만 플래쉬에 비해서 멀티미디어 지원이 떨어지며 가장 큰 제한점은 애플릿이 동작하기 위해서는 호환되는 버전의 자바 런타임 환경이 해당 시스템에 설치되어 있어야 하는데 이게 생각보다 훨씬 큰 제약이 된다. 사용자로 하여금 이걸 다운로드받게 해야하고 자바런타임의 경우에는 상대적으로 덩치가 크고 설치도 복잡한 편이라 시스템에 따라 설치에 어려움을 간혹 겪을 수 있다.

필자 회사의 웹 사이트 또한 이러한 여러가지 사항을 고려한 뒤에 플래쉬로 가기로 결정하였다.




참고 4. 액티브X 컨트롤용 넷스케이프 플러그인

다음 사이트에 가면 넷스케이프에서 액티브X 컨트롤을 호스팅할 수 있게 해주는 넷스케이프용 플러그인의 소스코드와 바이내리를 받아볼 수 있다.

http://www.iol.ie/~locka/mozilla/plugin.htm

어느 정도 안정적으로 동작하는지 필자도 확인해본 바가 없어서 확언은 못 하겠지만 만일 액티브X 컨트롤과 넷스케이프 플러그인을 다 지원하기 위해서 골머리를 앓는 사람이라면 한번 테스트해볼만한 모듈이 아닌가 싶다.





또한 플래쉬 파일은 꼭 웹브라우저위에서만 동작하는 것이 아니라 플래쉬 플레이어를 이용하면 하나의 독립 응용프로그램으로 동작한다.

멀티미디어 + 프로그래밍

일반적으로 프로그래밍 언어로는 멀티미디어 관련 작업을 하기가 쉽지 않다. 반면에 디자인 관련 툴에서 외부 소스에서 어떤 데이터를 가져온다던가 하는 식의 디자인 툴 바깥의 작업을 하기란 불가능하다. 플래쉬는 액션스크립트의 도입으로 인해서 이 둘의 중앙에 위치하는 툴이라고 할 수 있을 듯 하다. 즉 두 세계의 장점을 합쳐서 시너지 효과를 불러일으킬 수 있는 환상적인(?) 툴이라는 것이다.

물론 플래쉬를 디자인 툴로 접근한 사람은 프로그래밍을 모르는 경우가 대부분이고 플래쉬를 프로그래밍 언어로 접근하는 사람은 디자인관련하여 플래쉬 사용에 어려움을 느끼는 경우가 대다수이다. 즉 둘다 잘 할 줄 아는 사람은 드물기 때문에 이 툴을 100% 활용할 수 있는 사람이 많지 않은 듯 싶다. 반대로 이야기해서 둘다를 잘 할 수 있다면 자기자신의 값어치를 높일 수 있다는 의미도 될 듯 싶다. 앞서 이야기했던 것처럼 이 기사의 초점은 프로그래머입장에서 플래쉬를 접근하는 것에 맞춰져 있다.


3. 플래쉬 관련 링크 및 플래쉬 평가 버전 정보


다음은 플래쉬 및 액션스크립트 관련하여 유용한 사이트들의 링크이다. 뭔가 질문하고 싶은 궁금점이 있는 경우 필자의 경우에는 Were-here 사이트를 가장 애용하는데 한글 사이트로는 flashmx-coders가 제일 괜찮은 듯 하다. 플래쉬의 사용법부터 시작해서 기초부터 배워보고 싶은 사람들에게는 야웅닷컴 사이트를 추천한다.


  • Were-Here: http://www.were-here.com
  • 매크로미디어 디자이너/개발자 센터: http://www.macromedia.com/kr/desdev/
  • FlashMx-Coders : www.flashmx-coders.com
  • 야웅닷컴 : http://yawoong.com/
  • Flashguru: http://www.flashguru.co.uk/
  • Flashkit: http://www.flashkit.com
  • 플래쉬 파일 포맷: http://www.openswf.org/
  • 플래쉬 바이트코드 에디터: http://flasm.sourceforge.net/
  • Chattyfig : http://chattyfig.figleaf.com/

    플래쉬 소프트웨어가 이미 있는 사람이 아니라면 플래쉬 소프트웨어를 사던지 평가버전을 다운로드받아야 한다. 평가버전은http://www.macromedia.com/software/trial_download/에서 다운로드받을 수 있으며 한국어 버전도 존재한다. 현재 플래쉬 개발환경은 윈도우와 매킨토시(필자가 플래쉬 관련 뉴스그룹에서 들은 바로는 매킨토시에서는 플래쉬가 굉장히 불안하게 동작한다고 한다)에서만 동작하며 추천 시스템 사양은 다음과 같다.

    윈도우


  • 윈도우XP/2000/NT4/Me/98
  • 200MHz 이상의 인텔 펜티엄 프로세서
  • 128MB추천 메모리/64MB 최소 메모리
  • 85MB 하드디스크 용량
  • 1024X768 해상도 16비트 칼라 디스플레이
  • CD-ROM 드라이브

    매킨토시


  • Mac OS 9.1 이상 혹은 OS X 10.1 이상
  • 128MB추천 메모리/64MB 최소 메모리
  • 85MB 하드디스크 용량
  • 1024X768 해상도 16비트 칼라 디스플레이
  • CD-ROM 드라이브


    4. 액션스크립트 소개


    먼저 액션스크립트의 역사에 대해 간략히 소개하고자 한다. 플래쉬에서 스크립트 언어라고 할 수 있는 수준의 것이 지원되기 시작한 것은 플래쉬 4.0부터이다. 하지만 그 전 버전에서도 초보적인 수준으로 스크립트를 지원하긴 하였다.


    4.1 액션스크립트의 역사


    플래쉬 2.0에서는 프레임 이동을 제어하는데 간단한 스크립트를 쓸 수 있었고 플래쉬 3.0에서는 tellTarget, 무비클립 로딩 등의 기능과 관련하여 스크립트를 사용할 수 있었다. 변수와 프로퍼티 사용이 지원되기 시작한 것은 바로 플래쉬 4.0서부터 이며 이 때부터 초보적인 형태의 스크립트 언어로서의 모양을 갖추기 시작했다.

    플래쉬 5.0에서는 함수, 객체, 이벤트 처리, XML 소켓 등의 기능이 제공되면서 제대로된 객체지향적인 스크립트 언어로 자리를 잡았고 이 버전서부터 디자이너 뿐만이 아닌 프로그래머들의 관심을 끌기 시작했다. 또한 이 때부터 액션스크립트 패널이 별도로 지원되기 시작되었다.

    플래쉬 MX에서는 드로잉 함수, 공유 객체 (로컬 시스템의 파일 시스템을 접근할 수 있다), 로컬 연결 등의 기능이 지원되었고 5.0과 비교해 전체적으로 스크립트 언어의 성능이 향상되었다 (특히 문자열 관련 연산의 속도가 향상되었다고 한다).


    4.2 액션스크립트의 특징


    앞서 잠깐 언급한 것처럼 액션스크립트는 ECMA에 의해 제안된 ECMA-262 (http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)라는 표준안을 바탕으로 구현되었으며 이 계통의 다른 언어로는 자바 스크립트를 들 수 있다. 그래서 문법적으로보면 둘은 거의 동일하다. 정통 프로그래머들(자바스크립트를 복잡하게 많이 써본 사람이라면 아마도 액션스크립트가 아주 친숙하게 느껴질 것이다)의 입장에서 액션스크립트의 클래스 계층 구조를 보면 약간 어설픈 감이 없지 않지만 플래쉬의 강력한 멀티미디어 기능과 합쳐져 사용하기에는 충분하다.

    액션스크립트에 대한 보다 더 자세한 이야기는 먼저 플래쉬 무비가 어떤 구조로 구성되는지 보도록 하도록 하겠다. 이 것을 먼저 이해해야 나중에 플래쉬 관련 프로그래밍을 하는데 여러모로 도움이 많이 될 것이다.


    5. 플래쉬 개념 잡기


    플래쉬를 처음 대하는 사람들이 제일 어려움을 겪는 부분은 바로 플래쉬가 어떤 식으로 동작하는지 개념을 잡는 것이다 (적어도 필자의 경우에는 이 부분에서 어려움을 겪었다). 무비클립(MoveiClip), 씬(Scene), 프레임(Frame), 레이어(Layer)등의 용어가 나오는데 이것들이 어떤 관계를 갖는지 이해하는 것이 쉬운 일이 아니었다. 자 다음은 이러한 용어와 이들간의 관계에 대해 쉽게 정리해본 글이다. 플래쉬 자체가 애니메이션에서 출발했기 때문에 영화와 비슷한 점이 많고 그래서 용어 자체도 영화에서 온 것들이 많다. 그래서약간의 무리가 따르지만 영화에 비유해서 개념을 설명해 보았으며 액션스크립트의 역할에 대해서도 간략히 언급하였다. 여기서 설명한 내용을 다음 회에서 실제로 구현해볼 것이다.


    5.1 이야기로 이해하는 플래쉬 개념



    <그림 3. 만들고자 하는 플래쉬 영화>

    당신은 플래쉬 영화의 감독 지망생입니다. 다른 영화와는 좀 틀린점이라면 관객들과 같이 호흡할 수 있는 영화라는 거라고 하겠죠. 영화의 제목은 좀 유치하지만 ‘내 목의 밧줄’ 정도로 하기로 하겠습니다. 당신이 이제부터 감독을 하여야 하는 영화는 관객이 영화(플래쉬 무비)가 출제하는 문제를 맞추고 정해진 횟수를 틀리면 주인공이 밧줄을 목에 감고 저 세상을 하직하러 계단을 올라가는게 이 영화의 시나리오입니다. 다음 회에 이걸 같이 만들어보도록 하겠습니다.

    이 시나리오가 마음에 안 든다구요 ? 주인공을 자신이 다니는 회사의 악질 상사로 하고 문제를 맞추면 세상 하직하러 교수대에 올라가게 수정을 가해도 무방합니다. 그러니까 제가 준비한 시나리오가 마음에 안든다고 생각하신다면 영화제작 설명회(이 글의 연재)가 끝난 후 스스로 각색을 해보시길…. 영화필름(하드디스크) 만큼은 넉넉히 할거라 믿습니다.

    영화를 만드려면 일단 배우(무비클립이라고 합니다)를 섭외해야 합니다. 우리는 위에 보이는 머리가 큰 배우를 섭외하는데 성공했습니다. 그의 얼굴이 마음에 안드시나요? 하지만 그는 감독의 말이라면 밧줄에 목을 감는 연기를 몇번이고 되풀이해서 소화해낼 만큼 연기에 열정적이니 안심해도 좋습니다. 소품이라고는 달랑 교수형시킬 사형대와 밧줄 뿐이지만 그의 굵은 목을 감아줄 만큼 밧줄도 넉넉히 준비했구요. 만일 작품성을 위해 더 필요하다고 생각한다면 각자 만들어서 끼워 넣으세요. 탄성지를 구경꾼. 각종 효과음 등등. 정리하자면 여기서 머리큰 배우, 사형대, 밧줄은 모두 이 영화에 등장인물에 해당하며 무비클립이 될 수 있습니다.

    영화는 여러 장면(씬, scene)으로 나누어 찍을 수도 있고 각 장면을 넘나 들면서 슈퍼 울트라 스펙타클하게 만들 수도 있습니다. 하지만 시작은 위의 시나리오대로 저예산 단편 영화부터 해보기로 하겠습니다. 하지만 몇 프레임 안되는 필름가지고 충분히 관객을 흥분시킬 수 있을 것입니다. 그 흥분이란게 “우이 썅~” 이런게 될지라도…

    무대(_root라고 지칭됩니다)에 자주 등장하는 인물이라면 연기자 그룹(심볼이라고 합니다)에 등록해 두면 돈을 조금 들이고 연기자를 고용할 수 있습니다. 연기자(무비클립 혹은 심볼)를 카메라 앞에 서게 하려면 그들에게 이름(인스턴스명)을 부여해 주어야 비로소 감독의 말에 따르는 연기자로 변신하게 됩니다. 또 플래쉬에는 특수한 역(컴포넌트)을 하는 친구들이 있는데 이들도 영화에 곧잘 출연하곤하죠. 여러 영화에 출연하는 녀석들이라 다른 영화에서도 자주 보게 되는 아주 낯익은 얼굴들입니다. 공짜로도 영화에 출연하기를 마다하지 않는 친구들이라 잘 이용하기만 하면 영화의 질을 높여 줄 뿐아니라. 제작기간도 단축시켜주죠.




    참고 6. 플래쉬 컴포넌트

    윈도우 프로그래밍을 많이 해본 이라면 텍스트 박스니 리스트박스니 콤보박스니 하는 컨트롤에 대해 잘 알고 있을 것이다. 플래쉬에서도 그러한 놈들이 제공되는데 그게 바로 플래쉬 컴포넌트의 형태로 제공된다. 그림 4는 플래쉬에 기본으로 제공되는 UI 컴포넌트들이다. 매크로미디어 사이트에 가면 달력, 트리, 프로그레스바, 아이콘 버튼 등이 UI 컴포넌트 2라는 이름이 제공된다.


    <그림 4. 플래쉬 기본 컴포넌트>




    그럼 무대에 소품과 등장인물을 배치해봅시다.















    등장인물 이름
    무대 _root
    사형대 _root.gallow (참고로 사형대 내에 밧줄이 존재합니다)
    연기자 _root.actor

    사실 사형대가 하는 역은 별로 많지는 않습니다. 사형대 뒤 숨어 특수효과팀이 그저 밧줄을 약간 흔들어주는 정도니까요. 그리고 연기자 역시 자신의 역에 불만을 가지고 있을지 모르지만 뭐 어쩔 수 없죠. 일일히 사정 다 봐주다가는 아무것도 시작 못하니.

    연기자는 시나리오대로 움직일 것입니다. 시나리오에 첫 번째 문제를 틀렸을 때 계단을 한 칸 올라가 눈물을 흘리고 똥씹은 표정을 짓고 2번째 문제를 틀렸을 때는 2번째 계단에 올라가 신고 있던 양말을 벗어 입에 넣어라 등의 어렵고 대담하고 고난위도 액션연기를 보여라라고 적는다면 연기자는 그대로 할 것입니다.

    일단 당신이 “액숑!!!” 하고 큐사인을 보내면 연기자들은 시간의 흐름(프레임 속도)에 따라 연기를 하기 시작합니다. 시나리오가 잘못되었을 경우 자주 NG(버그)가 나기도 합니다. 영화의 프레임속도도 조절 가능하고 속도감이 있는 영화라면 초당 프레임수를 30~40까지도 놓고 작업을 할 수 있지만 극장여건(컴퓨터)에 따라 프레임수를 적절히 조절해 가면서 작업을 해야 합니다. 하지만 우리영화는 다른 설정을 건드릴 필요는 없으니 안심해도 좋습니다. 참고로 플래쉬로 만든 영화에서는 액션스크립트(예를 들자면 gotoAndPlay 등등)를 이용해서 아주 쉽게 상영되는 영화 위치를 조절할 수 있습니다.

    무대의 조명을 다꺼버라 하는 명령어를 시작으로 액션스크립트를 시작해 보겠습니다. 앞서 적은 것처럼 액션스크립트에서 무대는 _root로 지칭됩니다. _visible이라는 프로퍼티는 해당 객체가 눈에 보이는지 여부를 결정짓습니다.

    무대 조명 끄기 -> _root._visible = false;

    뭐 이정도면 시작이 반이라고 반쯤 플래쉬의 액션스크립에 발을 들여 놨다고 볼 수 있겠습니다. J 구체적인 사항은 다음에 실제로 영화를 만들면서 설명드리겠습니다.




    참고 7. 무비클립에 대한 부연설명

    위 글은 좀 이해하기 쉬우라고 쓴 글이기는 하지만 무비클립을 그저 연기자라고 비유한 점이 좀 마음에 걸려 부연 설명을 하겠다. 무비클립도 하나의 독립된 영화일 수도 있다. 예를 들어 엘리스가 물끄러미 거울(거울무비클립)을 들여다본다. 메인타임라인(_root)에서 보기에는 하나의 영화 소품에 지나지 않지만 거울이 확대되면서 거울 안에 이상한 나라가 펼쳐진다. 말하자면 무비클립은 영화의 소품일 수도 있고 무비클립이란 말그대로 각각 독립적인 영화 일수 있다. “내 목의 밧줄”에서 사형대 무비클립은 밧줄이 내부에 들어가 있는 하나의 작은 영화라고 볼 수 있다. 관객의 클릭을 기다리는… 플래쉬는 당신에게 속˜ダ灌


    List of Articles
    번호 제목 글쓴이 날짜 조회 수
    1564 Customer Service What new ZitaAliyolhjwmqjr 2014.04.19 1
    1563 Leur Pas Sextoy Le Sais Port Est new LisetteScherfljmtgx 2014.04.19 0
    1562 Ideas To Help You Acquire Better Images! new RubenBilodeauges 2014.04.19 1
    1561 Acai Berries And Their Positive Aspects For Excess Weight Decline new PreciousChavisjj 2014.04.19 1
    1560 Hack Temple Run 2 new RolandCromergtelxldi 2014.04.19 2
    1559 Plan Sexe Tourcoing Progresse Difficilement Sur Et Le Renvoyer. new JamiMaconochieffjf 2014.04.19 1
    1558 Sexe Ce De Fallait Qu?il Attend new SofiaLadexbrwyyrw 2014.04.19 2
    1557 Convenient Cheap Service America Home Warranty Plans Products - Updated new VickieMarconiwy 2014.04.19 2
    1556 Search Engine Marketing: Consider Your Site To The Top Level new KeiraWHEGrablbccv 2014.04.19 5
    1555 Wood Fired Pizza Ovens And Wood Fired Pizza Stoves Of The Very Best Excellent new MitchNolteizafyg 2014.04.19 2
    1554 ITunes Gift Card GeneratorliTunes Gift Card CodeslFree ITunes Codes new BraydenHolemanphk 2014.04.19 2
    1553 Budgeting For Remodeling At Your Residence new ShantaeHuxleyou 2014.04.19 7
    1552 Further Guidelines For Common-Sense Clash Of Clans Hack Programs new JudithDclkupcjtdozkf 2014.04.19 4
    1551 부러진화살 다운받기 new lk 2014.04.19 1
    1550 영화다운 받는 사이트 new lk 2014.04.19 1
    1549 최신 영화 자막 다운 new lk 2014.04.19 1
    1548 무서운이야기 DVD다운보기 HD방송보기 new lk 2014.04.19 1
    1547 개구쟁이스머프2 DVD new lk 2014.04.19 1
    1546 Mr. 리치 다운 new lk 2014.04.19 1
    1545 제트레인저 다시보기 new lk 2014.04.19 1
    Board Pagination ‹ Prev 1 2 3 4 5 6 7 8 9 10 ... 79 Next ›
    / 79

    나눔글꼴 설치 안내


    이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

    이 사이트를 나눔글꼴로 보기 위해서는
    나눔글꼴을 설치해야 합니다.

    설치 취소

    Designed by sketchbooks.co.kr / sketchbook5 board skin

    Sketchbook5, 스케치북5

    Sketchbook5, 스케치북5

    Sketchbook5, 스케치북5

    Sketchbook5, 스케치북5

    BUNTGAMES.COM © 2013