연습장2007. 2. 20. 13:01

사용자 삽입 이미지
http://211.52.77.74:8080/test/flex2/postmemo/



비밀번호 사용가능하게 만들었네요..

예전에 그냥 해두었더니 누가 다 지워버려서..


툴팁으로 저장된 사람 ip도 나오게 해놓았습니다. 여과없이 -.-;




디스켓 아이콘 - 저장

x 아이콘 - 삭제



저장이나 삭제시에 비밀번호 입력이 나옵니다.

저장시에 입력하시면 비번이 저장되고

삭제시엔 입력한 비번을 입력하시면 되고요..




소스보기 가능하게 해놓았습니다..

좋은 하루 되세요..


아참.. 버그 있으면 거침없이 쪽지를 붙여주세요.


p.s. 회사쪽 mssql 서버가 맛이 가서 -.-;; 임시로

9~ 6시 사이는 제 노트북으로 연결시켜놓았네요.. 다른 시간대엔 꺼둘지도;;

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

AIR 번역기입니다. (AIR Translator)  (4) 2008.06.27
닥터후 퍼즐 - 시즌3  (3) 2007.07.04
퍼즐  (0) 2007.07.04
붙임쪽지 (like post it )  (2) 2007.02.20
붙임 쪽지(포스트 잇) 구현 중  (1) 2007.02.16
flash card 5*3  (0) 2007.01.28
Posted by 시난

댓글을 달아 주세요

  1. 비밀댓글입니다

    2007.05.21 19:12 [ ADDR : EDIT/ DEL : REPLY ]
  2. 먼 옛날의 댓글이네요. .^^;
    요즘은 저쪽 서버 운영이 중지되어서 볼 수가 없습니다만..
    언젠가 다시 오픈하겠습니다 ^-^;

    2008.06.20 08:53 신고 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍/Flex/AIR2007. 2. 16. 22:00
아직 닫기, 최소화, 최대화, 등의 아이콘은 붙이지 않았지만..
생각했던 구현 방법에 대한 구현을 한 것이고요..

나중에 붙임쪽지 기능 밑.. 다른데 적용시키려고 테스트 해보았습니다..
이동시 어긋남이 있는데 Panel 의 타이틀박스 부분에 이동 핸들링을 시작하지 않아서 그렇고, 조금 수정하면 될거에요..


Posted by 시난

댓글을 달아 주세요

  1. 사람들은 죽을걸 알면서도 살잖아 .사랑은 원래 유치한거에요

    2013.07.29 08:32 [ ADDR : EDIT/ DEL : REPLY ]
  2. 지금은 반짝반짝 빛이 나겠지,, 하지만 시간이 흐르면 그빛은 사라저버릴거야,지금 우리처럼

    2013.08.05 06:03 [ ADDR : EDIT/ DEL : REPLY ]

연습장2007. 2. 16. 21:46
sql 서버가 노트북이라서 켜놓지를 못하네요.
시간되는대로 회사 서버에 연결해놓고 다시 올리겠습니다. ^^;


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

AIR 번역기입니다. (AIR Translator)  (4) 2008.06.27
닥터후 퍼즐 - 시즌3  (3) 2007.07.04
퍼즐  (0) 2007.07.04
붙임쪽지 (like post it )  (2) 2007.02.20
붙임 쪽지(포스트 잇) 구현 중  (1) 2007.02.16
flash card 5*3  (0) 2007.01.28
Posted by 시난

댓글을 달아 주세요

  1. cafe에 작성했던 글 http://cafe.naver.com/flexcomponent/2960

    2008.08.03 23:13 신고 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍/Flex/AIR2007. 2. 16. 01:10

제대로 하기 위해선,
패널 안쪽에서 이벤트 발생이 필요하다.

구석진 곳(상하, 좌우 이동 커서로 변하게 하는 장소)을 클릭했을 때와
마우스 업 이벤트 시에

상위 컨테이너로 이벤트를 전달하여,
패널의 확장 및 축소를 해야하는지 말아야 하는지 제어해야 한다.

Posted by 시난
TAG flex, panel

댓글을 달아 주세요

  1. u

    uuu

    2007.02.16 10:18 [ ADDR : EDIT/ DEL : REPLY ]
  2. 비밀댓글입니다

    2007.02.16 10:18 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍/Flex/AIR2007. 2. 9. 00:37
