Створення флеш анімації уроки для чайників. Вивчаємо Macromedia Flash. Як створити анімацію з мультфільму «По той бік огорожі»

Останнім часом все частіше і частіше через сайт надходять листи з питаннями, з чого розпочати вивчення флеш. Опублікую кілька, гадаю, для багатьох початківців буде цікаво. Відповіді - виключно моє бачення і мій досвід, що зовсім не означає, що якщо ви зробите інакше, то нічого не вийде. Кому цікаво, читаємо нижче (орфографія та граматика повідомлень збережена). А якщо ви не новачок, то вам однозначно буде нудно і нудно читати це:)

« привіт)) мене звуть Nico, я з Таджикистану і ось у мене з'явилося величезне бажання стати флеш аніматором але тільки не знаю з чого почати, знайшов ваш сайт тут багато корисного але для мене початківця вони ще важкі. будь ласка, порадьте мені з чого почати навчання флеш аніматорства)) буду дуже вдячний . і як ви малюєте напишіть, варто мені купувати ваком бамбоо пен і на ньому вчитися малювати»

Ніко, у вас є головне бажання. Якщо воно не випарується за пару тижнів-місяців, то результат буде. З чого почати – із матчасті.

1. Купуйте/завантажте з мережі підручник-самовчитель з флеш. Беріть одну з останніх версій (Flash Cs4-Cs 6), забудьте про підручники з макромедії, FlashMX, це вже минуле століття в прямому розумінні. Хоча багато з тих часів не змінилося у флеші.

Якщо плануєте вивчення Action script (а для флешера знати хоча б основи as, я вважаю, просто необхідно) – зупиніться на As3. As2 потихеньку йде в минуле, крокуватимемо в ногу з часом.

Оскільки флеш я вивчала давно, то не можу радити певних видань, бо не знайома з ними.

Ви, напевно, дуже здивуєтеся, але всі книжки з вивчення флеш містять одну й ту саму інформацію:) Особливо це стосується книжок для новачків.

Дуже мені подобалися книжки How to Cheat in Adobe Flash англійською від флеш-аніматора Chris Georgenes (він пише уроки з флеш-анімації для Адоба).

Це серія книг, вони перевидаються під кожну нову версіюфлеш. Якщо знаєте англ. мова – чудова книжка, тішить око чудовою графікою.

завантажити How to Cheat in Adobe Flash in CS5разом із диском можна.

Моє вивчення флешу почалося саме з самовчителя. У вивченні флеш мені особисто допоміг не сам підручник, а відеокурс, який додавався до підручника. Тож переходимо до пункту №2.

2. Відео-уроки.

Вважаю, що відео-уроки найефективніші, оскільки сама вивчала флеш із відео-курсу.

3. Ще що у вивченні флеш-анімації не обійтися без такої програми, як Swf Decompiller. Це ламалка свф-файлів, тобто готових анімацій. Ось про неї йдеться. Вона дозволяє переглядати (не тирити:) роботи профі, дуже допомагає у вивченні флешу. Ви берете вже готову роботута переглядаєте на таймлайні, як що зроблено, намагаєтеся повторити. Не завжди коректно відображається анімація – маски, твини, але принцип можна зрозуміти та взяти на замітку.

4. Дуже ефективно вивчати флеш на конктретних прикладах. Поставте собі за мету зробити анімацію за придуманим сценарієм - наприклад, анімацію автомобіля, що їде по певній траєкторії. Коли є кінцева мета – простіше вивчати.

5. Якщо під час вивчення виникають питання, їх можна залишати тут на або в спільноті темі. Або на будь-яких інших форумах, де мешкають флешери.

Найбільший форум з флешу, який мені відомий - flasher.ru. Так що, шановні новачки – користуйтесь благами інтернету та цього ресурсу зокрема:)

6.І ще важливий момент. Для того, щоб зробити гарну анімацію– непогано б звернутися до підручників із класичної анімації (особливо, якщо хочете навчитися анімувати персонажів, а не лише текстові блокидля банерів).

Освоївши flash як інструмент, ви станете не зовсім аніматором, а скоріше "ворушником", що вміє рухати об'єкти.

Книжок з класичної анімації повно - зупиніться для початку "Таймінг в анімації", Взяти можна .

З приводу того, де дістати Adobe Flash. Якщо ви хочете щось знайти чи взяти – то краще googleнічого немає. Він все знає:)

Чи можна самостійно навчитися працювати у флеші? Це цілком реально, майже всі хороші флеш-аніматори, яких я знаю, самі вивчили флеш, без курсів та іспитів. Терпіння, працьовитість – і все у ваших руках. Навіть так скажу- я не знаю флешерів, які відвідували курси, все навчали самотужки.

«Дякую за блог, дуже багато корисного знайшла для себе.

Я чистий векторник, і у флеші мені не важко було малювати. Проблема розпочалася, коли дійшло до анімації.

Не могли б ви зробити урок для найбезмозливіших криворуких нубів)) Що б навіть я зрозуміла))»

( tara )

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

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

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

Якщо ви шукаєте прості та зрозумілі уроки, ця збірка для вас. Вона включає 33 уроки, кожен із яких передбачає створення анімації різної складності та типу. Ви створите відомих персонажів, різноманітні предмети, використовуючи фішки програми та різні напрямки дизайну. Після проходження курсу у вас буде багато різноманітних робіт, які можна додати в портфоліо, що особливо важливо, якщо ви хочете займатися комерційною анімацією і зробити це своєю роботою.

Крім того, на основі отриманих знань ви зможете надалі розвивати свої навички, адже курси передбачають знайомство з основними інструментами Adobe After Effects, а також закріплення здобутих навичок. Погодьтеся, чудовий «фундамент» для розкриття своїх талантів та подальшого саморозвитку.

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

Дивіться також:

• Як створити анімацію лицаря?
• Як створити анімацію собаки?
• Розбираємо домашнє завдання.
• Як створити анімацію риби?
• Як створити анімацію свічок?
• Як анімувати літачок?
• Як анімувати тачку?
• Як створити анімацію з НЛО?

Як створити анімацію Ріка та Морті?

Програма Adobe After Effects – чудовий інструмент для тих, кого цікавить моушн та анімація. Її можливості безмежні і допомагають створювати масу креативних гіфок будь-якої складності. Приєднавшись до курсу, ви з першого ж уроку дізнаєтесь, як навчитися працювати у програмі Adobe After Effects CC 2017.

У першому уроці автор покаже та розповість, як створити анімаційних персонажів Ріка та Морті, на основі нескладної ілюстрації з Мережі. Можна знайти таку саму, або накидати свою. З першого уроку ви також дізнаєтеся, як налаштувати робочу область під себе, які інструменти вам знадобляться на початковому етапі, як створювати новий проект, відкривати файли, імпортувати їх із Photoshop та багато іншого.

Як створити анімацію із псевдо-3D поворотом?

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

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

Завдяки уроку ви дізнаєтеся про новий підхід до анімації, зможете створювати оригінальні гіфки, у тому числі для комерційних проектів.

Створення анімації робота, що завис.

Відмінний урок для новачків, який також буде корисним і досвідченим користувачам. Особливість інструкції у створенні анімації повністю з нуля, що є особливо актуальним для людей, які вперше бачать програму Adobe After Effects, але хочуть навчитися анімації. Як і в попередніх уроках, працюємо в Adobe After Effects CC 2017, розбираємо ілюстрацію на шари, які потім анімуватимемо.

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

Як створити анімацію чайного пакетика?

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

Детально він зупинитися на віконці «Project», як його налаштувати, що означає кожен пункт. Ви навчитеся створювати новий проект із нуля, налаштовувати його. На яких пунктах необхідно зупинитись, які настройки важливі.

Що таке Preset і який з них вибрати? Також дивимося параметри Duration і як їх вираховувати. Що таке 25 кадрів за секунду? Чому це важливо і в чому секрет плавної анімації. За основу беремо малюнки із Мережі.

