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

모션 트윈을 이용한 애니메이션 Lesson 6 책대로 하기 1. 무당벌레 날아가기 처음과 끝에 있는 오브젝트의 변화에 맞춰 중간 단계를 자동으로 생성시켜 주는 모션 트윈에 대해 알아봅니다. Lesson06\위치변화.fla Lesson06\위치변화(완성).fla Lesson 6

모션 트윈을 이용한 애니메이션 책대로 하기 1. 무당벌레 날아가기(1) 1. ‘bugs’ 레이어의 오브젝트를 선택하고 [Modify]-[Convert to Symbol] 메뉴를 클릭하여 ‘Name : 무당벌레, Type : Graphic’을 설정한 후 [OK] 단추 클릭 2. ‘bugs’ 레이어의 1프레임에서 오브젝트의 위치를 정하고 자유 변형 툴( )을 이용하여 방향 및 크기 지정 클릭 Lesson 6

모션 트윈을 이용한 애니메이션 책대로 하기 1. 무당벌레 날아가기(2) 3. ‘bugs’ 레이어의 50프레임을 클릭하고 [Insert]-[Timeline]-[Keyframe] 메뉴를 클릭하여 애니메이션이 끝날 위치에 키 프레임을 삽입 4. ‘bugs’ 레이어의 50프레임에 있는 오브젝트를 드래그하여 오른쪽으로 이동 클릭 Lesson 6

모션 트윈을 이용한 애니메이션 5. 1프레임을 클릭하고 속성 창에서 ‘Tween : Motion’을 설정 책대로 하기 1. 무당벌레 날아가기(3) 5. 1프레임을 클릭하고 속성 창에서 ‘Tween : Motion’을 설정 6. Test Movie를 실행하여 이동되는 애니메이션을 확인 Lesson 6

모션 트윈을 이용한 애니메이션 Lesson 6 책대로 하기 2. 알파 효과 활용하기 심벌에 알파값을 설정하여 투명한 애니메이션을 만들어 봅니다. Lesson06\알파효과.fla Lesson06\알파효과(완성).fla Lesson 6

모션 트윈을 이용한 애니메이션 책대로 하기 2. 알파 효과 활용하기(1) 1. ‘테두리’ 레이어에 흰색 원과 스테이지 중앙에 있는 아이콘 크기의 검은색 원을 하나씩 그린다. 2. 검은색 원은 스테이지 모퉁이에 두고 흰색 원을 선택한 후 [Align] 패널을 이용하여 스테이지 중앙에 위치시킨다. Lesson 6

모션 트윈을 이용한 애니메이션 책대로 하기 2. 알파 효과 활용하기(2) 3. 스테이지 모퉁이에 있던 검은색 원을 선택하고 [Align] 패널을 이용하여 스테이지 중앙에 위치시켜 흰색 원 위에 겹치도록 위치시킨다. 4. 검은색 원을 선택하고 [Delete]를 눌러 지우면 도넛 형태의 모양이 나타나면서 ‘아이콘’ 레이어의 그림이 표시 Lesson 6

모션 트윈을 이용한 애니메이션 책대로 하기 2. 알파 효과 활용하기(3) 5. ‘테두리’ 레이어의 오브젝트를 더블 클릭하여 선택하고 [F8]을 눌러 [Convert to Symbol] 대화 상자에서 ‘Name : 테두리, Type : Graphic’을 설정한 후 [OK] 단추 클릭 클릭 Lesson 6

모션 트윈을 이용한 애니메이션 6. 심벌로 등록된 오브젝트를 선택하고 속성 창의 Color에서 ‘Alpha : 30%’를 설정 책대로 하기 2. 알파 효과 활용하기(4) 6. 심벌로 등록된 오브젝트를 선택하고 속성 창의 Color에서 ‘Alpha : 30%’를 설정 7. 20프레임에 키 프레임을 삽입하고 속성 창의 Color에서 ‘Alpha : 0%’를 설정 Lesson 6

모션 트윈을 이용한 애니메이션 8. 자유 변형 툴( )을 이용하여 오브젝트의 크기를 확대 책대로 하기 2. 알파 효과 활용하기(5) 8. 자유 변형 툴( )을 이용하여 오브젝트의 크기를 확대 9. ‘테두리’ 레이어에 모션 트윈을 설정하고 Test Movie를 실행 Lesson 6

