[Tutorial] Tworzenie animacji dla ambitniejszych.

[_VergiL_]

Na początku postaram się wam przyswoić teorię

Przed uruchomieniem programu należy wiedzieć co nieco o formatach plików, na których to będziemy pracować. Podczas edycji naszego filmu posługujemy się plikiem z rozszerzeniem *.fla. Jest to najważniejszy plik, bez którego praktycznie niemożliwa jest edycja naszej animacji. Wszytkie animacje będziemy zapisywać z końcówką *.fla, to jest niewyjęte.

Co do wyglądu flasha, jest on podzielony min. na :

Warstwy (layers)

Jest to kluczowy element programu, w warstwach zapisujemy klatki w których są animacje.Panel warstw jest domyślnie widoczny w górnej części ekranu, możemy go ukryć odznaczając w menu Viev opcję Timeline (Ctrl+Alt+T).

 

 

Najlepiej nadawać naszym warstwom nazwy, gdyż później, przy zaawansowanej stronce, gdzie użyjemy 50 layerów, jest naprawde trudno się połapać.

 

Trzeba również wspomnieć, że warstwy można bezpośrednio przenosić, z góry na dół i na odwrót, można tez je b. łatwo kasować używająć klawisza Delete (usuń).

 

Warstwom możemy nadawać określone właściwości, co znacznie ułatwi i przyspieszy naszą pracę.

 

No to tyle, co do warstw, posuńmy się dalej do Pól klatek animacji.

 

Oto nasz Timeline - lina czasowa klatek,jest tu dokładnie zobrazowane ilość klatek, do czasu w którym są animacje wykonywane.

 

http://www.members.lycos.co.uk/slimlest ... /wpe67.jpg

 

W zależności od tego, co znajduje się w danej klatce może ona przybierać rozmaite formy:

 

http://www.members.lycos.co.uk/slimlest ... /wpe69.jpg

 

- Klatka z czarną kropką to klatka kluczowa, znajduje się w niej obiekt, który jest przez nas animowany. Klatki kluczowe możemy wstawić klikając prawym przyciskiem myszy w odpowiednim miejscu na listwie czasowej i wybierając opcję Isert Keyframe, lub o wiele szybszym sposobem, preferowanym również przezemnie - klikająć F6.

 

- Pusta, szara klatka oznacza, że nic w niej nie ma ani nie zachodzi w niej żadna akcja, nie występuje tam żadna animacja etc.

 

- Klatka ze znakiem "a" informuje nas o tym, że został do niej dodany jakiś skrypt w języku ActionScript, czyli po prostu ta klatka wykonuje jakąś akcje.

 

 

- Jeżeli klatki są podświetlone na niebiesko, a między nimi jest widoczna strzałka, oznacza to, że trwa akcja ruchu (motion).Można wykonać motion klikając prawym przyciskiem i naciskając : Creat Motion TWEEN !!

 

- Klatki podświetlone na zielono z umieszczoną pomiędzy nimi strzałką informują nas o zachodzącej akcji zmiany kształtu (shape).

 

Na dole mamy podaną liczbę klatek wyświetlanych na sekundę, oraz czas trwania filmu w sekundach do klatki w której się znajdujemy. Można wykonać shape klikająć prawym przyciskiem i naciskając : Creat Shape TWEEN !!

 

Kiedy klikniemy prawym przyciskiem myszy na wybranej klatce na listwie czasowej, naszym oczom ukaże się następujące menu :

 

 

Opiszę wam teraz tak w skrucie funkcje tego menu :

 

-Create Motion Tween - wybranie tej opcji powoduje utworzenie akcji ruchu pomiędzy sąsiednimi klatkami kluczowymi;

-Insert Frame - wstawia w miejscu pustą klatkę;

 

-Remove Frames - kasuje zaznaczone klatki;

 

-Insert Keyframe - wstawia klatkę kluczową;

 

-Insert Blank Keyframe - wstawia pustą klatkę kluczową;

 

-Select All - zaznacza wszystkie klatki we wszystkich warstwach;

 

