149개의 실습예제로 배우는 Flash 8.

Presentation on theme: "149개의 실습예제로 배우는 Flash 8."— Presentation transcript:

1 149개의 실습예제로 배우는 Flash 8

2 버튼 심벌 활용하기 Lesson 11 책대로 하기 1. 버튼 심벌 만들기 기본적인 버튼 심벌을 만드는 방법에 대해 알아봅니다.
Lesson11\버튼만들기.fla Lesson11\버튼만들기(완성).fla Lesson 11

3 버튼 심벌 활용하기 1. 사각형 툴( )을 선택하고 옵션에서 곡률 반경( )을 지정하여 스테이지에 둥근 사각형을 그린다.
책대로 하기 1. 버튼 심벌 만들기(1) 1. 사각형 툴( )을 선택하고 옵션에서 곡률 반경( )을 지정하여 스테이지에 둥근 사각형을 그린다. 2. 오브젝트를 더블 클릭하여 선택하고 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Type : Button’을 설정한 후 [OK] 단추 클릭 클릭 Lesson 11

4 버튼 심벌 활용하기 책대로 하기 1. 버튼 심벌 만들기(2) 3. [Library] 패널에 있는 버튼 심벌을 더블 클릭하여 심벌 편집 창으로 전환한 후 ‘Over’와 ‘Down’ 프레임에 키 프레임을 삽입하고 오브젝트의 색을 각각 변경 4. 타임 라인에서 ‘Scene 1’을 클릭하고 Test Movie를 실행한 후 마우스 포인터를 버튼에 위치시켜 ‘Up’, ‘Over’, ‘Down’ 상태를 확인 Lesson 11

5 버튼 심벌 활용하기 Lesson 11 책대로 하기 2. Hit 영역 지정하기
Lesson11\hit영역.fla Lesson11\hit영역(완성).fla Lesson 11

6 버튼 심벌 활용하기 1. 텍스트 툴( )을 선택하고 스테이지에 “UP”을 입력
책대로 하기 2. Hit 영역 지정하기(1) 1. 텍스트 툴( )을 선택하고 스테이지에 “UP”을 입력 2. 입력한 텍스트를 버튼 심벌로 등록하기 위해 [F8]을 누르고 [Convert to Symbol] 대화 상자에서 ‘Type : Button’을 설정한 후 [OK] 단추 클릭 클릭 Lesson 11

7 버튼 심벌 활용하기 책대로 하기 2. Hit 영역 지정하기(2) 3. 텍스트 심벌을 더블 클릭하여 심벌 편집 창으로 전환한 후 ‘Over’와 ‘Down’ 프레임에 각각 키 프레임을 삽입하고 “OVER”와 “DOWN”을 입력 4. ‘Hit’ 프레임에 키 프레임을 삽입하고 버튼이 작동할 영역을 사각형 툴( )로 그린다. Lesson 11

8 버튼 심벌 활용하기 5. 타임 라인에서 ‘Scene 1’을 클릭하고 Test Movie를 실행한 후 버튼의 작동을 확인
책대로 하기 2. Hit 영역 지정하기(3) 5. 타임 라인에서 ‘Scene 1’을 클릭하고 Test Movie를 실행한 후 버튼의 작동을 확인 Lesson 11

9 버튼 심벌 활용하기 Lesson 11 책대로 하기 3. 버튼에 음향 효과음 넣기
버튼 심벌의 동작에 따라 효과음이 재생될 수 있도록 설정해 봅니다. Lesson11\효과음넣기.fla Lesson11\효과음넣기(완성).fla Lesson 11

10 버튼 심벌 활용하기 1. 선택 툴( )을 선택하고 스테이지에 있는 버튼을 더블 클릭하여 심벌 편집 창으로 전환
책대로 하기 3. 버튼에 음향 효과음 넣기(1) 1. 선택 툴( )을 선택하고 스테이지에 있는 버튼을 더블 클릭하여 심벌 편집 창으로 전환 2. 새로운 레이어를 추가하고 ‘Down’ 프레임에 빈 키 프레임을 삽입 Lesson 11

11 버튼 심벌 활용하기 책대로 하기 3. 버튼에 음향 효과음 넣기(2) 3. 효과음을 [Library] 패널로 가지고 오기 위해 [File]-[Import]-[Import to Library] 메뉴를 클릭 4. [Import to Library] 대화 상자에서 효과음으로 사용할 ‘chimes.wav’를 선택하고 [열기] 단추를 클릭 클릭 클릭 Lesson 11

12 버튼 심벌 활용하기 책대로 하기 3. 버튼에 음향 효과음 넣기(3) 5. ‘Down’ 프레임에 있는 빈 키 프레임을 선택하고 속성 창에서 ‘Sound : Chimes.wav’을 설정 6. 타임 라인에서 ‘Scene 1’을 클릭하고 Test Movie를 실행한 후 마우스로 버튼을 클릭할 때 효과음이 재생되는 것을 확인 Lesson 11

13 무비 클립 활용하기 Lesson 12 책대로 하기 3. 무비 클립 마스크 만들기
무비 클립에 마스크 기능을 적용하여 다양한 효과를 만들어 봅니다. Lesson12\무비클립마스크.fla Lesson12\무비클립마스크(완성).fla Lesson 12

