Diary2010.09.15 09:32


 지난주 토요일(11일) 역삼 GS에서 제 7회 플래시 커뮤니티 컨퍼런스가 있었습니다. 매년 1 ~ 2회 정도 컨퍼런스를 진행했었는데, 이번에는 스텝이 아닌 스피커로의 참여 하였습니다. 꾀나 전통있는(?) 컨퍼런스기에 3일만에 신청자가 마감 되어 주시니, 아직까지 플래시에 대한 열정이 여전하구나 하는 생각이 들었습니다. 


 늦장을 부리는 바람에 첫 세션이 시작 된 후에 도착을 하였는데, 주말 컨퍼런스상 불참자가 많은 환경에도 불구하고 자리를 가득 채워 주신 분들 덕분에 더 이야기 할 맛 나는 자리였습니다. 



(출처 : 떙굴이 트위터 http://twitter.com/seonggyu )


 대화 하는 코드라는 주제로  1시간 동안 이야기 하였는데 내용이 잘 전달 되었는지 궁금하네요. 이렇게 많은 사람들 앞에서 발표하는건 처음이라 긴장도 하고 기대도 했던 시간이었습니다. 



 언제나 컨퍼런스 준비에 고생이 많은 스텝분들, 멋진 발표를 해 주신 스피커분들, 그리고 자리를 빛내주신 여러 분들 반가웠습니다. 뒷풀이가 없어서 살짝 아쉬웠지만, 또 기회가 있겠지요.ㅎㅎ


감사합니다.






'Diary' 카테고리의 다른 글

Instagram Photo  (0) 2012.03.07
플래시 커뮤니티 컨퍼런스 그리고 플래시..  (5) 2010.09.15
요즘 들어 하는 이런 저런 생각.  (7) 2010.06.06
잘 살고 있습니다.  (14) 2009.12.20
Posted by Flash 동강
Portfolio2010.05.19 23:42

 정말 오랜만에 블로그에 글을 쓰는것 같네요.


 한 동안 애착을 가지고 작업했던 "다음 뮤직 플레이어"가 오픈 했습니다. 기존에 ActiveX 플레이어 기반을 새롭게 플래시 기반으로 바뀌었답니다. 







오픈한지 몇일 안되서 묘~ 한 기분이 들지만, 애착이 가는 녀석이니 만큼 앞으로도 쭉 사랑해 줄 예정 입니다.


플레이어를 만드느라 고생하신 모든 분들 너무너무 수고 하셨습니다.!!


플레이어 도움말 바로가기

다음 뮤직 바로 가기


'Portfolio' 카테고리의 다른 글

새 옷을 입은 "Daum 뮤직 플레이어" !  (0) 2010.05.19
fish  (0) 2008.12.11
i tree  (0) 2008.12.11
Yahweh mini bible  (0) 2008.12.11
Posted by Flash 동강
Flash Programming 란?2010.02.15 11:52

  지금 까지 Flash프로그래밍에서의 타임 라인의 역할과 함께 Timline이 움직이는 흐름에 대해 이야기 해 보았습니다. 이제 타임라인이 어떻게 동작하는지에 대한 기초적인 개념을 파악 하셨을 것입니다. 지금 까지 다룬 내용은 Timeline의 프레임 순서에 따른 실행 순서 였습니다. 프레임 1에 있는 코드는 프레임 2에 있는 코드 보다 먼저 실행이 되고, 여러 메소드를 이용하여 재생헤드의 위치를 조작하므로 실행 순서를 조작 할 수 있었습니다. 그렇다면 같은 레이어에 존재 하지 않는 다른 레이어에 존재하는 코드의 경우에는 어떤 순서로 실행되게 될까요? 가장 상위에 있는 레이어에 있는 코드부터 실행되게 됩니다. 아무것도 아닌 것 같이 보여도 이 개념에 대해 알지 못하고 툴 작업을 하는 분들이 많이 있습니다. 예를 들어 circle_mc라는 객체를 만들고, circle_mc가 존재 하는 레이어 바로 위에 새로운 레이어를 만든 후에 trace(circle_mc)라는 코드를 입력하여 실행해 보면 다음 과 같은 결과가 나옵니다.



실행 결과

[object MovieClip]


 예상했던 대로 trace문은 circle_mc를 인식하고 결과를 나타내 줍니다. 그럼 action 레이어와 circle_mc 레이어의 위아래를 바꾸면 어떻게 될까요? 레이어를 클릭한 후 드레그해서 action 레이어를 circle_mc레이어 아래로 이동시킨 후 다시 실행 시킨 결과는 다음과 같습니다.



 

실행 결과

[object MovieClip]


 레이어 위치에 상관없이 똑같은 결과가 나옵니다. 이는 Timeline 에 만들어진 circle_mc의 참조를 어느 레이어에서나 상위, 하위에 상관없이 접근이 가능하다는 의미입니다. 하지만 코드로 생성되어 지는 객체에 대해서는 다른 결과를 나타냅니다. 예를 들어 2개의 레이어를 가지고 있는 Timeline이 있습니다. 위에 있는 create 레이어에는 trace(circle_mc); 라고 코드를 입력하고 아래 있는 trace 레이어에는 var circle_mc:MovieClip = new MovieClip(); 라고 코드를 입력 한 후 Ctrl+Enter를 눌러 실행 시킵니다.


실행 결과

[object MovieClip]


레이어의 코드 실행 순서는 상위에 있는 레이어부터 시작하기 때문에 [object MovieClip] 이라는 결과를 나타냅니다. 하지만 위아래 레이어의 위치를 바꾼 후에 실행하면 어떤 결과가 나타날까요?


실행 결과

null


 null 객체가 존재 하지 않는 다는 의미를 가지고 있는 null을 나타냅니다. 이렇게 코드의 작성 위치에 따라 코드가 길어질 경우 복잡한 에러를 발생시키는 요인이 되기도 합니다. 이러한 코드의 실행 관계는 프레임에 작성하는 코딩뿐만 아니라, 클래스 코딩에서 중요한 부분입니다. 여러 분들은 앞으로 이 에러를 자주 보게 될 것입니다.


 실행결과

TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.

at 1_fla::MainTimeline/frame1()


 해당 에러를 줄이기 위해서는 코드가 실행되는 전후 관계를 확실하게 파악해야 한다는 점을 다시 한 번 강조 합니다. 정리하면, 프레임1부터 프레임 20까지 모든 프레임에 AS 코드가 작성 되어 있을 경우 재생 헤드의 움직임에 따라 모든 코드가 실행될 것입니다. 어떤 분들은 꼭 stop() 메소드로 재생 헤드를 정지 시켜야만 해당 프레임에 있는 코드가 실행되는 것이라고 잘못 이해하고 있습니다. 재생 헤드가 위치한 순간 코드는 실행되는 것입니다. 이 말은 재생 헤드가 지나가지 않은 프레임에 있는 코드는 실행되지 않는다는 의미입니다. 따라서 실행되고 있는 프레임보다 뒷 프레임에 정의된 코드에 포함된 변수를 아무리 참조해 봤자 null 값이 나오는 것은 당연한 것입니다.


 Flash 에서의 레이어


  레이어는 투명한 도와지 입니다. 애니메이션 작업을 할 때, 등장인물과 배경을 따로 그린 후에 합치는 작업을 하는 것처럼, Flash 에서도 레이어 개념을 가지고 각각의 레이어에 만들어 지는 객체들은 도와지에 그려지게 되는 것입니다. 하지만 이 도와지 들은 하나의 객체(MainTimeline 이나 MovieClip)에 속해 있고 위, 아래 개념을 가지고 있습니다. 그림과 같이 A 도와지에 파란 원을 그리고 B도와지에 빨간 원을 그린다면, A 에서의 파란 원의 좌표와, B 에서의 빨간 원의 영역이 겹치지 않는 한, 두 원 모두 보이는 객체로 처리가 됩니다. 하지만 A에 있는 파란 원이 B의 빨간 원과 영역이 겹친다면 파란원은 빨간 원에 가려서 안 보이게 됩니다. 만약 빨간 원과 파란원의 영역이 완전히 겹쳐서 파란원이 안 보인다고 해서 파란원이 사라진 것은 아닙니다. 단지 B 레이어가 A 레이어 보다 아래 존재하기 때문에 가려진 것입니다. 이 개념은 뒤에서 다룰 Index 개념과 비슷한 특징을 가지고 있습니다. Index 역시 위, 아래 개념을 가지고 있지만 레이어와는 다른 것입니다. 레이어는 Flash 툴 상에서 Timeline을 가지고 있는 객체 즉 MainTimeline 이나 MovieClip 등이 가지고 있는 그래픽 작업을 도와주기 위한 방법으로서 제공 되는 기능입니다. 이 개념은 에 다룰 Index 개념과 혼동 될 수 있으니 확실하게 알고 넘어가시기 바랍니다.


Depth 와 Index 에 대해 자세히 알고 싶다면 이 포스팅을 읽어 보세요.





Posted by Flash 동강
i'T news2010.01.31 10:58
 
원문 : Can Flash be saved? : http://scobleizer.com/2010/01/30/can-flash-be-saved/

번역 : 플래시(Flash) 가 살아날수 있을까? : http://www.cyworld.com/chobs01kr/3252650

AppleiPad 를 발표를 하고 나서 무수히 많은 iPad 관련 포스팅과 이번에도 역시 탑재가 안된 Flash 에 대한
포스팅이 올라오고 있는데요. 그닥 이해 하진 못하겠지만 나름 현실적으로 써놨다 생각 되길래 올려 봅니다.

내용을 간단히 요약해 보면 HTML 5 가 나오고 Google 등과 같은 메이져 회사에서 이를 전폭적으로 지지하고 있고, 유투브도 HTML 5를 이용한 동영상 플레이어를 제공해 주고 있지요. Flash 도 어쩔수 없는 플러그 인이기 때문에 Flash Player 가 안깔려 있는 예를 들면 iPhone iPad 같은 곳에서는 안보이기 때문에 Rich 한 사용자 환경을 제공해 줄수 없습니다. 결국 Flash 컨텐츠는 새로운 웹 시장에서 점점 사라질 것 같다는 내용 입니다. 

다른 관점에서 iPad 에 대한 포스팅도 있어서 소개해 봅니다.

The iPad Provides the ultimate browsing experience? : http://theflashblog.com/?p=1703


 iPad 가 나오면 정말 다른 인터넷 환경이 생겨 날것 같습니다. 실제로 나와봐야 알겠지만, 웹에 미치는 영향력 또한 강할 것 입니다. 하지만 iPhone 에서 인터넷 하는 것과 iPad 에서 인터넷을 하는건 분명 다를것 같네요. 모든 웹 사이트들이 iPad 에 대응하여 Flash 를 없앤 웹을 만들게 될까요? 발 빠르게 대응하는 곳들은 이미 준비를 하고 있겠지만, 대처가 끝나기 전에 Flash 가 없는 웹의 불편함이 수면위로 올라 올것 같네요. 
 

 

(이미지 출처 : http://theflashblog.com/?p=1703 )
 
 
애플이 언제까지 이런 폐쇄적인 정책을 유지 할 수 있을지, 돈을 너무 좋아 하는건 아닌지 걱정이 되네요.
여러 견해를 보고 생각이 바뀌어서 수정 합니다. 


 

덧 1. 여러 블로그와 웹사이트에서 관련 토론들이 올라 오고 있네요.



스티브 잡스 "구글 모토는 헛소리 ... 어도비는 게을러



KMUG 에 올라온 "아이패드와 플래시"



Google’s ‘Don’t Be Evil’ Mantra is ‘Bullshit,’ Adobe Is Lazy: Apple’s Steve Jobs 

Read More 


덧 2. 제가 플래시 액션스크립트 카페 에 올린 글에서 장창학 님이 올려 주신 내용 입니다.

애플이 저렇게 Flash를 필요로 하지 않고 있고.. Google역시 자사의 인터넷 서비스로 먹고사는 입장이라 특정회사의 플러그인에 종속적이지 않은 웹을 지향하고 있으며, 아무리 안드로이드, 윈도모바일이 Flash를 지원해 준다고해도 반쪽시장으로 전락해 버린다면 굳이 Flash로 할 이유도 없어질지도 모릅니다. 

개인적으로 Adobe에게 바라는 것은(그들의 기술을 사랑하니까) 너무 Flash만 바라보지 않았으면 좋겠씁니다. 대부분의 IT업체들이 하나의 기술에 매진하는 것 보다는 여러 기술(MS의 경우 검색, 운영체제 등 분야가 다양합니다.)병행하는데 유독 Adobe는 Flash에 거의 광적으로 역량을 집중하고 있습니다.

시장에는 대안기술인 Silverlight나 Java, Javascript등이 널려있는데도 Flash만 가능하다고 다소 과장으로 우기는 것은 그렇다 치더라도 절대적 점유률하나만 믿고 회사의 사활을 Flash에 건다는 것은 Flash가 시장에서 인기가 없어지면 Flash만 없어지지 않고 Adobe도 사라질지 모르죠
물론 그렇게 되지는 않겠지만 Adobe에서 HTML5도 Flash못지 않는 시장임을 제발 윗대가리들은 알았으면 좋겠습니다. 우선 Dreamweaver가 HTML5를 완벽히 지원하고, 다양한 HTML5라이브러리를 제공하거나, ColdFusion에서 Javascript, HTML5를 서버측에서 지원하거나, FMS에서 클라이언트플레이어를 Flash외에도 HTML5로 제작할 수 있게 한다거나, 아예 Flex를 Flash외에 MXML을 컴파일하면 완벽한 html및 AJAX로 아웃풋할 수 있다면 많은 Adobe 개발자가 Flash를 다소 덜 개발할지라도 그들이 쓰는 툴을 그대로 이용하면서 새로운 웹환경으로 이전할 수 있을텐데..

일부 Adobe나 Flash빠들은 오로지 Flash만 주창하며, Adobe역시 Flash없는 웹은 생각치도 않는다고하는데 문제는 브라우저를 만드는 대부분의 업체, 구글, 애플, MS, FireFox가 HTML5를 W3C보다 먼저 도입하려고 하고 있고, Flash가 이들중 일부만 깔린다거나 모바일기기에서의 이들 브라우저서 반쪽으로 전락한다면 대부분의 웹개발사 입자에서 굳이 Flash를 쓸일이 없어질 수 있습니다. 물론 여전히 Flash를 써야한다고 생각하는 개발자도 있겠지만 말입니다

저의 경우 사실 간단한것도 수백줄의 코드와 특정툴에 종속적이며, 더욱이 거의 클라이언트측에서 구동되는 것을 개발해야하는 Flash에 대해 그닥 매력을 점점 잃어가는 입장이지만 Flash만이 해야하는 부분도 분명 있다고 믿고 있기에 Flash가 밀리는 꼴은 보기 싫지만 굳이 저의 정체성을 말씀드리자면 같은 정당내의 급진 개혁세력이랄까.. Flash의 내부 Core를 뜯어 고쳐서라도 HTML5로 렌더링을 시켜서라도 개발자는 AS를 그대로 쓰고 아웃풋은 어떠한 환경에서도 구동되게 해야 한다고 생각하는 입장입니다.

어떤 분들은 모두 현실성이 떨어진다고 하는 분들도 있지만 웹의 지난 10년을 뒤돌아 보면 2002년 월드컵의 웹환경과 지금의 환경의 변화에서 Flash가 영원할 수 있을지 생각해 봐야할 것 같습니다. 당시에는 아아폰과 같은 물건은 수십년일의 일일지도 모른다고 생각했으니까요.




( 원문 : http://cafe.naver.com/flashactionscript/48591 )


이러한 상황에서 애플, Adobe, 구글이 어떻게 대처 할지, Adobe 는 어떻게 방어 할지 흥미 진진 합니다.

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.02008.12.11 15:58

 
차례

0. 시작

1. 플래시 와 플렉스

2. MXML 과 Actionscript3.0

3. 플래시의 DisplayObject , 플렉스의 DisplayObject

4. 플래시에서 컴포넌트 제작하기

5. 마무리

 2004년 매크로 미디어는 플렉스를 릴리즈 하고 개발자들이 좀더 편하게 플래시 플랫폼을 위한 어플리케이션을 만들수 있게 하였습니다. 플렉스는 어플리케이션의 개선된 디자인과 사용성, 이동성등의 장점을 이용하여 사용자들에게 새로운 경험을 제공하였고 Web2.0 의 개념에 발판이 되기도 하였습니다. 이러한 Flex 가 소개되고 Flex 3 SDK 가 릴리즈 되었습니다. 수많은 플렉스 개발자들 뿐만 아니라, 기존의 플래시 개발자들 역시 기대를 갖고 플랙스를 배우고 새로운 프로젝트에 적용해 보기 위해 시행 착오와 경험을 축적해 나가고 있습니다. 

 본 문서는 Adobe Flex 공식사이트에 있는 양주일님의 "플래시 개발자를 위한 플렉스 사용법" 의 리뷰 형식으로 쓰여집니다.  

플렉스와 플래시

 기존의 플래시 프로젝트는 굉장히 유연한 작업 환경을 제공해 주고 있습니다. 하지만 이러한 유연함이 문제를 일으키는 경우가 많이 있었습니다. 다른 언어 기반 프로그램들과 다르게 타입 라인이 존재 한다는 것과 그 타임라인에 코딩해야 된다는것, 많은 사람들이 타임 라인에 코딩을 해 왔고 프로젝트가 커지면 커질수록 이러한 코딩 방법은 문제가 되어 왔습니다. 왜냐하면 코드를 찾기가 힘들기 때문입니다. 급기야 Flash CS3 에서는 Symbol 에 코드를 삽입할수 있는 기능을 없애긴 했지만, 타입라인에 코드를 입력하는 것은 플래시 어플리케이션을 만들시 유지보수를 힘들게 하는 요인이 되고 있습니다.   

AS3.0 이 나오고 Flash가 더이상 화려한 애니메이션과 배너를 위한 툴의 능력을 벗어나게 되었습니다. Actionscript 의 발전은 많은 개발자들이 Actionscript 어플리케이션을 만들기 위해 뛰어 드는 개기를 마련해 주었고, 개발 방법 역시 Java 나 기타의 OOP방법론으로 만들어지는 프로젝트들과 거의 일치하는 모습을 보이고 있습니다. Class 기반의 스크립트 작성은 좀더 프로젝트를 짜임새 있게 만들어 주며, 유지 보수를 도와주고 있습니다. 하지만 Flash Actionscript 로 만들어진 프로젝트가 커지면 커질수록 더 관리하기가 힘들어 지고, Library 기반의 Class 객체 관리와 SWF 내에서의 데이터 처리 방법은 어려워 집니다. 물론 이를 위한 AS 프레임웍 들이 존재 하고 있지만 (PureMVC 와 같은) , Flash 보다 좀더 강력한 Data 처리 기능과 통신기능을 가진 Flex 에 눈길이 가게 됩니다.   

Flash 와 Flex 는 본질 적으로 SWF 라는 결과물을 만들어 냅니다. 결과 물이 같다는 말은 같은 방법으로 쓰일수도 있다는 말이지만 이 말은 반은 맞고 반은 틀립니다. 우선은 내부적으로 구현 되고 있는 DisplayObject 모델이 다르고 이벤트 모델도 다르게 되어 있습니다. Flash CS3 보다 좀더 후에 릴리즈된 Flex 3 SDK 에서 좀더 많은 것을 구현하고 있고 컴포넌트 기반의 구조를 가지고 있습니다. 나중에 Flash 나 Flex 에서 완전히 같은 Actionscript 구조를 가지게 될지 모르겠지만, 현재로서는 약간 다른 구조를 가지고 있습니다. 이 '약간 다른 구조' 라는 말은 Flash와 Flex에서의 구현이 어떻게 되는가에 따라 달라진 다는 의미 입니다.  Flex 로 개발했다고 해서 Flash로 구현한 것과 다른것이 아니라, 같은 수도 있다는 의미 입니다. 이 구현방법은 Flash의 SWF 와 Flex 의 SWF 가 통신하는 방법에 영향을 주게 됩니다.  

이와 같이 Flash와 Flex 모두 SWF 결과물을 만들어 내는데 도대체 뭐가 다른거냐? 개발 방법론의 차이와 각각 프로그램이 가지고 있는 툴의 특성에 따라 달라집니다. 예를 들어 웹에서 서비스 되는 위젯을 만든다고 하면 Flash 가 좋습니다. 그 이유는 Flex에서 컴파일 될때 가지고 있는 기본 SWF 용량이 있기 때문에 무거워 집니다. 다른 예로 새로운 제품의 런칭 사이트를 만든다고 하면 이것 역시 Flash 가 좋습니다. 좀 더 유연한 모션들을 비교적 쉽게 만들수 있기 때문 입니다. 그렇다면 영화 예매 사이트는 어떤게 좋을까요? Flex 가 좋습니다. Flex 의 뛰어난 서버데이터 통합능력과 쉬운 유지 보수등 Flash 에 비해 장점을 가지고 있습니다. 이 와 같이 상황에 따라 뭘 구현하느냐에 따라 선택해서 사용하면 되는 것입니다. 물론 Flex 에서 사용되는 컴포넌트들을 대부분 Flash 로 만드는 것과 같이 Flash 와 Flex 가 동시에 사용되는 경우가 대부분이지만 상황에 따라 그 프로젝트의 특성에 따라 맞는 툴을 사용하는게 바람직 한 방법 입니다.    

Flex는 MXML 과 Actionscript3.0 으로 이루어져 있습니다. 웹 페이지의 구성이 HTML 과 Javascript 로 되어 있는 것과 같습니다. 플렉스에서 객체를 Actionscript 로 만드는 작업은 Flash 에서의 방법과 동일 합니다.   

 
  1. package src.dong.test
  2. {
  3.         import flash.display.Sprite;
  4.  
  5.         public class Example extends Sprite
  6.         {
  7.                 public function Example()
  8.                 {
  9.                        
  10.                 }
  11.                
  12.         }
  13. }

둘다 동일하게 Sprite 객체를 정의 하게 됩니다. 다른 점은 Flex 의 프레임웍 에서 Flash 프레임웍 에서 구현하고 있는것을 기반으로 새로운 클래스들을 구현 하고 있다는 점 입니다. 이 부분은 조금 후에 언급하겠습니다.  

MXML 은 HTML 코딩을 하신 분들이라면 금방 적응할 수 있는 부분 입니다. <mx:Script> </mx:Script> 사이에 Actionscript 작성 부분과 MXML 코드 부분으로 이루어집니다. Actionscript 작성 부분은 Actionscript File 에 작성 하는 방법과 동일하게 생각하면 되고 메인 MXML 에 있는 Script 부분이 Flash 에서 Document Class 와 같은 기능을 하게 됩니다.  

MXML 코드는 다음과 같고, MXML 로 작성 되어 지는 모든 코드들은 Actionscript 로도 똑같이 구현이 가능합니다.  

이 두 방법을 상황에 맞게 적용하며, 프로젝트가 진행 됩니다. 

플래시의 DisplayObject , 플렉스의 DisplayObject

 

그림1) Flash 의 DisplayObject Diagram 


그림2) Flex 의 DisplayObject Diagram  

 그림1,2) 에서 볼 수 있듯이 Flex 의 DiaplayObject 모델은 기존의 Flash 의 모델에서 약간 추가된 형식을 가지고 있습니다. 플래시에서 사용되던 클래스 이름에 접두어를 (Flex) 를 붙여 새로운 클래스를 정의 하고 있습니다. 이렇게 플래시의 클래스를 통해서 파생된 Flex**** 클래스들은 내부적으로 보아도 크게 달라진 부분이 존재 하지 않습니다. 다만 플렉스 프레임 웍이 Flex 어플리케이션 안에 생성되어 지는 DisplayObject 들을 일괄적으로 관리해 주는 기능을 가지고 있기 때문에 이러한 파생클래스가 만들어 진 것 입니다. (더욱 자세한 내용)


