메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

플래시에서의 Back버튼에 관한 하나의 팁입니다..
제가 아는 티노라는 분이 언제한번 질문하셨던게 기억이 나는데
그때 정확하게 답변을 못드려서..아직까지도-_-;
마음이 아픈..-_-;; 쨌떤..사설은 그만두고..; 들어가보죠..

참고로 조금 어렵습니다-_-;; 프로그램짜시는분이나 액션잘아시는분은
쉽게 이해하시겠지만 저같은 사람은 잘 이해를 못하겠네요..;
이넘의 배열이란 놈때문에..-_-;; 그래도 소스만 그대로 붙여서 쓰시면 되니깐
너무 걱정은 하지 마세요~

이미지 박스 기능은 잘 사용을 못하겠네요..-_-;;그냥 온리 텍스트로 설명드리겠습니다.
(솔직히 이미지가 필요없는..-_-;)
대신 조금의 태그로 약간 정리만 하죠-_-;

1.Back버튼은 왜 만들어야 하나?-_-;

먼저 Back버튼이란게 뭔가 아예 궁금해하시는분이 있으실겁니다.
물론 전부터 알려고 하셨던분이라면 대번에 알아채셨겠지만요^_^;
플래시에는 익스플로러처럼  '뒤로' 라는 버튼이 없습니다..
고작 있어봐야.. rewind,play를 통해 처음부터 다시 재생되는게 고작이죠..
올플래시 홈을 만들었을때는 이것이 더욱더 중요하게 됩니다.
올플래시는 아니더라도 플래시로 네비게이션을 짰을때 문제가 되겠죠...
우리는 웹서핑을 할때 상위메뉴로 돌아가기위해 메뉴를 클릭하기보다는
'뒤로'버튼을 누를때가 종종 있습니다..
게시판을 볼때만해도 '목록보기'버튼을 누르기보다는 뒤로 버튼을 누르기마련이죠.
즉, 이 '뒤로'라는 버튼은 사용자측면에서 여간 편한게 아니라는거죠.
</fieldset>

이것으로 뒤로버튼의 대충의 개념과 필요성을 아셨을꺼라고 생각합니다.-_-;
그럼 본격적으로 소스를 보죠..

2.소스분석

먼저 1프레임에 다음 액션을 넣습니다.(프레임에요..)

frame = [];

띄어쓰기같은건 정확히 하지 않으셔도 별상관 없을것 같습니다.
위의 뜻을 대충 살펴보자면 frame이라는 새로운 배열을 지정해주는거죠.
frame이라는건 고유어가 아니라 제가 그냥 정해준이름이구요..
배열에 대한 자세한 설명은 너무 길어서 드릴수 없을것 같구요..
대충 설명하자면.. frame이란 변수 하나에 여러값들을 넣을수 있는거죠.
왜 복잡하게 배열을 쓰는지는 아래에서 또 설명드리죠..;

다음은 '특정한 프레임'에다가 넣어주는 액션입니다..

frame.push(_currentframe);


특정한 프레임이란건 각 무비의 구간의 시작 프레임을 가르키는겁니다.
예를들어 10프레임에 어떤 무비가 시작해서 20프레임에서 끝납니다.
또 21프레임에서 버튼을 누르면 어떤무비가 시작해서
40프레임에서 끝난다고 생각해보죠..
그럼 지금현재 상태가 40프레임이라고 했을때, '뒤로'버튼을 눌러서 돌아가야
할곳은 어디일까요?.. 바로 전의 무비를 볼수 있는10프레임이 되겠죠..
즉.. 각 단위로 끊어지는 부분, 즉 '뒤로'버튼을 눌렀을때 돌아가야할곳들
(각 무비의 시작부분이 되겠죠?)이 바로 특정한 프레임이 되는거고..
그런 프레임들(방금 예를 든 무비라면 10프레임과 21프레임에 넣어줘야 하겠죠?)