bitmapData 에 대한 이해가 부족하다 생각하여
엄청 멋진 사이트(http://casualplay.net/blog/2005/11/)
하나를 발견해서 공부했습니다.

Flex2로 재구성 했습니다.








소스 :
사용자 삽입 이미지

사용자 삽입 이미지
Posted by 시난

댓글을 달아 주세요

  1. 잠시 랜덤으로 왔습니다.

    나디아의 장 맞죠?^^;;

    2007.03.13 21:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 넵.. ^^ 맞습니다. 어릴적부터 동경하던 인물이죠!

    2007.04.08 21:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 아이디를 한번 바꾸셨나봐요?
    swf 파일 주소가 다르네요 ^^:

    2008.06.18 22:44 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 요즘 이 블로그 서브도메인을 바꿔서..
    플래시 경로를 다 바꾸고 있답니다. ^^;;

    2008.06.19 13:46 신고 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍/Flex/AIR2007. 2. 8. 14:25



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#808080, #808080]"
 creationComplete="initApp();">
 <mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
 
   private var img:Image;
   private var offscreen:BitmapData;
   
   private function initApp():void
   {
    // onscreen
    testScreen.cacheAsBitmap = true;
    testScreen.opaqueBackground = "opaque"; // 해결
         
          // 오프스크린 생성
          offscreen = new BitmapData(200,150,true,0xff000000);
         
          // 동적 리소스 -> 비트맵데이터
          //loadResource();
         
         
          //test
          testOffscreen();
   }
   
   private function loadResource():void
   {
    loadingImg.addEventListener(Event.COMPLETE, onLoadComplete);
    loadingImg.source = "assets/0-0-0-0.png"; // 투명 타일(빨간색선 마름모)
   }
   
   // 이미지가 로드 되었다면, 화면에 그려본다.
   private function onLoadComplete(e:Event):void
   {
    //trace("[loadingImg::Event.COMPLETE] lodingImg cw,ch : " + loadingImg.contentWidth + ", " + loadingImg.contentHeight);
         
          // 오프스크린에 타일을 그려본다
          offscreen.copyPixels(getBitmapData(e.target as Image),
                new Rectangle(0,0, loadingImg.contentWidth,loadingImg.contentHeight),
                new Point(0,0));
         
          // flipping (offscreen -> onscreen)     
          testScreen.source = new Bitmap(offscreen);
   }
   
   private function testOffscreen():void
   {
    // 오프스크린에 타일을 그려본다
          offscreen.copyPixels(getBitmapData(embeddedImg),
                new Rectangle(0,0, embeddedImg.contentWidth,embeddedImg.contentHeight),
                new Point(0,0));
               
         
          // flipping (offscreen -> onscreen)     
          testScreen.source = new Bitmap(offscreen);
         
         
          //onScreen2.opaqueBackground
   }
   
   
   // 이미지를 읽어서 비트맵 데이터로 만든다
   private function getBitmapData( target : Image ) : BitmapData
      {
       var bd : BitmapData = new BitmapData( target.contentWidth, target.contentHeight,
                 true, 0x00ffffff); // 알파 적용
       var m : Matrix = new Matrix();
       bd.draw( target, m );
       return bd;
      }
     
  ]]>
 </mx:Script>
 
 <mx:Image x="10" y="10" id="testScreen"/>
 <mx:Image x="379.5" y="10" id="embeddedImg" source="@Embed('assets/0-0-0-0.png')"/>
 <mx:Image x="379.5" y="51" id="loadingImg"/>
 <mx:Label x="271.5" y="10" text="투명 png : "/>
 <mx:Label x="271.5" y="51" text="투명 png(동적로드)"/>
 
</mx:Application>
Posted by 시난

