Adobe Captivate 프로젝트에 대화형 단추 추가 그리고 단추에 상태를 추가합니다.

단추는 표준 개체를 Captivate 슬라이드에 추가하는 가장 일반적인 방법 중 하나입니다.

단추를 추가하여 Adobe Captivate 프로젝트의 상호 작용을 향상시킬 수 있습니다. 단추를 추가하려면 기본 단추 스타일(일반 흰색 직사각형)을 사용합니다. 사용자 정의 단추 이미지를 가져올 수도 있습니다. 슬라이드에서 단추의 크기와 위치를 지정할 수 있습니다. 사용자가 단추를 클릭하면 어떤 작업이 수행되는지 결정할 수 있습니다.

대화형 단추 추가

Captivate에서 단추를 클릭하면 단추에 상호 작용을 추가하고 원하는 동작을 포함시킬 수 있습니다.

대화형 단추를 추가하려면:

  1. 기본 메뉴에서 상호 작용 > 단추를 클릭합니다. 슬라이드에 단추가 삽입됩니다.

    Button
  2. 슬라이드에 단추가 삽입되면 속성 관리자 패널에서 버튼의 속성을 변경할 수 있습니다.

    Button properties

    단추의 스타일(투명 또는 이미지) 및 단추 글꼴을 변경할 수 있습니다.

  3. 단추에 동작 또는 상호 작용을 추가하려면 아래와 같이 단추를 선택하고 동작 탭을 클릭합니다.

    Button actions
  4. 필요한 경우 성공, 실패힌트 캡션이 표시됩니다.

    Button sfh
    • 성공: 사용자가 단추를클릭할 때표시되는 캡션을 포함하려면 이 확인란을 선택합니다.
    • 실패: 사용자가 단추 외부를클릭할 때표시되는 캡션을 포함하려면이 확인란을선택합니다.
    • 힌트: 사용자에게표시되는힌트를 지정하려면 이 확인란을 선택합니다. 사용자가 단추 위로 마우스를 이동할 때 힌트가 표시됩니다.

    단추를 선택하고 [삭제] 키를 눌러 언제든지 단추를 삭제할 수 있습니다. 단추를 삭제하면 성공 및 실패 캡션과 같이 관련된 모든 개체도 삭제됩니다.

  5. 프로젝트를 미리 보거나 게시합니다.

예를들어대화형 단추가 포함된 프로젝트를 만들고 단추를 클릭하면 개체가 사라집니다. 단추를 다시 클릭하면 개체가 표시됩니다.

myVar 변수를 만들고 변수의 값을 0으로 설정합니다. 단추 성공의 고급 동작 패널에서 if 명령문을 사용하여 조건부 동작을 선택합니다.

해당 동작은 myVar 변수의 값이 0인지 경우 개체를 숨기는지 확인하고 myVar 의 값을 1로 증가시킵니다.

스마트 모양을 단추로 추가

스마트 모양은 화살표, 단추 또는 기본 모양과 같은 다양한 범주의 사전 준비된 모양을 포함합니다. 이러한 모양을 빠르고 쉽게 Adobe Captivate 프로젝트에 삽입하고 수정할 수 있습니다.

스마트 모양을 단추로 변환하고 상호 작용을 단추에 추가할 수 있습니다.

  1. 단추를 추가할 슬라이드를 엽니다.

  2. 기본 메뉴에서 모양 >을 클릭하고 원하는 스마트 모양을 선택합니다.

  3. 단추를 선택하고 속성 관리자 패널에서 단추 속성을 수정합니다.

    Button Smart Shape properties
  4. 단추로 사용확인란을 선택하고버튼을 클릭하면 실행될 동작을 정의합니다.

    Button Smart Shape Use as Button
  5. 프로젝트를 미리 보거나 게시합니다.

이미지를 단추로 추가하기

eLearning 프로젝트에서 eLearning 개발자로서 이미지를 가져와서 버튼으로 사용하고자 했습니다. 이전 버전의 Captivate에서는 이미지를 버튼으로 추가하려면 여러 단계를 거쳐야 했습니다. 이미지를 가져와 스마트 모양을 추가하고 불투명도를 변경한 다음 스마트 모양을 버튼으로 사용해야 했습니다. 정확한 워크플로우라기보다는 문제 해결 방법에 가까웠습니다.

Captivate(2019 릴리스) 업데이트 2에서는 이미지를 버튼으로 추가하고 버튼에 인터랙티브한 요소를 추가할 수 있으며, 이는 이미 Captivate에서 수행하는 기능입니다. 개체를 버튼으로 사용하여 모든 작업을 트리거하고 상태를 지정할 수 있습니다.

