SWiSH Forum

[^shastaan]

W związku z prośbami, które otrzymywałem różnymi kanałami x] od użtkowników forum zabrałem się za tutorial dotyczący animacji poklatkowej i budowy takich stron jak www.maciejkostecki.com i www.maciejkostecki.com/lala .

Domyślam się, że każdy średnio-zaawansowany i zaawansowany animator uzna to wszystko za oczywiste, zarówno w swishu, flashu jak i w innych programach służących do animacji. W związku z tym poniższy tutorial jest przeznaczony dla początkujących swishowców (choć może nie tylko swishowców), ostrzegam więc, że może znudzić tych bardziej doświadczonych i treścią i formą.

Zanim zacznę wytłumaczę jeszcze jedną rzecz :]
Nie, nie udostępnie plików źródłowych stron lali ani maciejkostecki.com bo jest tam bardzo dużo rzeczy, których pokazywać nie chcę i bardzo dużo rzeczy, które są wam niepotrzebne. Poza tym, znając niektórych użytkowników tego forum, za pół roku roiłoby się od stron zbudowanych identycznie tylko ze zmienionymi grafikami i dźwiękami ;]
Ideą tego tutoriala jest to, byście wiedzieli jak się takie rzeczy robi i dzięki tej wiedzy potrafili zrobić to SAMODZIELNIE, dokładnie tak jak potrzebujecie.
Dlatego nie animujemy dzisiaj lali ani drzewa tylko piłeczkę. Piłeczka jest bardzo prostym przykładem ale każdemu, komu będzie się chciało nad tym zastanowić wyjaśni wszystko co potrzebujecie wiedzieć i pozwoli zbudować znacznie bardziej wypasione interaktywne animacje.

Przy okazji postaram się wytłumaczyć pare rzeczy, których nie widzialem nigdzie w języku polskim więc pewnie ktoś się z nich ucieszy.

Do rzeczy :] - Animacja piłeczki

Część pierwsza - zrozumieć obiekt.

Za każdym razem gdy zabierasz się do animacji czegokolwiek, musisz poznać zasady według których to coś sie porusza.
W naszym przypadku musimy zrozumieć jak zachowuje się piłka, gdy odbija się od ziemi.
Pozornie jest to proste. Każdy wie, że porusza się w dół aż uderzy w ziemię a potem w góre gdy się od niej odbija.
Niestety, aby nasza animacja wyglądała realistycznie dla ludzi, którzy wiedzą właśnie tyle, my musimy wiedzieć więcej.

Weź piłkę do tenisa, balonik, piłkę do kosza - najlepiej kilka różnych piłkopodobnych rzeczy. Zacznij je odbijać od ziemi i znajdywać różnice. Zauważysz, że jedne są bardziej sprężyste, inne mniej, jedne są cięższe, drugie lżejsze, jedne poruszają się szybciej, drugie wolniej, odkształcają się mniej lub bardziej... :]
Jak zdamy już sobie sprawę ze złożoności problemu, możemy sobie odpowiedzieć na pytanie jak będzie się zachowywać nasza piłka, możemy połączyć cechy różnych na przykład sprężystość balonu z prędkością strusia pędziwiatra... no dobra zapędziłem się ale taka jest idea - przesadzając robimy większe wrażenie na odbiorcy (jeśli zachowamy umiar)...

http://farm3.static.flick..._d0f16fd9a6.jpg - ten obrazek znalazłem wpisując w googla "ball animation" i wydaje mi sie, że łatwo na nim wytłumaczyć najważniejsze rzeczy:
1 - gdy pilka spada to przyspiesza - blizej ziemi pedzi znacznie szybciej (pilki na poszczególnych klatkach są od siebie oddalone) niż gdy zaczyna spadac i jest wysoko (pilki są gęste)

2 - gdy uderza w podłoże zgniata się w pionie - nie może się jednak zgnieść w pionie bez rozciągnięcia w poziomie bo nie bylaby zachowana objętość i nie wyglądałoby to realistycznie

3 - po zgnieceniu i rozgnieceniu się (odbiciu) piłeczka odrywa się od ziemi z dużą siłą i zaczyna pędzić do góry, grawitacja sprawia jednak, że zwalnia więc odległości między piłeczkami w poszczególnych klatkach znów zaczną się zmniejszać.

Możemy szukać kolejnych reguł ale dla potrzeb tego tutka/artykułu to nam powinno wystarczyć więc zakończmy analizę ruchu i przejdzmy do animacji.

Część druga - animacja automatyczna

Współczesne aplikacje do animacji oferują nam wspaniałe narzędzia do płynnego i automatycznego łączenia klatek kluczowych przez generowanie klatek pomiędzy nimi (na tym polegają tweeny we flashu adobe i efekty swisha, takie jak "move", czy "fade in").

Odpal link - www.maciejkostecki.com/tutorial/ball/1.html (jeśli chcesz ściągnąć plik źródłowy zmień w adresie "html" na "swi")

