Animate(이전의 Flash Professional)의 단추는 4개의 프레임을 포함하는 기호입니다. 단추 기호의 각 프레임은 단추의 네 가지 다른 상태인 Up, Over, Down 및 Hit를 나타냅니다. 이러한 상태는 마우스를 롤오버하거나 단추를 클릭할 때 단추가 시각적으로 동작하는 방식을 결정합니다. 이 문서에서는 기본 및 고급 단추를 만드는 방법을 설명합니다.

기본 단추 만들기

  1. [Insert] > [New Symbol]를 선택하거나 Ctrl+F8(Windows) 또는 Command+F8(Mac OS)을 누릅니다.
    참고: Flash 3 이전 버전에서는 스테이지의 모든 항목을 선택 취소하고 [삽입] > [기호 만들기]를 선택합니다.

  2. [Symbol Properties] 대화 상자에서 새 단추 기호의 이름을 입력하고 [Behavior] 옵션으로 [Button]을 선택합니다. [확인]을 클릭합니다.

    Flash에서 기호 편집 모드로 전환됩니다. 타임라인 헤더에는 Up, Over, Down 및 Hit라는 이름의 네 가지 연속된 프레임이 표시됩니다. 첫 번째 프레임인 [업]은 빈 키프레임입니다.
  3. [Up] 상태의 단추 이미지를 만들려면 그리기 도구를 사용하거나 그래픽을 가져오거나 다른 기호의 인스턴스를 스테이지에 배치합니다. 단추에 동영상 클립이나 그래픽 기호를 사용할 수 있습니다. 그렇지만 단추에 다른 단추를 사용할 수는 없습니다. 애니메이션 단추를 만들려면 동영상 클립 기호를 사용합니다.
  4. 두 번째 프레임인 [Over]를 선택하고 [Insert] > [Keyframe]을 선택합니다. 첫 번째 프레임의 단추 이미지가 스테이지에 나타납니다.
  5. Over 상태의 단추 이미지를 변경합니다. [Down]과 [Hit] 프레임에 대해 4단계와 5단계를 반복합니다.
    참고: [Hit] 프레임은 재생 시 스테이지에 보이지 않지만 클릭할 때 반응하는 단추의 영역을 정의합니다. [Hit] 프레임 그래픽은 [Up], [Down] 및 [Over] 프레임에 대한 모든 그래픽 요소를 포함할 수 있을 만큼 큰 단색 영역인지 확인합니다. 이 그래픽은 표시되는 버튼보다 클 수 있습니다. [Hit] 프레임을 지정하지 않으면 [Up] 상태의 개체가 [Hit] 프레임으로 사용됩니다.

  6. 네 가지 단추 상태의 이미지를 정의한 후에 [Edit] > [Edit Movie]을 선택하여 [Symbol Edit] 모드를 종료합니다.
  7. [Window] > [Library]를 선택하여 [Library] 창을 엽니다. [Library] 창에서 해당 단추를 찾은 후 단추 기호를 라이브러리에서 스테이지로 드래그합니다. 이 단계를 수행하면 동영상에 단추 인스턴스가 만들어집니다.

단추 인스턴스에 작업을 지정하는 방법에 대한 자세한 내용은 사용 중인 Animate 버전에 해당되는 설명서를 참조하십시오. 설명서는 아래와 같습니다.

단추에 간단한 작업 지정(Flash 5)

  1. [Edit Movie] 모드에서 위의 7단계에서 만든 단추 인스턴스를 선택합니다.
  2. [Window] > [Actions]를 선택하여 [Actions] 패널을 엽니다.
  3. 패널 왼쪽의 도구 상자 목록에서 [Basic Actions] 범주를 클릭하여 기본 작업을 표시합니다.
  4. 작업을 지정하려면 다음 중 하나를 수행합니다.
    • [Basic Actions] 범주에서 작업을 두 번 클릭합니다.
    • 왼쪽의 [Basic Actions] 범주에 있는 작업을 패널 오른쪽의 [Actions] 목록으로 드래그합니다.
    • 추가(+) 단추를 클릭하고 팝업 메뉴에서 작업을 선택합니다.
    • 키보드 단축키를 사용합니다.
  5. 선택한 작업에 연결된 매개 변수가 있는 경우 해당 매개 변수가 [Actions] 패널 아래쪽의 [Parameter] 창에 표시됩니다. ([Parameter] 창이 보이지 않으면 패널 오른쪽 아래에 있는 작은 삼각형을 클릭합니다.) 해당 작업에 관련된 매개 변수를 선택하거나 입력합니다. 예를 들어 아래에 표시되는 gotoAndPlay 작업은 세 개의 매개 변수인 Scene, TypeFrameGoto and Play 옵션을 포함합니다.

