Тепер дещо ускладнимо завдання - виготовимо анімований Flash-банер. Говорити про повноцінну Flash-анімацію, в даному випадку, звичайно, не доводиться - для цього є спеціалізовані пакети. Але для створення простого, аматорського ролика можна використовувати і Illustrator.

Ніяких спеціальних інструментів та засобів інтерфейсу, на зразок тимчасової шкали, які характерні для програм розробки анімації, Adobe Illustrator немає. Але є одна тонкість - як кадри можна використовувати шари.

Створіть банер, на якому буде лише текст.

1. Згрупуйте символи командою Object › Group(Об'єкт › Групувати).
2. Наступне завдання - зробити із символів шрифту контурні об'єкти, інакше не вийде коректне формування шарів. Для цього виділіть групу та виберіть Type › Create outlines(Шрифт › Трасування).
3. Після цього відкрийте меню панелі Layers(Шари), клацнувши на кнопці у вигляді стрілки на палітрі (рис. 8.11).

Рис. 8.11. Меню панелі Layers

Нас у цьому меню цікавить команда Release to Layer (Sequence)(Перетворити на шари (Послідовно)), яка переводить кожен окремий об'єкт на новий шар. Зверніть увагу, що при застосуванні команди має бути виділено саме групу Group, а не шар Layer 1.

Те, як має виглядати палітра Layers(Шари) після виконання Release to Layer (Sequence)(Перетворити на шари (Послідовно)), показано на рис. 8.12.

Рис. 8.12. Палітра Layers після виконання Release to Layer (Sequence)

На цьому підготовка закінчена, можна зберігати за допомогою Save for Web(Зберегти для Web) у SWF. SWF- це основний формат графіки, що базується на Flash-технологіях. Точніше сказати, що це і є Flash-формат (рис. 8.13).

Напевно, сьогодні вже всі користувачі тією чи іншою мірою знайомі з Flash. В даний час це найбільш поширений формат анімації в Інтернеті, за допомогою якого побудовано переважну більшість мультимедійних інтернет-сторінок.

Звичайно, в Adobe Illustrator не реалізовано і десяту частину можливостей Flash, адже програма призначена не для цього. Тим не менш, в ній ви зможете зробити статичну картинку або просту анімацію.

Рис. 8.13. Налаштування оптимізації для формату SWF

Існують такі параметри.

• Read Only(Лише читання). Якщо ви встановите прапорець, файл буде записаний таким чином, що його вже не можна буде відкрити для редагування в будь-якій програмі. Це, з одного боку, зменшує розмір файлів, з другого, захищає ваші авторські права.
• Налаштування, позначене 1. Параметр, який визначає тип збереження, - зображення або анімація.
• Якщо ви оберете варіант AI File to SWF File(Файл Illustrator у файл SWF), зображення буде збережено у вигляді статичної картинки, що повністю повторює те, що ви бачите на екрані під час роботи в Illustrator.
• Layers to SWF Frames(Шари у SWF-фрейми) дозволяє зробити анімацію на основі наявних шарів, які будуть представлені як кадри. Нам потрібно вибрати цей варіант.
• Curve Quality(Якість кривих). Точність повторення кривими файлу кривих вихідного зображення. При зменшенні цього параметра значно знижується якість, особливо в області дрібних деталей, зате зменшується розмір файлу. Для нашого випадку оптимальне значення "7".
• Frame Rate(Затримка кадру). Частота зміни кадрів і, як наслідок, швидкість анімації. Щоб ефект був правильним, виставте не більше 4 кадрів за секунду.
• Loop(Повторювати). Програвати анімацію багаторазово. Підходить для анімації, для якої важливий цикл, що повторюється. Банер відноситься саме до такого типу.

Adobe Illustrator and After Effects
Імпорт та проста анімація

Вітання. Сьогодні на розгляді проста анімація у After Effects.

Ресурси: Adobe Illustrator CC
Adobe After Effects CC

Почнемо вивчення з малювання у Illustrator.

Малюємо
1) Намалюємо як тло Прямокутник жовтого кольору

