플래시 네비게이션 맨땅에 헤딩하기 -7- 무비클립과 프레임액션(2)

· 19년 전 · 2506 · 18
7강입니다.

여기까지만 따라 하신 분이라도 이제는 응용하여
어느정도의 네비게이션 구현이 크게 어렵지 않으실 것입니다.
이제부터는 중급정도의 강좌입니다.
플래시의 재미를 만끽하실 수 있을 것입니다.


1.
서브버튼 전체를 다 선택한 다음 심볼대화상자를 엽니다.
무비클립에 체크한 후 심볼명을 'sm1'로 저장합니다.
sm1은 서브무비클립 1번의 약자입니다.

2.
스테이지의 서브버튼 전체가 하나의 무비클립이 되었습니다.
이제 고급 기능을 만나 보겠습니다.
스테이지의 왼쪽 상단에 있는 Insert Layer Folder 아이콘을 누릅니다.
레이어폴더는 같은 성격의 레이어들을 묶어서 하나의 레이어 처럼 제어 할수 있는 기능입니다.
2.jpg

3.
새로만든 레이어 폴더의 이름을 '서브무비'로 바꾼 뒤
서브버튼레이어를 옮겨서 서브무비 폴더에 넣습니다.
넣는 방법은 간단합니다. 마우스로 그냥 옮기시면 됩니다.
3.jpg

4.
서브버튼레이어의 이름을 '버튼무비1'로 바꾸고 저장합니다.

5.
버튼무비1의 왼쪽 하얀 끝부분과 메인버튼1의 왼쪽 끝부분이 나란히 되도록
버튼무비1의 위치를 정렬합니다.
5.jpg

6.
서브무비 폴더 안에서 레이어 3개를 추가하고 레이어이름을
버튼무비2, 버튼무비3, 버튼무비4로 변경합니다.
6.jpg

7.
Info창을 엽니다. 단축키는 Ctrl+I입니다.

8.
버튼무비1을 클릭합니다.
Info 화면에서 Y의 위치 값을 메모합니다.
8.jpg

9.
버튼무비1레이어의 눈동자를 끕니다.
버튼무비1레이어를 잠급니다.
스테이지의 버튼무비1이 시야에서 사라졌습니다.
9.jpg


**** 여기서 잠깐..****
이제부터는 버튼무비1 무비클립을 라이브러리의 Duplicate 명령으로
버튼무비2, 버튼무비3, 버튼무비4를 복제하여 스테이지로 가져와서
서브무비 폴더안의 해당 레이어 안에 넣을 것입니다.
8번에서 Y의 위치 값을 메모한 것은 정렬시
수평정렬의 번거로움을 줄이기 위함이었습니다.

10.
라이브러리 창으로 갑니다.
폴더 밖에 있는 sm1을 선택한 후 오른쪽 마우스를 열어서 Duplicate를 누릅니다.
10.jpg

11.
무비클립에 체크한 후 심볼명을 'sm2'로 적고 OK합니다.
계속하여 sm3, sm4 무비클립을 만듭니다.
11.jpg

12.
다시 저장을 합니다.

13.
버튼무비2레이어를 선택합니다.
라이브러리에서 sm2 심볼을 스테이지로 꺼냅니다.

14.
Info 창을 불러온 뒤 8번에서 메모해 둔 Y의 위치 값을 Y에 넣어줍니다.

15.
메뉴에서 View-Rulers를 클릭합니다.
그림과 같은 눈금자가 나타납니다.
15.jpg

16.
왼쪽 눈금자에 마우스를 대고 오른쪽으로 당기면 세로 가이드 선이 나타나고
윗쪽 눈금자에 마우스를 대고 아랫쪽으로 당기면 가로 가이드 선이 나타납니다.
정렬할 때 적극 활용하시기 바랍니다.
16.jpg

17.
세로 가이드선을 활용하여 메인버튼2와 무비클립의 왼쪽 끝을 정렬합니다.
17.jpg

18.
정렬이 끝났으면 저장을 합니다.

19.
버튼무비2레이어를 잠급니다.
버튼무비2레이어의 눈동자를 끕니다.

20.
버튼무비3레이어를 선택합니다.
라이브러리에서 Sm3 무비클립심볼을 스테이지로 꺼냅니다.

23.
Info창의 Y 좌표에 메모해둔 위치값을 적습니다.
수평정렬이 되었습니다.

24.
가이드라인을 이용하여 수직정렬을 합니다.
너무 한 쪽으로 치우쳐 지면 보기에 좋지 않으므로
메인버튼3의 왼쪽 끝과 서브버튼2의 왼쪽 끝이 같게 정렬합니다.
24.jpg

25.
정렬이 끝나면 저장합니다.

