1. Теоретична частина
2. Переваги технології Flash
3. Історична довідка
4. Панель інструментів
5. тимчасова шкала
6. кадри
7. символи
8. покадрова анімація
9. Анімація з побудова проміжних кадрів
10. Практична частина
11. Примітка
12. Вправа 2. Зобразимо рух жаби
13. Поява або зникнення об'єкта з глибини
14. Обертання об'єкта навколо осі Y або X
15. Хамелеон, або Фігура, плавно змінює колір
16. Завдання 3. Створіть модель світлофора.
17. Вправа 3 Зобразимо рух рибки по хвилях
18. зауваження
19. Завдання 5: Створіть довільний ролик, використовуючи анімацію руху, що містить не менше 3-х шарів і...
20. Завдання 6.
21. завдання 7

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

Теоретична частина

1. Технологія: основні функціональні можливості

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

В даний час існує декілька технологій створення анімації: анімаційний формат GIF, Flash , Java і JavaScript .

Переваги технології Flash

У порівнянні з GIF-анімацією, можливості технології Flash значно ширше.

Технологія Flash:

• Дозволяє створювати елементи навігації, анімовані логотипи, повномасштабні озвучені мультфільми і навіть цілі сайти з великою кількістю різноманітних інтерактивних елементів.
• Завдяки векторної графіки, яка використовується Flash, анімаційні ролики невеликі за розміром і тому швидко завантажуються і підлаштовуються під розмір вікна браузера.
• Технологія Flash повністю задовольняє вимоги Web-дизайнерів до інструментарію для підготовки графіки, надаючи програму створення векторної графіки та анімації Adobe (Macromedia) Flash.
• Анімаційні ролики, створювані цією програмою, називаються фільмами. Причому анімаційні можливості програми не обмежені тільки мультиплікацією - можна анімувати все, включаючи також елементи навігації і меню.
• Flash не обмежується створенням анімації тільки для Web. Ви можете також створювати і, використовуючи автономний програвач FlashPlayer, поширювати фільми на компакт-дисках або по електронній пошті.
• Можна експортувати фільми в інші формати, такі, як QuickTime (MOV) або Windows AVI.
• Наявність мови ActionScript для розробки інтерактивних елементів.

Основне призначення програми Adobe (Macromedia) Flash - розробка інтерактивних Web-сайтів.

Історична довідка

За допомогою Flash починалося з маленької програми, призначеної для створення векторної графіки та анімації, яка називалася Future Splash Animator. У 1997 році компанія Macromedia придбала Future Splash Animator, змінила назву на Flash і представила програму як інструмент підготовки графіки для World Wide Web. Macromedia Flash вигідно вирізняється з-поміж програм підготовки векторної графіки для Web тим, що включає в себе всі необхідні інструменти: для створення графіки, для анімації підготовлених зображень, для розробки інтерактивних елементів, для створення коду HTML, необхідного, щоб помістити фільм Flash на Web-сторінці і переглядати його за допомогою браузера.

Під цим найменуванням платформа продовжує розвиватися і понині (хоча після того, як в 2005 році компанія Macromedia була поглинена Adobe, Macromedia Flash став офіційно називатися Adobe Flash).

Купівля Macromedia дозволила Adobe ще більш посилити свої позиції на ринку графічного і мультимедійного програмного забезпечення, маючи в своїй лінійці повний спектр програмних продуктів, необхідних як професійного дизайнера і web-розробнику, так і починаючому фахівцеві в даній області. Тепер портфоліо Adobe поповниться такими рішеннями, як Adobe Design Bundle (включає всі продукти, що входять в Adobe Creative Suite 2 Premium плюс Macromedia Flash Professional 8), Adobe PDF і Macromedia Flash в одному пакеті, Adobe Web Bundle (включає всі продукти, що входять в Adobe Creative Suite 2 Premium плюс Macromedia Studio 8), а рішення для web-дизайну і розробки Macromedia Studio 8 тепер може працювати в єдиному середовищі Adobe Creative Suite 2 Premium.

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

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

це "виділення" за допомогою нього можна виділяти прямокутні області графіки та об'єкти;

1. це так зване "суб виділення" за допомогою нього можна координувати криві, складові фігуру;
2. "Пряма" - дозволяє намалювати пряму лінію;
3. "Ласо" - можна захоплювати частину зображення;

Ріс.1_1 - Інструменти малювання