Як створити анімацію лицаря?

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

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

Як створити анімацію ноутбука, що вилітає?

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

Ви дізнаєтеся, в чому різниця між ними і чому варто зупинитися на варіанті «Композиція» (необхідно, щоб шари були розділені для зручності редагування). Автор також розкриє інші фішки, і покаже, як створювати анімацію «літаючих» предметів. Відмінний варіант для комерційного проекту, або як проект для портфоліо .

Як створити анімацію з кроликом на хмарі?

Малюємо милу анімацію – кролика на хмарі. Крім повноцінної покрокової інструкціїз розбором параметрів, нюансів та фішок програми ви також дізнаєтеся, чому краще використовувати англомовну версію програми. Більше того, спікер розповість, у чому відмінність англомовної та російськомовної версії, і чому професіонали встановлюють саме перший варіант.

Ви також дізнаєтеся, на які вікна в першу чергу звернути увагу на те, що таке Project і для чого він потрібен. Автор покаже та розповість, що таке підменю і що до нього входить. Детально поговоримо про композицію, створення нового проекту, імпортування файлів та особливостей процесу. Також ви дізнаєтесь, де шукати нещодавно відкриті файли. Урок навчить заощаджувати час під час роботи, оптимізувати процес та інші лайфхаки. Також автор розповість про прихованих можливостяхпрограми.

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

Як створити анімацію пінгвіна?

Приділяємо особливу увагу підготовчій роботі, знайомимося з панеллю інструменту ще детальніше (як продовження/доповнення попереднього уроку). Малюємо в програмі малюнок для майбутньої анімації. У процес навчання використовуємо як простий інструментарій, і складніший.

Закріплюємо навички та будуємо основну анімацію за допомогою простих геометричних фігур. Ви також дізнаєтесь, як малювати, додавати деталі, створювати анімовані елементи за допомогою таймлайну. Зупиняємося докладніше на таймлайні – що це таке, як збільшити, налаштувати та інше. Обговорюємо шари, їх властивості (можна приховувати, залишати, блокувати), перейменування шару.

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

Як створити анімацію погодного перемикача?

Основна увага приділяється можливостям гарячим клавішам. Малюємо у програмі складніші – багатокутні – фігури та елементи. Знайомимося із суміжними техніками, використовуємо інструмент «Сітка», знайомимося з її функціями. Автор покаже, де шукати цей інструмент, працює із заливкою, створює додаткові елементи, які ми використовуватимемо в анімації.

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

На основі отриманих навичок ви зможете створювати ще складнішу анімацію на основі схожої техніки, ніж суттєво розширите свої можливості.

Як створити анімацію із персонажами Gravity Falls?

Дуже крутий урок, присвячений дуже популярним персонажам мультфільму Gravity Falls – Мейбл та Діпперу Пайнс. Особливість уроку полягає в тому, що нам необхідно анімувати лише окремі, невеликі елементи малюнка. Як основа можна взяти власне зображення або підібрати джерело з Мережі.

Створюємо pre-compose. Використовуємо точки та налаштовуємо їх, щоб зафіксувати певні елементикартинки і завдяки цьому зробити частину малюнка нерухомою. Додаємо анімацію на таймлайн. Змінюйте налаштування, щоб отримати необхідний ефект анімації.

Розглядаємо такі поняття як енергія та плавність руху, виставляємо правильний показник Frame Rate, щоб зробити картинку плавною. Автор розповість, чому це важливо, а також який Frame Rate використовували у сучасних іграх, класичній мультиплікації Діснея та в кіно.

Як створити космічну анімацію в Adobe After Effects?

Урок за рівнем трохи складніший порівняно з іншими, і не менш цікавий! Цього разу вам доведеться працювати не просто з анімацією, а навчитися пожвавлювати напис. В уроці ви створюватимете анімаційний ефект як елемент напису на основі фону з мережі.

Можна вибрати будь-який «космічний» фон із зірками, потім створюємо на ньому напис, який анімуємо, причому в рух необхідно навести не все слово, а лише деякі літери. За результатами у вас буде незвичайна і дуже креативна робота, яку можна додати в портфоліо.

Як створити анімацію собаки?

Перетворюємо на анімацію векторне зображення собаки, попередньо знайдене в Мережі. Для реалізації уроку можна використовувати власні малюнки. Автор докладно описує основні інструменти та робочі області програми, зупиняючись на кожному пункті. Завдяки цьому ви дізнаєтесь про особливості інструментарію.

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

Розбираємо домашнє завдання.

Урок буде корисним тим, хто хоче оцінити домашнє завдання інших учасників у рамках курсу, дізнатися щось нове, повчитися на помилках та прикладах робіт. Автор курсу розбирає роботи ділянок курсу, вказуючи на неточності, недоліки та помилки.

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

Як створити анімацію дитячого квіткового горщика?

Анімуємо милу та досить просту ілюстрацію. Можна попередньо намалювати малюнок в Abode Illustrator або створити малюнок у вікні Adobe After Effects. За основу беремо будь-який малюнок – свій чи з Мережі, обравши одне чи кілька джерел.

Завдяки уроку ми навчимося анімувати не лише окремі деталі малюнка, а й додаткові елементи, наприклад, пориви вітру, що додасть анімації незвичайності та «свіжості». Надалі подібну фішку можна застосовувати у найрізноманітніших проектах.

Як створити анімацію з морфінгом?

Мета уроку – познайомити учнів із таким ефектом як морфінг, показати приклади, і навіть навчитися реалізовувати подібний ефект у роботі. Якщо коротко, то морфінг називають технологію в анімації або візуальний ефект перетворення одного об'єкта в інший.

Необхідно, щоб об'єкт трансформувався плавно, не «різав» очей, виглядав стильно та цікаво. Подібну фішку надалі можна використовувати у телевізійному кіно чи ігрових фільмах, а також у рекламних роликах для ТБ. Морфінг часто використовують у кіно про супергероїв або у фантастичних стрічках. Автор покаже, як створювати таку візуалізацію з урахуванням нескладних об'єктів.

Як створити анімацію з маяком?

Працюємо з малюнком, створеним у Adobe After Effects. За основу беремо власні ідеї чи референси. Також можна намалювати малюнок в Ілюстраторі, а потім імпортувати його в нашу програму. Створюємо проект із кількома елементами анімації.

Основним елементом є маяк, що освітлює берег за допомогою лампи, що рухається по колу. Другим елементом анімації виступають мерехтливі зірки. Автор також розповість, що таке ключі та як їх використовувати при створенні анімації, щоб отримати саме той ефект, який потрібний. Паралельно він дає різні поради, розповідає про практику, ділитися фішками.

Як створити анімацію риби?

Урок присвячений двом важливим темам – використанню пера та анімації такого об'єкту як риба. Об'єкт обраний не дарма: риба рухаються плавно, акуратно рухаючи тіло та плавцями. Саме це потрібно передати в уроці. Урок також дозволить нам удосконалити та закріпити навичку використання пера завдяки зображенню об'єкта прямо у вікні Adobe After Effects.

Як створити анімацію на тему регбі?

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

Автор показує, як створити анімацію з нуля, а також розповість про базові основи – інструменти. Для анімації використовуємо готову ілюстрацію, можна створити її з нуля або знайти референси в інтернеті, змалювати в Ілюстраторі. Також необхідно розбити ілюстрацію на шари, щоб із кожним із них можна було працювати окремо.

Як створити анімацію кота-кухаря?

Милі анімації на основі малюнка. Можна використовувати власну ілюстрацію або референси з мережі. Також можна створити основу або After Effects. Урок присвячений поетапному створенню анімації кота-кухаря. Також автор докладно розбирає таймлайн, пояснюючи кожну функцію та можливість. Наприклад, ви дізнаєтесь, як змінити розмір лінії, що таке прозорість шару та інші фішки.

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