댓글을 달아 주세요

  1. 근데 겹쳐 그리니까. 불투명으로 인식되서....
    이상하다 =.=

    2007.02.08 15:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 사람들은 죽을걸 알면서도 살잖아 .사랑은 원래 유치한거에요

    2013.07.29 04:41 [ ADDR : EDIT/ DEL : REPLY ]
  3. 희미한 달빛이 샘물 위에 떠있으면,나는 너를 생각한다.

    2013.08.04 06:34 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍/Flex/AIR2007. 2. 8. 14:07




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#808080, #808080]"
 creationComplete="initApp();">

 <mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
 
   private var img:Image;
   private var offscreen:BitmapData;
   
   private function initApp():void
   {
    // onscreen
    testScreen.cacheAsBitmap = true;
         
          // 오프스크린 생성
          offscreen = new BitmapData(200,150,true,0xff000000);
         
          // 동적 리소스 -> 비트맵데이터
          //loadResource();
         
         
          //test
          testOffscreen();
   }
   
   private function loadResource():void
   {
    loadingImg.addEventListener(Event.COMPLETE, onLoadComplete);
    loadingImg.source = "assets/0-0-0-0.png"; // 투명 타일(빨간색선 마름모)
   }
   
   // 이미지가 로드 되었다면, 화면에 그려본다.
   private function onLoadComplete(e:Event):void
   {
    //trace("[loadingImg::Event.COMPLETE] lodingImg cw,ch : " + loadingImg.contentWidth + ", " + loadingImg.contentHeight);
         
          // 오프스크린에 타일을 그려본다
          offscreen.copyPixels(getBitmapData(e.target as Image),
                new Rectangle(0,0, loadingImg.contentWidth,loadingImg.contentHeight),
                new Point(0,0));
         
          // flipping (offscreen -> onscreen)     
          testScreen.source = new Bitmap(offscreen);
   }
   
   private function testOffscreen():void
   {
    // 오프스크린에 타일을 그려본다
          offscreen.copyPixels(getBitmapData(embeddedImg),
                new Rectangle(0,0, embeddedImg.contentWidth,embeddedImg.contentHeight),
                new Point(0,0));
         
          // flipping (offscreen -> onscreen)     
          testScreen.source = new Bitmap(offscreen);
   }
   
   
   // 이미지를 읽어서 비트맵 데이터로 만든다
   private function getBitmapData( target : Image ) : BitmapData
      {
       var bd : BitmapData = new BitmapData( target.contentWidth, target.contentHeight,
                 true, 0x00ffffff); // 알파 적용
       var m : Matrix = new Matrix();
       bd.draw( target, m );
       return bd;
      }
     
  ]]>
 </mx:Script>
 
 <mx:Image x="10" y="10" id="testScreen"/>
 <mx:Image x="379.5" y="10" id="embeddedImg" source="@Embed('assets/0-0-0-0.png')"/>
 <mx:Image x="379.5" y="51" id="loadingImg"/>
 <mx:Label x="271.5" y="10" text="투명 png : "/>
 <mx:Label x="271.5" y="51" text="투명 png(동적로드)"/>
 
</mx:Application>

투명 타일 :

사용자 삽입 이미지

Posted by 시난

댓글을 달아 주세요

프로그래밍/Flex/AIR2007. 2. 8. 10:09
제작 - lostsin(시난, lostsin@gmail.com), 2007. 2. 8.

source :



 
플래시쪽 폰트 투명하게 하는 방법 찾아서 응용했네요..^^;
한글 찌글거림 없는 것은
mT.antiAliasType = AntiAliasType.ADVANCED;
이 부분입니다.


이 블로그에서 본 것을 응용해보았습니다.
: http://blog.naver.com/ooaso?Redirect=Log&logNo=80025648476

Posted by 시난

댓글을 달아 주세요

  1. Le socialiste Dominique Strauss-Kahn était toujours en janvier en tête des personnalités politiques avec une cote d'avenir de 49%, http://www.moncleroutletespain.com/ moncler online, en hausse de deux points par rapport à décembre, http://www.moncleroutletespain.com/ http://www.moncleroutletespain.com/, dans le baromètre mensuel TNS Sofres Logica pour Le Figaro Magazine rendu public jeudi, http://www.moncleroutletespain.com/ moncler outlet. Politique Confiance: Sarkozy (27%) et Fillon (38%) en hausse (+3) (Sofres-Figaro Politique L'héritage de Séguin "appartient à tous les Fran, http://www.moncleroutletespain.com/ moncler españa?ais" (Fillon)Related articles:


    http://615blog.tistory.com/175 http://615blog.tistory.com/175

    http://blogoon.co.kr/146 http://blogoon.co.kr/146

    2013.01.05 22:38 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍2007. 2. 4. 00:31