그림3) Flex component 의 DisplayObject 의 Diagram 

 Flex 에서 중요한 것은 그림3)  입니다.  그림에서 볼수 있듯이 Flex 에서 구현 되고 있는 컴포넌트들은 모두 UIComponent 의 상속을 받아 만들어 지게 됩니다. Flash 에서도 역시 UIComponent 를 통해 컴포넌트들이 만들어 지니 다른게 없을거라 생각 될 수도 있지만, 중요한 것은 UIComponent 를 통해 만들어 지는 Application Class 입니다. 이 Application Class 를 통해 Flex 어플리케이션이 시작되게 되고 시작을 위한 준비를 하는 클래스 입니다. Flash 에서는 메인 스테이지에 타임라인을 가지고 있는 MovieClip 이나 Sprite 형의 Main 객체가 올라와 실행이 되지만, Flex 에서는 Application 객체를 인스턴스화 해서 stage 에 추가 하는 것으로 부터 시작 합니다. 그리고 모든 Flex 객체는 Application 을 통해 시각화 되게 되고, 화면에 보여 지게 됩니다.   

위의 Diagram 에서 Container 는 DisplayObjectContainer 와 같은 기능을 하며, LayoutContainer 는 Application class 에서 다른 컴포넌트를 포함할 수 있고, 배치 할 수 있는 기능을 상속해 줍니다. Flash 에서 MainTimeline 이 하나만 존재 하듯, Flex 에서는 Application 이 하나만 유일하게 존재 하게 됩니다.  

