Adobe Animate CC 애니메이션 만들기. 다닐 피무슈킨. Wacom 모델 이름에 있는 숫자와 문자는 무엇을 의미합니까?

새 파일을 만들고 크기를 800x600으로 만든 다음 일부 파일, 즉 몇 장의 사진과 "숲의 소음 mp3", 즉 사운드를 파일로 전송해 보겠습니다. 여기로 옮기겠습니다. 결과적으로 우리가 얻은 것은 이 사진입니다. 숲이고 "bg", "재생", "일시 정지"라고 불리며 버튼입니다. 이제 아래로 이동하겠습니다. 이동해 보겠습니다. 가장 간단한 옵션입니다.

이제 애니메이션을 시작하고 cntr+enter를 누르면 숲과 버튼 두 개만 있고 아무것도 작동하지 않습니다. 자동으로 사운드를 재생하려면 "숲 소음"이라고 합니다. 이 레이어를 선택한 다음 "자동 재생"을 선택해야 합니다. 이제 cntr+Enter를 누르면 사운드가 재생됩니다. 놀라운.

Adobe Edge Animate에서 비디오에 클릭 가능한 링크를 추가하는 방법.

방금 버튼을 그렸고 배경이 있는 경우 클릭해도 아무 전환도 발생하지 않습니다. 추가하려면 대화형 링크이 버튼을 선택하고 열기 동작, 파울 버튼을 마우스 오른쪽 버튼으로 클릭하고 클릭 클릭, 즉 클릭 시 수행되는 작업을 클릭해야 합니다. 그리고 여기에서 Open을 선택해야 합니다. 당신은 raol입니다.

어떻게 하는지 이번 영상에서 보여드리겠습니다. 복잡하지는 않지만 올바른 코드를 복사해야 하는 위치와 붙여넣어야 하는 위치를 정확하게 이해해야 합니다.

당신이 가지고 있다고 가정 해 봅시다 Adobe Edge Animate로 만든 영상, 클릭하면 원하는 것이 열립니다 방문 페이지, Edge Animate 형식으로 소스 및 Java 스크립트와 함께 폴더에 저장됩니다. 아무데서나 열어보세요 텍스트 에디터, 메모장 등의 테스트 편집기를 사용할 수 있습니다.

Adobe Edge Animate에서 애니메이션을 반복하는 방법, 즉 끝까지 재생될 때 처음부터 다시 시작하여 영원히 계속되도록 만드는 방법입니다.

여기에서 키 프레임을 복사할 수 있습니다. 즉, 하나의 프레임을 선택하고 cntr+c를 누른 다음 원하는 필드를 클릭하고 cntr+v를 누르면 애니메이션이 반복됩니다. 즉, 반복되지 않지만 이 경우에는 시작점에서 다시 시작점으로 돌아갑니다. 이 비디오를 실행하고 cntr+enter를 누르면 애니메이션이 1초만 지속되고 한쪽으로 갔다가 다른 쪽으로 돌아오는 것을 볼 수 있습니다.

Adobe Edge Animate에서 만든 배너가 있다고 가정해 보겠습니다. 이를 클릭하면 원하는 랜딩 페이지가 열리고 이는 Edge Animate 형식이며 소스 코드 및 Java 스크립트와 함께 폴더에 저장됩니다. 텍스트 편집기에서 열면 메모장 등의 테스트 편집기를 사용할 수 있습니다.

다음으로 이 배너를 사이트에 삽입하고 싶습니다. 무엇을 해야 합니까? 색인 파일을 다운로드한 다음 텍스트 편집기에서 열고 Adobe 가장자리 코드를 복사한 다음 마지막에 "머리" 앞에 코드를 추가한 다음 배너를 추가할 장소의 제목 앞에 코드를 추가해야 합니다. 사업부. 보다 정확한 실행을 위해 https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit에 도움이 되는 지침이 있습니다. 그런 다음 저장하고 FTP 서비스로 이동합니다. 저는 filezilla를 사용하여 사이트의 저장 위치를 찾은 다음 인덱스 폴더를 서버에 있는 파일에 복사하여 현재 파일을 바꿉니다. 다음으로 모든 Java 스크립트를 다운로드하고 사이트를 업데이트합니다. 모든 것이 준비되었습니다. 애니메이션이 작동하고 랜딩 페이지 탭도 열립니다.

그러한 수업에 관심이 있다면 내 채널을 구독하세요. 왜냐하면... 가까운 시일 내에 새로운 동영상이 많이 나올 예정입니다 - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – Adobe Edge animate에서 만든 배너가 있다고 가정해 보겠습니다.

01:30 – 사이트에 배너 추가

02:09 – "head" 태그 앞에 코드 추가

02:50 – 사이트에 배너를 추가하는 방법에 대한 지침

03:31 – 서버에 파일 업로드

05:29 – 사이트를 업데이트하면 모든 것이 준비됩니다!

가입하고 질문하세요:

3개 다운로드 무료 템플릿뮤즈: http://site/free-landing.html

http://vk.com/adobeedgeanimate

저는 VKontakte에 있습니다: http://vk.com/danilfimushkin

웨비나에서 저는 벡터 일러스트레이션을 사용하여 본격적인 애니메이션 배너를 만드는 방법을 설명하고 보여주었습니다.