대충 액션의 뜻을 생각해보면 frame라는 배열에다가 push-_-;;
즉 쑤셔넣는겁니다.. _currentframe이라는값을..
_currentframe이라는것은 플래시에서 적용되는값으로 지금현재
재생되고 있는 프레임을 말합니다.. 즉..사용자가 일일히 숫자를 넣어줄 필요없이
항상 현재프레임을 frame이라는 배열에 집어넣어주는거죠..
일단 대충 이렇게 이해하시고.. 넘어가보죠..


마지막으로 '뒤로'버튼에 넣어줘야 할 액션입니다.

on (release) {
             if (_root.frame.length>1) {
                 _root.frame.pop();
                 previousFrame = _root.frame.pop();
                gotoAndPlay (previousFrame);
        }
}


이부분이 조금 어렵습니다(사실 저에겐 위의 두 부분도 힘듭니다-_-;)
그냥 소스를 가지고 붙여넣으셔도 무방합니다..
거의 어느 무비에다가 삽입해도 아무 수정할것도 없이 적용되는 액션이기때문이죠.

그래도 공부하고자 하시는분을 위해서 소스분석을 대충해보면..;
일단 뒤로 버튼을 눌렀을때, if문을 이용한 체크가 나오죠..
아까 지정해준 frame이라는 배열의 length, 즉 길이가 1보다 클때만 액션이
적용되라는거죠. 바꿔말하면 1이하일때는 액션이 적용되지 않게 하라는거죠.
먼저,배열의 length라는것을 생각해보면..
바로위의 액션에서봤듯이 특정프레임을 지날때마다 현재프레임값들이
하나씩 배열에 넣어집니다.. 이럴때마다 배열의 length가 늘어나게 되는겁니다.
그리고 back버튼을 누르면 length가 하나씩 줄어들면서..뒤로 가게 되는거죠.
근데.. 맨처음까지 돌아갔는데도..배열이란 놈은..뒤로버튼을 누르면..
마이너스 값까지 계속 줄어듭니다.. 이렇게 되면 무비가 꼬이게 되기때문에
1보다 클때만 하나씩 줄어들게 해주는거죠..

그담음액션인
_root.frame.pop().;
이 바로 push의 반대개념으로 배열의 제일 마지막값을 삭제해주는겁니다.
그다음은 previousFrame이라는 변수에다가  배열의 마지막값을 삭제해준값,
즉..배열의 끝에서 두번째 값을 집어 넣어주는거죠..
그다음은 goto액션을 이용해서 그 프레임으로 이동하게 해주는거죠..-_-;;
</fieldset>



자자..정리해봅시다..-_-;;
이쯤이면 다들 지치셔서..;; '뒤로'버튼을 누르셨을것 같네요-_-;;
예를 들어보죠..
10프레임부터 시작해서 20프레임까지 월드컵 이라는 글자가 튀어나오는 모션을 줬다고 합니다.
21프레임부터 30프레임은 세나,31프레임부터 40프레임은 Flash라는 글자모션이 있다고하고
생각을 해보죠...
먼저 1프레임에 액션넣어주시는거는 알죠?...1프레임에서 frame배열을 선언해주시고
각 무비들의 시작프레임인 10,21,31프레임에는 두번째 액션을 넣어줍니다.
그리고 back버튼은 항상존재해야하기때문에 레이어를 따로 잡아서
처음부터 끝까지 존재하게 해줘야겠죠?..
그리고 이번엔 메뉴를 만듭니다.. 각 무비가 바로바로 진행이 안되게
1,20,30,40프레임에 stop액션을 주시고..
월드컵,세나,Flash라는 버튼을 모든 프레임에 놓고 ..각 버튼을 눌렀을때
goto를 이용해서 해당 무비가 재생이 되게 한다고 합니다..

