Mr. Drumcap.com

AS3에서 패키지는 네임스페이스다.

드럼캡 — Tue, 09 Mar 2010 14:11:07 +0900

코딩하다 좀 황당해서 글을 남깁니다. 이미 알고 계신분도 계시겠지만요. ;-)

사실 대부분의 플래시/플렉스 개발자는 flash.utils.getQualifiedClassName을 가끔 쓸 때가 있습니다.

그리고 그럴때마다 trace 해보면 이상한 점을 발견할 수 있습니다. 다음과 같이요.

trace(flash.utils.getQualifiedClassName(MouseEvent));
// trace결과 ==> flash.events::MouseEvent

하지만 대부분은 원래 그러려니 하고 넘어갑니다. 저도 그랬으니깐요.

그런데 이 블로그의 글을 보고 다음과 같이 테스트 해 본결과 깜짝 놀랐습니다.

package
{
	import flash.display.Sprite;
	
	public class TestAS3 extends Sprite
	{
		namespace flash_events = "flash.events";
		
		public function TestAS3()
		{
			trace(flash_events::MouseEvent);
		}
	}
}

결과적으로 임포트는 내부적으로 네임스페이스를 설정해 주는 것이라는 것을 알 수 있습니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부

드럼캡 — Fri, 19 Feb 2010 13:33:59 +0900

지난 1,2부에서는 PSD 가져와서 화면 기본 구성하는 것과 게시판의 리스트, 뷰 화면들을 완성했다면 이번에는 화면에 생명을 불어넣는 인터랙션/이펙트를 위한 과정을 실시 합니다. 만약 1,2부를 보지않고 이 페이지로 바로 오셨다면 1,2부를 전부 보시고 다시 여기로 오셔야 합니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부

2부에 이어 계속 진행해 보겠습니다.

따라하기

이제 리스트 이미지 (텍스트 이지만 포토샵에서 이미지 처리 했습니다. 플렉스 App 용으로 디자인 된 것이 아니라 이렇게 되었습니다)를 버튼으로 만들 차례입니다. 선택을 하고 아래 화면과 같이 HUD에서 버튼으로 변환을 눌러줍니다.

이제 List는 버튼이 되었고 HUD에서 버튼의 4가지 State로 바로 편집할 수 있는 상태가 된 것을 확인할 수 있습니다.

마찬가지로 업로드,Prev,Next 등의 이미지를 버튼으로 바꿔줍니다.

이제 2부에서 만들어 놓은 Data List에서 게시물을 클릭했을때 View페이지로 이동하는 것을 구현해 봅시다. 아래 화면과 같이 Data List 컴포넌트를 클릭하고 우측에 위치한 Interations 패널에서 Add Interation 버튼을 눌러줍니다. 그러면 아래 화면과 같은 팝업창이 띄워집니다. 이것은 플래시에서 심볼에 onClick, onMouseOver등의 이벤트 달았던 것과 같다고 생각하시면 됩니다.

우리는 데이터 리스트를 클릭하면 발생하는 Change 이벤트에 다음과 같이 View 스테이트로 화면전환(Transition)을 할 것이므로,

첫번째 콤보박스는 on Change를 선택합니다.

두번째 콤보박스는 Play Transition to State를 선택합니다.

세번째 콤보박스는 View를 선택해줍니다.

이제 List 버튼에 인터랙션을 줄 차례입니다. List 버튼을 클릭합니다.

Add Interation - onClick - Play Transition to State - List 로 선택해줍니다.

이제 기본 인터랙션이 설정되었습니다. 한번 Ctrl-Enter 또는 Command-Enter를 눌러서 테스트 해보시 바랍니다. 게시글을 클릭하면 View 페이지로 넘어가고, View 페이지에서 List 버튼을 누르면 List 페이지로 넘어갑니다. 쉽게 화면을 만들어서 놀랐죠? 이게 카탈리스트의 힘입니다 ^^;

이제 마지막으로 화면에 이펙트를 줄 차례입니다. 카탈리스트는 스테이트를 생성할 때마다 아래의 타임라인의 좌측과 같이 모든 스테이트 상황에 대한 정보가 생기며, 현재는 당연히 List->View, View->List 두개밖에 없습니다. 이 두개의 상황에 대한 이펙트를 정의해 보겠습니다. 먼저 List->View를 설정해 봅시다.

쉽게 설정하기 위해서 아래의 Smooth Transition 버튼을 눌러 Move와 Fade 이펙트가 설정되도록 합니다.

아래와 같이 잘 설정되었습니다.

마찬가지 방법으로 View->List도 이와같이 Smooth Transition을 클릭하여 이펙트를 설정해줍니다.

