Створення анімацій у Illustrator. Робимо GIF з прозорим фоном у Illustrator Імпорт файлів Illustrator у програму Flash

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

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

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

Мал. 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 порівнюючи її з можливостями флешу. Це буде не глобальний розбір програми з кісточок, а скоріше опис деяких цікавих фішок, які я відкрила для себе в цій програмі. Інформацію збирала по шматочках у міру вивчення, щоби викласти все в одному пості. Відразу зізнаюся, що я не супер-досвідчений користувач ілюстратора, лише останні півроку використовую його в малюванні (до цього все малювала у флеші). Багато хто нарікає, що ілюстратор складний, інтуїтивно не завжди зрозумілий. Певною мірою я згодна, що після флешу ця програма складна. Але головне не кидати, а продовжувати вивчення. І через кілька тижнів з'являється думка, як я раніше без нього обходився!

Отже, що мені сподобалося в ілюстраторі, і що я знайшла для себе такого, чого немає у флеші.
1. Почну з самого просто, але водночас потрібного. Спробуйте у флеші розташувати об'єкти по колу. Раніше був Deco Tool, але його прибрали, мабуть, вважали за непотрібне. Вирішили, що ручками це робити веселіше. В ілюстраторі ця функція є: Effect - Distort & Transform - Transform.

Все швидко і просто, значення (відстань між об'єктами, кількість копій) задаємо самі в налаштуваннях.

2. Зиг-заг

Ще більш проста, але корисна штука. Здавалося б, дрібниця, але у флеші треба малювати вручну, в ілюстраторі це секундна справа.

3. Деформація об'єктів (Warp)

Нічого подібного у флеші нема. На прикладі внизу я показала лише 2 способи деформації простих форм (Effect – Warp – Arc/Fish). Насправді їх 15 у останньої версіїпрограми.

4. Автоматичне заокруглення кутів (Round Corners)

Можна робити вручну: на графічному об'єкті при виділенні в кутку (в усіх кутах) з'являється біла крапка і знак округленої лінії. Тягнемо мишкою, регулюємо на свій смак.

Але це стосується лише форм, з олівцевою лінією трохи інакше – застосовуємо ефект заокруглення (Effect – Stylize – Round Corners). На виході отримуємо той самий результат.

5. Roughen (огрубіння)

Ефект застосовується до простим формам(Effect - Distort & Transform - Roughen). На виході отримуємо щось, що нагадує низькополігональні 3д-моделі. По-моєму, круто:) І головне дуже просто.

6. Pucker&Bloat (Втягування та Роздування)
Приклад на зображенні нижче:

7. Розширення форми (Offset Path)

У флеші є функція Expand Fill (розширення заливки), з лініями олівцями взагалі не працює, на відміну від ілюстратора.

8. Кисті (Art Brush, Pattern Brush, Scatter Brush)
Дивимося ні малюнок нижче з прикладами:

9.Texture Brush (Текстурні Щітки)

Також в ілюстраторі представлено багато текстурних пензлів, про які я писала, і про те, як вони з'явилися в нової версіїфлеша - . Було помічено, що використання кистей у Adobe Animate страшенно гальмує. Ось такі справи:(

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

10.Split to Grid

Також корисна штука – функція Split to Grid (Object-Path-Split to Grid). Дозволяє розрізати форму на рівні відрізки. Що нам це нагадує? Правильно – вікна у багатоповерхівці. Як на мене, кльова штука для малювання, наприклад, міських пейзажів;)

Ще один корисний інструмент, представлений в ілюстраторі, мабуть з часів його першого релізу. З його допомогою можна створювати, наприклад, текстури дерева:

12. Move (правою – Transform – Move)

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

В ілюстраторі дуже зручно створювати безшовні патерни (Object-Pattern-Make). Пам'ятаю, як я несамовито вигадувалась у флеші зі створенням. В ілюстраторі версії СС 2015 все автоматизовано, купа налаштувань допоможе зліпити патерн у десятках варіацій, маючи під рукою лише кілька графічних елементів. У ранніх версіях програми все доводилося робити вручну, як у флеші досі.

