Adobe Edge Creative Cloud Apps

• April 26, 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, который все больше поддерживается всем - от веб-страниц до читателей электронных книг.

Построить макет в Edge Reflow так же просто, как нарисовать HTML-контейнеры div на сетке с помощью инструмента Box, и абсолютное позиционирование этих div-элементов позволяет им изменять размеры или трансформировать их по мере необходимости для каждого размера экрана. Как это работает? Секрет в Media Queries, который вы можете настроить в Media Query Manager, установив минимальные и максимальные параметры для трех и более разрешений экрана. Эти параметры будут определять, когда дизайн преобразуется вверх или вниз для ближайшего размера экрана. Мне очень нравятся визуальные маркеры с цветовой кодировкой для каждого размера экрана в верхней части рабочего пространства, которые помогают вам визуализировать, когда произойдут эти изменения.

Одна из наиболее экономящих время функций Edge - это то, как вы можете легко использовать ваши собственные стили CSS3 в нескольких проектах и, таким образом, поддерживать согласованные стили. Это также делает обновление почти автоматическим. Adobe сделала это частью вашего рабочего процесса с помощью панели Edge Reflow Styling. Чтобы не загромождать вещи, каждый стиль, например фон или границы, имеет свой отдельный раздел. Вы можете управлять цветом и другими параметрами, а также иерархией слоев непосредственно из этих вкладок. Эти настроенные стили автоматически преобразуются в правила стиля CSS, которые затем можно скопировать / вставить для повторного использования.

Раньше для предварительного просмотра веб-страницы необходимо было сохранить изменения, переключиться на веб-браузер и обновить страницу. Adobe сократила количество этих шагов, используя комбинацию Edge Inspect и браузера Chrome. Теперь вы можете предварительно просмотреть, как ваш проект будет отображаться на нескольких устройствах от настольного компьютера, планшета до мобильного телефона. Одна функция, которая мне действительно нравится, - это возможность сделать снимок экрана с этими превью для отправки по электронной почте клиентам и членам команды или использования в Creative Cloud для совместной работы.

Наконец, для тех из нас, кто все еще любит работать с необработанным кодом, у Adobe есть Edge Code. Окно кода не загромождено несколькими элементами управления слева, а Edge Code интегрируется с Google Chrome, чтобы предоставить вам предварительный просмотр в реальном времени. Когда ваш код становится длинным и громоздким, вы можете перейти к уровню отдельных элементов, используя функцию быстрого редактирования, в которой перечислены все стили, прикрепленные к элементу в окне наложения. Поскольку приложения Edge являются частью Creative Cloud, вы можете использовать веб-шрифты Adobe Edge, шрифты Google Web и шрифты 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, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, содействие, увлечение, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.

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