튜토리얼 : Adobe Edge Animate에서 인포 그래픽 생성-IT산업-php.cn

집

기술 주변기기

IT산업

튜토리얼 : Adobe Edge Animate에서 인포 그래픽 생성

Jennifer Aniston

Feb 21, 2025 am 11:46 AM

튜토리얼 : Adobe Edge Animate에서 인포 그래픽 생성 이 기사는 Adobe가 후원했습니다. Sitepoint를 가능하게하는 스폰서를 지원해 주셔서 감사합니다!

이 튜토리얼은 Adobe Edge Animate CC 2014에 대화식 인포 그래픽을 구축함으로써 당신을 안내합니다 (그림 1 참조). 그 과정에서 애니메이션 상태가 포함 된 대화식 위젯으로 디자인을 활용하는 방법을 배웁니다. 인포 그래픽 디자인에 관심이 있으시면이 튜토리얼의 동반자 작품을 읽고 싶을 수도 있습니다! Codepen에서 Sitepoint (@SitePoint)의 시간과 트리 데모의 펜 어도비 가장자리를 참조하십시오. 키 테이크 아웃 Adobe Illustrator CC 2014에서 Infographic의 배경 그래픽을 작성하여 시작하여 Adobe Edge Animate CC 2014에서 사용하기 위해 나중에 SVG로 변환 할 때 반응 형 레이아웃에 적합하도록하십시오. 인포 그래픽의 정적 부분을 가장자리에 조립하여 응답 형 스케일링 기능을 사용하여 설계가 다양한 화면 크기로 조정되도록합니다. 는 그래픽 생성, 애니메이션 구성 및 코딩을 통한 상호 작용 추가와 관련된 Edge Animate의 Timelinetrigger 위젯과 같은 대화 형 요소를 개발합니다.

추가 정보를 표시하여 추가 정보를 표시하여 트리거 될 때 볼 때 애니메이션을 표시하여 인포 그래픽의 사용자 참여를 향상시킵니다.

. JSON 데이터 소스를 통합하여 Edge Animate의 기능을 사용하여 UI 요소에 데이터를 바인딩하여 컨텐츠로 인포 그래픽을 동적으로 채우십시오. 대화식 트리거를 세부 패널에 바인딩하여 프로젝트를 마무리하여 사용자 작업시 대화식 데이터 표시를 허용 한 다음 브라우저에서 작업을 미리보기하여 장치 간 기능을 보장합니다.

<:> Adobe 도구 : 이 튜토리얼은 다음을 사용하여 간단한 워크 플로를 다룹니다 • Adobe Illustrator CC 2014 • Adobe Edge Animate CC 2014 내용 : 이 튜토리얼은 처음부터 끝까지 인포 그래픽 컴포지션 생성을 통해 걸어갑니다.

1 단계 : 일러스트 레이터 CC 2014에서 배경 그래픽 생성 2 단계 : Edge Animate CC 2014에서 정적 구성을 구축하십시오. 3 단계 : Timelinetrigger 위젯을 구축하십시오 4 단계 : 세부 사항 위젯을 빌드 5 단계 : 데이터 소스를 추가하십시오 6 단계 : 트리거를 세부 패널에 묶습니다

튜토리얼은 이미 인포 그래픽에 대한 데이터, 텍스트 및 스토리 또는 메시지를 수집하는 중요한 작업을 이미 수행했다고 가정합니다. 개념에서 디자인으로 이동할 준비가되면 Adobe Photoshop CC 2014 또는 Adobe Illustrator CC 2014가 시작하기에 좋은 곳입니다.이 경우 Illustrator에서 배경 그래픽을 생성합니다. 나중에 Edge Animate CC 2014에 복사하고 붙여 넣어 벡터 그래픽을 SVG (Scalable Vector Graphics) 형식으로 변환합니다. 이름에서 알 수 있듯이 SVG 파일은 확장 가능하며 응답 형 레이아웃과 잘 작동합니다. 가장자리에 구축하십시오. 애니메이션 다음 단계를 따라 배경 그래픽을 만듭니다 :

1. 프로젝트를 설정하십시오.

a. Creative Cloud에서 Adobe Illustrator CC 2014 및 Adobe Edge Animate CC 2014를 다운로드하여 설치하십시오.

