Navigation Menu+

WEEK6

WEEK6

웹 콘텐츠의 제작 실습4 – 프레임의 이해

수업전 공지사항

*  학생들 스마트폰과 강의자의 시간이 같지  않음으로 인하여 강의실의 시계가 있을경우, 그  시계의 시간에 맞추어 수업출석 체크를 하겠습니다. (수정사항)

* 스마트출석의 앱 설치등의 번거로움이나, 스마트폰이 없거나 분실시의 경우로인한 출결체크의 어려움을 예상하여 학생들의 출결사항으로 프린트된 출석부의 호명방식을 쓰겠습니다.

* 이어폰이나 헤드셋을 준비(필수사항 아님): 이어폰이 없는 경우 사운드파일을의  Animate CC 로의 import 여부를 화면상의 시각화를 통해 확인할 수 있습니다.

 

*동영상 및 Animate CC에서의 프레임을 이용한 동영상 작업 고찰 및 피드백

학생들의 요청에 의해 관련된 수업 동영상을 올려드립니다.  시간이 되실때 보시고 참조바랍니다. (영어버젼)

Motion tween : Anmimate CC(AKA FLASH) 버젼

 

Motion Tween ( 구버젼)

모양 트위닝 (Shapetween) 기법에서의 Break Apart의 전후에 따른 결과에 의한 차이 실행 소스파일(.fla), 실행(.swf)파일 

일러스트에서 불러온 파일에 먼저1) Break Apart한 후2)key Frame을 넣으면 텍스트가 뭉개진다.

소스파일 참조(week5_shapetween_BA_K(order)_image.fla)

week5_shapetween_Keyframe_BA_text.fla

일러스트에서 불러온 파일에 먼저1)key Frame을 넣은후2)Break Apart를 넣으면 텍스트가 깨지지 않고 움직임을 표현할수 있다.

소스파일 참조(week5_shapetween_Keyframe_BA_text.fla)

모양 트위닝 애니메이션을위한 키 프레임 만들기 및 편집

모양 트위닝에서는 타임 라인의 특정 프레임에 벡터 모양을 그립니다 . 그리고 그 모양을 변경하거나 다른 특정 프레임에서 다른 모양을 그립니다. 애니메이션은 중간에있는 프레임의 중간 모양을 중간에 삽입하여 다른 모양으로 모핑하는 애니메이션을 만듭니다.

애니메이션을 사용하면 균일 한 솔리드 스트로크와 비 균일 한 화려한 스트로크에 모양 트윈을 추가 할 수 있습니다. 가변 폭 도구를 사용하여 향상된 선에 모양 트윈을 추가 할 수도 있습니다. 결과를 결정할 때 사용하려는 도형을 실험 해보십시오. 모양 힌트를 사용하여 시작 모양의 점이 끝 모양의 특정 점과 일치하는지 Animate에 알릴 수 있습니다.

모양 트윈 내에서 모양의 위치와 색상을 트위닝 할 수도 있습니다.

그룹, 인스턴스 또는 비트 맵 이미지에 모양 트위닝을 적용하려면 이러한 요소를 분리하십시오. 텍스트에 모양 트위닝을 적용하려면 텍스트를 두 번 분리하여 텍스트를 개체로 변환합니다. 심볼 인스턴스 분리를 참조하십시오 .

모양 트윈 만들기
다음 단계에서는 타임 라인의 프레임 1에서 프레임 30까지 모양 트윈을 만드는 방법을 보여줍니다. 그러나 선택한 타임 라인의 모든 부분에 트윈을 만들 수 있습니다.

프레임 1에서 사각형 도구로 사각형을 그립니다.
동일한 레이어의 프레임 30을 선택하고 삽입> 타임 라인> 빈 키 프레임을 선택 하거나 F7을 눌러 빈 키 프레임을 추가 하십시오 .

스테이지에서 프레임 30에 타원형 도구로 원을 그립니다.

이제 프레임 1에 사각형이있는 키 프레임과 프레임 30에 키 프레임이 있으며 원이 그려져 있습니다.