Рисунок 1 - Rectangle

2) Намалюємо Коло і заллємо градієнтом
Попрацюємо трохи над колом:
- Видалимо нижню точку на контурі, отримаємо дугу;
- проведемо пряму лінію, закривши низ дуги, отримаємо півколо

Малюнок 2 - 1) draw circle; 2) gradient; 3) delete point

3) Малюємо Прямокутник і робимо його копію
- Один прямокутник сірий;
- інший прямокутник темно-сірий
4) Малюємо Трикутник із зірочки встановивши число променів - 3

Рисунок 3 – 1) rect light; 2) rect dark; 3) triangle

5) Малюємо кота за допомогою Pen та простих фігур

Малюнок 4 – 1) head; 2) neck; 3) body; 4) ноги; 5) tail

А тепер самий ГОЛОВНИЙмомент
Розподілимо картинки по шарах (те що буде анімовано - на окремий шар) ось так:

Малюнок 5 - all pics (red mark important layers)

Все тепер зберігаємо.
Подивимося налаштування збереження

Малюнок 6 - Save

А тепер наступний етап. ЗакриваємоAdobe Illustrator та відкриваємо After Effects.

Імпорт до After Effects
File – Import – File – вибираємо наш збережений файл Illustrator.
Виберемо , щоб імпортувати шари з Illustrator, якщо поставимо footage, то отримаємо картинку з об'єднаними шарами, а цього не потрібно.

Малюнок 7 - Import As Composition

Все імпортували.
А тепер побачимо, що в нас є. Подвійне клацання по композиції , Що відкрилося і ми побачили шари (якщо все правильно зробили, то буде кілька шарів). Отримаємо таке, див. малюнок

Малюнок 8 - Open Composition

А тепер те, для чого ми тут сьогодні зібралися – Анімація.

Анімація в After Effects
Встановимо точку обертання у стрілки вгорі за допомогою Pan Behind Tool (швидка клавіша - Y). Просто беремо крапку і переміщуємо туди, куди потрібно. В результаті це буде виглядати так.

Малюнок 9 - Pan tool and Layers

Ну, все, тепер переходимо до шарів для анімації.
Нам буде потрібно шар Arrow та Head_cat.
Почнемо з arrow.
Розкриємо список, знайдемо та натиснемо на годинник. Так ми поставили першу крапку на нульовій секунді. Усього анімація триватиме 2 секунди.
Отже, ось такі налаштування треба зробити (всього поставимо 3 крапки)

Second	0	1	2
	+66	- 70	+66

Ось так це виглядатиме:

Рисунок 10 - Rotation arrow

А тепер анімуємо голову кота.
Розкриємо head_cat та знайдемо Position.
Тут буде чотири точки.
Змінюватиме лише останню координату не чіпаючи інші.

Second	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

Дивимося на картинку.

Малюнок 11 - Position head

Отже, принцип анімації був такий. Стрілка хитається з боку в бік, як тільки наближається до кошеня, він втягує голову в себе, затримується в цьому положенні небагато, а потім повертає її на місце.

Заключний етап

Production
Потрібно створити готовий продукт зі свого твору.
Ідемо в меню - Add to Render Queue
Відкриється панель Render і в Output Module (два клацання) виберемо формат виходу. Я взяла *.mov

Рисунок 12 - Render

Натискаємо кнопку RENDER і отримуємо результат (тільки не забудьте вказати шлях).
На цьому все.

Формат файлу Flash (SWF) заснований на векторній графіці і призначений для масштабованої компактної графіки для Інтернету. Так як цей формат файлу заснований на векторній графіці, об'єкт зберігає якість зображення за будь-якої роздільної здатності і ідеальний для створення кадрів анімації. У Illustrator можна створити окремі кадри анімації на шарах, а потім експортувати шари зображення в окремі кадри для використання на веб-сайті. Можна також визначити символиу файлі Illustrator для зменшення розміру анімації. При експорті кожен символ визначається у SWF-файлі лише один раз.

