집 › 멀티미디어 › Illustrator에서 애니메이션을 만드는 방법. Adobe Illustrator의 팁과 요령: Illustrator의 요령. Illustrator에서 그래픽 생성 가능성(Adobe Flash와 비교) Illustrator에서 SVG 파일 준비

Illustrator에서 애니메이션을 만드는 방법. Adobe Illustrator의 팁과 요령: Illustrator의 요령. Illustrator에서 그래픽 생성 가능성(Adobe Flash와 비교) Illustrator에서 SVG 파일 준비

웹 그래픽 최적화

그래픽 정보텍스트보다 훨씬 느리게 전송되며 이미지 로딩 시간은 크기에 비례합니다. 그래픽 파일. 따라서 웹 페이지를 빠르게 로딩하려면 작은 크기의 임베디드 파일이 필요합니다. 그래픽 이미지, 이는 최적화를 통해 달성됩니다. 이미지 최적화는 이 경우에 필요한 이미지 품질을 유지하면서 최소 파일 크기를 보장하는 변환을 의미합니다. 이는 주로 그래픽 이미지의 색상 수를 줄이고, 압축 및 특수 파일 형식을 사용하고, 개별 이미지에 대한 압축 매개변수를 최적화하여 달성됩니다. 파편.

Illustrator에는 다양한 미리 보기 방법을 통해 최적화 프로세스를 빠르고 효율적으로 만드는 이미지 최적화 도구가 내장되어 있습니다. 미리보기는 최적화된 이미지가 실시간으로 어떻게 보일지에 대한 매우 정확한 아이디어를 제공하므로 최적화 결과를 평가하고 올바른 설정을 성공적으로 선택하는 데 도움이 됩니다. 또한 Illustrator 프로그램에서 직접 만든 이미지와 웹 사이트에 게시할 사진 등의 다른 이미지를 모두 최적화할 수 있습니다.

최적화 매개변수는 파일 메뉴에서 동일한 이름의 명령으로 호출되는 웹용으로 저장 창에서 설정됩니다. 프로그램에서는 네 가지 미리보기 모드 중 하나를 사용할 것을 제안하지만 두 가지는 최적화 품질을 평가하는 데 가장 적합합니다.

지정된 설정에 따라 원본 이미지와 최적화된 이미지를 동시에 보는 2-Up(두 가지 옵션)(그림 1)
4-Up(4가지 옵션) 이 모드에서는 뷰포트가 4개의 창(그림 2)으로 나누어 원본 이미지와 최적화된 이미지의 세 가지 버전을 표시합니다. 첫 번째 버전은 설정된 최적화 값을 기반으로 생성되고 다른 두 개는 현재 최적화 설정의 변형입니다.

두 모드 모두 서로 다른 최적화 설정과 그에 따른 시각적 비교를 사용하여 이미지를 저장할 필요가 없으므로 최상의 최적화 옵션을 찾는 데 시간을 크게 절약할 수 있습니다. 또한 다양한 연결 옵션에서 최적화된 이미지의 품질뿐만 아니라 크기 및 로딩 시간도 평가할 수 있습니다. 비교를 위해 가장 편리한 모드는 4-Up(4가지 옵션)입니다. 이 모드를 사용하면 압축 또는 팔레트 축소가 이미지 품질과 크기에 미치는 영향을 시각적으로 평가하고 궁극적으로 최상의 최적화 매개변수를 결정할 수 있습니다.

Illustrator를 사용하면 GIF, JPG, PNG-8 및 PNG-24 형식뿐만 아니라 SWF 및 SVG에서도 웹 그래픽을 최적화할 수 있습니다. 색상 수가 적은 인덱스 이미지는 GIF 형식으로 저장됩니다. JPG 형식은 풀 컬러 및 회색조 이미지, 사진, 그라데이션 채우기와 같은 색상이 풍부한 그래픽을 저장하는 데 사용됩니다. 투명한 영역이 있는 풀 컬러 이미지의 경우 인덱스 이미지와 풀 컬러 이미지를 모두 저장할 수 있는 PNG 형식이 사용되는 반면, PNG-8 형식에서는 최적화된 이미지의 가능한 최대 색상 수가 256개이며 PNG-24 형식의 이미지는 수백만 가지 색상을 가질 수 있으므로 이미지가 다음과 같이 보입니다. JPEG 형식. PNG-24와 JPEG의 차이점은 PNG-24 형식의 이미지를 최적화하는 데 사용되는 압축 방법이 품질 저하로 이어지지 않지만 결과적으로 파일 크기가 증가한다는 것입니다. SVG 및 SWF 형식은 그래픽, 텍스트 및 대화형 구성 요소를 결합하며 최적화할 수도 있습니다.

고려해 봅시다 구체적인 예이미지 최적화. Illustrator에서 웹 사이트 로고를 개발하고(그림 3) 처음에는 AI 형식으로 저장했다고 가정해 보겠습니다. 웹에 맞게 즉시 최적화하려는 시도는 좋은 결과로 이어지지 않습니다. 이 경우 이미지가 자동으로 잘려 변형의 결과로 결과 비문의 실제 위치를 고려하지 않기 때문입니다(그림 4 및 5).

따라서 파일=>내보내기(파일=>내보내기) 명령을 사용하여 로고를 PSD 형식으로 내보내 보겠습니다. 생성된 이미지의 크기는 143KB입니다. 결과 PSD 파일을 열고 파일=>웹용으로 저장 명령을 사용합니다. 이미지에 포함된 제한된 수의 색상을 고려하면 이 경우 GIF 형식이 최적이며 특정 설정을 결정해야 합니다. 설정을 실험해 보면 다음 사항을 확인할 수 있습니다. 최고의 품질프로그램의 기본 압축 알고리즘인 선택적을 제공합니다. 스무딩의 경우 그라데이션 채우기가 있는 경우 노이즈를 생성하는 알고리즘을 선택하는 것이 좋습니다(그림 6). 결과 최적화 파일의 크기는 6.729KB(그림 7)이며 배경의 투명도는 유지됩니다. 이는 HTML 파일과 함께 이미지를 GIF 형식으로 저장하면 쉽게 확인할 수 있습니다(그림 8). 결과적으로 이 예에서는 Emblem.html 및 Emblem.gif 파일이 Primer1 폴더에 저장되었습니다.

버튼

웹 페이지 디자인에 없어서는 안될 특정 요소는 그래픽 컨트롤 버튼입니다. 그것들이 없는 페이지를 상상하는 것은 불가능합니다. 버튼 그리기는 오늘날 특별한 장르가 되었으며 Illustrator를 사용하면 가장 복잡한 옵션을 만들 수 있습니다. 예를 들어, 메쉬 개체 및/또는 오버레이 마스크로 디자인된 버튼은 일반 버튼보다 훨씬 더 인상적으로 보입니다.

