Adobe Creative Suite 5 가 정식으로 출시되었습니다.

그중에도 Flash CS5가 저한테는 가장 큰 이슈겠죠^^

Flash CS5가 어떻게 달라졌는지 한번 살펴보겠습니다.



1. iPhone packager

2. ActionScript Editor

3. Integrate with Flash Builder 4

4. New file format *.xfl

5. Code snippet

6. TextLayoutFramework

7. Live View component



1. iPhone packager



Flash CS5를 실행시키면

가장 먼저 눈에 들어오는 부분이 아닐까 합니다.

아이폰 애플리케이션을 만들 수 있는 템플릿이 생겼습니다.

한번 만들어볼까요?



Profile 이 iPhone OS Settings 로 바뀌어 있습니다.

이부분에서 iPhone Application 설정을 다룰 수 있습니다.



General 패널에서는 일반적인 앱에 대한 설정을 할 수 있습니다.



가로 보기(Lanscape)로 할 것인지 세로 보기(Portrait)로 할 것인지

아니면 자동(Auto orientation)으로 바뀌게 할 것인지를 설정할 수 있습니다.

자동으로 바뀔때는 stage.addEventListener( Event.RESIZE, resizeListener ) 로 감지할 수 있습니다.



또 하드웨어 가속을 사용할 것인지 말것인지를 지정할 수 있습니다.

디스플레이 객체를 가속시키려고 할 때는 반드시 "GPU"모드로 설정해놔야합니다.



두번째 탭에서는 인증서와 배포 관련 옵션입니다.

ADC(Apple Developer Center)에서 개발자로 등록을 한 후 발급받은 인증서를 개인키 파일인 *.p12 파일을 가져다가

Certificate로 사용해야합니다.

그리고 앱에 대한 인증서격인 Provisioning profile 을 발급받아 선택합니다.

마지막으로 배포 방법을 선택합니다.

Quick publishing for device testing : 테스트용 버전으로 컴파일합니다.

Quick publishing for device debugging : *-app.xml 에서 디버깅 모드로 설정한 후에는 이 모드로 선택해야 디버깅이 가능합니다.

Deployment - Ad hoc : 앱스토어를 거치지 않고 내부적으로만 배포해서 사용할 버전을 컴파일할 때 선택합니다.

Deployment - Apple App Store : 앱스토어에 등록하기 위해서는 이 모드를 선택해야 합니다.



마지막 세 번째 탭은

아이콘을 설정하는 부분입니다.

29 사이즈는 앱스토어에서 목록으로 보여줄 때 사용되는 이미지고

57 사이즈는 아이폰에서 나타날 대표 아이콘입니다.

512 사이즈는 아이튠즈에서 앱을 보여줄 때 나타내주는 이미지입니다.


위와 같이 모든 것을 설정해주고 publish를 선택하면



위 그림 같이 퍼블리싱이 진행됩니다.

엄청 오래걸립니다... -_-

약 1분 30초 정도 후에



아이폰 컨버팅이 다 됐다고 나옵니다.

이렇게 다 되면



위 그림과 같이 ipa 파일이 생성됩니다.

아이튠즈에서 직접 넣고 동기화 시킬 수 있는 파일입니다.

(물론 디바이스도 등록이 되어있어야겠지요)



2. ActionScript editor



ActionScript Editor 창이 강력해졌습니다.

기존으로 code assist는 기본 Flash API 만 지원했었는데요

이번에 CS5로 넘어오면서 custom library도 지원하게 됐습니다.

함 보까요?



제가 따로 쓰고 있는 라이브러리의 LiteConsole 클래스가 code assist로 뜨는 것을 볼 수 있습니다.

이때 Enter를 치면~



import 는 물론 메소드의 파라미터도 미리보기가 됩니다.

-_-)b

게다가 이번 CS5에서 에디터가 무지 빨라졌습니다.

가볍고 무겁지도 않고 코딩하기 아주 수월해졌어요~

짱~



3. Integrate with Flash Builder 4