Mamy kreske i kulke oddalone od siebie o 300 pikseli. Dlatego też, aby odbić pilke od ziemi, dodalem jej na timeline efekt move (down by 300) i zaraz po nim efekt move (up by 300) aby pileczka po odbiciu wróciła na swoje miejsce.

Bardzo proste i bardzo lekkie - html i swf zajmują razem 2kB xD.
Niestety mało efektowne i mało realne.

Zróbmy więc, żeby było bardziej realne:

Dodajmy easing (przyspieszenie) pod właściwościami efektów move i zgniećmy nieco pilkę przy uderzeniu o ziemie aby dodać jej sprężystości (kolejne dwa efekty move, tym razem ze skalowaniem). W trakcie okaże się, że trzeba wydłużyć spadanie i wznoszenie się z 10 do 15 klatek żeby nie było przeskoków tempa między efektami.

www.maciejkostecki.com/tutorial/ball/2.html (źródło - 2.swi)

No i to mogłoby nas w niektórych przypadkach satysfakcjonować - nie wdajemy się w szczegóły ale piłka jest i się odbija i to w miare mało topornie.

Część trzecia - animacja poklatkowa

W tym poscie chcialem jednak wyjasnic dlaczego i jak robi się animacje poklatkowe.
Tak więc w przypadku lali, jak i mojej strony z drzewem, jest jasne, że nie dałoby się tego zrobić narzędziami do rysowania dostępnymi w swishu czy flashu.
Co więcej, ani w swishu ani we flashu nie ma parametru "głupkowatość ruchu" dla obiektów typu "lala" co ogranicza nam pole do popisu przy animacji automatycznej podczas gdy animacja poklatkowa nadal jest nieograniczona bo zachodzi właściwie poza flashem czy swishem.

maciejkostecki.com zostala wyanimowana (albo jest animowana bo daleko do końca) w photoshopie, po prostu przygotowałem sekwencje rysunków, które pokazywane w odpowiedniej kolejności tworzą złudzenie ruchu.

lala została natomiast wyanimowana w studio fotograficznym - ustawienie lali, swiatla, ekspozycji, pstryk, przesunięcie lali, pstryk, przesunięcie lali, pstryk, przesunięcie lali, pstryk... i tak duuuużo razy bo sekwencji jest 5.

Z naszą piłeczką zróbmy podobnie.
Załóżmy, że chcemy, by miała rysunkowy charakter więc rysujemy ją odręcznie w photoshopie, czy w gimpie czy w paincie, co tam lubimy... (moja wygląda brzydko bo mi sie tablet zepsuł :/ ale nie o to tu chodzi)

Ja przygotowałem sobie 9 jpgów (pamiętając o zasadach z części pierwszej) od góry do uderzenia w ziemie i zapisałem je w baaardzo kiepskiej jakości, żeby mało ważyły (wrócimy do tego tematu potem).
Pamiętajcie, że już w trakcie rysowania tworzycie właściwą animację. Żeby sprawdzić, czy wszystko poszło dobrze, zróbcie sobie test - najprościej wgrać te jpgi do jednego katalogu, otworzyć przeglądarką do bitmap i klikać następne, następne, następne, w takim tempie by odtworzyla się animacja (możecie sprawdzić na www.maciejkostecki.com/tutorial/ball/jpg.rar jeśli nie robicie swoich jpgów).
Jeśli coś wam się nie podoba, musicie poprawić to już na tym etapie.

Teraz importujemy obrazki do swisha używamy na timeline prostego place by pokazać jak piłka spada i remove aby pokazać jak wraca (zauważcie, że wyanimowaliśmy tylko połowę by potem odwrócić animację i oszczędzić sobie pracy).

www.maciejkostecki.com/tutorial/ball/3.html (źródło 3.swi)

Działa i ma zupełnie inny charakter niż animacja automatyczna. Nie ma szału bo zrobiłem to bardzo szybko i niedbale niemniej różnica jest.
Niestety jest też różnica w wadze - zapisane za pomocą "save for web and devices" jpgi są skompresowane jak w tramwaju - zajmują po 8-9kB a tak krótka animacja zajmuje już 50kB. Trzeba mieć świadomość tego problemu, zapisane jak bądź jpgi lub png czy gify (bo często takich będziemy potrzebować), szczególnie w kilku dłuższych sekwencjach mogą spowodować, że będziemy mieć prześliczną animację ważącą 18MB co kompletnie pozbawi ją jaiejkolwiek funckjonalności - nikt jej nie zobaczy bo nie będzie chciał czekać aż sie załaduje ;] Dlatego trzeba kompresować maksymalnie co się da (może poza tymi klatkami, na których animacja się zatrzymuje).

Teraz dodajmy sobie trochę interaktywności skryptami i mamy stronę służącą do odbijania piłeczki:

www.maciejkostecki.com/tutorial/ball/4.html (źródło 4.swi)

Mam nadzieję, że trochę wyjaśniłem.
Oczywiście nie wyjaśniłem wszystkiego i pojawią się pytania. Na te mądre odpowiem z przyjemnością. ;]

Źródło: blog.kreopka.pl