이제 다시 Ctrl-Enter, Command-Enter를 클릭하여 확인해 봅시다. 어떠신가요? 훨씬 마음에 드는 결과가 나왔죠?

이 타임라인은 아래의 그림과 같이 플래시의 타임라인 컨셉과 비슷합니다. 한번 아래와 같이 세팅하고 다시 플래이 해보세요.

현재는 Fadein-out 또는 Move만 있는데 별도로 다른 이펙트를 추가 할 수도 있으며, 플렉스4에 적용된 3D 이펙트도 적용가능합니다.

지금까지 했던 방식대로 작업하면 1부의 완성된 예제의 모습을 만드는데 그리 어렵지 않게 작업할 수 있을 것이며 필자는 포토샵 레이어 정리 끝나자 마자 최종 모습을 만들어 내는데 까지 2시간만에 완성해 버렸습니다.

이와같이 디자이너 여러분들의 크리에이티브를 마음껏 발휘할 툴이 바로 이 카탈리스트 인 것이라는 것을 몸소 체험하셨을 것입니다. 여러분의 능력을 십분 활용하여 멋진 결과물이 많이 나왔으면 좋겠습니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부

드럼캡 — Fri, 19 Feb 2010 13:24:33 +0900

지난 1부에서는 PSD 가져와서 화면 기본 구성하는 것을 완성했다면 이번에는 게시판의 기본형태를 만들고 페이지를 만들어서 3부에 할 인터랙션/이펙트를 위한 과정을 해야 합니다. 만약 1부를 보지않고 이 페이지로 바로 오셨다면 1부를 보시고 다시 여기로 오셔야 합니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부

1부에 이어 계속 진행해 보겠습니다.

따라하기

아래와 같이 게시판에서 반복되는 부분들을 (아래의 라인까지) 선택해줍니다.

메뉴-Modify-Group을 선택하거나 Ctrl-G 또는 Command-G를 눌러 그룹을 만들어줍니다.

만들어진 그룹이 선택된 상태에서 화면에 둥둥 떠다니는 HUD Interface를 살펴보면 Group으로 바뀌어 있는 것을 확인할 수 있습니다. (HUD 인터페이스에는 그래픽 컴포넌트의 실제 사용할 컴포넌트로의 변환이나 간단한 State 정보 확인, 편집으로 바로가기등을 수행할 수 있습니다) 여기서 하단의 Convert Artwork to Component 를 클릭하고 DataList 컴포넌트로 변환해줍니다.

변환하면 Group이 Data List로 변경된 것을 확인할 수 있습니다. 우리는 이로써 매우쉽게 데이터를 리스트 형태로 반복하여 보여주는 DataList 컴포넌트를 만들게 되었습니다. 더불어 Component Issue 경고가 나타나는데 이것은 Data List 컴포넌트가 반드시 선택해야 하는 부분(플렉스4에서는 이것을 Part라 부릅니다)이 있다는 뜻 입니다. 이와같이 모든 컴포넌트가 그런것은 아니지만, 반드시 선택해야 하는 Part가 있을 수 있습니다. 그럴땐 이렇게 노란 이슈아이콘이 만들어 집니다. 이제 왼쪽의 Edit Parts 버튼을 클릭합시다

그럼 기존의 Group이 선택된 상태로 나타나는데 이는 플래시의 심볼안으로 들어온 것과 비슷하다고 생각하시면 되겠습니다. 여기서 Convert Artwork to DataList Part 콤보박스를 누르면 Repeated Item(Required) 가 나옵니다.

우리는 선택한 그룹을 반복시킬 것이므로 여기에 체크박스를 클릭합니다. 만약 다른 반복하길 원하는 아이템이 있다면 (ex:이미지) 그것도 함께 선택한 후 버튼을 누르시면 가능합니다. 그러면 아래와 같이 데이터가 반복되어 보여집니다.

원하는 사이즈로 적절히 조절해 줍니다. 저는 5개의 글을 보여주는 크기로 조절했습니다.

조금 전 심볼과 비슷하다고 말씀드렸는데, 플래시의 심볼편집 인터페이스와 동일합니다. 좌 상단에 DataList2라는 컴포넌트에 들어와 있는데 다시 Writeform을 클릭하여 메인으로 돌아갑니다.

DataList 컴포넌트가 선택되어 있는 상태로 창 아래에 위치해있는 DesignTime Data를 열어봅니다. 그러면 화면에 보여지는 디자인 작업을 위한 임의의 데이터가 보여집니다. 원하는 대로 아래와 같이 수정해 봅시다.

