iPad 또는 iPhone 등 HTML5를 지원하는 장치에 대해 Adobe Captivate 프로젝트를 게시할 수 있습니다.

  1. 비반응형 프로젝트를 게시하려면 프로젝트를 열고 [파일] > [게시]를 클릭하거나, 단추 막대에서 [게시] > [컴퓨터에 게시]를 클릭합니다.

    반응형 프로젝트를 게시하려면 프로젝트를 열고 [파일] > [게시]를 클릭하거나, 단추 막대에서 [게시] > [장치에 게시]를 클릭합니다.

    반응형 프로젝트 게시에 대한 자세한 내용은 반응형 프로젝트 게시를 참조하십시오.

  2. 프로젝트에서 Typekit 글꼴을 사용한 경우, Typekit 글꼴이 프로젝트에 포함되어 있는지 여부를 확인하는 팝업이 표시됩니다.

    창에서 [다음]을 클릭합니다.

    Typekit 메시지
    Typekit 메시지

  3. 프로젝트가 반응형인 경우, 다음 대화 상자가 표시됩니다.

    반응형으로 게시
    반응형으로 게시

    프로젝트가 비어 있거나 비반응형인 경우, 다음 대화 상자가 표시됩니다.

    빈 프로젝트로 게시
    빈 프로젝트로 게시

    프로젝트를 게시하려면 [게시]를 클릭합니다.

    프로젝트 에셋을 확인하려면 지정한 폴더로 이동하여 다음 에셋을 확인합니다.

    HTML 에셋
    HTML 에셋

  4. 게시한 후 다음을 수행합니다.

    • 프로젝트에 외부 파일에 대한 링크가 포함되어 있으면(URL 또는 파일 열기 작업) 해당 파일을 출력 폴더에 복사합니다.

    • 프로젝트에 다른 Adobe Captivate 프로젝트에 대한 링크가 포함되어 있으면(CPTX) 해당 프로젝트를 출력 폴더의 Callees 폴더에 복사합니다.

  5. (선택 사항) HTML5 출력에서 개체를 클릭할 때 표시되는 사각형을 숨기려면 [환경 설정]에서 [HTML5의 슬라이드 항목 선택 사각형 숨기기]를 선택합니다([편집] > [환경 설정] > [게시 설정]).

참고:

웹 서버에서 호스팅되는 HTML5 출력을 볼 경우에만 프로젝트에서 상호 작용을 볼 수 있습니다. 컴퓨터에서 로컬로 게시된 출력을 보는 경우에는 상호 작용을 볼 수 없습니다.

프로젝트의 HTML5 출력을 Adobe Connect에 게시할 수도 있습니다. 자세한 내용은 Adobe Connect에 프로젝트 게시를 참조하십시오(구독 및 Adobe Software Assurance 고객용 업데이트에서만 제공).

프로젝트를 장치용 앱으로 게시

Adobe Captivate 8.0.1 이상 버전에서는 독립 실행형 App packager 응용 프로그램을 사용하지 않고도 프로젝트를 PhoneGap에 게시할 수 있습니다. 장치에 게시(앱) 메뉴 항목은 Captivate에 통합됩니다. 아래 단계를 따르십시오.

  1. [게시] 메뉴에서 [장치용으로 게시(앱)]을 선택합니다.

    참고: 반응형 및 비반응형 프로젝트에서 같은 단계를 수행할 수 있습니다.

    다음의 대화 상자가 나타납니다.

    장치용으로 게시(앱) 대화 상자
    장치용으로 게시(앱) 대화 상자

  2. PhoneGap 사용자 이름 및 암호 또는 Adobe ID 로그인 자격 증명을 사용하여 PhoneGap 계정에 로그인합니다. 기존 계정이 없는 경우 [등록]을 클릭하여 PhoneGap 또는 Adobe ID 계정에 등록합니다.

  3. 새 애플리케이션을 만드는 경우 [앱] > [새로 만들기]를 선택합니다.

    PhoneGap의 기존 앱을 업데이트하는 경우 앱>업데이트를 선택합니다.

  4. 앱에 대한 버전 번호, 앱 이름 및 패키지 이름을 입력합니다. 패키지 이름을 입력할 때에는 기존 프로젝트를 덮어쓰지 않도록 고유한 패키지 이름을 지정합니다.

  5. 자세히를 클릭하여 앱에 대한 개인 게시 환경 설정(지리적 위치, 제스처 및 액세스 가능성)을 선택합니다.

  6. [다음]을 클릭하여 앱에 필요한 인증서 정보를 제공합니다. 옆에 있는 체크 상자를 클릭하여 iOS나 Android 또는 모두를 선택하고 각 플랫폼에 해당하는 인증서 정보를 제공할 수 있습니다.

    자세한 내용은 키 생성 및 인증서 만들기 섹션을 참조 하십시오.

  7. [게시] 를 클릭하여 출력을 장치용 앱으로 게시합니다.

    Adobe Captivate는 백엔드에서 PhoneGap 서비스를 사용하여 앱을 제작합니다. 앱이 제작된 후 스냅샷과 같이 앱 다운로드를 묻는 메시지가 표시됩니다. 일단 다운로드를 클릭하면 PhoneGap 사이트를 볼 수 있습니다.

    apps-publish-download