꽤 화제가 되었던 기능인데

저는 개인적으로 이 기능에 대해서 나름 기분이 다릅니다.

왜냐면

2005년도부터 Flex 개발 방법에 대해서 반대를 했었습니다.

무겁고 느리고 디자인에 민감하지 못하며 개발자가 편하지 사용자가 편한 개발 방법이 아니다.

라고 주장해왔었습니다.

그래서 Flex Builder는 SVN과 Coding 용으로 쓰고

Flash에서 모든 디자인 작업과 컴파일을 했었습니다.

그래서 항상 환경 설정을 따로 해줘야했고

똑같은 설정을 Flex와 Flash에서 같이 해줘야했습니다.

이제 Flash CS5부터는 그럴일이 없게 됐습니다.

일단 보시죠.

먼저 Flash CS5에서 ActionScript 3.0 파일을 하나 만듭니다.



그리고 늘 그러하듯 Document Class로 사용할 클래스명을 적어줍니다.

아직 생성하기 전이기 때문에 그냥 이름만 먼저 지어주는 것입니다.

보통은 이렇게 이름을 적어주고는 *.as파일을 따로 만들어서 저장해줘야했죠.

하지만 이제는 더 편리해졌습니다.

오른쪽에 편집 아이콘을 클릭해볼까요?



Which application should edit the ActionScript 3.0 class?

ActionScript 3.0을 편집하기 위한 프로그램을 뭘로 하시겠습니까?

라는 알럿이 뜹니다.

여기서 Flash Builder를 선택하면~



Flash Builder가 실행되면서 자동으로 Flash Professional Project를 생성해줍니다.

Finish를 눌러 생성을 하게 되면



Document Class를 생성해줍니다.

정말 편하지 않나요?

자 그럼 활용을 해볼까요?



테스트를 해보기 위해서 다음처럼 trace 문을 적어봤습니다.

여기서 Flash로 프로그램을 전환할 필요없이

왼쪽 상단을 보세요



Flash Professional에서 테스트할 수 있는 아이콘이 생겼습니다.

이 버튼을 눌러도 되고

플래시에서처럼 Ctrl + Enter를 하셔도 됩니다.

그러면 자동으로 Flash로 프로그램이 전환되면서 Test Movie가 실행됩니다.



-_-)b 츄~

그리고 한 가지 더.



위 처럼 에러가 났을 때 파일을 저장하면



Flash 에서도 컴파일 에러가 발생하는 것을 볼 수 있습니다.

ㅜ_-)b 츄...

짱이죠.

Integrate 라는 말이 무색하지 않을 정도입니다.



Tip)

 - 클래스 편집 모드를 "Don't show again"을 선택하셨을 때는 설정에서 Preference > ActionScript > Class editor 를 "Ask"로 선택해주면 다시 선택창을 볼 수 있습니다.



4. New file format *.xfl

제가 이번 CS5에서 가장 좋아하는 기능입니다.

바로 *.fla 파일을 XML과 Asset 파일들로 저장할 수 있는 새로운 포맷이 생겼습니다.



파일을 저장할 때 Flash CS5 Uncompressed Document (*.xfl)로 저장하게 되면



위 그림 처럼 라이브러리와 모든 코드, 설정들이 XML형식으로 출력되게 됩니다.

이 파일 포맷이 유용한 이유는

큰 프로젝트의 경우 svn, git 같은 협업 도구를 쓰기 마련인데

*.fla 파일의 경우 binary 파일이라 내가 수정하고 다른 개발자가 동시에 수정을 하게되면

둘중 한명은 다시 작업을 해야됐죠.

근데 text 기반의 파일포맷이 지원되기 때문에 svn, git 같은 협업도구에서도 사용할 수 있게 되었습니다.



그리고 이미지나 사운드 객체들도 직접 드러내어 저장되기 때문에

이미지를 엎어치기에도 편리해졌습니다.



실제로 svn 으로 share되어 있는 프로젝트 모습입니다^^



