Adobe Edge Creative Cloud Apps

• Може 2, 2024

HTML5, JavaScript та CSS3 стали майже такими ж популярними, як Flash для створення інтерактивної анімації для Інтернету, планшетів та телефонів. Adobe^R Edge Animate та інші програми Edge - це дуже зручне для користувача програмне забезпечення з багатьма попередніми налаштуваннями, щоб полегшити роботу.

Анімація на часовій шкалі як і раніше є найпопулярнішим способом анімації, а Adobe спростила нові шляхи руху Edge Animate, які можуть імітувати рухи реального світу та за допомогою вбудованого ослаблення. Ви можете легко додати анімацію по часовій шкалі за допомогою кнопки «Пін», яка додає маркери анімації до часової шкали або шляхом перетягування позиціонування об’єктів на сцені, які Edge Animate автоматично перетворює на контури руху. Ви навіть можете скористатися кнопкою Record, яка записує зміни, які ви вносите до об'єктів на сцені, і перетворює ці зміни в анімацію ключових кадрів. Edge також має власну версію панелі "Дії", яка є незахищеною, оскільки кожна дія має свою вкладку на панелі. Тестування анімації легко за допомогою комбінації Adobe Edge та браузера Google Chrome.

Якщо ви знайомі з анімацією Flash, ви помітите, що додавання інтерактивності в Edge нагадує робочий процес Flash, оскільки ви можете використовувати вкладені строки для кожного елемента анімації та застосовувати попередньо встановлені фрагменти коду для найбільш поширених взаємодій та анімацій. Ці фрагменти коду обробляють анімацію відтворення, наприклад відтворення, паузу, відновлення та зупинку, а також створюють гарячі області для основних дій кнопок, таких як клацання, наведення курсора та навіть гіперпосилання. Щоб додати спеціальний код до цих фрагментів коду, ви можете ввести безпосередньо на панелі "Дії". Звичайно, ви можете ввести коди власних HTML5, JavaScript та CSS3 на панелі "Дії". Оскільки цей тип програмування в Інтернеті та анімації часто покладається на зовнішні бібліотеки JavaScript, ви навіть можете додавати посилання на ці зовнішні джерела.

Анімація - це лише частина того, що ви можете зробити з групою додатків Edge. Одним з найважливіших аспектів веб-дизайну є створення веб-сайту, який відповідає або гнучким для всіх типів екранів від настільних до мобільних телефонів. Це робиться за допомогою медіа-запитів та рідинних макетів сітки на основі відсотків, обидва вони є частиною інструментів, знайдених у Edge Reflow. Edge Reflow - це робоче середовище WYSIWYG, яке генерує код для вашого проекту. Цей код оновлюється останніми веб-стандартами, особливо WebKit, який все більше підтримується всіма веб-сторінками до читачів електронних книг.

Побудувати макет у Edge Reflow так само просто, як малювати контейнери HTML div на сітці за допомогою інструмента Box, і абсолютне розміщення цих дівок дозволяє їм змінювати розмір або трансформувати за необхідності для кожного розміру екрана. Як це працює? Секрет - медіа-запити, які можна налаштувати в Менеджері медіа-запитів, встановивши мінімальні та максимальні параметри для трьох і більше роздільних можливостей екрана. Ці параметри визначатимуть, коли конструкція перетвориться вгору або вниз для найближчого розміру екрана. Мені дуже подобаються кольорові візуальні маркери для кожного розміру екрана у верхній частині робочої області, які допомагають візуалізувати, коли ці зміни відбудуться.

Однією з найбільш економних функцій Edge є те, як ви можете легко використовувати свої власні стилі CSS3 протягом кількох проектів і таким чином підтримувати послідовні стилі. Це також робить оновлення майже автоматичним. Adobe зробила це частиною вашого робочого процесу за допомогою панелі стилізації Edge Reflow. Щоб речі не були безладно, кожен стиль, наприклад, фони або рамки, має свій окремий розділ. Ви можете керувати кольором та іншими параметрами, а також ієрархією шарів безпосередньо з цих вкладок. Ці налаштовані стилі автоматично перетворюються в правила стилю CSS, які потім можна скопіювати / вставити для повторного використання.

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

Нарешті, для тих із нас, хто все ще любить працювати з необробленим кодом, Adobe має Edge Code. Вікно коду не заповнено лише кількома елементами зліва, і Edge Code інтегрується з Google Chrome, щоб отримати попередній попередній перегляд. Коли ваш код стає довгим і невмирущим, ви можете перейти до рівня окремих елементів, скориставшись функцією швидкого редагування, яка перелічує всі стилі, приєднані до елемента у вікні накладання. Оскільки програми Edge є частиною Creative Cloud, ви можете використовувати веб-шрифти Adobe Edge, веб-шрифти Google та шрифти Typekit безпосередньо з коду Edge. Edge Code буде генерувати тег сценарію заголовка, який тягне за собою зовнішній шрифт.

Оскільки HTML5, JavaScript і CSS3 швидко замінюють старі методи анімації через популярність мобільних пристроїв, ці інтегровані програми Edge, а також їх інтеграція з іншими програмами Adobe є наступним поколінням багаторазового робочого процесу проектування та розробки пристроїв.

Розкриття інформації: Ця стаття мені не отримала фінансової компенсації. Для цього огляду компанія Adobe представила членство Creative Cloud.Думки цілком власні на основі мого досвіду.

Авторські права 2018 Adobe Systems Incorporated. Всі права захищені. Знімки екрана продуктів Adobe передруковані з дозволу Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, 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).