참고:

eLearning 과정을 iOS 응용 프로그램으로 컴파일하려면 Apple 개발자로 등록하고 Apple 개발자 연간 수수료를 지불해야 합니다.

이를 통해 Apple 서명 인증서에 액세스할 수 있는 Apple 개발자 웹 사이트에 대한 액세스 권한을 부여받을 수 있습니다.

키 생성 및 인증서 만들기

인증서 및 인증 키는 사용자가 계정을 보호하고 무단 액세스를 방지하는 데 필수적입니다.

iOS용 인증서 만들기

  1. Apple 개발자 지원 사이트를 참조하여 앱 개발자 인증서를 만듭니다. 자세한 내용은 프로그램 등록을 참조하십시오. 
  2. 아래에 설명된 것처럼 PhoneGap 빌드 사이트의 지침을 참조하여 인증서를 지원되는 P12 형식으로 변환하고 인증서를 업로드합니다. 
    1. Mac 및 Windows에서 Apple 개발자 인증서를 P12로 변환

Android용 키 생성

  1. PhoneGap 빌드 사이트의 지침을 참조하여 키를 생성하고 PhoneGap 빌드에 업로드합니다.

PhoneGap 사용자 ID 및 암호로 로그인한 후 게시 창에서 다음을 클릭하고 아래와 같이 대화 상자에 인증서 정보를 제공합니다.

cert-info

참고:

위 스냅샷의 AppleKey 제목은 PhoneGap 빌드에 업로드한 인증서 이름을 나타냅니다. 인증서는 PhoneGap 빌드 웹사이트에 업로드한 후 자동으로 제목 드롭다운에 채워집니다. 마찬가지로 PhoneGap 빌드에 업로드한 키도 제목 드롭다운에 나타납니다. Android용 키가 없는 경우에도 [선택한 키 없음] 옵션을 선택하여 계속 게시할 수 있습니다.

참고:

Adobe Captivate의 환경 설정을 제거한 경우 인증서를 다시 만들어야 합니다.

HTML5 출력에서 지원되지 않는 개체

프로젝트의 HTML5 출력에서 지원되지 않는 개체는 HTML5 트래커에 동적으로 나열됩니다. 트래커를 보려면 [창] > [HTML5 트래커]를 클릭합니다. 프로젝트에서 이러한 개체를 삭제하거나 수정하면 트래커도 업데이트됩니다.

다음 개체 및 슬라이드는 HTML5 출력에서 게시되지 않습니다.

  • 텍스트 및 SWF 애니메이션(첫 프레임만 보임).
  • 마우스 클릭 애니메이션(하나의 기본 클릭 효과만 지원됨).
  • 슬라이드 전환.
  • 슬라이드 배경(SWF 파일이 사용된 경우).
  • 보이지 않는 개체에 첨부된 오디오.

            참고: On2VP6 코덱만 사용하여 만든 FLV 파일은 HTML5 출력에서 지원됩니다.

  • 개체 효과: 지원되지 않는 효과는 개체 효과 목록에서 별표(*)로 표시됩니다. 이중 별표(**)로 표시된 효과는 HTML5 출력에서 SWF 출력과 다르게 렌더링됩니다.

iPAD/iPhone용 HTML5 출력의 웹 서버 호스팅

HTML5 출력은 웹 브라우저를 통해서만 iPad/iPhone으로 액세스할 수 있습니다. 전체 HTML5 출력 폴더를 웹 서버 루트 폴더에 업로드하고 사용자에게 URL을 알려줍니다. 사용자는 iPad/iPhone에서 URL을 액세스하여 웹 브라우저에서 재생되는 콘텐트를 볼 수 있습니다.

IIS의 웹서버 루트: C:\Inetpub\wwwroot\

Apache의 웹서버 루트: <Apache 설치 폴더>\htdocs\

iPad/iPhone에서 HTML5 출력 액세스

HTML5 출력은 OS 버전 5 이상의 iPad에서만 지원됩니다.

HTML5 출력은 다음 브라우저에서만 지원됩니다.

  • Internet Explorer 9 이상

  • Safari 5.1 이상

  • Google Chrome 17 이상

위 웹 브라우저 중 하나에서 다음 URL을 입력합니다.

http://<웹서버_호스트_이름>:<port>/<HTML5_출력_폴더>/

예를 들어 HTML5 출력 폴더가 MyCpProject이면 URL은 다음과 같습니다.

http://localhost:80/MyCpProject/

