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]

“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]

Flash Builder 4 Beta 2 Serial Number 받기

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

아래 페이지를 통해 플래시 빌더 4 베타 2의 시리얼을 받을 수 있습니다.

Adobe® Flash™ Builder 4 Beta 2 Extension Request

https://freeriatools.adobe.com/flashbuilder4beta/

 

이름, Email 주소, Flex Builder 3 시리얼 번호를 입력해서 "Request Serial Number"를 클릭하면

메일로 플래시 빌더 4 베타 2의 시리얼을 받을 수 있습니다.

 

요청하자마자 메일로 바로 시리얼 번호가 담긴 회신이 오네요~

여러분도 유효한 Flex Builder 3 시리얼 번호만 있으면 바로 받을 수 있습니다.

참고로 학생은Flex Builder 3 시리얼 번호를 무료로 받을 수 있습니다.

FLEX 무료 개발환경 구축 : http://ehxm.tistory.com/9

포스팅을 참고하세요~

¬ COMMENT [0]

ADOBE Flash Builder 4 소개

Posted by EHXM. Posted in " Adobe Flash Platform/Tech Note "2009/11/18 02:35

 

 

ADOBE Flash Builder 4 Beta 2 가 릴리즈 되었어요.

ADOBE Flash Builder 4 Beta 2는 아래 링크에서 다운로드 받을 수 있어요.

[ADOBE Flash Builder 4다운로드 링크]

 

Flash Builder 4

Flash Builder 4는 Flex Builder 3이후에 나온 버전이고요, Eclipse 기반의 개발 툴입니다.

Flex Builder 3의 특징

• 지능적인 코드 힌트
• 인터랙티브한 단계별 디버깅
• 유저 인터페이스 레이아웃
• 모양 및 RIA 작동 방식을 시각적으로 디자인 가능
• Adobe Creative Suite Tool을 통한 디자이너와 개발자의 협업 가능
• 인터랙티브한 디버거
• 메모리 및 성능 프로파일러

Flex 4에서 달라진 점

• 기본 테마 변경
  • 아래와 같이 Halo 컴포넌트가 Spark 컴포넌트로 기본 테마 스킨 변경
  • Spark 테마는 제한된 스타일만 지원해서 모양은 더 심플해지고 그만큼 구동시간은 더 줄어들었네요.
  • 제공되는 스타일 : baseColor, color, focusColor, contentBackgroundColor, symbolColor, selectionColor, rollOverColor

  

• 네임스페이스, 패키지
  • Flex 4 베타를 위한 컴포넌트, 코어, 이펙트, 필터, 레이아웃, 프리미티브, 스킨, 유틸 클래스를 위한 spark.* 패키지 신규 제공
  • 네개의 네임스페이스 제공 : MXML 2006, MXML 2009, Spark, Halo
  • 그래서 추가된 패키지를 새롭게 사용할 수도 있고, 이전의 클래스들도 네임스페이스가 변경이 없기 때문에 그대로 사용할 수 있습니다.

     

• 기본 프로퍼티와 태그 선언
  • 아래와 같이 넌-비주얼 컴포넌트는 <fx:Declarations> 태그 하위에 추가합니다.

  

• 신규 컴포넌트와 컨테이너 추가
• states 문법 변경
• 이펙트 변경사항
• 레이아웃 변경
• 문자열 작업

Flash Builder 4 특징

¬ COMMENT [0]