26.
무비버튼3레이어를 잠그고 눈동자를 끕니다.

27.
버튼무비4레이어를 선택하고
라이브러리에서 sm4 무비클립 심볼을 스테이지로 꺼냅니다.

28
Info 창을 열고 메모한 Y위치값을 입력합니다.
버튼무비 네개의 Y값은 모두 동일합니다.

29.
가이드라인을 활용하여 수직정렬을 합니다.
메인버튼4와 서브버튼3의 오른쪽 끝을 정렬합니다.
29.jpg

30.
저장합니다.

31.
이제 각 서브무비에 속의 서브버튼에
Get URL액션을 주겠습니다.
버튼무비2레이어만 남기고
서브무비 속의 모든 레이어를 잠그고 눈동자를 닫습니다.
31.jpg

32.
스테이지의 sm2무비클립을 클릭하여 편집모드로 갑니다.
서브버튼1을 선택하고 오른쪽 마우스로 액션창을 엽니다.
액션창을 열면 현재 복제되기 전의 버튼심볼에 명령한 GetURL 액션이 자동으로 나타납니다.
32.jpg

33.
주소창에 http://grinbi62.com을 입력합니다.
윈도우는 여러분이 보고 싶은 형태로 선택합니다.

34.
액션창을 닫지 않은 상태에서 서브버튼2를 선택합니다.
하단박스의 주소라인을 클릭하면 입력상자가 나옵니다.
주소란에는 알고 계시는 사이트 주소를 입력합니다.
윈도우 형태도 임의로 선택합니다.
되도록 다양한 형태를 선택하여 옵션에 따른 변화를 확인합니다.

35.
34번 문항과 같은 방법으로 서브버튼3과 서브버튼4의 주소와 윈도우를 변경합니다.

36.
sm2 무비클립 속에 있는 버튼들의 주소를 다 변경하였으면 다시 스테이지로 갑니다.

37.
버튼무비2레이어의 눈동자를 끈 뒤 레이어를 잠급니다.

38.
버튼무비3레이어의 눈동자를 켜고 잠금을 해제합니다.
무비클립 편집모드로 가서 각 버튼의 주소와 윈도우를 임의로 변경합니다.

39.
스테이지로 돌아와서 저장을 합니다.
버튼무비3레이어의 눈동자를 끈 후 레이어를 잠급니다.

40.
버튼무비4레이어의 눈동자를 켜고 잠금을 해제합니다.
무비클립 편집모드로 가서 각 버튼의 주소와 윈도우를 임의로 변경합니다.
스테이지로 돌아와서 저장을 합니다.


**** 여기서 잠깐 ****
좀 번거로우시더라도 각 무비클립 속에 있는 모든 버튼은 각각 다른 것으로
입력하시기 바랍니다.
액션과 친해지기 위한 과정이니 꼭 지켜 주시기 바랍니다.

7강은 여기까지입니다.

수고하셨습니다.
[이 게시물은 관리자님에 의해 2011-10-31 16:50:06 Flash에서 이동 됨]
|

댓글 18개

너무 고생하십니다...축복이 함께..하시길..^^;;
감사합니다.
사서 하는 고생에 파김치가 되고 있습니다.
격려해주심에 힘입어 다시 기운을 차립니다.
넵~~~! 기운 차리십시오~~~~!

수고하신만큼 빛을 보실 수 있도록 최선을 다하겠습니다....

답글 달고 또 잠시 외도갑니다...뭘 배우려고....ㅎㅎㅎ

더욱 더 파김치 되시라고(?) 졸라야 겠습니다.