-Cut Frames - wycina zaznaczoną klatkę;

 

-Copy frames - kopiuje zaznaczoną klatkę;

 

-Paste Frames - wkleja w wybrane miejsce wyciętą lub skopiowaną klatkę;

 

-Reverse Frames - odwraca kolejność zaznaczonych klatek;

 

-Actions - dodaje akcje do wybranej klatki;

 

-Panels - do wyboru Frame i Sound, otwiera zakładki z panelu instance pozwalające np. nadać nazwę klatce (label) lub dodać do niej dźwięk.

 

 

Następna ważna rzecz : Pole Pracy

 

Pole Pracy to duże pole, którego właściwości określamy wybierając opcję MOVIE z menu MODIFY. To właśnie tutaj edytujemy

i rysujemy nasze obiekty. Tworzenie obiektów jest banalnie proste i sprowadza się do opanowania Toolbaru, widocznego

z prawej strony, którego opcje przypominają te z Windowsowego Painta.

 

Wybierając opcję MOVIE z menu MODIFY naszym oczom ukaże się okno

 

 

Oto możliwe zmiany:

Background Color - definiujemy kolor tła, domyślnie biały.

 

Frame Rate -ilość klatek wyświetlanych na sekundę. Im większą wartość wpiszemy w tym polu, tym nasz film będzie płynniejszy i szybszy. Domyślna wartość to 12, ja jednak polecam eksperymentowanie z filmem począwszy od 24 fps?ów. Oczywiście należy uważać, gdyż im większą wartość ustawimy, tym większe kłopoty z odtwarzaniem filmu będą miały gorsze komputery.

 

Dimension -tu określamy rozmiar Pola Pracy dla naszego filmu. W polu Widt definiujemy szerokość, a w Height wysokość. Wartości te określamy domyślnie w pixelach (px). Jednostki możemy zmienić w okienku Ruler Units.

 

Grid Spacing i Show Grid -w Grid Spacing ustalamy wielkość siatki a samą siatkę wstawiamy zaznaczając opcję Show Grid.

 

Ruler Units -tu wybieramy jednostki, w jakich chcemy pracować (pixele, inche).

 

 

No i ostania rzecz, jeżeli chodzi o teorię, czyli Obiekty :

 

Obiekty, które wędrują do wspomnianej wcześniej biblioteki. W polu Name wpisujemy nazwę dla nowego obiektu, a następnie zaznaczamy obiekt, który chcemy utworzyć i klikamy na OK .Aby otworzyć biblioteke naciskamy CTRL + L (control + l = library).

 

Właściwości obiektów:

 

Movie Clip -klip filmowy. Dobrze jest nauczyć się od razu robić wszystkie animacje w klipach, a następnie umieszczać je na głównej listwie czasowej przeciągając klipy z biblioteki na Pole Pracy.

 

Button -przycisk. Domyślnie po utworzeniu przycisku zobaczycie listwę czasową z jedną warstwą, w której znajdują się cztery klatki oznaczone odpowiednio Up, Over, Down i Hit. Klatka Up odpowiada za standardowy wygląd przycisku, w klatce Over znajduje się przycisk po najechaniu na niego myszką (pamiętając, że do klatek możemy wstawić także klipy, w polu Over może się znaleźć jakaś animacja). Klatka Down odpowiada za wygląd buttona podczas jego przyciśnięcia, a Hit zawiera obszar, który należy do danego przycisku (nie jest wyświetlany w animacji).

 

Graphic -statyczny obiekt graficzny. To zwykła grafika, zaimportowana lub stworzona w programie.

 

COMMON LIBRARIES

 

Z menu Window możemy wybrać Common Libraries, gdzie do wybory mamy zestaw gotowych elementów do umieszczenia

w naszej animacji. Zbiór zawiera takie elementy jak przyciski, grafiki, gotowe klipy filmowe, czy krótkie lekcje i wskazówki.

 

A teraz czas na naszą pierwsza animacje.

 

