웹디자인 강의
Flash 부드럽게이동하는 공식을 이용한 바네이메뉴 만들기(2)
2005.01.12 00:11
2.for 문으로 메뉴의 위치 잡아주기
먼저 높이가 같고 넓이가 모두 500 픽셀인 이미지 7개를 준비합니다. 모두 무비클립으로 하나식 만드세요.(노 가 다 -_-) 만든 무비클립들의 인스턴스 네임을 하나하나 바꿔줍니다.
img0, img1, img2, img3 ......... 이런식으로요(또 노 가 다 ㅡ_ㅡ;)
그리고 그 무비클립들을 순서대로 대충 놓으시고 정렬 패널을 열어서 위 아래 정렬하기버튼(?)을 눌러 위 아래를 정렬해 주새요..
정렬한 그림들이 위 아래는 맞지만 곂치는 부분이 있을 겁니다. 그건 액션으로 정리해 주기로하고
정렬한 그림들을 모두 선택해서 무비클립으로 만들어 줍니다.
그리고 만든 무비클립에 인스턴스 명을 menu 라고 하시고 다음과 같은 액션을 코딩해 주세요..
onClipEvent(load){
for(var i=0; i<7; i++){
this["img"+i]._x = 500*i
}
}
먼저 for 문을 알아야 하겠네요...
for문은 아시는 분은 다 아시겠지만 루프를 돌려줄때 씁니다.
루프는 반복시켜쥰다는 뜻입니다-_-;
for 문은 조건문이 만족하지 않을 때까지 계속 돌려줍니다. 잘못해서 조건문을 잘못쓰면 무한루프 됩니다.
계속 돌기만 하다가 따운됩니다-_-
근데 무한루프도 필요할 때도 있습니다.(제 생각으로는...)
형식은 다음과 같습니다.
for(초기값; 조건문; 증가값;){
실행할 액션스크립트;
}
초기값엔 변수명=초기값 이렇게 적어주고요 조건문이 만족하지 않을 때 까지 증가값대로 변수의 값을 올리면서 실행할 액션스크립트를 계속 반복 실행해 줍니다.
아웃풋창에 1 부터 1000 까지 출력하는 방법입니다. (또 노가다 생각하시는 분들 걱정마십쇼..-_-)
for(i = 1; i < 1001; i++;) {
trace(i);
}
trace 는 아웃풋 창에 출력해주는 스크립트인데 왜 필요한지는 모르겠습니다. 아시는 분들 토좀 달아주세요..
위 액션스크립트의 뜻은
처음에 i 값은 1 이고 i 가 1001 보다 작을 때 까지 i 를 1씩 증가시키면서 아웃풋 창에 i 를 출력해라
라는 뜻입니다.
그니까 i가 1일때는 조건문이 만족하니까 아웃풋 창에 i 즉 1을 출력시키고 i를 1 증가시킵니다.
(i++ 는 i = i+1 과 i += 1 과 같은 뜻입니다.) 이제 i 는 2죠... 또 조건문이 만족하네요..
그러니 또 돌려야죠..
이렇게 i가 1000이 될때 까지 돌다가 i 가 1001이 되면 조건문이 만족하지 못하지까 루프를 빠져나옵니다.
여기까지 조건문이었고 다기 본론으로 돌아갑니다.
onClipEvent(load){
for(var i=0; i<7; i++){
this["img"+i]._x = 500*i
}
}
이 스크립트였죠... 이제 for 문을 알았으니 이해가 될탠데 아직도 이해가 안되는 부분이 있습니다.
this["img"+i] 부분인데요.. 이건 this.img0 ~ this.img6 이거랑 같습니다.
근데 제가 왜 위처럼 썼냐??
그건 . 구분자를 쓰면 + 연산자를 쓸 수 없기 때문입니다. + 연산자는 두 숫자를 더해주기도 하지면 두 숫자와 문자를 합쳐서 하나의 문자를 만들어 주기도 합니다.
이젠 다 이해가 될 겁니다.
다음 강좌에선 본격적으로 바네이 메뉴를 제작해 봅시다..
먼저 높이가 같고 넓이가 모두 500 픽셀인 이미지 7개를 준비합니다. 모두 무비클립으로 하나식 만드세요.(노 가 다 -_-) 만든 무비클립들의 인스턴스 네임을 하나하나 바꿔줍니다.
img0, img1, img2, img3 ......... 이런식으로요(또 노 가 다 ㅡ_ㅡ;)
그리고 그 무비클립들을 순서대로 대충 놓으시고 정렬 패널을 열어서 위 아래 정렬하기버튼(?)을 눌러 위 아래를 정렬해 주새요..
정렬한 그림들이 위 아래는 맞지만 곂치는 부분이 있을 겁니다. 그건 액션으로 정리해 주기로하고
정렬한 그림들을 모두 선택해서 무비클립으로 만들어 줍니다.
그리고 만든 무비클립에 인스턴스 명을 menu 라고 하시고 다음과 같은 액션을 코딩해 주세요..
onClipEvent(load){
for(var i=0; i<7; i++){
this["img"+i]._x = 500*i
}
}
먼저 for 문을 알아야 하겠네요...
for문은 아시는 분은 다 아시겠지만 루프를 돌려줄때 씁니다.
루프는 반복시켜쥰다는 뜻입니다-_-;
for 문은 조건문이 만족하지 않을 때까지 계속 돌려줍니다. 잘못해서 조건문을 잘못쓰면 무한루프 됩니다.
계속 돌기만 하다가 따운됩니다-_-
근데 무한루프도 필요할 때도 있습니다.(제 생각으로는...)
형식은 다음과 같습니다.
for(초기값; 조건문; 증가값;){
실행할 액션스크립트;
}
초기값엔 변수명=초기값 이렇게 적어주고요 조건문이 만족하지 않을 때 까지 증가값대로 변수의 값을 올리면서 실행할 액션스크립트를 계속 반복 실행해 줍니다.
아웃풋창에 1 부터 1000 까지 출력하는 방법입니다. (또 노가다 생각하시는 분들 걱정마십쇼..-_-)
for(i = 1; i < 1001; i++;) {
trace(i);
}
trace 는 아웃풋 창에 출력해주는 스크립트인데 왜 필요한지는 모르겠습니다. 아시는 분들 토좀 달아주세요..
위 액션스크립트의 뜻은
처음에 i 값은 1 이고 i 가 1001 보다 작을 때 까지 i 를 1씩 증가시키면서 아웃풋 창에 i 를 출력해라
라는 뜻입니다.
그니까 i가 1일때는 조건문이 만족하니까 아웃풋 창에 i 즉 1을 출력시키고 i를 1 증가시킵니다.
(i++ 는 i = i+1 과 i += 1 과 같은 뜻입니다.) 이제 i 는 2죠... 또 조건문이 만족하네요..
그러니 또 돌려야죠..
이렇게 i가 1000이 될때 까지 돌다가 i 가 1001이 되면 조건문이 만족하지 못하지까 루프를 빠져나옵니다.
여기까지 조건문이었고 다기 본론으로 돌아갑니다.
onClipEvent(load){
for(var i=0; i<7; i++){
this["img"+i]._x = 500*i
}
}
이 스크립트였죠... 이제 for 문을 알았으니 이해가 될탠데 아직도 이해가 안되는 부분이 있습니다.
this["img"+i] 부분인데요.. 이건 this.img0 ~ this.img6 이거랑 같습니다.
근데 제가 왜 위처럼 썼냐??
그건 . 구분자를 쓰면 + 연산자를 쓸 수 없기 때문입니다. + 연산자는 두 숫자를 더해주기도 하지면 두 숫자와 문자를 합쳐서 하나의 문자를 만들어 주기도 합니다.
이젠 다 이해가 될 겁니다.
다음 강좌에선 본격적으로 바네이 메뉴를 제작해 봅시다..