이제 거의 됐습니다. 지금까지는 List라는 State를 만들었으니 페이지 이름을 아래와 같이 더블클릭하여 List로 변경해줍니다.

그리고 보기 State를 만들기 위해 현재의 리스트 State를 아래의 Duplicate State버튼을 클릭하여 복사해줍니다.

그리고 복사된 State를 View 로 수정해줍니다.

View 스테이트가 선택된 상태에서 오른쪽 위의 Layers를 클릭하여 아래와 같이 눈 아이콘을 설정합니다. 잠김버튼은 메인,BG,Background를 설정합니다.

그리고 아래의 화면과 같이 되도록 이리저리 조절해 주고 마무리 합니다.

마지막으로 상단의 List, View 스테이트 버튼을 눌러보면 화면이 성공적으로 전환되는 것을 확인해 볼 수 있습니다. 여기까지 따라오시느라 수고하셨습니다.

이제는 지금까지 작성한 페이지에 생명력을 불어넣는 시간입니다. 수많은 디자이너 여러분 힘내세요!!

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부 바로가기

드디어 AIR 어플리케이션이 Android로...

드럼캡 — Tue, 16 Feb 2010 00:19:46 +0900

드디어 AIR 어플리케이션 for Android 가 MWC(Mobile World Congress)에서 발표되었습니다. 드디어 플래시/플렉스 개발자들이 아이폰용 어플리케이션 뿐만 아니라, 안드로이드용 어플리케이션도 동시에 개발할 수 있는 환경이 마련되었습니다. 이로써 어도비는 FlashCS5로 아이폰용 어플리케이션과 안드로이드용 어플리케이션을 동시에 배포할 수 있는 환경을 마련하면서 개발자들이 서로 다른 언어와 API를 익혀서 어플리케이션을 배포해야 하는 스트레스를 받지 않아도 되었습니다. 이러한 환경이 잘 다듬어 지면 정말 좋겠습니다. 2010년 상반기에 Flash Player 10.1이 런칭되고, 안정화 된 이후에 2010년 하반기에 AIR for Android가 런칭될 가능성이 큽니다. 이러한 이야기를 Adobe의 에반젤리스트 Ted Patrick이 예고하고 있습니다..

사실 모바일에서는 성능이 중요한 이슈인데, 모바일에 맞춰 CPU, 배터리, 메모리등을 최적화 했다고 했으니 (아마도 안드로이드에서는 플래시가 올라가는 형태이겠죠) 이건 뚜껑을 열어봐야 알겠지만 점차 개선되는 형태로 진행될 가능성이 높다고 보여집니다.

이미 예견된 일이었지만 이렇게 빨리 진행될 줄은 몰랐네요. 최근 어도비의 행보는 정말 마음에 듭니다. 애플의 스티브 잡스 덕이라 해야하나요? ㅋㅋ 잡스형 쌩유!!

Flex Preloader 에서 마우스 이벤트 런타임 에러 버그 해결방법

드럼캡 — Fri, 12 Feb 2010 19:23:02 +0900

플렉스로 대형 어플리케이션 프로젝트를 하다보면 프리로더를 수정하여 사용할 때가 반드시 오는데 이때 발생하는 문제는, 로딩이 길어질 때 스테이지를 클릭하면 마우스 이벤트에 가끔 오작동을 일으켜 런타임 에러를 발생시킬 때가 있다는 것이다. 에러를 한번 살펴보자.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.managers::SystemManager/stageEventHandler()[E:\dev\trunk\frameworks\projects\framework\src\mx\managers\SystemManager.as:3275]

에러를 만나면 당황스럽고 짜증이 밀려오는데, 이유는 mouseCatcher가 바로 null 이라는 것.

코드를 살펴보면 클릭이벤트 핸들러가 다음과 같이 mouseCatcher가 null 체크 하지않고 사용되고 있다.

구글링 해보니 이에 관련된 버그는 Adobe Bug System에 이미 있었고 SDK 버그로 분류되어 Flex4에서 고쳐졌다. [버그 바로가기] 하지만 아직 Flex3에서는 발생되고 있으니 우회방법을 사용하여 회피해야 한다.

이에대해 한 일본인 블로거가 해결책을 제시하였는데 [바로가기] 간단하게 프리로더 상태에서 마우스다운 이벤트 자체를 프리로더에서 걸고 프리로드가 완료되면 마우스다운 이벤트를 해지하는 것이다.

해결을 위한 코드는 다음과 같다.

Flash Player 10.1의 기능 Overview, 64비트 지원계획은?

드럼캡 — Fri, 12 Feb 2010 10:00:27 +0900