플래시와 플렉스 모두 사용자들에게 편의를 제공해 주는 휼륭한 솔루션을 만들기 위한 프로그램임은 틀림 없습니다. 이미 Flex 자체적으로 많은 컴포넌트들을 제공해 주고 있고, 사용되고 있지만 정작 딱 맞는 컴포넌트를 찾기란 어렵습니다. 그래서 사용자 컴포넌트를 제작하게 되고 그 제작을 위한 도구로 Flash 를 사용하게 됩니다.  

Flex 에서도 사용자 컴포넌트를 제작할수 있지만, 이때 Flash 의 유연함이 빛을 내게 됩니다. 방법은 다음과 같습니다. Flash 에서 Flex 에서 사용될 컴포넌트를 만들려면 Flash CS3 에 Flexcomponentkit 을 업데이트 해 줘야 합니다. 해당 URL 에 가서 설치 파일을 받아 확장자가 mxp 인 파일을 설치 합니다. (설치파일) 설치되어 지는 파일은 Flex component kit 으로 Flash 에서 만들어 지는 객체들을 Flex 에서도 사용할 수 있도록 도움을 주는 확장 파일 입니다.  

Flex Component Kit 이 나오기 전까지는 SWFLoader 를 이용한 방법을 사용해 왔습니다. 하지만 SWFLoader는 swf 로 만들어진 애니메이션을 로드 하는데는 적절하게 사용되지만 플레시에서 만든 컴포넌트를 위한 방법은 되지 못했습니다.

 설치를 끝내면 Flash CS3 의 Commands -> Convert symbol to flex component 와 convert symbol to flex container 가 추가된 것을 볼 수 있습니다. 이러한 설치 작업을 하지 않고 Export 된 swc 파일은 flex 에서 불러 온다 해도 보이지 않습니다. 왜냐 하면 Flex 에서는 UIComponent 요소들만 보이는 객체로 처리 하기 때문에 swc로 불러온 객체를 보이게 하기 위해서는 UIComponent 를 생성하여 그 UIComponent 를 application에 붙이고 붙인 UIComponent 에 불러온 swc 객체를 addChild 해야 보이게 됩니다. 굉장히 번거로운 작업 입니다. 하지만 Flex Component kit 을 설치하므로 이러한 작업을 안하고 바로 Flex 에서 swc 를 불러와 사용하게 됩니다.

 컴포넌트를 만들시 중요한 점은 이 방법은 무비클립 단위로 컴포넌트를 생성해 주므로 분산된 모든 코드를 정리하여 하나의 Class 객체로 만들어야 합니다.    

