신씨드

[sc 13_정산방식 애니메이션]

• 정산방식 위에 원형 쉐이프 레이어 그리기(스트로크만 주기)
• 스케일(점점 커지는)과 stroke width(점점 선 얇아지는) 액션주기
• 쉐이프 레이어 그대로 복제하고 필 흰색 채우고, 스트로크 없애고 '정산방식 매트'레이어 위에 배치 '정산방식'레이어에 (정산방식에 alpha매트 주기)(아래 이미지 참고)

• 아무도 하지 않았던 포지션 애니메이션 더 추가 (잠깐 멈춤 표현)

• 그림자효과, 필, 오퍼시티 애니메이션 적용

아무도~ 글자에 'Fill'적용해서 컬러 애니메이션 추가 (검정, 흰색) / 글자 복사 (검정색으로 색 바꾸고) (CC Radial Blur적용해서 그림자 효과, Fading Zoom, Amount 조절해서 그림자 생성)

​

[위 File - Export - Media Encoder - H.264, CBR로 체크후 내보내면 MP4출력 가능]

[sc 14]

글씨 입력후 마우스 우클릭 - create - create shapes from text

글자 하나씩 만들어주기!

애니메이션 주기 전 글자들 위에 레이어들 처럼 세팅~!

새로운 글자 포지션 애니메이션 추가!! (포지션 기준 주고, ramp up해주고, 'offset'초시계 눌러서 애니메이션 주기!!

음(포지션, 투명도) / 원(포지션, ㄴ만 패스 애니메이션) 각각 애니메이션 주기!!

사,용,료 애니메이션 주기 & 속도 그래프 바꿔주기(부드럽게 도착하도록)

글자 디자인완성

• 디자인 완성후 글자 크기 등 변경 사항 있을때, Null 만들어주고, 페어런츠 해주고 Scale 값으로 조정후 Null만 삭제하면 됨!!

글자 모두 3D로 선택, Null, Camera 생성!

• Null도 3D눌러주고 포지션 값애니메이션, 왼쪽으로가고(배경검정부분은 배경 자체 스케일 키우면 됨) Z축으로 '새'에서 확대

​

[객체 조작 및 생성]

[문제4]

[5번]

[5.폼객체 속성]

​

[sc 09 애니메이션]

• 핸드 폰 위치 3등분으로 지정해주고 애니메이션 넣어주기(포지션값)
• 플레이 버튼 애니메이션(포지션, 오퍼시티)

• 동전, 핸드폰 디자인 & 애니메이션

​

[sc 10 애니메이션]

• ctrl + alt + home : 중심점
• 스케일 애니메이션: 100에서 40%로 (1초간격)

[배경 접히는 애니메이션]

• 글자 배경에 페어런츠, 스케일 애니메이션 (100에서, x값만 0으로)

​

[만든사람에게 띄어쓰기 없이 글 쓰고 커서 둔 다음에 자간 넓히는 걸로, 띄어쓰기 연출!]

• 만든사람에게, 애니메이션 add 추가 Tracking - amount 값으로 자간 넓히고
• 글자2,3개 복사 각각 보일 글자 부분 마스크 씌우기
• 포지션 값 애니메이션!(검정 배경 시간 맞춰서!)

• 원본 글자 tracking 애니메이션 90 어마운트 값에서 5프레임 뒤에 0으로 만들기

​

소스텍스트로 회색에서 검정색 글자 색 바뀌는 애니메이션 추가!

[sc 11]

• 내 돈은 글자 작성, 마우스 우클릭, create, shape layers 로 바꾸기!, 복제해서 한글자 단위로 만들기

• 15프레임 단위로 포지션 애니메이션 주고(위에서 아래로 내려오는), 그래프 조정(속도)

[내 디자인 애니메이션]

마우스 패스로 ㅐ 끝부분 위로 올라가도록 애니메이션, 점위에 부분 마우스로 클릭하고 'Shift'누른 상태로 늘리면 쭉 늘어남 (Path 애니메이션 주기!)

[마침표 쉐이프 레이어 그라데이션 디자인 및 포지션 애니메이션]

그래프 디자인

[sc 12]

• 글자 쓰고 복제 후에 각각 마스크 씌우기
• 검정 솔리드 레이어 만들고 오디오 스팩트럼 효과 추가!

선명하게 하기 위해 소프트니스는 꼭 0으로!!

[아티스트 스케일 애니메이션]

아티스트 애니메이션 시간 맞춰서, 내랑 에게 포지션 애니메이션 주기!

​

파장 두개 선택 후 프리컴포즈

프리컴포즈 선택후 위에 마스크 더블 클릭하면 전체 화면 마스크 생성, 글자들만 잡는 마스크 생성후 (subtract)값 주고 애니메이션 주기!!

[sc 13]

source text 애니메이션 (글자 색 채워지는 애니메이션, 색 채울때 옆에 색 바꾸는 화살표 클릭) / 스케일 값 애니메이션 주고 그래프로 조정!!

• Animate, position 추가!

애니메이터에서 포지션이랑 오퍼시티 추가해서 애니메이션 주기 (둘다 shape, ramp down으로)

레이어 자체 포지션 왼쪽으로 움직이는 애니메이션 & 그래프로 속도 조절

아무도 하지 않았던 정산 방식 글자 쓰고, 3개복사, 원본 제외, '아무도하지 않았던' / '정산방식' 이렇게 세팅 & 애니메이터로 오퍼시티 애니메이션 추가, 레이어 자체에 포지션 애니메이션 추가 + 그래프로 속도 조정

​

[제이쿼리, 탐색 선택자]

[2-2. 배열관련 메소드]

​

[sc03]

• 새로운 컴포지션 만들기
• what 글자쓰고 (흰색)
• what 글자 복사 (검정색으로 바꾸고 크기 좀 더 키우고)
• 레이어 위치 위에 이미지 처럼세팅!

[sc04]

• 글자 입력
• 글자 별로 마스크 씌워주고 gradient ramp효과 줘서 색 차이 주기!
• Null 추가하고 3d표시하고, 포지션값 주기 (5프레임에는 그대로 포지션 주고, 맨앞쪽에서 '음' 글자에 확대 되도록 애니메이션!)

​

[sc04, 알파매트, audio 소스]

• 새로운 레이어 추가하고 Audio spectrum 효과 추가
• 'Frequency bands', 'Maximum Height', 'Thickness'로 애니메이션 주기 (위에 이미지 참고! 5프레임에서~ 15프레임)(향후 글자를 오디오 스펙트럼으로 보이게 하기 위한 디자인)

[sc04, 알파매트, audio 소스2]

• 위에 이미지 참고해서, (파장만 보이게, 글자가 알파매트로 오디오 스펙트럼처럼 표현되게, 글자만 온전하게 보이게)
• 레이어 위치 별로 길이 split 편집해서 시간대 맞춰서 편집!
• 는 글자는 오퍼시티 0에서 100 되는 애니메이션 주기!

​

[sc 05]

• 재생수가 많은 순위대로 작성
• 재생 스페이스 수가 로 되어 있으면 애니메이션 적용이 안되서, 재생수가 작성후 재생 옆에 커서 두고 자간으로 스페이스 만들기!!
• 글자 전체를 가리는 마스크 그리고, 'Add' 누르기
• 포지션 애니메이션 추가
• 'Offset'으로만 애니메이션 값 조정 (-100에서 100으로) (*** 포지션값 Y기준점 수치 꼭 주기!)
• 흰색 솔리드 레이어 만들고 글자 포지션 Y값으로 새로 만든레이어에 숨는 애니메이션 추가!!
• 재생수가 많은 순위대로 글자 복사하고 (기존 마스크, 애니메이션 효과 삭제후)
  • gradient ramp로 색상주고
  • 마스크 패스로 애니메이션 주기 (색이 단어마다 입혀지도록)
  • 마지막에 애니메이션 준 키프레임 다 잡고, 마우스 우클릭, 'Toggle Hold Keyframe'

[sc 06]

• 내 사용료를 글자 작성
• 사용료만 작성 (글자 굵기 볼드체로)
• '내 사용료를' 작성한 글에서 사용료 부분만 마스크 씌우고 subtract

​

[sc 06, 글자 회전 애니메이션]

• 애니메이션에 Enable per-character 3D클릭
• left view로 보기 방식 바꾸고
• 'Add'로 Anchor Point추가 z축값 55로 설정!
• More Options에 Grouping Alignment에 있는 y값으로 (초록색) 와이값 중앙으로 중심점 위치하도록 설정!!!

​

• Rotate 애니메이션 추가하고 X Rotation값에 -3입력!

​

• rotation애니메이션 클릭한 상태에서, Selector에서 Expression추가!!, Based On 아래에 있는 Amount, Alt 누른 상태로 초시계 클릭, 모션 스크립트 복붙

​

앵커포인트에서 옮긴 Z축 값을 동일하게 맞춰줌!(위에 Add anchor point하고 z축값 옮겼으니까 동일하게 맞춰주는거!!)

• 애니메이터2 클릭한 상태에서 Add 누르고, character offset추가(자동 글자생성), 첫 키프레임에 60주고, 사용료 글자 온전히 보일때 0값 주기!

​

[sc06_포지션, 투명도, 잔상효과]

• 글씨가 완성 되었을때, 포지션 z축 값 애니메이션으로 글자가 앞으로 나오게

• 내사용료를 글자 3d 선택해주고 z 값으로 글자가 앞으로 나오는 애니메이션 만들기

[sc 07]

• 글자 입력
• 스케일 애니메이션 커지도록, 그래프로 부드럽게 조정

• Animate에 Tracking추가, 'Tracking Amount'로 애니메이션 주기!

​

[선 디자인]

• Repeater, Wiggle Transform효과 넣어 줄 때 바깥에 마우스 클릭하고 넣어줘야함!
• 위치중요! 리피터가 위, wiggle transform이 아래로
• wiggle transform에서 wiggle/Second 꼭 0으로 주고
• Position, Temporal Phase 로 디자인주고, stroke 색 그라디언트로 표현
• 디자인 다했으면, shape layer 복사하고, scale 값에서 x축 -100으로 좌우반전!!

​

[선에 그림자 효과]

• 두개의 쉐이프 레이어 동시선택, 프리컴포즈 만들기
• 프리컴포즈 복사
• 복사한 프리컴포즈에, Fill 추가해서 검정, CC Radial Blur효과 적용 (Straight Zoom, amount조정)

​

[Stop, 트랜지션]

• stop png 가져오고, 복사해서 최대한 빈틈 없이 배치 -> 두개 레이어 동시 선택 -> 복사, 붙여넣기 -> 반복
• 모든 레이어 선택후, 포지션 애니메이션값 아래에서 위로 올라오도록 주고, 그래프로 빠르게 올라오다가 느려지는 그래프 모양 해주기
• 1프레임 남겨두고 그 뒤에 Alt + ] 로 자르고
• 전체 프레임 선택(선택하는 순서 중요!!) --> 마우스 우클릭 --> key frame assistant --> sequence layers선택하면 (레이어가 계산식으로 자동 배치 됨)
• 모든 레이어 선택하고 프리컴포즈 만들기
• 스탑 트랜지션 컴포지션에서 '스탑 모음 프리컴포즈' 복사 해서 배치하기!!

​

[탐색 선택자]

[even, odd 선택자]

• 인덱스 번호로 기억해야함!! (0부터 시작)

[테이블 문제 코딩]

결과

[선택자, eq]

• last child, first child -> li는 적용되지만(li는 연속되기 때문) h2는 적용 안됨(연속성이 없음)!
• nth-of-child(2), first-of-child는 h2도 적용됨!!

[탐색 선택자 5번파일]

[탐색 선택자 6번파일]

• only-child,
• Slice(1,3)
  • <li>요소 중 인덱스 1이상 3미만 요소를 선택

[속성 탐색 선택자]

[탐색 선택자, 웹]

​