Isometric view -

출처 : http://www.tonypa.pri.ee/tbw/tut16.html

Isometric view is great to add depth into your game. Many famous games use this vie, because its simple to do, but looks good. And best thing about isometric view is how easy it is to create based same old tile based approach. Like this:

Theory

First you should know, that actual isometric view (from the mathematics) is little more complicated and never used in games. Now that you know it, forget it. From here on, we only talk about simple isometrics. Maybe best way to imagine isometric, is to look, what happens to the normal square, when its transformed into isometric view:

First we rotate the square by 45 degrees and then we make its height half the width. That was simple. Now lets create our tiles and hero:

Its important to place graphics to the registration point (little cross, where Flash starts to count coordinates from) like shown in the picture. The wall tile you can draw as high as you want. For the hero, I have left the tile in the picture so you hopefully understand its position better, dont place that rectangle in the final graphics of hero. It would only look strange, if hero walks around, rectangle around him.

Changes to the code

First thing to change, is size of tiles and size of hero. But wait, what size? So far it was clear, width and height of movie clip, but in isometric view the height of movie clip can be almost anything.

So, value of tileW variable is half the width of actual tile graphics. For the hero, its width and height properties are equal and half of its graphics actual width. Write it down:

game={tileW:30};
char={xtile:2, ytile:1, speed:4, width:16, height:16};

Biggest change in the code will be actual placement of movie clips on screen. In normal view, we used clip._x=x and clip._y=y, to make same x/y appear in isometric view, we will use:

clip._x=x-y;
clip._y=(x+y)/2;

In the buildMap function change placement of tiles:

clip[name]._x = (j-i)*game.tileW;
clip[name]._y = (j+i)*game.tileW/2;

Tiles depth is calculated same way as before, but we wont use x/y, we will use tiles new coordinates in isometric view:

game[name].depth=(j+i)*game.tileW/2*300+(j-i)*game.tileW+1;

And same thing for the hero:

var ob=char;
ob.x = ob.xtile*game.tileW;
ob.y = ob.ytile*game.tileW;
ob.xiso = ob.x-ob.y;
ob.yiso = (ob.x+ob.y)/2;
ob.depthshift=(game.tileW-ob.height)/2;
ob.depth=(ob.yiso-ob.depthshift)*300+ob.xiso+1;
game.clip.attachMovie("char", "char", ob.depth);
ob.clip=game.clip.char;
ob.clip._x = ob.xiso;
ob.clip._y = ob.yiso;

As you can see, new properties xiso and yiso will hold the coordinates of char in the isometri view, but we still have properties x/y. Variable depthshift is needed since our char is not drawn on the center of the tile (look the picture with char), it is shifted up.

All the collision and movements are calculated in normal way, but in the end position of movie clip is converted into isometric view. In the end of moveChar function change the char placement same way:

ob.xiso = ob.x-ob.y;
ob.yiso = (ob.x+ob.y)/2;
ob.clip._x = ob.xiso;
ob.clip._y = ob.yiso;
ob.clip.gotoAndStop(dirx+diry*2+3);
ob.xtile = Math.floor(ob.x/game.tileW);
ob.ytile = Math.floor(ob.y/game.tileW);
ob.depth=(ob.yiso-ob.depthshift)*300+(ob.xiso)+1;
ob.clip.swapDepths(ob.depth);

After we have moved the char, detected the collisions with walls and probably placed char near the wall, properties x and y will hold correct position in non-isometric view. Now we only calculate new values for isometric view.

You can download the source fla with all the code and movie set up here.

Posted by 시난

댓글을 달아 주세요

  1. 태양이 바다에 미광을 비추면,나는 너를 생각한다.

    2013.07.29 08:48 [ ADDR : EDIT/ DEL : REPLY ]
  2. 눈을 감아봐 입가에 미소가 떠오르면 네가 사랑하는 그 사람이 널 사랑하고 있는거야.

    2013.08.05 06:38 [ ADDR : EDIT/ DEL : REPLY ]

프로그래밍/Flex/AIR2007. 1. 30. 14:19

출처 : [On Reflexion]

http://onreflexion.blogspot.com/2007/01/napkin-skins-stage-two-programmatic.html 



We can build on stage one by using programmatic skins (click on the screenshot to see
the app):