현재 iPad에 플래시 플레이어 탐재에 관한 이슈가 떠오르면서 플래시 플레이어의 성능에 대한 관심이 많이 높아졌습니다. 어도비는 플래시 플레이어에 대한 성능향상과 모바일 탑재는 큰 테마로 준비해 오고 있었으며, 이를 증명하듯 Adobe MAX 09 (2009년 10월 개최된 어도비 기술 행사)에서 시연해 보이기도 했습니다.

이미 아는 사람들은 다 아는 내용이지만, 사람들이 잘 모르는 부분을 정리하자는 의미로 Adobe Labs의 Flash Player 10.1 Features 의 내용을 중심으로 정리해 드리겠습니다.

사실 10.1의 기능은 끝 버전 하나 올라간 것 치곤 꽤나 큰 업데이트 입니다. 사실 제 생각으론 Flash Player 10 메이저 업데이트에 맞춰 나와줬어야 하는 기능들 인데 개발 일정을 못 맞춰 이리 되었다 살짝 짐작해 볼 수 있습니다. 처음 Player10 에서 3D가 지원된다고 했을때 하드웨어 가속이 되는줄 알았다가 Ryan Stewart가 Flash Player는 제외라는 소리를 들었을때 엄청 실망했었던 기억이 납니다.

이번 버전의 큰 명분은 Open Screen Project의 첫번째 런타임 플레이어라는 것입니다. 인터넷 연결이 가능한 모든디바이스에 동일한 뷰 환경을 만들고 동일한 사용자 경험을 주자는 프로젝트인 Open Screen Project는 다양한 디바이스, 컨텐츠, 칩셋 회사들이 참여하고 있고 그 중심엔 어도비가 있습니다. 그럼 먼저 Labs에 나온 주요 업데이트 기능에 대한 내용을 확인해 볼까요?

1. Ubiquitous Reach (유비쿼터스에 접근)

2. Global error handling (전역 에러 핸들링)

3. Designed for mobility (모바일을 위한 설계)

4. Expanded options for high quality media delivery (고화질 미디어 전송을 위한 확장옵션)

이렇게 크게 4가지 인데 하나하나가 정말 엄청난 기능이 아니라 할 수 없습니다. 점점 플래시가 진화해 가고 있고 어도비가 이에 역량을 집중하고 있다는 것도 많이 느낄 수 있습니다.

1. 유비쿼터스에 접근

이것은 플래시가 다양한 기기에 설치될 수 있고 업데이트가 가능해졌다는 것을 의미합니다. 기존에 플래시 플레이어는 모바일이나 임베디드에 들어가려면 Flash Lite Runtime 이 별도로 올라갔고 액션 스크립트 코딩도 달리해야 했으며 메모리 관리를 특별히 신경써야 했습니다. 하지만 이제는 이런 것들을 신경쓰지않고 코딩해도 모든 디바이스및 환경에서 동일한 화면과 애니메이션을 볼 수 있게 됐습니다.

2. 전역 에러 핸들링

이 기능은 액션스크립트 개발자에게 환호를 받을만한 것입니다. 뭐냐면 지금까지 플래시 플레이어 디버거를 설치했던 유저들은 종종 런타임 에러 화면이 떴던 것을 발견했을 것입니다. 이벤트 기반으로 구성되어있는 플래시는 어쩔 수 없이 개발자가 코딩시 알아차릴 수 없는 런타임에러가 종종 발생하게 됩니다. 지금까지 개발자는 try/catch 문을 사용해 일일이 커스텀 에러 핸들링을 해줘야 했지만 이제는 전역 에러 핸들링을 설정해 주면 런타임 에러는 여기서 잡히게 됩니다. 개발자 분들 앞으로 편하겠죠? ^^

3. 모바일을 위한 설계
위에서 다양한 디바이스를 지원한다고 했는데, 그 중에서 모바일은 정말 중요합니다. 그리고 고려해야 할 것이 정말 많습니다. 요즘의 고사양 컴퓨터에서는 크게 문제가 되지 않았던 성능,메모리,배터리 등이 문제가 되기 때문입니다. 플래시는 모바일을 위해 메모리를 50% 이상 개선했고(Good!!!!) 하드웨어 그래픽 가속을 지원하며, 렌더링과 스크립팅, 배터리와 CPU를 최적화 했습니다. 또 멀티터치 제스쳐와 가속계, 화면 방향등을 지원하여 모바일 UI의 사용자 경험을 살렸습니다.