Illustrator에서 둥글고 볼록한 버튼을 만드는 옵션을 고려해 보세요. 임의의 색상으로 채워진 원 형태로 벡터 객체를 그리고(그림 9) Object => Create Gradient Mesh(Object => Create a Gradient Mesh) 명령을 사용하여 메쉬로 변환하고 4개의 행과 4개의 행을 지정합니다. 열을 선택하고 모양 목록에서 60과 같은 중앙 강조 표시 옵션을 선택합니다(그림 10). 직접 선택 도구를 선택하고 개체의 왼쪽 상단 모서리를 클릭하여 거기에 있는 기준점을 선택합니다(그림 11). 견본 팔레트에서 해당 셀을 선택하여 해당 셀의 색상을 흰색으로 변경합니다(그림 12).

타원 도구를 사용하여 이전에 만든 원의 중앙에 마우스 마커를 놓고 Alt 및 Shift 키를 누른 채 새 원을 이전 원 위에 늘려서 이전 원보다 전체적으로 1-2픽셀 크게 만듭니다. 측면. 1-2픽셀 너비의 검은색 테두리(획)를 지정하고 빨간색에서 흰색 방향으로 방사형 그라데이션으로 채웁니다(그림 13). 생성된 벡터 객체를 오른쪽 및 아래로 1-2픽셀 드래그한 다음 선택 항목을 제거하지 않고 마우스 오른쪽 버튼을 클릭하여 종료합니다. 상황에 맞는 메뉴정렬=>맨 뒤로 보내기를 선택합니다. 결과는 그림에 표시된 대로 버튼에 대한 공백이 됩니다. 14.

일반적으로 모든 웹 페이지에는 동일한 유형의 버튼이 여러 개 있습니다. 예를 들어 사이트 주변의 이동 방향을 나타내는 화살표 방향만 다릅니다. 두 개의 버튼이 있는 가장 간단한 경우를 생각해 보겠습니다. 그 중 아래쪽 화살표가 있는 버튼은 다음 페이지로 이동을 의미하고, 위쪽 화살표가 있는 버튼은 이전 페이지로 이동을 의미합니다. 화살표 템플릿으로 다각형 도구로 그려 검은색으로 칠해진 일반 삼각형을 사용하고 효과를 높이기 위해 메쉬 개체로도 디자인해 보겠습니다. 화살표를 버튼으로 이동하고 정렬 팔레트의 해당 버튼을 사용하여 모든 개체의 상대적인 위치를 조정합니다. 결과 버튼 중 첫 번째가 그림 1에 나와 있습니다. 15. Duplicate Layer Layers 명령을 선택하여 버튼을 사용하여 레이어의 복사본을 만들어 보겠습니다. 결과적으로 두 개의 동일한 레이어가 생성됩니다. 그런 다음 레이어 복사본에서 화살표를 선택하고 상황에 맞는 메뉴에서 변형=>변형 회전=>회전 명령을 선택하여 180° 회전합니다. 그림과 같은 버튼이 나타납니다. 16. 한 프로젝트에 대해 동일한 유형의 버튼을 모두 다른 레이어의 한 파일에 저장하는 것이 훨씬 더 편리하다는 점에 유의하십시오. 이 경우는 이에 대해 설명합니다.

이제 각 버튼의 최적화된 버전을 저장해야 합니다. 먼저 아래쪽 레이어를 보이지 않게 만듭니다. 이 경우 위쪽 레이어의 버튼이 유지됩니다. 파일=>웹용으로 저장 명령을 선택하고 그림 1과 같이 버튼 최적화 매개변수를 구성합니다. 17, 저장 버튼을 클릭하고 파일 이름을 입력합니다. 최종적으로 저장된 버튼은 그림 1에 나와 있습니다. 18. 이제 아래쪽 레이어의 가시성을 반환하고 위쪽 레이어를 보이지 않게 만든 다음 같은 방식으로 두 번째 버튼을 저장하여 다른 이름을 지정합니다. 결과는 그림 1에 나와 있습니다. 19.

이제 남은 것은 버튼이 웹 페이지에서 적절하게 보이는지 확인하고 이를 사용자 정의 페이지에 배치하는 것입니다(그림 20). 결과적으로 이 예에서는 이미지 폴더(Primer2 폴더)에 Primer2.html 파일과 두 개의 그래픽 이미지가 얻어졌습니다.

원하는 경우 최적화 프로세스 중에 버튼을 슬라이스로 쉽게 바꿀 수 있습니다. 이 경우 파일=>웹용으로 저장(파일=>웹용으로 저장) 명령을 선택하고 최적화 매개변수를 설정한 후 도구 팔레트에서 슬라이스 선택 도구를 선택하고 이미지를 두 번 클릭해야 합니다. 자동으로 일련 번호 1의 슬라이스로 전환됩니다(그림 21). 다시 두 번 클릭하면 슬라이스 옵션 창이 열립니다. 여기에서 링크를 지정하고 선택적으로 슬라이스 이름을 변경한 다음(그림 22) 최적화된 이미지를 저장해야 합니다. 이 경우 결과는 Primer3.html(그림 23) 및 Primer3.gif(Primer3 폴더) 파일이 됩니다.

인터랙티브 요소

페이지에 생기를 불어넣는 한 가지 방법은 페이지의 내용을 바꾸는 디자인 요소를 도입하는 것입니다. 모습(또는 상태) 마우스의 동작에 따라 또는 드물지만 크기 조정, 스크롤, 로딩, 오류 등 다른 상황의 경우에도 마찬가지입니다.

이러한 요소 중에서 가장 유명한 것은 마우스의 영향으로 모양이 바뀌는 롤오버(영어 롤오버 롤오버, 뒤집기) 요소입니다. 일반적인 롤오버의 예로는 애니메이션 버튼이 있습니다. 롤오버는 다른 웹사이트 탐색 요소를 만들 때 자주 사용됩니다. 실제로 모든 롤오버는 하나가 아니라 여러(최대 4개) 이미지이며 각 이미지는 특정 이벤트에 해당합니다. 주요 이벤트는 다음과 같이 간주됩니다. 상태, 요소 위에 마우스 커서를 올려 놓고 해당 요소 위에 커서를 올려 놓고 마우스 왼쪽 버튼을 아래로 누릅니다. 이론적으로는 클릭 후 왼쪽 마우스 버튼을 떼는 Click, 버튼을 놓은 후 Up, 활성 영역을 떠날 때 Out과 같은 이벤트가 포함될 수 있습니다. 그러나 실제로는 처음 세 개 또는 심지어 두 개의 이벤트에 대해서만 요소를 변경하는 것으로 제한되는 경우가 많습니다.

클래식 롤오버

고전적인 의미에서 롤오버는 GIF 형식의 일련의 그래픽 이미지와 해당 HTML 코드로, 마우스 동작에 따라 브라우저 창에서 한 이미지가 다른 이미지로 대체됩니다.

