Flash

Macromedia Flash jest powszechnie używany w reklamie internetowej różnych produktów. Jeśli wejdziesz na jakąś stronę WWW i widzisz na niej ruchomą reklamę, to na pewno będzie to animacja Flash. Zanim przystąpimy do stworzenia takiej animacji, musimy najpierw zastanowić się, jak ma ona wyglądać. W tym celu wykonuje się serię rysunków, które przedstawiają poszczególne fazy naszej animacji. Podobnie postępuje się przy tworzeniu filmów. Rysunki przedstawiające poszczególne sceny nazywamy scenorysem (ang. story board) lub scenopisem obrazkowym. Poniżej mamy taki właśnie scenorys dla naszej reklamy.

Ćwiczenie - tworzenie animacji reklamowej

1. Uruchom Macromedia Flash, utwórz nowy dokument Flash i zapisz go na dysku pod nazwą Toyota. Jeśli wszystko wykonasz dobrze, na zakładce linii czasu powinien pojawić się tytuł twojego projektu:

Musimy zatem ich utworzyć. Zaczniemy od napisów. Z przybornika wybierz Text Tool (narzędzie tekstowe):

Na panelu Properties (własności) ustaw czcionkę o rozmiarze 95, kolorze czerwonym i pogrubioną (ikona B - ang. bold - gruby):

Prostokąt obwiedni napisu powinien zmienić kolor na niebieski. Naciśnij klawisz F8 (tworzenie symbolu). Jako nazwę wpisz Toyota, wybierz typ Graphic i kliknij przycisk OK.

Po tej operacji w bibliotece powinien pojawić się symbol Toyota - jeden aktor "zatrudniony" i gotowy do odtwarzania roli.

Usuń ze sceny napis TOYOTA klawiszem Delete - aktor wciąż jest dostępny, mamy go w bibliotece, ta operacja usunęła go jedynie ze sceny - przecież w teatrze na scenie nie muszą naraz być wszyscy aktorzy, lecz jedynie ci, którzy w danym momencie odgrywają swoje role.

Na panelu Properties (własności) ustaw czcionkę o rozmiarze 72, kolorze zielonym, pogrubioną:

Z przybornika wybierz Selection Tool (narzędzie wyboru), naciśnij F8, wpisz nazwę symbolu "To jest to", typ Graphic i kliknij przycisk OK:

Napis To JEST TO usuń ze sceny klawiszem Delete. Teraz uruchom przeglądarkę sieciową i przejdź na stronę Google.pl. U góry wybierz opcję grafika, a w pasku tekstowym wpisz napis Toyota i wyszukaj odpowiednią grafikę samochodu Toyota. Samochód powinien być na białym tle. Gdy znajdziesz odpowiedni model, przejdź na stronę z tą grafiką (Google pokazuje przy wyszukiwaniu tylko miniaturki), kliknij obrazek prawym przyciskiem myszki i skopiuj go do schowka. Wróć do Macromedia Flash, kliknij prawym przyciskiem myszki na scenę i wybierz opcję Paste (wklej). Na scenie powinna pojawić się grafika z samochodem. Jeśli obrazek jest za duży, to wybierz z przybornika Free Transform Tool (narzędzie swobodnej transformacji) i, przeciągając z wciśniętym klawiszem SHIFT narożne uchwyty, dopasuj go do sceny. Wróć do Selection Tool (narzędzie wyboru).

Wciśnij klawisz F8 i w okienku tworzenia symbolu wpisz nazwę "samochód", typ Graphic. Kliknij OK. W panelu Library (biblioteka) pojawią się cztery elementy:

Bitmap 1 - to obrazek, który ściągnęliśmy z Internetu. Mamy wszystkich aktorów, casting możemy uważać za zakończony. Samochód usuń ze sceny klawiszem Delete.

4. Na linii czasu dodaj dwie warstwy animacji. Nazwij je kolejno tak jak na poniższym rysunku:

Zablokuj do edycji warstwy "To jest to" i "Samochód", klikając w kropki w kolumnie z kłódką. Zablokowana warstwa nie może być przypadkowo edytowana. Kliknij w pierwszą klatkę warstwy Toyota:

5. Teraz zgodnie z naszym scenorysem będziemy tworzyli kolejne fazy animacji. Najpierw powiększający się napis TOYOTA. Z panelu Library (biblioteka) przeciągnij na środek sceny symbol Toyota. Wybierz z przybornika Free Transform Tool (narzędzie swobodnej transformacji) i przeciągając z klawiszem SHIFT narożne uchwyty pomniejsz napis do pożądanego rozmiaru:

