신씨드

[Day 27_포폴1 완성, 카드 애니메이션]

​

[Day28_포폴2, 바이브 모션]

​

[Audio Spectrum]

[Minimax 효과 적용해서, 소프트니스, Thickness 조절해서 디자인해주기!]

[음파 디자인]

[헤드셋]

• 원하는 벡터 이미지 없을때, 원하는 png이미지 찾고, 일러스트레이터에서 'Image Trace' 해서 딴 다음에(옵션에서 컬러 3컬러등 지정해서 명확하게 트레이스 가능) -> 애펙으로 가져오기전 solid layer 만들고 Ctrl+C, V가능(솔리드 레이어 색상으로 헤드셋 만들어짐!)

​

• 헤드셋 사이즈 조절: 전체 마스크 선택하고 더블클릭해서 shift 누른 상태로 사이즈 조절은 정비례해서 사이즈 조절, ctrl 누른상태로 사이즈 조절은 대칭으로 사이즈 조절
• 헤드셋 색상 변경하고 싶을때는 Fill 효과 적용해서, mask 지정하고 각각 색상조절!

[스타트, 엔드포인트 & 두께 디자인]

[그림자 효과로 입체적인 느낌 주기!]

• 음악 파장 막대 복사 -> fill 효과로 검정색으로 바꿔주기 -> CC Radial Blur 효과 넣어서 그림자 만들어주기!
• 음악 파장 -> Gradient Ramp효과 적용해서 색상 그라데이션 표현! (그라데이션 Start랑 End 램프 위치 조정해줘야 확실하게 그라데이션 표현됨!!!)

[헤드셋 깜빡이게 나타나도록, Opacity 100% 0%반복 애니메이션]

[텍스트 디자인]

[헤드셋 영역 부분 글자 가려지도록]

• 헤드셋 주위로 펜툴로 흰색 모형 그리기

• 레이어들 위치 중요!! 가리는 흰색 마스크 부분이 음파 레이어들 아래, 글씨는 흰색 마스크들 아래로 위치!
• 글자 움직임 애니메이션(Position), Source Text로 글자색 바뀌는 애니메이션 추가!!

​

[부드럽게 글자나오도록 그래프 조정!]

[sc 02]

[애니메이션 추가, Enable per character 3D]

[중심점 조정 - More options - Group Alignment]

[애니메이션, ​Anchor point 추가!_앞뒤로 움직이고 회전을 위한 애니메이션 중심점]

[Rotation 추가, Animator 2 _아무것도 클릭 안되어 있는 상태로 애니메이션 추가해야 추가됨! animator1에 선택되어 있는 상태로 추가하면 그 안에 추가 됨]

​

[Animator2에서 Range selector 삭제하고, Add 버튼 클릭후 Selector - Expression selection추가!! - 텍스트 바운스 애니메이션 추가하고, X Rotation 값 -90으로 기준값 주기!!!](글자 반동주는 익스프레션!!)

Based On 을 words로 바꾸면 단어별로 적용 됨 (모션스크립트 애니메이셔 줄때는 초시계누를 필요X)(기준점이랑 스크립트만 제대로 넣으면 됨!!)

[애니메이터 오퍼시티추가!]

• 애니메이터로 애니메이션 줄때는 다른값에는 절대 초시계 X / Offset으로만 초시계 주고 (기준은 오퍼시티로 0% -> 100%)

​

[텍스트 클릭한 상태에서, 물음표 아래 부분 마스크 그리고, Subtract, 마스크 패스로 움직일때마다 가려주기]

[Mask 옆에 잠깐 'None'으로 해둔 상태에서, 따로 그린 shape layer을 포지션이랑 스케일 애니메이션 그리기!!]

[물음표 아래 모양 쉐이프 레이어 복제해서, CC Radial Blur 효과 적용해서 그림자 주기 _ 3D 선택해야 적용됨!!]

[효과 센터값이랑 오퍼시티값 조정해서 그림자 애니메이션 주기!]

[물음표 원으로 확대 되는 애니메이션]

• Camera만들고 Null 3D로 만든후 페어런츠 연결
• 2 views로 보는 방법 바꾸고 shape layers 2랑 shape layers1 페어런츠로 연결하고 글자의 수치보다 살짝 동그라미가 앞으로 가야하기 때문에 글자 수치 (z축 -41) 대비 원형이 (Z축 -42로)설정 (애니메이션 원형을 물음표 원형에 맞추고)(원형으로 맞출때 쉐이프레이어랑 포지션 모두 클릭 된 상태에서 수치 변화를 줘서 바꿔야함!)
• 널 포지션으로 애니메이션 줘서 점점 원으로 확대되는 애니메이션 만들기!!

​

[선택자 1]

[선택자 2]

[선택자 3]

​

[선택자 4]

[인접관계자 선택, siblings]

[prev(), prevAll(), prevUntil('한정요소선택') / next(), nextAll(), nextUntil('한정요소선택')]

[parent() -> 부모 요소]

• parents() -> 상위요소 모두
• parents('div') -> 상위요소 div로 제한

[근접 선택자, closest]

​

[배열 추가 메소드]

[String]

[String_예제1]

[String_예제2]

[String_예제3]

[Number 객체 메소드]

[씬 05, sc 05 디자인]