Як створити анімацію з мультфільму «По той бік огорожі»?

Цього разу основою нашої анімації стануть герої досить відомого мультсеріалу «По той бік огорожі». Як основу використовуємо гіфку з Мережі. Урок спрямований на те, щоб закріпити навички, здобуті у попередніх уроках, а також отримати нові теоретичні знання. Особлива увага приділяється таймлайну та використанню ключів. Крім того, ми активно використовуємо таке поняття як швидкість руху, налаштовуємо її та змінюємо в міру необхідності.

Ми опрацюємо анімацію фону, параметри позиції. Автор також розповість чим відрізняється досвідчений майстер від новачка, детально розбирає анімацію, взяту за основу. Ви також дізнаєтеся, як домалювати елементи гіфки, як переводити в шейпи, контури, що таке маска, як намалювати її, і навіщо вона потрібна. Як виправити помилки та недоліки.

Як створити анімацію з бургером та японськими паличками?

Урізноманітнимо наше портфоліо оригінальною роботою. Цього разу рухаємо бургер і японські палички для їжі. Малюнок створюємо одразу ж у вікні програмі. Він досить простий, тому підготовка не займе багато часу. Після – приступаємо до анімації. Створюємо новий проект, налаштовуємо його з урахуванням особливостей опцій. Змінюємо фон за бажанням.

Активно використовуємо гарячі клавіші, настроюємо позицію, можемо міняти Frame Rate. Автор детальніше розповідає про таке поняття, як шейпи. Що це таке, як їх створювати та використовувати. Огляд інструментів виділення, ключики, ретельне опрацювання руху об'єктів. Крім того, ви дізнаєтеся, чому краще використовувати англомовну програму.

Як створити анімацію зляканого рулону?

Сьогодні створюємо кумедну анімацію зі зляканим рулоном. Незвичайна робота з вау-ефектом, яка сподобається і професіоналу, і новачкові, особливо якщо ви працюєте над портфоліо і хочете додати щось дуже оригінальне. У основі анімації – циклічний рух, тобто повторення низки поєднань рухів. Працюємо із заготовленими малюнками в Abode Illustrator.

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

Як створити анімацію свічок?

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

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

Як створити анімацію псевдо-3D midi-клавіатури у After Effects?

Темою для уроку стала цікава комп'ютерна технологія, яку називають псевдотривимірністю. Псевдо 3 D - це графіка, за рахунок якої намагаються імітувати тривимірний ігровий простір, однак він не є таким. Подібний ефект часто використовують у комп'ютерних іграх. Одним із прикладів такого підходу можна назвати відому гру Doom.

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

Як створити анімацію космонавта?

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

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

Як створити анімацію саксофоніста?

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

Малюємо в Abode After Effects, створюючи безліч шарів. Завдяки цьому нам буде легше анімувати колаж. Можна також використовувати файли Photoshop. Все це та багато іншого наочно показує автор курсу. Також він паралельно відповідає на запитання слухачів курсу.

Як створити анімацію з мишею та холодильником?

«Як у холодильнику миша повісилася» – створюємо складну анімацію з характерною мишкою, що бовтається, і холодильником, що розкривається, на основі векторної графіки. Працюємо з простором, малюємо додаткові елементи (холодильник, підлогу, стіни). Можна додати більше деталізації або залишити, як у прикладі.

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

Як створити анімацію з медузами?

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

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

Як анімувати літачок?

Починаємо із огляду базових речей – опрацьовуємо основні інструменти, створення нового проекту (нового документа), робочих вікон. Малюємо основу з нуля у програмі. Також можна використовувати Ілюстратор, а потім імпортувати його до After Effects. Налаштовуємо новий документ та починаємо малювати, щоб потім анімувати зображення.

Особливу увагу приділяємо плавності руху гіфки, налаштовуємо параметри Rate, що дозволяють досягти необхідного ефекту. Сьогодні працюємо з 14 кадрами на секунду, за аналогією з фільмами. Дивимося на результат, виправляємо недоліки, вносимо коригування в проект. Також працюємо з траєкторією польоту, з об'єктами, що виходять за межі аркуша. Використовуємо перо та інші інструменти.

Як анімувати тачку?

Як основу для анімації вибираємо складний елемент - автомобіль. Використовуємо об'ємне зображення з тонами і напівтонами, яке потім будемо рухатись. Малюнок можна створити в Ілюстраторі або прямо у вікні After Effects. За основу беремо будь-який малюнок чи фотографію з Мережі. Також у процесі нам знадобиться кілька текстур, наприклад, скло та патерн.

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

Як створити анімацію із ізометрією?

Ізометрія – оригінальна техніка, на основі якої можна створювати не лише ілюстрації, а й анімацію. Саме останнім ви й візьметеся, навчившись створювати за допомогою цієї техніки елементи банківської сфери (пластикова карта та монети).

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

Як створити анімацію безсоромного кота?

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

Як створити анімацію з НЛО?

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

Також ми налаштовуємо композицію, малюємо у програмі, використовуючи перо та інший інструментарій, встановлюємо різні ефекти в анімації. Після всього курсу Abode After Effects у вашому портфоліо буде 30+ повноцінних прикладів роботи, анімація з НЛО – одна з них.

Adobe Flash Professional – велика багатофункціональна програма, складна у вивченні та застосуванні.

Adobe за своєю незмінною звичкою мало піклується про те, щоб спростити свої програми. Якщо інші програмісти заради простоти відкидають усі проміжні варіанти, то Adobe не пропадає нічого. Усі проміжні варіанти роботи над програмою будуть включені в остаточний варіант у вигляді якоїсь кнопочки, панелі або рядка в меню. Як результат – вага програм (у Мб) розростається і програма стає переускладненою. Крім того, багато інструментів повністю або частково дублюють один одного.

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

Автори Adobe Flash Professional дещо спростили останні версії програми - ліквідовано такі функції якстворення класичної анімації руху , немає Редактора руху, використовується лише одна мова програмування ActionScript 3.0 та ін.

У меню Правка (Edit) виберіть Установки - Preferences (Windows) або Flash > Preferences (Mac OS).
З багатьох налаштувань Ви можете вимкнути екран "Ласкаво просимо" (Welcome Screen) - No Document.
У останніх версіяхпрограми можна вибрати колір вікна програми (вкладка "Загальні" - Інтерфейс користувача - Темний, світлий).
Можна змінити кількість можливих скасування операцій ("Скасувати" - Undo) - за замовчуванням 100.
Flash підтримує до 9999 скасування, але не потрібно вибирати максимум, т.к. це загальмує роботу програми.

Highlight colors (Колір підсвічування) - Ви можете змінити кольори за замовчуванням, які використовуються для відображених прямокутників, що обмежують малюнок об'єктів, груп або символів.

Та інше.

Створення нового документа

Ви можете створити та відкрити документи, використовуючи екран "Ласкаво просимо" (Welcome Screen) або меню Файл (File).
Екран "Ласкаво просимо" - стартовий майданчик для створення та відкриття файлів, включаючи вбудовані типові шаблони мультиплікації Flash, банерів, анімації мобільних телефонів.

У стовпці Create New вікна "Ласкаво просимо" виберіть ActionScript 3.0.

Або: у меню Файл (File) виберіть Створити (New).
Відкриється вікно "Створити документ" (New Document).

На вкладці Загальні виберіть тип файлу Flash, що створюється (ActionScript 2.0 або 3.0).
За замовчуванням вибрано мову ActionScript 2.0, але можна вибрати і ActionScript 3.0. Застосування ActionScript 3.0 дозволяє використовувати всі функції останніх версій (CS5 і CS6). Наприклад, якщо Ви бажаєте застосувати 3D- обертання до об'єктів при створенні мультиплікації, потрібно вибирати ActionScript 3.0 (ActionScript 2.0 цю функцію не підтримує).
ActionScript 3.0 також вимагає, щоб відвідувачі стояли останні версії програвача Flash.