Illustrator는 고전적인 의미에서 롤오버를 직접 생성하기 위한 것이 아니지만 롤오버의 초기 요소를 개발하는 데 도움이 될 수 있습니다. 이 경우의 아이디어는 첫 번째 이벤트에 해당하는 이미지로 레이어를 만드는 것입니다. 그런 다음 레이어의 복사본을 만들고 두 번째 이벤트와 일치하도록 이미지를 변환합니다. 결과 다중 레이어 이미지는 Image Ready 프로그램에서 생성된 롤오버를 기반으로 레이어가 보존된 PSD 파일로 내보내집니다. 다른 많은 경우와 마찬가지로 Illustrator 프로그램을 사용하면 다른 프로그램에서는 사용할 수 없는 여러 가지 흥미로운 기능을 사용할 수 있다는 이점이 있습니다. 소프트웨어, 벡터 그래픽 변환의 편리함과 결합되었습니다.

마우스 동작에 따라 색상이 변하는 비문 형태의 롤오버를 만들어 보겠습니다. Illustrator를 열고 검은색으로 채워진 둥근 직사각형 형태의 모양을 만들고(그림 24), 복사본을 만들어 화면의 빈 공간에 배치합니다. 직사각형의 첫 번째 사본을 중앙에 강조 표시가 있는 메쉬 객체로 변환하고(객체=>그라디언트 메쉬 객체 생성=>그라디언트 메쉬 생성 명령) 4개의 행과 10개의 열을 지정합니다(그림 25). 직사각형의 두 번째 복사본을 활성화하고 그림 1과 같이 대략적으로 그라데이션 채우기로 설정합니다. 26. 메쉬 위에 그라디언트 개체를 오버레이하고 그라디언트 개체의 불투명도를 약 80%로 줄이고 크기를 약 1픽셀로 줄여 범프 효과를 시뮬레이션합니다. 그런 다음 개체 위에 비문을 인쇄하십시오. 원래 형태에서는 일반 상태 (그림 27)에 해당하는 흰색을 갖게 한 다음 롤오버 상태가 변경되면 비문 색상이 예를 들어 마우스 마커를 클릭하면 녹색으로 변경됩니다. 그 위로 마우스를 가져가면(오버 상태), 마우스 버튼을 누르면 파란색으로 변합니다(아래 상태).

이 단계에서는 레이어 팔레트에 주의하세요. 거기에는 단일 레이어만 있습니다. 레이어 팔레트 메뉴에서 레이어 복제 명령을 사용하여 이 레이어의 복사본을 두 개 만듭니다. 팔레트에는 세 개의 레이어가 있습니다(그림 28). 그런 다음 레이어의 첫 번째 복사본에서 비문 색상을 녹색으로 변경하고 두 번째 복사본에서는 파란색으로 변경합니다(그림 29). 결과적으로 롤오버에 필요한 공백이 얻어집니다.

파일=>내보내기 명령을 사용하고 RGB 색상 모델을 선택하여 레이어를 보존하면서 생성된 이미지를 PSD 형식으로 내보냅니다(그림 30). ImageReady 프로그램에서 생성된 PSD 파일을 엽니다(그림 31 및 32). 애니메이션 팔레트 메뉴에서 레이어에서 프레임 만들기 명령을 선택하여 레이어를 기반으로 프레임을 만듭니다. 애니메이션 창은 그림과 같습니다. 33. 이 경우 단일 일반 상태가 처음에 롤오버 팔레트에 생성됩니다.

그런 다음 애니메이션 창에서 유도된 상태에 해당하는 프레임을 선택하면 레이어 팔레트에서 레이어 1 복사 레이어가 자동으로 선택됩니다(그림 34). 롤오버 팔레트로 이동하여 롤오버 상태 생성 버튼(롤오버 상태 생성)을 클릭합니다. 그러면 Over State 상태가 롤오버 팔레트에 표시됩니다(그림 36). 같은 방법으로 다운 상태를 생성합니다. 롤오버 팔레트에서 일반 상태를 활성화하고 애니메이션 팔레트에서 일반 상태에 해당하는 프레임을 제외한 모든 프레임을 삭제합니다. 결과적으로 각 롤오버 상태에 대해 애니메이션 팔레트에는 단 하나의 프레임만 있게 됩니다(그림 37, 38 및 39).

쌀. 38. 오버 상태 상태에 대한 이미지, 애니메이션 창, 레이어 및 롤오버 팔레트 보기

도구 모음에서 기본 브라우저에서 미리 보기 버튼을 클릭하고 브라우저 창으로 이동하여 결과를 확인합니다(그림 40). 그런 다음 파일=>최적화 저장 명령을 사용하고 HTML 및 이미지(*.html) 옵션을 지정하여 파일을 저장합니다. 결과적으로 이 예에서는 Primer4.html 파일과 일련의 그래픽 이미지가 이미지 폴더에 얻어졌습니다.

쌀. 40. 롤오버 요소가 포함된 브라우저 창

SVG 롤오버

점점 더 대중화되는 SVG(Scalable Vector Graphics) 형식 벡터 그래픽)은 XML 표준을 기반으로 생성되었으며 다양한 대화형 요소, 특히 롤오버를 수신할 수 있지만 실제로는 완전히 다르게 구현됩니다. 해당 HTML 코드가 완전히 자동으로 생성되는 경우 고전적인 것과 달리 대화형 SVG 롤오버를 생성하려면 JavaScript 언어에 대한 지식과 객체 지향 프로그래밍의 기본 원칙에 대한 이해가 필요하다는 점은 주목할 가치가 있습니다.

SVG 개체로 작업하려면 Window => SVG Interactivity (Window => SVG Interactivity) 명령을 사용하여 쉽게 열 수 있는 특수 팔레트인 SVG Interactivity가 있습니다. 41.

대화형 버튼의 예를 사용하여 롤오버를 생성하는 이 옵션을 고려해 보겠습니다. 비문 색상은 마우스를 가리키면 검은색에서 파란색으로 바뀌고 마우스가 활성 영역을 벗어나면 다시 검은색으로 변합니다.

예를 들어 그림 1과 같이 가장자리가 둥근 직사각형 버튼을 만들고 적절한 그라데이션 채우기를 선택합니다. 42. 투명도 팔레트에서 버튼의 투명도를 조정합니다. 이 예에서는 불투명도 값이 50%로 설정되어 있습니다. 버튼의 복사본을 만들고 진한 녹색으로 채운 다음(그림 43) 개체 => 그라디언트 메쉬 만들기 명령을 사용하여 4개의 행과 10개의 열을 지정하고 모양 목록(보기)에서 메쉬 개체로 변환합니다. To Center 옵션을 선택하고 하이라이트 값을 100으로 설정합니다. 메쉬 개체가 있는 레이어의 불투명도를 약 40%로 줄입니다(그림 44). 그래디언트 개체 위에 메시 개체를 배치하면 버튼이 그림 1에 표시된 것과 유사하게 됩니다. 45.