에서 타임 라인 은 두 개의 형태를 함유하는 층의 두 키 프레임 사이의 프레임들 중 하나를 선택한다.

삽입> 모양 트윈을 선택 하십시오 .

애니메이션은 두 개의 키 프레임 사이의 모든 프레임에서 모양을 보간합니다.

트윈을 미리 보려면 타임 라인 의 프레임에서 재생 헤드를 스크럽 하거나 Enter 키를 누릅니다.

모양 외에도 동작을 트위닝하려면 프레임 30의 모양을 프레임 1과 다른 위치로 이동하십시오.

Enter 키 를 눌러 애니메이션을 미리 봅니다 .

도형의 색상을 트위 킹하려면 프레임 1의 모양을 프레임 30의 모양과 다른 색상으로 만듭니다.

https://helpx.adobe.com/animate/using/shape-tweening.html

 

 

How To Mask In Adobe Animate CC – Video Day 133

https://www.youtube.com/watch?v=CoSG_SSbXYE
How to mask in Animate CC|Text and Gradient Effect
Trace bitmaps

Animate CC(AKA FLASH) how to trace bitmaps to create symbols (동영상 자료 참조)

포토샵에서 사진 이미지를 .PNG화일로 가져온후 포토샵에 가져온 후 Animate CC 에서 사진이미지를 trace bitmaps 하여 애니메이팅 한다.  동영상 파일을 참조하되 대상파일을 modify->convert to symbol 하여 movie clip으로 제작

학생예제 _fla파일 (usb) _ 조

________________________________________________________________________________

Bitmap tracing : 사진이미지를 그림처럼 바꾸기

Modify => bitmap => trace bitmap

 

클래식 트윈 (Animate CC Example Classic Tween )

클래식 트윈은 Animate에서 애니메이션을 만드는 더 오래된 방법입니다. 이 트윈은 새로운 모션 트윈 과 유사 하지만 제작하기가 더 복잡하고 유연성이 떨어집니다. 그러나 클래식 트윈은 모션 트윈이 지원하지 않는 애니메이션에 대한 몇 가지 유형의 컨트롤을 제공한다

클래식 트윈 애니메이션을위한 키 프레임 만들기 및 편집
클래식 트윈 애니메이션의 변경 사항은 키 프레임에 정의됩니다. . 트위닝 된 애니메이션에서는 애니메이션의 중요한 지점에 키 프레임을 정의하고 Animate는 프레임 사이의 프레임 내용을 만듭니다. 트위닝 된 애니메이션의 보간 된 프레임은 밝은 파란색으로 나타나고 키 프레임 사이에 화살표가 그려집니다. 애니메이션 문서는 각 키프 레임의 모양을 저장하기 때문에 무언가가 변경되는 아트웍의 포인트에서만 키 프레임을 만듭니다.

키 프레임은 타임 라인에 표시됩니다. 실선은 내용이있는 키 프레임을 나타내고, 빈 원은 프레임 이전의 빈 키 프레임을 나타냅니다. 같은 레이어에 추가 된 후속 프레임은 키 프레임과 동일한 내용을 갖습니다.

클래식 트윈에서는 키 프레임 만 편집 할 수 있습니다. 트위닝 된 프레임을 볼 수는 있지만 직접 편집 할 수는 없습니다. 트위닝 된 프레임을 편집하려면 정의하는 키 프레임 중 하나를 변경하거나 시작 키 프레임과 끝 키 프레임 사이에 새 키 프레임을 삽입하십시오. 항목을 라이브러리 패널에서 스테이지로 드래그하여 항목을 현재 키 프레임에 추가합니다.

노트Animate의 대부분의 기능과 마찬가지로 애니메이션에도 ActionScript가 필요하지 않습니다. 그러나 원하는 경우 ActionScript를 사용하여 애니메이션을 만들 수 있습니다.

https://helpx.adobe.com/kr/animate/using/classic-tween-animation.html

모션 트윈 애니메이션을위한 키 프레임 만들기 및 편집

