젠장... Flash Player 10에서 생기는 버그를 발견했습니다.
TextInput에서 enter이벤트에 자신의 TextInput의 초기화하는 코드가 있으면 초기화가 안됩니다 ㅠ 9버전으로 컴파일하면 되는데, 10으로 컴파일하니 안되네요 ㅠ 몇시간 잡아먹었어요 ㅠ 하소연은 여기까지....-_-

우선 Stratus라는 기술은 Flash간에 통신을 가능하게 해주는 기술인 듯합니다.
자세한 내용은 아래에......-_-(영어는 잘 못하니....)
http://labs.adobe.com/technologies/stratus/

Adobe RIA공식사이트에서 오창훈님께서 올리신 기술문서 "플래시 플랫폼으로 만들어 보는 P2P 채팅 애플리케이션"를 보고 휠받아서 한번 만들어봤습니다. 채팅이 가능하다면, 오목게임도 가능할꺼라는 생각에.....-_- 참 쓸데없는거 잘만든다-_-

http://mudchobo.tomeii.com/flexomok/
위 사이트에 접속하면 서버랑 클라이언트를 고를 수 있어요.
닉네임을 입력하세요 한명은 서버를 한명은 클라이언트를 해야해요.

서버측
서버를 클릭하고, 생성되는 ID를 클라이언트에게 알려주세요.
클라이언트측
클라이언트를 클릭하고, 서버측의 ID를 입력해서 접속하세요~

오목판이 나오면 접속 성공~ 같이 오목을 즐기면 돼요-_-
사용자 삽입 이미지
소스는 여기에 있어요.
http://my-svn.assembla.com/svn/omok/
Mate Flex Framework를 사용했고(이걸 사용해야 스피드한 개발이.....-_-), 소스도 개판이라 보시는데에는 매우 힘드실겁니다. 저도 참 만든게 신기하군요-_-

참고자료

플래시 플랫폼으로 만들어 보는 P2P 채팅 애플리케이션(로그인 후 볼 수 있습니다)
http://www.adoberia.co.kr/iwt/board/board.php?tn=pds_tech&id=244&mode=view

플래시 P2P RTMFP에 대해(예제 파일 첨부)
http://lovedev.tistory.com/entry/%ED%94%8C%EB%9E%98%EC%8B%9C-P2P-RTMFP%EC%97%90-%EB%8C%80%ED%95%B4


PS1. 버그가 조낸 많습니다. 한명이 나가도 뭔가 반응이 없습니다-_- 채팅에서 글을 쓰고 엔터를 쳐도 TextInput에서 지워지지 않습니다. 하지만, 그냥 한게임 즐기기에는 충분합니다 -_-b
PS2. 구글에서 Stratus를 치시면.....이미지검색에 여자 프로레슬러 트리쉬 스트레터스가 나옵니다-_-; 그냥 그렇다구요-_-
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 지돌스타 2009.04.07 18:17  댓글주소  수정/삭제  댓글쓰기

    아주 재미있는 예제네요.
    많은 사람들이 이걸보고 혹하겠는데요. FP에서 p2p를 이용한 게임. 좋네요.

    • 머드초보 2009.04.08 21:54  댓글주소  수정/삭제

      AIR를 이용해서 P2P애플리케이션도 쉽게 만들 수 있을 것 같아요.
      계속 발전하는 Flash가 보기좋네요^^(버그수정도 좀 발전해야할텐데-_-)

  2. BlogIcon 하울랩(HAULLAB) 2012.02.04 21:34 신고  댓글주소  수정/삭제  댓글쓰기

    헤헤...

    저도 제 블로그에 강좌 올렸는데요 ㅋㅋㅋ

    플래시 p2p은근히 오래전에 나온 것인데,

    현재 찾아보면 그렇게 강좌라고 할만한건 없는것 같군요..

  3. 2012.11.08 20:57  댓글주소  수정/삭제  댓글쓰기

    멋진데요?
    서버 구현은 소켓을 이용하신건가요? ^^
    일반적인 웹호스팅에서도 구현할수가 있는건지요..

 
이건뭐....프레임워크를 왜 쓴거지-_-;
소스코드만 더 길어졌네.
어쨌든 저의 삽질의 결정체를 공개할랍니다-_-; 나름 열심히 만든거라...ㅠㅠ
보시면 이것저것 신경을 많이 쓴걸(?) 볼 수 있을겁니다-_-;
타이머의 zerofill...-_-;
이걸 분석하면 Mate Flex Framework에서 제공하는 Injector에 대해서 이해하실 수 있을겁니다.

MudchoboPlayer.zip

소스파일입니다.

아래에 INSTALL NOW클릭하시면 설치가 될 겁니다.
설치가 안되신다면 http://www.adobe.com/go/getair/ 여기서 AIR를 다운로드하세요.