쌀. 44. 버튼 복사본을 메시 개체로 전환

원하는 비문으로 버튼을 완성하고 정렬 팔레트의 해당 버튼을 사용하여 위치를 조정합니다. 결과 이미지에는 세 개의 객체가 서로 겹쳐진 하나의 레이어가 포함됩니다(그림 46). 예약된 이벤트는 텍스트 개체를 기준으로 하므로 편의상 개체를 두 번 클릭하고 새 이름을 입력하여 이름을 텍스트로 변경합니다. 마찬가지로 레이어 이름을 Layer 1에서 Layer로 변경합니다(그림 47).

이벤트 처리에는 JavaScript 프로시저 사용이 포함되므로 이러한 프로시저를 설명하는 파일을 포함해야 합니다. Events.js라고 하며 설치 시 디스크의 Sample Files\Sample Art\SVG\SVG 폴더에 저장됩니다. 어도비 프로그램일러스트레이터. Events.js 파일을 연결하려면 JavaScript Files SVG Interactivity 명령을 사용하십시오(그림 48). 다음으로 추가 버튼을 클릭하고 하드 드라이브에서 원하는 파일을 찾아야 합니다. URL 필드에 그의 이름이 나타나면(그림 49) 완료 버튼을 클릭합니다.

쌀. 48. JavaScript 파일 명령 선택하기

다음으로 Text 개체의 마우스 이벤트에 대한 응답을 정의해야 합니다. SVG 상호 작용 팔레트의 이벤트 필드에서 텍스트 개체를 선택하고 onmouseover elemColor(evt, "Text", "#3333FF") 이벤트를 선택합니다. 이는 마우스가 텍스트 개체 위에 있을 때 색상이 다음으로 변경됨을 의미합니다. 파란색(도 50). 마우스가 활성 영역을 떠난 후 텍스트 색상을 검은색으로 변경하려면 SVG 상호 작용 팔레트의 이벤트 필드에서 선택하는 또 다른 onmouseout 이벤트를 생성해야 합니다. 그런 다음 작업 줄에 elemColor(evt, "Text", "#000000") 텍스트를 입력하면 색상이 검은색으로 반환됩니다(그림 51).

쌀. 51. 텍스트 개체에 대한 SVG 상호 작용 팔레트의 최종 모습

생성된 롤오버를 파일=>다른 이름으로 저장(파일=>파일 형식 SVG 형식) 명령을 사용하여 SVG 파일로 저장한 다음 그림 52와 같이 SVG 파일 저장 옵션을 설정합니다. 저장한 후에는 하나만 받게 됩니다. 이 경우 클래식 롤오버의 경우처럼 두 개가 아닌 확장명이 SVG인 단일 파일입니다. 그러나 롤오버가 실제로 작동하려면 추가로 파일을 받아야 합니다. Events.js 파일을 JavaScript 절차 설명이 포함된 폴더에 복사하면 결과가 그림 53과 같이 표시됩니다.

SVG 애니메이션

SVG 형식은 애니메이션을 전달하는 데에도 사용할 수 있습니다. 해당 그래픽 개체 위에 마우스를 올리면 화면에 나타나고 대화형 요소에서 마우스를 떼면 사라지는 간단한 애니메이션 요소(이 경우 회사에 대한 정보)를 만들어 보겠습니다.

그림 1에 표시된 대로 대략 다음과 같은 일련의 그래픽 및 텍스트 개체를 만들어 보겠습니다. 54. 레이어 팔레트에서 다음 개체의 이름을 순차적으로 클릭하고 다음을 입력하여 생성된 모든 개체의 이름을 편리한 방법으로 바꾸자 원하는 이름(그림 55). 그림에 강조 표시된 부분을 참고하세요. 56개 개체 Text1, Text2, Text3 및 Path1은 항상 표시되며 다른 모든 개체는 Text1 개체 위로 마우스를 가져갈 때만 표시됩니다.

쌀. 54. 이미지의 원본보기

SVG 상호 작용 팔레트에서 JavaScript 파일 명령을 사용하고 추가 버튼을 클릭한 후 하드 드라이브에서 원하는 파일을 가리킨 다음 완료 버튼을 클릭하여 JavaScript 절차를 설명하는 Events.js 파일을 포함시킵니다.

Text1 개체의 마우스 이벤트에 대한 응답을 정의합니다. SVG 상호 작용 팔레트의 이벤트 필드에서 텍스트 개체를 선택하고 onmouseover 이벤트를 선택한 후 아래 줄에 elemShow(evt, "Text4"); 텍스트를 입력합니다. elemShow(evt, "Path2") . 결과적으로 마우스가 Text1 개체 위에 있으면 Text4 및 Path2 개체가 표시됩니다. 이벤트가 발생했을 때 여러 가지 동작을 수행해야 하는 경우에는 ";" 기호를 사용하여 지정해야 합니다. 그런 다음 onmouseout 이벤트에 대해 유사한 작업을 수행하고 이에 대한 텍스트를 입력합니다. 이는 개체를 숨기는 것을 의미합니다(그림 57).

파일=>다른 이름으로 저장 명령을 사용하여 결과를 SVG 파일로 저장하고, 파일 이름을 지정하고, 파일 유형 필드에서 SVG 형식을 선택한 다음 그림 1에 따라 SVG 파일 저장 옵션을 설정합니다. 58. 저장 후 Primer6.svg 파일이 수신됩니다(Primer6 폴더). Events.js 파일을 이 파일이 있는 폴더에 복사하는 것을 잊지 마세요. 이 후에 coz를 실행하면 이 파일, 그러면 그림과 같은 결과를 볼 수 있습니다. 59. 이것이 거의 당신에게 필요한 것입니다. 우리 계획에 포함되지 않은 유일한 것은 로드 시 텍스트 4 및 경로 2 개체의 초기 모양이었습니다. 이 단점을 제거하려면 두 개체 데이터를 동시에 선택하고 이에 대한 작업을 만듭니다 elemHide(evt, "Text4"); onload 이벤트에서 elemHide(evt, "Path2")(그림 60). 파일을 다시 저장하고 이제 Text1 개체 위로 마우스를 가져갈 때만 Text4 및 Path2 개체가 표시되는지 확인합니다.

GIF 애니메이션

애니메이션 gif를 포함한 모든 웹 페이지는 웹 애니메이션 없이는 상상할 수 없습니다. 애니메이션을 만드는 옵션 중 하나는 무엇보다도 레이어에서 애니메이션을 만들 수 있는 Adobe ImageReady 애플리케이션을 사용하는 것입니다. 이 경우 다층 이미지 자체는 다음을 포함하여 다양한 응용 분야에서 준비될 수 있습니다. 어도비 일러스트레이터.

