플래시 네비게이션 맨땅에 헤딩하기 -5- 버튼과 기본 에니메이션(4)
5강입니다.
4강에서 만들었던 메인버튼1의 방법으로 메인버튼2를 메인버튼1 처럼 만들어 보겠습니다.
그림과 호출명령어는 생략합니다.
잘 이해가 안되시는 분은 4강의 36번 문항에서 72번 문항까지를 다시 보시기 바랍니다.
그리고 5강에서는 메인버튼1을 만들 때와는 순서를 약간 다르게 정리하였습니다.
4강에서 메인버튼1을 만들 때는
여러가지 기능들과 변수들을 많이 만날 수 있는 순서로 진행 하였지만
5강에서는 간결한 순서로 정리하였습니다.
결과물이 달라지거나 새로운 기능이 추가 된것은 없으므로 순서대로 따라만 하시면 됩니다.
1.
메인버튼1을 더블 클릭하여 심볼 편집모드로 갑니다
2.
Over 프레임에 키프레임을 만듭니다.
오브젝트까지 복제되었습니다.
3.
Over프레임에서 텍스트만 선택한 후 심볼 대화상자를 엽니다.
4.
무비클립으로 체크하고 심볼명을 'mt21'로 적어준 뒤 OK합니다.
5.
무비클립 mt21로 지정된 텍스트무비클립을 더블클릭하여 무비클립 편집모드로 갑니다.
6.
레이어의 1번 키프레임을 선택한 후 오른쪽 마우스를 열어서
Create Motion Tween을 누릅니다.
6번프레임을 선택한 후 오른쪽 마우스를 열어
Insert Keyframes 로 키프레임을 추가 합니다.
7.
6번키프레임을 선택한 후
오른쪽 마우스를 연 뒤 Action을 누릅니다.
Stop을 찾아서 더블클릭합니다.
8.
레이어의 6번키프레임에는 액션이 적용되었다는 표시가 보입니다.
액션창을 닫습니다.
9.
마우스가 닿을 때 변화를 더 많이 주기 위하여
폰트의 색상을 변경하겠습니다.
1번이나 6번키프레임을 더블클릭합니다.
트위닝오브젝트 편집화면이 뜹니다.
모션트위닝이 적용된 상태에서 키프레임이 아닌 프레임을 더블 클릭하시면
새로운 키프레임이 생기므로 주의 하시기 바랍니다.
10.
Properties나 왼쪽 툴박스의 색상채움에서 색상대화상자를 열고
색상값을 #660099로 입력하고 엔터합니다.
색사이 바뀌었으면 스테이지 상단의 mt21을 눌러서
mt21무비클립 편집화면으로 돌아 갑니다.
11.
이제 텍스트를 거울 영상으로 뒤집습니다.
1번키프레임을 선택한 상태에서
메뉴-Modify-Transform-Flip Virtical을 눌러서 텍스트를 뒤집어 줍니다.
12.
Properties 대화상자를 엽니다.
Tween 옵션에는 Motion을 Ease에는 1을 선택합니다.
Rotate에는 Auto를 선택합니다.
13.
스테이지 상단 왼쪽의 mt2 심볼을 클릭합니다.
14.
mt2의 심볼 편집화면로 돌아 왔습니다.
Up프레임에서 오른쪽 마우스를 열어 Copy Frames로 스테이지의 오브젝트들을
복사합니다.
15.
Down 프레임에서 오른쪽 마우스를 열어 Paste Frames으로 키프레임까지 붙여 넣습니다.
16.
Over프레임을 Copy Frames로 복사하여 Hit프레임에 Paste Frames으로 붙여 넣습니다.
17.
Up, Over, Down, Hit 프레임을 차례대로 눌러 봅니다.
Up, Down의 형태가 같고
Over, Hit의 형태가 같으면 제대로 된것 입니다.
18.
Properties 대화창을 열고 사운드를 삽입합니다.
Over프레임을 선택한 후 사운드 s1.mp3를 삽입합니다.
Hit프레임을 선택한 후 사운드 s2.mp3를 삽입합니다.
19.
저장 후 퍼블리시하여 메인버튼1번 처럼 작동하는지 확인합니다.
20.
위의 방법으로 메인버튼3~메인버튼7을 무비클립을 포함한 버튼으로 만들어 줍니다.
주의 하실 점입니다.
메인버튼명과 버튼심볼 그리고 무비클립의 이름은 일관성있게 만드셔야 합니다.
그렇지 않으면 나중에 라이브러리 창을 열어 보아도 뭐가뭔지 알수 없게 됩니다.
예를 들어 보겠습니다.
현재 스테이지의 mainbuttn4는
버튼 심볼을 mt4
무비클립은 mt41로 하시면 라이브러리에서 찾기가 쉽습니다.
5강은 여기 까지입니다.
수고하셨습니다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:50:06 Flash에서 이동 됨]</div>
4강에서 만들었던 메인버튼1의 방법으로 메인버튼2를 메인버튼1 처럼 만들어 보겠습니다.
그림과 호출명령어는 생략합니다.
잘 이해가 안되시는 분은 4강의 36번 문항에서 72번 문항까지를 다시 보시기 바랍니다.
그리고 5강에서는 메인버튼1을 만들 때와는 순서를 약간 다르게 정리하였습니다.
4강에서 메인버튼1을 만들 때는
여러가지 기능들과 변수들을 많이 만날 수 있는 순서로 진행 하였지만
5강에서는 간결한 순서로 정리하였습니다.
결과물이 달라지거나 새로운 기능이 추가 된것은 없으므로 순서대로 따라만 하시면 됩니다.
1.
메인버튼1을 더블 클릭하여 심볼 편집모드로 갑니다
2.
Over 프레임에 키프레임을 만듭니다.
오브젝트까지 복제되었습니다.
3.
Over프레임에서 텍스트만 선택한 후 심볼 대화상자를 엽니다.
4.
무비클립으로 체크하고 심볼명을 'mt21'로 적어준 뒤 OK합니다.
5.
무비클립 mt21로 지정된 텍스트무비클립을 더블클릭하여 무비클립 편집모드로 갑니다.
6.
레이어의 1번 키프레임을 선택한 후 오른쪽 마우스를 열어서
Create Motion Tween을 누릅니다.
6번프레임을 선택한 후 오른쪽 마우스를 열어
Insert Keyframes 로 키프레임을 추가 합니다.
7.
6번키프레임을 선택한 후
오른쪽 마우스를 연 뒤 Action을 누릅니다.
Stop을 찾아서 더블클릭합니다.
8.
레이어의 6번키프레임에는 액션이 적용되었다는 표시가 보입니다.
액션창을 닫습니다.
9.
마우스가 닿을 때 변화를 더 많이 주기 위하여
폰트의 색상을 변경하겠습니다.
1번이나 6번키프레임을 더블클릭합니다.
트위닝오브젝트 편집화면이 뜹니다.
모션트위닝이 적용된 상태에서 키프레임이 아닌 프레임을 더블 클릭하시면
새로운 키프레임이 생기므로 주의 하시기 바랍니다.
10.
Properties나 왼쪽 툴박스의 색상채움에서 색상대화상자를 열고
색상값을 #660099로 입력하고 엔터합니다.
색사이 바뀌었으면 스테이지 상단의 mt21을 눌러서
mt21무비클립 편집화면으로 돌아 갑니다.
11.
이제 텍스트를 거울 영상으로 뒤집습니다.
1번키프레임을 선택한 상태에서
메뉴-Modify-Transform-Flip Virtical을 눌러서 텍스트를 뒤집어 줍니다.
12.
Properties 대화상자를 엽니다.
Tween 옵션에는 Motion을 Ease에는 1을 선택합니다.
Rotate에는 Auto를 선택합니다.
13.
스테이지 상단 왼쪽의 mt2 심볼을 클릭합니다.
14.
mt2의 심볼 편집화면로 돌아 왔습니다.
Up프레임에서 오른쪽 마우스를 열어 Copy Frames로 스테이지의 오브젝트들을
복사합니다.
15.
Down 프레임에서 오른쪽 마우스를 열어 Paste Frames으로 키프레임까지 붙여 넣습니다.
16.
Over프레임을 Copy Frames로 복사하여 Hit프레임에 Paste Frames으로 붙여 넣습니다.
17.
Up, Over, Down, Hit 프레임을 차례대로 눌러 봅니다.
Up, Down의 형태가 같고
Over, Hit의 형태가 같으면 제대로 된것 입니다.
18.
Properties 대화창을 열고 사운드를 삽입합니다.
Over프레임을 선택한 후 사운드 s1.mp3를 삽입합니다.
Hit프레임을 선택한 후 사운드 s2.mp3를 삽입합니다.
19.
저장 후 퍼블리시하여 메인버튼1번 처럼 작동하는지 확인합니다.
20.
위의 방법으로 메인버튼3~메인버튼7을 무비클립을 포함한 버튼으로 만들어 줍니다.
주의 하실 점입니다.
메인버튼명과 버튼심볼 그리고 무비클립의 이름은 일관성있게 만드셔야 합니다.
그렇지 않으면 나중에 라이브러리 창을 열어 보아도 뭐가뭔지 알수 없게 됩니다.
예를 들어 보겠습니다.
현재 스테이지의 mainbuttn4는
버튼 심볼을 mt4
무비클립은 mt41로 하시면 라이브러리에서 찾기가 쉽습니다.
5강은 여기 까지입니다.
수고하셨습니다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:50:06 Flash에서 이동 됨]</div>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 13개
그 매력에 완전히 폭 빠져서 헤어 나오질 못하겠습니다
[http://www.imt2000plaza.com/01.html]
버튼2에는 수평으로...근데 뭐가 안맞음....ㅠ.ㅠ
버튼3에는 스케일을...색상도 넣을껄.....ㅠㅠ
[http://www.imt2000plaza.com/01_1_08.html]
잠시 다른것 좀 손보러 슈웅~~~~!
응용까지....므흣~~
맨땅에 헤딩 3번하면.......땅이라도 들어가게 헤딩해야지유....ㅎㅎㅎ
언제나 감사드립니다...
[http://sijeon.com/aa/01-7.html]
Tab 키로 각종 윈도우가 감춰지는것은 포토ㅤㅅㅑㅍ과 같군요,,
Tab, z, a, 스페이스바,, 요건 헤딩하면서 개인적으로 많이 쓰는 단축키입니다.
메인버튼 > 무비클립 > 모션트위닝(액션) > 트위닝 오브젝스(폰트속성) 충분히 이해하고 따라붙었습니다.
http://www.phosay.com/flash/december_01.html
두분의 탐구심에 경의를....^^
결과물입니다. ㅎㅎ
http://mirisa.oranc.co.kr/mirisa/swf/01.swf
참 잘했어요 도장 쾅~
기운 내세요..^^
감사합니다.. 여기도 잘 따라왔습니다.^^
100점!