Векторная анимация в Macromedia Flash

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

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

Структура основного окна flash MX

Анімаційні ефекти

Flash MX 2004 включає попередньо підготовлені анімаційні ефекти (timeline-ефекти), які дозволяють створювати складні анімації, використовуючи мінімальну кількість дій. Ви можете застосовувати функціюTimeline Еffects до наступних об'єктах:

• текст;
• графічні об'єкти, включаючи форми, згруповані об'єкти і графічні символи;
• растрові зображення;
• кнопки.

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

Macromedia Flash MX 2004 надає кілька способів створення анімаційних послідовностей:

• анімація motion tween - програма сама створює послідовність кадрів, що імітує той чи інший ефект стосовно до деякого об'єкту;
• покадрова анімація - користувач створює кожен кадр майбутньої анімації;
• автоматична tweened-анімація, або анімація форми, - користувач задає початковий і кінцевий кадр, а програма сама створює проміжні кадри на основі програмної інтерполяції.

Як задати анімацію руху?

1. Намалювати об'єкт, задати кадри (Insert Frame)

2. Зробити кінцевий кадр ключовим (Insert keyframe)

3. Визначаємо стиль анімації (Create Motion Tween)

4. Перемістити на останньому кадрі об'єкт в кінцеве положення і запустити на перегляд (Enter)

Як задати траєкторію руху об'єкта?

1. Виконати анімацію руху (див. Вище).
2. Створити шар гід - лінії.

3. Намалювати на шарі гід-лінії траєкторію руху об'єкта.

4. На початковому і кінцевому кадрі анімації поєднати маркер центру об'єкта з початком і кінцем гід-лінії.

Як задати анімацію форми?

1. Намалювати об'єкт, задати кадри (Insert Frame)

2. На панелі Properties змінити вид анімації Tween на Shape

3. Поставити кінцевий ключовий кадр

4. На останньому кадрі змінити об'єкт і запустити на перегляд (Enter)

Панель інструментів редагування

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

Для зручності роботи панель інструментів розділена на чотири частини:

Tools (Інструменти), в якій зібрані кнопки вибору конкретного інструменту; ці інструменти поділяються на два види: інструменти вибору і інструменти малювання; докладніше робота з ними буде розглянута в двох наступних розділах книги; View (Вид), що містить засоби управління переглядом зображення, наявного на столі; в цьому полі розташовані дві кнопки: Hand Tool (Рука) - клацання на кнопці включає режим, при якому робочу область можна переміщати в будь-якому напрямку за допомогою миші, не користуючись смугами прокрутки; Zoom Tool (Масштаб) - клацання на кнопці включає режим швидкого збільшувати або зменшувати зображення в робочій області; при включенні цього режиму в поле Options з'являються дві додаткові кнопки, що дозволяють вибирати напрямок масштабування (збільшення або зменшення); Colors (Кольори), кнопки якої забезпечують роздільне вибір кольору контуру і заливки об'єктів; докладніше їх призначення розглянуто в розділі «Робота з кольором»; Options (Параметри), на якій представлені елементи установки додаткових параметрів обраного інструменту; для інструментів, що не мають додаткових параметрів, поле Options залишається порожнім.

Робоча область

Робоча область займає всю центральну частину вікна. У робочій області можна виконувати будь-які операції редагування об'єктів, проте в «кадр» потраплять тільки ті об'єкти (або їх фрагменти), які розташовані в межах монтажного столу. У зв'язку з цим може виникнути питання: навіщо ж потрібна інша частина робочої області? Відповідей два:

• для виконання «чорнових» робіт;
• для реалізації ефекту поступового входу об'єкта в кадр (або навпаки, виходу з нього);

докладніше цей аспект використання робочої області буде розглянуто в розділі «Створення анімації».

Безпосередньо над робочою областю знаходиться відноситься до неї панель інструментів. На ній розташовані наступні елементи інтерфейсу:

Панель інструментів робочої області

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

Монтажний стіл

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

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

Монтажний стіл

Тимчасова діаграма

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

Тимчасова діаграма на монтажному столі

Розглянемо докладніше елементи тимчасової діаграми.

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

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

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

Формати зображення кадрів на тимчасовій діаграмі:

• Ключові кадри для tweened-анімації руху позначаються як чорні точки, з'єднані лінією зі стрілкою, на світло-синьому тлі (лінія зі стрілкою замінює всі проміжні кадри)
• Ключові кадри для tweened-анімації форми позначаються як чорні точки, з'єднані лінією зі стрілкою, на світло-зеленому тлі (лінія зі стрілкою замінює всі проміжні кадри)
• Пунктирна лінія вказує, що кінцевий (заключний) ключовий кадр відсутній
• Одиночний ключовий кадр у вигляді чорної точки, після якого йде послідовність світло-сірих кадрів, означає, що вміст ключового кадру не змінюється; заключний ключовий кадр в цьому випадку позначається порожнім прямокутником
• Маленька буква а вказує, що цього кадру за допомогою панелі Actions (Дії) було призначено деяку дію
• Червоний прапорець вказує, що кадр містить мітку або коментар
• Безперервна послідовність ключових кадрів, позначених чорними точками, означає покадровую анімацію
• Жовтий якірець говорить про те, що даний кадр містить іменовану мітку, яка використовується для навігації між кадрами фільму; якщо дозволяє місце на діаграмі, поруч з якорем виводиться ім'я мітки