모션 트윈은 Animate 내에서 애니메이션 이동을 만드는 데 사용됩니다. 모션 트윈 애니메이션은 처음과 마지막 프레임 사이에서 객체 속성에 대해 다른 값을 지정하여 만듭니다. 객체 속성은 위치, 크기, 색상, 효과, 필터 및 회전에 따라 달라집니다.

모션 트윈을 만들 때 트윈에서 프레임을 선택하고 해당 프레임에서 모션 심볼을 이동합니다. 클래식 및 모양 트윈과는 달리 Animate는 첫 번째 프레임과 다음 키프레임 사이에서 프레임에 애니메이션을 적용하는 모션 경로를 자동으로 빌드합니다.

각 프레임에서 에셋을 사용하지 않으므로 모션 트윈은 파일 크기를 최소화하고 문서에서 에셋을 줄입니다.

키 프레임 만들기
다음 중 하나를 수행하십시오.
타임 라인에서 프레임을 선택하고 삽입> 타임 라인> 키 프레임을 선택 합니다.

타임 라인에서 프레임을 마우스 오른쪽 버튼으로 클릭 (Windows)하거나 Control 키를 누른 상태에서 클릭 (Macintosh)하고 [키 프레임 삽입]을 선택합니다.

해당 레이어 첫 프레임에서 Create classic tween을 한다: Animate CC Example Classic Tween

 

프레임 또는 키 프레임 삭제 또는 수정
프레임, 키 프레임 또는 프레임 시퀀스를 삭제하려면 해당 프레임 시퀀스를 선택하고 마우스 오른쪽 버튼으로 클릭 (Windows)하거나 Control 키를 누른 상태에서 클릭 (Macintosh)하고 프레임 제거를 선택합니다. 주변 프레임은 변경되지 않습니다.

키 프레임이나 프레임 시퀀스와 내용을 이동하려면 해당 위치를 선택하고 원하는 위치로 드래그하십시오.

키 프레임의 지속 시간을 연장하려면 Alt 키 (Windows) 또는 Option 키 (Macintosh)를 누른 채로 새 시퀀스의 마지막 프레임으로 드래그합니다.

프레임 또는 프레임 시퀀스를 복사하여 붙여 넣으려면 해당 시퀀스를 선택하고 [ 편집]> [타임 라인]> [프레임 복사]를 선택합니다 . 프레임 또는 시퀀스를 선택하고 [ 편집]> [타임 라인]> [프레임 붙여 넣기]를 선택 합니다. 대상 타임 라인에서 복사 된 프레임의 정확한 수를 붙여 넣고 바꾸려면 프레임 붙여 넣기 및 덮어 쓰기 옵션을 사용하십시오 .

키 프레임을 프레임으로 변환하려면 키 프레임을 선택하고 [ 수정]> [타임 라인]> [키 프레임 지우기]를 선택 합니다. 또는 마우스 오른쪽 버튼으로 클릭 (Windows)하거나 Control 키를 누른 상태에서 클릭 (Macintosh)하고 키 프레임 지우기를 선택 합니다 . 지워진 키 프레임과 후속 키 프레임까지의 모든 프레임은 지워진 키 프레임 앞에있는 프레임의 내용으로 바뀝니다.

드래그하여 키 프레임이나 프레임 시퀀스를 복사하려면 해당 키 프레임이나 프레임 시퀀스를 선택하고 Alt 키 (Windows) 또는 Option 키 (Macintosh)를 누른 상태에서 새 위치로 드래그합니다.

트위닝 된 시퀀스의 길이를 변경하려면 시작 또는 끝 키 프레임을 왼쪽이나 오른쪽으로 드래그합니다.

현재 키 프레임에 라이브러리 항목을 추가하려면 라이브러리 패널에서 스테이지로 항목을 드래그합니다.

애니메이션 시퀀스를 되돌리려면 하나 이상의 레이어에서 적절한 프레임을 선택하고 [ 수정]> [타임 라인]> [프레임 반전]을 선택 합니다. 키 프레임은 시퀀스의 시작과 끝 부분에 있어야합니다.

 