4. 고화질 미디어 전송을 위한 확장 옵션
이제 미디어는 점점 고화질로 넘어가고 있고 유튜브는 현재 1080p를 지원하는 서비스를 준비중입니다. 그렇다면 파일 전송은 가장 중요한 이슈가 됩니다. 일단 이부분을 해결하기 위해 여러가지 옵션을 추가했는데, 동영상 파일을 잘개 쪼개서 올리면 (툴이 있겠죠?) 그 정보를 가지고 HTTP로 스트리밍 해주는 것과, 동영상을 Flash Access2를 사용하여 유료 동영상 등의 컨텐츠 보호에 대한 옵션을 마련했습니다. 또 버퍼링 메커니즘 개선 및 RTMFP 프로토콜 기반으로 동료기반 네트워킹이 가능해 짐에 따라 다양한 대용량 미디어에 대한 대안기능을 마련해 둔 상태입니다.

이상을 정리해 보면 MAX09 에서 발표한 내용이 좀 더 눈에 잘 들어온다는 느낌이 드는데 이는 다음과 같습니다.

Flash Player 10.1 기능 리스트

1. Smartphone enabled (스마트폰에서 가능)

2. Multitouch, accelerometer, screen orientation (멀티터치, 가속계, 화면 방향)

3. Optimized memory, power, hardware acceleration (메모리와 파워 최적화, 하드웨어 가속)

4. HTTP video streaming (HTTP 비디오 스트리밍)

5. Content protection (컨텐츠 보호)

6. Peer assisted networking ( 피어 어시스트 네트워킹 - 동료 지원 네트워킹)

메모리 50% 감소효과

배터리 사용시간. 특리 Low Battery 모드 사용시에는 저대로라면 놀랍네요

아무튼 사실 모바일에서는 실체를 보기 전 까지는 확실히 모르지만 어도비도 그동안 게으르진 않고 열심히 준비해 온 것만은 분명합니다.

64비트 지원문제?

사실 저는 Mac OS의 Snow Leopard를 쓰기 시작하면서 64bit 운영체제의 잇점을 몸소 체험하고 있으며 이를 제대로 지원해 주지 못하는 플래시를 번번히 욕했었습니다. 윈도우도 64비트 OS를 설치하고 64비트 익스플로러를 실행하면 플래시는 보지를 못하니까요. 맥에서는 64비트 사파리에서도 플래시는 잘 돌아갑니다만 아래의 이미지와 같이 별도의 32비트 플레이어가 같이 돌아가는 형태로 구동됩니다. 한마디로 비효율 적이며 개발자로써 이 문제는 썩 유쾌하지 않습니다.

사파리는 64비트 플래시 플레이어는 32비트

단지 64비트 전환을 더디게 하는 것은 어도비의 의사결정 속도가 느리다는 점과 기술력이 떨어지는 것으로 생각했었지만, 사실 그렇지 않다는 것을 얼마전에 알았습니다. 지금까지 어도비는 64비트 플레이어를 리눅스에서만 릴리즈 버전만 지원 하고 있는데, 플래시 플레이어 개발자인 Tinic Uro는 그의 블로그에서 64비트 리눅스 버전을 발표했을 당시(2008.11) 이렇게 언급하고 있었습니다.

64비트 플레이어는 32비트 플레이어보다 빠르지는 않습니다. 32비트 플레이어가 최적화가 잘 되어 있기 때문입니다.
현재는 리눅스만 지원하고 있지만 향후에 윈도우와 맥 모두 지원할 예정입니다. (벌써 1년이상 넘었네요)
디버그 버전은 아직 지원하지 않을 생각이며 차후에 지원예정입니다. (이것도 아직 지원하지 않고 있습니다.) 지원하더라도 ActionScript 2.0은 디버깅이 되지 않는데 그 이유는 AS2는 32비트 포인터를 사용하기 때문입니다.

이로써 얼추 짐작해 볼 수 있는 것은 여러가지 부분(GPU지원, 웹캠, 마이크등등) 이 있겠지만, 그중에 바로 AS2의 지원에 관한 부분도 크게 한 몫 하고 있다는 것을 알 수 있습니다. 현재 플래시 플레이어는 AVM1과 AVM2가 동시에 구동되는 형태이며 이는 두개가 동시에 올라가 있는 형태로 매우 비효율 적입니다. 결국은 언젠가 없어질 기술인 AS2가 뒷덜미를 잡고 있는 것일 것이며 이는 아마 플레이어 버전 11쯤 되면 결국 AVM1을 없애지 않을까 조심스레 예측해봅니다. 언제나 성능과 최적화에 대한 이슈로 방망이를 맞고 있는 어도비로써는 갈길이 멀겠지만 오픈스크린 프로젝트를 성공적으로 런칭(버전 10.1) 하고 다음은 64bit 지원도 동시에 이루어져야 할 것입니다.

