Adobe Edge Creative Cloud Apps

• Може 6, 2024

HTML5, JavaScript и CSS3 станаха почти толкова популярни, колкото Flash за създаване на интерактивна анимация за интернет, таблети и телефони. кирпич^R Edge Animate и другите приложения Edge са много удобен за употреба софтуер с много предварително зададени настройки, за да улеснят работата ви.

Анимацията на времевата линия все още е най-популярният начин за анимиране, а Adobe улесни новия път на движение Edge Animate, който може да имитира движения в реалния свят и с вградено успокояване. Можете лесно да добавяте анимация по времевата линия с бутона Pin, който добавя маркери за анимация към времевата линия или чрез позициониране на обекти на сцената, които Edge Animate автоматично превръща в пътеки за движение. Можете дори да използвате бутона Запис, който записва промените, които правите в обектите на сцената и преобразува тези промени в анимация с ключови кадри. Edge също има своя собствена версия на панела „Действия“, която е несградена, като всяко действие има свой раздел в панела. Тестването на вашите анимации е лесно с комбинация от Adobe Edge и браузъра Google Chrome.

Ако сте запознати с Flash анимацията, ще забележите, че добавянето на интерактивност в Edge наподобява работния процес на Flash, тъй като можете да използвате вложени времеви линии за всеки анимационен елемент и да приложите предварително инсталирани фрагменти от кодове за най-често срещаните взаимодействия и анимации. Тези кодови фрагменти се справят както с анимация при възпроизвеждане, като възпроизвеждане, пауза, възобновяване и спиране, така и създават горещи зони за основните действия с бутони като щракване, задържане и дори хипервръзки. За да добавите персонализиран код към тези кодови фрагменти, можете да въведете директно в панела „Действия“. Разбира се, можете да кодирате собствените си HTML5, JavaScript и CSS3 в панела „Действия“. Тъй като този тип уеб и анимационно програмиране често разчитат на външни JavaScript библиотеки, дори можете да добавяте връзки към тези външни източници.

Анимацията е само част от това, което можете да направите с групата приложения Edge. Един от най-важните аспекти на уеб дизайна е създаването на уебсайт, който е отзивчив или гъвкав за всички видове екрани от десктоп до мобилни телефони. Това се прави с медийни запитвания и течност, базирани на проценти оформления на мрежата, и двете са част от инструментите, открити в Edge Reflow. Edge Reflow е работна среда на WYSIWYG, която генерира кода за вашия проект. Този код е актуален за най-новите уеб стандарти, особено WebKit, който все повече се поддържа от всичко от уеб страници до читатели на електронни книги.

Изграждането на оформление в Edge Reflow е толкова лесно, колкото чертането на HTML div контейнери върху мрежата с инструмента Box и абсолютното позициониране на тези divs им позволява да преоразмеряват или трансформират според нуждите на всеки размер на екрана. Как работи това? Тайната е Media Queries, която можете да персонализирате в мениджъра на Media Query, като зададете минимални и максимални параметри за три или повече разделителни способности на екрана. Тези параметри ще определят кога дизайнът ще се трансформира нагоре или надолу за най-близкия размер на екрана. Много ми харесват цветните визуални маркери за всеки размер на екрана в горната част на работното пространство, които ви помагат да визуализирате кога ще настъпят тези промени.

Една от най-спестяващите време функции на Edge е как можете лесно да използвате вашите персонализирани стилове CSS3 за няколко проекта и по този начин да поддържате последователни стилове. Това също прави актуализирането почти автоматично. Adobe направи това част от вашия работен процес с панела за стилизиране на Edge Reflow. За да се запазят нещата, всеки стил, като фонове или рамки, има свой отделен раздел. Можете да контролирате цвета и други параметри, както и йерархията на слоевете, директно от тези раздели. Тези персонализирани стилове автоматично се преобразуват в правила за CSS стил, които след това могат да бъдат копирани / поставени за повторна употреба.

В миналото, за да визуализирате уеб страницата си, трябваше да запазите промените, да преминете към уеб браузър и да опресните страницата. Adobe намали броя на тези стъпки, като използва комбинация от Edge Inspect и браузъра Chrome. Сега можете да визуализирате как проектът ви ще се показва на множество устройства от десктоп, таблет до мобилен телефон. Една особеност, която наистина харесвам, е възможността да направя екранна снимка на тези визуализации, за да изпращате имейли на клиенти и членове на екипа или да използвате в Creative Cloud за сътрудничество.

И накрая, за тези от нас, които все още обичат да работят със суров код, Adobe има Edge Code. Прозорецът на кода е препълнен само с няколко контроли вляво и Edge Code се интегрира с Google Chrome, за да ви даде преглед на живо. Когато вашият код стане дълъг и невъзмутимо, можете да разчитате на нивото на отделните елементи, като използвате функцията за бързо редактиране, която изброява всички стилове, прикачени към елемент в прозорец на наслагване. Тъй като приложенията Edge са част от Creative Cloud, можете да използвате шрифтовете Adobe Edge Web, Google Web Fonts и Typekit директно от Edge Code. Edge Code ще генерира тага за скрипт на заглавието, който се дърпа във външния шрифт.

Тъй като HTML5, JavaScript и CSS3 бързо заместват по-старите техники на анимация поради популярността на мобилните устройства, тези интегрирани приложения Edge, както и тяхната интеграция с останалите приложения на Adobe са следващото поколение от многото работни процеси за проектиране и разработка на устройства.

Разкриване: Не получих финансова компенсация за тази статия. Adobe предостави членство в Creative Cloud за целите на този преглед.Мненията са напълно мои на базата на моя опит.

Copyright 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, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst и Flash Paper е или са [a] регистрирана търговска марка (и) или търговска марка (и) на Adobe Systems Incorporated в Съединените щати и / или други страни.

Инструкции Видео: Building a Mobile App with Adobe Creative Cloud | Adobe Creative Cloud (Може 2024).