EHXM

[도:트]'s Dev Log

안드로이드용 영어 어학기 Smart LC

스마트LC 소개 링크:
http://blog.ehxm.net/123

티스토어 링크:
http://bit.ly/awW3XW

[Flex 4] 모서리가 둥근 BitmapImage 컨트롤 만들기

Posted by EHXM. Posted in " Adobe Flash Platform/Tech Note "2010/02/09 15:45

Flex 4 Spark BitmapImage 컨트롤에서 Mask를 설정하면 다음과 같이 모서리가 둥근 컨트롤을 만들 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

      xmlns:s="library://ns.adobe.com/flex/spark" 

      xmlns:mx="library://ns.adobe.com/flex/halo"

      minWidth="1024" minHeight="768"

      width="384" height="328">

 <fx:Declarations>

  <!-- Place non-visual elements (e.g., services, value objects) here -->

 </fx:Declarations>

 <s:BitmapImage id="bmpImg"

       source="@Embed('ehxm.png')"

       horizontalCenter="0" verticalCenter="0">

  <s:mask>

   <s:Border id="bmpMask"

        cornerRadius="20"

        width="{bmpImg.width}" 

        height="{bmpImg.height}" />   

  </s:mask>

 </s:BitmapImage>

</s:Application>

¬ COMMENT [0]

[Flex 4] 스크롤 기능 제어하기 Scroller

Posted by EHXM. Posted in " Adobe Flash Platform/Tech Note "2010/02/03 13:20

Flex 4 Spark에는 Canvas, Box, HBox, VBox, TileList 등의 Container들이 Group Container 하나로 통일되었습니다.

이전에는 여러 Container가 비슷한 기능을 가지고 item을 표현하는 방식만 달랐는데요,

같은 기능은 Group Container로 통일하고 Scroller와 Layout을 따로 설정하도록 해 놓았습니다.

그래서 Group Container 하나로 Layout을 다르게 적용하면 이전의 Canvas, Box, Hbox등과 같은 Container의 구현이 가능하죠.






여기에서는 Group Container의 스크롤 기능을 제어하는 방법을 알아보겠습니다.


위에서 설명한 대로 아래와 같이 아무 설정없이 Group 크기보다 더 큰 Element를 추가하면

아래 예제1과 같이 Group크기는 자식 element에 맞춰 자동으로 커지게 됩니다.


예제1 소스

예제1 결과


여기에서 Group의 clipAndEnableScrolling 속성을 true로 설정하면 Group의 크기에 맞게 자식 Content를 보여줄 수 있습니다.
예제2 소스

예제2 결과

Group Container를 Scroller에 아래 예제3과 같이 포함시키면 스크롤이 표시됩니다.
에제3 소스

예제3 결과

여기에서 보여지는 부분을 Viewport라고 합니다.

그래서 여기에서는 Viewport의 Width Height는 Group의 크기이고,
Viewport.ContentWidth ContentHeight는 포함시킨 Rect의 크기인 것을 알 수 있습니다.
그리고 이 Viewport의 위치를 horizontalScrollPosition, verticalScrollPosition으로 나타냅니다.
그러므로 마우스로 스크롤해서 내려가면 ContentHeight 범위 내에서 verticalScrollPosition이 증가하게 됩니다.

위의 예에서도 내용을 클릭하고 스크롤하면 스크롤바가 이동되는데요, default 이동 값은 아주 작은 것을 알 수 있습니다.
Group에 마우스 휠 처리 이벤트를 등록하고 event.preventDefault를 통해 기본적으로 주어지는 처리되는 이벤트를 없애고
event.delta를 이용해서 원하는 만큼 스크롤 이동값을 정할 수 있습니다.
예제4 소스

예제4 결과

위를 클릭하고 휠을 내려보세요. 이제 스크롤 하면 원하는 만큼 잘 내려가네요.

제가 처음에 스크롤 바없이 어떤 이벤트에 의해 안의 내용들을 이동시키고 싶어서 이런 기능을 검색하게 되었는데요,
스크롤바를 숨기고 싶으면 Scroller의 horizontalScrollPolicy="off" verticalScrollPolicy="off" 를 통해 가능합니다.
그리고 나서 마우스 휠 이벤트를 prevent 해주고 해당하는 이벤트에서 viewport position만 이동시켜 주면 됩니다.

아래는 스크롤 바만 제거한 예제입니다. 스크롤바가 없어도 마우스 휠 이벤트는 그대로 적용되는 것을 알 수 있습니다.
예제5 소스

예제5 결과







Flash에서 스크롤 처리를할때 웹 브라우저의 스크롤을 막는 방법은 어떻게 하는 걸까요?
혹시 아시는 분은 댓글을 달아주시면 감사하겠습니다.

¬ COMMENT [0]

Adobe AIR 2 beta 2 릴리즈

Posted by EHXM. Posted in " Adobe Flash Platform/News "2010/02/03 11:41

2010년 2월 2일, Adobe AIR 2 beta 2가 릴리즈 되었습니다.

AIR 2에 포함된 새로운 내용입니다.

• Enhanced support for interacting with printers (beta 2)
• Support for TLS/SSL socket communication (beta 2)
• Support for the detection of mass storage devices.
• Advanced networking capabilities like secure sockets,
  UDP support, and the ability to listen on sockets.
• Support for native code integration.
• The ability to open a file with its default application.
• Multi-touch and gesture support.
• New APIs for access to raw microphone data.
• Webkit update with HTML5/CSS3 support.
• Global error handling.
• Improved cross-platform printing
• Improved security and support for enterprise and government standards

 

새로운 기능에 대한 MAX2009의 키노트 영상입니다.

KEVIN LYNCH DEMOS ADOBE AIR 2 FEATURES

 

AIR 2로 개발을 하면서 특징을 살펴보는 영상입니다.

WHAT'S COMING IN ADOBE AIR 2

¬ COMMENT [0]

[Flex 4] 아이콘 리스트 컴포넌트 만들기

Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2010/01/30 14:46

Flex4에서 Spark List Component에 Custom ItemRenderer를 적용하여 리스트에 출력되는 아이템의 모양을 색다르게 만들어 보겠습니다.
Custom ItemRenderer를 구현해 MXML로 원하는 모양만 만들어 주면 끝나는 간단한 예제 입니다.



아이템 렌더러의 소스코드 CustomListItemRenderer.mxml

예제에서 사용한 이미지 파일 src/images


메인 소스

dataProvider 부분은 로컬의 xml파일이나 HTTPService를 이용해 OpenAPI 등을 사용할 수 있습니다.

¬ COMMENT [0]

“Content Assist” did not complete normally 해결 방법

Posted by EHXM. Posted in " Adobe Flash Platform/Tech Note "2010/01/16 17:46

“Content Assist” did not complete normally. Please see the log for more information. java.lang.NullPointerException

Flash Builder Beta 2를 사용하다 보면 content assistance 기능이 위와 같은 메시지를 내면서 에러가 나는 경우가 생기는데,

아래와 같은 방법으로 간단히 해결이 가능하다.

Flash Builder 를 종료한 후, 자신의 윈도우 계정 폴더(내문서 상위 폴더)에 보면 Adobe Flash Builder Beta 2라는 폴더가 있는데,
 
해당 폴더의 .metadata\.plugins\ 폴더안에있는 com.adobe.flexbuilder.codemodel 폴더를 지워주면 된다.

Windows 7 기준
C:\Users\사용자계정\Adobe Flash Builder Beta 2\.metadata\.plugins\com.adobe.flexbuilder.codemodel

¬ COMMENT [0]