19 단원 Scene 이이동하는무비애니메이션 1. gotoandplay 액션활용하기 2. Scene 이용하기 3. 무비클립교체하기 4. 종합실습 1/8
이번시간에는플래시에서다중씬 (scene) 을이용한애니메이션을만들어보겠습니다. Scene은영화대본에서의장면과비슷하다고생각하시면됩니다. 하지만플래시의장면은기능이더뛰어나, 장면을이용하면하나의무비를여러개의분류로나눌수있게됩니다. 예를들어하나의장면은 Preloader를위해쓰고, 또하나의장면은소개화면을위해쓰일수있고, 만약어떤회사의홈페이지라면연락처, 프로젝트, 소개등의구성을위해여러개의장면을사용할수도있습니다. 1. gotoandplay 액션활용하기 플래시에서모션을줄때, 지금있는위치에서다른위치로넘어가그곳에서시작할때사용하는액션입니다. < 실습 > 도구상자의원형툴을선택하고화면스테이지의왼쪽에적당한크기로그리겠습니다. 10 프레임을마우스로선택하고오른쪽버튼을눌러 [Insert Blank Keyframe] 을하여빈키프레임을추가합니다. 10 프레임이선택된상태에서도구상자의사각형툴을이용해화면스테이지의오른쪽에적당한크기로그리겠습니다. 키프레임사이를클릭하고속성창에서 Tween 옵션을 Shape 로정하겠습니다. 타임라인의색이변한것을확인합니다. 레이어의이름을클릭하여프레임이전체선택되면선택된프레임을드래그하여시작점이 15 프레임이되도록이동합니다. 타임라인아래 Insert Layer{ 를클릭하여레이어를추가하고, 레이어의이름을 버튼 으로수정하겠습니다. 버튼 레이어의 1 번프레임을클릭한후, 도구상자의원형툴을선택하고화면스테이지의왼쪽하단에작은크기로그리겠습니다. 그려진원을선택툴로선택하고 [Modify] -> [Convert to Symbol] 을클릭하여, 버튼 이라는이름의 Button 심벌로만들겠습니다. 버튼심벌의인스턴스네임을 b1 이라고입력하겠습니다. Insert Layer 를클릭하여레이어를추가하고, 액션 이라이 2/8
름을정하겠습니다. 17 단원제안서매출액비교슬라이드작성 [Window] -> [Development Panels] -> [Actions] 을클릭하여액션창을열겠습니다. 액션 레이어의 1 프레임을선택하고액션창에 stop(); _root.b1.onrelease=function(){ gotoandplay(15); }; 라고적습니다. [Control] -> [Test Movie] 를하겠습니다. 처음에버튼만보이다가버튼을클릭하니애니메이션이시작되는것을알수있습니다. 2. Scene 이용하기 플래시에서는심벌처럼 Scene 도복제할수있습니다. Scene 을복제하게되면복제된 Scene 에원본 Scene 의애니메이션결과가그대로들어가게됩니다. < 실습 > [ 도구상자의원형툴을선택하고적당한크기의원을화면스테이지의왼쪽에그립니다. 10 프레임을선택하고마우스오른쪽버튼을눌러 [Insert Blank Keyframe ] 을하여빈키프레임을추가합니다. 10 프레임에사각형툴을이용하여적당한크기의사각형을화면스테이지오른쪽에그리겠습니다. 키프레임사이를클릭하고속성창에서 Tween 을 Shape 로정합니다. 타임라인의색이변한것을확인하겠습니다. [Window] -> [Design Panels] -> [Scene] 을클릭하여 Scene 패널을열겠습니다. Scene 패널에서 Duplicate scene 을클릭하여 Scene 을복제합니다. 3/8
복제된 Scene 의이름을더블클릭하여 Scene 2 로바꾸겠습니다. Scene 2 에있는 10 프레임에서사각형의면색을도구상자하단에있는색조절옵션에서바꾸겠습니다. [Control] -> [Test Movie] 을하겠습니다. 면색이다른같은애니메이션이두번나오는것을알수있습니다. 3. 무비클립교체하기 무비클립을교체하기위해 Swap 기능에대해알아보겠습니다. 도구상자의원형툴을선택하고화면스테이지에적당한크기로그립니다. 선택툴로원을전체선택하고 [Modify] -> [Convert to Symbol] 을하여 원 이란이름의 Movie Clip 심벌로만듭니다. 도구상자의사각형툴을선택하고화면스테이지에적당한크기로그립니다. 선택툴로사각형을전체선택하고 [Modify] -> [Convert to Symbol] 을하여 사각형 이란이름의 Movie Clip{ 무비클립 } 심벌로만들겠습니다. 선택된사각형심벌을 Delete 키를눌러지웁니다. 원형심벌을선택툴로클릭합니다. 속성창에서 Swap 버튼을누르겠습니다. 사각형 을선택하고 [OK] 합니다. 원형심벌이사라지고사각형심벌이그자리에나타난것을알수있습니다. 4/8
4. 종합실습 [File] -> [Open] 으로 씬.fla 파일을불러옵니다. 화면스테이지에배경애니메이션무비클립이삽입되어있는결과물이나왔습니다. 화면배율을 Fit in Window 로지정합니다. 배경 레이어위에새로운레이어를추가합니다. 추가한레이어의이름을 창 으로변경합니다. 도구상자의사각형툴을선택툴로선택하고화면스테이지에외곽선없는검정색사각형을그립니다.; 만들어진사각형을화면스테이지의크기에맞추고정렬합니다. 선택된사각형을 Align 패널의 To Stage 버튼을클릭하고 Match width and height 버튼을클릭하여크기를맞춥니다. 선택툴을이용하여사각형을이등분하기위해아래쪽으로반정도선택합니다. 선택된사각형위에서마우스오른쪽버튼을눌러나오는빠른메뉴중 Cut 을클릭하여잘라냅니다. 그다음 창 레이어위로새로운레이어를추가하고이름을 창 2 로변경합니다. 화면스테이지에서마우스오른쪽버튼을눌러나오는빠른메뉴중 Paste in Place 를클릭하여사각형을분리합니다. 창, 창 2 레이어의 15 번프레임에마우스오른쪽버튼을눌러 [Insert Keyframe] 을하여키프레임을추가합니다. 사각형의형태를변형하기위해자유변형툴을지정합니다. 창 레이어의 15 번프레임의사각형을선택하고아래쪽가운데변형점을위로드래그하여크기를변형합니다. 창 2 레이어 15 번프레임의사각형도크기를변형합니다. 창, 창 2 레이어의 1 번프레임구간을드래그하여선택하고 Properties 속성창의 Tween 옵션메뉴에서 Shape 을적용합니다. 그다음 라인 과 배경 레이어의프레임을마우스오른쪽 5/8
버튼을눌러 [Insert Frame 을클릭하여 15 번프레임까지늘립니다. 타임라인밑에있는 Insert Layer 를클릭하여레이어를추가하고, 레이어이름을 버튼 이라고수정하겠습니다. 버튼 레이어를드래그하여 창 2 레이어위로이동시킵니다. 버튼 레이어의 15 번프레임에마우스오른쪽버튼을클릭하여 [Insert Blank Keyframe] 으로빈키프레임을추가합니다. [Window]->[Library] 패널을엽니다. 라이브러리에등록된 next 버튼심벌을화면스테이지왼쪽아래에삽입합니다. 그다음버튼심벌앞에라이브러리에등록된화살표무비클립을드래그합니다. 18 번프레임까지모든레이어의프레임구간을연장합니다. 그다음 Insert Layer 를클릭하여새로운레이어를추가하고이름을 텍스트 라고바꿉니다. 버튼 레이어위로 텍스트 레이어를이동시킵니다. 텍스트 레이어의 18 번프레임에마우스오른쪽버튼을클릭하여 [Insert Blank Keyframe] 으로빈키프레임을추가합니다. 라이브러리에등록된 하루텍스트 무비클립을화면스테이지왼쪽중앙에삽입합니다. 6/8
[Insert Layer 를클릭하여레이어를추가하고, 레이어이름을 액션 으로바꿉니다. 액션 레이어의 18 번프레임을마우스로선택하고오른쪽버튼을눌러 [Insert Blank Keyframe] 을하여빈키프레임을추가합니다. 액션 레이어의위치를드래그하여맨위로이동합니다. [Windoe] -> [Development Panels] -> [Actions] 을클릭하여액션창을열겠습니다. 액션 레이어의 18 번프레임을선택하고액션창에 stop(); 라고적겠습니다. next 버튼심벌을클릭하고액션창에다 on(release){ gotoandplay( Scene 2, 1); } 라고적겠습니다. [Window] -> [Design Panels] -> [Scene] 을클릭하여씬패널을열겠습니다. 씬패널의아래왼쪽에있는아이콘 (Duplicate scene) 을클릭하여씬을복제합니다. 복제된씬의이름을더블클릭하여 Scene 2 라고수정하겠습니다. Scene 2 를선택합니다. 먼저 창, 창 2 레이어의 1 번키프레임을드래그하여선택합니다. 색상을회색으로바꿉니다. 마찬가지로 창, 창 2 레이어의 15 번프레임구간을드래그선택하여색상을회색으로바꿉니다. 그다음 창, 창 2 레이어가아래의레이어가보이지않으므로레이어가리기설정을합니다. 배경 레이어의첫프레임을선택하고, 무비클립심벌을클릭한뒤, 속성창에서 Swap 옵션을클릭하겠습니다. 심벌을 main2 무비클립으로바꾸겠습니다. 이번에는 텍스트 레이어의 하루텍스트 무비클립심벌을클릭한뒤, 속성창에서 Swap 옵션을클릭하겠습니다. 7/8
심벌을 라이프텍스트 무비클립으로바꿉니다. 버튼 레이어의 next 버튼심벌을클릭한뒤, 속성창에서 Swap 버튼을클릭하여 prev 심벌로바꾸겠습니다. prev 버튼심벌이선택된상태에서액션창에 on(release){ e} gotoandplay( Scene 1, 1); } 라고수정하겠습니다. [Control] -> [Test Movie] 로확인해보겠습니다. 처음엔창이열리면서아래배경에 하루 라는제목의시가나옵니다. 이때버튼을클릭하면씬이바뀌며 라이프 라는제목의시가나오는것을볼수있습니다. 역시버튼을누르면다시처음씬으로돌아갑니다. 다완성이되었다면 Test Movie 무비창은닫겠습니다. 창오른쪽상단의 [X] 표시를누르세요. 완성이되면 [File}] -> [Save as] 를눌러저장합니다. 저장위치는내문서, 파일이름은 씬이동 으로지정하고, 파일형식은 Flash MX 2004 Document(*.fla) 로지정후저장버튼을누릅니다 이번시간에는씬을이동하며애니메이션을만들어보았고, 또 Swap 기능을이용해같은애니메이션에오브젝트만바꾸어보기도하였습니다. 8/8