Команда «Експортувати» (SWF)

Забезпечує найбільший контроль над анімацією та бітовим стиском.

Забезпечує більше контролю над сумішшю форматів SWF та бітового у фрагментованому макеті. Ця команда пропонує менше параметрів зображення, ніж команда «Експортувати» (SWF), але використовує останні використані параметри команди «Експортувати» (див. ).

Під час підготовки об'єкта до збереження у форматі SWF пам'ятайте наведені нижче рекомендації.

За допомогою програми Device Central можна побачити, як виглядатиме графічний об'єкт Illustrator у Flash Player на різних кишенькових пристроях.

Вставлення графічного об'єкту Illustrator

Створений у програмі Illustrator графічний об'єкт можна швидко, просто та легко скопіювати та вставити у програму Flash.

При вставці графічного об'єкта Illustrator у Flash зберігаються такі атрибути.

Контури та фігури

• Товщина штрихів

  Визначення градієнтів

  Текст (включаючи шрифти OpenType)

  Пов'язані зображення

• Режими накладання

Крім того, Illustrator та Flash підтримують такі можливості, коли ви вставляєте графічний об'єкт.

При виділенні у графічному об'єкті Illustrator шарів верхнього рівня повністю та вставці їх у програму Flash зберігаються шари та їх властивості (видимість та блокування).

Колірні формати Illustrator, відмінні від RGB (CMYK, градації сірого та формати користувача), перетворюються програмою Flash у формат RGB. Кольори RGB вставляють звичайним чином.

Якщо імпортувати або вставляти графічний об'єкт Illustrator, можна за допомогою різних параметрів зберегти певні ефекти (наприклад, тінь, що відкидається текстом) у вигляді фільтрів Flash.

Flash зберігає маски Illustrator.

Експорт SWF-файлів із програми Illustrator

SWF-файли, що експортуються з програми Illustrator, відповідають за якістю та ступенем стиснення SWF-файлами, що експортуються з програми Flash.

При експорті можна вибрати один із численних заздалегідь заданих стилів, що забезпечують оптимальний висновок, та вказати спосіб використання кількох монтажних областей, спосіб перетворення символів, шарів, тексту та масок. Наприклад, можна вказати експорт символів Illustrator у вигляді роликів або графічних зображень, а також створення SWF-символів із шарів Illustrator.

Імпорт файлів Illustrator у програму Flash

Щоб створити повний макет у програмі Illustrator, а потім імпортувати його до програми Flash за один крок, можна зберегти графічний об'єкт у власному форматі Illustrator (AI) та імпортувати його з високою точністю у програму Flash за допомогою команд «Файл» > «Імпортувати до робочої область» або «Файл» > «Імпортувати до бібліотеки».

Якщо файл Illustrator містить кілька монтажних областей, виберіть монтажну область для імпорту у діалоговому вікні «Імпорт» Flash та вкажіть налаштування для кожного шару в цій монтажній області. Усі об'єкти у вибраній монтажній області імпортуються у Flash як єдиний шар. При імпорті іншої монтажної області з того ж файлу AI об'єкти з цієї монтажної області імпортуються до Flash як новий шар.

При імпорті графічного об'єкта Illustrator у вигляді файлів AI, EPS або PDF програма Flash зберігає ті ж самі атрибути, що й при вставці графічних об'єктів Illustrator. Крім того, якщо імпортований файл Illustrator містить шари, їх можна імпортувати одним із таких способів.

Перетворити шари Illustrator на шари Flash.

Перетворити шари Illustrator на кадри Flash.

Перетворити всі шари Illustrator на один шар Flash.

У вас є одна або дві іконки, які ви хотіли б оживити за допомогою анімації. З чого ви почали б? Допустимо, у вас є файли SVG, програми Illustrator CC та After Effects CC, але, рішення вислизає від вас.