iPad용 Adobe Captivate 프로젝트를 만드는 모범 사례

 

  • iPad용 권장 프로젝트 해상도(사전 설정)를 사용합니다.
  • 프로젝트에서 오디오가 겹치지 않도록 합니다. 오디오를 겹치게 하려면 iPad용 Adobe Captivate 오디오 문서를 참조하십시오.
  • 일반적으로 IOS 장치에서 실행할 동영상의 경우 너무 많은 미디어(특히 매우 짧은 미디어)가 중복되지 않도록 하는 것이 좋습니다.
  • 단추 클릭 사운드는 iPad에서 가끔 예상치 않은 현상을 유발할 수 있으므로 사용하지 않습니다.
  • [게시] 대화 상자에서 크기 조정이 가능한 HTML 컨텐츠를 사용하지 않습니다.

 

iPad용 Adobe Captivate 오디오

iPad 전용으로 사용하려는 경우 프로젝트의 오디오가 겹치지 않게 합니다.

겹치는 오디오를 사용할 경우 오디오 유형에 따른 환경 설정은 다음과 같습니다.

시나리오 1: 다른 유형의 오디오가 동시에 트리거되는 상황

이 경우 순서는 다음과 같습니다.

개체 오디오 > 슬라이드 오디오 > 배경 오디오

개체 오디오가 먼저 재생되고 그 다음에 슬라이드 오디오와 배경 오디오가 차례로 재생됩니다.

그러나 iOS 6에서는 다중 오디오 클립을 동시에 재생할 수 있습니다.

시나리오 2: 둘 이상의 개체에 오디오가 지정되어 있으며 타임라인에 동시에 나타나는 상황

타임라인의 Z 순서가 낮은 개체의 오디오가 먼저 재생됩니다.

  • 경우 1: 개체 1에 0-4초의 오디오가 있으며 개체 2에 0-8초의 오디오가 있습니다. 개체 2는 타임라인의 Z 순서가 더 낮습니다.

    개체 2의 오디오는 8초 간 재생되므로 Adobe Captivate는 타임라인의 8초가 되는 시점에서 다른 오디오가 있는지 확인합니다. 이 경우 8초 시점에서 재생될 오디오가 없습니다. 그러므로 개체 1의 오디오는 재생되지 않습니다.

  • 경우 2: 개체 1의 Z 순서가 더 낮습니다.

    개체 1의 오디오가 4초 간 재생됩니다. 4초가 되는 시점에서 검사가 이루어지고 개체의 오디오가 4초 더 있다는 것이 확인됩니다. 따라서 두 번째 개체의 오디오가 처음부터 재생됩니다. 두 번째 개체의 오디오가 재생을 마친 8초 시점이 지나면 타임라인에 더 이상 재생할 오디오가 없다는 것이 확인됩니다.

시나리오 3: 개체 오디오, 슬라이드 오디오 및 배경 오디오가 하나의 슬라이드에 있는 상황

  • 경우 1: 개체 오디오가 0-4초에 있으며 슬라이드 오디오도 동시에 존재합니다. (배경 오디오 없음)

    개체 오디오가 먼저 4초 간 재생된 다음 전체 슬라이드 오디오가 재생됩니다.

  • 경우 2: 개체 오디오가 2-6초에 있으며 슬라이드 오디오도 동시에 존재합니다. (배경 오디오 없음)

    먼저 슬라이드 오디오가 2초 간 재생된 다음 개체 오디오가 4초 간 재생되고 다시 슬라이드 오디오가 재생됩니다.

  • 경우 3: 개체 오디오가 0-4초에 있으며 슬라이드 오디오가 0-8초에 있으며 배경 오디오가 존재합니다. (슬라이드 지속 기간은 14초로 가정)

    개체 오디오가 4초 간 재생된 다음 슬라이드 오디오가 8초 간 재생되고 마지막으로 배경 오디오가 남은 슬라이드 지속 기간 동안 재생됩니다.

iPad용 Adobe Captivate 비디오

프로젝트를 iPad 전용으로 사용하려는 경우 비디오가 겹치지 않게 합니다.

시나리오 1: 같은 슬라이드에 지속 시간이 서로 다른 둘 이상의 비디오가 있는 경우

비디오가 타임라인의 순서에 따라 하나씩 재생됩니다.

예를 들어, 단일 슬라이드에 다음과 같은 타임라인 지속 시간을 가진 두 개의 비디오가 있다고 가정해 봅니다.

  • Slide_Video1 = 0-8초, Event_Video2 = 4-10초

슬라이드 비디오가 8초 간 재생된 다음 이벤트 비디오가 재생됩니다.

시나리오 2: 두 개의 비디오가 동시에 시작하는 경우

Z 순서가 낮은 비디오가 먼저 재생됩니다. 예를 들어 Video1이 슬라이드에서 0-8초에 있으며 Video2도 동일한 슬라이드에서 0-12초에 있다고 가정해 봅니다.

  • Video2의 Z-순서가 더 낮으면 Video2가 12초 간 재생되고 Video1은 전혀 재생이 되지 않습니다.

  • Video1의 Z 순서가 더 낮으면 Video1이 8초 간 재생된 다음 Video2가 나머지 슬라이드 지속 시간 동안 재생됩니다.

샘플 프로젝트 다운로드

Captivate 및 참여 학습 콘텐트 생성 방법에 대해 자세히 알아보려면 다음 프로젝트를 다운로드하십시오.

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

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