Примітки:
В останніх версіях програми
1. Застосування ActionScript 2.0 не передбачено.
2. Є можливість створення анімації у форматі HTML5.

На вкладці Створити за шаблономВи можете вибрати шаблон, щоб відкрити його для редагування.

Ви можете завжди змінити властивості свого проекту - в меню Модифікація (Modify) виберіть Документ (Document) або використовуйте комбінацію клавіш Ctrl+J (Windows) або Command+J (Mac OS).

У розділі Dimensions (Розміри) встановити ширину та висоту Вашого кіно в пікселях.
У розділі Ruler units встановлюються одиниці вимірювання лінійки – сантиметри. мм, пікселі та ін. Зазвичай одиниця виміру лінійок - пікселі.
У розділі Background Color вибирається колір мультиплікаційного фону.
У розділі Frame rate встановлюється швидкість – кадри за секунду. Зазвичай приймають швидкість за замовчуванням – 24 кадри на секунду.
Опція Auto-Save – встановлення періодичності автозбереження Вашої роботи.
Опція Printer змушує новий документ відповідати формату паперу Вашого принтера.

Збереження документа

Ваш новий документ повинен бути збережений перш ніж розпочати будь-яку роботу або додати будь-який зміст.

За промовчанням документи зберігаються у форматі Flash CS6 - .fla
1 У меню Файл виберіть Зберегти.
2 Виберіть папку, щоб зберегти проект. дайте проекту свою назву.
Завжди вмикайте розширення.fla наприкінці назви проекту.

Примітка: Ви можете зберегти проект у форматі Flash CS5 (в останніх версіях цієї програми немає).
Документи, створені у Flash CS6, не будуть відкриватися у Flash CS5 або попередніх версіях.
Документи, створені у Flash CS5 і раніше, будуть відкриватися у Flash CS6.

Відкриття документа

Виберіть Файл (File) > Відкрити (Open)
Команда File > Open Recent – ​​для відкриття останніх 10 файлів.
Для відкриття документів можна також використовувати екран Ласкаво просимо.

При інсталяції на комп'ютер Adobe Flash Professional одночасно буде встановлений і файловий менеджер Adobe Bridge , який можна використовувати під час роботи з файлами.
У меню Файл виберіть Перегляд до Bridge або Перейти до програми Bridge (Browse in Bridge).
Виберіть файл формату .fla в Adobe Bridge. При подвійному клацанні файлу він відкривається в Adobe Flash.

Налаштування інтерфейсу
За необхідності налаштуйте робочий простір -

Створення мультиплікації

Шаблони
Adobe Flash містить багато типових шаблонів.
У шаблонах заздалегідь встановлені розміри та версія ActionScript.
Виберіть File > New та натисніть на вкладку Templates (Шаблони).
Розгляньте включені flash-шаблони.

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

В Adobe Flash існує кілька режимів малювання, робота в яких має свої відмінності - див.

Ознайомтеся з набором інструментів для малювання, які має Adobe Flash - див. Панель інструментів .
Не представляє особливих труднощів створити такі прості об'єкти, як прямокутник (квадрат), еліпс (коло), лінію.
Для створення більш складних об'єктів доведеться ознайомитися з усією функціональністю програми в області малювання – див. Малювання.

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

Створення простої мультиплікації

В Adobe Flash існує два основних способи створення мультиплікації - покадрова мультиплікація та мультиплікація плавних змін (tweens). У свою чергу мультиплікація tweens має кілька різновидів.

За будь-якого способу створення мультиплікації Вам потрібно вивчити роботу
Часової шкали (Графіка часу). Якщо Ви розберетеся з роботою Часової шкали – вважайте, що половина справи з вивчення програми зроблено.
Особливо слід звернути увагу на роботу з шарамиі на роботу з кадрами .

Освоївши все перераховане вище, Ви вже зможете створювати Flash-елементи (наприклад - банери. слайди та ін.) для вставки на свої html-сторінки.

Ви можете створити всі елементи для мультиплікації в Adobe Flash Professional. Або Ви можете імпортувати елементи, створені в Adobe Illustrator, Adobe Photoshop, Adobe After Effects та ін. програмах.

Інша половина успіху при освоєнні Adobe Flash Professional – вивчити мову ActionScript 3.0. У цьому випадку Ви зможете використати всю функціональність програми, у тому числі створювати інтерактивні Flash-сайти.
Як неповноцінна альтернатива - використання уривків коду, які йдуть із програмою (меню Вікно (Windows) - Фрагменти коду).

Цей огляд не містить навчальних матеріалів ActionScript, але такі матеріали є в Інтернеті.


Управління Flash - мультиплікацією

Якщо Ви хочете створювати щось складніше, ніж прості анімовані банери або слайди, Вам знадобиться:
а. Навчитися створювати кнопки
б. Навчитися використовувати код ActionScript.

Кнопки (графічні або текстові) потрібні, щоб відвідувач Вашого сайту міг керувати мультиплікацією – див. Кнопки .

Анімація в Adobe Flash створюється за допомогою ActionScript. Більш ранні версії програми використовували ActionScript 2.0, в останніх версіях використовується ActionScript 3.0. Ці версії мають серйозні відмінності та частково сумісні.

Вам не доведеться під час створення flash-анімації вручну писати код, т.к. в Adobe Flash основна робота ведеться у візуальному режимі. Однак у деяких випадках потрібна вставка ActionScript. При цьому можна використовувати уривки коду, які йдуть із програмою, або писати код самостійно.

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

Для короткого знайомства з ActionScript див. ActionScript.

Створення flash- сайту

Попередній перегляд

Місцевий перегляд

Ви можете швидко анонсувати свою мультиплікацію, пересуваючи червоний движок (playhead) туди-сюди на Шкалі кадрів (див. Тимчасова шкала).

Щоб переглянути, як мультплікація буде виглядати в Інтернеті (тобто з усіма вкладеними мультиплікаціями), виберіть меню Керування (Control) > Тестувати ролик(Test Movie) > Flash Professional (in Flash Professional).
При цьому створена мультиплікація проглядається у вбудованому плеєрі Flash (Flash Player).

Для тестування Flash для мобільних телефонів використовуйте меню Керування (Control) > Тестувати ролик( Test Movie ) > in Device Central .

Публікація

При публікації редактор створює файли HTML, файл SWF та інші файли, необхідні для нормальної роботи Flash.
Для налаштування публікації в меню Файл (File) виберіть Параметри публікації(Publish Settings).
Щоб опублікувати меню Файл (File), виберіть Опублікувати .

Додатково.

Призначення та структура програми Flash

Останнім часом програма Flash стала модною. Багато хто вважає, що Flash – це новий продукт, проте це не так. Ще 1995 року з'явилася невелика програма Future Splash Animator для векторної анімації Web-графіки, а через два роки, в 1997 році, компанія Macromedia придбала її і почала розвивати продукт під новою назвою Flash.

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

Основні елементи робочого середовища Flash

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

При першому запуску програми ви побачите приблизно таке зображення, як показано на рис. 1.

Рис. 1. Основні елементи інтерфейсу програми Flash 5.0

Кожному знову відкритому файлувідповідає свій робочий стіл. На робочому столі знаходиться кадр, або сцена (Stage) - прямокутна область на екрані, в якій відтворюється Flash-фільм.

Для малювання робочому столі призначені інструменти малювання (див. панель інструментів на рис. 1). Саме про них ми й поговоримо насамперед.

Створення будь-якої анімації починається з відтворення статичних зображень. Швидка зміна одного зображення іншим, у результаті якої створюється враження руху зображення, і є анімація. Для контролю тривалості показу зображень (керування анімацією) служить часова шкала, або монтажна лінійка (Timeline).