00:17 – Edge Animate에서 벡터 일러스트레이션에 애니메이션을 적용하기 시작합니다.
14:06 – 캐릭터의 발 움직임 만들기
16:54 – 중첩 기호의 장점
17:48 – 중첩 기호란 무엇입니까?
18:24 – 반복 애니메이션 작성
19:42 – 반복되는 애니메이션이 준비되었습니다.
23:40 – 눈 깜박임 만들기
26:54 – 저장할 때 파일 이름 결정
27:57 – "드롭다운" 텍스트 애니메이션
28:39 – 모션 곡선 연결 – 애니메이션 축 변경
30:03 – 애니메이션 중간 요약, 눈 덮인 풍경 만들기 및 눈송이 애니메이션
33:39 – Edge Animate 리뷰
34:52 – 숙제
35:25 – 활성 링크를 추가하는 방법
39:09 – 여러 개의 버튼 생성 및 링크 연결

가입하고 질문하세요: http://vk.com/adobeedgeanimate

UPD 2015년 12월 6일:
Flash Runtime 및 Adobe AIR의 제품 관리자는 다음과 같이 말했습니다. 계획이 없어 Flash Runtime 및 AIR 작업을 중지하고 콘텐츠 제작 제품 이름 바꾸기안 돼요 운명과는 관련이 없다 플래시 플레이어 그리고 관련 생태계.

의미를 크게 바꾸는 한 가지 뉘앙스(기술적 문맹 및 일반 복사-붙여넣기)를 제외하고는 모든 것이 괜찮을 것입니다. 출판물은 서로를 재인쇄하여 원본에 없는 "사실"을 점점 더 추가합니다. 한마디로 - 손상된 전화기.

원본 기사 http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html에서는 Adobe가 Flash Professional의 이름을 Animate CC로 바꾼다고 보고합니다. 또한 고객은 더 많은 지원 플랫폼 등을 원한다고 보고합니다.

그리고 저는 많은 사람들이 Flash와 Flash Professional의 차이점을 인식하지 못한다는 사실에 놀라지 않았습니다. 체인 아래로 연결되는 다른 소스를 인용하면서 다양한 개그가 뉴스 사이트에 나타나기 시작했습니다. 그리고 항상 원본은 아닙니다.

오늘날 Flash라는 단어는 브라우저용 플러그인으로 인식됩니다. 기술적으로는 Flash Player입니다. 하지만 콘텐츠 제작 도구인 Flash Professional이 있습니다. Microsoft가 Word의 이름을 TextMachine으로 바꾸면 사람들은 "Microsoft가 Word 개발을 중단했습니까?"라고 외칠 것입니까? 흑백으로 쓰여 있는데도 콘텐츠 제작이 지원되고 데이터 편집도 가능하다고요?

내 자신의 예를 통해 생생한 그림을 보여줄 수 있습니다. 로컬 클라이언트가 iOS용 프레젠테이션용 애니메이션을 만드는 데 무엇을 사용할지 묻습니다. Flash Professional에서 이 말을 할 수 있어서 자랑스럽습니다. 그리고 고객은 무감각합니다. 잠시 후 그는 이렇게 말합니다.

"하지만 허브에는 플래시가 작동하지 않아 태블릿에서는 작동하지 않는다고 적혀 있습니다."

그러다가 나는 무감각해진다. 플래시에 관한 기사 작성자와 클라이언트의 기술적 문맹으로 인해 사람들은 원하는 결과에서 멀어지게 됩니다. 다행히 의뢰인께서 설득을 하셔서 결과에 만족해 하셨습니다.

원래 기사로 돌아가 보겠습니다. 그들은 html5가 성숙해졌으며 이미 Flash의 대부분의 기능을 지원한다고 보고합니다. 아래로 내려가면 Adobe 자체에서는 Flash를 웹 게임 및 프리미엄 비디오와 같은 프리미엄 콘텐츠를 제공하는 주요 수단으로 보고 있습니다. 하지만 플래시 지원을 중단한다는 말은 없습니다.

게다가... 그들은 Flash Player의 호환성과 보안을 개선하기 위해 Microsoft 및 Google과 협력하고 있음을 분명히 밝혔습니다. 그리고 그들은 Flash Player에서 게임의 신뢰성과 안전성을 향상시키기 위해 Facebook과 긴밀히 협력하고 있다는 점도 잊지 않았습니다. 그렇다면 플래시를 포기한다는 말은 어디에 있습니까?

일반적으로 Flash 개발에 대해 이야기하면 그렇습니다. 오래 전에 중단되었습니다. 사소하지만 중요한 개선 사항만 적용되었으며 보안 버그가 수정되었습니다. 하지만 정말 그렇게 나쁜가요? 내 관점에서 보면 Flash에는 필요한 모든 것이 있습니다. 물론, 나는 더 많은 것을 원합니다. 그런데 왜?

더 많은 내용을 보려면 독립 실행형 게임 형식을 선택해야 합니다. 그리고 Adobe AIR(Flash를 고려한다면)가 있습니다. 거절 어도비 지원 AIR가 고정되어 있지 않습니다. 2016년 계획에 관한 정보를 가지고 왔습니다. 하지만 브라우저 플래시가 사라질까요? 틀림없이. 그러나 내일은 절대 아닙니다.

플래시가 배터리를 소모한다고 진부하게 말하고 싶은 사람들을 위해 캔버스가 배터리를 충전하는 방법을 보여주세요.

Adobe Edge Animate 프로젝트가 더 이상 적극적으로 개발되지 않는다는 점도 주목할 가치가 있습니다. 하지만 왜냐하면 저는 Flash Professional 개발이 거의 임박했습니다. Edge Animate는 전혀 개발되지 않을 것임을 확신합니다(예외 심각한 오류). 이 결정은 찬성하여 내려졌습니다. 어도비 플래시 Professional(향후 Animate CC).

