연습장2008.07.11 17:02
DisplacementMapFilter 필터를 사용한 돋보기 효과




http://cafe.naver.com/flexcomponent/10973
질문이 있어 살펴보던 중 샘플로 만들어보았다.


참고 자료:

1.
http://livedocs.adobe.com/flex/3/html/help.html?content=Filtering_Visual_Objects_18.html

2.
http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/filters/DisplacementMapFilter.html#includeExamplesSummary



'연습장' 카테고리의 다른 글

Flex Pinat  (4) 2008.07.29
Flex 미니게임 2탄 완성!!  (0) 2008.07.14
Magnifying Glass  (2) 2008.07.11
Flex Mini Game - 제작중  (4) 2008.07.11
AIR 번역기입니다. (AIR Translator)  (4) 2008.06.27
닥터후 퍼즐 - 시즌3  (3) 2007.07.04
Posted by 시난
연습장2008.07.11 01:09


오늘 회사에 아이팟 터치 가진 친구가 갖고 있던 게임에
착안하여 개발하고 싶어서
4시간 정도 개발한 상태다. -.-;;

일단 ;;; 여기까지
자야해 ㅠㅠ

'연습장' 카테고리의 다른 글

Flex 미니게임 2탄 완성!!  (0) 2008.07.14
Magnifying Glass  (2) 2008.07.11
Flex Mini Game - 제작중  (4) 2008.07.11
AIR 번역기입니다. (AIR Translator)  (4) 2008.06.27
닥터후 퍼즐 - 시즌3  (3) 2007.07.04
퍼즐  (0) 2007.07.04
Posted by 시난
TAG flex, MiniGame
프로그래밍/Flex/AIR2008.07.08 10:58
http://www.adobe.com/devnet/flex/articles/yahoomaps_collaboration.html

Flex와 BalzeDS를 이용한 야후맵 협업 프로그램

Yahoo! Maps collaboration using Flex and BlazeDS


Christophe Coenraets

Christophe Coenraets

Adobe

Comments (1)
Created:
28 April 2008
User Level:
All
Products:
Flex
LiveCycle

Two years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. It also added nice collaboration features such as videoconferencing and a collaborative whiteboard overlaid on top of the map. In addition to demonstrating the real-time messaging capabilities of Flex, this application also illustrated Flex/Ajax integration using External Interface.

Two recent events prompted me to revisit this sample:

  1. Yahoo! recently released an ActionScript 3 API for Yahoo! Maps.
  2. Adobe recently released the Remoting and Messaging features of LiveCycle Data Services as an Open Source project named BlazeDS.

So, I updated the sample to work with the Yahoo! Maps ActionScript API and BlazeDS (or LiveCycle Data Services). No need to communicate between Ajax and Flex in this version since the rendering of the map is entirely done within the Flex application.

Yahoo Maps collaboration

Figure 1. Yahoo! Maps collaboration

Testing the hosted version

Disclaimer: I'm currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don't know much about the characteristics of my server, but I'm probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I'm investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in "Local installation instructions"). The hosted version tries to connect using RTMP by default (available only as part of LiveCycle Data Services) and falls back to "long AMF polling" or regular AMF polling if the RTMP connection fails.

  1. Access http://coenraets.org/maprooms/maprooms.html on two different machines or in two browser windows on the same machine.
  2. Make sure you log on with two different user names and the same room name.
  3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
  4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
  5. The zoom level and the map type are also synchronized between users.
  6. Click the Map Sharing button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

Note: you can right-click the application and select View Source or click here to see the source code of the application.

