액션의 인터렉티브 레이아웃

Brad는 밴드의 홍보를 담당하고 있다고 가정해 봅시다. 밴드는 항상 업데이트된는 여행 스케줄을 가지고 있습니다. Brad의 임무는 다음을 확인하는 것입니다:

  • 밴드는 최신 여행 스케줄을 포함한 멋진 SWF 사이트를 가지고 있습니다.
  • 밴드는 Flash Player가 없는 팬을 위한 최신 여행 스케줄을 포함한 HTML 사이트도 가지고 있습니다.
  • 밴드는 현재 여행 스케줄을 알려주는, 프린트된 다이렉트 메일을 정기적으로 받는 메일링 목록을 가지고 있습니다.

그가 밴드의 그래픽 모양새를 결정했다면, Brad는 QuarkXPress 프로젝트의 프린트 레이아웃을 사용하여 다이렉트 메일의 레이아웃을 준비하고 현재 여행 스케줄을 가져옵니다.

QuarkXpress example interactive print layout 액션의 인터렉티브 레이아웃

표준 QuarkXPress 프린트 레이아웃.

그가 좋아하는 방식으로 다이렉트 메일을 디자인하면, 레이아웃 > 복제를 선택하여 내용을 같은 프로젝트의 웹 레이아웃으로 복제합니다. 이제 같은 파일 내의 HTML 버전의 페이지에서 작업할 수 있습니다.

QuarkXpress example interactive web layout 액션의 인터렉티브 레이아웃

프린트 레이아웃을 복제하여 생성된 웹 레이아웃.

이제 그는 레이아웃 > 복제를 다시 선택하여 웹 레이아웃을 인터렉티브 레이아웃으로 복제합니다.

약간의 인터렉티브을 추가하기 위해, 최종 사용자가 SWF 프레젠테이션을 열었을 때 오른쪽부터 기타가 미끄러지게 만들기로 결정합니다. 이렇게 하려면, 그는 다음과 같은 작업을 해야 합니다:

  • 기타가 따라 움직일 경로로 작동할 빨강색 선을 추가합니다. 인터렉티브 팔레트를 사용하여, 기본 대상체로 만들고 “GuitarPath”라고 이름을 지정합니다. 선택사항 아래에서, Initially Hidden을 선택합니다.(최종 사용자는 그 선을 보지 못합니다.)
  • 기타 그래픽을 선택하고 “SlidingGuitar”라는 애니메이션 대상체로 만들기 위해 인터렉티브 팔레트를 사용합니다. 빨강 선을 따라 이동하도록 나타내기 위해, 표현방식 드랍-다운 메뉴에서 Item on a Path을 선택한 다음, 경로 드랍-다운 메뉴에서 GuitarPath(빨강 선)을 선택합니다. 미끄러지는 속도를 설정하기 위해, 속도 필드에 4를 입력합니다.

QuarkXpress example interactive layout 액션의 인터렉티브 레이아웃

항목을 애니메이션 대상체로 바꾸기 위해 대상체 탭을 사용합니다.

이 애니메이션을 재생하게 하기 위해, Brad는 두 가지 일을 합니다:

  1. 애니메이션을 재생하는 스크립트를 생성합니다.
    QuarkXpress example script playanimation 액션의 인터렉티브 레이아웃

    스크립트 탭에서 스크립트를 생성할 수 있습니다.

  2. 페이지에 대한 시작스크립트 드랍-다운 메뉴에서 스크립트를 선택하여 프레젠테이션의 첫 페이지에 스크립트를 연결하면, 그 페이지가 나타날 때 스크립트가 실행될 것입니다.
    QuarkXpress example page script playanimation 액션의 인터렉티브 레이아웃

    페이지 탭에서 스크립트를 페이지에 지정합니다.

이제 Brad는 별도의 윈도우에 밴드 관리자의 HTML 사이트를 열 버튼을 추가하고 싶어 합니다. 버튼을 생성하기 위해, 그림 상자를 그리고 “WebSiteButton”이라는 이름을 부여하고, 대상체 유형 드랍-다운 메뉴에서 버튼을 선택한 다음, 버튼 드랍-다운 메뉴에서 신규를 선택합니다. 이것은 4 페이지의 버튼 레이아웃을 생성하며, Brad가 버튼 대상체의 4가지 상태를 만들 장소입니다(QuarkXPress 도구만을 사용). 서로 다른 버튼 상태는 Brad가 최종 사용자에게 피드백을 제공하는 것을 가능하게 해 줍니다; 각 상태에 대한 다른 이미지가 있다면, 버튼의 모양은 올라가거나 내려갔는지, 켜졌는지 또는 꺼졌는지에 따라 변합니다.

QuarkXpress example button pagelayout 액션의 인터렉티브 레이아웃

액션의 인터렉티브 레이아웃