ADFOX에 배치할 HTML 광고 소재를 준비하려면 배너 클릭을 처리하고 배너의 이벤트를 계산하는 코드 삽입에 대한 요구 사항을 준수하는 것이 중요합니다.
HTML 코드를 개발할 때 다음 지침이 작성된 편집기를 사용할 수 있습니다.
- 어도비 애니메이트 CC;
- Google 웹 디자이너;
- 어도비 엣지 애니메이트 CC.

HTML 코드 요구 사항(코드 개발자용)

다음 요구 사항을 충족하여 프로젝트를 준비하십시오.

1. HTML 코드에 허용되는 최대 문자 수는 65,000자입니다.
2. 배너의 HTML 코드 안에 JavaScript와 CSS를 배치하는 것이 좋습니다.
결과 HTML 코드가 허용되는 최대 문자 수를 초과하는 경우 JavaScript 및 CSS를 삽입하여 코드를 줄여야 합니다. 별도의 파일:
- js를 저장하고 CSS 코드확장자가 .js 또는 .css인 별도의 파일로;
3. 프로젝트에는 확장자가 .html인 파일이 하나만 포함될 수 있습니다.
4. 프로젝트에 허용되는 최대 파일 수는 50개입니다.
5. 프로젝트에 허용되는 파일 형식: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, fon, mf, ttc, woff;
6. 최대 크기각 파일(아카이브 내부 파일에도 적용됨):
- 300Kb;
- 비디오 파일의 경우 1MB.
7. 파일 이름에는 숫자 또는 영문자와 밑줄 문자만 포함되어야 합니다. 파일 이름에 러시아어 문자, 공백, 따옴표 및 특수 문자를 사용할 수 없습니다.
8. 변수 및 객체 이름에는 러시아어 문자를 사용할 수 없습니다.
유일한 예외는 배너의 텍스트입니다.
9. 완성된 프로젝트의 형식 - 지퍼보관소.

어도비 애니메이트 CC

1. 편집자 준비.

AdobeAnimate CC에서 새 프로젝트를 만들려면 "HTML5 Canvas" 프로젝트를 선택하세요.

이 템플릿의 코드는 편집기에서 광고 소재를 만들 때 기초로 사용할 수 있습니다.

프로젝트에 템플릿을 적용하려면 게시 설정에서 "고급 게시 설정 -> 새로 가져오기...".

템플릿에 스크립트가 포함되어 있습니다. adfox_HTML5.js

3. 클릭 처리

광고 소재에 순환 애니메이션이 포함된 경우 해당 섹션의 버튼에만 코드를 사용하세요.

3.1 전체 배너 영역을 클릭 가능하게 만들고 하나의 링크로 이동하려면 애니메이션의 첫 번째 프레임에 다음 코드를 추가하세요.

Canvas.style.cursor = "포인터"; canvas.addEventListener("click", function() ( window.callClick(); ));

3.2 다양한 링크로 이동하기 위한 여러 버튼을 추가하려면 상단 애니메이션 레이어의 배너를 클릭하기 위한 기본 버튼을 추가하고 버튼에 인스턴스 이름을 할당한 후 버튼에 코드를 작성합니다.

This.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )) ;

클릭하면 사용자를 광고 사이트의 다른 페이지로 이동시키는 다른 버튼을 추가하십시오.
애니메이션의 특정 부분 위의 최상위 레이어에 몇 가지 버튼을 배치하고 버튼에 인스턴스 이름을 지정한 다음 각 버튼에 대한 코드를 작성합니다.

This.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

어디 N

3.3

This.btnText.addEventListener("mouseover", function() ( window.callEvent(n); ));

어디 마우스오버 - 자바스크립트 이벤트, N- 트리거되어야 하는 이벤트 번호는 1부터 30까지입니다.

루핑 애니메이션 제작의 특징

Animate CC 편집기에서 광고 소재에 반복 애니메이션을 구현하려면 다음 단계를 따르세요.
- 게시 설정에서 "루프 타임라인" 옵션을 설정하세요.
- 이 섹션의 버튼 코드를 사용하고 3.1 및 3.2 단락의 일반 버튼 코드를 제거해야 합니다.

하나의 버튼과 반복되는 애니메이션이 있는 광고 소재 코드:

버튼이 여러 개인 경우 ADFOX 이벤트 호출 코드에 다음 코드를 추가합니다.

If (typeof(this.stopCycle) == "정의되지 않음") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ; )); this.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); )); this.stopCycle = true; )

어디 N- 트리거되어야 하는 이벤트 번호는 1부터 30까지입니다.

투명 버튼 사용

예를 들어 전체 배너 영역을 클릭 가능하게 하거나 일부만 클릭 가능하게 해야 하는 경우 투명 버튼을 사용할 수 있습니다. 일반 버튼과 마찬가지로 전환이나 이벤트를 호출하기 위한 코드를 추가해야 합니다.

Animate의 버튼은 4개의 프레임을 포함하는 기호입니다. 처음 세 개는 비워두고 삽입 > 타임라인 > 키프레임을 통해 콘텐츠(그래픽 요소)를 추가하여 마지막 "히트"만 채울 수 있습니다.

Hit 프레임의 내용은 보이지 않지만 클릭에 반응하는 버튼의 영역을 정의합니다. 삽입 > 타임라인 > 키프레임을 통해 이 프레임에 콘텐츠(그래픽 요소)를 추가할 수 있습니다. 나머지 프레임이 비어 있거나 보이지 않는 경우에는 작업 공간투명한 파란색으로 나타나며 다음 히트 프레임에 포함된 콘텐츠와 같은 모양입니다. 프로젝트를 게시하면 투명한 파란색 영역이 표시되지 않습니다.