1. "Pen-tool" - дозволяє намалювати лінії по точкам і задати кут;
2. "Текст" - текстовий введення;
3. "Коло" - малює окружність, або овал;
4. "Квадрат" - малює квадрат або прямокутник;
5. "Олівець" - малювання від руки, олівцем;
6. "Кисть" - малювання пензлем;
7. "Трансформація" - обертання, зміна розмірів;
8. "Зміна заливки" - дозволяє управляти заливанням: напрямок, радіус;
9. "Чорнило" - надає додаткову товщину;
10. "Заливка" - можна заливати квітами об'єкти;
11. "Піпетка" - можна вибрати будь-який колір за межі робочої області;
12. "Ластик" - стирає лінії і заливання. Ви можете задати опції ластик так, що він буде прати:

• тільки лінії,
• тільки заливку,
• тільки виділену заливку,
• тільки ту заливку, яку ви почали прати.

тимчасова шкала

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

Ріс.1_2 - Тимчасова шкала

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

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

Шкала кадрів - поле, де ви можете додавати і видаляти прості і ключові кадри. Якщо викликати контекстне меню (натиснути на праву кнопку миші) на якому-небудь кадрі, ви побачите перелік дій, які можна зробити. На шкалі відображається інформація про кадри, які є ключовими (такі кадри позначаються чорними кружечками), містять дії (буква "а" над кружечком) або мітку (червоний прапорець, після якого йде назва мітки). Колір теж говорить про тип кадрів. Сірий колір - це кадри, які в точності повторюють ключовий кадр (Keyframe). Синювата або зеленувата підсвічування говорить про те, що кадри згенеровані Flash. Біле або "порожній" смугасте простір говорять про те, що на цих кадрах нічого немає.

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

кадри

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

У комп'ютерній анімації існує поняття - ключові кадри (Keyframes). Це кадри, які Flash не має права змінювати в процесі створення анімації. Ви задаєте ці ключові кадри, а проміжні кадри між ними вибудовує Flash. Існує два типи проміжних кадрів - кадри, побудовані на основі зміни геометрії (shape tweening) або кадри, побудовані на зміні символів (motion tweening).

Операції з кадрами:

1. Вставити порожній ключовий кадр - Insert - Teemline - Blank Keyframe.
2. Ключовий кадр, що повторює зміст попереднього - Insert - Teemline - Keyframe.
3. Очистити ключовий кадр - Клацнути по кадру правою кнопкою миші, Clear keyframe.
4. Вставити звичайний кадр - Insert - Teemline - Frame.
5. Видалити кадр - Клацнути по кадру правою кнопкою миші, Remove Frames.

символи

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

Наприклад, можна зробити символи - колесо, корпус, скла, антени. Потім все це об'єднати в символ - автомобіль.

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

Існує три види символів: анімація (movie clip), кнопка (button) і зображення (graphic):

1. Зображення (graphic), являє собою символ, що складається з єдиного кадру. Звідси випливає його статичне назву. Якщо символ дійсно являє собою статичний (НЕ анімуйте) об'єкт, краще зробити його зображенням (graphic).
2. Кнопка (button). У Flash є спеціально пристосований під функції кнопки вид символу. У ньому є 4 кадри: Up, Over, Down, Hit, які містять такі стану кнопок: Up - звичайний стан кнопки; Over - коли курсор мишки знаходиться над кнопкою; Down - коли курсор знаходиться над кнопкою і натиснута клавіша миші; Hit - звичайний стан, для кнопки, що мiстить посилання, яку користувач вже відвідував.
3. Анімація (movie clip). Символ цього типу може сприйматися як об'єкт типу Movie в ActionScript (це вбудована мова Flash).

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

покадрова анімація

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

На часовій шкалі покадрова анімація виглядає наступним чином:

Рис .1_3 - Покадровая анімація

переваги:

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

недоліки:

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

Анімація з побудова проміжних кадрів

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

Швидкість і плавність анімації залежать від кількості кадрів, які ви відводите під рух і швидкості вашого Flash фільму (movie).

У Flash існує два варіанти побудови проміжних зображень - motion tweening (побудова анімації на основі модифікації символів) і shape tweening (побудова анімації на основі зміни форми).

• motion tweening
• shape tweening

Практична частина

анімація руху

Вправа 1. Створимо стрибучий м'ячик