Alternative content

Get Adobe Flash player

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 지돌스타 2008.08.20 11:52  댓글주소  수정/삭제  댓글쓰기

    잘만드셨네요.
    잘봤습니다.

    • 머드초보 2008.08.21 08:31  댓글주소  수정/삭제

      앗 안녕하세요!
      mate framework를 연구하고 있다보니 이런걸 만들었네요^^
      방문해주셔서 감사합니다 ^^

  2. BlogIcon 꽃녀 2008.08.22 10:49  댓글주소  수정/삭제  댓글쓰기

    잘만드셨네용~^^
    프레임웍을 사용하셨다니..
    더 대단하십니다.ㅎ
    잘 깔아보았습니다.

    • 머드초보 2008.08.25 08:30  댓글주소  수정/삭제

      아...댓글이 늦었네요 ^^ 주말에 노느라-_-;
      프레임워크를 억지로 쓴거죠 ㅠ
      방문해주셔서 감사해요~ ^^

  3. BlogIcon 라면스프 2008.11.07 17:01  댓글주소  수정/삭제  댓글쓰기

    멋지세요 ^^
    설치해서 사용해 봤는데 좋네요
    소스 담아가서 열공하겠습니다.
    감사합니다.

    • 머드초보 2008.11.10 08:50  댓글주소  수정/삭제

      Mate Framework를 공부하려고 만든거라 ^^
      좀 더 만든다음에 다시 내놓겠습니다 ㅠㅠ

  4. 초보개발자 2009.10.18 18:53  댓글주소  수정/삭제  댓글쓰기

    이거 소스 실행을 이클립스로 할려고 하는데요
    MudchoboPlayer.mxml파일 run시키면 되는거 아닌가요?ㅠㅠ

 
열이아빠님 블로그를 구독하고 있는데요. 플렉스에서 좋은 프레임워크가 없을까 하는 생각에 갑자기 열이아빠님의 블로그에 포스팅한 '10 가지 플렉스 디버깅 도구 및 프레임워크'가 생각이 났습니다.
여기서 나온게 Mate Framework라는 것인데, 발음은 메이트가 아닌 마떼라고 발음하는 것이라고 열이아빠님께서 말씀하셨습니다. 조또마떼! 일본애니메이션보면 디게 많이 나오는데...잠만 기댕겨?라는 뜻인듯?-_-;
Mate Flex Framework 공식홈페이지 http://mate.asfusion.com/
Mate Flex Framework 공식홈페이지에 가보면,
Mate is a tag-based, event-driven Flex framework.
라고 되어있습니다. tag기반에 event driven 플렉스 프레임워크라는 겁니다.
개발 방식도 우선 Service와 Event를 정의한 EventMap, 그리고, View로 나눠져 있습니다. MVC랑 비슷한 것 같은데, View에서 이벤트가 발생하면 이벤트를 정의해놓은 EventMap에서 찾아서 Event를 발생하죠. 이 EventMap에서는 해당 Service를 호출하는 등의 구조로 되어있어요. 제가 설명하는게 맞는지는 모르겠지만, 대충 저런 구조인 듯하네요. '서비스는 WAS없이도 돌아간다라고 생각하고 짜야된다가 현재의 결론입니다'라고 허광남씨가 말했던 것 처럼 여기서도 Service는 다른 것에 영향없이 돌아가야하는 겁니다.
이 Service는 BlazeDS를 이용한 RemoteObject가 될 수 있고, HTTPService를 이용한 서비스가 될 수 있고, WebService가 될 수 있습니다. 물론, Flex에서 만든 어떤 Method가 될 수도 있습니다.

그러면 해당 서비스를 EventMap에 정의를 해놓고, View에서는 Event를 발생시키기만 하면 되는 겁니다.
백날 말로 하는 것보다 코드로 보는게 빠릅니다-_-;

New -> Project -> Flex Project 를 선택!
Project Name은 HelloMate라고 하고, Web application을 선택하고, Application Server는 NONE으로 Finish고고싱!
Mate Flex Framework공식 홈페이지에 가면 downloads를 클릭하면, swc파일이 있는데요. 이것을 libs폴더에 복사합니다.

