차례:
비디오: [어도비] 엣지(Edge) 시작하기 - Getting Started with Adobe Edge 2024
스테이지는 이미지, 텍스트 및 그려진 객체와 같은 요소를 배치하는 곳입니다. 스테이지는 라이브 HTML 윈도우입니다. 즉, 화면에 표시되는 내용은 잠재 고객이 컴포지션을보고 상호 작용할 때 보는 것입니다. 스테이지의 크기를 여러 가지 방법으로 조절할 수 있습니다.
-
픽셀: Adobe Edge Animate CC를 사용하면 브라우저 창의 크기에 관계없이 스테이지를 특정 크기로 유지할 수 있습니다.
-
백분율: 반응이 빠른 웹 디자인을 선호하는 사람들을 위해.
-
반응 형 웹 디자인 테스트: 스테이지의 배경색을 변경하여 디자인의 응답 성을 테스트 할 수 있습니다.
픽셀 값으로 스테이지 크기 조정
가장 먼저 수행해야 할 단계 중 하나는 스테이지의 크기를 적절하게 조정하는 것입니다. 기존 웹 페이지에 애니메이션을 삽입하려면 먼저 해당 페이지에서 애니메이션이 차지할 공간을 결정한 다음 이에 따라 스테이지의 크기를 조정하십시오.
스테이지의 크기를 조정하려면 그림과 같이 속성 패널의 스테이지 섹션에서 화면 상단 부근의 왼쪽 열에있는 주황색 숫자를 클릭합니다. 너비 또는 높이 숫자를 클릭하면 스테이지에 표시 할 정확한 크기 (픽셀 단위)를 입력 할 수 있습니다.
숫자를 입력하지 않으려면 Edge Animate에서 스테이지의 크기를 조정할 수있는 대체 방법을 제공합니다. 단순히 오렌지 번호 중 하나에 커서를 올려 놓습니다. 커서가 표시된 것처럼 이중 화살표로 바뀌면 클릭하고 드래그하여 스테이지 크기를 늘리거나 줄일 수 있습니다.
화면 크기의 비율에 따라 스테이지 크기 조정
특정 치수에 맞지 않는 애니메이션을 만들려면 픽셀 (픽셀)에서 퍼센트 (%)로 전환해야합니다. %)를 클릭하여 전환합니다 (이 그림 참조). 이는 반응 형 웹 디자인을 만드는 한 걸음입니다. 픽셀 값 대신 스테이지의 크기를 스테이지 크기로 조정하면 스테이지의 크기는 부모 요소의 크기에 따라 결정됩니다.
애니메이션이 독립형 웹 페이지 인 경우 상위 요소의 한 예가 브라우저 창일 수 있습니다. 그러나 애니메이션이 웹 페이지의 일부인 경우 부모 요소는 애니메이션이 중첩 된 div 요소가 될 수 있습니다.
스테이지를 전체 브라우저 창에 채우려면이 그림과 같이 스테이지 너비와 높이를 100 %로 설정합니다. 스테이지를 브라우저 윈도우의 절반에 채우려면 스테이지를 50 %로 설정하십시오. 애니메이션이 차지할 브라우저 윈도우의 양에 따라 다릅니다.
기본적으로 스테이지의 배경은 흰색입니다. 따라서 px와 % 사이를 전환 할 때 스테이지에 차이가 표시되지 않습니다.
스테이지 크기에 대해 px와 %를 사용하는 것과의 차이를 테스트하려면 스테이지의 배경색을 흰색과는 다른 빨간색으로 변경합니다. 그런 다음 다양한 비율과 픽셀 크기로 실험하여 다양한 효과를 확인하십시오.
스테이지의 배경색을 변경하려면 흰색 사각형을 클릭하여 색상 선택기를 표시합니다.
너비와 높이 링크 아이콘 (이 그림에서 강조 표시됨)을 클릭하여 Edge Animate에 너비와 높이 비율을 동일하게 유지하도록 지시 할 수 있습니다. 기본적으로 링크 너비 및 높이 아이콘은 꺼져 있습니다. 그 기본값을 적용하면 Edge Animate는 크기를 조정할 때 너비 (또는 높이)를 같은 비율로 유지하지 않습니다.