Window=>Symbols 명령으로 열거나 Window=>Symbol Libraries 명령으로 열 수 있는 기호 라이브러리 중 하나의 요소를 기반으로 애니메이션을 만드는 것은 매우 쉽습니다.

예를 들어, 기호 객체의 크기를 늘리려고 할 것입니다. 객체를 늘리는 프로세스의 주요 단계는 별도의 레이어에 설정되어야 합니다. 먼저, 예를 들어 그림과 같이 기호 객체를 서로 위에 배치한 다음 각 후속 객체의 크기를 늘립니다. 61. 결과적으로 레이어 팔레트에 많은 개체가 포함된 하나의 레이어가 생성됩니다(그림 62). 이 이미지를 PSD 형식으로 직접 내보내면 레이어가 하나뿐이므로 아무것도 제공되지 않으며 당연히 ImageReady 프로그램에서 PSD 파일을 열면 레이어도 하나뿐입니다. 따라서 먼저 개체를 다른 레이어에 배치해야 합니다. 이것은 할 수 있습니다 다른 방법들가장 쉬운 방법은 먼저 레이어 팔레트에서 레이어 1을 선택하고 레이어로 해제 명령을 사용하는 것입니다. 결과적으로 각 객체는 자체 레이어로 이동되지만 모두 레이어 1에 중첩됩니다. 따라서 중첩된 모든 레이어를 레이어 팔레트의 맨 위로 수동으로 드래그하여 레이어 1 레이어 위에 있게 한 다음 이제 비어 있는 레이어 1 레이어를 삭제하면 됩니다(그림 63). 그림 1과 같은 설정으로 File=>Export 명령을 사용하여 이미지를 PSD 형식으로 내보냅니다. 64.

ImageReady 프로그램에서 생성된 PSD 파일을 로드합니다(그림 65 및 66). 애니메이션 레이어에서 프레임 만들기 팔레트 메뉴를 엽니다. 결과적으로 5개의 프레임이 생성되고 각 프레임은 자체 레이어에 해당하며 애니메이션 팔레트 창은 그림 4와 같습니다. 67.

그런 다음 생성된 각 프레임의 지속 시간을 설정합니다. 이 경우 모든 프레임의 지속 시간은 0.2초로 설정됩니다. 그런 다음 File=>Save Optimized(파일=>Save with Optimization) 명령을 사용하여 최적화된 애니메이션을 저장합니다. 결과 결과는 그림과 유사할 수 있습니다. 68.

Illustrator의 라이브 블렌드 기능을 사용하려면 ImageReady에서 애니메이션으로 쉽게 변환할 수 있는 블랭크를 구하는 것이 훨씬 더 편리합니다. Illustrator와 ImageReady를 함께 사용하면 GIF 애니메이션 제작 프로세스의 속도가 크게 향상됩니다.

예를 들어 두 개의 임의의 여러 색상 개체를 그린 다음 적절한 매개변수를 사용하여 블렌드 링크로 연결합니다(그림 69). 이미지가 단일 레이어에 있기 때문에 이 파일을 직접 사용하여 애니메이션을 만드는 것은 불가능합니다(그림 70). 따라서 먼저 블렌드 개체의 각 요소를 별도의 레이어에 배치해야 합니다. 이렇게 하려면 레이어 창에서 선을 선택하고 오른쪽 상단 모서리에 있는 검은색 화살표를 클릭하여 팔레트 메뉴를 활성화한 다음 레이어 시퀀스로 해제 명령을 선택합니다(그림 71). Shift 키를 누른 채 생성된 레이어를 선택하여 레이어 1 레이어 위에 배치한 다음 레이어 1 레이어 자체를 삭제하고 결과적으로 휴지통으로 이동하면 레이어 팔레트가 그림 1과 같은 형태를 취하게 됩니다. 72.

쌀. 70. 초기 상태레이어 창

File=>Export 명령을 사용하여 생성된 파일을 PSD 형식으로 내보냅니다. ImageReady 프로그램에서 생성된 PSD 파일을 엽니다(그림 73). Illustrator에서 생성된 모든 레이어는 레이어 창(그림 74)에 표시되며 애니메이션 창에는 현재 프레임이 하나만 있습니다.

팔레트의 오른쪽 상단 모서리에 있는 검은색 화살표를 클릭하여 애니메이션 팔레트 메뉴를 활성화하고 레이어에서 프레임 만들기 명령을 선택합니다. 결과적으로 이 예에서는 5개의 프레임이 생성되고 애니메이션 팔레트 창이 해당 프레임을 가져옵니다. 그림에 따라 형태를 취한다. 75. Shift 키를 누른 상태에서 모든 프레임을 선택하고 이 예에서는 적절한 프레임 지속 시간을 설정합니다. 각 프레임에 대해 0.2초의 동일한 시간이 소요됩니다. 그런 다음 파일=>최적화 저장(파일=>최적화로 저장) 명령을 사용하고 파일 유형 목록에서 이미지만(*.gif) 옵션을 설정하여 최적화된 파일을 저장합니다. 애니메이션은 그림과 유사합니다. 76.

훨씬 더 흥미로워 보이는 것은 움직임이 아니라 블렌드 객체의 부드러운 크기 조정입니다. 예를 들어 이미 생성된 블렌드 전환을 사용할 수 있습니다. 이 경우 각 블렌드 전환 요소에 대해 별도의 레이어를 만든 후 정렬 팔레트의 수평 정렬 센터 및 수직 정렬 센터 버튼을 사용하여 모든 개체를 서로 위에 배치합니다(그림 77).

생성된 파일을 PSD 형식으로 내보내고(파일=>파일 내보내기=>내보내기) 생성된 PSD 파일을 ImageReady 프로그램에서 엽니다(그림 78). 레이어를 기반으로 애니메이션 프레임을 생성하고(레이어에서 프레임 만들기 레이어에서 프레임 만들기) 적절한 지속 시간을 선택합니다(그림 79). 그런 다음 애니메이션을 더욱 효과적으로 만들기 위해 기존 프레임을 역순으로 복사하여 이미지가 먼저 증가한 다음 감소하는 식으로 원을 그리며 진행합니다(그림 80). 그런 다음 최적화 파일을 저장합니다(파일=>최적화된 파일 저장=>최적화하여 저장). 결과 애니메이션은 그림 1에 나와 있습니다. 81.

쌀. 80. 프레임 복제 후 애니메이션 창 상태

쌀. 81. 완성된 애니메이션

