Tag Archives: AS 2.0

[minsangK.com] 플래시 액션스크립트 XML 로드 (블로그 타이틀 02)


플래시가 서버와 데이터를 주고 받는 방법은 이전 포스트 에서 밝혔다시피 여러가지가 있지만, 여기서 사용된 방법은 플래시 액션스크립트 2.0 의 XML 객체의 load 함수를 이용하는 것이다. 방법자체는 크게 어렵지 않다.
우선 플래시에 정보를 전달해주는 녀석은 이거다.
http://minsangk.com/xmlTest/titleComment.php?mode=xmlOnce

이 녀석은 GET Method 를 통해 전달된 mode 의 값에 따라 구분 작동하는데,

모드 지정을 안 할 경우 입력된 DB 의 데이터를 XML 로 뿌려준다 (모드 미지정)
XML 로 최신 노드 하나만을 뿌려주거나 (xmlOnce 모드)
HTML 의 테이블 태그를 이용해 뿌려주거나 (html 모드)


[#M_XML 로드 코드 (열기)|XML 로드 코드 (닫기)|
(Language : actionscript 2.0)


  1. System.useCodepage = true;


  2.  


  3. myXML = new XML();


  4. myXML.load("http://minsangk.com/xmlTest/titleComment.php?mode=xmlOnce");


  5. myXML.ignoreWhite=true;


  6.  


  7. myXML.onLoad = synchroText;


  8.  


  9. function synchroText(success)


  10. {


  11.  if(success) {


  12.   mcMent.dynamicMent.text = myXML.firstChild.firstChild.firstChild.nodeValue;


  13.   mcDate.dynamicDate.text = myXML.firstChild.firstChild.attributes.date;


  14.  }


  15.  else {


  16.   mcMent.dynamicMent.text = "Comment Load Failed";


  17.   mcDate.dynamicDate.text = "Date Load Failed";


  18.  }


  19. }

_M#]
실제 코드는 눈물이 날 정도로 간단하다.
xml 을 로드하고 로드가 완료되면 뿌려준다- 이게 끝-.-

설명하고 말 것도 없는 단촐한 코드지만 몇가지만 짚자면.

(Language : javascript)


  1. System.useCodepage = true;

이게 없으면 한글 입력을 플래시가 못 알아듣는다.

(Language : javascript)


  1. myXML = new XML();


  2. myXML.load(“http://minsangk.com/xmlTest/titleComment.php?mode=xmlOnce”);


  3. myXML.ignoreWhite=true;

myXML 이라는 객체를 만들고, load 메소드로 XML 을 가져온다.
마지막 줄은 가져온 파일에서 공백을 삭제하라는 구문으로 정확한 XML 노드트리의 작동을 위해 꼭 필요하다.

onLoad 함수는 지정된 주소에서 값을 가져와 로드가 완료되면 (성공이든 실패든) 호출된다. 매개변수로 성공/실패 여부를 알려주는 boolean 변수를 하나 주니까 이걸로 if 문을 구성하면 된다. xml 로 가져온 값은 대강 아래와 같이 나올텐데-

(Language : xml)


  1. <?xml version=“1.0″ encoding=“euc-kr” ?>


  2. <root>


  3.     <comment id=“1″ date=“20071126″>한 줄기 미소를 위해, 나-</comment>


  4. </root>

(Language : javascript)


  1. if(success) {


  2.   mcMent.dynamicMent.text = myXML.firstChild.firstChild.firstChild.nodeValue;


  3.   mcDate.dynamicDate.text = myXML.firstChild.firstChild.attributes.date;


  4.  }


  5.  

여기서 myXML 의 firstChild 는 root
root 의 firstChild 는 comment
comment 의 firstChild.nodeValue 는 ‘한 줄기 미소를 위해, 나-’ 가 된다.

date 값은 comment(myXML.firstChild.firstChild) 의 속성(attribute) 값이므로,
myXML.firstChild.firstChild.attributes.date;

이렇게 구한 값들을 지정된 무비클립-동적텍스트-텍스트에 넣어주면 끝이다.

다음 포스트에선,
입력/수정/삭제를 할 폼에 대해 끄작여보자-.-.-

sinGraph.jpg

[minsangK.com] sin 함수 애니메이션 (블로그 타이틀 01)

[#M_글 들어가기 전에 블로그 관한 잡담 (열기)|글 들어가기 전에 블로그 관한 잡담 (닫기)|
하루 15시간씩 꼬박 앉아 블로그를 만들고 있다.
블로그가 삶의 기록이라면, 요즘 내 삶의 기록은 오로지 블로그 제작 과정이 전부일텐데, 하루 15시간씩 쓰다보니 도무지 포스팅 속도가 제작 속도를 못 따라 간다. 블로그에 자그마한 변화 하나라도 있을 때마다 글을 올려서 관련 포스트를 검색하는 것만으로 이 블로그가 어떻게 만들어졌는지 보여주고자 했었는데. 쉽지 않다. 이렇게 만들어 놓은걸 다음날은 철저하게 부수고 다시 두드리는 일도 심심찮게 있고. 이건 확정이야, 절대 안 바꿔- 이렇게 만들어 놓은 레이아웃도 몇일 지나면 사지를 분해해 재조립하기도 한다.

아무튼 그래서 'about블로그' 카테고리를 포기하고 'HelloWorld' 카테고리에 [minsangK.com] 접두어를 붙이기 시작했다. (사실 이거 고치는 것만 해도 완전 대공사였음, DB 접속해서 ID를 전부 다시 줄맞춰 수정하고 PHP 에서 Description 배열도 수정하고, 등등) 블로그에 관한 내용이 ‘HelloWorld’에 올라온다는 것은 이제 앞으로의 작업들이 대부분 코드와 스크립트로 점철되는 피곤한 작업이라는 뜻이기도-_M#]
타이틀에 들어간 플래시는 액션스크립트 2.0 으로 제작되었다. 메뉴를 플렉스로 만드느라 액션스크립트 3.0 을 머리 아프게 공부하고 있는 터라 그나마 만만하고 자신있는ㅠ 2.0으로 두드려보자- 라는 취지였지만 결과적으로 머리가 좀 아팠다. 플렉스에선 2.0 코드 두드리더니 플래시 가선 3.0 두드리고- 이러고 있다. 2.0은 XML을 불러오는 방식이 3.0과는 또 다르다. 레퍼런스(물론 한글 한글자도 안 들어간)를 뒤적거리며 어쨌든 기어코 완성을 시켰네.

하지만 스크립트의 포인트, 가장 중요한 부분은 Sin 함수를 이용한 눈송이 애니메이션-
이건 이미 예전에 한번 써먹었던 레퍼토리-_-라 두드리는데 큰 어려움은 없었다.
다른 점이 있다면 이건 그냥 수직하강 눈송이가 아니라 Sin 함수를 이용해 돌아간다는 점.

[Flash] http://freinture.mireene.com/test/snowSimulation.swf


이전에 만든 눈송이 애니메이션


[#M_눈송이 구현 코드 (열기)|눈송이 구현 코드 (닫기)|
by AS 2.0


  1. // 눈송이 갯수


  2. amount_of_Circles = 30;


  3.  


  4. // 캔버스 사이즈


  5. canvasWidth=900;


  6. canvasHeight=100;


  7.  


  8. // 크기, 알파 설정 (최소/최대값)


  9. minScale = 5;


  10. maxScale = 10;


  11. minAlpha = 20;


  12. maxAlpha = 50;


  13.  


  14. // 눈송이 생성, 초기화


  15. for(var i=0; i<amount_of_Circles; i++)


  16. {


  17.  this.attachMovie("circle","circle"+i,this.getNextHighestDepth());


  18.  this.initCircle(this["circle"+i]);


  19. }


  20.  


  21. // 눈송이 초기화 함수


  22. function initCircle(_mc:MovieClip)


  23. {


  24.  mc = _mc;


  25.  mc._x = random(_root.canvasWidth)-200;


  26.  mc._y = random(_root.canvasHeight);


  27.  mc._width = mc._height = random(_root.maxScale-_root.minScale) + _root.minScale;


  28.  mc._alpha = random(_root.maxAlpha-_root.minAlpha) + _root.minAlpha;


  29.  mc.xSpeed = random(3) + 1;


  30. }


  31.  


  32. // 눈송이 위치 이동 (onEnterFrame)


  33. this.onEnterFrame = function()


  34. {


  35.  for(i=0; i<amount_of_Circles; i++)


  36.  {


  37.   this["circle"+i]._x += this["circle"+i].xSpeed;


  38.   this["circle"+i]._y += Math.sin(this["circle"+i]._x/50);


  39.   //  this["circle"+i]._y = Math.sin(this["circle"+i]._x/30)*(canvasHeight/2)+canvasHeight/2;


  40.  


  41.   // 눈송이가 바깥으로 나갈 경우


  42.   if ( this["circle"+i]._x > canvasWidth ) {


  43.    initCircle(this["circle"+i]);


  44.   }


  45.  }


  46. }

_M#]
장황하게 써놨지만 실제로 중요한건 딱 두 줄이다. 이거-

(Language : javascript)


  1. this["circle"+i]._x += this["circle"+i].xSpeed;


  2. this["circle"+i]._y += Math.sin(this["circle"+i]._x/50);

x 값은 랜덤으로 지정된대로  오른쪽으로 달려간다.
y 값은 현재 x 값에 50을 나눠서 sin 함수에 넣고, 나온 결과값.
이해가 가지 않는다고? 음, 동감이야. 하지만 어렵게 이해하고 두드렸으니 잠깐 설명하자면-

일단 고등학교 수학시간으로 돌아가자. 그리 어려울 것도 없으니 겁먹지 말고.
sin( 0 ) 은 0 이고, sin( Math.PI / 2 ) 은 1 이다.
플래시의 sin 함수도 역시 라디안 값으로 동작하니까 고등학교 수학 시간하고 똑같이 생각하면 된다.
잠깐 여기서 90도(Math.PI/2) 가 넘어가면 어떻게 되는가? 그래프를 떠올려보자.

사용자 삽입 이미지그렇다 정점을 친 값은 떨어진다, 그리고 270도가 되면 마이너스값으로 바닥을 친뒤 한바퀴를 돌면 다시 제자리로 온다.
여기서 우리가 원하는 값은 한 프레임당 움직여야 할 y 값-
아, 갑자기 머리가 아파온다. 이거 구하려면 미적분이 다 나와야 할 것 같은 분위기다.

하지만 중요한건 방향성이다. 굳이 값을 알아내서 뭐하겠다는거냐.
우리가 원하는건 단지 y 값이 x 값의 증가값에 따라 출렁거려주기만 하면 되는거니까.
x 값은 선형증가하고 있으니 단지 그 증가하고 있는 값을 적당한 숫자의 나누기를 통해 작은수로 줄여주는 것이다.

왜 이렇게 마구리스러운 방법을 썼냐면 나도 할 말이 있다.

[Flash] http://www.minsangk.com/tt/attachment/1294582858.swf


 

위의 움직임은 아래와 같은 식으로 작성되었다. (나머지는 거의 비슷하다고 보면 된다)
(Language : javascript)
this["circle"+i]._y = Math.sin(this["circle"+i]._x/30)*(canvasHeight/2)+canvasHeight/2;

식이 좀 복잡해 보이지만 한가지 외엔 큰 차이가 없다. 바로
[ += 대신 = 이 사용되었다는것 ]
증가값을 조절하는게 아니라 _y 값을 직접 조정하는 것이다.

이 경우 진폭을 조절하긴 쉽다.
싸인함수 결과값은 어쩌니저쩌니 해도 결국 -1 부터 1 사이의 값이고, 여기에 50 을 곱하면 -50 부터 50 사이의 값이 된다. 여기에 다시 50을 더해주면 y 값은 0부터 100 까지의 범위를 넘지 않게 되는 것.

다만 위와 같이 너무도 정형화된, 이건 도무지 고등학교때 수학 선생님한테 얻어맞던 기억이 떠올라 등골이 싸해지는 애니메이션이 될 수 밖에 없는거다. 뭐, 여기서도 진폭과 x 의 시작 위치를 랜덤값으로 둘 경우 고등학교 수학 선생님이야 떠오르지 않겠지만, 현재 블로그의 타이틀처럼 도저히 싸인 곡선이라고는 믿을 수 없는 자연스러움을 구현하기엔 많은 애로사항이 꽃핀다.

블로그 타이틀 01 은 여기까지 끝내고, 다음은 02번-
플래시 액션스크립트 2.0 으로 구현하는 XML 로드다-