b. 기사에서 제공된 파일을 다운로드하고 데스크탑에 압축을 풀어주십시오.

그림 2 : Infographic_project 폴더 및 제공 파일

a. 제공된 파일의 자산 폴더에 위치한 Infographic-design.ai 파일을 엽니 다. 파일을 두 번 클릭하여 Adobe Illustrator CC 2014를 시작합니다.

튜토리얼 : Adobe Edge Animate에서 인포 그래픽 생성 — 그림 3 : 일러스트 레이터 파일의 디자인 구성

그림 4 : 일러스트 레이터에서 선택된 벡터 아트 워크

2 단계 : 가장자리에 정적 구성을 구축하십시오 이 시점에서, 당신은 대화식 구성에 대한 작업을 시작하기 위해 CC 2014 에지로 이동할 준비가되었습니다. 일러스트 레이터를 열어두면 다음 단계로 배경 그래픽을 복사하기 위해 돌아갑니다.

다음 단계를 따라 구성을 레이아웃하십시오

1. 반응 형성을 설정하십시오

• 제목 : 시간과 나무의 • W : 850 • H : 800 • 최소 W : 380 • 최대 W : 1200 • 중앙 단계 : 점검, 수평 • 반응 형 스케일링, 점검

그림 6 : 가장자리에 일러스트 레이터 그래픽을 붙여 넣는 애니메이션을 만듭니다. 기음. SVG 그래픽을 중앙 화면에 앉을 수 있도록 스테이지에 위치하십시오. 디. 프로젝트 폴더를 살펴보고 SVG 그래픽이 이미지 폴더에 저장되었음을 주목하십시오. 편집 해야하는 경우 일러스트 레이터에서 SVG 그래픽을 열 수 있습니다.

b. 모든 텍스트를 선택하고 마우스 오른쪽 버튼을 클릭하고 기호로 변환을 선택하십시오. 기호 작성 대화 상자에서 Symply GridText의 이름을 지정하고 확인을 누릅니다. 기호 안에 텍스트를 그룹화하면 단계가 정리됩니다 (그림 7 참조).

모형 디자인에 번호가 매겨진 타임 라인 트리거가 있음을 알 수 있습니다. 8 개의 다른 그래픽을 빌드하는 대신 에지에 단일 타임 핀 트리거 위젯을 구축합니다 (그림 8 참조). 내가 위젯이라고 부르는 것은 단순히 작은 코드를 사용하여 구성 할 수있는 에지 애니메이션 기호입니다. 재미있는 부분은 위젯에 애니메이션 상태가있는 자체 타임 라인이 있다는 것입니다.

d. 이 시점에서 메인 스테이지 타임 라인을 떠났고 이제 Timelinetrigger 기호 타임 라인에서 작업하고 있습니다. 무대 영역의 왼쪽 상단에있는 무대 링크를 사용하여 무대로 다시 탐색 할 수 있습니다.

2. 타임 라인을 섹션으로 분할하려면 라벨을 추가하십시오

a. 다음 단계에서는 타임 라인 도구를 사용하여 애니메이션 상태를 위젯에 추가합니다. 타임 라인 패널의 공구 이름과 위치에 익숙해 지려면 그림 9를 살펴보십시오.

c. 1 초 마크에 "롤오버"라는 레이블을 추가하고 2 초 마크에서 "롤아웃"이라는 다른 레이블을 추가하십시오. 애니메이션의 특정 상태를 재생하기 위해 레이블로 이동합니다.

3. 롤오버 스테이트 애니메이션을 추가하십시오.

4. 롤아웃 상태 애니메이션을 추가하십시오

b. 토글 핀 도구를 다시 선택하고 타임 라인 마커를 2.5 초 마크로 드래그하십시오. 타원의 너비와 높이를 100%로 변경하고 텍스트의 글꼴 크기를 속성 패널의 원래 크기로 다시 변경하십시오. 필요에 따라 그래픽을 배치하십시오.

c. 토글 핀 도구를 선택 해제하십시오.

d. 새 애니메이션 스팬을 선택하고 완화 버튼을 클릭하십시오. Ease Out Elastic 옵션을 선택하십시오.

5. 타임 라인을 따라 정지 액션 트리거를 추가하십시오

그림 10 : 정지 동작을 추가하는 동안 향상된 동작 패널 워크 플로