[http://www.imt2000plaza.com/01.html]

메인1/2/3에 부메뉴 각 하나 왼쪽으로 ㅤㅁㅏㅊ추어서 넣고 메인7에 오른쪽 끝에 맞추어

부메뉴4넣고 부메뉴4의 맨끝에 4번 링크를 제 홈으로.......ㅋㅋㅋ
이제 저 서브 버튼들이 다 사리지고 메인버튼에서 호출할 때만 등장 할겁니다.
멀뜽멀뚱 나오는게 아니라..그럴듯한 모양새로..^^
그래야 겠지요....ㅎㅎㅎ

아침에 질답의 링크 알려주신걸보고 무식하게 각 프레임마다 컨버트해서 구현해 보았습니다

[http://www.imt2000plaza.com/_0000.html]
잘 보았습니다.
수고하셨습니다....^^
그 링크의 네비게이션과 지금 만들고 있는 것은 갈래가 좀 많이 다른 부분입니다.
넵~~~! 잘 알겠습니다.....

그런데 저 플래쉬에 폭 빠져서 몬나오게 하신 책임(?)을 지셔야 할듯 합니다.....ㅎㅎㅎ

많이 피곤하실텐데 좀 휴식을 취하십시오!~~~~

저도 제 볼일을 좀 보고용...이따가 뵙겠습니다....
저 이제 1장 끝났는데.

벌써 7장이넹.

오늘 회사 눈치 살살 보며 연습해야겠습니다. ㅋㅋ
눈치 잘 살피면서 하세요..^^
건강 챙기면서 천천히 하세요~!!

착한 학생이 되려고 열심히 헤딩하고 있습니다.

담배사러 못가고 오전내내 굶었더니 어질어질 합니다. ^^

http://www.phosay.com/flash/december_01.html

감사합니다.
저도 담배가 떨어 졌는데 몰골이 말이 아니라서 못나가고 있습니다.
사러 가시면 제것도 한곽 사셔서 퀵으로...^^
아주 가끔 옛날 생각도 납니다.
아그야 ,, 담배 한갑만 사다줄수 있겠니?! ^^,,
요사이 일부러 딱 한갑만 사옵니다,, 임상결과 훨씬 덜 피우게 되더군요,,
거기다 가급적 전날 사온 시간보다 조금이라도 늦게 사러 갈려고 노력합니다.
특별히 머리쥐날 일이 없는한 몸뚱이 생각도 해줘야 한다는,,,ㅎㅎ

몸뚱이에 들고 나는 모든것을 필터링하는라 몸뚱이 나름대로 얼마나 고생이 많겠습니까??
담배 끊으세요~~ 건강에 안 좋습니다...
조만간요..
곧...^^
수고하셨습니다..^^
저도 7강 끝~
수고하셨습니다..^^
이제서야 답글 답니다..
안삐치셨죠?
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
19년 전 조회 3,314
19년 전 조회 2,881
19년 전 조회 2,231
19년 전 조회 2,752
19년 전 조회 1,602
19년 전 조회 1,759
19년 전 조회 1,858
19년 전 조회 2,027
19년 전 조회 1,705
19년 전 조회 1,844
19년 전 조회 1,795
19년 전 조회 1,866
19년 전 조회 1,550
19년 전 조회 2,675
19년 전 조회 2,006
19년 전 조회 3,257
19년 전 조회 3,292
19년 전 조회 2,548
19년 전 조회 2,630
19년 전 조회 2,458
19년 전 조회 2,708
19년 전 조회 2,707
19년 전 조회 3,182
19년 전 조회 2,897
19년 전 조회 5,308
19년 전 조회 2,125
19년 전 조회 2,213
19년 전 조회 2,035
19년 전 조회 1,956
19년 전 조회 1,952
19년 전 조회 2,143
19년 전 조회 3,220
19년 전 조회 3,089
19년 전 조회 2,863
19년 전 조회 2,563
19년 전 조회 2,650
19년 전 조회 2,305
19년 전 조회 2,344
19년 전 조회 1,616
19년 전 조회 2,331
19년 전 조회 2,690
19년 전 조회 2,682
19년 전 조회 2,987
19년 전 조회 2,763
19년 전 조회 1,728
19년 전 조회 1,835
19년 전 조회 2,735
19년 전 조회 2,236
19년 전 조회 3,993
19년 전 조회 2,507
19년 전 조회 2,387
19년 전 조회 3,533
19년 전 조회 3,112
19년 전 조회 2,248
19년 전 조회 3,039
19년 전 조회 2,249
19년 전 조회 3,101
19년 전 조회 3,519
19년 전 조회 5,221
19년 전 조회 3,133
19년 전 조회 3,140
19년 전 조회 2,730
19년 전 조회 2,463
19년 전 조회 2,719
19년 전 조회 2,457
19년 전 조회 2,567
19년 전 조회 2,372
19년 전 조회 2,711
19년 전 조회 2,981
19년 전 조회 3,261
19년 전 조회 7,066
19년 전 조회 5,190
19년 전 조회 2,440
19년 전 조회 5,170
19년 전 조회 3,113
19년 전 조회 2,469
19년 전 조회 2,156
19년 전 조회 3,593
19년 전 조회 2,901
19년 전 조회 3,272
19년 전 조회 2,896
19년 전 조회 3,399
19년 전 조회 2,725
19년 전 조회 3,466
19년 전 조회 2,432
19년 전 조회 4,111
19년 전 조회 3,303
19년 전 조회 4,139
19년 전 조회 3,486
19년 전 조회 3,132
19년 전 조회 3,413
19년 전 조회 2,458
19년 전 조회 2,864
19년 전 조회 2,357
19년 전 조회 3,730
19년 전 조회 4,763
19년 전 조회 3,786
19년 전 조회 1,755
19년 전 조회 2,754
19년 전 조회 2,424