(На замітку – патерн можна зробити векторним редагованим об'єктом за допомогою функції розібрати (Object – Expand Appearence).

14. Object Mosaic (Мозаїка)

Створення палітри кольорів на основі наявної картинки. Імпортуємо картинку, що сподобалася, в ілл (Open), далі Object – Create Object Mosaic . У налаштуваннях вказуємо частоту поділу у висоту та ширину.

І на виході отримуємо:

15.Blend (Змішування)

Використовується для створення градієнтів. Можна створювати покрокові переходи, як, наприклад, на зображенні. Не скажу, що використовую часто, але може комусь знадобиться. Мені здається, можна використовувати для створення нескладних фонових картинок.

Також можна використовувати інструмент для клонування об'єктів. Розташовуємо два об'єкти на відстані один від одного і застосовуємо Blend Options, вибираємо кількість кроків (кількість об'єктів, що клонуються).

16. Інструмент Build Shape Tool. Дуже зручна штука для роботи із примітивами. У флеші, як мені здалося, менш зручно.

Затискаючи Alt та клацаємо по виділених сегментах – видаляємо сегменти. Якщо просто простягаємо мишкою по кількох виділених ділянках – з'єднанням.

Додаток – інструмент, який допомагає автоматично відрізати, з'єднувати тощо. виділені форми. Як на мене, він не дуже зручний, частіше користуюся Build Shape Tool.

(монтажні області)

18.Custom Tool Panel

Можливість самому створювати свою панель інструментів, відкинувши непотрібні, а вибрати ті, які використовуєш.

У флеші монтажні області, а саме сцени (Scene 1,2,3 ...) розташовані окремо і між ними потрібно перемикатися (Shift + F2). В ілюстраторі їх все можна розташувати перед очима. Зручно, коли робиш кілька варіантів того самого малюнка, щоб усі варіанти були перед очима для порівняння.

19.Ізометрія за допомогою Graphic Styles

І останнє - створення ізометрії без використання в 1 клік (а якщо точніше, в 3 кліки, тому що сторін у нас 3;) за допомогою графічних стилів (Graphic Styles). Як це робиться, розпишу наступного разу.

Спільне з флеш у ілюстратора – можливість зберігати об'єкт у символ (symbol) і так само без проблем цей символ можна перенести у флеш (відкрити у флеші.ai файл шляхом Import – Import to stage ).
Символ в ілюстраторі має такі ж властивості, як у флеші.
І на завершення напишу, що в ілюстраторі, на мою думку, поступається флешем. Так-так, і таке є. І це інструмент заливки (Paint Bucket). Як не намагаюся звикнути до неї в іллі, у флеші вона зручніша.
Якщо мої нотатки стали для вас корисними або щось від себе хочете доповнити – велкам у коментарі! Всім удачі;)

Останнім часом стала дуже популярна різноманітна анімація SVG (Scalable Vector Graphics) графіки на сайтах і додатках. Це пов'язано з тим, що все нові браузеривже підтримують цей формат. Ось інформація про підтримку браузерами SVG.

У цій статті розглянуто найпростіший прикладанімації SVG вектор за допомогою легкого Jquery плагіна Lazy Line Painter.

Для виконання та повного розуміння даного завдання бажані базові знання HTML, CSS, Jquery, але не обов'язкові якщо вам просто хочеться анімувати SVG) Приступимо!

І так кроки, які нам потрібно виконати:

1. Створити правильну файлову структуру
З цим нам допоможе сервіс Initializr, де потрібно вибрати параметри як на малюнку нижче.

• Classic H5BP (HTML5 Boiler Plate)
• No Template
• Just HTML5 Shiv
• Minified
• IE Classes
• Chrome Frame
• Потім натиснути на Download it!

2. Завантажити та підключити плагін

Так як initializr поставляється з останньою бібліотекою Jquery, з архіву який нам потрібно завантажити з репозиторію проекту Lazy Line Painter, потрібно перенести в наш проект лише 2 файли. Перший це 'jquery.lazylinepainter-1.1.min.js'(версія плагіна може відрізнятись) він знаходиться в корені отриманої папки. Другий це example/js/vendor/raphael-min.js.

Ці два файли поміщаємо в папку js. І підключаємо їх до нашого index.html перед main.js наступним чином:

3. Намалювати круту картинку в Adobe Illustrator

Для прикладу можна скористатися іконками у вкладенні.

4. Конвертувати нашу картинку в Lazy Line Converter
Просто перетягни свою іконку у віконце, що на малюнку нижче.
Товщину, колір контуру та швидкість анімації можна буде змінити в самому коді, який з'явиться після конвертування!

5. Вставити отриманий код у main.js
Тепер просто вставляємо отриманий код у порожній файл main.js
Параметри:
strokeWidth - товщина контуру
strokeColor - колір контуру
Також можна змінювати швидкість малювання кожного вектора, змінюючи значення duration (за замовчуванням 600)

6. Додати трохи CSS до смаку
Видаляємо з index.html абзац

Hello world! Це HTML5 Boilerplate.

І замість нього вставляємо блок, в якому відбуватиметься наша анімація.

потім додаємо трохи CSS у файл main.css для більш приємного оформлення:

Body ( background:#F3B71C; ) #icons ( position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; )

Збережіть усі файли.
Тепер просто відкрийте index.html в сучасному браузеріта насолоджуйтесь ефектом.

P.S. під час запуску на локальній машині можлива затримка старту анімації на кілька секунд.

Прозорий 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).

Формат файлу 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.