베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
    - 액션스크립트 기초
    - 함수
    - for문 이해하기
    - Load 무비
    - 배열
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
함수
Home > 디자인 센터 > 웹강좌 > 플래시 스크립트 만들기 > 함수
함수의 이해 일차함수 메뉴 구조 무비클립 복제 prototype을 이용한 함수의 이해 만들기
CPU 점유율 조절하기

protype 예약어를 이용해서 무비클립에 메서드를 추가하는 방법에 대해 알아보겠습니다.

① prototype의 이론 이해
1. 뛰어라(길동)
2. 길동. 뛰어라
위 명령어 중 어떤 것이 더 좋은 방식이라고 생각되나요?
우리에게 익숙한 방식은 2번일 것입니다. 일상생활에서 어떤 명령을 할 때는 먼저 그 명령을 수행할 사람이 호출한 후에 명령을 전달합니다. 이렇게 되면, 프로그램을 분석할 경우에도 객체가 앞에 나오기 때문에, 어떤 객체가 다른 행동을 하더라도, 앞부분만 살펴봄으로써 그 객체에 해당하는 문장을 쉽게 찾을 수 있습니다.
액션스크립트는 점점 객체지향 프로그램으로 변화하고 있습니다, 객체지향 프로그램의 가장 큰 특징은 ‘자신의 것은 자신이 관리한다’라고 볼 수 있으므로, 각 오브젝트가 해야 할 일은 함수로 만드는 것보다 메서드로 만드는 것이 좋습니다.

메서드를 선언하는 형식은 다음과 같습니다.
오브젝트.prototype.메서드이름=function(매개변수){
실행할 액션들;
};

여기에서 매개변수의 경우 1개 이상 전달할 수 있으며, 매개변수들의 구분은 콤마(,)를 이용합니다. 이러한 메서드는 어느 위치에 선언되든 관계없이 다음과 같은 형태로 호출할 수 있습니다.
오브젝트.메서드이름(매개변수);

// 무비클립.moveX(10);
/*
MovieClip.prototype.함수명 = function(매개변수){
    //액션
};
*/

// prototype을 이용해서 메서드를 작성할 경우, 메서드 안에서
// this는 메서드를 호출한 객체{무비클립}을 가리킵니다.

MovieClip.prototype.moveX = function(dx){
    this._x = this._x + dx;
};

_root.bird.moveX(100)


// 1프레임에 삽입될 액션
MovieClip.prototype.moveXY = function(dx, dy) {
    this._x = this._x + dx;
    this._y = this._y + dy;
};
this.onMouseDown = function(){
    _root.orange.moveXY(10, 20);
    _root.green.moveXY(-10, 5);
};

여기에서 onMouseDown은 마우스로 화면 아무 곳을 클릭할 때입니다. 동일한 클릭의 효과가 있는 ocClick, onRelease 등과 혼돈하지 않도록 합시다.

MovieClip.prototype.smoothMove = function(sp, tx, ty){
    this._x += sp*(tx - this._x);
    this._y += sp*(ty - this._y);
}

this.onEnterFrame = function(){
    _root.red_mc.smoothMove(0.1, _root._xmouse, _root._ymouse);
};

MovieClip.prototype.smoothMove = function(sp, tx, ty){
    this._x += sp*(tx - this._x);
    this._y += sp*(ty - this._y);
}
이 부분은 smoothMove에 대한 메서드를 선언한 것입니다.

this.onEnterFrame = function(){
    _root.red_mc.smoothMove(0.1, _root._xmouse, _root._ymouse);
};
이 부분은 red_mc의 무비클립이 마우스를 0.1의 가속도 인자 값을 가지고 따라가도록 지정한 것입니다. 쉽게 풀이하면 _root._xmouse는 targetX가 되고 _root._ymouse는 targetY가 되며 0.1은 가속도 인자인데 그 이유는 this._y += sp*(ty - this._y); 공식에 의해 가속도 인자가 된 것입니다.
this._y += sp*(ty - this._y); 공식은 부드러운 움직임의 공식인데 여기에서 sp의 값을 바꾸면 가속도가 바뀝니다. 즉 가속도 인자입니다. function(sp, tx, ty)에서 ()안에 각 매개변수를 지정하였기 때문에 _root.red_mc.smoothMove(0.1, _root._xmouse, _root._ymouse); 공식에서 0.1은 가속도의 값이 되는 것입니다.

② 두 점 사이의 거리 구하기
플래시에서 두 점 사이의 거리는 매우 중요합니다. 단순히 두 점 사이의 거리뿐만 아니라 사각형의 크기를 함께 구할 수도 있습니다. 마우스이벤트로 거리를 지정할 경우 마우스의 위치를 구하기 위해서는 기준점이 되는 위치와 마우스 사이의 거리를 구해야합니다.
아래 예제를 따라해 보고 거리를 구하는 공식에 대하여 알아봅시다.

■ _root 1프레임의 액션스크립트
MovieClip.prototype.smoothMove = function(sp, tx, ty){
    this._x += sp*(tx - this._x);
    this._y += sp*(ty - this._y);
}

this.onEnterFrame = function(){
    _root.red_mc.smoothMove(0.1, _root._xmouse, _root._ymouse);
};

■ connectMc 무비클립 안에 1프레임의 액션스크립트
MovieClip.prototype.smoothMove = function(sp, tx, ty){
    this._x += sp*(tx - this._x);
    this._y += sp*(ty - this._y);
}

this.onEnterFrame = function(){
    _root.red_mc.smoothMove(0.1, _root._xmouse, _root._ymouse);
};
앞 예제의 실행 화면을 살펴보면 기준점이 되는 p0과 마우스의 위치가 되는 p1 사이의 거리를 알아야만 무비가 제대로 실행됩니다.
삼각 함수 공식에 의하면 C의 길이를 구하기 위해서는 A와 B의 길이를 구해야 합니다. A의 길이는 y2-y1이 되고 B의 길이는 x2-x1이 됩니다.

MovieClip.prototype.drawLine = function(x1, y1, x2, y2){
this._x = x1;
this._y = y1;
this._xscale = x2 - x1;
this._yscale = y2 - y1;
};
사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 070-7510-3007 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저