스트레칭 (고무) 배너 구현의 특징

배너가 사이트에 배치될 컨테이너의 너비에 걸쳐 늘어나도록 하려면 다음과 같이 설정하십시오. 파일 > 게시 설정.
탭에서 기초적인, 선택하다 반응형으로 만들기 > 너비, 높이 또는 둘 다.
선택하다 보이는 영역을 채우도록 크기 조정전체 화면 모드로 출력을 보려면
"보기에 맞추기"를 선택하면 동일한 가로 세로 비율을 유지하면서 사용 가능한 모든 화면 공간을 채우도록 콘텐츠 크기가 조정됩니다. 따라서 최대 너비에 이미 도달한 경우 화면 높이를 따라 있는 영역은 채워지지 않은 상태로 유지될 수 있으며 그 반대의 경우도 마찬가지입니다.

프로그램 설정을 사용하여 원하는 결과를 얻을 수 없는 경우 스크립트를 사용하십시오.
다음은 코드의 예입니다.
종횡비 스케일링을 위한 코드를 다운로드하세요.
종횡비 없이 크기 조정을 위한 코드를 다운로드하세요.
위치 지정 요소에 대한 코드를 다운로드합니다. an0..an4요소의 인스턴스 이름입니다.

자동 깜박임으로 배너를 만드는 기능

확장된 상태에서 배너를 표시하려면 인터페이스에 배너를 추가할 때 "항상 자동 확장" 또는 "초기화 시 확장" 매개변수에 "예" 값을 지정하고 HTML 광고 소재:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = 거짓; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window.global_exp_banner. visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; ) window.global_main_banner.btnExpand.addEventListener("클릭",expandBanner.bind(this ))); window.global_exp_banner.btnCollapse.addEventListener("click",collapseBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = 사실; )

5. 프로젝트 출판.

중요한! 브라우저에서 프로젝트를 미리 볼 때 (Ctrl-Enter | Cmd-Enter)양식의 임의 값이 HTML의 파일 이름 링크에 추가됩니다. ?1468231208369 . 이러한 값은 ADFOX에 로드할 때 프로젝트에서 제외되어야 합니다.
이렇게 하려면 편집기의 최종 프로젝트를 다음을 통해 게시해야 합니다. 파일 > 게시 설정 > 게시(Shift-Ctrl-F12 | Shift-Cmd-F12).

프로젝트를 게시할 때 템플릿을 선택하세요. AdobeAnimate_Adfox_.html.

.지퍼

Google 웹 디자이너

이 배너의 코드는 편집기에서 광고 소재를 만들 때 기초로 사용할 수 있습니다.

템플릿에 스크립트가 포함되어 있습니다. adfox_HTML5.js전환 및 이벤트 계산의 올바른 작동을 위한 매개변수 세트:
%reference%, %user1%, %eventN%, 여기서 N은 1부터 30까지의 이벤트 번호입니다.

2. 처리를 클릭하세요.

모든 이벤트는 이벤트 탭을 통해 특정 애니메이션 요소에 할당됩니다.

대화형 영역 구성 요소는 작업을 호출하는 데 사용됩니다.
추가하고 이벤트를 선택하세요. "상호작용 영역" - "터치/클릭"(또는 영어 버전에서는 "탭 영역 > 터치/클릭").

"사용자 정의 코드" 탭에서 클릭 기능에 대한 호출을 지정합니다.

2.1

콜클릭();

2.2

콜클릭(n);

어디 N

2.3 전환 없이 애니메이션에서 이벤트를 트리거해야 하는 경우 다음 코드를 사용하세요.

CallEvent(n);

어디 N- 호출되어야 하는 이벤트의 번호입니다.

배너가 사이트, 패널에 위치할 컨테이너 너비에 걸쳐 늘어나도록 속성위치 및 크기의 경우 픽셀 대신 백분율을 지정하십시오.

옵션도 활용해보세요 "컨테이너에 정렬"그리고 "고무 레이아웃"~에 상단 패널도구.
정렬 도구를 사용하기 전에 유동 레이아웃을 활성화한 다음 상위 컨테이너의 크기를 조정하면 모든 요소가 서로 및 컨테이너의 크기에 맞춰 정렬됩니다.
이 경우 요소의 상대적 크기(%)와 절대 크기(픽셀)를 동시에 사용할 수 있습니다.

4. 프로젝트 출판.

ADFOX에 배너를 추가할 때 관리자는 버튼과 이벤트 번호의 대응을 알아야 합니다. 각 이벤트에 대해 관리자는 탐색할 자체 링크를 작성한 다음 변수를 사용하여 배너 코드에 전달됩니다.

프로젝트를 게시한 후 다음 형식으로 보관합니다. .지퍼. 광고 소재를 ADFOX 배너에 업로드할 준비가 되었습니다.

어도비 엣지 애니메이트 CC

시작하려면 확장명이 있는 파일을 실행하세요. .an아카이브에서.

2. 처리를 클릭하세요.

모든 이벤트는 "코드" 탭을 통해 특정 애니메이션 요소에 할당됩니다.

선택한 요소를 탐색하려면 이벤트를 선택해야 합니다. 딸깍 하는 소리클릭 기능에 대한 호출을 작성합니다.

버튼에는 인스턴스 이름이 할당되어야 합니다(예: btnMain, btnRight).

2.1 하나의 점프 버튼을 사용하는 경우:

콜클릭();

2.2 전환 버튼이 여러 개인 경우:

콜클릭(n);

어디 N- 호출되어야 하는 이벤트의 번호입니다.