a. 타원 도구를 선택하고 다른 그래픽 위에 원을 그립니다.

b. 원을 선택하고 속성 패널에서 불투명도를 0으로 설정하십시오.

c. 속성 패널에서 원형 레이어 "hitarea"의 이름을 지정하십시오. 이 시점에서 타임 라인이 그림 11과 같아야합니다.

그림 11 : TimelInetrigger 위젯의 완성 된 타임 라인

상태를 제어하기 위해 기호에 코드를 추가하십시오

a. Elements 패널의 Timelinetrigger 요소 옆에있는 동작 열기 버튼을 클릭하고 CreationComplete 이벤트를 선택하십시오. (이 단계는 Timelinetrigger 타임 라인 내부에서 여전히 편집하고 있다고 가정합니다. Window> 코드를 선택하여 Code 패널을 시작하여 Timelinetrigger 조치에 액세스 할 수도 있습니다.)

기음. 다음 코드를 작업 패널에 복사하여 붙여 넣습니다.

a. 무대 영역의 왼쪽 상단에있는 무대 링크를 클릭하여 무대 타임 라인으로 돌아갑니다.

c. 인스턴스를 복사하여 붙여 넣어 총 8 개의 인스턴스를 만듭니다. 타임 라인 또는 요소 패널의 인스턴스의 이름을 바꾸어 이름 지정 컨벤션 "Trigger [n]"을 따르도록 [n]은 0과 7 사이의 숫자입니다.

a. 스테이지 타임 라인을 편집하는 동안 요소 패널의 스테이지 요소 옆에있는 동작 열기 버튼을 클릭하십시오. 구성 준비 이벤트를 선택하십시오.

10. 파일을 저장하십시오.

기본적으로 방금 배운 패턴은 버튼과 상태를 사용하여 가장자리에있는 요소를 쉽게 만들 수있는 방법입니다. 6 단계에서 타임 라인 트리거 작업으로 돌아갑니다. 4 단계 : 세부 사항 위젯을 빌드 다음은 세부 사항 텍스트를 표시하는 두 번째 위젯을 만듭니다 (그림 12 참조). 이번에는 두 가지 기호를 사용합니다. 하나는 3 개의 텍스트 필드를 레이아웃하고 다른 하나는 화면에서 레이아웃을 애니메이션합니다.

<span>function handleEvent( event ){
</span>
	<span>if(!sym.getVariable("selected") )
</span>	<span>{
</span>		<span>switch( event ){
</span>			<span>case "mouseover":
</span>				sym<span>.play("rollover");
</span>				<span>break;
</span>			<span>case "mouseout":
</span>				sym<span>.play("rollout");
</span>				<span>break;
</span>			<span>case "click":
</span>				<span>// Callback to controller 
</span>
				<span>break;
</span>		<span>}
</span>	<span>}
</span><span>}
</span><span>// Relay trigger events to handleEvent
</span>sym<span>.$("Hitarea").on("mouseover mouseout click", function(e)
</span><span>{
</span>	<span>handleEvent(e.type);
</span><span>});
</span><span>// Set variable defaults
</span>sym<span>.setVariable("id", null);</span>

그림 12 : DetailPanel 위젯의 레이아웃

위젯을 구축하려면 다음 단계를 따르십시오 :

1. 텍스트 레이아웃과 기호를 만듭니다

에이. 텍스트 도구를 사용하여 화면에 세 개의 텍스트 요소를 그립니다. 다음 글꼴 크기를 사용하여 그림 12처럼 보이도록 배치하십시오.

제목 : 72 Pt.

캡션 : 36 Pt.

에이. 세부 사항에 다음 레이블을 추가하십시오

0.00 : 기본값

<: :> 0.01 : show <: :> 0.02 : 숨기기

3. 기본 상태를 설정합니다

4. 쇼 상태 애니메이션을 추가하십시오.

에이. 1 초와 1.75 초 사이의 애니메이션을 설정하십시오. 패널은 대상 위치 아래 몇 인치 아래의 출발점에서 애니메이션해야합니다. 비. 완화를 완화하도록 설정하십시오.

5. 숨기기 상태 애니메이션을 추가하십시오.

에이. 2 초와 2.75 초 사이의 애니메이션을 설정하십시오. 패널은 대상 위치에서 몇 인치 위의 최종 위치로 애니메이션해야합니다. 결국, 세부 정보원 타임 라인은 그림 13과 같아야합니다.