______________________________________________

Export to >Video 하여 생성된 .mov화일을youtube.com에 업로드한다.  업도드한 파일의 링크주소를 복사하여 워드프레스 엔진을 써서 제작될 웹상에 올릴 수 있다.

 

동국대학교에 관한 콘텐츠 링크 주소를  ctrl + V한다. @워드프레스

 

______________________

수업내용 정리 !!!! 기말고사 준비시에 참고 바랍니다.

포토샵에서 레이이를 복사하는 핫키
대상을 하이라이트 한 후 Ctrl + J

사진에서 대상물을 자른후에 저장은 .png파일로 저장한다.
바탕화면으로 가는 핫키 : 윈도우 + D(desktop)

Bitmap tracing : 사진이미지를 그림처럼 바꾸기

Modify => bitmap => trace bitmap

바탕색을 선택하는 방법
1. 레이어를 쓰지 않는 경우
Modify =>Document => stage color 에서 칼라 선택

2. 레이어를 쓰는 경우
Timeline탭에서 레이어를 생성하고(타임라인의 왼쪽 아래 페이퍼그림을 클릭) 레이어의 위치를 정해준다 ( Drag – Drop)

작업환경을 animator로 바꾸고 작업하면 타인라인의 탭이 상부로 올라가서 작업이 용이하다
Window-> Workspaces -> Animator

mask의 개념(photoshop)
1)레이어를 만든다 2개 ( 1. ppp 2. mask)
2)레이어에 마스크하고 싶은 모양을 그린다. -> mask 레이어(Ellipse)
3) mask레이어(Ellipse)를 ppp아래에 둔다
4) ppp레이어를 선택한후 마우스 우클릭하면 나오는 하부메뉴에서
create clipping mask를 선택
5) 최종 마스크로 들어가는 대상은 화살표로 만들어지게 된다.

mask애니메이션(Animate CC a.k.a Flash)
1)레이어를 만든다. 레이어의 이름을 mask로 쓰고 원형을 Scene1화면안에 그려 넣는다.
2)레이어를 다시 만든다. 레이어의 이름을 ppp로 쓰고 외부폴더에
있는 ppp.png화일을 Library에 가져온다. (file -> import -> library)
불러온 화일을 Scene1화면안에 Drag & Drop
3)mask레이어를 상위에 놓고 하위에 ppp레이어를 놓는다.
4)프레임이 아닌 !!! 레이어 이름을 쓰는 곳의 mask레이어 에서 마우스 우클릭하여 “mask”를 선택한다.
5)mask를 하면 열쇠 모양이 레이어 두개의 오른쪽에 자동으로 생긴다.
6)ppp의 레이어에서 ppp의 첫번째 프레임에서 Break Apart한후 원하는 위치(30)에서 insert key frame후 / frame1에서 마우스 우클릭 후 shape tween을 선택한다.
7)열쇠모양을 지워서 ppp레이어의 대상의 애니메이팅을 준비한다.
8)mask레이어의 프레임위치1에서 30의 위치에서 마우스를 우클릭하여 insert frame을 선택한다.
9)Ctrl + enter키를 눌러서 .swf화일을 생성한다. file ->export ->video를 설정하여 .mov화일을 생성한다. 생성한 .mov화일을 유튜브에 업로드하여 그 주소를 복사하여.  앞으로 제작 할 워드프레스 엔진의 페이지에 그 주소를 복사하여 붙이기(Ctrl+V)를 실행하면 반응형 웹상이나 스마튼 폰에서 제작한 .mov화일의 컨텐츠를 볼 수 있다.

 

 

 

다음주 준비물

사운드, 이미지 동영상을 이용한 과제 제출 (제출 유뮤만 확인)!!! (Anmate CC를 제출할 경우 .fla .swf화일 모두 제출). petraoh@gmail.com

이어폰 또는 헤드셋

 

다음주 수업

제출된 과제를 토대로 한 피드백 수업 !!!