단추에 간단한 작업 지정(Flash 4 및 이전 버전)

  1. [Edit Movie] 모드에서 위의 7단계에서 만든 단추 인스턴스를 선택합니다.
  2. [Control] 메뉴의 [Enable Buttons]이 선택 취소되어 있는지 확인합니다.
  3. 단추를 두 번 클릭하여 [Instance Properties] 대화 상자를 표시합니다.
    참고: Flash 2에서 이 대화 상자는 [Link Properties: Button] 대화 상자였습니다.

  4. [Instance Properties] 대화 상자에서 [Action] 탭을 선택하여 작업을 지정합니다. 그런 후 더하기(+) 단추를 클릭하고 해당 작업을 두 번 클릭합니다.
    참고: Flash 2에서는 [Link Properties: Button] 대화 상자의 [Action] 팝업 메뉴를 사용하여 작업을 지정합니다. 단추에 하나의 작업만 지정할 수 있습니다.

  5. [제어] 메뉴에서 [활성화] 단추가 설정(확인 표시가 옆에 있음)으로 다시 토글되었는지 확인합니다.

  6. 선택한 작업에 연결된 매개 변수가 있는 경우 해당 매개 변수가 [Actions] 패널 오른쪽의 [Parameter] 패널에 표시됩니다. 해당 작업에 관련된 매개 변수를 선택하거나 입력합니다.

고급 단추 만들기

간단한 단추 만들기를 마스터했으면 복잡한 Animate 단추를 시도해 보십시오. 보이지 않는 단추, 애니메이션 상태의 단추 및 롤오버 효과를 포함하는 단추를 만들 수 있습니다. 

복잡한 단추를 디자인할 때는 반드시 [Hit] 상태를 이해해야 합니다. 단추의 모양과 영역은 단추의 활성 상태를 나타냅니다. 히트 상태를 실험해보려면 다음을 수행합니다.

  1. [Common Libraries]의 단추를 [Stage]에 추가합니다. 단추를 편집합니다.
  2. 단추의 [Hit] 상태에 있는 프레임을 강조 표시하고 키프레임을 삽입합니다. 동영상에서 이 동작을 테스트합니다.

  3. [Hit] 상태의 개체 크기를 아주 크게 늘린 후 테스트합니다.
  4. [Hit] 상태의 키프레임을 삭제하고 단추를 테스트합니다.

  5. 단추 커서 및 Up, Over 및 Down에 미치는 효과는 해당 단추가 활성화될 때의 모습을 나타냅니다. 

보이지 않는 단추

단추의 위, 마우스 오버 및 아래 상태를 비워 둘 수 있습니다. 이러한 상태를 비워 두면 컨텐츠가 포함되도록 [Hit] 상태를 정의합니다.

단추의 [Up] 상태가 비어 있거나 보이지 않으면 단추는 스테이지에서 파란색 모양으로 표시됩니다. 이 모양은 단추 내의 다음 키프레임에 포함된 컨텐츠와 같습니다. 이 파란색 모양은 최종 동영상에서는 보이지 않습니다.

애니메이션 상태의 단추

Animate에서 애니메이션 단추를 만들려면 애니메이션하려는 단추 상태에 동영상 클립을 놓습니다.

  1. 애니메이션하려는 단추의 각 상태에 대한 동영상 클립을 만듭니다.
  2. 단추를 만듭니다.
  3. 애니메이션할 단추 상태에 동영상 클립을 놓습니다.
  4. 단추를 스테이지에 놓습니다. 
    참고: Animate 편집기에서 동영상 클립을 테스트할 수 없습니다. [Control] > [Test Movie]를 선택하거나 SWF 파일로 내보내 테스트합니다.

동영상의 한 영역 위에서 롤오버하면 동영상의 다른 영역에 영향을 미칩니다

이 효과를 만들려면 [Hit] 상태 요소를 단추의 [Over] 상태에 있는 요소가 아닌 스테이지의 다른 영역으로 이동합니다. 이 방법은 단순한 롤오버 효과에 작동합니다. 단추의 활성 영역은 롤오버 효과가 아닌 스테이지의 다른 영역에 있습니다.

추가 정보

단추 및 해당 생성에 대해 자세히 알아보려면 Animate에 샘플로 포함된 단추를 살펴보는 것이 좋습니다. 버전 5에서 이러한 샘플 단추는 [Windows] > [Common Libraries] > [Buttons] 메뉴에서 사용할 수 있습니다. 버전 4를 사용하는 경우 [Libraries] > [Buttons]를 선택하여 이러한 단추에 액세스할 수 있습니다. 버전 2에서는 샘플 단추의 라이브러리를 [Xtras] 메뉴에서 사용할 수 있습니다.

단추 만들기 연습 과정은 버전 5에 포함된 강의에서 사용할 수 있습니다. Flash 내에서 [Help] > [Lessons] > [06 Buttons]를 선택하여 이러한 연습 과정에 액세스할 수 있습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책