2. 초기화 코드 아래에 다음 코드를 복사하여 붙여 넣습니다.

3. 액션 패널은 이와 비슷하게 보일 것입니다 (그림 14 참조)

그림 14 : 무대의 구성 준비 이벤트

<.> 파일을 저장하십시오 코드는 내장 된 jQuery getJson 명령을 사용하여 Redwoods.json 파일을로드합니다. 다음 단계에서는 데이터를보기로 전환합니다.

6 단계 : 트리거를 세부 패널에 묶습니다 Stage 타임 라인 및 Timelinetrigger 기호 타임 라인에 약간 더 코드를 추가하여 프로젝트를 완료하게됩니다. 목표는 각 트리거 인스턴스 콜백을 스테이지 타임 라인으로 만드는 것입니다. 스테이지 타임 라인은 본질적으로 데이터 모델을 HTML보기에 바인딩하는 컨트롤러 역할을합니다. 다음 단계를 따라 위젯을 데이터 소스에 바인딩합니다.

1. 콜백 함수로 스테이지 코드를 업데이트하십시오

a. 액션 패널에서 단계의 구성 준비 코드로 돌아갑니다.

b. 나머지 코드 아래에 다음 코드를 추가하십시오

<span>function handleEvent( event ){
</span>
	<span>if(!sym.getVariable("selected") )
</span>	<span>{
</span>		<span>switch( event ){
</span>			<span>case "mouseover":
</span>				sym<span>.play("rollover");
</span>				<span>break;
</span>			<span>case "mouseout":
</span>				sym<span>.play("rollout");
</span>				<span>break;
</span>			<span>case "click":
</span>				<span>// Callback to controller 
</span>
				<span>break;
</span>		<span>}
</span>	<span>}
</span><span>}
</span><span>// Relay trigger events to handleEvent
</span>sym<span>.$("Hitarea").on("mouseover mouseout click", function(e)
</span><span>{
</span>	<span>handleEvent(e.type);
</span><span>});
</span><span>// Set variable defaults
</span>sym<span>.setVariable("id", null);</span>

2. Timelinetrigger 코드를 업데이트하십시오

3. 스테이지 코드에 지원 기능을 추가하십시오