Pierwszą rzeczą, o którą musimy zadbać podczas tworzenia każdej animacji, są cechy naszego Pola Pracy a tym samym całego filmu. Aby je edytować posłużymy się panelem Movie Properties (Modify/Movie lub Ctrl+M). Szerokość naszego Pola Pracy ustawiamy na 400px (Width),

a wysokość na 100px (Height). Kolor tła zróbmy czarny, a liczbę odtwarzanych na sekundę klatek na 24 (fps). Resztę opcji pozostawiamy bez zmian.

http://www.members.lycos.co.uk/slimlest ... /wpeAE.jpg

 

Teraz, kiedy już ustawiliśmy właściwości naszego filmu możemy zabrać się do rysowania kwadratu. Zanim to zrobimy wybieramy klatkę w której powstanie nasz kwadrat- będzie to pierwsza klatka w warstwie "Layer 1", która jest domyślnie klatką kluczową. Nasza klatka oraz warstwa "Layer 1" podświetliła się na czarno- to znak że możemy rozpocząć w niej pracę.

 

http://www.members.lycos.co.uk/slimlest ... /wpeAF.jpg

 

Z panelu z narzędziami znajdującego się po lewej stronie wybieramy Rectangle Tool- symbol kwadratu (lub wciskamy W). Wypełnienie dla naszego kwadratu ustawiamy na szare, linię zrobimy białą .

 

http://www.members.lycos.co.uk/slimlest ... /wpeB0.jpg

 

W panelu Stroke (Window/Panels/Stroke) możemy także wybrać styl i grubość naszej linii. Możemy już narysować kwadrat z lewej strony Pola Pracy. Jego wymiary są na razie nieważne, gdyż zaraz zmienimy je w panelu Info. Kiedy narysujemy kwadrat, w klatce, w której pracujemy pojawi się czarna kropka, co oznacza że jest to klatka kluczowa zawierająca jakiś obiekt. Teraz wybieramy narzędzie Arrow Tool (lub wciskamy V), a następnie zaznaczamy nasz obiekt klikając lewym przyciskiem myszy na wolnej przestrzeni i przeciągając kursor tak, by objął cały nasz rysunek (tak, jak to się robi przy zaznaczaniu kilku plików w Windowsie). Kiedy już kwadrat zostanie zaznaczony otwieramy panel Info (Ctrl+Alt+i) i wpisujemy wartości dla W i H- po 30px.

 

http://www.members.lycos.co.uk/slimlest ... /wpeB1.jpg

 

Obiekt zmienił swoje rozmiary, teraz umieśćcie go w lewym dolnym rogu Pola Pracy. Pozostało nam utworzenie akcji ruchu i dodanie kilku efektów. Akcję ruchu tworzymy klikając prawym przyciskiem myszy na klatce kluczowej i z dostępnych opcji wybierając Create Motion Tween. Klatka podświetliła się na niebiesko. Następnym krokiem jest umieszczenie klatki kluczowej w 50 klatce naszej animacji. Aby to uczynić wybieramy 50 klatkę na listwie czasowej i wciskamy klawisz F6. Obszar pomiędzy klatkami podświetlił się na niebiesko i pojawiła się czarna strzałka.

 

http://www.members.lycos.co.uk/slimlest ... /wpeB2.jpg

 

Nadal będąc w 50 klatce wybieramy narzędzie Arrow Tool, klikamy na kwadrat i przeciągamy go na wschód:), tak , by znalazł się przy prawej krawędzi Pola Pracy. Teraz powiększamy nasz obiekt klikając na nim prawym przyciskiem myszy, wybierając Scale i "ciągnąc" w górę za wybrany róg kwadratu. Następnie pozycjonujemy powiększony kwadrat tak, by nie wystawał poza pole pracy.

 

Jeśli wciśniemy teraz Enter, zobaczymy jak nasz kwadrat przesuwa się i powiększa. Teraz pozostaje nam sprawić, by stopniowo znikał. Dokonujemy tego klikając na 50 klatkę i w panelu Effect (Window/Panels/Effect) wybieramy opcję Alpha, której wartość ustalamy na 0%

 

http://www.members.lycos.co.uk/slimlest ... /wpeB3.jpg

 