На рис. 1 представлені також плаваючі панелі (floating, dockable panels) панелі, призначені для налаштування робочого середовища Flash. Отже, розглянемо основні інструменти малювання у Flash.

Малювання

Контур, обведення, заливання

Перш ніж ви почнете працювати з інструментами малювання, слід ввести поняття контуру, обведення та заливання. Розглянемо їх у простому прикладі.

Виберіть інструмент редагування Oval на панелі інструментів (мал. 2) і намалюйте овал. Фігура автоматично буде залита кольором. (Якщо при малюванні овалу утримувати клавішу Shift, то фігура, що малюється, матиме форму кола.)

Рис. 2. Малюнок складається з контуру, обведення контуру та заливки

Малюнок складається з контуру, обведення контуру та заливки (рис. 2). Щоб виділити контур фігури, клацніть мишею по кнопці, показаної на рис. 3 червоні стрілки. В результаті лінія обведення та заливання пропадуть, залишиться лише контур - (рис. 4).

Рис. 3. Кнопка видалення заливки та обведення

Рис. 4. Видаливши заливку та обведення, отримуємо контурну лінію

службова лінія (що не відображається під час друку). Повторне натискання кнопки на рис. 3 повертає віддалені елементи. Колір обведення контуру та заливки легко поміняти. Колір заливки змінюється за допомогою кнопки вибору заливки Fill color (рис. 5). Після того як ви виберете в палітрі (мал. 5) новий колір, намальована фігура не зміниться, але при малюванні нового еліпса контур буде заливатись щойно вибраним кольором.

Рис. 5. Інструменти вибору кольору для заливки та лінії обведення

Для того щоб змінити колір заливки в поточній фігурі, необхідно вибрати новий колір і скористатися інструментом Paint Bucket (Ківш заливки) - виділено на рис. 6.

Рис. 6. Колір заливки в намальованій фігурі можна змінити за допомогою інструмента Paint Bucket

Колір обведення теж можна змінити. Для цього необхідно вибрати інструмент Stroke color (Зміна кольору обведення) – на рис. 7 на нього вказує червона стрілка. Після цього відкриється палітра, в якій можна вибрати необхідний колір, потім вибрати інструмент Ink Bottle Tool (він виділений на мал. 7) і клацнути ним по лінії обведення. В результаті вона заллється вибраним кольором.

Рис. 7. Зміна кольору лінії обведення

На рис. 6 намальований нами овал показаний у більшому масштабі. Зміна масштабу, до речі, задається так само, як і в Photoshop, шляхом використання комбінації клавіш Ctrl і «+» або Ctrl і «-».

Товщину та стиль ліній обведення також можна змінювати. Для цього необхідно за командою Window > Panels > Strokeвикликати панель Stroke. У ній можна налаштувати стиль лінії обведення, її товщину та колір (рис. 8).

Рис. 8. З меню панелі Stroke можна змінити параметри лінії обведення

Якщо вибрати стиль лінії Hardline (рис. 8) і застосувати інструмент Ink Bottle Tool, отримаємо лінію в один піксел. Лінія Hardline немає товщини, у віконці товщини ліній значення не з'являється. Товщину інших ліній, наприклад, пунктирної лінії, можна змінювати (рис. 9).

Рис. 9. Приклад зміни типу та товщини лінії обведення

Більш тонка настройка параметрів лінії здійснюється на панелі Line Style (Стиль лінії). Викликати її можна натиснувши кнопку, вказану червоною стрілкою на рис. 10. У панелі Line Style можна, наприклад, змінити довжину штриха та відстань між штрихами пунктирної лінії. Якщо на рис. 8 були прийняті значення за замовчуванням - 6 пунктів для штриха та відстані між штрихами, то, обравши відповідно значення 10 і 12 пунктів і знову застосувавши інструмент Ink Bottle Tool, можна отримати обведення, як на рис. 10.

Рис. 10. Тонка настройка параметрів лінії

Отже, ми розглянули основні поняття – контур, заливка та лінія обведення – на прикладі малювання овалу. Тепер поговоримо безпосередньо про інструменти малювання.

Інструмент Rectangle

Інструмент Rectangle (Прямокутник) розташований поруч із інструментом Oval (рис. 11).

Крім традиційного прямокутника можна малювати прямокутники із округленими краями. Щоб задати такий режим, виберіть іконку, на яку на мал. 11 вказує червона стрілка. В результаті з'явиться панель Rectangle Settings, де ви визначаєте радіус заокруглення, після чого при малюванні прямокутника кути будуть округлятися. Редагування заливки та обведення контуру прямокутника здійснюється так само, як і у випадку з овалом.

Рис. 11. Робота з інструментом Rectangle

Інструмент Line

Інструмент Line (Лінія) дозволяє проводити прямі лінії (рис. 12). Утримуючи клавішу Shift, можна проводити вертикальні, горизонтальні лінії або лінії під кутом 45°.

Рис. 12. Робота з інструментом Line

У ряді випадків, якщо вам, наприклад, необхідно намалювати рівнобедрений трикутник, корисно скористатися сіткою. Зробити видимими лінії сітки можна за командою View > Grid > Show Grid(Рис. 13).

Рис. 13. При малюванні правильних геометричних фігур можна скористатися сіткою

Інструмент Pencil

Рис. 14. Результат роботи з інструментом Pencil при різних налаштуваннях (верхній ряд трикутників – режим Straighten, нижній – Ink)

Інструмент Pencil (Олівець) розташований під інструментом Oval. На рис. 14 показаний результат роботи з олівцем при різних варіантах налаштування, яких всього пропонується три. При варіанті налаштування Straighten інструмент перетворює тремтливі лінії контуру, проведеного від руки, у прямі, при варіанті налаштування Smooth - згладжує лінії, а в режимі Ink практично не змінює вихідний контур.

Редагування ліній, інструменти Arrow та Subselect

Щоб розповісти про те, як функціонує інструмент Arrow, слід детальніше розглянути структуру контурної лінії.

Проведемо лінію за допомогою інструменту Pencil, як показано на рис. 15. Вона складається з контуру та обведення лінії.

Рис. 15. За допомогою інструмента Subselect можна виділити опорні точки та сегменти контурної лінії

Рис. 16. Приклад переміщення кутової точки

Рис. 17. Приклад зміни кривизни контуру

Рис. 18. Лінія обведення слідує за лінією контуру

Досі, говорячи про контур, ми не згадували про його структуру. Щоб пояснити структуру контурної лінії, скористаємося інструментом Subselect (Часткове виділення), активізованому на рис. 15, і натисніть їм по контуру лінії. В результаті ми побачимо, що контурна лінія складається із сегментів та опорних точок (рис. 15). При використанні інструменту Pencil сегменти та опорні точки створюються автоматично. Коли редагуємо лінію контуру, автоматично змінюється лінія обведення. Покажемо, як можна редагувати лінію контуру за допомогою інструмента Arrow (Стрілка) – він виділений на рис. 16.

Опорні точки бувають кутові та гладкі. Коли ми підводимо інструмент Arrow до лінії, його вигляд змінюється. При наближенні його до кутової точки поруч із зображенням стрілочки з'явиться кут - у цьому режимі можна переміщувати кутові точки (рис. 16), а при наближенні до сегмента або до гладкої точки - зображення дуги - у цьому режимі можна змінювати кривизну контуру (рис. 17) ). При зміні контурної лінії лінія обведення слідує за лінією контуру (рис. 18).

Намалюйте еліпс і за допомогою інструменту Arrow виділіть його заливку одним клацанням миші (колір виділеної заливки буде освітлений білими точками) і перемістіть її в режимі drag-and-drop, як показано на рис. 19. Якщо ви використовуєте подвійне клацання, то виділятиметься також прилегла до заливки лінія обведення. Подвійне клацання дозволяє також виділяти лінії, що перетинаються.