<span>/******************************************************
</span><span> * Initialize timeline triggers by setting their
</span><span> * numbers and ids.
</span><span> */
</span><span>var len = 8;
</span><span>for(var i=0; i<len i><span>{
</span>	<span>// Set trigger state
</span>	sym<span>.getSymbol("Trigger"+i).$("Text").html(i+1);
</span>	sym<span>.getSymbol("Trigger"+i).setVariable("id", i);
</span><span>}</span></len></span>

에이. 단계의 구성 준비 코드로 돌아갑니다. 비. 나머지 코드 아래에 다음 코드를 복사하여 붙여 넣으십시오.

브라우저에서 파일> 미리보기를 선택하여 작업을 미리 볼 수 있습니다. 문제가 발생하면 작업이 완료된 파일과 참조 할 수 있도록 작업을 비교합니다. </prev> </ul> <from> 여기에서 어디로 가야하는지 <the> 튜토리얼에서 배운 개념을 가져 와서 더 많은 상호 작용과 풍부한 미디어를 인포 그래픽으로 구축하십시오. 예를 들어, "추가 크레딧"완성 된 파일에는 재생 버튼과 슬라이드 쇼를 재생할 수있는 타이머가 있음을 알 수 있습니다. 파일을 해체하고 슬라이드 쇼로 자신의 작업을 설정할 수 있는지 확인하십시오. 재미있게 보내십시오. <it> <questions> Adobe Edge를 사용한 인포 그래픽 생성에 대한 자주 묻는 질문 (FAQ) <obe> Adobe Edge Animate CC 2014 란 무엇이며 어떻게 작동 하는가? <pre class="brush:php;toolbar:false">/****************************************************** * Sample data model to be visualized in the infographic * design. Each entry includes the year and a text snippet. */ var dataModel; $.getJSON( "redwoods.json", function( json ){ dataModel = json; });

Adobe Edge Animate CC 2014는 대화식 및 애니메이션 웹 컨텐츠를 만들 수있는 강력한 도구입니다. 표준 웹 기술인 HTML5, JavaScript 및 CSS3를 사용하여 애니메이션 및 대화식 컨텐츠를 만듭니다. 즉, 작성된 콘텐츠는 스마트 폰 및 태블릿을 포함하여 이러한 웹 표준을 지원하는 모든 장치에서 볼 수 있습니다. 인터페이스는 다른 Adobe 제품과 유사하므로 Adobe 소프트웨어에 익숙한 사람들이 배우고 사용하기가 더 쉬워집니다.

Adobe Edge Animate CC 2014로 인포 그래픽을 만들기 시작하는 방법 인포 그래픽 생성을 시작하면 먼저 Adobe Edge 애니메이션을 열고 새 프로젝트를 만들어야합니다. 그런 다음 텍스트, 이미지 및 모양과 같은 프로젝트에 요소를 추가하고 타임 라인 및 속성 패널을 사용하여 애니메이션 할 수 있습니다. 클릭 또는 마우스 움직임과 같은 사용자 작업에 응답하는 등 요소에 상호 작용을 추가 할 수 있습니다.

외부 자산을 Adobe Edge Animate Project로 가져올 수 있습니까? 예, Adobe Edge Animate를 사용하면 이미지, 오디오 파일 및 기타 HTML 파일과 같은 외부 자산을 가져올 수 있습니다. 이것은 "import"를 선택하여 "파일"메뉴를 통해 수행 할 수 있습니다. 그런 다음 가져올 파일로 이동하여 선택할 수 있습니다.

내 인포 그래픽에 상호 작용을 추가 할 수 있습니까?

Adobe Edge Animate의 "Action"패널을 사용하여 인포 그래픽에 상호 작용을 추가 할 수 있습니다. 이 패널을 사용하면 사용자 클릭 또는 마우스 이동에 응답하는 등 요소에 작업을 추가 할 수 있습니다. JavaScript를 사용하여보다 복잡한 상호 작용을 생성 할 수도 있습니다.

게시하기 전에 인포 그래픽을 미리 볼 수있는 방법은 무엇입니까?

Adobe Edge Animate는 도구 모음의 "미리보기"버튼. 이렇게하면 실제 웹 환경에서 인포 그래픽이 어떻게 보이고 행동 할 것인지 알 수있는 새로운 브라우저 창이 열립니다.

Adobe Edge Animate에서 직접 인포 그래픽을 게시 할 수 있습니까?

예, Adobe Edge Animate에는 내장 된 게시 기능이있어 인포 그래픽을 웹에 직접 게시 할 수 있습니다. 프로젝트를 정적 HTML 파일 또는 필요한 모든 JavaScript 및 CSS 파일을 포함하는 대화식 HTML 파일로 게시하도록 선택할 수 있습니다.

모바일 장치에 대한 인포 그래픽을 어떻게 최적화 할 수 있습니까?

Adobe Edge Animate를 사용하면 다양한 화면 크기에 적응하는 반응 형 디자인을 만들 수 있습니다. "응답 디자인"기능을 사용하여 인포 그래픽이 다른 화면 크기에 어떻게 적응 해야하는지 지정할 수 있으며 "미리보기"기능을 사용하여 다른 장치에서 인포 그래픽이 어떻게 보이는지 미리 볼 수 있습니다. Adobe를 사용할 수 있습니까? Edge Animate 다른 유형의 웹 컨텐츠를 만들기위한 Edge Animate?

예,이 안내서는 인포 그래픽 생성에 중점을 두는 반면 Adobe Edge Animate는 대화식 웹 사이트를 포함한 광범위한 웹 컨텐츠를 만드는 데 사용될 수 있습니다. 온라인 광고 및 디지털 잡지.

Adobe Edge 애니메이션을 사용하도록 코딩하는 방법을 알아야합니까?

코딩하는 방법을 아는 반면 Adobe Edge Animate를 사용할 필요는 없습니다. . 이 소프트웨어에는 시각적 인터페이스가있어 코드를 작성하지 않고 애니메이션을 만들고 상호 작용을 추가 할 수 있습니다. 그러나 코딩하는 방법을 알고 있다면 JavaScript를 사용하여보다 복잡한 상호 작용을 만들 수 있습니다.

Adobe Edge 애니메이션 사용에 대해 자세히 알아볼 수 있습니까?