안녕하세요 여러분! 오늘은 Adobe Illustrator 프로그램의 기능을 Flash의 기능과 비교하여 설명하려고 합니다. 이것은 프로그램에 대한 전반적인 분석이 아니라 이 프로그램에서 발견한 몇 가지 흥미로운 기능에 대한 설명입니다. 한 포스팅에 다 올리기 위해 공부하면서 하나씩 정보를 모았습니다. 저는 Illustrator에 대한 경험이 풍부한 사용자가 아니라는 점을 바로 인정하겠습니다. 저는 지난 6개월 동안 그것을 그림에만 사용했습니다(그 전에는 모든 것을 Flash로 그렸습니다). 많은 사람들은 일러스트레이터가 복잡하고 항상 직관적이지 않다고 불평합니다. 나는 플러시 후에 이 프로그램이 복잡하다는 데 어느 정도 동의합니다. 하지만 여기서 가장 중요한 것은 포기하는 것이 아니라 계속 공부하는 것입니다. 그리고 몇 주 후에 생각이 떠오릅니다. 전에는 그것 없이는 어떻게 관리할 수 있었습니까!

그렇다면 제가 일러스트레이터의 어떤 점이 마음에 들었고, 플래시에 없는 점은 무엇이었나요?
1. 가장 간단하면서도 동시에 필요한 것부터 시작하겠습니다. Flash에서 객체를 원으로 배열해 보세요. 이전에는 Deco Tool이 있었지만 불필요한 것으로 간주되어 제거되었습니다. 우리는 손으로 하는 것이 더 재미있을 것이라고 결정했습니다. Illustrator에는 효과 – 왜곡 및 변형 – 변형 기능이 있습니다.

모든 것이 빠르고 간단합니다. 설정에서 값(개체 간 거리, 사본 수)을 직접 설정합니다.

2. 지그재그

훨씬 더 간단하지만 그럼에도 불구하고 유용한 것입니다. 작은 일처럼 보이지만 Flash에서는 손으로 그려야 하지만 Illustrator에서는 몇 초면 됩니다.

3. 물체의 변형(Warp)

플래시에는 이와 같은 것이 없습니다. 아래 예에서는 단순한 모양을 변형하는 2가지 방법(효과 – 워프 – 호/물고기)만 보여주었습니다. 실제로는 15개가 있습니다. 최신 버전프로그램들.

4. 모서리 자동 라운딩(Round Corners)

수동으로 수행할 수 있습니다. 그래픽 개체에서 선택하면 흰색 점과 둥근 선 기호가 모서리(모든 모서리)에 나타납니다. 마우스로 드래그하여 취향에 맞게 조정합니다.

그러나 이는 모양에만 적용되며, 연필 선을 사용하면 약간 다르게 작업합니다. 즉, 둥근 효과(효과 – 스타일화 – 둥근 모서리)를 적용합니다. 출구에서도 동일한 결과를 얻습니다.

5. 러프엔

단순한 도형(Effect – Distort&Transform – Roughen)에 효과가 적용됩니다. 출력은 로우 폴리 3D 모델과 유사합니다. 정말 멋지다고 생각합니다 :) 그리고 가장 중요한 것은 매우 간단하다는 것입니다.

6. Pucker&Bloat(당김 및 부풀음)
아래 그림의 예:

7. 양식 확장(오프셋 경로)

Flash에는 채우기 확장 기능이 있습니다. Illustrator와 달리 연필 선에서는 전혀 작동하지 않습니다.

8. 브러쉬 (아트 브러쉬, 패턴 브러쉬, 스캐터 브러쉬)
아래 그림을 예시와 함께 살펴보세요.

9.텍스처 브러시

Illustrator에는 또한 제가 작성한 많은 텍스처 브러시와 해당 브러시가 어떻게 나타나는지 포함되어 있습니다. 새로운 버전플래시 - . Adobe Animate에서 브러시를 사용하면 속도가 매우 느린 것으로 나타났습니다. 그게 다야 :(

10. 이것이 진짜 트릭인지는 모르겠지만 Blob Brush라는 재미있는 이름을 가진 브러시에 집중하고 싶습니다. 도구 모음에 있는 이 브러시는 사용하기 매우 좋은 브러시입니다. 다양한 설정이 있는데 평소보다 더 마음에 듭니다. 장점을 말로 설명하기는 어려우니 한번쯤 드셔보시는 것이 좋을 것 같습니다.

10.그리드 분할

또 다른 유용한 기능은 Split to Grid(Object-Path-Split to Grid) 기능입니다. 이 기능을 사용하면 모양을 동일한 세그먼트로자를 수 있습니다. 이것은 우리에게 무엇을 생각나게 합니까? 맞습니다 - 고층 건물의 창문입니다. 예를 들어 도시 풍경을 그리는 데는 멋진 일이라고 생각합니다.)

하나 더 유용한 도구, 아마도 첫 번째 출시 이후 일러스트레이터에 등장했을 것입니다. 예를 들어 나무 질감을 만드는 데 사용할 수 있습니다.

12. 이동(오른쪽 – 변형 – 이동)

지정된 거리만큼 객체를 변위합니다. 원하는 경우 선택한 개체로부터 수평/수직으로 원하는 거리에 배치될 복사본을 즉시 생성할 수 있습니다. 이전 버전의 Flash에는 다음을 수행하는 플러그인이 있었습니다. 이 기능. 안타깝게도 이름이 기억나지 않습니다.

Illustrator는 원활한 패턴(개체-패턴-만들기)을 만드는 데 매우 편리합니다. 를 만들면서 플래시로 얼마나 정교함을 발전시켰는지 기억합니다. SS 2015 버전의 Illustrator에서는 모든 것이 자동화되어 있습니다. 몇 가지 그래픽 요소만으로 수십 가지 변형 패턴을 만드는 데 도움이 됩니다. 더 많은 이전 버전지금까지의 플래시와 마찬가지로 모든 프로그램은 수동으로 작성해야 했습니다.