Na warstwie Toyota kliknij klatkę nr 20 i wciśnij klawisz F6. Spowoduje to dodanie klatki kluczowej o takiej samej zawartości jak poprzedzająca ją klatka nr 1.

Na klatce nr 20 napis TOYOTA powinien być duży. Przeciągnij z klawiszem SHIFT narożne uchwyty wokół symbolu Toyota, aby uzyskać pożądany rozmiar napisu (upewnij się, iż operację tę przeprowadzasz na klatce nr 20!):

Kliknij prawym przyciskiem myszki na klatkach pomiędzy 1 a 20 na warstwie Toyota i wybierz opcję Create Motion Tween (utwórz animację automatyczną). Następnie na panelu Properties (własności) ustaw parametr Ease (przyspieszenie) na 100. Animację możesz przeglądnąć naciskając klawisz Enter. Napis powinien się powiększać, wyhamowując pod koniec. To kończy pierwszą sekwencję scenopisu.

6. W drugiej sekwencji scenorysu na scenę ma wjechać samochód za napis TOYOTA. Odblokuj warstwę "Samochód" (kliknij w kłódkę na tej warstwie), a zablokuj warstwę "Toyota" (kliknij w kropkę w kolumnie z kłódką) - wyrób sobie nawyk blokowania warstw, których w danym momencie nie używasz. Zapobiegnie to przypadkowym zmianom.

Po odblokowaniu warstwy "Samochód" kliknij na niej klatkę nr 20 i wciśnij F6. Powstanie w tym miejscu pusta jeszcze klatka kluczowa:

Z panelu Library (biblioteka) wciągnij na prawo od sceny symbol Samochód (nie Bitmap 1 !!!). Za pomocą Free Transform Tool (narzędzie swobodnej transformacji) pomniejsz go do odpowiedniego rozmiaru:

Teraz na linii czasu w warstwie Samochód kliknij klatkę nr 40 i wciśnij klawisz F6. Zostanie dodana klatka kluczowa z malutkim samochodem po prawej stronie sceny. Napis TOYOTA znikł, gdyż jego film kończy się na klatce nr 20 i nie sięga do klatki 40. Nie przejmuj się tym, za chwilę to naprawimy. Teraz skupmy się na samochodzie. Zgodnie ze scenopisem ma on wjechać na scenę, powiększając się i zwalniając. Przeciągnij zatem samochód na środek sceny i powiększ go za pomocą Free Transform Tool (narzędzie swobodnej transformacji) - pamiętaj o wciśnięciu klawisza SHIFT przy przeciąganiu uchwytów skalowania, inaczej samochód może się zniekształcić. Operację tę musisz wykonywać w klatce kluczowej 40!

Następnie utwórz Motion Tween (animacja automatyczna) pomiędzy klatkami 20 i 40 warstwy Samochód. Ustaw dla tej animacji parametr Ease (przyspieszenie) na 100. Linia czasu powinna wyglądać następująco:

7. Przechodzimy do sekwencji 3 scenorysu. Teraz napis Toyota powinien stopniowo zaniknąć. Odblokuj warstwę Toyota, a zablokuj warstwę Samochód. Następnie na warstwie Toyota utwórz klatki kluczowe nr 40 i 60 (kliknij w nie po kolei myszką i naciskaj klawisz F6):

Na klatce 60 zniknął samochód - jego film skończył się na klatce 40 - nie przejmuj się tym, zajmujemy się napisem TOYOTA. Będąc na klatce 60, wybierz z przybornika Selection Tool (narzędzie wyboru) i kliknij nim w napis. Na panelu Properties (własności) ustaw parametr Color na Alpha (przeźroczystość) i 0%. Symbol zniknie z klatki 60, jednakże wciąż będzie na niej obecny prostokąt ograniczający. Teraz utwórz Motion Tween (animacja automatyczna) pomiędzy klatkami 40 a 60. Przeglądnij swoją animację klawiszem Enter (możesz ją również zapisać na dysku, wciskając Ctrl+S). Sekwencja 3 scenopisu jest zakończona.

8. Przechodzimy do sekwencji nr 4. Tutaj animowane są dwa symbole: z prawej strony ma wjechać na scenę napis To jest to, a jednocześnie samochód ma się spłaszczać i przesuwać w lewo, aby na końcu sekwencji znaleźć się tuż przed napisem. Zablokuj warstwę Toyota, a odblokuj warstwę To jest to. Utwórz na tej warstwie klatkę kluczową nr 60.

Z panelu Library (biblioteka) przeciągnij na prawo od sceny symbol "To jest to":