ogiczne jest, że gdybyśmy w 50 klatce nie wybrali żadnego efektu, a w pierwszej ustawili Alpha na 0%, nasz kwadrat stopniowo by się pojawiał. Wróćmy do 1 klatki i w okienku instance (Ctrl+i), zakładce Frame ustawmy Tweening na Motion, Rotate na CV, a liczbę obrotów

( .. times) ustawmy na 1.

 

http://www.members.lycos.co.uk/slimlest ... /wpeB4.gif

 

Później naciskamy ENTER, i wszystko powinno śmigać, kwadrat powinien lecieć z lewej na prawą i znikać tak jak tu : KLIK

 

Dobra, teraz coś trudniejszego, czas na zmiane kształtu obiektu ...

 

Na początku utwórzmy nowy film i ustalmy właściwości Pola Pracy. Mam nadzieję, że z tym zadaniem poradzicie sobie już sami, nie chcecie przecież słuchać czwarty raz tego samego;). Teraz wybieramy pierwszą klatkę naszej warstwy (nazwałem ją "shape") i rysujemy w niej dowolny kwadrat. Następnie w klatce 30 naszego filmu wstawiamy pustą klatkę kluczową. Aby to zrobić klikamy prawym przyciskiem myszy na 30 klatce i wybieramy Insert Blank Keyframe. W miejscu naszego kwadratu rysujemy koło... aby miało ono podobne wymiary i położenie posługujemy się panelem Info. Kiedy już mamy gotowe koło wracamy do pierwszej klatki i wybieramy dla niej właściwości: z okienka Instance (Ctrl+i), zakładki Frame, wybieramy

z rozwijanego menu przy opcji Tweening funkcję Shape.

 

http://www.members.lycos.co.uk/slimlest ... /wpeC5.jpg

 

Na naszej linii czasu między klatkami powinna się pojawić czarna strzałka na zielonym tle.

http://www.members.lycos.co.uk/slimlest ... /wpeC6.jpg

 

Jeśli teraz naciśniemy Enter zobaczymy już jak nasz kwadrat płynnie przechodzi w koło. To jednak nie koniec, postaram się jeszcze zapoznać Was z przydatną funkcją Shape Hints. Funkcja ta pozwala dostosować tor, według którego będzie przebiegać zmiana kształtu. Zaznaczamy pierwszą klatkę i w menu Modify wybieramy opcję Transform i Add Shape Hints (Ctrl+Shift+H). Pojawiło się małe, czerwone kółeczko z symbolem litery A. Powtórzmy tą operację jeszcze trzy razy, tak aby wyświetliły się literki od A do D. Teraz umieśćmy te literki w narożnikach kwadratu.

 

http://www.members.lycos.co.uk/slimlest ... /wpeC7.jpg

 

Przejdźmy do klatki w której mamy kółko. Tutaj znajdują się już nasze literki, należy je jeszcze odpowiednio rozmieścić. Ja zrobiłem to tak jak na screenie, ale warto sobie pokombinować, rozwiązań jest bardzo wiele.

 

http://www.members.lycos.co.uk/slimlest ... /wpeC8.jpg

 

Nasze kółeczka podświetliły się na zielono, co oznacza, że wszystko zrobiliśmy dobrze i zostały nadane Shape-Hinty. Nasza animacja jest gotowa.

 

Przed ostatnim efektem którego się pouczymy, będzie efekt MASKI ...

 

W tej części kursu postaram się Was nauczyć dwóch rzeczy. Po pierwsze tworzyć efekt maski, po drugie posługiwać się obiektami Graphic oraz Movie Clip. Na początku tworzymy nowy Movie Clip. W menu Insert wybieramy New Symbol (Ctrl+F8),

a następnie ustalamy jego nazwę i zachowanie na Movie Clip.

 

http://www.members.lycos.co.uk/slimlest ... /wpeCF.jpg

 