여담으로 현재 Mac OS용 플래시 플레이어는 기능개선이 많이 이루어진 상태이며 각 브라우저의 특성에 맞춰 기능개선이 이루어진 상태입니다. 마찬가지로 Tinic Uro 의 블로그에 최근 포스트 된 글을 보면 (이친구는 위에서 언급한 2008년 64비트 플레이어 포스팅 이후 이게 첫 포스팅입니다 ^^ 그만큼 바빴고 요즘 어느정도 플레이어 개발 일정이 정리되고 있다고 생각해도 될까요?) 현재 Full Cocoa 코드로 구성이 되어있으며, 사파리4 에서는 애니메이션 엔진으로 Mac OS의 Core Animation을 사용하게되어 비약적인 성능향상이 있습니다. 자세한 내용은 블로그의 포스트를 참고하세요, [Core Animation 바로가기]

[참고 게시글]

http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html

http://www.adobe.com/devnet/flashplayer/articles/mobile_demos_fp10.1.html

http://www.kaourantin.net/

http://blogs.adobe.com/flex/archives/2010/02/update_to_flex_sdk_35_1.html

http://blogs.adobe.com/flex/

http://blog.jidolstar.com/617

http://blog.jidolstar.com/594

[Flex Component] 스타일이 자유로운 풍선 ToolTip

드럼캡 — Wed, 10 Feb 2010 13:23:47 +0900

플렉스의 ToolTip의 사용방법과 스타일을 주는 것은 대부분의 플렉스를 하는 사람이라면 잘 알 것입니다. 하지만, 유용한 이 툴팁에는 몇가지 단점이 있는데, 그것은 다음과 같습니다.

1. 스타일은 어플리케이션 전체의 전역적인 클래스 타입의 스타일 밖에 적용되지 않습니다. 따라서 각각의 툴팁에 다른 스타일을 줄 수 없으며 이러한 경우 별도 UIComponent를 사용해 툴팁을 별도 제작해야합니다.

2. 그리고 풍선 모양의 툴팁을 사용해야 할 때가 종종 있는데 이러한 경우도 지원하지 않으며 별도로 툴팁을 만들어야 합니다.

다음의 커스텀툴팁 매니저를 이용하고 스타일 이름으로 툴팁의 스타일을 매니저에게 넘겨주면 툴팁이 동적으로 생성됩니다.

원리는 툴팁 속성에 아무 값이나 주고 툴팁이 생성되게 설정한 후 toolTipCreate 이벤트에서 툴팁을 가로채서 별도의 툴팁으로 바꿔버리는 방법입니다.

사용방법은 다음과 같습니다.

예를들어 버튼이 있다면 (toolTip 속성이 있는 UIComponent 를 상속받은 클래스들) 다음과 같이 설정합니다. 3가지를 모두 제대로 설정해야 제대로 보입니다.

CSS 에서는 다음과 같이...

컴포넌트 에서는 다음과 같이..

아래의 샘플에서 마우스 오른쪽 버튼 - view source 하시면 소스를 보실 수 있습니다.

(현재 샘플 소스가 한글이 깨져보이네요. 이부분 서둘러 잡을 테니 우선 소스를 다운로드 해서 봐주세요)

플래시의 성능 개선을 위한 버그신고 합시다

드럼캡 — Tue, 09 Feb 2010 16:11:09 +0900

어도비의 테드 패트릭은 자신의 블로그에서 Flash Player 10.1 과 AIR 2.0 를 사용해서 개발 중이거나 개발 된 플래시 파일을 사용해 테스트 해 보고 버그신고 해주길 바라고 있습니다.
요즘과 같이 뒤숭숭한 때에 우리 플래시 플렉스 개발자들이 열심히 베타 테스트에 참여해서 버그를 줄일 수 있도록 해야합니다. 비록 제출한 것이 채택 안되더라도 말입니다.

테드 패트릭이 제안한 참여 방법은 다음과 같습니다.

해당 툴을 다운로드 받습니다. (Debugger로 다운받아야 겠지요?)
Flash Player 10.1 Beta 2 and AIR 2.0 Beta 2
당신이 가지고 있는 어플리이션을 위의 베타로 돌려봅니다.
발견된 버그를 bug.adobe.com 에 버그내용을 영어로 올립니다. (회원가입 필요)

사실 어도비 버그 트랙킹 시스템은 추첨에 의한 방식을 채택하고 있으며, 그에따라 우선순위가 부여된다고 합니다. 현재 상황에서 어도비는 10.1에 대한 안정적인 출시가 가장 중요할 것이기 때문에 특별히 버그 내용들을 예의주시 하고 있을 것입니다.