(참고 – 개체 – 모양 확장 기능을 사용하여 패턴을 벡터 편집 가능한 개체로 만들 수 있습니다.

14. 객체 모자이크

기존 그림을 기반으로 색상 팔레트를 만듭니다. 마음에 드는 그림을 일러스트레이션으로 가져온 다음(열기) 개체 - 개체 모자이크 만들기를 선택하세요. 설정에서 높이와 너비의 분할 빈도를 지정합니다.

그리고 출력에서 우리는 다음을 얻습니다:

15.블렌드

그라데이션을 만드는 데 사용됩니다. 그림과 같이 단계별 전환을 만들 수 있습니다. 자주 사용한다고는 말하지 않겠지만 누군가에게는 유용할 수도 있습니다. 간단한 배경 이미지를 만드는 데 사용할 수 있을 것 같습니다.

이 도구는 개체를 복제하는 데에도 사용할 수 있습니다. 두 개체를 서로 떨어진 곳에 배치하고 혼합 옵션을 적용한 후 단계 수(복제된 개체 수)를 선택합니다.

16. 모양 도구 만들기. 프리미티브 작업에 매우 편리한 것입니다. 플래시에서는 덜 편리해 보였습니다.

Alt를 누른 상태에서 선택한 세그먼트를 클릭하면 세그먼트가 삭제됩니다. 선택한 여러 영역 위로 마우스를 드래그하면 연결이 됩니다.

애드온은 자동으로 자르기, 연결하기 등을 도와주는 도구입니다. 강조된 형태. 저는 별로 편리하지 않습니다. 저는 Build Shape Tool을 자주 사용합니다.

(아트보드)

18.사용자 정의 도구 패널

자신만의 도구 모음을 만들고, 불필요한 도구는 버리고, 사용하는 도구만 선택하는 기능.

Flash에서는 아트보드, 즉 장면(장면 1,2,3..)이 별도로 위치하므로 장면 간을 전환해야 합니다(Shift+F2). Illustrator에서는 모두 눈앞에 배치할 수 있습니다. 동일한 도면을 여러 버전으로 만들 때 모든 옵션을 눈앞에서 비교하여 볼 수 있어 편리합니다.

19.그래픽 스타일을 사용한 아이소메트릭

마지막으로 그래픽 스타일(그래픽 스타일)을 사용하여 1번의 클릭(또는 3개의 면이 있으므로 더 정확하게는 3번의 클릭)으로 아이소메트리를 사용하지 않고 아이소메트리를 만드는 것입니다. 이것이 어떻게 수행되는지는 다음번에 설명하겠습니다.

일러스트레이터와 플래시의 공통점은 객체를 심볼에 저장하는 기능이며, 마찬가지로 쉽게 이 심볼을 플래시로 전송할 수 있다는 것입니다(가져오기 – 스테이지로 가져오기를 사용하여 flash.ai에서 파일 열기).
Illustrator의 심볼은 Flash와 동일한 속성을 갖습니다.
그리고 결론적으로 일러스트레이터에서는 플래시보다 열등하다고 쓰겠습니다. 예, 예, 그런 것이 있습니다. 그리고 이것이 채우기 도구(페인트 통)입니다. 아무리 일루셔리 모드에 익숙해지려고 해도 플래시가 더 편해요.
내 메모가 도움이 되었거나 자신만의 내용을 추가하고 싶다면 댓글을 환영합니다! 모두에게 행운을 빕니다;)

최근 웹사이트와 애플리케이션에서 다양한 종류의 SVG(Scalable Vector Graphics) 그래픽 애니메이션이 인기를 얻고 있습니다. 이것은 모든 것이 사실 때문입니다. 최신 브라우저이미 이 형식을 지원합니다. 다음은 SVG에 대한 브라우저 지원에 대한 정보입니다.

이 기사에서는 경량 Jquery 플러그인 Lazy Line Painter를 사용하여 SVG 벡터 애니메이션의 가장 간단한 예를 설명합니다.

원천

이 작업을 완료하고 완전히 이해하려면 HTML, CSS, Jquery에 대한 기본 지식이 바람직하지만 SVG에 애니메이션을 적용하려는 경우 필수는 아닙니다. 시작하겠습니다!

그리고 우리가 따라야 할 단계는 다음과 같습니다.

올바른 파일 구조 만들기

플러그인 다운로드 및 연결

Adobe Illustrator에서 멋진 윤곽선 그림 그리기

사진을 Lazy Line Converter로 변환하세요

결과 코드를 main.js에 붙여넣습니다.

취향에 맞게 CSS를 추가하세요.

1. 올바른 파일 구조 만들기
초기화 서비스는 아래 그림과 같이 매개변수를 선택해야 하는 경우 이 작업에 도움이 될 것입니다.

클래식 H5BP(HTML5 보일러 플레이트)
템플릿 없음
그냥 HTML5 Shiv
축소된
IE 클래스
크롬 프레임
그런 다음 다운로드를 클릭하세요!

2. 플러그인 다운로드 및 연결

초기화는 최신 Jquery 라이브러리와 함께 제공되므로 Lazy Line Painter 프로젝트 저장소에서 다운로드해야 하는 아카이브에서 2개의 파일만 프로젝트로 전송하면 됩니다. 첫 번째는 'jquery.lazylinepainter-1.1.min.js'(플러그인 버전은 다를 수 있음)이며 결과 폴더의 루트에 있습니다. 두 번째는 example/js/vendor/raphael-min.js입니다.

이 2개의 파일은 js 폴더에 있습니다. 그리고 다음과 같이 main.js 이전에 index.html에 연결합니다.

3. Adobe Illustrator에서 멋진 윤곽선 그림을 그립니다.

Illustrator에서 윤곽선 그림을 그립니다(이 작업을 수행하는 가장 쉬운 방법은 펜 도구를 사용하는 것입니다).

효과를 위해서는 시작과 끝이 필요하기 때문에 그림의 윤곽이 닫히지 않아야 합니다.

채우기가 없어야합니다

최대 파일 크기 – 1000×1000px, 40kb

개체>대지>대지 경계에 맞추기 개체의 경계까지 자르기를 만들어 보겠습니다.

SVG 형식으로 저장(표준 저장 설정이 적합함)

예를 들어 첨부 파일의 아이콘을 사용할 수 있습니다.

4. 이미지를 Lazy Line Converter로 변환
아래 그림의 창으로 아이콘을 드래그하세요.
윤곽선의 두께, 색상, 애니메이션 속도는 변환 후 나타나는 코드 자체에서 변경할 수 있습니다!

5. 결과 코드를 main.js에 붙여넣습니다.
이제 결과 코드를 빈 main.js 파일에 붙여넣기만 하면 됩니다.
옵션:
스트로크Width — 외곽선 두께
뇌졸중 색상 — 윤곽선 색상
기간 매개변수의 값(기본값 600)을 변경하여 각 벡터의 그리기 속도를 변경할 수도 있습니다.

6. 취향에 맞게 CSS를 추가하세요
index.html에서 단락 제거

안녕하세요! 이것은 HTML5 상용구입니다.

그 대신 애니메이션이 실행될 블록을 삽입합니다.

그런 다음 main.css 파일에 CSS를 추가하여 더 보기 좋게 만듭니다.

본문( 배경:#F3B71C; ) #아이콘( 위치: 고정; 위쪽:50%; 왼쪽:50%; 여백: -300px 0 0 -400px; )

모든 파일을 저장합니다.
이제 최신 브라우저에서 index.html을 열고 그 효과를 즐겨보세요.

추신 시작할 때 로컬 머신애니메이션 시작이 몇 초 동안 지연될 수 있습니다.

오늘은 좀 특이한 일이 있어서 어도비 레슨일러스트레이터. 이번에는 정적인 사진이 아닌 실제 애니메이션을 만들 것이기 때문입니다. 상상해 보세요. Adobe를 사용하여일러스트레이터는 만화도 그릴 수 있어요 :)

이를 위해서는 아무것도 필요하지 않습니다. 레이어를 적절하게 구성하고 최종 작업을 swf 형식으로 내보냅니다. 여기서 각 레이어는 애니메이션 프레임으로 변환됩니다. 오늘 튜토리얼에서는 복고풍 영화 스타일로 카운트다운 애니메이션을 그려보겠습니다. 출력은 동일한 카운트다운이 포함된 플래시 비디오여야 합니다.

