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

IT 이야기 | 2010/02/16 00:19 | Posted by 드럼캡

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

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

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



'IT 이야기' 카테고리의 다른 글

드디어 AIR 어플리케이션이 Android로...  (0) 2010/02/16
Flash Player 10.1의 기능 Overview, 64비트 지원계획은?  (0) 2010/02/12
Adobe가 Apple의 공격에 대응할 전략은?  (2) 2010/02/02
이제 새로운 맥북이 나오는가...  (0) 2008/07/28
Adobe 제품군과 AMD 780G 레이드 와 충돌  (5) 2008/05/21
안철수 빛자루 오픈베타 중..  (0) 2007/04/12
TAG AIR, 안드로이드, 플래시, 플렉스
Trackback (0) : Comment (0)

TRACKBACK ADDRESS : http://drumcap.com/trackback/74 관련글 쓰기

댓글을 달아 주세요

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

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


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/Flex' 카테고리의 다른 글

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 3부  (2) 2010/02/19
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부  (0) 2010/02/19
Flex Preloader 에서 마우스 이벤트 런타임 에러 버그 해결방법  (0) 2010/02/12
[Flex Component] 스타일이 자유로운 풍선 ToolTip  (0) 2010/02/10
플래시의 성능 개선을 위한 버그신고 합시다  (0) 2010/02/09
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부  (8) 2010/01/30
TAG 버그, 프리로더, 플렉스
Trackback (0) : Comment (0)

TRACKBACK ADDRESS : http://drumcap.com/trackback/73 관련글 쓰기

댓글을 달아 주세요

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

프로그래밍/Flash/Flex | 2010/02/10 13:23 | Posted by 드럼캡

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


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

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


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

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


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

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


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


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



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

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

'프로그래밍 > Flash/Flex' 카테고리의 다른 글

Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 2부  (0) 2010/02/19
Flex Preloader 에서 마우스 이벤트 런타임 에러 버그 해결방법  (0) 2010/02/12
[Flex Component] 스타일이 자유로운 풍선 ToolTip  (0) 2010/02/10
플래시의 성능 개선을 위한 버그신고 합시다  (0) 2010/02/09
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부  (8) 2010/01/30
플렉스 모듈기반 개발시 빌더에서의 모듈 추가및 삭제의 편법  (0) 2009/12/23
TAG 스타일, 컴포넌트, 툴팁, 플렉스
Trackback (0) : Comment (0)

TRACKBACK ADDRESS : http://drumcap.com/trackback/71 관련글 쓰기

댓글을 달아 주세요

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

프로그래밍/Flash/Flex | 2010/01/30 12:13 | Posted by 드럼캡
서문
지금까지 플렉스는 개발자의 산물이었다고 해도 과언이 아니었다. 아직까지 현존하는 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로 쉽게 작업이 가능하겠다 생각하여 제작에 착수하였다. 디자인 샘플 자체가 플렉스에 익숙하지 않은 디자이너가 한 디자인이라 웹페이지의 느낌이 강하지만(예를들어 버튼의 디자인) 이 글을 보는 분들은 어플리케이션의 모습을 갖추도록 디자인 하면 더욱 좋을 것이다.
백문이 불여일견! 앞으로 진행할 샘플의 최종 완성본을 살펴보자. 현재 종료된 이벤트이며 글쓰기 해도 저장이 되지 않는다는 것을 참고할것! (종교적 색채가 강한 사이트의 샘플인데 필자가 제작한 마땅한 샘플이 이것밖에 없으니 양해를 구한다)
포토샵 샘플 다운로드 받기 - (포토샵 소스를 제공해준 사월이야기 님께 감사한다)
Writeform.psd


진행방식

준비하기
플래시 카탈리스트 다운로드하여 설치한다 (현재 Beta2)

따라하기
카탈리스트를 먼저 시작하면 다음과 같은 안내창이 열린다

여기에서 아래의 PSD파일을 여는 버튼을 클릭한다