아직 몇주 후 쯤엔 베타3로 진행할 것이며, 2달 내로 RC를 발표한다 하니 시간은 충분하므로 그 사이에 한번 버그 신고해서 한국 개발자 들의 저력을 보여줍시다. 그리고 혹시라도 버그를 올리면 코멘트에다라도 달아서 서로 추천하여 반드시 버그가 처리되게 해 봅시다.

Adobe가 Apple의 공격에 대응할 전략은?

드럼캡 — Tue, 02 Feb 2010 13:11:43 +0900

최근 iPad에 관하여 반응들이 뜨겁습니다. 개인적으로 작년부터 루머가 돌기 시작할 때부터 였으니까 참 많이 기다려 왔습니다. 이런 기기 하나 나오면 꼭 사야한다 하면서, 가지고 있던 맥북을 팔았고, 계속 기다렸습니다.

그런데 충격적인 사실..
플래시가 안들어간다는 소식이 트위터를 통해 들려오기 시작했고, 결국 애플 임직원 미팅때 "구글 모토는 헛소리, 어도비는 게을러" 라고 표현하면서 플래시를 아이패드에 넣지 않을 것이라고 거의 확실시 했습니다.

광파리님의 블로그에 글이 올라왔는데, 약간 정리할겸 해서 제가 글을 달았습니다. 전체적 분위기는 플래시 증오로 퍼져나가네요 ^^ 광파리블로그 바로가기: 스티브 잡스 “구글 모토는 헛소리…어도비는 게을러”

이 소식을 듣자 마자 저는 그날부터 크게 갈등을 하고 있습니다.
사실 꼭 사고싶은데, 제가 아이패드로 하는 일은 50%가 웹서핑, 10% 메일, 40%가 ebook, 동영상 강좌를 보는 것이기 때문입니다. 특히 큰 화면으로 웹서핑 하는 것은 반드시 필요한데, 플래시가 없으면 포탈 말고는 제가 볼만한 사이트가 거의 없을 것이기 때문입니다. 향후 html5로 대체 될 것이라고는 하지만 전 세계적으로 이것이 적용 되려면 웹표준/웹접근성과 같이 어떤 이슈화나 표준화에 대한 갈망같은 것이 자리잡아야 합니다. 그리고 기술이 현재 플래시의 기술은 상당히 고수준으로 넘어왔습니다. (다만 위의 광파리 블로그에서 댓글로 언급했지만, 단지 과도한 이펙트 모션이나, AS2로 작업된 것이 아직 많이 존재합니다)

현재 데스크탑에서 문제 안되던 플래시가 이리 얻어맞고 있는 이유는 그간 어도비가 게을르다고 표현한 잡스의 표현이 어느정도 맞다고 생각합니다. 한편으론 속이 후련한데요. 개발자로써 전통적으로 어도비는 이런 플래시의 기술적인 문제를 (예를들면 메모리문제, 플레이어 다운문제)를 서둘러 해결하지 않고 있다는데 있습니다. 저는 맥을 쓰는데, 맥에선 플레이어의 문제가 더더욱 심각합니다. 개발자인 우리도 이렇게 느끼는데 서로다른 플랫폼끼리 서로 0인터페이스 하는데는 더더욱 문제가 많이 튀어나왔을 것입니다.

이로써 어도비는 진퇴양난의 기로에 다다랐습니다.
향후의 어도비 플랫폼 전략에 큰 차질을 빚을 수도 있습니다. 현재 어도비는 플래시 중심으로 많은 프로젝트를 진행중이며, 구상중인 것으로 알고 있습니다. 하지만 이 모든 것의 힘은 플래시를 설치한 유저는 전세계 99% 이상이다라는 것의 힘입니다. 그 힘은 네트웍 속도의 증가와 하드웨어의 성능 증가, OS의 기술향상 등이 있었지만 모바일은 다릅니다. 네트웍 속도는 지금과는 비교할 수 없을 정도로 느리고 (3G), 하드웨어도 펜티엄3 수준이며, OS는 별도의 OS 이므로 비유를 하자면 몇년 전으로 회귀한 것이라 할 수 있습니다. 미래는 폰의 모든것이 PC 만큼 좋아지겠지만 현재 어도비가 살아남으려면 반드시 폰에 플레이어가 깔려야 하는 입장인 것입니다.

그런데 지금의 플래시 플레이어로는 제가 잡스라도 넣지 않겠습니다. 물론 현재 10.1 베타가 나오긴 했지만 얼마나 모바일에 최적화 되었는지는 아직 미지수이기 때문입니다. 애플이라고 그 베타버전 플레이어를 iPad에 통합시켜보지 않았을까요?