У цій статті я маю намір продемонструвати, як легко анімувати SVG-файл, включаючи підготовку SVG-файлу в Illustrator і імпорт в After Effects CC. Також поясню, як можна конвертувати його в Shape Layers та додавати рухи. І, нарешті, поговоримо про експортування та рендеринг.

Кінцевий результат роботи.

Тепер давайте приступимо до найцікавішої частини – навчимося оживляти зображення.

Підготовка файлу SVG в Illustrator

Почнемо з відкриття SVG-файлу в Adobe Illustrator CC. Я анімуватиму маленьку автомобільну іконку, яка доступна безкоштовно на Week Of Icons.

Після відкриття файлу нам потрібно розгрупувати та розділити всі об'єкти на шари. Ви можете зробити це вручну або використати Release to Layers (Sequence)для прискорення процесу. Перш ніж імпортувати файл до After Effects, потрібно зберегти його у форматі Illustrator.

Розгрупувати об'єкти ми можемо, використовуючи Release to Layers (Sequence), щоб не витрачати дорогоцінний час.

Імпорт та організація файлу в After Effects CC

Тепер все готове для імпорту до After Effects CC. Давайте використовуємо сполучення клавіш Ctrl+I (Windows)або Command+I (Mac), щоб завантажити діалогове вікно Import File, або перейдіть до File > Import > File…Також виберіть підготовлений нами файл Illustrator CC і натисніть Import.З'явиться невелике діалогове вікно з назвою вибраного файлу. Виберіть Compositionз випадаючого списку під назвою Import Kind.

Найшвидший спосіб імпортування файлу – двічі клацнути на місце стовпця на проектній панелі.

На панелі Timeline Panel ми побачимо нову композицію. Двічі клацаємо на неї. Тепер ми повинні побачити шари Illustrator CC із помаранчевими значками ліворуч від назв.

Перш ніж приступити до справи, ми повинні перетворити всі ці верстви на Shape Layers. Нам потрібно виділити їх усі за допомогою Ctrl+A/Command+A, або вручну за допомогою Shift + Left Mouse. Після цього клацніть правою кнопкою миші на шар і виберіть Create > Create Shapes from Vector Layer.

Тепер, коли виділено нові шари, перетягніть їх на верхню частину панелі над шарами Illustrator CC, а потім видаліть шари Illustrator CC, щоб вони не заважали.

Конвертування шарів Illustrator CC у Shape Layers у програмі After Effects CC

Хоча цього немає необхідності, важливо, щоб ми дали кожному шару відповідне ім'я та/або позначили його кольором. Це дозволить нам працювати більш ефективно, оскільки ми будемо зосереджені на ключових кадрах. У наведеному нижче прикладі кольору написів більш-менш відповідають заливанню шарів, що їм відповідають.

Маркувати Shape Layers відповідними назвами, кольорами, написами та розташуванням дуже практично.

Для налаштування параметрів використовуйте клавіші Ctrl+K/Command+Kабо Composition > Composition Settings…З Composition Settings нам потрібно вибрати ширину, висоту, частоту кадрів та тривалість (Width, Height, Frame Rate, та Duration). Для цього проекту я вибрав 60 кадрів за секунду, щоб анімація була плавною.

На даний момент здається, що все готове до роботи, але є ще одна річ, яку потрібно зробити. Нам потрібно згрупувати певні шари разом, щоб їхні рухи синхронізувалися з основним шаром, який ми можемо контролювати. Цей метод називається Parenting.

Використовуйте Pick Whip, щоб призначити батьківський шар кільком шарам.

У нашому прикладі я призначив менш значущі шари (дочірні шари), такі як лобове скло, деталі кузова, дерево та мотузки первинному шару кузова (батьківському шару). Це дозволило мені контролювати положення та обертання всього автомобіля (за винятком коліс) за допомогою батьківського шару.

Створення анімації