Klikamy OK. Tak powstał nasz pierwszy klip filmowy. Możemy w nim wykonywać wszystko to, co robiliśmy na głównym Polu Pracy. Korzystanie z klipów ułatwia jednak pracę i pomaga zachować porządek. O tym, w jakim klipie aktualnie się znajdujemy informuje nas napis powyżej panelu warstw:

 

http://www.members.lycos.co.uk/slimlest ... /wpeD0.jpg

 

Na początek stwórzmy dwie warstwy. Górną nazwijmy "maska", a dolną "napis". Przejdzmy do 1 klatki warstwy napis i wpiszmy do niej tekst za pomocą narzędzia ( Text Tool), wybierając je z panelu Tools bądź wciskając A. W panelu Character możemy ustawić opcje dotyczące tekstu- kolor tekstu ustawiamy na biały. Ja wpisałem przykładowo słowo "kalafior". Nadal znajdując się w warstwie "napis", wstawmy teraz pustą klatkę do 35 klatki animacji (F5).

 

http://www.members.lycos.co.uk/slimlest ... /wpeD2.jpg

 

Przechodzimy do pierwszej klatki warstwy maska i rysujemy w niej wąski prostokąt troche wyższy od naszego tekstu i szerokości mniej więcej 30px. Kolory prostokąta nie grają roli, nie będą widoczne na animacji. To będzie obiekt, który ma "odsłaniać" nasz napis. Możemy go dodatkowo trochę pochylić stosując opcję Rotate. Ustawiamy prostokąt tak, aby znalazł się przed tekstem

i animujemy go od prawej strony do lewej, do końca tekstu, tak jak to robiliśmy w pierwszej animacji z kwadratem. Koniec animacji powinien się znaleźć w 35 klatce (jeśli zrobiliście inaczej bardzo łatwo możecie przenosić klatki kluczowe klikając na nich i przeciągając je w prawo lub w lewo).

 

http://www.members.lycos.co.uk/slimlest ... /wpeD3.jpg

 

Teraz klikamy na warstwę "maska" prawym przyciskiem myszy i wybieramy opcję Mask. Właściwości niższej warstwy zostaną automatycznie ustawione na Masked, a my zobaczymy coś takiego:

 

http://www.members.lycos.co.uk/slimlest ... /wpeD4.jpg

 

UWAGA: Po wykonaniu tej operacji, warstwy zostaną zablokowane, aby dokonywać w nich zmian musimy je uprzednio odblokować odznaczając ikonkę kłódki. Pamiętajmy, aby przed odtwarzaniem animacji znów zamknąć warstwy. To oznacza,

że w warstwie "maska" mamy obiekty, którymi odkrywamy te z warstwy ?napis?.

 

Już teraz jeśli naciśniemy Enter zobaczymy ciekawy efekt. My jednak chcemy zrobić coś troszkę innego, tak żeby napis był cały czas widoczny. W tym celu tworzymy nową warstwę (ikonka Add Layer), nazywamy ją "tło" i umiejscawiamy najniżej, pod dwiema dotychczasowymi warstwami. Do warstwy tło kopiujemy pierwszą klatkę z warstwy napis klikając na niej prawym przyciskiem, wybierając opcję Copy Frames,a następnie wstawiamy ją do 1 klatki warstwy "tło" poleceniam Paste Frames. Wybieramy narzędzie Text Tool (A) i zmieniamy kolor naszego tekstu na szary. Wstawiamy pustą klatkę do klatki 35 animacji, dzięki czemu nasza listwa czasowa prezentuje się następująco:

 

http://www.members.lycos.co.uk/slimlest ... /wpeD5.jpg

 

Skończyliśmy już prace nad naszym Movie Clipem, teraz wystarczy go tylko umiejscowić na głównym Polu Pracy. Klikamy na ikonkę aby powrócić do głównej części naszej animacji. Otwieramy bibliotekę (Ctrl+L), z której nasz Klip Filmowy przeciągamy na Pole Pracy (tak, jak to się robi z Windowsowymi folderami) i pozycjonujemy. Klip automatycznie znajdzie się