열린 창에서 다운로드 받은 샘플파일을 연다

최종으로 파일을 열기 전에 분석 먼저한다.

분석이 끝나면 파일의 정보가 보이고 여기에서는 기본정보만 쓸 것이므로 바로 OK버튼을 클릭한다. 만약 자세한 설정을 하고 싶으면 Advanced를 클릭해서 불러오고 싶은 레이어를 선택해준다.

먼저 포토샵 레이어 구조를 확인한다. 
레이어는 총 4개의 그룹으로 되어있고, 각 레이어 그룹안에는 그래픽 요소들이 존재한다. 

화면에 해당 레이어들이 선택되어 나타난다.

게시글을 설정 했던 모습이 사이즈가 들어가 있지 않은 상태로 나왔다. 아래와 같은 경우 beta1때에는 사이즈 문제가 없었지만 현재의 beta2 에서는 문제가 있는 것으로 나온다. 

아래와 같이 텍스트를 확대하여 적절히 사이즈를 조절 해준다.

이제 Ctrl-Enter나 Command-Enter 를 클릭하여 미리보기로 확인해 본다.
제대로 화면이 나오나 확인했으면 저장한다.

이제 다음장에서는 리스트와 뷰 페이지 구성해 보도록 하겠다.
다음장에서 계속..

'프로그래밍 > Flash/Flex' 카테고리의 다른 글

[Flex Component] 스타일이 자유로운 풍선 ToolTip  (0) 2010/02/10
플래시의 성능 개선을 위한 버그신고 합시다  (0) 2010/02/09
Flash Catalyst로 디자이너 관점에서 플렉스 App 제작하기 1부  (8) 2010/01/30
플렉스 모듈기반 개발시 빌더에서의 모듈 추가및 삭제의 편법  (0) 2009/12/23
플래시CS5 은근슬쩍 오픈베타 공개 무한연기  (2) 2009/12/18
FABridge 와 SWFObject 동시 사용할 때 Firefox에서 실행되지 않는 문제해결  (0) 2009/12/16
TAG Catalyst, flex, Flex4, 디자이너, 카탈리스트, 플렉스, 플렉스4
Trackback (0) : Comment (8)

TRACKBACK ADDRESS : http://drumcap.com/trackback/60 관련글 쓰기

댓글을 달아 주세요

  1. 지돌스타 2010/02/01 01:35  댓글주소  수정/삭제  댓글쓰기

    멋진 자료 입니다. ^^

  2. BlogIcon 드럼캡 2010/02/02 11:28  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 열심히 2,3부 만들어서 완료해야죠.

  3. early 2010/04/14 15:28  댓글주소  수정/삭제  댓글쓰기

    멋진 강의 입니다 카탈리스트 활용법 배우려고 어도비티비, 랩 열심히 돌아다녔었는데, 이런 친절한 고수분이 계셨네요..유용하게 활용하겠습니다 정말 감사합니다 ^^

    • BlogIcon 드럼캡 2010/04/14 17:10  댓글주소  수정/삭제

      뭘요~ 제 주변에 디자이너가 많아서 지인들 도와주려고 하다가 만든 자료입니다. 어렵게 생각하지 마시고 플래시같이 접근하시면 좋을것 같습니다.

  4. 슈퍼시니 2010/05/07 18:22  댓글주소  수정/삭제  댓글쓰기

    감사합니다.
    좀더 심도 있는 강의도 부탁드립니다.^^

    • BlogIcon 드럼캡 2010/05/10 20:14  댓글주소  수정/삭제

      네.. 다른 방향으로의 카탈리스트 강의도 생각중입니다. 허나 프로젝트가 진행되야 작업을 할 수 있겠죠 ^^

  5. 신라 2010/05/28 13:49  댓글주소  수정/삭제  댓글쓰기

    카탈리스트가 디자이너를 위한 애플리케이션이란 소릴 듣고 반겨하던 참인데 역시 프로그래밍 기초가 안되어있으면 체계잡기도 버겁군요.. 공부를 많이 해야할것 같네요
    좋은 강좌 감사합니다.

    • BlogIcon 드럼캡 2010/05/31 12:59  댓글주소  수정/삭제

      디자이너 관점에선 프로그래밍 기초 스킬보다는 컴포넌트에 대한 이해와 속성, 스타일들에 대한 공부가 필요하겠죠. 앞으로 도움이 되실만한 카탈리스트 강좌를 준비중입니다. 그러기 위해선 실무 위주로 해야겠기에 프로젝트가 끝나고 좋은 예제로 글을 올릴 예정입니다. ^^