방법은 다음과 같습니다.

1. Flash CS3 에서 사용자 컴포넌트를 위한 MovieClip 을 만들고 Commands -> Convert symbol to flex component 를 선택 합니다.

( 단 라이브러리에 있는 무비 클립중에 Flex 에서 사용하고 싶은 것들을 선택 한 뒤에 위의과정을 실행해야 됩니다. 그리고 Frame rate 가 24 가 아닐 경우 fps 를 24 에 맞추라는 경고가 발생함으로 24 또는 그 이상으로 맞추고 실행 시키기 바람입니다 )  


 2. 위와 같은 output 을 볼수 있으며 Linkage 로 반드시 Class 명으로 정해줘야 해당이름으로 Flex 에서 사용할수 있습니다.
( Symbol "Circle" 을 Flex 컴포넌트로 사용할 수 있다는 뜻 입니다. )
3. Flie -> Public setting 의 Export SWC 에 체크를 해 주고 Publish 를 합니다. 


 4. 이 Export 된 파일을 Flex 에서 사용하기 위해서는 Flex 프로젝트를 생성할 시에 이름 입력후 바로 생성하지 말고 Next -> Next 로 들어가 Source path 에 해당 swc 가 있는 폴더를 지정해 주거나, Library path 탭에서 Add SWC Folder 또는 Add SWC 로 만들어진 swc 를 적용시켜 주면 됩니다. 위의 과정을 제대로 수행 했다면 <local:클래스명> 으로 Flash 에서 만든 컴포넌트의 자동완성 기능이 수행되는 것을 볼 수 있습니다. 이미 만들어져 있는 프로젝트라면 프로젝트 마우스 오른쪽 버튼 클릭 -> Properties -> Flex Build Path -> Library path 에서 SWC 파일 추가를 주면됩니다. 물론 Source Path 에 추가해도 동일하게 동작합니다.   

 

  위의 예제는 간단하게 라이브러리에 있는 무비 클립을 불러오는 정도 이지만, 이 방법을 잘 활용하면 굉장히 유용하게 사용할 수 있습니다. 코드를 추가한 더욱 복잡한 무비 클립의 생성도 가능하며, 타임 라인 제어를 통한 인터렉티브도 가능합니다. 결론은 Flash 에서 사용되고 접근할 수 있는 모든 객체의 속성들을 Flex 에서 접근이 가능하다는 것 입니다. 이 확장을 통해 디자이너와의 협업을 물론이고, Flex 어플리케이션을 좀더 Flash 스럽게 만들 수 있는 가능성을 가지게 됩니다.   

