이미지 효과 구성요소

AMP HTML 광고동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.

이미지 효과 구성요소를 사용하면 전후 비교, 숨쉬기, 드러내기, 물결과 같은 자바스크립트 기반의 다양한 시각적 효과를 이미지(경우에 따라 한 쌍의 이미지)에 적용할 수 있습니다.

이미지 효과 구성요소를 사용하는 방법:

  1. 구성요소 패널에 이어 그래픽 및 효과 폴더를 엽니다.

  2. 이미지 효과 Image Effect component icon 구성요소를 더블클릭하거나 스테이지로 드래그합니다.

  3. 스테이지에서 구성요소를 더블클릭하거나 설정... 버튼(속성 패널에 있음)을 클릭합니다. 그러면 이미지 효과 대화상자가 열립니다.

  4. 이미지를 대화상자 스테이지로 드래그하거나 이미지 선택을 클릭하여 이미지를 선택합니다.

  5. 속성 패널의 드롭다운에서 원하는 이미지 효과 유형을 선택합니다.

  6. 일부 효과 유형에서는 두 개의 이미지를 사용합니다. 라이브러리에서 추가 이미지를 선택하거나 파일 시스템에서 가져올 이미지 파일을 찾아볼 수 있습니다.

  7. 속성을 조정하여 효과를 맞춤설정합니다(아래에 설명되어있음).

속성

전체 구성요소의 속성과 함께 구성요소 내에 포함된 각 효과의 속성도 구성할 수 있습니다.

이미지 효과 구성요소 속성

속성

설명

이름 이미지 효과 구성요소 이름을 설정합니다.
크기 조절

구성요소 내에서 다양한 크기의 이미지가 표시되는 방식을 결정합니다. 자세히 알아보기

  • 이미지 크기를 조절하여 맞춤
  • 이미지 잘라 채움
  • 없음
  • 이미지를 늘려 채움
애니메이션 제한 설정 선택한 경우 지정된 시간(초)이 지나면 애니메이션 자동재생이 중단됩니다.

각 효과 유형의 속성

이미지 효과 대화상자에서 각 효과 유형과 관련된 속성에 액세스할 수 있습니다. 스테이지에서 이미지 효과 구성요소를 더블클릭하거나 속성 패널에서 설정... 을 클릭하여 대화상자를 연 다음, 속성을 확인할 효과 유형을 선택합니다.

없음

이미지에 아무 효과도 적용되지 않습니다.

전후 비교

'전후 비교' 효과를 사용하면 두 이미지 간에 와이프 전환이 적용되며 전환이 완료되면 방향이 바뀌는 과정이 반복됩니다.

  

속성

설명

이미지
기본 구분선 위 또는 왼쪽에 표시된 이미지입니다. 이미지 대체 버튼을 사용하여 기본 이미지와 드러난 이미지를 전환합니다.
드러남 구분선 아래 또는 오른쪽에 표시된 이미지입니다. 이미지 대체 버튼을 사용하여 드러난 이미지와 기본 이미지를 전환합니다.
구분선
각도 두 이미지 간 구분선의 각도로, 0부터 180 사이의 값입니다. 기본값은 90(세로선)입니다.
부드러운 테두리 효과 구분선을 따라 이미지 가장자리가 부드러워지는 효과입니다. 1을 사용하면 선명하게 전환되며, 값이 클수록 가장자리가 흐려집니다.
상호작용 마우스 추적 체크박스가 선택되어 있으면 구분선이 마우스 커서를 따라갑니다.
애니메이션
자동재생 자동재생 체크박스가 선택되어 있으면 구성요소가 로드될 때 애니메이션이 시작됩니다.
초기 상태
위치 애니메이션이 시작될 때 구분선의 시작 위치입니다.
지연 애니메이션이 자동재생되기 전까지의 시간(초)입니다.
숨쉬기

숨쉬기 효과를 사용하면 이미지가 신축성 있게 확장 및 수축됩니다.

   

속성

설명

이미지
기본 효과를 적용할 이미지입니다.
숨쉬기
속도 애니메이션의 속도입니다. 0을 사용하면 애니메이션이 재생되지 않으며, 값이 클수록 애니메이션이 더 빠르게 재생됩니다.
가로 효과
확장 이미지가 가로로 확장하는 규모입니다.
수축 이미지가 가로로 수축하는 규모입니다.
세로 효과
확장 이미지가 세로로 확장하는 규모입니다.
수축 이미지가 세로로 수축하는 규모입니다.
유지 시간
확장 이미지가 완전히 확장된 상태로 유지되는 시간(초)입니다.
수축 이미지가 완전히 수축된 상태로 유지되는 시간(초)입니다.
곡선
가로 가로 왜곡에 의해 생성되는 곡선의 수입니다.
세로 세로 왜곡에 의해 생성되는 곡선의 수입니다.
드러내기

