웹디자인 강의
Flash 만화경을 보는 듯한 효과
2003.01.03 12:15
액션스크립트만을 이용해서 마치 어릴적 만화경을 이리저리 흔들며 들여다 보는 듯한 효과를 만들 수 있습니다. 똑같은 크기의 8개의 조각이 360도를 만들어 하나의 원을 그리며 연출하는 효과입니다. 단순하면서도 깔끔한 페이지를 만들고 싶을 때 이용하면 좋을 듯 싶습니다.
[따라하기]
빈 스테이지에 배경이 될 빨간색 사각형을 그려 넣습니다.
다음과 같은 액션을 첫 프레임에 삽입합니다.
function drawQuad(clip, color) {
path = this.goody[clip];
path.clear();
path.lineStyle(0, 0, 20);
path.beginFill(color, 20);
path.moveTo(x[0], y[0]);
path.lineTo(x[1], y[1]);
path.lineTo(x[2], y[2]);
path.lineTo(x[3], y[3]);
path.endFill(x[0], y[0]);
}
/*
무비클립 만들기
*/
this.createEmptyMovieClip("goody", 100);
goody._x =155;
goody._y = 175;
for (i=0; i<8; i++) {
goody.createEmptyMovieClip("quad"+i, i);
goody["quad"+i]._rotation = i*(360/8);
}
/*
무비 초기화
*/
width = 90;
height = 90;
x = new Array();
y = new Array();
sX = new Array();
sY = new Array();
x[0] = 0;
y[0] = 0;
x[1] = 0;
y[1] = -height;
x[2] = -width;
y[2] = -height;
x[3] = -width;
y[3] = 0;
for (i=1; i<4; i++) {
sX[i] = Math.random()*2+2;
sY[i] = Math.random()*2+2;
}
goody.onEnterFrame = function() {
for (i=1; i<4; i++) {
x[i] += sX[i];
y[i] += sY[i];
if (Math.abs(x[i])>width) {
sX[i] = -sX[i];
}
if (Math.abs(y[i])>height) {
sY[i] = -sY[i];
}
}
for (i=0; i<8; i++) {
drawQuad("quad"+i, 0xFFFFFF);
}
};
※ 프레임속도(fps)는 대부분12fps로 맞추어져 있습니다만, 숫자가 많을수록 속도가 빨라집니다.
※ 액션으로만 만들어진 무비입니다. 따라서 소스만 수정하시면 다른 효과를 만들어 낼 수 있습니다.
기타 다른 강좌는 www.goody.pe.kr에 있습니다.
[따라하기]
function drawQuad(clip, color) {
path = this.goody[clip];
path.clear();
path.lineStyle(0, 0, 20);
path.beginFill(color, 20);
path.moveTo(x[0], y[0]);
path.lineTo(x[1], y[1]);
path.lineTo(x[2], y[2]);
path.lineTo(x[3], y[3]);
path.endFill(x[0], y[0]);
}
/*
무비클립 만들기
*/
this.createEmptyMovieClip("goody", 100);
goody._x =155;
goody._y = 175;
for (i=0; i<8; i++) {
goody.createEmptyMovieClip("quad"+i, i);
goody["quad"+i]._rotation = i*(360/8);
}
/*
무비 초기화
*/
width = 90;
height = 90;
x = new Array();
y = new Array();
sX = new Array();
sY = new Array();
x[0] = 0;
y[0] = 0;
x[1] = 0;
y[1] = -height;
x[2] = -width;
y[2] = -height;
x[3] = -width;
y[3] = 0;
for (i=1; i<4; i++) {
sX[i] = Math.random()*2+2;
sY[i] = Math.random()*2+2;
}
goody.onEnterFrame = function() {
for (i=1; i<4; i++) {
x[i] += sX[i];
y[i] += sY[i];
if (Math.abs(x[i])>width) {
sX[i] = -sX[i];
}
if (Math.abs(y[i])>height) {
sY[i] = -sY[i];
}
}
for (i=0; i<8; i++) {
drawQuad("quad"+i, 0xFFFFFF);
}
};
※ 프레임속도(fps)는 대부분12fps로 맞추어져 있습니다만, 숫자가 많을수록 속도가 빨라집니다.
※ 액션으로만 만들어진 무비입니다. 따라서 소스만 수정하시면 다른 효과를 만들어 낼 수 있습니다.
기타 다른 강좌는 www.goody.pe.kr에 있습니다.
댓글 11
-
∑버디킹카™
2003.01.03 13:34
-
도트매니아
2003.01.03 15:16
매우 신비로운+_+/;; -
twee
2003.01.03 15:19
오우~ 깔끔하고 멋지네요~ ^^ -
조희진
2003.01.03 19:35
오호 신비로움이란.. -
천세은
2003.01.03 23:55
아..근데 액션을 어떻게 삽입하는건가여??? -
세죠위그이
2003.01.07 17:52
천세은//첫 프레임 더블클릭 - 액션 삽입 (전문가 모드(익스퍼트) 에서 붙여넣기 하셔도 됩니다.) -
이현우
2003.01.08 12:36
허엌 김밥님 굳 원츄 추가~ ~-ㅁ-~ -
여우비
2003.01.09 21:55
굉장해.. -
하루공처
2003.01.15 22:08
이거 플래쉬 5.0에서 되나요.. mx에서만 되는것 같은데... --" -
gimbob
2003.01.15 22:56
MX용 스크립트입니다. 아직도 플래시 5사용자가 많지만,
가급적 MX사용을 권해드리고 싶습니다. -
정은빈
2003.10.04 16:33
원츄!!
그리고 배경색을 바꾸면 그 도형의 색도 바뀐다는 장점이!!
너무 멋져 -_-