우선 패키지를 만들어봅시다.
src에 New -> Folder를 선택해서 events, maps, services, views를 만듭니다.
우선 events에 Event클래스를 하나 만들어봅시다.
New -> ActionScript Class선택 후 Name은 HelloEvent로 하고, Superclass는 flash.events.Event를 선택!
events/HelloEvent.as
[code]
package events
{
    import flash.events.Event;

    public class HelloEvent extends Event
    {
        /* Constants */
        public static const SAY:String = "sayHelloEvent";
       
        /* Properties */
        public var name:String;
       
        public function HelloEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}
[/code]
SAY라는 상수를 하나 만들어서 sayHelloEvent라고 합시다. 이 이름을 통해 이벤트를 구분합니다.
Properties는 event를 발생할 때 properties값을 지정해서 EventMap에 정의한 메소드에 파라메터로 넣기 위해서 사용합니다.

이제 service를 만들어봅시다.
New -> ActionScript Class선택 후 name은 HelloService라고 합시다.
services/HelloService.as
[code]
package services
{
    public class HelloService
    {
        public function sayHello(name:String):String
        {
            return "Hello! " + name + ", I'm so sorry but I love dagujitmal";
        }
    }
}
[/code]
단순히 name을 파라메터로 받아서 Hello!를 붙여줘서 리턴해주는 메소드입니다.

이제 view를 만들어봅시다.
New -> File -> MXML Component선택! Filename은 HelloBox로 하고, Based on은 조낸 귀찮으니까 VBox로 하고, 사이즈도 그냥 그대로 갑시다-_-;
views/HelloBox.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:mate="http://mate.asfusion.com/"
    width="400" height="300"
    horizontalAlign="center"
    verticalAlign="middle">
    <mx:Script>
        <![CDATA[
            import events.HelloEvent;
           
            private function sayHello():void
            {
                helloDispatcher.generateEvent();
            }
           
            private function helloResult(result:String):void
            {
                myLabel.text = result;
            }
        ]]>
    </mx:Script>
   
    <!-- Dispatcher -->
    <mate:Dispatcher id="helloDispatcher" generator="{HelloEvent}" type="{HelloEvent.SAY}">
        <mate:ResponseHandler  type="helloResultResponse" response="helloResult(event.helloResult)" />
        <mate:eventProperties>
            <mate:EventProperties name="{input.text}" />
        </mate:eventProperties>
    </mate:Dispatcher>
   
    <mx:TextInput id="input" enter="sayHello();"/>
    <mx:Button id="button" label="hello" click="sayHello();"/>
    <mx:Label id="myLabel" text="이름을 입력하세요" width="295"/>
</mx:VBox>
[/code]
mate에서 제공하는 Dispatcher기능을 쓰기 위해 네임스페이스를 지정해줍니다.
그리고, <mate:Dispatcher />태그가 있는데요. 여기서 자세히 보면, HelloEvent를 발생하고, 이벤트 종류는 HelloEvent.SAY인 것이죠. 이 이름은 단순 EventMap에 있는 것이랑 매핑하기위해서 쓰인 것 같구요.
이 이벤트를 발생할 때 Properties값은 input에 있는 text값을 넘깁니다. 방금 위에서 HelloEvent를 정의할 때 Properties값 name을 선언했는데, 저렇게 EventProperties에 지정을 해주면 저 값을 물고 들어갑니다.
그다음 그 응답값을 받을 ResponseHandler를 정의해주는데, helloResultResponse는 EventMap에 있는 것이랑 매핑하기 위한 이름이구요, response는 실제 메소드를 호출해줍니다. event.helloResult값은 EventMap에서 정의한 Properties값이구요. 여기서 설명하는 것보다 EventMap을 실제로 보면 이해가 훨씬 빠릅니다.

New -> MXML Component를 선택, Filename은 MainEventMap 그냥 Finish.
<mx:Canvas를 EventMap으로 고칩니다.
maps/MainEventMap.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://mate.asfusion.com/">
    <mx:Script>
        <![CDATA[
            import services.HelloService;
            import events.HelloEvent;
        ]]>
    </mx:Script>
   
    <EventHandlers type="{HelloEvent.SAY}">
        <MethodInvoker generator="{HelloService}" method="sayHello" arguments="{event.name}" />
        <ResponseAnnouncer type="helloResultResponse">
            <Properties helloResult="{lastReturn}" />
        </ResponseAnnouncer>
    </EventHandlers>
   
</EventMap>
[/code]
EventHandlers를 정의해줬는데 여기서 type은 아까 dispatcher에서 정의한 type과 같은 HelloEvent.SAY가 되겠죠. 그다음 MethodInvoker는 메소드를 호출하는 태그입니다. 위에서 언급했듯이 메소드 말고, RemoteObject나 HTTPService, WebService도 다 됩니다.
generator는 클래스를 적어주고, method에 메소드 이름을 적습니다. arguments에는 파라메터값인데 event.name은 해당 event에서 받은 name을 말하는겁니다. 우리가 Dispatcher에 정의한 name에 input.text값을 넣었으니 그게 들어가는 겁니다. 그다으메 ResponseAnnouncer는 응답을 정의하는 건데, 그 type이 아까 위에서 정의한 그 타입과 일치해야합니다. Properties의 helloResult도 위에 Dispatcher에서 정의한 것과 동일한 이름이여야겠죠. 그러면 저 Properties에 값이 들어가는데 여기서 보면 lastReturn이라고 써있는데, 위에 메소드에서 리턴한 값을 말하는 겁니다.
저렇게 해주면 끝납니다.

이제 마지막으로 main을 작성해봅시다.
HelloMate.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:view="views.*"
    xmlns:maps="maps.*">
   
    <!-- Event Maps -->
    <maps:MainEventMap />
   
    <!-- views -->
    <view:HelloBox />
   
</mx:Application>
[/code]
EventMap을 추가하고, View만 추가해주면 끝납니다.
실행해봅시다.
사용자 삽입 이미지
암쏘쏘리 벗알러뷰다거짓말.......
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.07.31 09:34  댓글주소  수정/삭제  댓글쓰기

    다그짓말~ ㅋ

    • 머드초보 2008.07.31 13:10  댓글주소  수정/삭제

      헉..지금 보니까 but I love 'you'가 빠졌습니다.
      미안하지만 난 다거짓말을 사랑해가 되버렸어요.

  2. BlogIcon 지돌스타 2008.07.31 10:50  댓글주소  수정/삭제  댓글쓰기

    이거 프로그램안에 쓰이는 이벤트를 일괄적으로 정리하는데 큰 도움이 되겠군요.
    이벤트를 많이 쓰다보면 출발점과 도착점을 헷갈리는 경우가 많은데...
    이렇게 Map으로 관리하면 적어도 도착점을 바로 알 수 있으니 훨씬 쉬워지겠군요.
    좋은 글입니다.

    • 머드초보 2008.07.31 13:11  댓글주소  수정/삭제

      넵 이벤트를 EventMap에서 다 정리가 되어있어요.
      저 맵대로 이벤트가 발생을 하도록 되어있는 프레임워크더라구요.
      저두 더 봐야하는데 ^^
      방문해주셔서 감사해요~ ^^

  3. BlogIcon 아이 2008.08.01 14:16  댓글주소  수정/삭제  댓글쓰기

    정말 대단한데!!!

    • 머드초보 2008.08.04 16:38  댓글주소  수정/삭제

      응 대단한 프레임워크인 것 같은데, 아직초반이라 뭔가 버그도 많고, 디버깅도 힘들고, 아직 쓸만한게 못돼-_-;

  4. BlogIcon 꽃녀 2008.08.05 13:06  댓글주소  수정/삭제  댓글쓰기

    머드님 저거 틀린거 같네요..

    i'm so sorry but i love you g r ji ma yo...인데..

    암쏘쏘리벗알러뷰그르지마요.

  5. 정태현 2009.01.21 13:16  댓글주소  수정/삭제  댓글쓰기

    덕분에 암소땡큐땡썰랏 다 진짜야~ 퍼갈께요.

    • 머드초보 2009.01.22 00:32  댓글주소  수정/삭제

      아네 도움이 되셨다니 다행이네요^^
      Mate Flex Framework가 아직은 검증되지 않아서-_-;
      실무에서 사용하시는 것은 좀 추천하고 싶지 않습니다-_-;

  6. Flex 초보 2009.02.09 10:14  댓글주소  수정/삭제  댓글쓰기

    머드초보님 좋은 정보 감사합니다..;^^
    저도 mate 에 대해 공부 중인데.. 요.. sample을 따라 하다 보니..
    MainEventMap.mxml에서 <properties helloResult="{lastReturn}"/> 요 라인에..
    Could not resolve <properties> to a component implementation. 이라고 에러 메시지 뜨는데요..
    어떻게 해야 하나요?

    알려주세요^^:;

    • 머드초보 2009.02.09 18:48  댓글주소  수정/삭제

      안녕하세요!
      P가 아마도 대문자일겁니다-_-;
      한번 해보시고 연락주세요~

  7. adf 2010.03.05 16:16  댓글주소  수정/삭제  댓글쓰기

    asdfa

  8. adf 2010.03.05 16:16  댓글주소  수정/삭제  댓글쓰기

    adfffffffff

  9. 아 이런; 2010.03.05 16:17  댓글주소  수정/삭제  댓글쓰기

    아..머드님

    MATE Error: Method not found, turn on the debugger for more information
    EventType:sayhelloevent. Error was found in a EventHandlers list in file MainEventMap

    에러가 뜨고 안됩니다 ㅠ

    • 머드초보 2010.03.10 18:16  댓글주소  수정/삭제

      메소드가 없다고 하는 걸보니.....-_-
      근데 제가 mate안한지 오래되어서-_- 소스를 볼 수 있을까요?-_-