• 씬05 컴포지션 만들고, 카드 6개 배치 스케일값 조정해서, 3D모드로 바꾸고 나서 위치값 원본 영상이랑 (카드 사이 거리 체크한뒤에),
• 가운데 Null 만들고 Null z축 0 기준점을 잡고 -50 , -150, -250 / 50, 150, 250 으로 배열! (카드사이 거리 넓히고 싶으면, 카드 스케일조정!)

​

[원근감 만들기 위해 카메라 설치, 널 설치하고 3D만들고, 페어런츠 하기!]

​

[카드 애니메이션 추가]

• 1.카드 여섯개 선택후 포지션값 열고 10프레임 정도 뒤에 초시계 눌러주고, 다시 0프레임으로 가서 카드 전체 위치 위(z축)로 올려주기 (위에서 떨어지는 카드 연출 위해)

• 2.모션 코드 넣고 (freq, decay, w=freq*MathPI*뒤에수치 --> 이렇게 3개 바꿔주기!!)

​

​

[하나하나 떨어지는 카드 만들기]

• 애니메이션 만든 카드 레이어 우측 마우스 클릭, 'copy expression only' 선택후 다른 레이어, alt 누르고 포지션값 눌러서 하나씩 복붙 진행!
• 페어런츠 해놓은 null 6번으로 로테이션값 조절 해서 카드 위치 변경하고, 스케일 값도 조정!!
• 시간차 주기 위해 레이어 위치 조정!!

​

[카드가 끝나는 지점에 모든 카드가 정면에서 모아서 보이도록]

• 카메라 널 (Null 7)의 orientation값 0,0,0으로 (조정한값 키프레임, 0/0/0 키프레임)
• 카드 조절 널 (Null6)의 값 Z값 (조정한값 키프레임, 0키프레임)

​

[2D 디자인]

• 카드를 하나씩 선택해서 복제해주고 위로 올리고, 3D값, 포지션값 끄기!!
• 6개카드가 전체 보이도록 x축 기준으로 배열!
• (등간격으로 나열하기위해서) 위에 카드 레이어 기준점으로 아래 카드 X축 기존수치
• -60씩 빼기 / 그다음 카드 기존수치
• -60*2 / 그다음 카드 기존수치-60*3 (이렇게 6장 카드 모두 진행!)

[일자 배치]

• 위에 2D로 배열 맞춘값 (X랑 Z값을 밑에 카드에 그대로 적용!!)

회전이 끝나는 키프레임 (Null 7)에 맞춰서 밑에 값 그대로 적용!!

[카드 깜빡임 현상 없애기]

- 카드 애니메이션 끝나는 구간에 플레이 헤드 위치시켜놓고 위에 Edit - split layer 한뒤 나뉘어진 레이어들 위로 올리고 적용된 모든 애니메이션 끄기!!

​

[2D 카드로 등간격 조정해서 수치 만들고, 밑에 나눈 카드에 그대로 x,y축 값 적용]

• 2D 등간격 조정할때, 그때만 Null 잠깐 풀어주고 (align 적용하기 위해), 맨 첫번째 카드랑 뒷카드로 간격 조절 한다음에 align버튼 눌러서 카드 나열 하고, 다시 Null 연결
• 밑에 seperate했던 카드에 위에 2D x,y축 값 그대로 적용해주기!

​

[그래프로 애니메이션 속도 조절]

• 카드레이어 전체 선택후 그래프 클릭, 드래그후 한번에 내려서 위에 사진처럼 그래프 모양 만들기!

​

[카메라로 연결된 널로 뒤로 빠지는 애니메이션 만들고, 그래프로 속도 조절하기!]

[카드 넘어갈때 다른 뒷면 보이는 애니메이션]

• 위에 edit - split layer 하고 새로 생긴 레이어 중심점 옮기기
• 위에 edit - split layer 하고 새로 생긴 레이어에 alt 누르고 원하는 사진으로 덮어쓰기!

​

[카메라 옆으로 무빙 후 카드 넘어가는 애니메이션]

• Null7 카메라 무빙 옆으로 움직여서 키프레임 찍기
• 찍은 키프레임에 맞춰서 뒤로 넘어가고 사진 바뀌는 레이어 위치 조정!!

​

[카메라 확대 애니메이션]

[트랜지션 컴포지션 추가]

• 앞면 디자인한 카드 모두 가져오고 -> 맨 앞, 뒤 카드로 위치랑 간격 조정후 -> align으로 등간격, 중앙정렬 배치하기(모든카드선택후)!!

​

[카메라 복제후 확대 컷 하고 뒷부분 잘라주기:alt + [ ]

​

[가위,바위,보 게임]

​

​

[랜덤하게 이미지 바꾸기]

​

[랜덤하게 배경색 변경]

[Array 객체]

코딩

결과

​

[카드 1,3,5장 보이는 애니메이션]

• 카메라 만들어주고, 카메라를 Null에 페어런츠 해주기
• 그래프에서 속도감 주기

​

[X축 값 조정해서, 마드 포지션 애니메이션 주기!]

• 카드들이 밑으로 숨는거기 때문에 Z값 조정도 필요!! (Z축 0, 0.5, 1.0)

숨겨질 카드 X 값에 맞춰서 숨겨지는 애니메이션 주기 (X축 포지션 값으로)

• total 컴포지션에서 sc 03이랑 sc 02 합쳐주기
• 마스크 패스로 애니메이션 주기 (레이어 전체를 마스크 씌우고 Ctrl 누른 상태에서 오른쪽 마스크 영역 지정하면 왼쪽 부분 대칭되서 마스크 영역 지정됨)
• effects - transition - venetian blinds: 블라인드 효과