основи анімації

1. Що ж таке анімація?
2. Як створюється ілюзія руху в анімації кадру
3. покадрова анімація
4. програмування кадрів
5. Переваги програмної анімації
6. Віртуальна реальність
7. підсумки

У першому уроці базового міні-курсу «Основи анімації в Actionscript 3.0» ви дізнаєтеся про те:

1. Що таке анімація
2. Як домогтися ілюзії руху за допомогою кадрів
3. Про можливості анімації кадру
4. Про особливості та переваги програмної анімації

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

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

Ось як це виглядає в програмі Adobe Flash CS6.

Мал. 1

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

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

Що ж таке анімація?

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

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

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

Але об'єкт не обов'язково повинен змінювати своє положення для того щоб вважатися анімованим. Він може просто змінити свою зовнішню форму. У 90-х роках (страшно сказати, минулого століття!) Були популярні комп'ютерні програми, які робили морфинг.

Наприклад, у вас є дві картинки: дівчина і тигр. Програма створює плавний перехід / анімацію між ними (морфинг).

При створенні цього флеш-ролика використовувалася програма Sqirlz Morph 2.1

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

Прив'язка анімації до часу - це важлива концепція.

Без видимого руху або зміни анімації немає, а, отже, відсутня і відчуття часу у глядача!

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

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

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

Всі пам'ятають картину Леонардо да Вінчі «Мона Ліза» - шедевр живопису, одну з найвідоміших картин у світовій історії мистецтв.

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

Як створюється ілюзія руху в анімації кадру

Давайте на секунду повернемося до визначення анімації, з яким ми познайомилися вище:

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

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

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

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

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

Тоді чому ж ми повинні називати це ілюзією руху?

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

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

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

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

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

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

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

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

Концепція кадрів робить можливими три речі:

• зберігання
• передачу
• і показ

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

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

Цією системою може бути:

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

програмування кадрів

Оскільки комп'ютер може вважати «на льоту», то у вас є можливість обійтися без довгого списку описів для кадрів. Ви можете все спростити, описавши лише перший кадр і встановивши правила по створенню всіх наступних кадрів. Тепер комп'ютер не просто створює картинку з опису, а:

• спочатку створює опис,
• потім генерує картинку на основі цього опису
• і в кінці показує цю картинку.

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

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

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

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

Переваги програмної анімації

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

Ви, напевно, дивилися фільм «Термінатор 2: Судний день». В кінці фільму, кожен раз Термінатор зникає в плавильному котлі з фразою «I'll be back». Він робить це в кінотеатрах, по телевізору і на DVD. Навіть натискаючи на кнопку «Стоп» або «Пауза», ви не в змозі його зупинити. І це тому, що звичайний фільм - це не більше ніж послідовність картинок. В кінці цього фільму вони (картинки) показують зникаючого в пеклі Термінатора і це все на що вони здатні.

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

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

Тоді подібні речі були в новинку, тому і хотілося вигукнути: «Круто!» Справедливості заради, потрібно сказати, що не всі з подібних сайтів були дійсно крутими. Згадуючи сьогодні те, що я бачив тоді, можна сказати, що тільки два або три з них, дійсно, врізалися в пам'ять.

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

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

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

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

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

Віртуальна реальність

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

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

• «Взяти» його мишею
• або переміщати за допомогою клавіатури.

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

Ви можете в цьому переконатися самі, погравши з червоним м'ячем нижче.

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

підсумки

У цьому вступному уроці ми обговорили:

• основи анімації;
• відмінності покадровой і програмної анімації;
• основні переваги динамічної анімації.

Це концептуальні, базові знання, на основі яких буде будуватися весь наступний матеріал безкоштовного міні-курсу «Основи анімації в Actionscript 3.0».

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

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

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

До зустрічі в наступному уроці!