2.3 전환 없이 애니메이션에서 이벤트를 트리거해야 하는 경우 다음 코드를 사용하세요.

CallEvent(n);

어디 N- 호출되어야 하는 이벤트의 번호입니다.

스트레칭 (고무) 배너 구현의 특징.

배너가 사이트에 배치될 컨테이너의 너비에 걸쳐 늘어나도록 하려면 속성 패널의 편집기에서 배너를 준비할 때 위치와 크기에 대해 픽셀 대신 백분율을 지정해야 합니다.

위치 및 크기 패널에는 요소에 대한 크기 조정 및 위치 조정 버튼도 있습니다.

4. 프로젝트 출판.

프로젝트는 다음 설정으로 게시되어야 합니다.

프로젝트를 게시한 후 다음 형식으로 보관합니다. .지퍼. 광고 소재를 ADFOX 배너에 업로드할 준비가 되었습니다.

끊임없이 발전하고, 무언가를 배우고, 끊임없이 새로운 것을 배우고 싶은 사람들을 위해 우리는 특별히 이 카테고리를 만들었습니다. 여기에는 귀하가 확실히 즐길 수 있는 교육적이고 유용한 콘텐츠만 포함되어 있습니다. 많은 수의 비디오는 아마도 우리가 학교, 대학에서 제공하는 교육과 맞먹을 수 있습니다. 교육 비디오의 가장 큰 장점은 가장 관련성이 높은 최신 정보를 제공하려고 노력한다는 것입니다. 기술 시대에 우리 주변의 세계는 끊임없이 변화하고 있으며 인쇄된 교육 출판물에는 최신 정보를 제공할 시간이 없습니다.

비디오 중에서 미취학 아동을 위한 교육 비디오도 찾을 수 있습니다. 그곳에서 귀하의 자녀는 문자, 숫자, 세기, 읽기 등을 배우게 됩니다. 동의하세요. 만화에 대한 아주 좋은 대안입니다. 초등학생을 위한 교육도 찾을 수 있습니다. 영어, 학교 과목 공부에 도움이됩니다. 고학년 학생들을 위해 시험이나 시험을 준비하는 데 도움이 되거나 단순히 특정 주제에 대한 지식을 심화시키는 데 도움이 되는 교육 비디오가 제작되었습니다. 습득한 지식은 정신적 잠재력에 질적인 영향을 미칠 수 있을 뿐만 아니라 우수한 성적을 받아 여러분을 기쁘게 할 수 있습니다.

이미 학교를 졸업했거나 대학에서 공부 중이거나 공부하지 않는 젊은이들을 위한 흥미로운 교육 동영상이 많이 있습니다. 그들은 그들이 공부하고 있는 직업에 대한 지식을 심화시키는 데 도움을 줄 수 있습니다. 아니면 프로그래머, 웹 디자이너, SEO 옵티마이저 등과 같은 직업을 가지세요. 이 직업은 아직 대학에서 가르치지 않으므로 가장 유용한 비디오를 수집하여 도움을 드리고자 하는 자기 교육을 통해서만 이 고급 관련 분야의 전문가가 될 수 있습니다.

성인의 경우 이 주제도 관련이 있습니다. 왜냐하면 수년 동안 직업에서 일한 후 이것이 당신의 것이 아니라는 것을 이해하게 되고 자신에게 더 적합하고 동시에 수익성이 있는 것을 배우고 싶어하는 경우가 많기 때문입니다. 또한 이 범주의 사람들 중에는 자기 개선 유형, 시간과 돈 절약, 삶의 최적화 등 훨씬 더 좋고 행복한 삶을 살 수 있는 방법을 찾는 동영상이 종종 있습니다. 성인이라도 자신의 사업을 만들고 개발하는 주제는 매우 적합합니다.

또한 교육용 비디오 중에는 거의 모든 연령층에 적합한 일반적인 초점의 비디오가 있으며, 이 비디오에서 생명이 어떻게 시작되었는지, 어떤 진화 이론이 존재하는지, 역사의 사실 등에 대해 배울 수 있습니다. 그들은 사람의 시야를 완벽하게 넓혀 그를 훨씬 더 박식하고 유쾌한 지적 대담자로 만듭니다. 이러한 교육용 비디오는 아는 것이 힘이기 때문에 예외 없이 모두가 시청하는 데 참으로 유용합니다. 즐겁고 유익한 시청을 기원합니다!

요즘에는 "파도 위에서"라고 불리는 것이 필요합니다. 이는 뉴스뿐만 아니라 자신의 마음의 발전도 의미합니다. 발전하고, 세계를 탐험하고, 사회에서 수요를 얻고, 흥미를 느끼고 싶다면 이 섹션이 바로 여러분을 위한 것입니다.

저는 7년 넘게 미국, 캐나다, 호주, 독일 및 기타 국가의 외국 고객과 원격으로 작업해 왔습니다. 게임용 그래픽 리소스와 애니메이션을 그립니다. 어도비 애니메이트 CC. 이전에 편집자가 호출되었습니다. 어도비 플래시 프로페셔널 CC.

이전 블로그에서 비슷한 일련의 수업을 시작했지만 거기서 계속하는 대신 새로운 경험을 공유하기 위해 모든 것을 다시 작성하기로 결정했습니다.

Adobe Flash에서 그리기에 대한 또 다른 일련의 강의가 필요한 이유는 무엇입니까? 나는 수년 동안 이 일을 해왔고 내 경험이 초보자에게 유용할 수 있다고 믿습니다. 특히 이전에 그래픽 태블릿으로 그림을 그려본 적이 없는 사람들에게는 더욱 그렇습니다. 종이에 그림을 그리는 것은 잘하지만 컴퓨터로 그림을 그려본 적이 없다면 꼭 말씀드릴 것이 있습니다.