이 워크플로우에서는 생산성을 향상시킬 뿐만 아니라 버튼을 만드는 간단한 방법을 소개합니다.

jpg/bmp와 벡터 이미지를 모두를 버튼으로 사용할 수 있습니다. 이미지 파일에 지원되는 파일 형식은 다음과 같습니다.

·       Jpeg, jpg

·       Gif

·       Png

·       Bmp

·       Ico

·       Emf

·       Wmf

·       Pot, potx, pict

이미지를 변환하고 이미지를 버튼으로 사용하려면,

 
버튼으로 사용하는 이미지
  1. Captivate에서 프로젝트를 엽니다.

  2. 이미지를 삽입하려면 미디어 > 이미지를 클릭하고 이미지를 선택합니다.

  3. 스테이지에서 이미지를 선택합니다.

  4. 속성 관리자에서 단추로 사용 옵션을 선택합니다.

  5. 동작 탭에서 프로젝트를 미리 보거나 프로젝트를 게시할 때 단추를 클릭한 후 동작을 정의합니다.

자산

샘플 프로젝트의 자산은 아래 zip 파일로 제공됩니다. 파일의 압축을 풀고  내용을 컴퓨터로 복사하십시오.

다운로드

스테이지 설정

  1. 반응형 프로젝트 만들기.

     
  2. 도구 모음의 프로젝트에서 Fluid Box 및 두 개의 가로 Fluid Box를 클릭합니다.

     
    Fluid Box
    Fluid Box
  3. 오른쪽 Fluid Box에 conclusion_img_bottom.png 이미지를 추가합니다.

     
    이미지 삽입
    이미지 삽입
  4. Dave 및 Angie를 왼쪽 Fluid Box에 추가합니다.

     
    Dave 및 Angie
    Dave 및 Angie
  5. 오른쪽 Fluid Box에 Image as button demo 제목의 스마트 모양을 추가합니다.

     
    스마트 모양 삽입
    스마트 모양 삽입
  6. Dave 및 Angie 모두에 말풍선을 삽입합니다. 또한 Fluid Box에서 두 개체의 잠금을 모두 해제하십시오.

     
    말풍선 삽입
    말풍선 삽입

개체에 동작 지정

스테이지가 설정되면 다음 단계에서는 변수, 고급 동작을 만들고 고급 동작에 버튼 동작을 지정합니다.

 
  1. _toggle 변수를 만듭니다. 이 변수의 초기 상태는 0입니다. 버튼을 클릭하면 변수의 상태가 1이 됩니다. 자세한 내용은 Captivate의 변수를 참조하십시오.

     
    변수 만들기
    변수 만들기
  2. 고급 동작을 만듭니다.

     
    1. 첫 번째 고급 동작은 프로젝트를 시작할 때 두 말풍선을 숨깁니다. 동작의 이름을 hide_bubbles로 지정합니다.

       
      말풍선 동작 숨기기
      말풍선 동작 숨기기

      속성 관리자의 동작 탭에서 hide_bubbles 동작을 선택합니다.

       
      동작 선택
      동작 선택
    2. 두 번째 고급 동작인 toggle_Dave가 호출되면 Dave 클릭 시 Dave의 말풍선이 나타납니다. Dave를 클릭하면 변수 _toggle의 값이 1로 변경됩니다. 말풍선이 사라지면 _toggle의 값은 0이 됩니다.

       
      전환
      전환

    3. 세 번째 고급 동작인 toggle_Angie가 호출되면 Angie 클릭 시 Angie의 말풍선이 나타납니다. Angie를 클릭하면 변수 _toggle의 값이 1로 변경됩니다. 말풍선이 사라지면 _toggle의 값은 0이 됩니다.

       
      Angie 전환
      Angie 전환
  3. Dave 및 Angie를 모두 버튼으로 전환합니다. 이미지를 선택하고 속성 관리자에서 버튼으로 사용 확인란을 선택합니다.

     
    버튼으로 사용
    버튼으로 사용
  4. Dave 및 Angie를 각각 해당 고급 동작에 할당합니다.

     
  5. 프로젝트가 완성되면 사용자가 사용할 수 있도록 만들어야 합니다. 이렇게 하려면 프로젝트를 게시해야 합니다. Adobe Captivate를 사용하면 프로젝트를 다음과 같은 여러 출력 위치에 게시할 수 있습니다.

    ·       내 컴퓨터

    ·       iOS 또는 Android

    ·       Adobe Connect

     
버튼으로 사용하는 SVG

SVG를 버튼으로 만들기

 