1 крок. Виберіть File_New, потім Modify_Document і задайте наступні параметри робочої області: 200px (Width) і 250 px (Height)

2 крок. Намалюйте коло у верхній частині листа. Залийте коло (див. Рис. 2_1 і 2_2).

Мал. 2_1 - Градієнт

Виходить наступний екземпляр:

Мал. 2_2 - М'ячик

3 крок. Виділіть м'ячик і нажмітеModify _Group.

4 крок. Клацніть по об'єкту правою кнопкою миші, виберіть - Convert to Symbol.

5шаг. Зробіть 10 кадр ключовим і за допомогою інструменту виділення перемістіть м'ячик в нижню частину листа.

6 крок. Зробіть 20 кадр ключовим. Перемістіть м'ячик вгору.

7 шаг.Вернітесь на 10 кадр. Виділіть м'яч і нажмітеModify _Transform _Scale. Стисніть його.

8 крок. Додамо рух. Клікніть два рази на 10 кадрі і встановіть на вкладці Properties під робочою областю значеніеTweening _Motion. Перевірте наявність прапорця Scale.

9 крок. Клікніть два рази на 1 кадрі і установітеTweening _Motion. Приберіть прапорець Scale.

10 крок. Перегляньте двіженіеControl _ Play. Збережіть роботу.

Примітка

При виборі стандартної команди Save меню File проект зберігається форматі fla і відкривається в цій же програмі з можливістю редагування.

Для розміщення файлу на сторінках Інтернет або перегляді в програмі Adobe Flash Player, мультик необхідно експортувати в формат відео swf.

А для перегляду мультика без спеціальних засобів необхідно сначалаекспортіровать його в формат swf, а потім переформатувати його засобами програми FlashPlayer (встановлюється разом з Adobe (Macromedia) Flash) і запускається через меню Пуск. У головному меню програми, після відкриття файлу в форматі swf, необхідно вибрати команду Create Projector і вказати місце і ім'я файлу в форматі exe.

Вправа 2. Зобразимо рух жаби

1 крок. ВиберітеFile _New і задайте свої параметри робочої області.

2 крок. Імпорт файл із зображенням жаби. Для цього виберіть команду File _ Import _ Import to Stage .У діалоговому окнеImport виберіть формат файлу (* .wmf) і виділіть файл з ім'ям Lyagushka.

3 крок. Застосуємо командуModify _Break Apart. Вона ділить зображення на області, які можна змінювати незалежно один від одного за допомогою інструментів малювання та зафарбовування. Розфарбуйте малюнок.

4 крок. На лінії часу (Timeline) виділіть 10-й кадр, потім (перебуваючи на 10-му кадрі) в пункті менюInsert виберіть пунктFrame. Тепер мультфільм складається з десяти кадрів, на кожному з яких знаходиться жаба.

5 крок. У пункті менюInsert (або з контекстного меню 10-го кадру) виберіть пунктCreate Motion Tween, після чого область з 1-го по 10-й кадр стане синього кольору зі штриховий лінією

6 крок. Перемістіть жабу на 1-му кадрі в верхній правий кут, а на 10-му - в нижній лівий кут.

7 крок. Зробіть 10-й кадр ключовим (з контекстного меню).

8 крок. Перегляньте двіженіеControl _Play. Збережіть роботу.

9. крок. Самостійно створіть «зигзагоподібну» траєкторію руху жаби.

Поява або зникнення об'єкта з глибини

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

1. Зробіть текстове поле, напишіть в ньому слово і перетворите текстове поле в кліп (Insert / Convert to Symbol). Розмістіть поле в центрі кадру.
2. Створіть другий ключовий кадр в 25-й кадр (F6). Треба збільшити розмір текстового поля до дуже великих розмірів (Scale)
3. Створіть анімацію руху.
4. Протестуйте кліп.

Завдання 1 . Самостійно створіть кліп (рекламний ролик), що містить кілька об'єктів, збільшуються і зменшуються в розмірах.

Обертання об'єкта навколо осі Y або X

Досить поширений прийом для створення ілюзії тривимірного простору на екрані. Часто застосовується в кнопках.

1. Створіть спочатку перший і третій ключові фрейми
2. Зробіть анімацію руху з першого фрейму в третій
3. Приблизно посередині вставте другий ключовий кадр (F6) і зменшіть ширину об'єкта до 10%
4. Протестуйте мультик, додайте ще кілька ключових фреймів, поміняйте заливку.