Рис. 19. Приклад переміщення виділеного об'єкта інструментом Arrow

Рис. 20. Вихідне зображення

Розглянемо інші види модифікації виділеного зображення. Намалюйте за допомогою інструменту Pencil певний контур, наприклад, листок (рис. 20). Виберіть інструмент Arrow та виділіть намальований листок у прямокутну рамку. Тепер можна обробляти виділений об'єкт доступними модифікаторами.

На панелі Options виберіть кнопку Smooth і клацніть на ній кілька разів - контур листка набуде більш плавних контурів (рис. 21а).

Рис. 21. Використання модифікаторів з панелі Options: а) Smooth дозволяє згладити контури зображення; б) Strighten дає можливість спрямувати контури зображення

Зміни контуру після кількох клацань по кнопці Strighten показано на рис. 21б.

Використовуючи інструмент Lasso, можна виділити ділянку довільної форми (рис. 22).

Рис. 22. Приклад виділення за допомогою інструменту Lasso

Інструмент Brush

Рис. 23. Приклад роботи з інструментом Brush

Інструмент Brush (Пензель) створює векторний контур та його заливку вибраним кольором, але, на відміну від розглянутих раніше інструментів, не утворює лінію обведення (рис. 23). Щоб зрозуміти, який контур створює інструмент Brush, подивіться на рис. 24, де використано інструмент Subselect.

Рис. 24. Приклад контурної лінії, створеної інструментом Brush

Рис. 25. Варіанти налаштування інструменту Brush

На панелі Options передбачено три варіанти налаштування інструменту Brush: режими (верхня кнопка), розміри пензля (середня кнопка) та форма пензля (нижня кнопка) (мал. 25).

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

Paint Normal зафарбовуються простір кадру лінія обведення та заливання об'єкта, що зафарбовується;

Paint Fills ¦ зафарбовується простір кадру і заливка об'єкта, що зафарбовується. Лінія обведення не зафарбовується;

Paint Behind зафарбовується тільки вільний простір кадру;

Paint Selection зафарбовується тільки виділена область;

Paint Inside ¦ зафарбовується тільки заливка, з якої було розпочато зафарбовування.

Рис. 26. Різні режими взаємодії мазків пензля з намальованим раніше об'єктом

Слід пояснити дію параметра Lock Fill (Блокування заливки) - кнопка з піктограмою замка, що відповідає даній команді, показана натиснутою на рис. 27.

Рис. 27. Приклад дії параметра Lock Fill

Коли параметр Lock Fill активізовано (кнопка натиснута), градієнт відноситься до всього робочого поля (рис. 27), а коли не активізовано - перехід від одного кольору до іншого здійснюється на базі мазка пензля (рис. 28).

Рис. 28. Параметр Lock Fill не активовано

Ластик

Гумка дозволяє прати лінії і заливку і має ряд різних налаштувань. У панелі Options можна налаштувати розмір і форму гумки, а також вибрати режим стирання (мал. 29):

Erase Normal стирається лінія обведення та заливка об'єкта;

Erase Fills стирається заливка об'єкта (лінія обведення не стирається);

Erase Lines стираються тільки лінії;

Erase Selected Fills стирається лише виділена область.

Erase Inside стирається тільки заливка, причому при проведенні гумкою лінії стирання проводиться тільки всередині контуру, в якому була розпочата лінія.

Модифікатор Faucet (Кран) дозволяє повністю видаляти заливку або лінію.

Рис. 29. Різні режими дії гумки

Інструмент Pen

Досі ми розглядали інструменти, що автоматично створювали контури. Інструмент Pen (Перо) дозволяє безпосередньо працювати з контурами. З його допомогою можна створювати прямі та вигнуті сегменти, регулювати довжину прямих та нахил вигнутих сегментів.

Лінійна опорна точка

Виберіть інструмент Pen, клацніть мишею (ви поставили першу опорну точку), перемістіть курсор, клацніть мишею (це друга опорна точка). В результаті вийде ламана, як на рис. 30. Опорні точки, показані на рис. 30 називаються лінійними, так як сходяться в них сегменти - лінійні. Лінійна точка не має напрямних.

Рис. 30. Приклад побудови ламаної лінії за допомогою інструменту Pen

Гладка опорна точка

Рис. 31. Приклад побудови гладкої кривої за допомогою інструменту Pen

Для того щоб поставити гладку опорну точку, виберіть інструмент Pen, натисніть ліву кнопку миші і, не відпускаючи її, злегка перемістіть мишу, в результаті з'являться гладка опорна точка і направляюча лінія, що виходить з неї (рис. 31). Повертаючи та подовжуючи напрямну лінію, можна змінювати кривизну чергового сегмента.

Для створення незамкнутого контуру необхідно виконати подвійне клацання мишею по останній точці. Відпустивши клавішу миші, перемістіть курсор та поставте наступну опорну точку; повторюючи цю процедуру, можна отримати гладку лінію, як у рис. 31.

Щоб замкнути контур, наблизьте курсор до початкової опорної точки або лінії контуру. Після того як курсор набуде вигляду пера з кружечком, клацніть мишею - і контур замкнеться.

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

Рис. 32. На перетині прямолінійного та криволінійного сегментів утворюється кутова точка

Вузлові точки можна перетворювати, переміщати та видаляти.

Щоб перетворити кутову точку на гладку, виберіть інструмент Subselection. Клацніть мишею по кутовій точці і, утримуючи клавішу Alt, перетягніть точку - вона стане гладкою, і з'явиться напрямна лінія, що дозволяє змінювати кривизну сегментів, що з'єднуються в цій гладкій точці (рис. 33).

Рис. 33. Приклад перетворення кутової точки на гладку

За промовчанням виділені гладкі точки кривої відображаються як порожнисті точки, а виділені кутові точки - як порожні квадрати.

Використання інструментів Pen та Subselection для роботи з опорними точками

Аналогічно можна створювати точки на лініях, проведених іншими інструментами малювання Flash: Pencil, Brush, Line, Oval, Rectangle та регулювати ці лінії.

Зокрема, на рис. 34 показаний контур, отриманий за допомогою інструмента Oval шляхом перетворення однієї гладкої точки на кутову (за допомогою інструменту Pen) і перетягування кутової точки за допомогою інструмента Subselection.

Рис. 34. Контур, отриманий за допомогою інструменту Oval шляхом перетворення однієї гладких точок у кутову та перетягування її

Інструмент Dropper

Інструмент Dropper (Піпетка) служить для копіювання кольору та стилю олівцевих ліній, режиму пензля та заливок. Коли ви підводите піпетку до лінії, вид курсору змінюється – під піпеткою з'являється міні-піктограма олівця. При клацанні піпеткою по лінії копіюються всі параметри лінії (колір, товщина, стиль) і піпетка замінюється інструментом Ink Bottle, який дозволяє застосувати всі ці налаштування для іншої лінії.

Аналогічно, коли курсор знаходиться над заливкою, під піпеткою з'являється зображення ковша, а коли курсор знаходиться над мазком пензля – під піпеткою з'являється зображення кисті. Ці піктограми показують, які атрибути ви копіюєте інструментом Dropper.

Інструмент Paint Bucket

Ми вже згадували інструмент Paint Bucket (Ківш заливки) – він виділений на рис. 35, тепер розглянемо його можливості докладніше. Цей інструмент застосовується для заливання замкнутих (і не повністю замкнутих) областей кольором, градієнтною та растровою заливкою.

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

Можливі чотири варіанти налаштування цього інструменту:

Don't Close Gaps - не закривати проміжки;

Close Small Gaps - закривати маленькі проміжки;

Close Medium Gaps - закривати середні проміжки;

Close Large Gaps - закривати великі проміжки.