이 업데이트에서는 SVG(Scalable Vector Graphic)를 버튼으로 만들 수도 있습니다. 이 과정은 이미지로 다른 유형의 버튼을 만든 것과 비슷합니다.

 
  1. 도구 모음에서 미디어 > SVG를 클릭하고 SVG를 선택합니다.

     
  2. 속성 관리자에서 버튼으로 사용 옵션을 활성화합니다.

     
  3. 동작 탭에서 성공한 경우 드롭다운 목록의 버튼에 동작을 지정합니다.

     

SVG 채우기

이미지에 색상 채우기를 적용할 수 있습니다. 이미지에 채우기를 적용하려면

 
  1. 스테이지에서 SVG를 선택합니다.

     
  2. 스테이지에서 SVG를 두 번 클릭합니다.

     
  3. SVG에서 경로를 선택하고 색상 팔레트에서 색상을 적용합니다. SVG에서 경로를 사용하여 선, 곡선, 호 등을 만들 수 있습니다. 경로는 여러 모양(예: 직선 또는 곡선)의 조합입니다. 경로는 일련의 폴리라인만큼 복잡할 수 있으므로 색상을 적용할 올바른 경로를 아는 것이 중요합니다. 예를 들어, 아래의 스크린샷은 색상으로 채워진 경로를 나타냅니다. 첫 번째 이미지에서 경로는 빨간색으로 채워집니다. 두 번째 이미지에서 경로는 녹색으로 채워집니다.

    SVG의 파란색 경계는 SVG에서 선택된 경로를 나타내며 색상 변경은 해당 경로의 색상만 변경합니다.

     
    빨간색
    녹색

단추에 상태 추가

단추에 상태를 추가하려면

  1. 이미지를 단추로 변환합니다.

  2. 속성 관리자에서 상태 보기를 클릭합니다.

  3. 롤오버 및 아래로 상태의 속성을 변경합니다.

  4. 상태 보기를 종료하고 프로젝트를 미리 보거나 게시합니다.

단추는 상태가 적용되면 변경해야 합니다. 또한 이미지에 방문한 상태 및 사용자 정의 상태를 단추로 추가할 수도 있습니다.

단추 속성 참조

단추의 속성을 보려면 슬라이드에서 단추를 선택합니다. 속성 관리자에 단추 속성이 표시됩니다. 속성을 변경하면 변경 내용이 선택한 단추의 인스턴스에 즉시 적용됩니다.

상호 작용 단추 속성

Interactive button properties
ID 설명
1 텍스트, 투명 또는 이미지 중 하나를 선택합니다.
2 버튼 레이블입니다.
3 단추 레이블 글꼴의 속성을 변경합니다.
4 단추 레이블 효과를 변경합니다.
5 단추의 그림자 및 반사 속성을 변경합니다.
6 동일한 유형의 모든 개체에 적용할 속성을 선택합니다.

스마트 모양을 단추 속성으로

속성 레이블 설명

1. 스마트 모양을 변경합니다.

2. 스마트 모양 배경 색상 및 불투명도를 변경합니다.

3. 단추의 획 속성을 수정합니다.

4. 단추 레이블 글꼴 속성을 변경합니다.

1. 기호, 사용자 정의 변수 또는 하이퍼링크를 삽입합니다.

2. 단추 레이블 색상 속성을 수정합니다.

3. 단추 여백을 수정합니다.

4. 단추 그림자 속성을 수정합니다.

  1. 단추를 클릭하면 실행될 동작을 선택합니다.
  2. 바로 가기 키를 해당 단추에 할당합니다.
  3. 단추를 클릭하면 성공/실패/힌트 캡션이 표시됩니다.
  4. 커서의 유형을 선택하고 클릭 사운드를 활성화/비활성화합니다.
  1. 단추를 클릭하면 재생될 오디오 파일/클립을 선택합니다.
  2. 단추의 크기와 위치를 수정합니다.
  3. 단추의 각도 위치를 변경합니다. 단추의 크기를 조정할 때 높이 대 너비 비율을 유지합니다.

드래그 앤 드롭 상호 작용 프로젝트에서 대화형 단추 사용

드래그 앤 드롭 상호 작용은 재미있고 유익한 사용자 지식 평가 방법입니다. 이 상호 작용을 통해 사용자들은 지정된 영역이나 개체에 개체를 끌어서 놓아 질문에 답변을 할 수 있습니다.