5. Code snippet

ActionScript Editor를 한층 강화시켜줄 Snippet 이 기본으로 내장되었습니다.



Window > Code Snippets 를 선택하면 스니팻창이 뜹니다.



mc 라는 이름의 무비클립을 선택하고

Drag and Drop 기능을 추가하고 싶으면

Code Snippets 에서 원하는 스니팻을 더블클릭하면



미리 만들어진 코드에 무비클립 이름이 대체되어 코드가 작성됩니다.

자주 쓰이는 코드들은 Snippet으로 만들어놓고 쓰면 매우 편리할 듯합니다.

사실 저는 Flash Builder에서 거의 필수 유틸로 사용하고 있는데

이제 Flash IDE에서도 사용할 수 있게 되었습니다^^



단순 Snippet 기능만 제공하는게 아니라

import, export 도 되고 XML 형식으로도 저장할 수 있어 직접 코드를 변경할 수도 있습니다.



6. TextLayoutFramework

CS5에서 처음 프로젝트를 만들려고 할 때 부딪히는 것이 있습니다.

바로 텍스트 필드인데요

CS5부터는 텍스트 기본 값이

TextField 가 아니라 TLF Text로 변경되었습니다.

물론 "Class TextField"를 선택하면 기존대로 사용할 수 있지만 깜짝 놀라는 부분이지요.



외부 라이브러리로 제공하던 Text Layout Framework 이 내장되었습니다.

잘 쓸줄은 모르지만 간단하게 Linked Text를 한번 만들어보았습니다.



TLF를 여러개 만들고 긴 문장을 붙여넣은 다음에

TLF 왼쪽의 사각형을 클릭하고 계속 잇고 싶은 텍스트를 선택하면



이처럼 3개의 텍스트필드가 하나의 텍스트 필드처럼 이어지게 됩니다.

드래그나 붙여넣기, 편집모두 하나의 텍스트 필드처럼 동작합니다.

그밖에 굉장히 많은 속성들이 생겼습니다.

한번 볼까요?



엄청 깁니다 -ㅂ-;;

그렇기 때문에 수반되는 한 가지 단점.



텍스트필드 3개 넣었을 뿐인데

65kb 라는 용량을 보여줍니다 orz...

어마어마 하군요...

용도에 따라서 사용하면 워드 저리 가라 할만큼의 에디터도 만들 수 있지 않을까 하네요.



7. Live View component

편리하기도하고 불편하기도한 컴퍼넌트 미리보기 기능입니다.

이제는 *.fla 편집모드에서 컴퍼넌트들이 실제로 동작을 하게 됩니다.

움직이기도 하고 실행하기도 하고 그럽니다.

FLV 하나를 playback component 로 넣어봤습니다.



여기까진 별 다른게 없는데



플레이 버튼에 마우스를 가져가니 Rollover가 됩디다?????

클릭을 하니...



카라가 노래를 부르네요....

좀 오래된 노래긴 하지만

지금 저 화면은 *.fla 편집화면입니다. swf 가 아닙니다...

쩌네요.

이것 말고도 메서드들도 다 실행되서 모션을 먹여놓은 컴퍼넌트들은

막 움직이기도 합니다.

굉장히 유연해진 개발환경입니다.



만약 이 기능이 불편하다면

Component Parameter에서 isLive 체크 박스를 꺼주시면 됩니다.

...

여기서 뭐 못 느끼셨나요?

바로 Component Inspector 창이 Properties 패널로 들어왔습니다.

이거 꽤 편리합니다.

물론 기존의 Inspector 창도 그대로 있기 때문에 손 가는 대로 쓰면 될거 같습니다.



이것 말고도 IK 툴에도 변화가 있었고 Font 등 여러가지 바뀐 것들이 더 있습니다.

그중 가장 크게 다가올 것들을 한번 꼽아보게 되었습니다.

여러분들의 개발 환경이 크게 나아지길 바라면서

이만~

For the better~

+ Recent posts