가장 먼저 해야 할 일은 향후 애니메이션에 필요한 모든 요소를 그리는 것입니다. 이를 위해 별도의 문서에서 필름 프레임의 두 위치, 별도의 섹터로 절단되는 참조용 원, 고대 효과를 추가하기 위한 텍스처 및 수직 스크래치, 모든 숫자 및 숫자를 만들었습니다. 비문.

만화의 모든 부분이 준비되면 애니메이션 자체 제작을 시작할 수 있습니다. 편의상 새 문서에서 이 작업을 수행하는 것이 좋습니다. 이 경우 레이어는 애니메이션 프레임 역할을 합니다. 그리고 첫 번째 레이어에서는 필름 프레임만 복사하면 됩니다. 작업 공간 중앙에 배치하세요.

이제 두 번째 레이어를 만들고 그 안에 필름 프레임을 복사합니다. 여기서 가장자리를 따라 구멍이 오프셋으로 만들어집니다. 또한 중앙에 배치해야 합니다.

이 두 레이어에서 이미 움직이는 영화의 애니메이션을 얻을 수 있습니다. 하지만 나중에는 더 많은 레이어가 필요할 것입니다. 따라서 처음 두 레이어를 선택하고 패널 옵션으로 이동하여 레이어의 복사본을 만듭니다.

비슷한 방식으로 움직임을 정의하는 12개의 필름 프레임 레이어를 축적해야 합니다.

이제 우리는 수많은 레이어를 갖게 되었으며 모두 표시됩니다. 상위 레이어가 하위 레이어를 차단한다는 의미에서 이는 작업에 완전히 편리하지 않습니다. 따라서 레이어 이름 왼쪽에 있는 눈 아이콘을 클릭하면 일부 레이어를 끌 수 있습니다. 모든 레이어를 한 번에 끄거나 켜려면 Alt 키를 누른 상태에서 눈 아이콘을 클릭하세요. 레이어를 켜고 끄면 미래 애니메이션의 특정 프레임에 무엇이 있는지 정확하게 볼 수 있습니다. 이제 필름의 움직임에 약간의 지터를 추가하려면 결과 프레임을 다른 방향으로 약간 이동해야 합니다. 이렇게 하려면 작업할 레이어만 켜십시오. 이 순간를 선택한 다음 프레임을 임의의 방향으로 몇 픽셀 이동합니다.

모든 레이어를 살펴보고 약간의 변화를 추가한 후에는 움직이는 원의 애니메이션 만들기를 시작할 수 있습니다. 이렇게 하려면 만화 부분이 포함된 문서의 섹터로 구성된 원을 복사하여 필름 프레임 상단의 첫 번째 레이어에 배치합니다.

원을 선택 취소하면 하나의 전체처럼 보입니다. 이것이 바로 우리에게 필요한 것입니다.

하지만 개별 섹터로 구성되어 있기 때문에 색상을 변경하면 매우 빠르고 쉽게 애니메이션을 만들 수 있습니다. 이렇게 하려면 이 원을 두 번째 레이어에 복사하고 첫 번째 섹터를 더 밝게 만듭니다. 우리 필름이 움직일 때 흔들리는 것을 기억하실 것입니다. 따라서 원을 프레임 중앙에 정확하게 배치할 필요는 전혀 없습니다. 눈으로 위치를 잡습니다.

비슷한 방식으로 원을 다음 각 레이어에 복사하고 이전보다 밝은 색상으로 한 섹터를 더 칠해야 합니다. 이 12개 레이어는 함께 원을 그리며 움직이는 영화의 애니메이션을 형성합니다.

다음으로 레이어에 텍스처를 추가해야 합니다. 첫 번째 레이어를 켜고 거기에 예비 부품이 포함된 원본 파일의 텍스처를 복사합니다.

그런 다음 다음 레이어를 하나씩 켜고 동일한 텍스처를 거기에 복사합니다. 각 프레임마다 다르게 보이도록 하려면 간단히 90도 회전하면 됩니다. 짐작하셨겠지만, 12개 프레임 모두에 텍스처를 추가해야 합니다.

이미 복사하는 데 지쳤다면 기쁘게 해드릴 수 있습니다. 남은 것이 거의 없습니다. 가장 어려운 부분은 끝났습니다. 남은 것은 수직 스크래치를 추가하는 것뿐입니다. 거의 다되었습니다. 이를 위해 원본 스크래치를 다시 복사하여 여러 레이어의 임의의 위치에 배치합니다. 제 경우에는 스크래치가 2겹에만 나타납니다.

이제 영화 애니메이션을 포함한 메인 사이클이 준비되었으므로 남은 것은 숫자를 추가하는 것뿐입니다. 카운트다운이 3에서 1까지 진행되고 Go!!!라는 단어가 추가되므로 더 많은 레이어가 필요합니다. 12개가 아니라 최대 48개입니다. 이렇게 하려면 영화 애니메이션이 포함된 기성 레이어 복사본을 3개 더 만들어야 합니다.

그리고 모든 것이 간단합니다. 첫 번째 레이어를 켜고 거기에 숫자 3을 놓습니다.

그런 다음 원 애니메이션이 끝날 때까지 이 그림을 다음 레이어에 복사해야 합니다. 원이 다시 완전히 채워지는 레이어의 다음 복사본에 도달하면 숫자 2를 입력해야 합니다. 같은 방법으로 숫자 1을 원하는 레이어에 복사합니다. 그리고 Go!!! 비문의 마지막 레이어에 도달하면 비문을 원하는 레이어에 복사하기 전에 원을 삭제하기만 하면 됩니다.

이것이 애니메이션의 전부입니다. 여기서 가장 중요한 것은 혼동하지 않는 것입니다. 레이어에 편리한 이름을 지정할 수 있지만 좀 게을렀습니다. :) 그리고 작업을 마친 후에는 눈 아이콘을 클릭하여 모든 레이어를 다시 켜도록 하세요.

내보내기 설정 창에서 내보내기 형식: AI 레이어를 SWF 프레임으로 설정해야 합니다. Illustrator 레이어를 애니메이션 프레임으로 바꾸는 것이 이 옵션입니다. 다음으로 고급 버튼을 클릭하세요.

열 예정이다 추가 세팅. 여기서는 프레임 속도를 설정해야 합니다. 초당 12프레임이 있습니다. Looping 체크박스는 순환적인 애니메이션을 담당합니다. 덕분에 동영상이 원 모양으로 재생됩니다. 레이어 순서: 상향식 옵션은 패널의 아래쪽에서 위쪽으로 일러스트레이터 레이어를 재현합니다. 이것이 바로 우리가 애니메이션을 만든 방법입니다.