Flash 4 를 이용한 홈페이지 만들기

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:연한 주황색, Width:550px, Height:400px)

② 텍스트 입력 : 드로잉 도구의 텍스트 툴을 선택하고 원하는 Font 종류, 크기, 색깔등을 선택한다.(예를 들어 Font 종류:궁서체, 크기:36, 색깔:파랑색, 진하게 등등) 스테이지에 원하는 위치(되도록이면 왼쪽 상단)에 마우스를 클릭하여 글자('회전 애니메이션')를 입력해 보자. 다른 것을 원하면 글자나 색깔 등을 다르게 해 보자.

③ 키프레임 삽입 : 15번, 30번, 35번 프레임에 오른쪽 마우스 버튼을 눌러 Insert Keyframe을 선택한다. 15번 프레임의 텍스트를 오른쪽 하단으로 위치시키고, 30번과 35번 프레임의 텍스트는 중앙에 위치시킨다.

1번 프레임의 텍스트 위치	15번 프레임의 텍스트 위치	30번 프레임의 텍스트 위치

④ 트위닝 시키기 : 1번과 15번 사이의 아무곳에 마우스를 놓고 더블클릭하여 프레임의 환경설정이 나온다. 4번째의 Tweening 항목의 Tweening은 Motion으로 선택하고, Rotae는 Clockwise로 선택하고, 1times라고 하면 1번 회전을 나타낸다. 아래 그림과 같이 설정하고 확인 버튼을 누른다. 15번과 30번 사이에는 그냥 트위닝만 시킨다.

⑤ 저장과 Publish 하기 : 메뉴에서 File -> Save로 저장하고, 메뉴에서 File -> Publish Settings...을 클릭하여 HTML 항목에서 Dimensions를 Percent로 하고 Width, Height를 100으로 선택하고 확인 버튼을 누른다. Publish Settings 이 끝나면 File -> Publish를 선택한다. 그러면 fla파일 외에 swf, html파일이 만들어졌을 것이다.

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:군청색, Width:550px, Height:400px)

② 텍스트 입력 : 드로잉 도구의 텍스트 툴을 선택하고 원하는 Font 종류, 크기, 색깔등을 선택한다.(예를 들어 Font 종류:궁서체, 크기:36, 색깔:하얀색, 진하게 등등) 스테이지에 원하는 위치에 마우스를 클릭하여 글자('색상 트위닝 하기')를 입력해 보자. 다른 것을 원하면 글자나 색깔 등을 다르게 해 보자.

③ 심벌 변환시키기 : 텍스트를 텍스트 심벌로 변환시켜보자. 메뉴에서 Insert -> Convert to Symbol을 눌러 아래와 같이 선택해 준다. Name 은 자유롭게 이름을 정해준다.

④ 키 프레임 설정 : 타임라인의 10번, 20번, 30번 프레임을 차례대로 선택하여 마우스 오른쪽을 눌러 Insert Keyframe을 선택한다.

⑤ 색상 효과 주기 : 1번 프레임에서 텍스트 심벌을 더블클릭하여 Color Effect -> alpha를 선택하고 0%를 설정하고, 확인 버튼을 누른다. 30번 프레임의 텍스트 심벌에도 alpha 0%를 설정한다.

⑥ 트위닝 시키기 : 1번과 10번 사이, 20번과 30번 사이에 아무 곳이나 마우스를 놓고 오른쪽을 눌러 Create Motion Tween을 선택하면 1번에서 10번, 20번에서 30번으로 화살표 표시가 생긴다. 이 때 각각의 프레임을 왼쪽 마우스로 누르면 차츰 변화하는 것을 볼 수 있다.

⑦ 레이어 추가하여 심벌 만들기 : 레이어를 추가하고 그라디언트로 채워진 원을 드로잉 한 다음 심벌로 변환시키고 15번과 30번 프레임에 키프레임을 삽입한 다음, 15번의 원 심벌을 더블클릭하여 Color Effect -> Tint를 선택하고 Tint amount 100%로 설정하고 원하는 색상을 지정한다.

⑧ 트위닝 시키기(2) : 15번과 30번 프레임 사이에 아무 곳이나 마우스를 놓고 오른쪽을 눌러 Create Motion Tween을 선택하면 15번에서 30번 사이에 화살표가 생긴다.

⑨ 저장과 Publish 하기 : 메뉴에서 File -> Save로 저장하고, 메뉴에서 File -> Publish Settings...을 클릭하여 HTML 항목에서 Dimensions를 Percent로 하고 Width, Height를 100으로 선택하고 확인 버튼을 누른다. Publish Settings 이 끝나면 File -> Publish를 선택한다. 그러면 fla파일 외에 swf, html파일이 만들어졌을 것이다.

심볼은 크게 그래픽 심볼, 버튼 심볼, 무비크립 심볼이 있다. 버튼 심볼은 하이퍼 링크를 시키거나 롤오버 효과를 줄 때 보통 사용한다. 여기에서는 간단한 메뉴를 만들어 보자.

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:하늘색, Width:550px, Height:400px)