위의 방법은 라이브러리의 무비 클립을 Flex 에서 접근하고 객체로 사용하는 방법 입니다.  

이 밖에도 Flex Skin Design Extension 을 이용해서 Flex skin 을 플레시에서 바꿀 수 있습니다. 물론 스킨 뿐만 아니라 Over, Out, Release 시에 발생하는 모션들도 적용 가능 합니다. ( 다운로드 ) 

 

더 자세한 내용은 딴동네 님의 강좌를 참고하시면 좋을것 같습니다.  

플래시 개발자에서 플렉스란?  

Flash 와 Flex 는 상호 의존적인 경향을 가지고 있습니다. 같은 Actionscript3.0 언어를 탑재하고 있고, 그 쓰임 또한 거의 비슷 합니다. 하지만 각각의 특성이 있고 Flash 는 디자이너를 Flex 는 개발자를 배려 하는 요소들이 더 많이 묻어나 있습니다. 어떤 프로젝트를 함에 있어서, "난 지금까지 Flash 프로젝트 밖에 안했으니깐 Flash 로 해야 겠다. 난 Flex 개발자 니깐 Flex 만 해야지" 라며 둘을 갈라 놓을 영역은 아님니다. 어떤 프로젝트 인지에 따라 어떻게 사용자의 욕구를 충족시켜주는가에 따라 이 둘은 같이 갈 수 밖에 없는 형제라고 생각 합니다. 그러기 위해서는 언어 뿐만 아니라 추가의 많은 공부가 필요 하겠지요. Flash 를 메인으로 하는 개발자는 서버 데이터에 대한 이해 라던가, 유지 보수와 좀 더 고급프로그래밍을 위한 패턴 및 리펙토링의 이해를 알고 경험을 축적해 나가야 할 것이고, 이러한 것들을 갖추고 있는 Java 진행에서 넘어온 개발자라면 UI 의 이해, 좀 더 사용자 관점에서의 배려하고 정보를 설계하는 방법을 알아야 한다고 생각합니다.

 

둘다 안되는 저는 .... 이해 안되도 책만 뚤어져라 바라봅니다...ㄷㄷ

 

Posted by Flash 동강