14 무비 클립 활용하기 1. [Library] 패널에 있는 ‘물고기.jpg’를 스테이지로 드래그하여 중앙에 배치
책대로 하기 3. 무비 클립 마스크 만들기(1) 1. [Library] 패널에 있는 ‘물고기.jpg’를 스테이지로 드래그하여 중앙에 배치 2. 새로운 레이어를 추가하여 이름을 ‘무비’로 변경하고 스테이지에 원을 그린 후 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Type : Graphic’을 설정하고 [OK] 단추 클릭 클릭 드래그 Lesson 12

15 무비 클립 활용하기 책대로 하기 3. 무비 클립 마스크 만들기(2) 3. 다시 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Type : Movie clip’을 설정하고 [OK] 단추 클릭 4. 무비 클립을 더블 클릭하고 편집 창에서 4개의 레이어를 추가하여 각각 다른 위치에서 원이 점점 커지는 모션 트윈을 작성 클릭 Lesson 12

16 무비 클립 활용하기 책대로 하기 3. 무비 클립 마스크 만들기(3) 5. 타임 라인에서 ‘Scene 1’을 클릭하고 무비 클립이 들어있는 ‘무비’ 레이어를 선택한 후 바로 가기 메뉴에서 [Mask]를 클릭 Lesson 12

17 모션 그래픽 만들기 Lesson 13 책대로 하기 1. 줄어드는 모션 그래픽 만들기
모션 트윈과 마스크를 이용한 모션 그래픽을 이용하여 이미지가 줄어드는 듯한 느낌을 표현해 봅니다. Lesson13\모션그래픽1.fla Lesson 13

18 모션 그래픽 만들기 책대로 하기 1. 줄어드는 모션 그래픽 만들기(1) 1. 새로운 문서의 속성 창에 있는 Size 단추를 클릭하여 ‘Dimensions : 500px, X 250px, Frame rate : 40fps’를 설정 2. 문서를 ‘모션그래픽.fla’로 지정한 후 모션 그래픽에 필요한 그림을 불러 오기 위해 [File]-[Import]-[Import to Library] 메뉴를 클릭 클릭 클릭 Lesson 13

19 모션 그래픽 만들기 책대로 하기 1. 줄어드는 모션 그래픽 만들기(2) 3. [Import to Library] 대화 상자가 표시되면 [Ctrl]을 누른 상태에서 ‘1.jpg’와 ‘long1.jpg’를 선택하고 [열기] 단추 클릭 4. 레이어의 이름을 ‘원본그림’으로 변경하고 [Library] 패널에 있는 ‘1.jpg’를 스테이지로 드래그하여 표시 클릭 드래그 Lesson 13

20 모션 그래픽 만들기 책대로 하기 1. 줄어드는 모션 그래픽 만들기(3) 5. 스테이지에 있는 그림을 선택하고 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Name : 원본, Type : Movie clip’을 설정한 후 [OK] 단추 클릭 6. ‘무비’ 레이어를 추가하고 [Library] 패널에 있는 ‘long1.jpg’를 스테이지로 드래그하여 표시 클릭 드래그 Lesson 13

21 모션 그래픽 만들기 책대로 하기 1. 줄어드는 모션 그래픽 만들기(4) 7. 스테이지에 있는 그림을 선택하고 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Name : 무비, Type : Movie clip’을 설정한 후 [OK] 단추 클릭 8. 무비 클립을 더블 클릭하고 편집 창에서 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Name : 늘린그림, Type : Movie clip’을 설정한 후 [OK] 단추 클릭 클릭 클릭 Lesson 13

22 모션 그래픽 만들기 9. 레이어 이름을 ‘늘린그림’으로 변경하고 50프레임에 키 프레임을 삽입
책대로 하기 1. 줄어드는 모션 그래픽 만들기(5) 9. 레이어 이름을 ‘늘린그림’으로 변경하고 50프레임에 키 프레임을 삽입 10. 50프레임에 있는 그림을 선택하고 속성 창에서 ‘X : -500’을 설정하여 왼쪽으로 500픽셀 이동시킨 후 모션 트윈을 적용 Lesson 13

23 모션 그래픽 만들기 13. 마스크 심벌의 크기를 오른쪽 방향으로 줄여 오른쪽 방향으로 점차 줄어드는 모션 트윈을 설정
책대로 하기 1. 줄어드는 모션 그래픽 만들기(7) 13. 마스크 심벌의 크기를 오른쪽 방향으로 줄여 오른쪽 방향으로 점차 줄어드는 모션 트윈을 설정 14. ‘마스크’ 레이어를 선택하고 바로 가기 메뉴에서 [Mask]를 클릭하여 마스크를 설정 Lesson 13

24 모션 그래픽 만들기 책대로 하기 1. 줄어드는 모션 그래픽 만들기(8) 15. 레이어를 추가하여 이름을 ‘시간 확보’로 변경하고 100프레임의 바로 가기 메뉴에서 [Insert Frame]을 클릭하여 프레임을 삽입 16. ‘마스크’ 레이어와 ‘늘린그림’ 레이어의 마지막 프레임에 바로 가기 메뉴를 이용하여 빈 키 프레임을 삽입 Lesson 13

25 모션 그래픽 만들기 책대로 하기 1. 줄어드는 모션 그래픽 만들기(9) 17. 타임 라인에서 ‘Scene 1’을 클릭하고 Test Movie를 실행하여 오른쪽에서 밀려오는 듯한 효과의 모션 그래픽을 확인 Lesson 13