그리고 종이에 그림을 그리는 방법을 모르는 분들을 위해 다음과 같은 내용을 참조하지 않고 일반적으로 이 기술을 개발할 수 있는 방법을 설명하려고 노력할 것입니다. 그래픽 편집기: 관점과 구성 구축, 색상 선택, 음영 및 기타 주제.

그래픽 태블릿 선택

그림을 그릴 수 있는지 여부는 중요하지 않습니다. 장치와 프로그램과 같은 도구가 필요합니다. 하드웨어부터 시작해 보겠습니다. 이미 컴퓨터가 있지만 그래픽 태블릿을 컴퓨터에 연결해야 합니다. 그러면 컴퓨터에 존재하는 가상 캔버스에 그림을 그릴 수 있습니다. 랜덤 액세스 메모리. 즉, 마우스나 트랙볼과 같은 또 다른 정보 입력 장치입니다. 하지만 태블릿에는 마치 종이에 그림을 그리듯 그릴 수 있다는 장점이 있습니다. 이는 압력 감지 기능과 펜 모양의 포인팅 장치입니다.

그래픽 태블릿 제조업체는 Wacom, Genius, Huion 등 다양합니다. 나는 처음 두 개만 만났습니다. 저는 처음 시작할 때 이미 Wacom 태블릿 4개와 Genius 태블릿 1개를 사용해 보았습니다. 저는 Wacom을 적극 추천합니다. 고품질합리적인 가격으로.

돈이 없다면 Genius를 사지 말고 가장 저렴한 소형 중고 Wacom Bamboo Pen을 구입하세요. 저는 거의 같은 제품인 Wacom Bamboo Pen&Touch S CTH-460을 사용했습니다. 7년 동안 사용하면서 심각한 문제는 없었으며, 처음부터 좋은 장치였습니다. 더 많은 돈을 절약할 수 있다면 더 큰 모델을 선택하세요. 저는 Wacom Bamboo Fun Pen&Touch M CTH-670을 사용하고 있습니다.

Wacom 모델 이름에 있는 숫자와 문자는 무엇을 의미합니까?

회사의 모델 파크를 더 쉽게 탐색할 수 있도록 이름에 있는 일부 숫자와 문자의 의미를 설명하겠습니다.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

중- 작업 영역의 크기. S - 소형(소형), M - 중형(중형), L - 대형(대형)이 있습니다.
CTH- 수단 라인업. CTL과 CTH가 있습니다 - 아마추어 모델 입문 단계옵션 버튼 및 터치패드 포함, PTH - 전문 모델, DTH 및 DTK - 디스플레이가 내장된 전문 모델
6 - 작업 영역의 크기(인치). 4 - 소형(소형), 6 - 중형(중형), 8 - 대형(대형), 13개 이상이 있지만 이는 디스플레이가 내장된 태블릿에만 적용됩니다. 때로는 온라인 상점과 광고에 문자 색인이 표시되지 않는 경우 디지털 색인을 사용하여 장치의 크기를 이해할 수 있습니다.
70 - 세대 및 모델. 이 숫자가 클수록 최신 장치. 비교를 위해 내 오래된 태블릿인덱스 CTH-460이 있고 최신 아날로그는 CTH-490입니다. 세대는 10:460,470 등으로 다릅니다.

그래픽 태블릿 크기

그림을 그릴 때 작업 공간의 활성 영역은 매우 작습니다. 즉, 스타일러스는 작은 원의 반경 내에서 지속적으로 미끄러집니다. 이 원은 조금 움직일 수 있습니다. 시간이 지남에 따라 얼룩이 형성되며, 이는 미세 스크래치가 촘촘하게 축적된 것처럼 보입니다. 실제로 장치 주변을 사용하지 않고 모든 것이 중앙에서 발생한다는 것을 보여줍니다.

전체 작업 영역을 절대 사용하지 않고 활동 지점의 크기가 작은 모델과 같기 때문에 대형 그래픽 태블릿이 필요하지 않다고 생각할 수도 있습니다. 그러나 그것은 사실이 아닙니다.

태블릿에서 작업할 때 작업 영역은 모니터의 전체 너비에 걸쳐 투사됩니다. 따라서 타블렛이 클수록 스트로크를 더 정확하게 적용할 수 있습니다. 그리고 반대로 모니터가 클수록, 태블릿이 작을수록 그리기가 더 어렵고 불편해집니다. 경험상 29인치 울트라와이드 모니터로 작업할 때 S 사이즈에서 M 사이즈로 바꾸고 나니 작업이 25~30% 더 편해진 것 같아요. 복잡한 윤곽을 그리는 데 노력이 덜 들고 전반적인 경험이 더 매끄럽고 즐겁다는 것을 알았습니다.

더 큰 그래픽 태블릿은 훨씬 더 편안한 작업 환경을 제공해야 하지만 L 모델 작업을 해본 적이 없기 때문에 추측만 할 수 있습니다.

아마추어와 전문가용 Wacom 태블릿의 차이점

프로 모델을 구입하면 저렴한 모델의 1024 레벨에 비해 2048 레벨의 압력 감도, 아름다운 디자인, 버튼 형태의 추가 컨트롤 및 터치 링을 갖춘 고품질 플라스틱으로 제작된 무선 장치를 얻을 수 있습니다. 단종된 뱀부 시리즈의 더 젊고 오래된 모델들에 완전 만족합니다. 아마추어 버전과 프로 버전의 비용 차이는 2배 이상입니다. 테이블은 모든 것을 정리합니다.