Local installation instructions:

  1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled).
  2. Open {blazeds-install-dir}/tomcat/webapps/samples/WEB-INF/flex/services-config.xml and add an AMF long polling channel defined as follows:

    <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
    <properties>
    <polling-enabled>true</polling-enabled>
    <polling-interval-seconds>5</polling-interval-seconds>
    <wait-interval-millis>60000</wait-interval-millis>
    <client-wait-interval-millis>1</client-wait-interval-millis>
    <max-waiting-poll-requests>200</max-waiting-poll-requests>
    </properties>
    </channel-definition>
  3. Open WEB-INF/messaging-config.xml and add the following destination:

    <destination id="flexmaps">
    <properties>
    <server>
    <allow-subtopics>true</allow-subtopics>
    <subtopic-separator>.</subtopic-separator>
    </server>
    </properties>
    <channels>
    <channel ref="my-longpolling-amf"/>
    <channel ref="my-polling-amf"/>
    </channels>
    </destination>
  4. (Re)start the BlazeDS turnkey server.
  5. Download the source code of the Yahoo! Maps Application.
  6. Create a Flex Builder project for the Flex application (maprooms).

    Make sure you configure your Flex Builder project to work with BlazeDS. To read instructions on how to set up a Flex Builder project that works with BlazeDS. Make sure your BlazeDS turnkey server is started, and click http://localhost:8400/samples/fb-project-setup.htm

  7. Download the Yahoo! Maps ActionScript 3 API, and add YahooMap.swc in the libs folder of your project.
  8. Get a Yahoo! API key and assign it to the appid variable in MapArea.mxml.
  9. Compile the application.
  10. Open the Flex application in two browser windows (to simulate two users in different locations) and test the application as described above (in "Testing the hosted version").

Posted by 시난
프로그래밍/Flex/AIR2008.06.25 17:05
지금까지의 환경은
WAS: tomcat
framework: spring + ibatis
데이터: json 형식

으로 구축해서 사용하고 있었습니다.
새로운 프로젝트도 시작하고 하니
blazeDS에 대해서 한 번 해봐야 겠다 하던 참에
바로 들어갔습니다.


일단 설명이 잘 되어있는 것들을 이것저것 링크를 모았습니다.

지돌스타님 소개글:
http://blog.jidolstar.com/342

어도비 소개글:
http://www.adobe.com/devnet/livecycle/articles/blazeds_spring.html

모카빵님의 이클립스 blazeDS 프로젝트 구축하기:
http://blog.naver.com/zoom7810/50032372125

머드 초보님의 spring+ibatis+blazeDS 구축:
http://mudchobo.tomeii.com/tt/tag/blazeds?page=2#entry_236

그리고 작업에 들어갔습니다.



1. blazeDS 다운로드
http://opensource.adobe.com/wiki/display/blazeds/Release+Builds에서
turnkey를 다운로드 받습니다.
tomcat이 포함된 blazeDS이고, sample, database 등도 포함되어 있어서 간단히 실행할 수 있습니다.

2. tomcat 실행
다운로드 후 압축을 풀고 나면
blazeds_turnkey_3-0-0-544\tomcat\bin 밑의
startup.bat 이나 startup.sh 을 실행하여 tomcat을 구동시킵니다.

3. url 접속
http://localhost:8400/ 접속하면 3개 링크가 보일텐데
http://localhost:8400/samples 을 클릭합니다.

그 다음
30 Minute Test Drive 를 수행하여 기본을 익히도록 합니다. [필수추천]
RemoteObject만 사용할테니 그것만 보셔도 좋습니다.

4. spring + ibatis + springfactory 구축 및 적용
모카빵님의 이클립스에서 blazeDS 프로젝트 생성하기: http://blog.naver.com/zoom7810/50032372125
이것을 토대로 이클립스에서 쉽게 구축할 수 있습니다.

머드초보님의 구축 설명: http://mudchobo.tomeii.com/tt/tag/blazeds?page=2#entry_236
머드초보님의 좋은 글이 있으니 스프링 초보라도 그렇게 어렵지 않게 할 수 있을 겁니다.

두 글을 참고로 구축을 완료하면
작업이 끝납니다.


[발생할 수 있는 문제들]
1. AIR에서 사용하기
flex로 개발하면 채널 문제는 없겠지만
AIR 등으로 개발하면
mxml 이나 as 등에서 채널을 지정해서 RemoteObject를 사용해야 합니다.

http://mudchobo.tomeii.com/tt/215
역시 머드초보님께서 잘 정리하셨으므로 참고합니다 ^^;


스프링, ibatis 환경에 익숙하신 분들이라면
2~3시간 정도면 blazeDS를 재밌게 사용하고 계시는 자신을 발견하셨을 겁니다.

모두모두 blazeDS의 세계로 발을 살짝 담그어 보시길 바랍니다. ^^


