Подскачаща топка - портал за всичко интересно в дизайна
Стъпка 1. Нов документ
Създаваме нов флаш файл, Action Script 2 - ще бъдем ОК за един ден, защото няма да използваме Action Script
Стъпка 2 Настройки на документа
Редът и организацията са ключови при работа с флаш, така че преди да започнем да рисуваме нашата топка, нека наименуваме слоя. Кликнете два пъти върху "Layer 1" и го наречете "Ball".
Изберете "Oval Tool" - инструмент "Oval", задайте цвета на запълване и щрих, както е показано на снимката, и нарисувайте равен овал (задържайки "Shift"). Освен това в инспектора на свойствата задайте теглото на щриха на 3 px.
Стъпка 5. Създайте символ
Използвайки символи във flash, можете да създадете множество копия на един и същ обект в рамките на един и същи файл. Всички символи са налични в библиотеката със символи (Прозорец > Библиотека). Ако направите промени в символ, те се прилагат за всички негови копия във вашия файл.
Нека направим нашия кръг символ, който след това ще стане топка. Изберете целия кръг с щрих и натиснете F8. Наречете го "mc_ball" и изберете типа "Movie Clip", щракнете върху "OK".
Създайте нов слой, плъзнете го под слоя с топката. Наречете го "Shadow". Вътре в първия кадър на този слой нарисувайте овал, за да оформите сянката на топката. Изтрийте линията и задайте цвета на овала на #E2E0E5. Преобразувайте сянката в символ, както направихме с топката току-що и я наречете „mc_shadow“.
Стъпка 7. Позициониране (подравняване)
Поставете символите във височина приблизително на око, сякаш позицията на топката сега е на земята. В полето за подравняване (Window> Align) включете „To Stage“ (спрямо сцената) и подравнете двата знака хоризонтално.
Стъпка 8: Добавете ключови кадри
Създадохме нашите символи в тяхната основна форма, сега нека започнем да ги анимираме. Задръжте "Shift" и щракнете върху рамка 20 на двата слоя. Натиснете F6 (преобразуване на 20-ти кадър в ключови кадри). Ключов кадър във времевата линия означава, че нещо се случва там. Тази точка ще бъде нашият край на анимацията. С други думи, по време на тези 20 кадъра топката ще отскочи от земята, ще достигне най-високата точка и ще се върне на мястото си. По същия начин сянката също ще се промени - ще изсветли, когато топката е над земята, и ще възвърне наситеността си, когато топката е на земята.
Стъпка 9. Най-високата точка
Сега нека направим изстрел, където топката ще достигне най-голямата си височина. Изберете рамка 10 с shift и щракнете върху F6
Докато курсорът ни е в кадър 10, преместете символа на топката нагоре, както желаем. Изберете Free Transform Tool и направете символа в сянка по-широк.
Стъпка 11: Туининг
Tweening е, когато Flash автоматично генерира междинни кадри между множество символи или форми. Ще направим tween първата половина на анимацията - между кадър 1 и кадър 10. Щракнете върху който и да е кадър между кадри 1 и 10 и в панела със свойства изберете Tween: Motion. Ще забележите промяна - областта между рамките е станала лилава.
Стъпка 12 Лесен тигър
Преместете плъзгача напред и назад във времевата линия и ще видите, че топката и сянката са добре анимирани. Скоростта на движение обаче е напълно еднаква. Искаме топката да се забави, когато достигне най-високата точка, и можем да направим това с лекота (лекота - преведено лекота)
Отново - изберете който и да е кадър между 1 и 10 на двата слоя (в областта на tween) и вижтепанел със свойства. Променете Tweening на Ease out със стойност 100. Това ще забави нашата издигаща се топка.
Стъпка 13 Върнете се на Земята
Успешно анимирахме издигането на топката, сега нека повторим стъпките за tweening за кадри 11-20. Този път задайте параметъра за лекота на -100, така че нашата топка да се ускори, когато се приближи до земята.
Стъпка 14 Вижте го!
Натиснете Ctrl + Enter и можете да погледнете анимацията на топката, която правихме толкова дълго. Трябва да изглежда така:
Стъпка 15: Допълнителна нотка реализъм
Ако нашата топка е направена от нещо по-гъвкаво от диамант, формата на топката ще се промени, когато удари земята, ще се сплесне. Нека добавим последния кадър, той ще бъде 21-ви (F6). Докато сте в тази рамка, използвайте Free Transform Tool, за да изравните символа на топката от горния ръб. Задръжте клавиша Alt, за да заключите долната граница, докато трансформирате.
Стъпка 16: Внимание към детайла
Нашата скачаща анимация е готова. Сега трябва да добавим допълнителни детайли и движение към нашата топка. Щракнете двукратно върху символа на топка в който и да е от ключовите кадри, за да отидете на времевата линия на този символ. Ще видите вашето местоположение в долната част на времевата линия (забележка - за 9 флаш, но в други версии също ще видите, може би на различно място). Вмъкването трябва да бъде: "Сцена 1, mc_ball."
Стъпка 17 Втори слой
Щракнете върху иконата Add New Layer и създайте втори слой върху кръговия слой. Копирайте топката от първия слой (Ctrl + C) и поставете на същите координати (Ctrl + Shift + V) на нов слой. Сега наименувайте долния слой "Ball Spinning" и горния слой "Shade". Затворете слоя "Ball Spinning".
Стъпка 18 Изрежете
Работим върху слой със сянка. Направете някъде на работното поле кръг с голям диаметър, различен от цвета на топката.
Стъпка 19 Матова сянка
Тъй като този полумесец ни служи като сянка, би било добре да го направим "Multiply Opacity" (режим на смесване с фона - умножение). За да направим това, трябва да го конвертираме във филмов клип (изглежда вече сте направили това).
Стъпка 20 Вижте го!
Натискаме Ctrl + Enter и се наслаждаваме как работи нашата анимация, която правим толкова дълго. Трябва да е така:
Стъпка 21 Още векторни действия
След като приключим със сянката, можем да затворим слоя "Shade" (можете също да го направите невидим, за да улесните нещата) и да махнете отметката от слоя "Ball Spinning". Ще добавим шарка към топката, за да й придадем вид на плажна топка. С помощта на "Oval Tool" нарисувайте голям овал някъде върху работното пространство. Направете го с 1px бял щрих (#FFFFFF) и без запълване.
Стъпка 22: Премахнете излишното
Поставете този удар, както е показано на снимката, и го фиксирайте. Сега изберете частта от удара, която е извън топката, като просто щракнете върху нея. Както вече забелязахме в примера със сянката на полумесец, всички обекти се пресичаха и бяха пресичани от точките на пресичане. Изтриване на външната част на щриха (Изтриване)
Стъпка 23 Повторете и оцветете
Начертайте още няколко подобни овала и ги поставете върху кръга-топка, така че да се пресичат някъде. Изтрийте външните части на овалите. Овалите не трябва да са еднакви, просто се опитайте да направите нещо подобно на това на снимката по-долу. Това, което направихте, са сегментите, които вече могат да бъдат оцветени индивидуално.
Стъпка 24Проверка!
Оцветете получените сегменти с #EA512D и премахнете всички части от бялата линия от чертежа. Натиснете Ctrl + Enter и се насладете на резултата от това, което сме правили толкова дълго. Трябва да е нещо подобно:
Стъпка 25: Как се въртят топките
Нека добавим последната част от движението към нашата анимация, карайки топката да се върти бавно, докато скача. За да направим това, първо трябва да символизираме топката на слоя "Ball Spinning" - нека наречем този символ "mc_ball_base". Можете да видите, че е добавен към библиотеката (Прозорец > Библиотека).
Стъпка 26 Добавете рамки
Изберете кадър 32 на слоя "Въртяща се топка" и натиснете F6, за да създадете ключов кадър. След това на рамка 32 на горния слой със сянка натиснете F5. Това ще създаде нови кадри, но тъй като нищо не се променя там, нямаме нужда от ключови кадри в слоя със сенките. Трябва само, когато плъзгачът преминава през всички рамки, символът на сянка да присъства навсякъде. Защо избрахме рамка 32? Е, като правим това, искаме нашата топка да се върти веднъж на всеки 32 кадъра. Нашата топка удря земята на всеки 20 кадъра, така че тази десинхронизация на анимациите ще изглежда добре, топката ще удря земята с различна картина всеки път. Ако не разбирате сега, ще разберете по-късно.
Стъпка 27 Завъртете Twin
Изберете който и да е кадър във времевата линия на слоя с топката и отидете до панела със свойства. Както направихме с подскачащата топка, инсталирайте Tween: Motion. Този път не искаме „Ease“, искаме топката да се върти плавно и монотонно. Изберете „CW“ (по посока на часовниковата стрелка) от падащото кибритено меню „Завъртане“ и оставете „1“ в полето „пъти“ – това число означава колко пъти ще се завърти обектът. Разбира сеслоят "Shade" тук не работи, сянката ще остане на едно и също място през цялото време.
Ура, успяхте! Натиснете Ctrl + Enter, за да се уверите, че всичко е както искате. Ако имате нужда от промени, можете да промените броя на кадрите, размера на топката, колко ще се върти около оста си и т.н.