Виберіть інструмент Pencil та намалюйте незамкнений контур (мал. 35). Виберіть Close Large Gaps та залийте контур. Як видно із рис. 35 заливка залишається всередині контуру, навіть незважаючи на те, що початковий контур був незамкнутим.

Рис. 35. Приклад замикання контуру в режимі Close Large Gaps

А тепер розглянемо градієнтну заливку та операції з нею. У панелі Fill виберіть у вкладці Fill варіант заповнення – Linear Gradient (Лінійний градієнт). Потім намалюйте прямокутник, заповніть його лінійною заливкою з лінійним градієнтом, а всередині великого прямокутника намалюйте менший прямокутник (рис. 36). Як видно на цьому малюнку, у малому прямокутнику перехід від білого до синього реалізується на меншому градієнті. Якщо застосувати функцію Lock Fill і виконати заливку обох прямокутників, то вийде картинка, як на рис. 37. Тобто градієнт у внутрішньому та зовнішньому прямокутнику буде однаковим.

Рис. 36. Градієнтне заливання в режимі, коли параметр Lock Fill не активовано

Рис. 37. Градієнтне заливання в режимі, коли параметр Lock Fill активізовано

Для того, щоб змінити напрямок градієнта заливки, необхідно в панелі Options клацнути на кнопці Transform Fill (вона натиснута на мал. 38), а після цього - на заливці, в результаті з'являться маркери (мал. 38).

Рис. 38. Приклад модифікації градієнтної заливки

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

Інструмент Paint Bucket дозволяє також заливати замкнутий контур та растровим зображенням. Продемонструємо як виконується дана процедура на простому прикладі. Намалюйте за допомогою інструмента Rectangle зображення монітора, в екран якого вставлятиметься растрове зображення (мал. 39).

Рис. 39. Векторне зображення монітора, в якому буде розміщено растрове зображення фотографії

Потім імпортуйте растрове зображення, яким і заливатиметься екран. Можна імпортувати растрове зображення, виконавши команду File > Importта вибравши необхідний файл. Далі перейдіть в панель Fill (Заливка) та поміняйте спосіб заливки на растровий – Bitmap (рис. 40).

Рис. 40. Панель Fill, вкладка Fill

Таким чином, якщо заливати замкнутий контур усередині намальованого екрану монітора, то буде виконано заливання растром, як показано на рис. 41.

Рис. 41. Приклад заливання растром

Для того, щоб редагувати растрову заливку, необхідно в панелі Options клацнути на кнопці Transform Fill (вона натиснута на мал. 42), а після цього - на заливці, в результаті з'явиться рамка з маркерами (мал. 42).

Користуючись центральним маркером, растрове зображення можна перетягнути так, щоб на зображеному моніторі відображалася потрібна частина фотографії (мал. 43).

Рис. 42. Рамка модифікації растрової заливки

Рис. 43. Переміщаючи центральний маркер, можна кадрувати растрове зображення

Інші маркери дозволяють масштабувати растрове зображення, повертати його та деформувати (рис. 44).

Рис. 44. Приклад деформації растрової заливки

Імпортувавши кілька фотографій, ви можете налаштувати палітру, з якої можна вибирати растр для заливки (рис. 45), так само, як і палітру кольорів.

Рис. 45. Приклад палітри з кількома растровими зображеннями

Складання та віднімання фігур

Коли дві фігури накладаються одна на одну, Flash або поєднує, або сегментує їх. Намалюйте дві однокольорові фігури - коло і прямокутник (рис. 46), виділіть прямокутник (клацнувши по ньому інструментом Arrow), а потім накладіть прямокутник на коло і заберіть виділення (клацнувши повторно по ньому інструментом Arrow).

Рис. 46. ​​Вихідні постаті

В результаті відбудеться об'єднання двох постатей в одну. Натиснувши на контурі отриманої фігури інструментом Subselect, можна переконатися, що внутрішній контур зник (рис. 47).

Рис. 47. Приклад поєднання двох одноколірних фігур

Тепер виконайте ту ж процедуру з фігурами різного кольору. У цьому випадку внутрішній кордон не зникне (рис. 48).

Рис. 48. При накладенні фігур різного кольору внутрішній контур не зникає

Тепер, якщо виділити прямокутник і перемістити його за допомогою інструмента Arrow, то з кола буде вирізана частина, як показано на рис. 49.

Рис. 49. Частина кола вирізана прямокутником

Іноді для отримання складного контуру корисно використовувати об'єднання та віднімання контурів фігур.

Понад сім років я віддалено працюю із зарубіжними замовниками зі США, Канади, Австралії, Німеччини та інших країн. Малюю графічні ресурси та анімацію для ігор Adobe Animate CC. Раніше редактор називався Adobe Flash Professional CC.

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

Навіщо потрібний ще один цикл уроків для малювання в Adobe Flash? Я багато років займаюся цим і вважаю, що мій досвід може бути корисним для початківців. Особливо тим, хто раніше не малював за допомогою графічного планшета. Якщо ви добре малюєте на папері, але ніколи не малювали на комп'ютері, то мені точно є що вам розповісти.

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

Вибір графічного планшета

Неважливо, чи вмієте ви малювати, вам знадобляться інструменти: пристрої та програми. Почнемо з апаратної частини. Комп'ютер у вас вже є, але до нього ще потрібно підключити графічний планшет, який і дасть нам можливість малювати на віртуальному полотні оперативної пам'яті. Іншими словами це ще один пристрій введення інформації, подібно до мишки або трекболу. Але планшет має переваги, які дозволяють малювати наче на папері. Це чутливість до натискання та схожа на ручку форма маніпулятора.

Існує багато виробників графічних планшетів Wacom, Genius, Huion. Я стикався лише з першими двома. Усього я випробував вже чотири планшети від Wacom і один від Genius, коли починав. Я наполегливо рекомендую Wacom - це висока якістьза помірну ціну.

Якщо немає грошей, не купуйте Genius, візьміть найдоступніший маленький Wacom Bamboo Pen. Я використав практично такий самий, модель Wacom Bamboo Pen&Touch S CTH-460. Критичних проблем за сім років використання не було, хороший апарат, щоб почати. Якщо ви можете виділити більше грошей, то беріть більшу модель. Я використовую Wacom Bamboo Fun Pen&Touch M CTH-670.

Що означають цифри та літери в назвах моделей Wacom

Поясню, що означають деякі цифри та літери у назві, щоб вам було простіше орієнтуватися у модельному парку компанії.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M- Розмір робочої області. Існують S - Small (маленький), M - Medium (середній), L - Large (великий);
• CTH- Позначає модельний ряд. Існують CTL та CTH – аматорські моделі початкового рівня з необов'язковими кнопками та тачпадом, PTH – професійні моделі, DTH та DTK – професійні моделі з вбудованим дисплеєм;
• 6 - Розмір робочої області в дюймах. Існують 4 - Small (маленький), 6 - Medium (середній), 8 - Large (великий), а також 13 і більше, але це стосується тільки планшетів із вбудованим дисплеєм. Іноді в інтернет-магазинах та в оголошеннях не вказують буквений індекс, тоді можна скористатися цифровим, щоб зрозуміти габарити пристрою;
• 70 - покоління та модель. Важливо розуміти, що більше це число, тим більше новий пристрій. Для порівняння, мій старий планшет має індекс CTH-460, сучасний аналог — CTH-490. Покоління відрізняються 10: 460, 470 і так далі.

Розмір графічного планшета

Коли ви малюєте активна зона робочої області дуже маленька. Тобто стілус постійно ковзає в радіусі невеликого кола. Це коло може трохи рухатися. Згодом утворюється пляма, яка видно, як щільне скупчення мікродрапин. Воно показує, що практично не використовуєте периферію пристрою, все відбувається по центру.

Можна припустити, що великий графічний планшет не потрібен, тому що ви ніколи не використовуватимете всю його робочу область, а пляма активності буде такого ж розміру, як і на меншій моделі. Але це не так.