There were no significant changes to the MXML file: the only change is the reference to the CSS stylesheet. Looking at scrawl3.css (when you select View Source in the app's context menu), we see that the changes to the stylesheet are limited to styles that are specified as ClassReferences, for example:

    track-skin: ClassReference('skins.scrawl.ScrollTrackSkin');
These are references to programmatic skins written in ActionScript, which you can find in the source tree under skins.scrawl. The simplest one, ScrollTrackSkin.as, specifies the skin for the ScrollBar's track (but not for the thumb or the arrow). The drawing happens in the overridden method updateDisplayList() and, aside from a drawing a simple border around the track, does only one interesting thing:
    // fill with zero alpha: if no fill, mouse events are not recognized
drawRoundRect(1, 1, w-2, h-2, 0, 0x000000, 0.0);
I found that, without this line, clicking on the track does not move the ScrollBar thumb to the location of the click -- the mouse event is ignored, presumably because it doesn't hit any area drawn by the track skin. My solution for that was to add an invisible background for the track. I have also used this solution in my other programmatic skins, but I am not sure that this is the "recommended" way to address this issue.

Another simple programmatic skin is ScrollArrowSkin.as. Someone with a different balance of graphical vs. coding skills would have probably created this as a graphical skin. For me, this was the simplest way to go. One advantage of using the programmatic skin is that you can make slight variations for up-/over-/down-skins within the same skin class. In this case, I have used conditions on the skin's name to determine the color and direction of the arrow, which allowed me to use the same skin class for all ScrollBar arrow skins:
    down-arrow-down-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
down-arrow-over-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
down-arrow-up-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
...
up-arrow-down-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
up-arrow-over-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
up-arrow-up-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
Programmatic skins also allow for some nifty tricks. The code in ComboBoxSkin.as that draws the border of the ComboBox uses Math.random() to draw it differently every time:
    g.moveTo(Math.random() * borderThickness, Math.random() * borderThickness);
g.lineTo(w - (Math.random() * borderThickness), Math.random() * borderThickness);
g.moveTo(w - (Math.random() * borderThickness), Math.random() * borderThickness);
g.lineTo(w - (Math.random() * borderThickness), h - (Math.random() * borderThickness));
...
This helps give the ComboBox that ragged scrawled-on-a-napkin look: the border is different for the up-, over- and down-skins. If you play with the box dividers, you'll see that the ComboBox redraws itself with a slightly different border, even for the same skin. A similar principle is at work for the DataGrid's border (in ScrawlBorder.as), as well as for the cross-hatch pattern for the ScrollBar thumb skin (ScrollThumbSkin.drawCrossHatch()) and the ComboBox's down-skin (ScrawlUtil.drawCrossHatch() in the util package):
    // draw \\\\\\\\
for(i = -h; i < w; i += 6)
{
vstart = Math.max(-i, 0);
vdistance = Math.min(h, w - i);
vstartOffset = vstart + 3 - (6 * Math.random());
g.moveTo(i + vstartOffset, vstartOffset);
g.lineTo(i + vdistance, vdistance + 2 - (4 * Math.random()));
}

// draw ////////
for(i = 0; i < w + h; i += 6)
{
vstart = Math.max(i - w, 0);
vdistance = Math.min(h, i);
vstartOffset = vstart + 3 - (6 * Math.random());
g.moveTo(i - vstartOffset, vstartOffset);
g.lineTo(i - vdistance, vdistance + 2 - (4 * Math.random()));
}
Once again, programmatic skins allow us to call this code only for the ComboBox's down-skin while reusing the same class for all three skins:
    down-skin: ClassReference('skins.scrawl.ComboBoxSkin');
over-skin: ClassReference('skins.scrawl.ComboBoxSkin');
up-skin: ClassReference('skins.scrawl.ComboBoxSkin');
As one final touch, the DataGrid's border looks like it was drawn with a marker, with varying pressure on the marker producing color variations along the way. This effect is accomplished by specifying the following gradient type in ScrawlBorder.updateDisplayList():
    g.lineGradientStyle(GradientType.LINEAR, [borderColor, borderColor], [1.0, 0.5], [0, 255],
null, SpreadMethod.REFLECT);












재밌는 스킨 제작법!
Posted by 시난
TAG flex, Skin

댓글을 달아 주세요