무비가 실행됬다고 가정해보죠,
1프레임에서 stop액션에 걸려 멈춰겠죠?.. 아무버튼이나 눌러보죠.
약간 변형을 주기위해 일부러 세나버튼부터 눌러봅니다.-_-;
그러면 21프레임으로 가겠죠?..그러면서  21프레임에 넣어놓은액션때문에
frame이라는 배열에는 21이라는 값이 들어갑니다.
그다음은 월드컵버튼을 눌러보죠.. 마찬가지로 10프레임으로 들어가고
frame이라는 배열에 10이라는 값이 들어갑니다..
여기서 알아두어야 할것은 '배열'이라는것은 말씀드렸다시피
하나의 변수에 여러 공간을 둬서 값을 넣을수 있는거죠..
여기서 10이라는 값이 들어갔다고 해서 전에 '세나'버튼을 눌러서 들어갔떤
'21'이라는 값이 지워지고 들어가는게 아니라
21다음값으로 10이라는수가 들어가는겁니다...
이런식으로 버튼을 누를때마다 계속 프레임값들이 추가되어집니다.
예를들어
21-10-31-10-31-10-21 순으로 값이 들어갔다고 합니다.
이렇게 값들이 무한정으로 들어갈수 있기때문에 바로 배열을 쓰게 되는거죠..
그리고 뒤로 버튼을 누를때마다 끝에 값들을 하나씩 짤라버리기때문에
그 전값을 뽑아내서 그 전 프레임으로 돌아갈수 있는거죠..
그래서 몇번이고 메뉴를 누르고 뒤로 버튼을 눌러도 값이 기억되죠..
마치 플래시나 포토샵의 언두(undo) 명령과도 같은거죠..-_-;;

아..-_-;;어이가 없네요..;
정말 짧게 쓸려고 했던 팁인데..-_-;
또 지루하게 되버렸네요..-_-;
역시 전 안되겠네요..-_-;
그래도 아까워서 그냥 올려야 겠네요..-_-;
도움이 되는분이 한분이라도 계시면 다행이겠네요^.^;
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48035
135 이미지 합성하기 [3] Kei 2002.03.31 25882
134 [키르강좌] 성형수술 시키기 -일본모델편- [3] 키르(SP) 2002.03.31 18036
133 No4. 떠먹는 아이스크림 그리기 [8] file Wings 2002.03.31 9081
132 멋진 글자 만들기 # 2 [8] file w:)style 2002.03.28 6520
131 No3. 쿠션그리기 [8] file Wings 2002.03.28 10488
130 멋진 글자를 만들자~ [8] file w:)style 2002.03.27 6334
129 아쿠아 스타일 초허접 간단 5분만에 찌끄려보기 ㅡㅡ;; [8] file 레쯔 2002.03.25 15825
128 이미지 사이즈(크기) 조절하기. [2] file Kei 2002.03.24 6696
127 No2. 펭귄 그리기 [9] file Wings 2002.03.24 8183
126 No1. 곰돌이그리기 [7] file Wings 2002.03.24 10604
125 블랙홀을 만들자! [8] file w:)style 2002.03.24 3721
124 사진의 뚜렷함과 밝기 높이기 [8] file w:)style 2002.03.24 4437
123 Flash MX의 Action Script에서 이벤트 제어를 메소드로 하기.. [4] file coens 2002.03.23 7417
122 그림에 바둑판 새기기(페인트샵) - 포토샵으로~ [4] ♤재식이~ 2002.03.21 7966
» 플래시에서의 BACK버튼 만들기-_-;;; [9] 세나^.^ 2002.03.19 16147
120 사진에 가을톤 효과 넣기 [4] file w:)style 2002.03.18 6396
119 둥근 버튼 만들기! [3] file w:)style 2002.03.17 6426
118 [紅夜]사진을 유화 느낌이 나게 바꿔보자! [10] file 紅眼의정령사 2002.03.17 10416
117 도트 박스 만들기!! #2 [5] file w:)style 2002.03.17 5325
116 [紅夜]금속재질의 글자를 만들자! [14] file 紅眼의정령사 2002.03.16 13974