Wacom Bamboo Pen & Touch M CTH-670 설정

장치를 연결하기 전에 Wacom 공식 웹사이트에서 드라이버를 다운로드하십시오.

모델 목록	드라이버 링크
인튜어스 CTL-4100/6100/4100WL/6100WL 인튜어스 프로 PTH-451/651/660/851/860 CTL-471/671/472/672 1개 인튜어스 CTL-480/490/680/690 인튜어스 CTH-480/490/680/690 인튜어스 5 PTK-450/650 PTH-450/650/850 인튜어스 4 PTK-440/640/840/1240/540WL	윈도우 맥 OS
뱀부 펜&터치 CTH-460/470/471/660/661/670 대나무 펜 CTL-460/471	윈도우 맥 OS

태블릿을 연결하고 드라이버를 설치한 후 애플리케이션을 실행합니다. 와콤 환경설정를 통해 찾을 수 있습니다. 윈도우 검색(Win + S) 또는 제어판에서.

회사 태블릿의 기본 설정은 다르지 않으며 아마추어 모델과 전문 모델 모두 비슷한 방식으로 구성됩니다.

탭에서 태블릿오른손과 왼손에 맞게 태블릿을 구성하고 키에 동작을 할당할 수 있습니다. 먼저 다음 위치에 설치하세요. 장애가 있는, 시간이 지나면 단축키를 할당하는 것이 가능해집니다.

다음 탭에서 펜중요한 매개변수가 발견되었습니다:

팁 느낌- 압력 민감도. 중앙에 남겨두세요. 그 과정에서 자신이 어떤 경도를 좋아하는지 이해하고 취향에 맞게 조절하게 됩니다.
추적— 스타일러스 위치 추적 모드. 설치하다 펜 모드— 태블릿의 작업 영역이 전체 화면을 채울 정도로 늘어납니다. 방법 생쥐마우스 대체품으로 사용됩니다.
나머지 설정은 그다지 중요하지 않습니다. 펜 버튼스타일러스 버튼에 작업을 할당할 수 있습니다. 지우개 느낌— 스타일러스 뒷면에 있는 고무 밴드의 감도. 단축키를 사용하여 전환하는 것이 더 빠르기 때문에 이 기능을 사용하지 않습니다.

섹션의 동일한 탭에서 추적버튼을 누르세요 매핑 중...태블릿의 작업 영역을 모니터 화면에 투사하도록 구성합니다. 창이 열립니다 펜 모드 세부정보.

장에서 화면 영역선택하다 감시 장치, 여러 개의 모니터가 있고 기본 모니터를 표시하는 경우. 모니터가 1개라면 그냥 놔두세요 모든 화면

장에서 스케일링옆에 있는 확인란을 선택하세요. 힘 비율화면에 투사할 때 작업 영역이 늘어나지 않도록 합니다. 이 경우 태블릿 작업 영역의 일부는 사용되지 않지만 1:1의 정상적인 비율을 갖게 됩니다. 그리고 원을 그리면 화면에 길쭉한 타원이 아닌 원으로 나타납니다.

옆에 있는 체크박스를 꼭 확인해주세요 Windows 잉크 사용압력 감도가 작동하도록 합니다.

다음 탭에서 터치 옵션반대쪽 상자의 선택을 취소하세요. 터치 입력 활성화태블릿을 일반 모드로 전환하려면

나머지 탭에서는 터치 모드 제스처나 전용 드롭다운 메뉴를 사용하지 않기 때문에 모든 항목이 비활성화되어 있습니다. 이것으로 그래픽 태블릿 설정이 완료되었습니다.

애니메이트 CC 또는 Flash Professional CC?

Adobe Animate CC는 Adobe Flash Professional CC의 브랜드 변경으로, 프로그램에 몇 가지 혁신 사항이 추가되었습니다. 옛 이름에도 불구하고 아티스트, 애니메이터, 인디 게임 개발자들 사이에서 엄청난 인기를 얻었습니다. 벡터 디자인 원리를 사용하면 모든 해상도에 맞는 스프라이트를 만들 수 있습니다. 얻을 수 있는 모든 버전은 그림을 그리는 데 사용할 수 있습니다. 그리기 도구는 약간의 개선만 제외하고 수년 동안 동일하게 유지되었습니다. Adobe Animate CC를 사용하겠지만 작성된 모든 내용은 이전 버전의 Adobe Flash Professional에도 적용됩니다. 그건 그렇고, 최근에 Adobe는 값비싼 일회성 라이선스 대신 자사 제품에 액세스하기 위해 월간 구독 모델로 전환했습니다. 이제 가격은 Adobe를 사용하여애니메이트 CC는 월 20달러입니다.

Adobe Animate CC 첫 출시

다운로드 후 새 파일을 생성하고 유형을 선택하십시오. 액션스크립트 3.0. 동일한 창에서 장면 매개변수를 지정할 수 있습니다.

너비그리고 키— 장면의 너비와 높이(픽셀 단위). 최신 모니터나 스마트폰의 해상도처럼 1920 x 1024로 설정하겠습니다.
눈금자 단위— 측정 단위, 픽셀 설정;
프레임 속도— 초당 프레임 수는 24입니다.
배경색— 배경색은 회색으로 설정됩니다.

이러한 설정은 문서가 생성된 후에 변경할 수 있습니다. 이렇게 하려면 도구를 선택해야 합니다. 선택 도구 (단축키 V) 창문을 열어라 속성섹션을 확장하고 속성. 이 창을 찾을 수 없다면 메뉴를 이용하세요 창문 → 속성또는 조합 Ctrl 키+ F3.

