이 기사는 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 단계 : 트리거를 세부 패널에 묶습니다
1 단계 : 일러스트 레이터 CC 2014에서 배경 그래픽 생성
튜토리얼은 이미 인포 그래픽에 대한 데이터, 텍스트 및 스토리 또는 메시지를 수집하는 중요한 작업을 이미 수행했다고 가정합니다. 개념에서 디자인으로 이동할 준비가되면 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. 기사에서 제공된 파일을 다운로드하고 데스크탑에 압축을 풀어주십시오.
c. Infographic_project 폴더를 엽니 다. 작업 할 때이 폴더를 프로젝트 폴더로 사용합니다 (그림 2 참조). 자산 폴더의 Infographic-Design.ai 파일을 살펴보십시오. 이 파일에는 디자인 용 모형과 Edge Animate의 배경에 사용할 벡터 그래픽이 포함되어 있습니다.
그림 2 : Infographic_project 폴더 및 제공 파일
2. Illustrator에서 작품을 만듭니다.
a. 제공된 파일의 자산 폴더에 위치한 Infographic-design.ai 파일을 엽니 다. 파일을 두 번 클릭하여 Adobe Illustrator CC 2014를 시작합니다.
b. 잠시 시간을내어 디자인을 탐색하십시오. 디자인이 완전히 실현되었으며 어느 정도 독립형 그래픽으로 작동한다는 것을 알 수 있습니다. 텍스트 및 타임 라인 트리거가 모형에 나타나지만 SVG 파일을 만들 때 해당 레이어를 생략 할 수 있습니다 (그림 3 참조). 텍스트를 추가하고 가장자리에 트리거를 추가합니다. 그림 3 : 일러스트 레이터 파일의 디자인 구성
c. 텍스트, 트리거 및 버튼 레이어를 재생하고 트리 및 배경 레이어에서 나머지 그래픽을 선택하십시오 (그림 4 참조). 이 그래픽은 다음 단계에서 작곡을 만든 후 배경이됩니다.
그림 4 : 일러스트 레이터에서 선택된 벡터 아트 워크
2 단계 : 가장자리에 정적 구성을 구축하십시오
이 시점에서, 당신은 대화식 구성에 대한 작업을 시작하기 위해 CC 2014 에지로 이동할 준비가되었습니다. 일러스트 레이터를 열어두면 다음 단계로 배경 그래픽을 복사하기 위해 돌아갑니다.
다음 단계를 따라 구성을 레이아웃하십시오
1. 반응 형성을 설정하십시오
a. Adobe Edge Animate CC 2014의 현재 버전을여십시오. 새로운 반응 형 스케일링 기능을 사용하여 크기를 화면 크기로 확장하는 디자인을 생성합니다.
b. 새 파일을 만들려면 file> new를 선택하십시오. Infographic.html이라는 이름으로 파일을 프로젝트 폴더에 저장하십시오. Edge Animate는 지원 파일을 프로젝트 폴더에 추가합니다.
c. 속성 패널의 스테이지 속성을 다음과 같이 업데이트하십시오 (그림 5 참조) : .
• 제목 : 시간과 나무의
• W : 850
• H : 800
• 최소 W : 380
• 최대 W : 1200
• 중앙 단계 : 점검, 수평
• 반응 형 스케일링, 점검
그림 5 : 인포 그래픽의 스테이지 특성
2. 일러스트 레이터에서 배경 그래픽을 복사하여 붙여 넣습니다.
에이. 일러스트 레이터로 돌아가 트리 및 배경 레이어에 모든 그래픽이 선택되어 있는지 확인하십시오. 그래픽을 클립 보드에 복사하십시오.
비. 가장자리로 돌아가서 애니메이션으로 돌아와 그래픽을 무대에 붙여 넣습니다. 결과 SVG 파일의 이름을 묻는 대화 상자가 나타납니다 (그림 6 참조). Name Background.svg를 입력하고 확인을 누릅니다.
그림 6 : 가장자리에 일러스트 레이터 그래픽을 붙여 넣는 애니메이션을 만듭니다.
기음. SVG 그래픽을 중앙 화면에 앉을 수 있도록 스테이지에 위치하십시오.
디. 프로젝트 폴더를 살펴보고 SVG 그래픽이 이미지 폴더에 저장되었음을 주목하십시오. 편집 해야하는 경우 일러스트 레이터에서 SVG 그래픽을 열 수 있습니다.
3. 텍스트를 HTML 요소로 추가하십시오
에이. 텍스트 도구를 사용하여 Edge Animate를 사용하여 배경 그래픽 위에 텍스트를 추가하십시오. (원하는 경우 완성 된 프로젝트 파일에서 텍스트를 복사 할 수 있습니다.) 내 모형에서는 단순히 Arial (또는 Sans) 글꼴을 사용하지만 웹 글꼴 또는 자신의 글꼴 선택을 추가 할 수 있습니다.
글꼴 크기는 다음과 같습니다
제목 : 48 Pt.
캡션 : 21 Pt.
타임 라인 : 12 Pt.
b. 모든 텍스트를 선택하고 마우스 오른쪽 버튼을 클릭하고 기호로 변환을 선택하십시오. 기호 작성 대화 상자에서 Symply GridText의 이름을 지정하고 확인을 누릅니다. 기호 안에 텍스트를 그룹화하면 단계가 정리됩니다 (그림 7 참조).
그림 7 : 가장자리의 정적 그래픽 및 HTML 텍스트 애니메이션 cc
4. 파일을 저장하십시오.
3 단계 : Timelinetrigger 위젯을 구축하십시오
모형 디자인에 번호가 매겨진 타임 라인 트리거가 있음을 알 수 있습니다. 8 개의 다른 그래픽을 빌드하는 대신 에지에 단일 타임 핀 트리거 위젯을 구축합니다 (그림 8 참조). 내가 위젯이라고 부르는 것은 단순히 작은 코드를 사용하여 구성 할 수있는 에지 애니메이션 기호입니다. 재미있는 부분은 위젯에 애니메이션 상태가있는 자체 타임 라인이 있다는 것입니다.
그림 8 : 타임 라인을 따라 Timelinetrigger 위젯의 인스턴스
다음 단계에 따라 Timelinetrigger 위젯을 구축하십시오 :
1. 위젯 그래픽과 기호를 만듭니다
a. 타원 도구를 선택하고 직경으로 약 30 픽셀을 그립니다. 텍스트 도구를 선택하고 원 위에 텍스트 요소를 추가하십시오. 텍스트 요소 레이어의 이름이 "텍스트"인지 확인하십시오.
b. 원과 텍스트를 모두 선택하고 마우스 오른쪽 버튼을 클릭하고 기호로 변환을 선택하십시오. 기호 작성 대화 상자에서 기호 Timelinetrigger의 이름을 지정하고 AutoPlay 타임 라인 옵션을 선택 취소 한 다음 OK를 누릅니다.
c. 원과 텍스트 요소는 이제 단일 그룹화 된 객체로 나타납니다. 인스턴스를 두 번 클릭하여 타임 라인을 입력하십시오.
d. 이 시점에서 메인 스테이지 타임 라인을 떠났고 이제 Timelinetrigger 기호 타임 라인에서 작업하고 있습니다. 무대 영역의 왼쪽 상단에있는 무대 링크를 사용하여 무대로 다시 탐색 할 수 있습니다.
2. 타임 라인을 섹션으로 분할하려면 라벨을 추가하십시오
a. 다음 단계에서는 타임 라인 도구를 사용하여 애니메이션 상태를 위젯에 추가합니다. 타임 라인 패널의 공구 이름과 위치에 익숙해 지려면 그림 9를 살펴보십시오.
그림 9 : 타임 라인 패널 도구
b. 타임 라인 마커를 0 마크로 끌고 레이블 삽입 버튼을 클릭하여 레이블을 추가하십시오. 텍스트 "기본"을 레이블에 입력하십시오.
c. 1 초 마크에 "롤오버"라는 레이블을 추가하고 2 초 마크에서 "롤아웃"이라는 다른 레이블을 추가하십시오. 애니메이션의 특정 상태를 재생하기 위해 레이블로 이동합니다.
3. 롤오버 스테이트 애니메이션을 추가하십시오.
a. 타임 라인 마커를 1 초 마크로 끌고 토글 핀 버튼을 클릭하여 선택하십시오. 타임 라인 마커에 파란색 핀 아이콘이 나타납니다. b. 타임 라인 마커를 1.5 초 마크로 끌고 타원 그래픽을 선택하고 속성 패널에서 폭과 높이를 150%로 변경하십시오. 텍스트를 선택하고 글꼴 크기를 더 많은 숫자로 변경하십시오. 스케일링 된 그래픽을 기호 내부에 중앙에 표시하여 컬러 애니메이션 스팬이 고정 된 지점 사이의 타임 라인에 나타난다는 것을 알 수 있습니다.
c. 애니메이션 스팬을 선택하고 완화 버튼을 클릭하십시오. Ease Out Elastic 옵션을 선택하십시오.
4. 롤아웃 상태 애니메이션을 추가하십시오
a. 토글 핀 도구를 선택 해제하고 타임 라인 마커를 2 초 마크로 이동하십시오.
b. 토글 핀 도구를 다시 선택하고 타임 라인 마커를 2.5 초 마크로 드래그하십시오. 타원의 너비와 높이를 100%로 변경하고 텍스트의 글꼴 크기를 속성 패널의 원래 크기로 다시 변경하십시오. 필요에 따라 그래픽을 배치하십시오.
c. 토글 핀 도구를 선택 해제하십시오.
d. 새 애니메이션 스팬을 선택하고 완화 버튼을 클릭하십시오. Ease Out Elastic 옵션을 선택하십시오.
5. 타임 라인을 따라 정지 액션 트리거를 추가하십시오
a. 타임 라인 마커를 1.5 초 마크로 끌고 트리거 삽입 버튼을 클릭하십시오. 타임 라인에 트리거 아이콘이 나타나고 동작 패널이 열립니다.
b. 액션 섹션 선택 아래에서 재생 버튼을 클릭 한 다음 정지 버튼을 클릭하십시오 (그림 10 참조).
그림 10 : 정지 동작을 추가하는 동안 향상된 동작 패널 워크 플로
c. 대상 선택 섹션에서 Timelinetrigger 대상을 선택한 다음 Enter 키를 눌러 코드를 커밋합니다. d. 패널을 닫으십시오. e. 2.5 초 마크에서 또 다른 정지 동작을 추가하십시오
6. "Hitarea"요소를 추가하십시오.
a. 타원 도구를 선택하고 다른 그래픽 위에 원을 그립니다.
b. 원을 선택하고 속성 패널에서 불투명도를 0으로 설정하십시오.
c. 속성 패널에서 원형 레이어 "hitarea"의 이름을 지정하십시오. 이 시점에서 타임 라인이 그림 11과 같아야합니다.
그림 11 : TimelInetrigger 위젯의 완성 된 타임 라인
상태를 제어하기 위해 기호에 코드를 추가하십시오
a. Elements 패널의 Timelinetrigger 요소 옆에있는 동작 열기 버튼을 클릭하고 CreationComplete 이벤트를 선택하십시오. (이 단계는 Timelinetrigger 타임 라인 내부에서 여전히 편집하고 있다고 가정합니다. Window> 코드를 선택하여 Code 패널을 시작하여 Timelinetrigger 조치에 액세스 할 수도 있습니다.)
.
비. 액션 패널 편집기를 사용하여 작업 추가를 안내하거나 텍스트 편집기에 직접 코드를 입력 할 수 있습니다. 여기에서 코드 스 니펫을 액션 패널에 붙여 넣습니다.
기음. 다음 코드를 작업 패널에 복사하여 붙여 넣습니다.
8. 위젯 인스턴스를 만들고 타임 라인에 배치하십시오.
a. 무대 영역의 왼쪽 상단에있는 무대 링크를 클릭하여 무대 타임 라인으로 돌아갑니다.
b. 타임 라인 그래픽의 왼쪽 가장자리에 기존 Timelinetrigger 인스턴스를 배치하십시오.
c. 인스턴스를 복사하여 붙여 넣어 총 8 개의 인스턴스를 만듭니다. 타임 라인 또는 요소 패널의 인스턴스의 이름을 바꾸어 이름 지정 컨벤션 "Trigger [n]"을 따르도록 [n]은 0과 7 사이의 숫자입니다.
d. 그림 8과 같이 타임 라인을 따라 인스턴스를 배치하십시오.
9. 위젯을 초기화하기 위해 단계에 코드를 추가하십시오
a. 스테이지 타임 라인을 편집하는 동안 요소 패널의 스테이지 요소 옆에있는 동작 열기 버튼을 클릭하십시오. 구성 준비 이벤트를 선택하십시오.
b. 액션 패널에서 다음 코드를 복사하여 붙여 넣습니다.
10. 파일을 저장하십시오.
기본적으로 방금 배운 패턴은 버튼과 상태를 사용하여 가장자리에있는 요소를 쉽게 만들 수있는 방법입니다. 6 단계에서 타임 라인 트리거 작업으로 돌아갑니다.
4 단계 : 세부 사항 위젯을 빌드
다음은 세부 사항 텍스트를 표시하는 두 번째 위젯을 만듭니다 (그림 12 참조). 이번에는 두 가지 기호를 사용합니다. 하나는 3 개의 텍스트 필드를 레이아웃하고 다른 하나는 화면에서 레이아웃을 애니메이션합니다.
에이. 텍스트 도구를 사용하여 화면에 세 개의 텍스트 요소를 그립니다. 다음 글꼴 크기를 사용하여 그림 12처럼 보이도록 배치하십시오.
제목 : 72 Pt.
캡션 : 36 Pt.
세부 사항 : 21 Pt. 3 개의 텍스트 필드를 선택하고 세부 사항 파일이라는 기호로 변환하십시오. 텍스트 필드는 세부 사항 인스턴스에 그룹화 된 것으로 보입니다.
기음. 기호 인스턴스를 스테이지의 왼쪽 중앙에 배치하십시오.
디. 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 세부 사항 PanelAnimation이라는 기호로 변환하십시오. 결과 인스턴스를 두 번 클릭하여 DetailPanelanimation 타임 라인을 입력하십시오. 이 단계는 텍스트 레이아웃 기호를 래퍼 기호로 중첩하므로 텍스트 레이아웃 기호는 단일 요소로 더 쉽게 애니메이션 할 수 있습니다.
2. 타임 라인에서 섹션을 작성하려면 레이블을 추가하십시오
에이. 세부 사항에 다음 레이블을 추가하십시오
0.00 : 기본값
<: :> 0.01 : show
<: :> 0.02 : 숨기기
3. 기본 상태를 설정합니다
a. 0 마크에서 그래픽을 선택하고 무대 바닥에서 드래그하십시오.
4. 쇼 상태 애니메이션을 추가하십시오.
에이. 1 초와 1.75 초 사이의 애니메이션을 설정하십시오. 패널은 대상 위치 아래 몇 인치 아래의 출발점에서 애니메이션해야합니다.
비. 완화를 완화하도록 설정하십시오.
5. 숨기기 상태 애니메이션을 추가하십시오.
에이. 2 초와 2.75 초 사이의 애니메이션을 설정하십시오. 패널은 대상 위치에서 몇 인치 위의 최종 위치로 애니메이션해야합니다. 결국, 세부 정보원 타임 라인은 그림 13과 같아야합니다.
그림 13 : 완성 된 세부 사항
비. 완화를 쉽게하기 위해 완화를 설정하십시오.
쇼 끝에 정지 액션을 추가하고 애니메이션 상태에 텍스트를 일시 중지하기 위해 애니메이션 스팬을 숨 깁니다.
<.> 파일을 저장하십시오
다음 단계에서는 데이터 소스를 가져 와서 모든 위젯을 함께 바인딩하게됩니다.
5 단계 : 데이터 소스를 추가하십시오
지금까지 인포 그래픽 데이터를 표시 할보기를 구축했지만 여전히 데이터 소스가 필요합니다. 이 단계에서는 타임 라인 설계에 따라 8 점과 관련된 사실 목록이 포함 된 제공된 JSON 파일을 가져옵니다. Adobe Dreamweaver CC 2014 또는 Adobe Edge Code CC 미리보기와 같은 텍스트 편집기에서 JSON 파일을보고 편집 할 수 있습니다.
다음 단계에 따라 세부 사항 목록을 가져 오십시오
1. 요소 패널의 스테이지 요소 옆에있는 동작 열기 버튼을 클릭하여 무대의 구성 준비 이벤트로 돌아갑니다.
2. 초기화 코드 아래에 다음 코드를 복사하여 붙여 넣습니다.
3. 액션 패널은 이와 비슷하게 보일 것입니다 (그림 14 참조)
그림 14 : 무대의 구성 준비 이벤트
<.> 파일을 저장하십시오
코드는 내장 된 jQuery getJson 명령을 사용하여 Redwoods.json 파일을로드합니다. 다음 단계에서는 데이터를보기로 전환합니다.
6 단계 : 트리거를 세부 패널에 묶습니다
Stage 타임 라인 및 Timelinetrigger 기호 타임 라인에 약간 더 코드를 추가하여 프로젝트를 완료하게됩니다. 목표는 각 트리거 인스턴스 콜백을 스테이지 타임 라인으로 만드는 것입니다. 스테이지 타임 라인은 본질적으로 데이터 모델을 HTML보기에 바인딩하는 컨트롤러 역할을합니다.
다음 단계를 따라 위젯을 데이터 소스에 바인딩합니다.
a. 작업 패널에서 Timelinetrigger의 CreationComplete 코드로 돌아갑니다. Timelinetrigger의 타임 라인을 입력하고 요소 패널을 사용하거나 코드 패널을 사용하여 도착할 수 있습니다.
b. 핸들 이벤트 기능에서 "클릭"이벤트 핸들러에서 스위치 문 안에 다음 코드를 복사하여 붙여 넣습니다.
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>
에이. 단계의 구성 준비 코드로 돌아갑니다.
비. 나머지 코드 아래에 다음 코드를 복사하여 붙여 넣으십시오.
4. 파일을 저장하십시오.
브라우저에서 파일> 미리보기를 선택하여 작업을 미리 볼 수 있습니다. 문제가 발생하면 작업이 완료된 파일과 참조 할 수 있도록 작업을 비교합니다. </prev>
</ul>
<from> 여기에서 어디로 가야하는지
<the> 튜토리얼에서 배운 개념을 가져 와서 더 많은 상호 작용과 풍부한 미디어를 인포 그래픽으로 구축하십시오. 예를 들어, "추가 크레딧"완성 된 파일에는 재생 버튼과 슬라이드 쇼를 재생할 수있는 타이머가 있음을 알 수 있습니다. 파일을 해체하고 슬라이드 쇼로 자신의 작업을 설정할 수 있는지 확인하십시오. 재미있게 보내십시오. <it>
<questions> Adobe Edge를 사용한 인포 그래픽 생성에 대한 자주 묻는 질문 (FAQ)
<obe> Adobe Edge Animate CC 2014 란 무엇이며 어떻게 작동 하는가? <pre class="brush:php;toolbar:false"><span>/******************************************************
</span><span> * Sample data model to be visualized in the infographic
</span><span> * design. Each entry includes the year and a text snippet.
</span><span> */
</span><span>var dataModel;
</span>
$<span>.getJSON( "redwoods.json", function( json ){
</span> dataModel <span>= json;
</span><span>});</span>
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 애니메이션 사용에 대해 자세히 알아볼 수 있습니까?
Adobe는 다양한 리소스를 제공합니다. 튜토리얼, 사용자 안내서 및 다른 사용자와 질문을하고 팁을 공유 할 수있는 커뮤니티 포럼을 포함하여 Edge Animate를 사용하는 방법을 배우십시오. 온라인으로 많은 튜토리얼과 가이드를 찾을 수도 있습니다
위 내용은 튜토리얼 : Adobe Edge Animate에서 인포 그래픽 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
AI 분야에서 중국 여성 기술력의 부상 : 기술 분야에 대한 Deepseek 여성의 기여와의 명예의 협력에 대한 이야기는 점점 더 중요 해지고 있습니다. 중국 과학 기술부의 데이터에 따르면 여성 과학 기술 노동자의 수는 거대하며 AI 알고리즘 개발에서 독특한 사회적 가치 민감도를 보여줍니다. 이 기사는 명예 휴대폰에 중점을두고 DeepSeek Big Model에 처음 연결 한 여성 팀의 강점을 탐구하여 기술 발전을 촉진하고 기술 개발의 가치 좌표 시스템을 재구성 할 수있는 방법을 보여줍니다. 2024 년 2 월 8 일, Honor는 공식적으로 DeepSeek-R1 전혈 버전 Big Model을 출시하여 Android 캠프에서 최초의 제조업체가되어 DeepSeek에 연결하여 사용자의 열정적 인 응답을 불러 일으켰습니다. 이 성공 뒤에 여성 팀원은 제품 결정, 기술 혁신 및 사용자를 만들고 있습니다.
DeepSeek은 Zhihu에 대한 기술 기사를 발표하여 DeepSeek-V3/R1 추론 시스템을 자세히 소개하고 처음으로 주요 재무 데이터를 공개하여 업계의 관심을 끌었습니다. 이 기사는 시스템의 일일 비용 이익 마진이 545%로 높아 글로벌 AI Big Model 이익이 새로운 것으로 나타났습니다. DeepSeek의 저렴한 전략은 시장 경쟁에서 이점을 제공합니다. 모델 교육 비용은 유사한 제품의 1% -5%에 불과하며 V3 모델 교육 비용은 경쟁 업체의 비용보다 훨씬 낮으며 V3 모델 교육 비용은 5 억 5,760 만 달러에 불과합니다. 한편, R1의 API 가격은 Openaio3-Mini의 1/7에서 1/2에 불과합니다. 이 데이터는 DeepSeek 기술 경로의 상업적 타당성을 입증하고 AI 모델의 효율적인 수익성을 확립합니다.
MIDEA는 곧 Deepseek Big Model -Midea Fresh and Clean Air Machine T6을 갖춘 최초의 에어컨을 출시 할 예정입니다. 이 에어컨에는 고급 공기 지능형 주행 시스템이 장착되어있어 환경에 따라 온도, 습도 및 풍속과 같은 매개 변수를 지능적으로 조정할 수 있습니다. 더 중요한 것은 DeepSeek Big 모델을 통합하고 400,000 개 이상의 AI 음성 명령을 지원합니다. Midea의 움직임은 업계에서 격렬한 토론을 일으켰으며 특히 백색 제품과 대형 모델을 결합하는 중요성에 대해 우려하고 있습니다. 전통적인 에어컨의 간단한 온도 설정과 달리 MIDEA Fresh and Clean Air Machine T6은 가정 환경에 따라보다 복잡하고 모호한 지침을 이해하고 습도를 지능적으로 조정하여 사용자 경험을 크게 향상시킬 수 있습니다.
웹 사이트 구성은 첫 번째 단계입니다 : SEO 및 백 링크의 중요성
웹 사이트 구축은 웹 사이트를 귀중한 마케팅 자산으로 전환하는 첫 번째 단계 일뿐입니다. 검색 엔진에서 웹 사이트의 가시성을 향상시키고 잠재 고객을 유치하려면 SEO 최적화를 수행해야합니다. 백 링크는 웹 사이트 순위를 향상시키는 열쇠이며 Google 및 기타 검색 엔진에 웹 사이트의 권한 및 신뢰성을 보여줍니다.
모든 백 링크가 유리한 것은 아닙니다. 유해한 링크를 식별하고 피하십시오.
모든 백 링크가 유익한 것은 아닙니다. 유해한 링크는 순위에 해를 끼칠 수 있습니다. 우수한 무료 백 링크 확인 도구는 웹 사이트 링크 소스를 모니터링하고 유해한 링크를 상기시킵니다. 또한 경쟁 업체의 링크 전략을 분석하고 배울 수도 있습니다.
무료 백 링크 점검 도구 : SEO 인텔리전스 책임자
DeepSeek-R1은 Baidu Library 및 NetDisk에 권한을 부여합니다. 심도있는 사고와 행동의 완벽한 통합은 단 한 달 만에 많은 플랫폼에 빠르게 통합되었습니다. 대담한 전략적 레이아웃을 통해 Baidu는 DeepSeek을 타사 모델 파트너로 통합하여이를 생태계에 통합하여 "큰 모델 검색"생태 전략의 주요 진전을 나타냅니다. Baidu Search 및 Wenxin Intelligent Intelligent 플랫폼은 DeepSeek 및 Wenxin Big Model의 깊은 검색 기능에 처음으로 연결하여 사용자에게 무료 AI 검색 경험을 제공합니다. 동시에 "Baidu로 갈 때 알게 될 것입니다"라는 클래식 슬로건과 새로운 버전의 Baidu 앱은 Wenxin의 큰 모델과 DeepSeek의 기능을 통합하여 "AI Search"및 "Wide Network Information Refinement"를 시작합니다.