Коли ви працюєте на планшеті, його робоча область проектується на всю ширину монітора. Тому чим більше планшет, тим точніше ви можете наносити мазки. І навпаки, що більше монітор і що менше планшет, то складніше і дискомфортніше вам малюватиме. По досвіду можу сказати, що після переходу з розміру S на M під час роботи на 29-дюймовому ультраширокому моніторі, мені стало працювати комфортніше на 25-30%. Мені потрібно менше зусиль, щоб намалювати складний контур, в цілому взаємодія відчувається м'якшою та приємнішою.

Графічні планшети більшого розміру мають забезпечити ще комфортніші умови роботи, але мені не доводилося працювати на L-моделях, можу лише припустити.

Відмінності аматорських та професійних планшетів Wacom

Купуючи про-модель ви отримуєте бездротовий пристрій, Виготовлене з якіснішого пластику з 2048 рівнями чутливості до натискання проти 1024 у моделей дешевше, красивим дизайном, додатковими органами управління у вигляді кнопок і сенсорного кільця. Мене повністю влаштовують молодші застарілі моделі серії Bamboo, зняті з виробництва. Різниця за вартістю аматорської та про-версій складе більше двох разів. Таблиця розставить усе по поличках:

Налаштування Wacom Bamboo Pen & Touch M CTH-670

Перед підключенням пристрою завантажуємо драйвера з офіційного сайту Wacom.

Після підключення планшета та встановлення драйверів запускаємо програму Wacom Preferences, яке можна знайти через пошук Windows(Win + S) або панелі керування.

Основні налаштування планшетів компанії не відрізняються, налаштовуються схожим чином як аматорські, так і професійні моделі.

На вкладці Tabletможна налаштувати планшет під праву та ліву руку, а також призначити дії для клавіш. Для початку встановіть їх у Disabled, згодом можна буде призначити гарячі кнопки.

На наступній вкладці Penзнаходяться важливі параметри:

• Tip Feel- чутливість до натискання. Залишайте по центру. У процесі зрозумієте яка жорсткість вам до вподоби і налаштуєте до смаку;
• Tracking— режим відстеження положення стілусу. Встановлюємо Pen Mode– робоча область планшета розтягується на весь екран. Режим Mouseвикористовується як заміна миші;
• Інші настройки не такі важливі. Pen Buttonsдозволяє призначити дію на кнопки стілуса. Eraser Feel- чутливість гумки зі зворотного боку стілус. Не використовую цю нагоду, тому що мені швидше перемикатися за допомогою гарячих клавіш.

У цій же вкладці у розділі Trackingнатискаємо кнопку Mapping..., щоб настроїти проектування робочої області планшета на екран монітора. Відкриється вікно Pen Mode Details.

В розділі Screen Areaобираємо Monitorякщо у вас кілька моніторів і вказуємо основний. Якщо монітор один, то залишаємо All Screens

В розділі Scalingобов'язково ставимо галочку навпроти Force Proportions, щоб робоча область не розтягувалася під час проеціювання на екран. В цьому випадку частина робочої області планшета не використовуватиметься, але у нас будуть нормальні пропорції 1 до 1. І якщо ви намалюєте коло, то на екрані він відобразиться як коло, а не витягнутий еліпс.

Обов'язково ставимо галочку навпроти Use Windows Inkщоб працювала чутливість до натискання.

На наступній вкладці Touch Optionsзнімаємо галочку навпроти Enable touch input, щоб переключити планшет у звичайний режим.

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

Animate CC чи Flash Professional CC?

Adobe Animate CC – це ребрендинг Adobe Flash Professional CC, до програми додали кілька нововведень. Ще зі старою назвою здобула величезну популярність серед художників, аніматорів та розробників інді-ігор. Векторні принципи побудови дозволяють створювати спрайти для будь-якого дозволу. Для малювання підійде будь-яка версія, яку зможете дістати. Інструменти малювання не змінюються вже багато років, а лише трохи покращуються. Я використовуватиму Adobe Animate CC, але все написане буде застосовним і для старих версій Adobe Flash Professional. До речі, останнім часом компанія Adobe перейшла на модель помісячної підписки для отримання доступу до своїх продуктів замість дорогого одноразового ліцензування. Зараз ціна за використання Adobe Animate CC складає 20 доларів на місяць.

Перший запуск Adobe Animate CC

Після завантаження створюємо новий файлі вибираємо тип Action Script 3.0. У цьому вікні можна вказати параметри сцени:

• Widthі Height- Ширина і висота сцени в пікселях. Виставимо у 1920 x 1024, як дозвіл у сучасному моніторі чи смартфоні;
• Ruler units- Одиниці виміру, виставляємо пікселі;
• Frame rate- Кількість кадрів в секунду, залишаємо 24;
• Background color- Колір фону, виставляємо в сірий.

Ці налаштування можна змінити після створення документа. Для цього потрібно вибрати інструмент Selection Tool(Гаряча клавіша V), відкрити вікно Propertiesта розгорнути розділ Properties. Якщо ви не можете знайти це вікно, то скористайтесь меню Window → Propertiesабо поєднанням клавіш Ctrl+F3.

Налаштування гарячих клавіш

Щоб підвищити ефективність роботи, потрібно використовувати гарячі клавіші по максимуму. На перших етапах це вимагає звикання та запам'ятовування нових комбінацій клавіш, але надалі забезпечує солідний стрибок у вашій ефективності. Я перевизначив більшість гарячих клавіш таким чином, щоб вони знаходилися у правій стороні клавіатури. Чому саме у правій? Справа в тому, що я шульга і, відповідно, мені так зручніше. Якщо ви правша, то вам доведеться вигадати свою схему. Крім того, я використовую Rapoo E9050 і Apple Wireless Keyboard, які виконані у форм-факторі клавіатур для ноутбуків, тому якщо ви використовуєте повнорозмірну, то знову ж таки попрацюйте і придумайте свою схему - це окупиться масою зекономленого часу - а мою схему розгляньте, як приклад.

Зрозумійте ідею: згрупуйте основні команди на зручній стороні клавіатури, щоб забезпечити швидкий доступбез постійної зміни положення руки. Більшість часу вона повинна лежати на одному місці, лише пальці "гуляють" у невеликому радіусі, натискаючи кнопки. Звичайно, залишаться і команди, які вимагають зміни становища, але їхня переважна меншість. Ось моя схема:

Найчастіше нові поєднання не замінюють старі, а доповнюють їх, вводиться кілька нових команд. Здійснити налаштування потрібно через меню Edit → Keyboard Shortcuts.... У полі для пошуку вводимо назву команди, у колонці Shortcutклацаємо на порожньому місці навпроти потрібної команди і натискаємо нове поєднання клавіш.

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

Налаштування пензля

Brush Tool(Гаряча клавіша B) - інструмент пензель, що найвикористовується при малюванні. Налаштування зосереджено у двох вікнах:

Налаштування пензля закінчено, давайте намалюємо щось.

Малюємо за допомогою пензля

Підберіть відповідний колір за допомогою вікна Color (Ctrl + Shift + F9), оберіть інструмент пензель (B) і почніть з одного довгого штриха з невеликим зусиллям, щоб окреслити майбутню фігуру. Далі обведіть отриманий контур, щоб згладити всі нерівності - пензлик готовий.

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

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

Щоб переконатися у всьому сказаному вище, активуйте інструмент Subselection Tool(гаряча клавіша A) і виберіть щойно намальовану пензель. Тепер можна розглянути точки векторного контуру і навіть змінити їх.

Висновок

Сьогодні ми налаштували Adobe Animate CC та готові до початку малювання. Попрактикуйтеся трохи перед тим, як ми продовжимо. Навчіться малювати прості геометричні фігури без спотворень, спробуйте різні кольори та налаштування пензля (поекспериментуйте з параметром Smoothing).

Схожі матеріали