Flex 빌더에서 Help(F1) API 한글화 하기

프로그래밍/Flash/Flex | 2009/05/27 20:24 | Posted by 드럼캡

Eclipse 기반 플렉스 Help


플렉스 코딩을 하다보면 Help를 참 많이 보게된다.
특히 API를 찾아보게 되는 경우가 허다한데, 이때 우리는 대체로 브라우저를 활용하게된다.
그렇지만, Eclipse 기본 Dynamic Help(F1) 기능을 활용하면 정말 편하다.
혹시 Dynamic Help를 모르시는 분을위해 첨언을 하면, 코딩을 하다가 잘 모르는 API가 출현했다하면 해당 API에 마우스를 올리고, F1을 누른다. 그러면, Dynamic Help 창이 뜨는데 해당 API에 관련된 도움말, API, 예제 등이 자동검색되어 나타난다.
여기서 원하는 내용을 클릭해서 참고해서 보면 된다.
하지만 모든 내용이 영어라는 압박이 있는데, 매번 불편하게 사용하다가 Adobe AS3 레퍼런스와, Flexdocs.kr 의 레퍼런스를 조합해서 API만이라도 한글화 하여 Eclipse Help 파일을 만들게 되었다.

사용방법은 ..

  1. 먼저 다음 파일들을 다운받는다.
    han-doc.alz
    han-doc.a00
    han-doc.a01
    han-doc.a02
    han-doc.a03

  2. 첨부되어있는 파일의 압축을 풀면 doc.zip 파일이 나온다.
  3. 이 파일을 그대로
    c:\Program Files\Adobe\Flex Builder 3\eclipse\plugins\com.adobe.flexbuilder.help_3.0.214193\
    또는
    c:\Program Files\Adobe\Flex Builder 3 Plug-in\eclipse\plugins\com.adobe.flexbuilder.help_3.0.214193\
    에 이동시킨다.
  4. 위의 경로중 설치된 플렉스 빌더 버전에 따라 뒤의 버전번호가 약간씩 다를수 있다.
  5. 이제 빌더를 켜고 MXML 이나 ActionScript 파일을 작성하면서 원하는 클래스에 커서를 대고 F1 키를 누르면 Help가 나온다.
  6. 여기서 해당 API를 클릭하면 한글이 뜨는것을 확인한다.
혹시 Flexdocs.kr 의 한글번역에 관한 저작권이 문제가 되면 자삭하겠습니다.

'프로그래밍 > Flash/Flex' 카테고리의 다른 글

Flexbuilder3 라이센스키 변경하기  (0) 2009/08/17
무료 Flex Builder 3 라이센스 받기 Season2 (미취업자대상)  (0) 2009/07/11
Flex 빌더에서 Help(F1) API 한글화 하기  (2) 2009/05/27
ActionScript, Flex 의 Dynamic Class 의 전체 리스트  (0) 2009/04/22
플렉스 컴포넌트 라이프사이클 참고자료 (동영상포함)  (1) 2008/12/28
플래시 플레이어 문제해결 - 2.윈도우 레지스트리, 퍼미션 오류  (0) 2008/12/12
TAG flex, flex builder, 도움말, 플렉스, 플렉스도움말, 플렉스빌더
Trackback (0) : Comment (2)

TRACKBACK ADDRESS : http://drumcap.com/trackback/57 관련글 쓰기

댓글을 달아 주세요