w pierwszej klatce pierwszej warstwy. Oprócz klipu w bibliotece znajduje się także obiekt Graphic, w którym jest nasz prostokąt. Klikając dwukrotnie na tym obiekcie przeniesiemy się do okna, w którym możemy edytować rysunek. Zapisywanie rysunków jako obiekt Graphic jest przydatne wówczas, kiedy jednego rysunku używamy w wielu klipach i do wielu animacji. Wówczas nie musimy go wszędzie poprawiać jeśli wystąpi błąd, robimy to jedynie w danym obiekcie Graphic. Jeśli wciśniemy Ctrl+Enter, zobaczymy owoc naszej pracy w pełnej okazałości.

 

Dobra, pozostała ostatnia część lekcji ... lecz najważniejsza, mianowicie BUTTON

 

 

Stworzymy zaraz przycisk będący odnośnikiem do strony WWW, do którego dodamy dźwięk oraz sprawimy, by po najechaniu nań myszką odtwarzała się animacja. Aby wykonać przycisk najpierw tworzymy nowy obiekt button (Ctrl+F8) i nadajemy mu dowolną nazwę. Następnie w klatce kluczowej przycisku (UP) rysujemy prostokąt o wymiarach 100x25px. Wypełniamy go na szaro, obramowanie standardowo białe grubości 1,5px. Tło naszej animacji ustawiliśmy wcześniej jak zwykle na czarne. Na przycisku piszemy dowolny tekst, ja napisałem "kupa".

 

http://www.members.lycos.co.uk/slimlest ... %b3u01.JPG

 

Klatkę kopiujemy do pozostałych trzech: OVER, DOWN i HIT. Spróbujemy teraz zrobić coś takiego, aby po najechaniu myszką na nasz przycisk zmienił on kolor na inny, tak jak na obrazku załączonym powyżej, to nie trudne wystarczy zmienic klatke i kolor buttona. I tak z 4 klatkami, na końcu wychodzimy do Scene 1 i kopiujemy ten button z Library.T

[Makin]

Bardzo dobry TuTek... twój? Jeśli tak to bardzo ładnie napisany.

[xardasnekro]

spox ale czy ty to pisales ?/ sam ??

[Czapa]

Pisal sam?? NIE to 2 skopiowany tutek :/ http://gamecenter.pl/forum/index.php?showtopic=74142 link do orginalnego tematu... :/

[Scavenger]

Taaa jasne. Zaczyna mi grać na nerwy te nabijanie sobie postów Vergil. Skoro kopiujesz to przynajmniej napisz skąd...

n/c '

[musiak]

jak dla mnie to wogule powinien być zakaz kopiowania tutków

[xardasnekro]

to jest bez sensu tak samo jak w warrock !!!!

[OLEKK1122]

Pamiętam jak ja pierwszy zrobilem tut na GIF'y na starym mpc, jak jeszcze niebylo dzialu fanart

[ChybaTy]

Co was to obchodzi czy on to napisał czy nie .Macie tutka ?Macie korzystajcie.... moze po prostu zapomniał dopisac by "ktos tam" omg . Nie pyrgajcie sie tak na wszystkich a większosc tutkow na hcetay jest chyba kopiowane .. tyle ze przetlumaczone.. . Dajcie sobie spokoj

 

 

huh

[dezer]

nawet linki zle przeklejone

[kokosz]

nawet linki zle przeklejone

fakt.

[Swirek14]

Co was to obchodzi czy on to napisał czy nie .Macie tutka ?Macie korzystajcie.... moze po prostu zapomniał dopisac by "ktos tam" omg . Nie pyrgajcie sie tak na wszystkich a większosc tutkow na hcetay jest chyba kopiowane .. tyle ze przetlumaczone.. . Dajcie sobie spokoj

huh

To nie pierwszy jego skopiowany z jakiegos forum/strony tutek... Nawet nie napisal skad to wzial , ani autora, linki zle skopiowane... ogolnie jeden wielki PLAGIAT !

[Makin]

Mógłby ktoś odnowić ten TuT? tzn. linki i jakim można to zrobić programem...

 

Bardzo mi na tym zależy

 

Z góry THX....