어도비는 보란듯이 구글 넥서스원 등의 안드로이드폰에 10.1을 반드시 탑재해 내놓으면서 메모리문제, 배터리문제 등이 해결된 모습을 보여줘야 합니다. 그래서 애플이 어쩔 수 없이 탑재하도록 유도해야 할 것입니다. 만약 보란듯이 탑재해서 "거봐 그러니 느리고, 배터리도 빨리 닳지?" 라는 반격을 맞으면 게임 끝일 것입니다.

어도비는 애플을 원망할 것이 아니라 변화가 필요합니다.
현재는 즉각적인 대응과 반응이 중요한 시기입니다. 이 한때 까딱 잘못하면 Flash는 "초창기 웹의 Rich Internet 환경에 기여하고 HTML5에 바통을 물려주었다" 라고 역사에 남을지 모릅니다.

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부

드럼캡 — Sat, 30 Jan 2010 12:13:12 +0900

서문
지금까지 플렉스는 개발자의 산물이었다고 해도 과언이 아니었다. 아직까지 현존하는 Flex3는 디자이너를 배려한다고 여러가지 연계 플러그인들을 (ex, photoshop, illustrator 용 플러그인) 만들어 배포했었지만, 여전히 빌더로 와서 힘들게 코딩작업을 해야했다. 이것은 HTML이외의 MXML,ActionScript의 새로운 코딩을 배워야 한다는 것을 의미하고 디자이너에게는 엄청난 도전이었다. MXML이야 그럭저럭 쉽게 이해되지만 ActionScript로 스킨을 제작해야 하는 것을 보며 당연히 거의 모든 디자이너가 포기했다. 그냥 CSS로 모든것을 해결하고 고급 스킨제작 및 드로잉은 애석하게도 디자이너가 아닌 프로그래머의 몫이 되었었다. 그래서 프로그래머들은 여러군이 나뉘었었는데, 작게는 Biz 제작 담당, UI 제작담당, Skin 제작담당, 등으로 나뉘어 작업을 하곤 했다.

하지만 Flex4에서는 모든것이 체계가 바뀌었다. 스킨체계가 새롭게 정리되고, 디자이너는 디자인만 신경쓰는 시대가 도래했다. 지금까지 Flex3까지는 프로그램 스킨은 액션스크립트로 작업했지만, 이젠 MXML로 제작이 가능하다. 또한, 이 MXML로 제작하는 것 조차 거의 필요치 않으며, 앞으로 설명할 Flash Catalyst 만 있으면 Catalyst 가 알아서 포토샵, 일러스트레이터 파일을 읽어와 코드를 만들어 준다.

Catalyst 로 플렉스 App 제작개요
Catalyst에서 포토샵이나 일러스트레이터로 제작한 어플리케이션 디자인 파일을 불러오면 포토샵이나 일러스트레이터의 의 각 레이어와 그래픽 엘리먼트를 png파일이나 플렉스 스킨 그래픽으로 변환하고 이에 맞게 플렉스 코드를 제작해준다.
그리고 각각 원하는 그래픽에 컴포넌트(ex 버튼) 등록을 해주고, 원하는 이벤트와 액션을 입력한다. 또는 그에 반응하여 트랜지션등도 줄 수 있다. 사실 이 정도만 전체적으로 돌아가게만 만들어 놓으면 그다음은 프로그래머의 영역이다. 따라서 여기서는 간단한 따라하기 샘플을 보여주며 이해를 돕겠다.

샘플개요
아래의 프로젝트는 필자가 다니는 교회에서 요청이 들어온 App 디자인이다. 디자인 자체는 웹을 염두해 두고 제작한 것이지만 필자가 Flex4로 쉽게 작업이 가능하겠다 생각하여 제작에 착수하였다. 디자인 샘플 자체가 플렉스에 익숙하지 않은 디자이너가 한 디자인이라 웹페이지의 느낌이 강하지만(예를들어 버튼의 디자인) 이 글을 보는 분들은 어플리케이션의 모습을 갖추도록 디자인 하면 더욱 좋을 것이다.

백문이 불여일견! 앞으로 진행할 샘플의 최종 완성본을 살펴보자. 현재 종료된 이벤트이며 글쓰기 해도 저장이 되지 않는다는 것을 참고할것! (종교적 색채가 강한 사이트의 샘플인데 필자가 제작한 마땅한 샘플이 이것밖에 없으니 양해를 구한다)
http://www.teamjoshua.com/newsong/