Я хотів, щоб машина наїхала на камінь і трохи зависла у повітрі. Також я хотів, щоб ялинка рухалася вгору-вниз і відкрився багажник. Я почав зі створення каменю, машини та коліс. Потім настав час подолати найбільшу перешкоду – накласти дію на ялинку. Закінчивши це, я зайнявся дрібними деталями, такими як багажник та мотузки.

Малюнок із описом анімації

Насамперед потрібно було зробити елемент або шар у вигляді каменю, але замість того, щоб повернутися до Illustrator CC для додавання іншого шару, я просто використав інструмент Pen Tool у After Effects CC. Це дозволило мені швидко спроектувати маленький камінь.

О, могутній Pen Tool!

Багажник був відносно простим завданням. Я встановив його ззаду машини і зробив опорну точку у нижній лівій вершині. Використовуючи Pick Whip, я призначив його батьківському шару кузова. Передостаннім кроком було надання ефекту обертання, який у свою чергу зробив момент підстрибування машини більш реалістичним. Bodymovin у поєднанні з мобільною бібліотекою Lottie.

P.S.Ви можете знайти файли Illustrator CC та After Effects CC.

Набір іконок доступний для скачування безкоштовно на .

Прозорий GIF в Adobe Illustrator робиться так. Заходимо в меню File > Save for Web & Devices (Alt+Ctrl+Shift+S). У вікні Optimized file format потрібно перш за все зайти у вкладку Image size(Розмір зображення). Справа в тому, що у вікно оптимізації потрапляє за замовчуванням вся сторінка, а в цьому немає необхідності. Тому у вкладці Image Size знімаємо виділення з прапорця Clip to Artboard(Обрізати за розміром сторінки) та натискаємо кнопку Apply.

Потім у списку вибору формату вибираємо GIF та відзначаємо прапорець Transparency.

Після цього визначимо, які кольори будуть прозорими. Усі кольори, присутні у зображенні, містяться у вкладці Color Table(Таблиця кольорів) та відображаються у вигляді кольорових квадратиків. Вибираємо в панелі інструментів у лівій частині вікна інструмент Eyedropper(Піпетка).

Визначити кольори можна двома способами. Найпростіше вказати колір піпеткою безпосередньо на зображенні – після цього колір виділиться на таблиці кольорів темним обведенням. Ну а якщо ви точно знаєте, який колір повинен бути прозорим, можна виділити його прямо на таблиці кольорів, натиснувши відповідний кольоровий квадратик. І в першому та другому випадку при необхідності вибору кількох кольорів потрібно працювати з натиснутою клавішею Shift (або Ctrl). Після вибору кольору потрібно дати вказівку програмі зробити його прозорим. Для цього потрібно натиснути іконку Maps selected colors to Transparent(Додати вибрані кольори до прозорості). На малюнку ця кнопка обведена кружком, червоний колір обраний прозорим. На зображенні з'явиться прозора область, а квадратик на таблиці кольорів змінить вигляд - частина його стане білим трикутником. Щоб скасувати вибраний колір, потрібно виділити його в Color Table, а потім натиснути іконку Maps selected colors to Transparent.

Декілька слів про спосіб завдання прозорості. За нього відповідає меню, що випадає Specify Transparency Dither Algorithm, російською мовою - Алгоритм імітації прозорості (мал. внизу). Можна зробити чотири вибори: No Transparency Dither – немає алгоритму, Diffusion Transparency Dither – дифузний алгоритм, Pattern Transparency Dither – алгоритм на основі візерунка та Noise Transparency Dither – алгоритм на основі шуму. У режимі дифузного алгоритму стає активним повзунок Amount(Величина), що дозволяє змінювати значення дифузії. Що застосовувати практично? Залежно від мети та зображення. Я не користуюся цією опцією і завжди залишаю за замовчуванням – No Transparency Dither.

Натискаємо Save – прозорий GIF готовий. Робота виконувалася в Adobe Illustrator версії CS4 (v.14), але всі дії та клавіатурні скорочення є актуальними і для більш ранньої версії CS3 (v. 13).