[Flex] 이미지 에디터에 쓰일 말풍선 컴포넌트를 만들어보다. -지돌스타 블로그-

[Flex] 이미지 에디터에 쓰일 말풍선 컴포넌트를 만들어보다.

2007/10/06 02:48

11 Comments

[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

이미지 에디터에 쓰이는 말풍선을 만들어 보았다.
기본적으로 UIComponent과 UITextField를 사용해서 만들었다.
기본 Skin은 ProgrammaticSkin을 이용했고... style을 이용해 말풍선이미지로 스킨을 입힐 수도 있다.
말풍선을 선택하면 다른 선택시 focus가 바뀌어야 하므로 static형식으로 Seletor클래스를 만들었다.
Selector클래스는 말풍선뿐 아니라 이미지 에디터에 올라오는 아이콘과 같은 것에도 이용할 수 있을 것이다.
Selector를 이용해 크기 조절 및 이동이 가능하다.
선택하면 z-index가 최상위가 되게 했다.

글자입력이 느리고... 조금 가다듬을 필요가 있지만 실용성 있다고 생각된다.

한번 사용해보자. ^^;

아래와 같이 사용하면 된다.

예제 (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:textBalloon="com.jidolstar.components.textBalloon.*"
layout="absolute">

<mx:Style>
.tb1Style
{
frameSkin : Embed(source="/com/jidolstar/components/textBalloon/skins/Balloon01.png");
paddingApplyPercent:true;
paddingLeft: 15;
paddingRight: 15;
paddingTop: 10;
paddingBottom : 40;
}
.tb2Style
{
frameSkin : Embed(source="/com/jidolstar/components/textBalloon/skins/Balloon03.png");
paddingApplyPercent:true;
paddingLeft: 20;
paddingRight: 20;
paddingTop: 35;
paddingBottom : 35;
}
</mx:Style>

<textBalloon:TextBalloon id="tb"
x="10" y="10" width="150" height="130" wordWrap="true" maxChars="300"
fontSize="15" fontStyle="normal" fontWeight="bold" color="#000000"
textAlign="center" textDecoration="none" fontFamily="굴림"
borderThickness="1" borderColor="#cccccc" borderAlpha="1"
backgroundAlpha="0.5" backgroundColor="#ccddee" text="지돌스타입니다."/>
<textBalloon:TextBalloon styleName="tb1Style" x="60" y="239" width="100" height="100"/>
<textBalloon:TextBalloon styleName="tb2Style" x="230" y="239" width="100" height="100"/>

</mx:Application>

유용한 컴포넌트를 만드는 것은 역시 쉽지 않다. ㅡㅜ;

글쓴이 : 지돌스타(http://blog.jidolstar.com/235)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Adobe Flash Platform' 카테고리의 다른 글

최고의 무료 클립아트 다운로드 사이트 모음 : Best Free Vector Clipart Download Site (0)	2007/10/08
Flex 3 새로 추가된 StyleManager.selectors 속성 소개 (0)	2007/10/08
[Flex] 이미지 에디터에 쓰일 말풍선 컴포넌트를 만들어보다. (11)	2007/10/06
새로운 Flash Player 10 신기능 공개 (1)	2007/10/03
[Flex] metadata PercentProxy 이해하기 (5)	2007/09/28
[Flex] EventListener 는 되도록 적게 만들자. (14)	2007/09/27

Adobe Flash Platform flex, 말풍선, 이미지 에디터

Trackback 주소: http://blog.jidolstar.com/trackback/235

2007/10/07 01:26

Reply | Edit

비밀댓글 입니다
지돌스타

2007/10/08 20:03

Reply | Edit

실제로 웹에서 구동할것이고요.
java 또는 php가 될 가능성이 높습니다.
2007/10/08 11:41

Reply | Edit

비밀댓글 입니다
지돌스타

2007/10/08 14:19

Reply | Edit

이것을 구현하는데 Graphic은 별로 들어가지 않습니다.
아주 기본만 알면 되는 것이고요.
무엇보다 UIComponent의 Life Cycle을 아는것이 우선이겠습니다.
그리고 Skin을 입히는 방법에 대한것과 Style에 대한 것도 이해가 필요하답니다. 포커스를 이용하는 법도 알아야하고요. selector를 구현하기 위해 static에 대한 활용을 이해할 필요가 있겠습니다.
2007/10/08 19:11

Reply | Edit

비밀댓글 입니다
지돌스타

2007/10/08 20:02

Reply | Edit

이메일를 보내주세요~ ^^
2007/10/08 20:39

Reply | Edit

비밀댓글 입니다
boomup

2007/10/15 18:12

Reply | Edit

이미지위에 Annotating 하는 Flex 프로그램을 작성하고 있습니다.
위의 어플리케이션을 공개하시지는 않으시나요?
많은 도움이 될것 같은데요.
nameisyj@gmail.com
2008/04/25 14:21

Reply | Edit

비밀댓글 입니다
이미지한계

2009/07/24 12:09

Reply | Edit

안녕하세요. 오래된 글이라 보실지 모르겠네요.

궁금한 것이 있는데, 혹시 보시면 답변 부탁드립니다.

플렉스로 처리할 수 있는 이미지 크기의 한계는 어느정도인가요?
예를 들어 보통 디카로 찍은 3-4M 크기의 이미지를 불러와도 무리가 없는지요?
또 그런 이미지를 몇개정도까지 불러오는게 가능한가요?

제가 하려는 작업의 요구사항이 그런 사진 최소 5~6장 정도 불러서 처리를 해야 할 듯 한데,
플렉스가 어느정도 한계가 있는지 궁금해서 문의드립니다.

그럼.
지돌스타

2009/07/24 12:13

Reply | Edit

이미지의 용량은 문제 없지만 사이즈 자체에 한계가 있습니다. Flash Player 9인 경우 2880px까지 지원하고 10부터는 3000px 이상 지원합니다. 이미지 용량은 클라이언트 PC의 성능에 좌우한거겠죠.

9이전버전은 로컬이미지를 다룰 수 없기 때문에 서버에 전송후 다시 받아야만 했습니다. 하지만 10부터는 로컬이미지를 사용자 인터렉션이 있는 조건하에 작업이 가능합니다. 참고하시고요.

제 생각에는 직접 테스트 해보시는 것이 더 좋을 것 같다는 생각이 듭니다.