드러내기 효과를 사용하면 타원형의 포커스 영역 내에 해당하는 두 번째 이미지 부분이 표시됩니다.

  

속성

설명

이미지
기본 포커스 영역 밖에 표시되는 이미지입니다. 이미지 대체 버튼을 사용하여 기본 이미지와 드러난 이미지를 전환합니다.
드러남 포커스 영역에서 드러나는 이미지입니다. 이미지 대체 버튼을 사용하여 드러난 이미지와 기본 이미지를 전환합니다.
포커스
반경 X축 및 Y축을 따른 포커스 영역의 반경입니다. 반경 비율 고정 버튼을 사용하면 반경을 변경할 때 가로세로 비율이 그대로 유지됩니다.
부드러운 테두리 효과 포커스 영역의 가장자리가 부드러워지는 효과입니다. 0을 사용하면 포커스 영역의 가장자리가 선명하게 표시되며, 값이 클수록 포커스 영역의 가장자리가 흐려집니다.
효과 계속 표시 체크박스가 선택되어 있으면 포커스 영역이 이동한 후에도 드러난 이미지가 계속 표시됩니다.
애니메이션
자동재생

포커스 영역의 움직임 패턴입니다.

  • 이동(기본값) - 포커스 영역이 이미지 위에서 무작위로 이동하고 방향을 바꾸며 이미지 위에 머무릅니다.
  • 순환 이동 - 포커스 영역이 이미지 위에서 무작위로 이동하고 가장자리에 도달하면 이미지의 반대쪽에 나타납니다.
  • 원형 - 포커스 영역이 원형으로 이동합니다.
  • 없음
속도 포커스 영역의 속도입니다. 0을 사용하면 애니메이션이 재생되지 않으며, 값이 클수록 애니메이션이 더 빠르게 재생됩니다.
상호작용 마우스 추적 체크박스가 선택되어 있으면 포커스 영역이 마우스 포인터를 따라갑니다.
물결

이미지의 슬라이스에 물결 패턴으로 애니메이션이 적용됩니다.

   

속성

설명

이미지
기본 효과를 적용할 이미지입니다.
물결
유형

효과에서 사용되는 파형입니다.

  • 표준 - 이미지에 물결 효과 애니메이션이 적용됩니다.
  • 렌즈 - 대칭적인 물결 패턴으로 이미지가 수축 및 확장하는 애니메이션이 적용됩니다.
방향 물결 애니메이션의 방향입니다.
  • 가로
  • 세로
속도 물결 애니메이션의 속도입니다. 0을 사용하면 애니메이션이 재생되지 않으며, 값이 클수록 애니메이션이 더 빠르게 재생됩니다.
규모 물결의 강도입니다. 0을 사용하면 효과가 적용되지 않으며, 값이 클수록 더 큰 물결이 적용됩니다.
길이 물결 정점 사이의 거리입니다. 길이가 짧을수록 더 많은 물결이 나타납니다.
역방향 역방향 체크박스가 선택되어 있으면 물결이 왼쪽에서 오른쪽으로(가로 방향의 경우) 또는 아래에서 위로(세로 방향의 경우) 이동합니다.
자르기 자르기 체크박스가 선택되어 있으면 애니메이션의 프레임마다 이미지가 다시 그려져 흔적 효과가 나타나지 않습니다.
고급
물결 영역 이미지에서 물결 효과의 영향을 받는 부분입니다.
최대 강도 이미지에서 물결 효과가 최대 규모인 부분입니다. 물결 영역의 다른 부분에서는 효과의 규모가 점점 줄어듭니다.

이벤트 및 동작

이미지 효과 구성요소에 의해 전송되는 이벤트

다음과 같은 이미지 효과 구성요소 이벤트를 기반으로 다른 동작을 트리거할 수 있습니다.

이벤트 설명
자동재생이 종료됨 자동재생 애니메이션이 애니메이션 시간제한에 도달하면 전송됩니다.
이미지 효과 구성요소 및 각 효과에 의해 수행되는 동작

다른 이벤트에 대한 반응으로 다음과 같은 이미지 효과 구성요소 동작이 트리거될 수 있습니다.

  • 재생
  • 일시중지

이벤트 대화상자에서 이러한 동작 중 하나를 선택할 때 이미지 효과 구성요소 또는 특정 효과를 수신자로 설정하세요.

이벤트 구성 방법 알아보기

미리보기

이미지 효과 대화상자에서 작업하는 동안 스테이지에는 구성요소에 애니메이션이 적용되면 어떻게 표시되는지가 나타납니다. 속성을 변경하면 애니메이션이 처음으로 돌아갑니다.

대화상자 하단에서 저장을 클릭한 후 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서 미리보기를 할 수도 있습니다.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?

도움이 더 필요하신가요?

다음 단계를 시도해 보세요.

검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
4515479310880582301
true
도움말 센터 검색
true
true
true
true
true
5050422
false
false