메서드③ 이미지 영역을 벗어나지 않는 마스크 만들기
위 스크립트에서 “left =_root.mask._x-(this._width - _root.mask._width)/2”의 공식이 나옵니다. 이 공식을 추출하는 과정은 지금은 좀 이해하기 어렵기 때문에 일단 공식 그대로 암기하여 사용하도록 하겠습니다.
※ 아래 작업 순서에 맞춰서 직접 작업해봅시다.
가) 배경이미지를 배치합니다.
나) 배경이미지를 [F8]을 눌러 버튼으로 만든 후에 다시 [F8]을 눌러 무비클립으로 설정합니다. 이때 무비클립의 중심점은 중앙으로 합니다.
다) 레이어를 추가하고 레이어 이름을 ‘mask’로 지정합니다. 무비클립으로 지정하고 인스턴스 이름을 ‘mask’로 수정합니다.
라) mask 레이어에서 오른쪽 버튼을 클릭하여 ‘mask’로 지정합니다.
마) 배경 이미지무비클립 안에 버튼을 선택하고 위 스크립트를 입력합니다.
바) Ctrl+enter로 확인합니다.
④ 스크롤바 만들기
지금부터 정해진 영역 안에서 드래그 되는 스크롤바를 만들어보겠습니다.
l = 100;
t = 100;
r = 250;
b = 300;
red_mc.startDrag(true, l, t, r, b);
t = 100;
r = 250;
b = 300;
red_mc.startDrag(true, l, t, r, b);
※ 아래 그림처럼 스크롤바를 만들고 원모양의 버튼이 라인을 넘어가지 않도록 제작해봅시다.
l = 0;
t = 0;
r = 250;
b = 0;
_root.scroll_mc.cursor_mc.onPress = function(){
this.startDrag(false, l, t, r, b);
};
_root.scroll_mc.cursor_mc.onMouseUp = function(){
this.stopDrag();
};
t = 0;
r = 250;
b = 0;
_root.scroll_mc.cursor_mc.onPress = function(){
this.startDrag(false, l, t, r, b);
};
_root.scroll_mc.cursor_mc.onMouseUp = function(){
this.stopDrag();
};
<작업순서>
가) 무비클립으로 커서와 라인을 만듭니다.
나) 커서와 라인을 합쳐 새로운 무비클립으로 만듭니다.
다) Scene1에서 레이어를 추가하고 위 스크립트를 삽입합니다.
<응용하기1>
// aaa : 0부터 250까지
l = 0;
t = 0;
r = 210;
b = 0;
_root.scroll_mc.cursor_mc.onPress = function(){
this.startDrag(false, l, t, r, b);
}
_root.scroll_mc.cursor_mc.onMouseUp = function(){
this.stopDrag();
}
// 일차함수
_root.scroll_mc.cursor_mc.onEnterFrame = function(){
// this._x가 0부터 210까지 변할 때.
// aaa는 0부터 250까지 변한다!!
aaa = int( (250 - 0) / (210 - 0) * ( this._x - 0) + 0 );
};
l = 0;
t = 0;
r = 210;
b = 0;
_root.scroll_mc.cursor_mc.onPress = function(){
this.startDrag(false, l, t, r, b);
}
_root.scroll_mc.cursor_mc.onMouseUp = function(){
this.stopDrag();
}
// 일차함수
_root.scroll_mc.cursor_mc.onEnterFrame = function(){
// this._x가 0부터 210까지 변할 때.
// aaa는 0부터 250까지 변한다!!
aaa = int( (250 - 0) / (210 - 0) * ( this._x - 0) + 0 );
};
<응용하기2>
아래 예제를 따라서 한 번 만들어봅시다. 난이도가 높으므로 공식은 이해하지 못하더라도 이러한 기능으로 활용이 가능하다는 것은 알아두도록 합시다.
l = 0;
t = 0;
r = 300;
b = 0;
_root.scroll_mc.cursor_mc.onPress = function(){
this.startDrag(false, l, t, r, b);
}
_root.scroll_mc.cursor_mc.onMouseUp = function(){
this.stopDrag();
};
_root.scroll_mc.cursor_mc.onEnterFrame = function(){
// this._x 가 0부터 300까지 변할 때
// img_mc._x가 sX(110) ~ eX(-130)
sX = _root.mask_mc._x;
eX = -(img_mc._width - mask_mc._x - mask_mc._width);
//tx = (-130 - 110) / (300 - 0) * (this._x - 0) + 110;
tx = (eX- sX) / (300 - 0) * (this._x - 0) + 110;
_root.img_mc._x=_root.img_mc._x + 0.05 * (tx - _root.img_mc._x);
};
t = 0;
r = 300;
b = 0;
_root.scroll_mc.cursor_mc.onPress = function(){
this.startDrag(false, l, t, r, b);
}
_root.scroll_mc.cursor_mc.onMouseUp = function(){
this.stopDrag();
};
_root.scroll_mc.cursor_mc.onEnterFrame = function(){
// this._x 가 0부터 300까지 변할 때
// img_mc._x가 sX(110) ~ eX(-130)
sX = _root.mask_mc._x;
eX = -(img_mc._width - mask_mc._x - mask_mc._width);
//tx = (-130 - 110) / (300 - 0) * (this._x - 0) + 110;
tx = (eX- sX) / (300 - 0) * (this._x - 0) + 110;
_root.img_mc._x=_root.img_mc._x + 0.05 * (tx - _root.img_mc._x);
};
※ 일차함수 공식
아래 공식은 자주 쓰이는 일차함수 공식입니다. 일차함수에 대해서는 뒤에서 자세히 배우도록 하겠습니다. 나중에 많이 응용되어 쓰이므로 꼭 숙지해야 합니다.
x가 a부터 b까지 변할 때
y는 c부터 d까지 변한다.
=> y = (d - c) / ( b - a) * ( x - a ) + c
ex1) x : 5 ~ 20
y : -10 ~ 100
y = (100 + 10) / (20 - 5) * (x - 5) -10
ex2) _root._xmouse가 0 ~-500까지 변할 때
img._x 는 -200 ~ -800까지 변한다.
==> img._x = (-800+200) / (-500-0) * (_root._xmouse-0)-200
y는 c부터 d까지 변한다.
=> y = (d - c) / ( b - a) * ( x - a ) + c
ex1) x : 5 ~ 20
y : -10 ~ 100
y = (100 + 10) / (20 - 5) * (x - 5) -10
ex2) _root._xmouse가 0 ~-500까지 변할 때
img._x 는 -200 ~ -800까지 변한다.
==> img._x = (-800+200) / (-500-0) * (_root._xmouse-0)-200
