Пам’ятаєте, у одній із попередніх статей ми навчалися малювати м’ячик, використовуючи векторні інструменти Flash. Сьогодні ми підемо трішки далі і спробуємо змусити цей м’ячик застрибати.
Для роботи ви можете використати уже готовий Flash-файл з намальованим м’ячиком, або ж, користуючись покроковою інструкцією з попередньої статті, намалювати м’ячик по-новому.
- Перше, що ми зробимо – це відконвертуємо наш м’ячик в символ (Movie Clip) і трішки його зменшимо, щоб зручніше було працювати. Розміри сцени збільшимо, щоб у м’ячика було місце для стрибків. Тип Movie Clip вибрано для того, щоб вкласти анімацію у сам м’ячик (він не лише стрибатиме, але й буде обертатися).
- Заходимо в режим редагування нашого символу і знову конвертуємо м’ячик на символ, цього разу вибираючи тип Graphic.
- Додаємо два ключові кадри у 15 і 30 кадрах. Повертаємо наш м’ячик трішки менше, ніж на 180 градусів у 15-му і трішки менше, ніж на 360 градусів у 30-му кадрі. Створюємо класичну анімацію руху (детальніше про classic tween можна прочитати у відповідній статті). Якщо все зроблено правильно, то при публікації наш м’ячик повинен рівномірно обертатися навколо своєї осі.
- Повертаємося в режим редагування нашого першого символу Movie Clip, додаємо ще один шар (layer) і з допомогою інструмента лінія (line tool) малюємо землю так, щоб м’ячик своєю нижньою частиною дотикався до неї.
- Повертаємося до шару з м’ячиком і вставляємо два ключових кадри (20 і 40). У 20-му кадрі зміщуємо м’ячик вгору на відстань його стрибка. Створюємо класичну анімацію руху (classic tween) у обидвох проміжках. Тепер наш м’ячик почав літати вверх-вниз.
- При стрибку м’ячик повинен рухатися не плавно, а зі сповільненням. Найбільша швидкість у нього буде в момент відштовхування від землі, а далі, по мірі набирання висоти, вона буде сповільнюватися (оскільки в реальності на м’ячик діють звичайні фізичні сили, як от тертя повітря та гравітація). Завдання аніматора – передати ці фізичні сили у кліпі.
- Наш кліп фактично готовий. Але для повної реальності йому не вистачає всього однієї невеличкої деталі. Б’ючись об землю м’яч повинен деформуватися. Для цього додаємо 41-ий ключовий кадр (м’яч на землі), в якому з допомогою інструмента вільна трансформація (Free Transform Tool) «розплющуємо» м’ячик по-вертикалі.
- Зберігаємо та публікуємо наш кліп. Повинно вийти щось таке:
Оскільки земля змінюватися не буде – розтягуємо тривалість цього шару на весь кліп (скажімо, 40 кадрів). Для цього вставляємо ключовий кадр на 41 кадрі.
Але погодьтеся, поки-що ілюзії стрибка, на жаль, не виникає. М’ячик просто плавно рухається і обертається навколо своєї осі. Та це не біда – в наступному кроці ми це виправимо.
На щастя розробники флеш вклали стандартну функцію пришвидшення та сповільнення автоматичної анімації у саму програму, тому нам не доведеться ламати голову, як це зробити вручну. Функція називається Ease (сповільнення) і вимірюється від -100 (максимальне пришвидшення) до +100 (максимальне сповільнення).
Для того, щоб вставити цю функцію, вам потрібно обрати спершу проміжок між 1-им та 20-им кадром і в панелі опцій вибрати максимальне сповільнення (коли м’ячик підстрибує вгору – він сповільнюється). Для цього вписуємо параметр ease – “100″.
У другому проміжку (між 20-им та 40-им кадром) вписуємо параметр ease – “-100″, оскільки, наближаючись до землі м’ячик повинен пришвидшуватися.
Сподіваюся, сьогоднішній урок був для вас цікавим. Залишайтеся на зв’язку! Думаю, в наступних публікаціях ми зробимо цей м’ячик інтерактивним (він реагуватиме на дії користувача).
Липень 16, 2009 о 00:29
“Думаю, в наступних публікаціях ми зробимо цей м’ячик інтерактивним (він реагуватиме на дії користувача).”
А можна зробити так, щоб, коли я піду готувати собі каву, анімація автоматично призупинялася?
А якщо серйозно, то дуже добре та детально описано послідовність дій. Мені б, напевно, забракло снаги усе це описати у текстовому форматі.