Posted by 시난
프로그래밍/Flex/AIR2008.06.23 11:52
사용자 삽입 이미지
예전 혀니님의 캔버스 가지고 놀기(http://cafe.naver.com/flexcomponent/10322)
가 있었죠.

소스를 보시면 easing 시리즈를 썼던 것을 보셨을 겁니다.
어떤 종류인지 궁금했었는데..
오늘 우연히 찾게 되었네요.
치트 시트를 보시기 바랍니다. ^^

치트 시트 : http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
구글 코드 : http://code.google.com/p/tweener/

참고:
mx.effects.easing:
http://livedocs.adobe.com/flex/3/langref/mx/effects/easing/package-detail.html
Posted by 시난
리뷰/웹사이트2008.06.21 15:00

Brainwave : http://muchosmedia.com/demos/brainwave/index.cfm

사용자 삽입 이미지


예전 PureMVC 프레임워크를 살펴보던 중
찾았던 것이네요.

Brainwave is an online collaboration application. It provides tools like shared multi-page whiteboard, audio, chat and an asset library with file uploading capability. You can drag assets onto the whiteboard and perform standard transformations like scale, rotate, flip, etc. It sports an extensive set of drawing tools and full undo/redo capability for all actions. One really nice feature is the snapshot button which creates an image of the current whiteboard area and opens up a new browser tab with the image which you can then save to your local machine. It also has a slick administration interface, also built on PureMVC

플렉스에 PureMVC로 만들어진 사이트엔데 장점은
협업기능이죠.
왼쪽 상단의 페널은 오디오 설정을 할 수 있는 것을 보아 플래시의 마이크 기능을 사용할 수 있습니다.
웹캠도 가능할텐데.. 여기선 사용되지 않은 것을 볼 수 있고요..

왼쪽 가운데 상단은 Assets로써 화이트 보드위에 그려진 오브젝트들의 목록입니다.
구글 마이맵에서도 왼쪽에 위치하고 있고요..
하단은 사용자 목록이고,
왼쪽 제일 아래는 간단한 채팅을 할 수 있게 되어있습니다.

우측 위에는 간단한 커맨드 바들이 위치하고 있고
오른쪽에는 화이트보드로 여러가지 그림들을 그려넣을 수 있습니다.
페이지 표시로 여러가지 그림들을 공유할 수 있고요..

구글맵이나 플리커등과도 연계해서
사용하면 조금 더 괜찮을 것 같네요! ^^


'리뷰 > 웹사이트' 카테고리의 다른 글

XING - 전세계 비즈니스맨 SNS  (0) 2008.08.08
WISIA - The Wisdom of crowds  (1) 2008.08.08
iTunes  (2) 2008.07.22
Lively by Google - test  (0) 2008.07.14
[flex] Brainwave를 소개합니다.  (0) 2008.06.21
[flash/papervision3d] Tag Galaxy를 소개합니다.  (2) 2008.06.21
Posted by 시난
TAG flex, pureMVC
프로그래밍/Flex/AIR2008.06.18 17:31
지돌스타님이 BlazeDS에 관련된 글을 하나 포스팅하셨다.

http://blog.jidolstar.com/342


아래는 윗글 중 쓸만한 링크들이다.


읽을만한 자료

BlazeDS의 대한 기본개념 : http://sewony.tistory.com/category/FDS
BlazeDS 설치 : http://blog.naver.com/zoom7810/50026707200
BlazeDS의 Eclipse&Flex Builder 개발환경 구축 : http://blog.naver.com/zoom7810/50032372125
BlazeDS 개발 가이드(영문) : http://livedocs.adobe.com/blazeds/1/blazeds_devguide/
머드초보님의 BlazeDS에 관련글 : http://mudchobo.tomeii.com/tt/search/BlazeDS

시간되는대로 BlazeDS를 준비해보자. ^^;

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

[팁] Tweener 치트 시트 (easing effect)  (1) 2008.06.23
Papervision3D 학습 일지 (1일차)  (3) 2008.06.22
Flex와 BlazeDS의 만남  (0) 2008.06.18
Simple CronExpression Wizard  (1) 2008.06.18
최근 개발하고 싶은 것들  (0) 2008.06.16
AIR 자동 업데이트 설정하기  (0) 2008.04.06
Posted by 시난
프로그래밍/Flex/AIR2008.06.18 10:30

리눅스를 사용하시는 분이라면

crontab 에 대해 아실겁니다..


사실 Java쪽에서 스케쥴링 하면 유명한 것이

quartz인데

그 중 CronTrigger를 사용한 것이 유명하죠.


cronExpression 을 만드는 것을 flex로 만들어보았습니다.

아주 단순하게 만들어서.. 세부적인 것은 수정해서 쓰세용.. ^^


사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지



demo : http://lostsin.hosting.paran.com/flex/cronex/

source: http://lostsin.hosting.paran.com/flex/cronex/srcview/index.html



덧글: 매주 선택 시 요일 모두 해제하면.. 버그 있습니다 ^^;



Posted by 시난
프로그래밍/Flex/AIR2008.06.16 09:16

1. AIR post it

옛날.. 프로토타입으로 잠깐 만들었던 post memo 라는 것이 있었는데

좀 더 성의껏 AIR 버전으로 만들고 싶네요.

AIR의 특성을 살려서 on/offline 구분이 되고

sqllite를 써서 자체 오프라인 DB도 구축하고..

웹하드 개념도 넣고.. -_-;


2. Flip count

야후 위젯 쪽에 보면 Filp Count라는

숫자가 한장 한장 넘겨지는 디지털 시계(D-Day 카운터)가 있는데..

AIR로 만들어 보고 싶네요.


3. 자리배치 프로그램

아내가 선생님이라 가끔 자리 배치 때문에 고민을 많이 하던데

MFC 버전으로 20042005년에 만든 것이 있는데

AIR로 변경하고 싶네요.. ^^;


4. 통합 메신저

MSN이니 네이트온이니 AOL이니

우리는 너무 많은 메신저들을 PC에 깔아서 쓰고 있지요..

OpenAPI 가 지원이 되는 메신저들도 하나 둘 씩 나오고 있고

AIR 버전으로 함 만들고 싶네요.


5. 캘린터 (온/오프라인)

아웃룩이나 구글 캘린더나.. 약간 쓰기에

답답한 느낌이 없지 않아 있습니다.

오픈마루의 것도 그렇고

OpenAPI가 많이 지원이 되는데 커스터마이징을 하면 어떨지!


6. AIR 스프링노트

ajax 기반의 스프링노트, 가끔 쓰면서 뭔가

퍼포먼스 적으로 부족함을 느끼는데

페이지 넘기는 플렉스 기술을 써서 정말 노트처럼 만들면

재밌겠네요.


7. 3D 블로그

papervision3D를 좀 도입해서

가속은 아직 못 받지만..

정말 나의 방 처럼, 또는 영화 큐브스럽게 동적으로

공간이 확장된다던가.. 참신한 블로그이면서도

보편적인 블로그를 만들어보고 싶군요..


8. 지도 검색

네이버 지도 역시 포스트 맵..이라는 기능으로

공유 지도를 만들어가고 있지만

그점에서는 싸이월드 맵이 젤 좋은 것 같네요.

오픈API를 사용하여 구글맵 처럼 한 번 만들어 보고 싶네요.

위키맵스.. 비슷하게?


9. Robocode

Java쪽에 알고리즘 대회가 가끔 있죠.. Robocode도 그중 하나인데

애플릿에서 돌아가는 탱크의 알고리즘을 개발자가 작성하고

임포트 시켜서 경쟁하는 것이죠.

Flex로도 만들면 재밌겠다는..


10. 후원자 지원 사이트

예전 6.25 때 힘들었던 우리 나라를 지원했던 나라가 많이 있죠..

웹2.0에도 그러한 것이 많이 있는데..

될성 싶은 사람들을 저금리로 지원해주거나 무상으로 지원해주는 거죠.

1:1로.. 서로 편지도 주고 받고, 힘들게 사는 사람들에게

한달에 얼마씩 지원해주면 그 사람의 인생이 바뀔 수 있죠..


여러 사람의 기금을 모으고

그 기금을 공동으로 관리하고

후원할 사람을 투표를 거쳐 선정하고

후원 후보 명단에 올리고.. 하는 방식이면 어떨지..

Posted by 시난
TAG flex, 개발
프로그래밍/Flex/AIR2008.04.04 18:06

http://livedocs.adobe.com/flex/3/html/help.html?content=validators_5.html


<!-- Use blue for the error message. -->
    <mx:Style>
        .errorTip { font-size: 15; }
    </mx:Style>

식으로 사용하시면 깔끔하게 됩니다.


전 ErrorMsg 일 줄 알았는데..

내부적으로 컴포넌트의 styleName="errorTip"으로 되어있는 듯 싶습니다.


처리할 필요가 없어서 무시하다가..

찾아보다 나와서 공유합니다 ^^;


Posted by 시난