Панель властивостей

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

Панель властивостей для документа в цілому

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

Работа с текстом в Corel

Вправа для повторення:

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

Завдання для самостійної роботи:

Створіть один з логотипів відомих торгових марок на вибір:

Результати самостійної роботи:

Photo Gallery by QuickGallery.com

Прізвище, ім'я	Оцінка
Похилова, Вересова	10
Олейник, Натарова	10
Беспалова, Шамаева	7
Прошинская, Дюба	7
Познанский, Кильчанов, Волощук	10
Солоп	9
Борисевич, Скляр	9
Ханишин, Крячун	10
Цыганов, Федоренко	11
Лебедь, Соболь	8
АнтоДима	10
Кузнецова, Коваль	10

Работа с объектами в Corel Draw

Результати нашої практичної роботи:

Сови:



Photo Gallery by QuickGallery.com

І коти:


Photo Gallery by QuickGallery.com

І оцінки за вашу творчість:

Прізвище, ім'я	Совыи	Коти
Иваненко Андрей	8	7
Ясманович Дмитрий, Гунько Антон	10	11
Кемарский Никита, Китаев Глеб, Ханишин Никита	11	10
Коваль, Полухова	11	9
Кузнецова, Крячун	11	11
Натарова, Прошинская	11	7
Панченко, Солоп	11
Познанский, Кильчанов	11	11
Похилова, Вересова	11	11
Цыганов, Федоренко	11	11
Скляр, Борисевич	10
Лебедь, Соболь, Дударь	11	11
Шамаева, Дюба	11	10

Основний інструмент виділення Pick Tool (Виділення)

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

Будь-які маніпуляції можна робити тільки над виділеним об'єктом.

Виділяти об'єкти можна двома способами: клацаючи на них або обводячи їх рамкою виділення.

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

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

Над усіма об'єктами або групами об'єктів в програмі CorelDRAW можна виробляти такі трансформаційні спотворення:

• переміщення;
• масштабування;
• поворот;
• нахил;
• дзеркальне відображення.

Переміщення

Переміщати об'єкт можна вільним рухом руки, стрілками на клавіатурі і, шляхом вказівки числових значень координат x і y.

Для переміщення об'єкта за допомогою миші потрібно при активному інструменті Pick (Вибір)

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

Масштабування

Як збільшувати або зменшувати об'єктів необхідно скористатися кутовими маркерами.

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

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

.

При розтягуванні (стисканні) можна використовувати клавіші:

• Shift - перетворення відбувається відносно центру об'єкта;
• Ctrl - збільшення розмірів відбувається тільки на кратні величини: в два, три, чотири рази і т. п.

Повторне клацання на об'єкті призводить до того, що маркери змінюють свій вигляд:

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

При повороті і перекосі можна використовувати клавіші :

• Shift - дає змогу розтягувати або стискати об'єкт при обертанні;
• Ctrl - обертання і перекіс відбуваються під певними кутами, кратними 15 °;
• Ctrl + Shift - поворот відбувається тільки під кутами, кратними 15 °, але при цьому можливо плавне масштабування об'єкта.

Дзеркальне відображення

Дзеркальне відображення об'єкта здійснюється за допомогою інструменту Mirror (Дзеркальне відображення), розташованого на панелі властивостей. Існує два види дзеркального відображення: горизонтальний і вертикальний. При горизонтальному дзеркальному відображенні відбувається відображення об'єкта щодо вертикальної осі X. При вертикальному - відносно горизонтальної осі Y.

Зміна форми об'єктів

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

Виберіть інструмент Форма (Shape Tool) на панелі інструментів (Toolbox).

Тепер ви можете змінювати розташування і кривизну ліній, перетягуючи мишею пов'язані з ними ромбики. Крім зміни форми, Ви можете змінити розмір автофігури, виконати перекіс або повернути її.

Для того щоб який-небудь об'єкт перетворити в довільні криві слід клацнути по цьому об'єкту правою клавішею миші і з контекстного меню вибрати команду Перетворити в криву. Цю ж команду можна викликати і на панелі властивостей, і за допомогою клавіш Ctrl + Q.

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

Робота з об'єктами

У графічному редакторі CorelDRAW є три команди формування об'єктів з декількох інших: Об'єднати, Виключити і Перетин. Всі три операції виконуються за допомогою відповідних екранних кнопок Об'єднати, Виключити і Перетин, розташованих на Панелі властивостей (Property Bar).

Необхідно виділити об'єкти, над якими ви хочете виконати операцію формування, після чого натиснути відповідну кнопку.

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