Завдання 2. Створіть модель флюгера або пропелера.

Хамелеон, або Фігура, плавно змінює колір

Ефект Tint (Window / Panels / Effect) використовується для плавної зміни кольору об'єкта.

1. Намалюйте прямокутник з округленими кутами (настройка - Round Rectangle Radius) довільного кольору.
2. Створіть послідовність кадрів (15), додайте ключовий кадр і додайте рух Motion Tween.
3. Виберіть властивість Tint ефекту Color на панелі Properties при обраному інструменті Paint Bucket Tool, змініть колір об'єкта на другому ключовому кадрі і рівень яскравості у відсотках на цій же панелі.
4. Протестуйте мультик, щоб подивитися, як змінюється колір.

Завдання 3. Створіть модель світлофора.

Завдання 4: Створити два довільних об'єкта, що рухаються по різних траєкторіях

Примітка

Для виконання даної вправи необхідно створити два шари, в кожному з яких буде створено рух для одного об'єкта.

Секція шарів розташовується в лівій частині шкали часу. Для створення нового шару правою кнопкою миші по назві першого шару (за замовчуванням Layer 1) і виберіть в контекстному меню Insert Layer.

Питання: яким ще способом можна додати шар?

Щоб створити зображення на шарі, потрібно виділити шар клацанням миші. Щоб змінити властивості шару в контекстному меню потрібно вибрати Proporties.

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

Вправа 3 Зобразимо рух рибки по хвилях

1 крок. Намалювати рибку і імпортувати її в бібліотеку (для цього достатньо конвертувати об'єкт в символ). Переглянути вміст бібліотеки можна за допомогою команди Window _ Library.

2 крок. Зробіть 15-й кадр ключовим.

3 крок. Для завдання траєкторії (направляючого шару) викличте правою кнопкою на шарі з об'єктом контекстне меню і виберіть пунктAdd Motion Guide. Зверху додасться ще один шар тіпаGuide, а позначення шару з об'єктом при цьому зрушиться злегка вправо.

4 крок. Намалюйте вGuide шарі будь-яку криву (вона може перетинати себе), по якій буде рухатися об'єкт.

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

Додайте рух і протестуйте анімацію.

зауваження

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

Ви можете на вкладці Frame відзначити опцію Orient to Path. Це доступно при виділеному об'єкті. В результаті об'єкт буде рухатися зі збереженням напрямку кута повороту відносно кривої.

Завдання 5: Створіть довільний ролик, використовуючи анімацію руху, що містить не менше 3-х шарів і 2-х об'єктів, що рухаються

анімація форми

Скажімо, вам потрібно, щоб квадрат плавно перетворився в коло, чи силует кролика плавно перетік в силует вовка. У цих випадках використовується shape tweenin g.

Як завжди, ви задаєте два ключових кадру на деякій відстані один від одного.

Важліво !!! У цьому варіанті анімації є жорстке обмеження: ваша анімація повинна займати окремий шар і бути єдиною намальованою фігурою (не повинно бути груп або символів).

Після того як у вас є два ключових кадру, ви робите активним перший з них, і вибираєте на панеліна панеліProperties для свойстваTween задайтеShape.

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

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

Завдання 6.

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

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

Користуватися ними дуже легко:

1) на першому ключовому кадрі (з якого починається анімація) ви додаєте контрольну точку (Modify _ Shape _ Add shape hint). На сцені з'явиться маленька червона крапка, позначена буквою латинського алфавіту. Ви прикріплюєте її до тієї частини зображення, яка рухається не так, як ви хотіли;

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

Видалити всі точки можна за допомогою Modify _ Shape _ Remove All Hints .Удаліть ж єдину точку можна, натиснувши на ній праву кнопку миші, і в контекстному меню вибравши Remove Hint.

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

Shape tweening без використання контрольних точок

Shape tweening з використанням контрольних точок

При використанні анімації на основі зміни форми (shape tweening) можуть модифікуватися наступні параметри фігури:

• форма
• Розташування
• розмір (будь-які пропорції)
• колір
• кут повороту

завдання 7

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

Чи знаєте Ви, що діаграма розгортання, Діаграма застосування, Діаграма розміщення Deployment diagram - це метод об'єктно-орієнтованого проектування, що відображає фізичні взаємозв'язку між програмними і апаратними компонентами системи.