모션 가이드를 이용한 애니메이션 Lesson 7 책대로 하기 1. 회전하는 무당벌레 만들기 모션 가이드를 이용하여 다양한 형태의 회전 애니메이션을 만들어 봅니다. Lesson07\회전.fla Lesson07\회전(완성).fla Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 1. 회전하는 무당벌레 만들기(1) 1. 새로운 레이어를 추가하고 이름을 ‘bugs’로 변경한 후 [Library] 패널에 있는 ‘bugs’ 그래픽 심벌을 스테이지로 드래그하여 표시 2. 자유 변형 툴( )을 이용하여 bugs 심벌의 오브젝트를 적당한 크기로 줄인다. 드래그 Lesson 7

모션 가이드를 이용한 애니메이션 3. 50프레임에 키 프레임을 삽입하고 속성 창에서 ‘Tween : Motion’을 설정 책대로 하기 1. 회전하는 무당벌레 만들기(2) 3. 50프레임에 키 프레임을 삽입하고 속성 창에서 ‘Tween : Motion’을 설정 4. 모션 가이드를 지정하기 위해 ‘bugs’ 레이어를 선택한 상태에서 모션 가이드 레이어 삽입( )을 클릭 Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 1. 회전하는 무당벌레 만들기(3) 5. ‘Guide’ 레이어에서 원형 툴( )을 이용하여 오브젝트가 이동할 경로를 선으로 그린다. 6. 끝이 이어진 폐곡선은 가이드 라인으로 사용할 수 없기 때문에 선택 툴( )로 선의 일부분만 선택하여 지운다. Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 1. 회전하는 무당벌레 만들기(4) 7. ‘bugs’ 레이어의 1프레임을 선택하고 오브젝트를 드래그하여 중심점을 가이드 라인의 시작선 위에 위치시킨다. 8. ‘bugs’ 레이어의 50프레임을 선택하고 오브젝트를 드래그하여 중심점을 가이드 라인의 끝선 위에 위치시킨다. Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 1. 회전하는 무당벌레 만들기(5) 9. 자유 변형 툴( )을 이용하여 ‘bugs’ 레이어의 1프레임과 50프레임에 있는 오브젝트의 방향을 가이드 라인의 진행 방향에 맞춘다. 10. 속성 창에서 ‘Orient to path’를 선택하고 Test Movie를 실행 Lesson 7

모션 가이드를 이용한 애니메이션 Lesson 7 책대로 하기 2. 개미굴 찾아가기 개미가 굴을 찾아 들어가는 애니메이션을 모션 가이드를 통해 만들어 봅니다. Lesson07\개미.fla Lesson07\개미(완성).fla Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 2. 개미굴 찾아가기(1) 1. 새로운 레이어를 추가하고 이름을 ‘개미’로 변경한 후 [Library] 패널에서 ‘개미’ 심벌을 스테이지로 드래그하여 위치시킨다. 2. ‘개미’ 레이어의 30프레임에 키 프레임을 삽입하고 모션 트윈을 설정한 후 31프레임에 빈 키 프레임을 삽입 드래그 Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 2. 개미굴 찾아가기(2) 3. 모션 가이드 레이어 삽입( )을 클릭하고 연필 툴( )로 ‘Guide’ 레이어에 가이드 라인을 그린다. 4. ‘개미’ 레이어에 있는 1프레임과 30프레임의 가이드 라인에 오브젝트의 중심점을 각각 위치시킨다. Lesson 7

모션 가이드를 이용한 애니메이션 책대로 하기 2. 개미굴 찾아가기(3) 5. 자유 변형 툴( )을 이용하여 ‘개미’ 레이어의 30프레임에 있는 오브젝트의 방향과 크기를 조절 6. 속성 창에서 ‘Orient to path’를 선택하고 Test Movie를 실행 Lesson 7

마스크 활용하기 Lesson 8 책대로 하기 1. 사랑의 엽서 만들기 마스크 기능을 이용하여 스테이지의 내용 중에서 하트 모양 부분만 보여지도록 만들어 봅니다. Lesson08\하트.fla Lesson08\하트(완성).fla Lesson 8