드래그 앤 드롭 상호 작용은 드래그 소스와 드롭 대상으로 구성됩니다. 사용자는 드래그 소스를 끌어 드롭 대상에 놓습니다.

  1. 아래와 같이 드래그 소스 및 드롭 대상을 지정하는 드래그 앤 드롭 상호 작용 프로젝트 및 매핑을 만듭니다.

    드래그 앤 드롭 상호 작용 만들기에 대한 자세한 내용은 Adobe Captivate의 드래그 앤 드롭 상호 작용을 참조하십시오.

    Drag and Drop design
  2. 적절한 성공 및 실패 캡션을 추가합니다.

  3. 프로젝트에 실행 취소재설정 단추를 추가하려면 드래그 앤 드롭 패널로 이동하여 실행 취소 및 재설정 옵션을 활성화합니다.

    DnD Undo Reset 1
  4. 단추에 상태를 추가하려면 단추를 선택하고 속성 관리자를 클릭한 다음 롤오버아래로 상태에 대한 단추 속성을 추가합니다.

    DnD button states
  5. 프로젝트를 미리 보거나 게시합니다.

퀴즈 프로젝트에서 대화형 단추 사용

Captivate에서 퀴즈 단추에 상태를 추가할 수 있습니다. 롤오버 상태 및/또는 아래로 상태를 단추에 추가할 수 있습니다.

  1. 아래와 같이 단추가 포함된 퀴즈 프로젝트를 만듭니다.

    Quiz buttons
  2. 다음 단추에 상태를 추가합니다.

    • 제출
    • 뒤로
    • 건너뛰기
    • 앞으로 검토
    • 뒤로 검토
    • 지우기
  3. 프로젝트를 미리 보거나 게시합니다.

반응형 모드에서 마스터 슬라이드의 대화형 단추 사용

반응형 모드에서 마스터 슬라이드의 단추에 상태를 추가하고 프로젝트에서 마스터 슬라이드를 사용할 수 있습니다.

  1. 반응형 프로젝트를 만들고(Ctrl+H) 프로젝트에 마스터 슬라이드를 삽입(삽입 > 콘텐트 마스터 슬라이드)합니다.

  2. 제목, 부제목 및 내용 자리 표시자를 추가합니다. 프로젝트에 3개의 스마트 모양을 추가하고 단추로 변환합니다.

    마스터 슬라이드 반응형 레이아웃
    마스터 슬라이드 반응형 레이아웃

  3. 단추에 상태를 추가합니다. 속성 관리자 패널에서 단추를 선택하고 롤오버 아래로 상태에 대한 단추 속성을 추가합니다.

    단추 상태
    단추 상태

  4. 마스터 슬라이드 보기를 종료합니다. 콘텐트 슬라이드를 삽입하고, 마스터 슬라이드 목록에서 만든 마스터 슬라이드를 선택합니다. 슬라이드에 제목, 부제목 및 내용을 삽입합니다.

    프로젝트를 미리 보거나 게시합니다.

  5. 프로젝트에 Fluid Box를 삽입하려면 속성 관리자에서 Fluid Box 제안을 클릭합니다. Fluid Box는 개체의 레이아웃에 따라 컨테이너를 자동으로 만듭니다.

    개체를 세로 또는 가로로 정렬합니다.

    Fluid Box에 대한 자세한 내용은 Captivate의 Fluid Box를 참조합니다.

    마스터 슬라이드 Fluid Box 레이아웃
    마스터 슬라이드 Fluid Box 레이아웃

자동 크기 조정 단추

단추에 포함된 텍스트의 양에 따라 단추나 캡션의 크기를 자동으로 조정하도록 Adobe Captivate를 구성할 수 있습니다. 텍스트를 편집하면 새로운 텍스트에 맞게 단추 크기가 변경됩니다.

  1. 열려 있는 프로젝트에서 [편집] > [환경 설정](Windows의 경우) 또는 Adobe Captivate > [환경 설정](Mac OS의 경우)을 선택합니다.

  2. [환경 설정] 대화 상자의 [전체] 메뉴에서 [기본값]을 선택합니다.

  3. 오른쪽의 [일반] 패널에서 [자동 크기 조정 단추]를 선택합니다.

참고:

프로젝트 크기를 조정하기 전에 단추 크기를 조정하는 것이 좋습니다. 프로젝트 크기를 조정해도 단추 크기가 자동으로 조정되지는 않습니다.

질문 슬라이드에서 단추 수정

질문 슬라이드에서 단추의 일부 속성을 수정할 수 있습니다. 표준 단추는 [지우기], [뒤로], [전송] 및 [건너뛰기]입니다.

  1. 수정하려는 질문 단추를 선택합니다.

  2. [퀴즈 속성] 패널에서 여러 옵션의 값을 설정합니다.

참고:

프로젝트 크기를 조정하기 전에 단추 크기를 조정합니다. 프로젝트 크기를 조정해도 단추 크기가 자동으로 조정되지는 않습니다.

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

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