Teraz utwórz na tej warstwie klatkę kluczową 80. Na klatce 80 napis przeciągnij na środek sceny i utwórz Motion Tween (animacja automatyczna) pomiędzy klatkami 60 a 80. Przeglądnij animację klawiszem Enter.

Teraz czas na animację samochodu. Zablokuj warstwę "To jest to", a odblokuj warstwę "Samochód". Utwórz na tej warstwie dwie klatki kluczowe - nr 60 i 80:

Na klatce kluczowej 80 samochód powinien być spłaszczony i po lewej stronie napisu "TO JEST TO". Wybierz z przybornika Free Transform Tool (narzędzie swobodnej transformacji) i przeciągaj środkowe uchwyty z wciśniętym klawiszem lewy Alt aż samochód będzie odpowiednio spłaszczony - operację tę wykonuj na klatce kluczowej nr 80!

Teraz wstaw Motion Tween (animację automatyczną) pomiędzy klatkami 60 a 80. Przeglądnij animację klawiszem Enter. Sekwencja nr 4 scenorysu jest zakończona.

9. Przechodzimy do sekwencji nr 5 scenorysu - tutaj spłaszczony samochód ma stopniowo zniknąć. Dodajemy na warstwie samochód klatkę kluczową nr 100. Z przybornika wybieramy Selection Tool (narzędzie wyboru) i na panelu Properties (własności) ustawiamy parametr Color na Alpha (przeźroczystość) i 0%. Następnie wstawiamy Motion Tween (animacja automatyczna) pomiędzy klatkami 80 a 100. Przeglądnij animację klawiszem Enter.

10. Pozostała nam ostatnia sekwencja animacji ze scenorysu - najazd i zanikanie napisu "TO JEST TO". Zablokuj warstwę "Samochód", a odblokuj warstwę "To jest to". Dodaj na niej klatki kluczowe nr 100 i 120. Przejdź do ostatniej klatki nr 120. Z przybornika wybierz Free Transform Tool (narzędzie swobodnej transformacji). Scenę możesz pomniejszyć do rozmiaru 25% - w prawym górnym narożniku linii czasu jest odpowiednie narzędzie:

Następnie powiększ napis i lekko go obróć, przeciągając w bok narożne uchwyty:

Na panelu Properties (własności) ustaw parametr Color na Alpha (przeźroczystość) i 0%. W klatkach pomiędzy 100 a 120 utwórz Motion Tween (animacja automatyczna).

Projekt jest gotowy, przeglądnij go za pomocą klawiszy Ctrl+Enter. Możesz go również opublikować - SHIFT+F12 i wstawić na stronę WWW - jak to zrobić, spytaj swojego nauczyciela.

Możesz nad swoją animacja jeszcze popracować - np. przesuń początki animacji na warstwach, aby nie rozpoczynały się w tym samym momencie - doda to dynamiki do odtwarzanych sekwencji. To już sprawa twojej inwencji.

Przypominam, iż na najbliższych zajęciach tworzymy własny projekt reklamowy na ocenę. Należy wybrać sobie dowolny produkt (telefon komórkowy, komputer, samolot, statek, pojazd kosmiczny, szminkę, lalkę Barbie itp.) i stworzyć z nim prosty klip reklamowy. Do animacji wymagam scenorysu.

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe

Lp	Scena	Opis
1.		Na scenie pojawia się malutki, czerwony napis TOYOTA, który stopniowo rośnie i zatrzymuje się po osiągnięciu wymiaru jak na rysunku. Na początku wzrost powinien być szybki i wyhamowywać przy końcu.
2.		Z prawej strony ma wjechać za napis TOYOTA samochód. Przy wjeździe samochód ma się stopniowo powiększać. Na początku ruchu powiększanie powinno być szybkie, a na końcu powinno zwalniać - efekt jakby wyhamowywania pojazdu.
3.		Napis TOYOTA ma płynnie zniknąć. Na scenie ma pozostać sam samochód.
4.		Z prawej strony sceny ma wjechać napis TO JEST TO. Jednocześnie, w miarę jak napis wjeżdża na scenę, samochód ma się spłaszczać i przesuwać w lewo,, tak aby na końcu sceny znaleźć się po lewej stronie napisu.
5.		Spłaszczony samochód ma stopniowo zniknąć ze sceny. Pozostaje tylko napis TO JEST TO.
6.		Napis TO JEST TO ma zniknąć z najazdem i lekkim obrotem.

Macromedia Flash - tworzenie klipu reklamowego

Ćwiczenie - tworzenie animacji reklamowej