마스크 활용하기 책대로 하기 1. 사랑의 엽서 만들기(1) 1. 새로운 레이어를 삽입하고 이름을 ‘하트’로 변경한 후 [Library] 패널에 있는 ‘하트’ 심벌을 스테이지로 드래그하여 위치시킨다. 2. 모션 트윈을 통해 하트가 엽서 위를 이동하는 애니메이션을 만든다. Lesson 8

마스크 활용하기 3. ‘하트’ 레이어를 선택하고 바로 가기 메뉴에서 [Mask]를 클릭 책대로 하기 1. 사랑의 엽서 만들기(2) 3. ‘하트’ 레이어를 선택하고 바로 가기 메뉴에서 [Mask]를 클릭 4. Test Movie를 실행하여 하트 영역에만 아래쪽의 엽서 이미지가 표시되는 것을 확인 클릭 Lesson 8

마스크 활용하기 Lesson 8 책대로 하기 2. 이미지 갤러리 만들기 마스크를 이용하여 이미지를 분할하고 부분적인 모습에서 전체적인 모습이 보이도록 만들어 봅니다. Lesson08\이미지갤러리.fla Lesson08\이미지갤러리(완성).fla Lesson 8

마스크 활용하기 1. [Library] 패널에 있는 ‘물고기.jpg’를 스테이지로 드래그하여 중앙에 위치시킨다. 책대로 하기 2. 이미지 갤러리 만들기(1) 1. [Library] 패널에 있는 ‘물고기.jpg’를 스테이지로 드래그하여 중앙에 위치시킨다. 2. 스테이지의 그림을 선택한 후 [Modify]-[Break Apart] 메뉴를 클릭하여 그림을 분해 클릭 드래그 Lesson 8

마스크 활용하기 3. 라인 툴( )을 선택하고 옵션 창에서 오브젝트 드로잉( )을 누른 후 수평선을 여러 개 그린다. 책대로 하기 2. 이미지 갤러리 만들기(2) 3. 라인 툴( )을 선택하고 옵션 창에서 오브젝트 드로잉( )을 누른 후 수평선을 여러 개 그린다. 4. 그려진 선을 선택한 후 [Modify]-[Break Apart] 메뉴를 클릭하여 선을 분해 클릭 Lesson 8

마스크 활용하기 책대로 하기 2. 이미지 갤러리 만들기(3) 5. 선택 툴( )을 이용하여 선에 의해 나누어진 그림 영역 중에서 홀수번 째 조각을 [Shift]를 누른 상태에서 클릭하여 선택 6. [Edit]-[Cut] 메뉴를 클릭하여 홀수번 째 조각의 그림을 잘라낸 후 새로운 레이어를 추가하고 이름을 ‘조각’으로 변경 Lesson 8

마스크 활용하기 책대로 하기 2. 이미지 갤러리 만들기(4) 7. ‘조각’ 레이어를 선택하고 [Edit]-[Paste in Place] 메뉴를 클릭하여 잘라낸 조각을 제자리에 붙여넣는다. 8. 그림을 분할할 때 사용한 선은 [Shift]를 누른 상태에서 더블 클릭하여 모두 선택한 후 [Delete]를 눌러 삭제 클릭 Lesson 8

마스크 활용하기 책대로 하기 2. 이미지 갤러리 만들기(5) 9. 새로운 레이어를 삽입하고 이름을 ‘마스크’로 변경한 후 [Library] 패널에 있는 ‘사각형’ 심볼을 스테이지로 드래그하여 가장 위에 위치시킨다. 10. ‘마스크’ 레이어의 30프레임에 키 프레임을 삽입하고 자유 변형 툴( )을 선택하여 사각형의 아래 조절점을 [Alt]를 누른 상태에서 드래그하여 스테이지 크기 만큼 조절 드래그 Lesson 8

마스크 활용하기 책대로 하기 2. 이미지 갤러리 만들기(6) 12. ‘마스크’ 레이어에서 아래로 펼쳐지는 모션 트윈을 설정하고 바로 가기 메뉴를 이용하여 마스크를 지정한 후 Test Movie를 실행 Lesson 8