② 원형 버튼 만들기 : 드로잉 도구의 원형툴을 선택하고, 테두리선은 없고, 색상은 군청색으로 설정하여 타원형의 원을 그리고, 메뉴에서 Insert -> Convert to Symbol 클릭하고 Name은 '버튼1'이라 하고, behavior는 'Button'으로 선택하고 OK버튼을 클릭한다.

③ 심볼 편집 모드 전환 : Ctrl + E 키를 사용하여 심볼 편집 모드로 전환시킨다. 타임라인의 모양이 아래 그림과 같이 나타날 것이다. (Up : 보통 상태일 때의 버튼 모양, Over : 마우스 커서가 롤오버되었을 때의 버튼 모양, Down : 버튼이 클릭되었을 때의 모양, Hit : 버튼이 반응하는 영역)

④ Over, Down 상태 설정 : Over 프레임에 Insert Keyframe을 한 후 색상을 빨간색으로 바꾸고, Down 프레임에도 Insert Keyframe을 한 후 색상을 녹색으로 바꿔보자.

⑤ Hit 영역 설정 : Hit 프레임에 Insert Keyframe을 한 후, 원을 선택하고 Ctrl + Alt + S를 눌러 크기를 110% 확대한다. 버튼이 1.1배 큰 영영에서 반응하도록 영역을 설정하는 것이다. 색상은 어떤 색이어도 상관없다.

⑥ 버튼 테스트하기 : 버튼을 테스트 해보고 싶다면 다시 Ctrl + E를 눌러 무비편집모드로 돌아온 후, 메뉴에서 Control ->Enable Button을 선택한다. 버튼에 마우스를 롤오버 시키거나 클릭해 보면 색이 버튼 색이 변한 것을 알 수 있다. 해제하려면 다시 Control ->Enable Button을 클릭한다. 또한 Enable Button을 지정하지 않아도 우리가 익히 해왔던 Control -> Test Movie로 테스트할 수 있다.

⑦ 버튼 심볼에 텍스트 넣기 : 심볼 편집모드로 전환(Ctrl +E)시키고 레이어를 추가하고, Up 프레임의 해당 버튼 위에 텍스트를 아무거나 입력한다. Over 프레임에 Insert Keyframe을 한 후 텍스트 색상을 바꿔서 입력한다. Down 프레임에도 Insert Keyframe을 한 후 텍스트 색상을 바꿔서 입력한다. 마지막으로 텍스트가 들어 있는 레이어의 Hit 프레임은 지우는 것이 좋다. Delete Frame으로 Hit 프레임을 지운다.

⑧ 하이퍼링크 시키기 : Ctrl+E를 눌러 무비편집모드로 돌아와서 버튼을 더블클릭하면 버튼 환경설정이 나온다. 그 중에서 Action을 클릭하여 왼쪽의 '+' 된 부분을 클릭하면 다음 그림과 같이 나온다. 이때 'Get URL'을 클릭하여 오른쪽 URL 란 에는 버튼을 클릭했을 때 이동할 파일 명이나 url을 적고, Window 란 에는 타겟을 설정하고, Variable 란 에는 Don't Send를 선택하고 확인 버튼을 누른다.

TV 방송 때처럼 어느 한 부분만 비춰주는 스포트 라이트 효과를 만들어 보자

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:검정색, Width:550px, Height:400px)

② 텍스트 입력 : 드로잉 도구의 텍스트 툴을 선택하여 원하는 Font 종류, 크기, 색깔등을 선택한다.(예를 들어 Font 종류:궁서체, 크기:48, 색깔:노란색, 진하게 등등) '스포트 라이트'라고 입력한다.

③ 레이어 추가 : 레이어를 추가한 다음(레이어 이름도 정한다.)스포트 라이트로 사용하기 위한 원을 글자 앞 부분에 글자 크기 보다 조금 크게, 테두리가 없는 원을 그린다. 원의 색상은 상관없다.

④ 심벌 전환시키기 : 원을 심벌로 전환 시켜보자. 메뉴에서 Insert -> Convert to Symbol을 눌러 아래와 같이 선택해 준다. Name 은 자유롭게 이름을 정해준다.

⑤ 스포트 라이트 트위닝 하기 : 모든 레이어의 20번 프레임에 Insert Frame을 한 다음, 두번째 레이어는 20번 프레임에서 Insert Keyframe을 해주고 원을 가장 오른쪽으로 이동시키고, 1번과 20번 프레임 가운데에 마우스를 놓고 트위닝을 시킨다.(단, 두번째 레이어만 트위닝을 시킨다.)

⑥ 마스크 효과 주기 : 두번째 레이어에서 마우스 오른쪽 버튼을 눌러 Mask를 선택한다. 레이어 창이 아래 그림과 같이 바뀐다. 이것은 원이 지나가는 자리에만 글자가 나타나게 해준다. 각 프레임에 마우스를 놓고 이동해 보면 스포트 라이트가 된 부분만 글자가 나타날 것이다.

⑦ 저장과 Publish 하기 : 메뉴에서 File -> Save로 저장하고, 메뉴에서 File -> Publish Settings...을 클릭하여 HTML 항목에서 Dimensions를 Percent로 하고 Width, Height를 100으로 선택하고 확인 버튼을 누른다. Publish Settings 이 끝나면 File -> Publish를 선택한다. 그러면 fla파일 외에 swf, html파일이 만들어졌을 것이다.