단축키 설정

작업 효율을 높이려면 단축키를 최대한 활용해야 합니다. 초기 단계에서는 새로운 키 조합에 익숙해지고 기억해야 하지만 앞으로는 효율성이 확고하게 향상됩니다. 대부분의 단축키를 키보드 오른쪽에 위치하도록 재정의했습니다. 왜 오른쪽에 있나요? 사실 나는 왼손잡이이므로 나에게 더 편리합니다. 당신이 오른 손잡이라면 당신 자신의 계획을 세워야 할 것입니다. 게다가 노트북 키보드 폼팩터로 제작된 라푸 E9050과 애플 무선 키보드도 사용하고 있으니 풀사이즈 키보드를 사용한다면 또 열심히 노력해서 나만의 구성표를 만들어보세요. 많은 시간이 절약되었습니다. 예를 들어 내 계획을 고려해보세요.

아이디어 얻기: 키보드의 편리한 쪽에 기본 명령을 그룹화하여 제공 빠른 액세스손의 위치를 끊임없이 바꾸지 않고. 대부분의 경우 한 곳에 있어야 하며 손가락만 버튼을 누르면서 작은 반경 내에서 "걷습니다". 물론 포지션 변화를 요구하는 팀도 있겠지만 압도적인 소수다. 내 다이어그램은 다음과 같습니다.

팀	설명	오래된 조합	새로운 조합
모두 선택	모두 선택	Ctrl+A	Ctrl + A, O
모두 선택 취소	선택 항목 제거	Ctrl + Shift + A	Ctrl + Shift + A, P
실행 취소	작업 취소	Ctrl+Z	Ctrl + Z, [, Z
다시 하다	동작 반복	Ctrl+Y	Ctrl + Y, ]
줌	스케일링	Shift + Z, Z	Shift + Z, \
확대	이미지 확대	Ctrl + =, Ctrl + 숫자 =	Ctrl + =, Ctrl + 숫자 =, =
축소	축소	Ctrl + =, Ctrl + 숫자 =	Ctrl + -, Ctrl + Num -, -
바르게 되다	선택한 곡선을 직선화		9
매끄러운	선택한 곡선을 부드럽게 합니다.		0
수평 뒤집기	수평으로 뒤집기		에프
수직 뒤집기	수직 뒤집기		쉬프트 + F
자르다	클립보드로 잘라내기	Ctrl+X	Ctrl + X, X
중복 기호...	클론 기호		Ctrl+D
스왑 기호...	기호 변경		Ctrl + ]

대부분의 경우 새로운 조합은 이전 조합을 대체하는 것이 아니라 보완하며 몇 가지 새로운 명령이 도입됩니다. 메뉴를 통해 구성해야 합니다. 편집하다 → 키보드 단축키.... 검색 필드에 팀 이름을 입력하세요. 지름길원하는 명령 반대편의 빈 공간을 클릭하고 새 키 조합을 누르십시오.

표에 제공된 명령을 이해하려고 하지 마십시오. 다음 단원에서 모두 설명됩니다. 앞으로 적극적으로 사용하기 시작하면 가장 편리한 옵션을 찾을 때까지 여러 번 재정의하게 될 것입니다.

브러시 설정

브러쉬 도구(단축키 B) - 그림을 그릴 때 가장 많이 사용되는 브러시 도구입니다. 설정은 두 개의 창에 집중되어 있습니다.

브러시 설정이 완료되었으니 칠해 보겠습니다.

브러시로 그리기

색상 창(Ctrl + Shift + F9)을 사용하여 적합한 색상을 선택하고 브러시 도구(B)를 선택한 다음 약간의 힘을 가해 긴 스트로크 하나로 시작하여 향후 모양의 윤곽을 그립니다. 그런 다음 결과 윤곽선을 추적하여 모든 불균일성을 부드럽게 만듭니다. 브러시가 준비되었습니다.

위의 예에서는 3개의 스트로크만 사용되었습니다. 손이 태블릿에서 떨어지지 않도록 중간 길이의 스트로크를 만드는 것을 목표로 해야 합니다. 작은 획을 잘못 여러 개 만들어 보십시오. 결과 윤곽이 매끄럽지 않고 큰 금액추가 포인트.

Adobe Animate CC는 벡터 원칙에 따라 작동합니다. 모든 객체는 수학적으로 설명되며 래스터 접근 방식과 달리 품질 저하 없이 크기를 조정할 수 있습니다. 이를 통해 래스터 편집기에서는 결코 쉽게 수행할 수 없는 방식으로 벡터 개체를 조작할 수 있습니다. 품질 저하 없이 윤곽을 매끄럽고 단순화하고, 곡선을 직선화하고, 비율을 변경하고, 그래픽 개체를 변형할 수 있습니다. 각 스트로크는 미세 조정 및 수정할 수 있는 수학적 곡선으로 자동 변환됩니다.

위의 사항을 모두 확인하려면 도구를 활성화하세요. 하위 선택 도구(단축키 A) 방금 그린 브러시를 선택합니다. 이제 벡터 경로의 지점을 확인하고 변경할 수도 있습니다.

결론

오늘 Adobe Animate CC를 설정하고 그리기를 시작할 준비가 되었습니다. 계속하기 전에 조금 연습해 보세요. 왜곡 없이 단순한 기하학적 모양을 그리는 방법을 배우고, 다양한 색상과 브러시 설정을 시도해 보십시오(매끄러움 매개변수 실험).

유사한 재료