웹디자인 강의
Flash 플래시로 브러쉬 툴처럼 그림그리는 스크립트..
2003.06.03 12:56
http://sena.bizhrd.com/senaflash/draw.html
일단 미리보시고.. 아무것도 안뜨는데.. 익스플로러 왼쪽 위쪽에서 한번 마우스를 클릭하신채로
움직여보세요.. 포토샵에서 브러시툴로 그림그리듯이.. 무비를 별로 크게 안만들어서 화면 4분의 1정도까지
밖에 안그려집니다..
시간관계상 액션만 그냥 써드립니다..
액션만 몇줄이면 다 끝나거든요..^_^;;
아무 무비클립이나 만듭니다..그냥 액션을 넣기 위한 무비클립이니깐 스테이지 밖에 놓으셔도 되고
빈무비클립만드셔서 스테이지에 올려놓으셔도 되고..
그다음 그 무비클립에 아래의 액션을 넣어줍니다...
onClipEvent (load) {
_root.createEmptyMovieClip( "line1", 20 );
}
onClipEvent (mouseDown) {
_root.down=1;
_root.line1.moveTo(_root._xmouse,_root._ymouse );
}
onClipEvent (mouseUp) {
_root.down=0;
}
onClipEvent (enterFrame) {
if(_root.down){
_root.line1.lineStyle( 0, 0x336699, 100 );
_root.line1.lineTo(_root._xmouse,_root._ymouse);
updateAfterEvent();
}
}
설명을 드리죠..
먼저원리는 플래시의 moveTo와 lineTo를 이용해서 선을 그리는거구요..
하나하나 짚어 나가보죠..
onClipEvent (load) {
_root.createEmptyMovieClip( "line1", 20 );
// 무비클립이 로드됐을때..그러니까 이 액션은 처음에 한번만 실행됩니다.
createEmptymovieClip은 무비클립을 생성시키는 겁니다..
위에서 line1은 무비클립의 인스턴스네임.. 20은 depth입니다..즉 무비상에서의 높이죠..
클수록 위쪽에 위치하게 되서 하위의 것들을 덮어버리게 되죠...
레퍼런스를 보면 어차피 다 나옵니다..^_^;; 영어로 나오긴 하지만..;;
}
onClipEvent (mouseDown) {
_root.down=1;
_root.line1.moveTo(_root._xmouse,_root._ymouse );
}
마우스가 눌렸을때...
down에다가 1이란 참값을 넣어줍니다..
마우스가 눌렸다는 것을 무비에 전달해주는 역할을 합니다..
그리고 moveTo는 draw하기위한 메써드중에 하나인데요..
선의 시작점을 지정해줍니다..
마우스를 클릭할 당시에 마우스의 위치로 시작점을 이동해줍니다..
그래야 마우스가 눌려진 위치부터 그림을 그리기 시작하겠죠?...
onClipEvent (mouseUp) {
_root.down=0;
}
마우스클릭을 그만 두면 즉..release하면.. down값에 거짓값을 넣어줍니다..
그리기를 그만두게하기위한 액션이죠..
onClipEvent (enterFrame) {
if(_root.down){
down값을 체크해서 마우스가 눌렸을때만 아래의 액션..즉 선을 그리는 액션을 실행시킵니다..
_root.line1.lineStyle( 0, 0x336699, 100 );
선의 스타일을 정해주는 메써드입니다..
앞에 0은 선의 두께..0일때는 플래시의 hairline의 두께를 가지게 됩니다.. 없는게 아니구요...
그다음 0x336699는 눈치채셨겠지만 컬러를 나타냅니다.. 0x는 가만 두시구요..(플래시에서의 컬러 표현
법중 하나입니다..) 뒤에다가 rgb의 16진수 값을 넣어주면 됩니다..
그다음의 100은 알파값을 나타냅니다.. 100보다 작은값을 가지게 되면 점점 투명해지죠...
_root.line1.lineTo(_root._xmouse,_root._ymouse);
lineTo가 직선의 끝점.. 아까 moveTo는 시작점을 지정해주고..lineTo로 끝점을 지정해주는거죠..
끝점을 마우스의 위치로 해주면서 계속 그림이 그려지게 됩니다..
updateAfterEvent();
이건 넣으셔도 되고 안넣으셔도 되는...
setInterval액션을 사용하시거나 할때 fps에 상관없이 플래시에서 화면에 계속 뿌려주게 해주는
역할입니다.. 저는 그냥 습관적으로 넣습니다..그냥 버벅거림을 최소화 시켜주기 위한것이라고
보시면 됩니다..
}
역시 질문있으시면 홈페이지오셔서 질문게시판에... 일일히 확인을 잘 못해서..-_-a....
개선점이 있으면 말씀해주시구요..^_^;; 저도 공부하고 있는거니깐요...
이건 드로우 메써드의 기본 원리입니다..
이걸 좀만 활용하시면 얼마든지 많은 효과에 적용시킬수 있습니다..
레퍼런스 찾아보시면 curveTo메써드도 있는데 이걸로 일러스트에서 그리듯이
곡선도 그릴수 있습니다..
이런걸로 몰할수 있냐 하시는 분이 계실까봐..제가 한거는 아니지만 재밌는 예제를 하나 첨부하죠..
http://feople.com/run/oo/data/dkn/1043948279/elasticBox.swf
휘플에서 칼럼쓰고계시는 dkn님의 무비입니다...
이것도 여러 액션이 물려있지만 기본은 이 curveTo를 이용한겁니다..
한 액션만으로 많은 효과를 낼순 없죠..
마치 덧셈뺄셈만 할줄안다고 삼각함수의 적분을 할수 없는것처럼..
하지만 적분을 하기위해서는 반드시 필요한것이죠.. 그럼..^_^;;
일단 미리보시고.. 아무것도 안뜨는데.. 익스플로러 왼쪽 위쪽에서 한번 마우스를 클릭하신채로
움직여보세요.. 포토샵에서 브러시툴로 그림그리듯이.. 무비를 별로 크게 안만들어서 화면 4분의 1정도까지
밖에 안그려집니다..
시간관계상 액션만 그냥 써드립니다..
액션만 몇줄이면 다 끝나거든요..^_^;;
아무 무비클립이나 만듭니다..그냥 액션을 넣기 위한 무비클립이니깐 스테이지 밖에 놓으셔도 되고
빈무비클립만드셔서 스테이지에 올려놓으셔도 되고..
그다음 그 무비클립에 아래의 액션을 넣어줍니다...
onClipEvent (load) {
_root.createEmptyMovieClip( "line1", 20 );
}
onClipEvent (mouseDown) {
_root.down=1;
_root.line1.moveTo(_root._xmouse,_root._ymouse );
}
onClipEvent (mouseUp) {
_root.down=0;
}
onClipEvent (enterFrame) {
if(_root.down){
_root.line1.lineStyle( 0, 0x336699, 100 );
_root.line1.lineTo(_root._xmouse,_root._ymouse);
updateAfterEvent();
}
}
설명을 드리죠..
먼저원리는 플래시의 moveTo와 lineTo를 이용해서 선을 그리는거구요..
하나하나 짚어 나가보죠..
onClipEvent (load) {
_root.createEmptyMovieClip( "line1", 20 );
// 무비클립이 로드됐을때..그러니까 이 액션은 처음에 한번만 실행됩니다.
createEmptymovieClip은 무비클립을 생성시키는 겁니다..
위에서 line1은 무비클립의 인스턴스네임.. 20은 depth입니다..즉 무비상에서의 높이죠..
클수록 위쪽에 위치하게 되서 하위의 것들을 덮어버리게 되죠...
레퍼런스를 보면 어차피 다 나옵니다..^_^;; 영어로 나오긴 하지만..;;
}
onClipEvent (mouseDown) {
_root.down=1;
_root.line1.moveTo(_root._xmouse,_root._ymouse );
}
마우스가 눌렸을때...
down에다가 1이란 참값을 넣어줍니다..
마우스가 눌렸다는 것을 무비에 전달해주는 역할을 합니다..
그리고 moveTo는 draw하기위한 메써드중에 하나인데요..
선의 시작점을 지정해줍니다..
마우스를 클릭할 당시에 마우스의 위치로 시작점을 이동해줍니다..
그래야 마우스가 눌려진 위치부터 그림을 그리기 시작하겠죠?...
onClipEvent (mouseUp) {
_root.down=0;
}
마우스클릭을 그만 두면 즉..release하면.. down값에 거짓값을 넣어줍니다..
그리기를 그만두게하기위한 액션이죠..
onClipEvent (enterFrame) {
if(_root.down){
down값을 체크해서 마우스가 눌렸을때만 아래의 액션..즉 선을 그리는 액션을 실행시킵니다..
_root.line1.lineStyle( 0, 0x336699, 100 );
선의 스타일을 정해주는 메써드입니다..
앞에 0은 선의 두께..0일때는 플래시의 hairline의 두께를 가지게 됩니다.. 없는게 아니구요...
그다음 0x336699는 눈치채셨겠지만 컬러를 나타냅니다.. 0x는 가만 두시구요..(플래시에서의 컬러 표현
법중 하나입니다..) 뒤에다가 rgb의 16진수 값을 넣어주면 됩니다..
그다음의 100은 알파값을 나타냅니다.. 100보다 작은값을 가지게 되면 점점 투명해지죠...
_root.line1.lineTo(_root._xmouse,_root._ymouse);
lineTo가 직선의 끝점.. 아까 moveTo는 시작점을 지정해주고..lineTo로 끝점을 지정해주는거죠..
끝점을 마우스의 위치로 해주면서 계속 그림이 그려지게 됩니다..
updateAfterEvent();
이건 넣으셔도 되고 안넣으셔도 되는...
setInterval액션을 사용하시거나 할때 fps에 상관없이 플래시에서 화면에 계속 뿌려주게 해주는
역할입니다.. 저는 그냥 습관적으로 넣습니다..그냥 버벅거림을 최소화 시켜주기 위한것이라고
보시면 됩니다..
}
역시 질문있으시면 홈페이지오셔서 질문게시판에... 일일히 확인을 잘 못해서..-_-a....
개선점이 있으면 말씀해주시구요..^_^;; 저도 공부하고 있는거니깐요...
이건 드로우 메써드의 기본 원리입니다..
이걸 좀만 활용하시면 얼마든지 많은 효과에 적용시킬수 있습니다..
레퍼런스 찾아보시면 curveTo메써드도 있는데 이걸로 일러스트에서 그리듯이
곡선도 그릴수 있습니다..
이런걸로 몰할수 있냐 하시는 분이 계실까봐..제가 한거는 아니지만 재밌는 예제를 하나 첨부하죠..
http://feople.com/run/oo/data/dkn/1043948279/elasticBox.swf
휘플에서 칼럼쓰고계시는 dkn님의 무비입니다...
이것도 여러 액션이 물려있지만 기본은 이 curveTo를 이용한겁니다..
한 액션만으로 많은 효과를 낼순 없죠..
마치 덧셈뺄셈만 할줄안다고 삼각함수의 적분을 할수 없는것처럼..
하지만 적분을 하기위해서는 반드시 필요한것이죠.. 그럼..^_^;;
댓글 5
-
-love-
2003.06.03 16:40
와 신기하네요^^좋은강좌네요 -
사이키델리안
2003.06.04 00:10
스크립트를 자세하게 설명해 주셔서 감사합니다^^ -
라이너
2003.06.12 18:59
재밌는 스크립트네요 강좌 잘 고 갑니다 -
나는천재얌
2003.11.05 19:39
소스 어케 짐어넣져?
저가 초짜라서..ㅡㅡ; -
슈이`__`a
2004.01.14 09:13
한번 해볼만 하네요..^^