Adobe Edge Creative Cloud 앱

• 4 월 29, 2024

HTML5, JavaScript 및 CSS3는 웹, 태블릿 및 전화 용 대화 형 애니메이션을 제작하는 데 Flash만큼 인기가 있습니다. 어도비 벽돌^{아르 자형} Edge Animate 및 기타 Edge 앱은 작업을보다 쉽게하기 위해 사전 설정이 많은 사용자 친화적 인 소프트웨어입니다.

타임 라인 애니메이션은 여전히 ​​가장 인기있는 애니메이션 방식이며, Adobe는 새로운 Edge Animate 모션 경로를 사용하여보다 쉽게 ​​실제 움직임을 모방하고 내장 된 완화 기능을 제공합니다. 타임 라인에 애니메이션 마커를 추가하거나 Edge Animate가 모션 경로로 자동 변환되는 스테이지에서 객체의 드래그 앤 드롭으로 타임 라인에 애니메이션을 쉽게 추가 할 수 있습니다. 스테이지의 객체에 대한 변경 사항을 기록하고 이러한 변경 사항을 키 프레임 애니메이션으로 변환하는 기록 단추를 사용할 수도 있습니다. Edge에는 자체 버전의 액션 패널이 있으며 각 액션에는 패널에 자체 탭이 있습니다. Adobe Edge와 Google Chrome 브라우저를 함께 사용하면 애니메이션을 쉽게 테스트 할 수 있습니다.

Flash 애니메이션에 익숙한 경우 Edge에서 대화 형 작업을 추가하면 각 애니메이션 요소에 대해 중첩 된 타임 라인을 사용하고 가장 일반적인 상호 작용 및 애니메이션에 사전 설치된 코드 스 니펫을 적용 할 수 있다는 점에서 Flash 워크 플로와 유사합니다. 이 코드 스 니펫은 재생, 일시 정지, 재개 및 중지와 같은 재생 애니메이션을 처리 할뿐만 아니라 클릭, 호버 및 하이퍼 링크와 같은 기본 버튼 동작을위한 핫 영역을 생성합니다. 이러한 코드 스 니펫에 사용자 정의 코드를 추가하려면 액션 패널에 직접 입력 할 수 있습니다. 물론 액션 패널에서 고유 한 HTML5, JavaScript 및 CSS3을 직접 코딩 할 수 있습니다. 이러한 유형의 웹 및 애니메이션 프로그래밍은 종종 외부 JavaScript 라이브러리에 의존하기 때문에 이러한 외부 소스에 대한 링크를 추가 할 수도 있습니다.

애니메이션은 Edge 앱 그룹으로 수행 할 수있는 작업의 일부일뿐입니다. 웹 디자인의 가장 중요한 측면 중 하나는 데스크탑에서 휴대폰에 이르기까지 모든 유형의 화면에 반응 형이거나 유연한 웹 사이트를 만드는 것입니다. 이는 미디어 쿼리 및 유동적 백분율 기반 그리드 레이아웃으로 수행되며, 둘 다 Edge Reflow에있는 도구의 일부입니다. Edge Reflow는 프로젝트의 코드를 생성하는 WYSIWYG 작업 환경입니다. 이 코드는 최신 웹 표준, 특히 웹 페이지에서 전자 책 리더에 이르기까지 점점 더 많이 지원되는 WebKit에 적합합니다.

상자 도구를 사용하여 HTML div 컨테이너를 그리드에 그리는 것처럼 Edge Reflow에서 레이아웃을 쉽게 구축 할 수 있으며 이러한 div의 절대 위치를 지정하면 각 화면 크기에 맞게 크기를 조정하거나 변형 할 수 있습니다. 어떻게 작동합니까? 비밀은 3 가지 이상의 화면 해상도에 대한 최소 및 최대 매개 변수를 설정하여 매체 조회 관리자 내에서 사용자 정의 할 수있는 매체 조회입니다. 이 매개 변수는 디자인이 가장 가까운 화면 크기에 대해 위 또는 아래로 변환되는시기를 결정합니다. 작업 공간 상단의 각 화면 크기마다 색상으로 구분 된 시각적 마커가 마음에 들며 이러한 변경 사항이 발생할 때 시각화하는 데 도움이됩니다.

가장 시간을 절약하는 Edge 기능 중 하나는 여러 프로젝트에서 사용자 정의 CSS3 스타일을 쉽게 재사용하여 일관된 스타일을 유지하는 방법입니다. 또한 거의 자동으로 업데이트됩니다. Adobe는 Edge Reflow Styling 패널을 통해이를 워크 플로우의 일부로 만들었습니다. 사물을 깔끔하게 유지하기 위해 배경이나 테두리와 같은 각 스타일에는 고유 한 섹션이 있습니다. 이러한 탭에서 직접 색상 및 기타 매개 변수와 레이어 계층을 제어 할 수 있습니다. 이러한 사용자 정의 스타일은 CSS 스타일 규칙으로 자동 변환 된 후 재사용을 위해 복사 / 붙여 넣기 할 수 있습니다.

과거에는 웹 페이지를 미리 보려면 변경 사항을 저장하고 웹 브라우저로 전환 한 후 페이지를 새로 고쳐야했습니다. Adobe는 Edge Inspect와 Chrome 브라우저의 조합을 사용하여 이러한 단계 수를 줄였습니다. 이제 데스크탑, 태블릿, 휴대 전화 등 여러 장치에서 프로젝트가 어떻게 표시되는지 미리 볼 수 있습니다. 내가 정말 좋아하는 기능 중 하나는 이러한 미리보기의 스크린 샷을 클라이언트 및 팀 구성원에게 이메일로 보내거나 Creative Cloud에서 공동 작업에 사용할 수있는 기능입니다.

마지막으로 원시 코드 작업을 여전히 좋아하는 사람들에게는 Adobe에 Edge Code가 있습니다. 왼쪽에 몇 개의 컨트롤 만 있으면 코드 창이 복잡하지 않으며 Edge Code는 Chrome과 통합되어 실시간 미리보기를 제공합니다. 코드가 길고 다루기 어려워지면 오버레이 창에서 요소에 연결된 모든 스타일을 나열하는 빠른 편집 기능을 사용하여 개별 요소 수준으로 드릴 다운 할 수 있습니다. Edge 앱은 Creative Cloud의 일부이므로 Edge Code 내에서 직접 Adobe Edge 웹 글꼴, Google 웹 글꼴 및 Typekit 글꼴을 사용할 수 있습니다. Edge Code는 외부 글꼴을 가져 오는 헤더 스크립트 태그를 생성합니다.

HTML5, JavaScript 및 CSS3는 모바일 장치의 인기로 인해 이전 애니메이션 기법을 빠르게 대체하고 있으므로 이러한 통합 Edge 앱과 다른 Adobe 앱과의 통합은 차세대 다중 장치 디자인 및 개발 워크 플로우입니다.

공개 : 나는이 기사에 대해 재정적으로 보상을받지 않았다. Adobe는이 검토를 위해 Creative Cloud 멤버십을 제공했습니다.의견은 내 경험에 따라 완전히 나 자신입니다.

저작권 2018 Adobe Systems Incorporated. 판권 소유. Adobe 제품 스크린 샷은 Adobe Systems Incorporated의 허가하에 재 인쇄되었습니다. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, 플래시, ActionScript, 불꽃 놀이, 참여, 사로 잡기, 플래시 촉매 및 플래시 용지 는 미국 및 / 또는 기타 국가에서 사용되는 Adobe Systems Incorporated의 [a] 등록 상표 또는 상표입니다.

비디오 지침: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (4 월 2024).