Macromedia Flash – proste animacje NIEZBĘDNE INFORMACJE

Macromedia Flash – proste animacje
NIEZBĘDNE INFORMACJE
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 (coś na zasadzie plików *.psd w Photoshopie).
Aby umieścić swoją animację na stronie musimy ją opublikować, co następuje po wybraniu opcji Publish z menu File
(Shift+F12). Kiedy już opublikujemy nasz film, w folderze, w którym ostatnio zapisywaliśmy pracę, powstaną dwa
nowe pliki. Jeden z plików będzie miał rozszerzenie *.php, a drugi *.swf. Pliki *.swf to format playera flasha i można
go noramlnie odtwarzać. Plik *.php jest bezużyteczny bez pliku *.swf, ponieważ jak gdyby "czerpie" z niego informacje. Właśnie dlatego kiedy tworzymy stronę, musimy zapamiętać, żeby na serverze w folderze z plikiem *.php umieścić plik *.swf. Dokument w htmlu możemy dowolnie modyfikować, możemy też wkleić naszą animację do innego
pliku .php naszej strony, kopiując i wklejając w odpowiednie miejsce zawartość znacznikó plik <OBJECT>
</OBJECT>. UWAGA: Pliku *.fla nie umieszczamy na serwerze, no chyba że chcemy go udostępnić innym użytkownikom.
Częstym problemem mało doświadczonych webmasterów jest usunięcie pliku *.fla, który uważają oni za niepotrzebny, jeśli już umieścili film na stronie. Kiedy przychodzi moment, że chcą coś zmienić w swojej animacji, (np. uaktualnić link w bannerze) spotyka ich niemiła niespodzianka. Tylko plik *.fla umożliwia modyfikację filmu, z pliku *.swf
możemy odzyskać jedynie jego nieznaczną część poprzez zaimportowanie do flasha.
Aby uchronić plik *.swf przed importem przez ciekawskich użytkowników, możemy go zabezpieczyć hasłem. W tym
celu wybieramy menu File, dalej opcję Publish settings, a w zakładce Flash zaznaczamy Protect from import i
określamy nasze hasło w polu Password.
WYGLĄD I FUNKCJE PROGRAMU
Po uruchomieniu Flasha naszym oczom ukaże się szereg tajemniczych okienek z dziesiątkami opcji... wygląda to bardzo profesjonalnie, ale nie należy się załamywać czy zniechęcać, z biegiem czasu zobaczycie, że wszystkie te elementy interfejsu da się z łatwością opanować i dostosować do swoich potrzeb. Wkrótce także przekonacie się, że Flash
posiada szereg funkcji, których obsługa jest typowo intuicyjna i można się łatwo zorientować co do czego służy. Na
początku zalecam tylko pobieżną lekturę tego działu, na pewno będziecie do niego wielokrotnie wracać, a wkuwanie
wszystkiego od razu na pamięć jest bezsensem, gdyż większość funkcji lepiej poznaje się i zapamiętuje w praktyce
WARSTWY(layers)
Warstwy to z pewnością najważniejszy element programu, to w nich znajdują się klatki (omówione dalej), w których
umieszczamy nasze obiekty. 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).
Dobrym nawykiem jest nadawanie warstwom nazw pochodzących od zawartych w nich obiektów bądź animacji. To w
znacznym stopniu ułatwi nam nawigację, a po jakimś czasie gdy będziemy chcieli edytować nasz film unikniemy
żmudnego przypominania sobie co znajduje się w jakiej warstwie.
1
Należy także wspomnieć, że warstwy można dowolnie pozycjonować względem siebie. Polega to na kliknięciu na danej
warstwie i przeciągnięciu jej w górę lub w dół. To bardzo przydatny element przy tworzeniu animacji, gdyż warstwy
mają te właściwość, że wyższe w hierarchii przykrywają niższe(ich elementy). Oznacza to, że jeżeli na przykład chcemy umieścić tło "pod" tekstem, tak aby był on widoczny, warstwa z tłem musi się znaleźć poniżej warstwy z tekstem.
W innym wypadku nasz tekst zostanie przykryty przez tło i nie będzie widoczny.
Warstwom możemy nadawać określone właściwości, co znacznie ułatwi i przyspieszy naszą pracę. Omówmy więc
symbole znajdujące się nad nazwami warstw. Są to
,
i
warstwa jest aktywna (podświetlona na czarno). To symbol
. Występuje jeszcze jeden symbol, widoczny kiedy
, który oznacza, że właśnie w tej warstwie pracujemy.
, ,
możemy nadawać samodzielnie, klikając na odpowiednie czarne kropki
Właściwości opatrzone symbolami
obok nazw warstw. Oto screen z używanymi opcjami:
(na screenie warstwa 2), powoduje, że warstwa ta jest niewidoczna
Aktywna funkcja Show/Hide All Layers
podczas edycji. Aktywna opcja jest oznaczona krzyżykiem, a po kliknięciu na nim następuje odblokowanie opcji. Kolejną właściwością jest Lock/Unlock All Layers
(na screenie warstwa 3). Jej aktywowanie powoduje zamknięcie
wybranej warstwy. Jeśli ta opcja jest włączona, nie możemy wybrać żadnego elementu z tej warstwy. Jest to przydatne wówczas, gdy na naszym obszarze roboczym mamy dużo obiektów umieszczonych w różnych warstwach, które
chcemy edytować. Dobrym nawykiem jest więc zamykanie warstw, w których zakończyliśmy pracę. Dzięki temu unikniemy przypadkowego usunięcia bądź edycji elementów znajdujących się w danej warstwie. Aktywna opcja jest widoczna w postaci małej kłódeczki. Deaktywacja przebiega po kliknięciu na nią.
Ostatnią opcją jaką mamy do wyboru jest Show All Layers as Outlines
(warstwa 4 na screenie). Jej włączanie jak i
wyłączanie przebiega identycznie jak w omówionych powyżej przypadkach. Aktywna opcja cechuje się pustym w
środku kwadracikiem w odpowiednim miejscu obok nazwy wybranej warstwy. Uaktywnienie tej właściwości powoduje,
że w wybranych warstwach są widoczne jedynie kontury obiektów, wypełnienie zostaje ukryte.
POLE KLATEK ANIMACJI
Pole klatek animacji składa się z białych i szarych prostokątów- to są właśnie klatki. O tym, w jakiej klatce aktualnie
się znajdujemy informuje nas podświetlona część miarki znajdującej się powyżej klatek, oraz napis na dolnej listwie
.
W zależności od tego, co znajduje się w danej klatce może ona przybierać rozmaite formy:
2
•
- Klatka z czarną kropką to klatka kluczowa, znajduje się w niej obiekt, który animujemy. Klatki kluczowe
możemy wstawić klikając prawym przyciskiem myszy w odpowiednim miejscu na listwie czasowej i wybierając
opcję Isert Keyframe (F6).
•
- Pusta, szara klatka oznacza, że nic w niej nie ma ani nie zachodzi w niej żadna akcja.
•
- Klatka ze znakiem a
informuje nas o tym, że został do niej dodany jakiś skrypt w języku ActionScript (dowiecie się o nim co nieco
w dalszej części kursu).
•
Jeżeli klatki są podświetlone na niebiesko, a między nimi jest widoczna strzałka, oznacza to, że
trwa akcja ruchu (motion).
•
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. Wielkość klatek na linii czasu możemy dostosować do naszych wymogów klikając na ikonkę
następnie wybierając odpowiednią opcję.
a
Kiedy klikniemy prawym przyciskiem myszy na wybranej klatce na listwie czasowej, naszym oczom ukaże się następujące menu :
Postaram się opisać w skrócie jego funkcje... Jeśli w naszej warstwie znajdują się jakieś klatki kluczowe, pierwszą
pozycją na liście jest:
-Create Motion Tween - wybranie tej opcji powoduje utworzenie akcji ruchu pomiędzy sąsiednimi klatkami kluczowymi;
-Insert Frame - wstawia w wybranym miejscu pustą klatkę;
-Remove Frames - kasuje zaznaczoną klatkę/klatki
-Insert Keyframe - wstawia klatkę kluczową;
-Insert Blank Keyframe - wstawia pustą klatkę kluczową;
-Clear Keyframe - usuwa zawartość z klatki kluczowej;
-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;
-Synchronize Symbols - uzgadnia w czasie (synchronizuje) obiekty w zaznaczonych klatkach;
-Actions - dodaje akcje do wybranej klatki;
3
-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.
USTAWIENIA
Okienka ustawień można uruchomić z menu window/panels, jednak prościej przywołać je klikajac na odpowiednie
ikonki w prawym dolnym rogu ekranu. Są to kolejno:
-Show Info
-Show Mixer
-Hide Character
-Show Instance
-Show Movie Explorer
-Show Actions
-Show library
Po kliknięciu na powyższe ikonki naszym oczom powinny się ukazać następujące panele:
1.
Panel INFO (Window/Panel/Info lub Ctrl+Alt+i)
Panel Info zawiera cztery zakładki.
Zakładka INFO zawiera wiadomości na temat zaznaczonego obiektu. Jego rozmiary w okienkach W (szerokość) i H
(wysokość), natomiast w okienkach X i Y definiujemy położenie zaznaczonego obiektu na osiach pionowej i poziomej.
Zakładka TRANSFORM pozwala edytować nasz obiekt. W okienkach
i
możemy rozciągnąć/zwężyć obiekt w poziomie lub pionie. Zaznaczona opcja Constain powoduje, że proporcje rysunku zostają zachowane. Dzięki opcji Rotate możemy obracać zaznaczony obiekt według wartości wpisanej w okienku obok. Jeśli
włączymy opcję Skew, obiekt odchyli się w pionie/poziomie według zdefiniowanych wartości.
W zakładce STROKE ustalamy grubość, kolor oraz styl (rozwijane menu) konturów naszego rysunku. Jeśli rysunek nie
posiada konturów możemy je nadać za pomocą narzędzia
edytowanej linii.
. W dolnej części okienka Stroke widoczny jest podgląd
Zakładka FILL pozwala wypełnić nasz rysunek dowolnym kolorem, gradientem lub mapą bitową.
W rozwijanym menu mamy do wyboru opcje:
Solid -zwykłe wypełnienie wybranym kolorem;
Linear Gradient -wypełnienie gradientem poziomym lub pionowym;
Radial Gradient -wypełnienie okrągłym gradientem;
Bitmap -wypełnienie rysunku mapą bitową.
Tworzenie Gradientów:
Jeśli wybierzemy z rozwijanego menu wypełnienie Linear Gradient nasz rysunek zostanie domyślnie wypełniony
gradientem poziomym. Aby zmienić orientację gradientu na pionową, z menu Tools po lewej stronie należy wybrać
narzędzie wypełnienia, a następnie kliknąć na gradiencie i przeciągnąć kursor poziomo. Można też modyfikować kolory
gradientów i ich proporcje w menu Fill.
4
2.
Panel INSTANCE (Window/Panels/Instance lub Ctrl+i)
W panelu Instance są cztery zakładki.
Zakładka INSTANCE jest bardzo ważna. To w niej nadaje się obiektom charakterystyczne nazwy w polu Instance.
Nazw tych potem używamy w języku ActionScript by odnieść się do tych obiektów. W polu Behaviour możemy zmienić zachowanie obiektu na Movie Clip (animowany obiekt), Button (przycisk), lub Graphic (statyczny obiekt graficzny).
Poniżej mamy jeszcze kilka okonek z przydatnymi funkcjami. Pozwalają one m.in. sklonować obiekt lub dodać do niego akcję (w przyp. MC i Button).
Zakładka EFFECT pozwala dodać efekt do animowanego obiektu. W rozwijanym menu mamy dostępne efekty:
Brightness -rozjaśnia obiekt. Wartość definiujemy w procentach;
Tint -płynna zmiana jednego koloru w drugi;
Alpha -dość często używany efekt, powoduje "znikanie" obiektu. Wartość ustalona na 0% sprawia, że obiekt jest
całkowicie niewidoczny;
Advanced -pozwala bardzo precyzyjnie zdefiniować opcje efektu.
W zakładce FRAME w polu LABEL dodajemy nazwę do wybranej klatki. Jest to jakby etykieta, która pozwala na odnoszenie się do wybranej klatki w języku ActionScript bez używania trudnych do zapamiętania wartości liczbowych.
Pomocne jest to także wtedy, kiedy kolejność naszych klatek zmieni się, wówczas odnośnik w postaci liczby będzie
dotyczył innej klatki i spowoduje nieprawidłowe działanie naszego filmu. Z okienka TWEENING mamy do wyboru
opcje Motion i Shape. Te opcje określają typ animacji -Motion to ruch, a Shape - zmiana kształtu. Dla każdego typu
animacji możemy dostosować zachowanie, jak na przykład obrót w okienku Rotate (dla Moti on).
Zakładka SOUND umożliwia dodanie i edycję zaimportowanego pliku muzycznego. Możemy importować wszystkie
popularne typy plików jak na przykład *.wav i *.mp3. Importowanie zachodzi po wybraniu opcji Import z menu File
(Ctrl+R) i podwójnym kliknięciu na pożądanym pliku. Zaimportowane dźwięki trafiają do biblioteki, a oznaką, że do
jakiejś klatki jest dodany dźwięk jest widoczny w niej granatowy zygzak Po wstawieniu pliku muzycznego do klatki
możemy dla niego wybrać jeden z dostępnych efektów (rozwijane menu Effect):
Left Channel -muzyka odtwarzana tylko w lewym kanale;
Right Channel -muzyka odtwarzana tylko w prawym kanale;
Fade Left to Right -płynne przejście z lewego do prawego kanału;
Fade Right to Left -płynne przejście z prawego do lewego kanału;
Fade in -muzyka na początku jest wyciszona i stopniowo zgłaśniana. Daje to możliwość ściszenia głośników bez
uszczerbku na zdrowiu;)
Fade out -na końcu muzyka jest powoli wyciszana;
Custom -pozwala precyzyjnie zdefiniować zaawansowane opcje.
3.
Panel CHARACTER (Window/Panels/Character lub Ctrl+T)
5
Dostępne trzy zakładki:
W zakładce CHARACTER definiujemy właściwości wpisywanego tekstu. W okienku Font wybieramy czcionkę, poniżej
ustalamy m.in. jej wysokość, odstępy między znakami, kolor oraz indeks (górny lub dolny).
Zakładka PARAGRAPH daje nam możliwość ustawienia paragrafów i marginesów. Ikonki Align pozwalają wyrównać
tekst:
do prawego marginesu
wycentrować
do lewego marginesu
wyjustować
Niżej możemy ustawić margines lub akapit co do jednego piksela.
Zakładka TEXT OPTIONS. W pierwszym polu mamy do wyboru opcje Input lub Output Text. Input text, to takie
pole tekstowe, które umożliwia wpisanie jakiejś wartości z klawaitury. Output text to tekst wyświetlany, dla którego
możemy ustalić opcje Static Text, Dynamic Text, lub Single Line. Dodatkowo można ustalić zmienną w polu variable,
a dla Input Text nadać maksymalną ilość znaków (Max Chars).
4.
Panel MIXER (Window/Panels/Mixer)
W panelu Mixer do wyboru mamy dwie zakładki.
Zakładka MIXER pozwoli nam wybrać kolor dla zaznaczonego obiektu. W okienku Alpha ustawiamy przezroczystość
rysunku. Zakładka SWATCHES definiuje kolor z palety zaawansowanych kolorów. Poniżej mamy dostępny panel edycji gradientów.
5.
Ikonka SHOW MOVIE EXPLORER (Window/Movie Explorer lub Ctrl+Alt+M)
6
Ikonka ta uruchamia tzw. Movie Explorera, gdzie wszystkie elementy naszej Animacji są widoczne w postaci drzewka i możemy je dowolnie modyfikować.
6.
Ikona SHOW ACTIONS (Window/Actions lub Ctrl+Alt+A)
Otwiera ona okno Actions. Tutaj tworzymy tak zwane Action Scrypty. Po prawej stronie jest widoczne puste pole w
którym znajdą się nasze skrypty. Po lewej są widoczne dostępne akcje podzielone na kilka kategorii. Mamy do wyboru
dwa główne tryby:
Normal Mode -tryb dla początkującyhc, w którym znajdziemy szereg funkcji ułatwiających prace. Skrypty dodajemy
poprzez dwukrotne kliknięcie na dane polecenie w lewym oknie, lub przeciągnięcie polecenia do praweg okna. Jeśli już
mamy w prawym oknie polecenie, na dole dla ułatwienia pojawiaja się okienka w których możemy określać parametry
naszych skryptów.
Expert Mode -to tryb dla bardziej zaawansowanych użytkowników, pozwala na wprowadzanie wszystkich skryptów z
klawiatury.
Tryb wybieramy po naciśnięciu czarnej strzałki
7.
w prawym górnym rogu panelu.
Ikonka SHOW LIBRARY (Window/Library lub Crtl+L)
Pokazuje tzw. Bibliotekę, czyli zbiór wszystkich elementów naszej strony. Aby umieścić elementy z biblioteki w naszej
animacji, przeciągamy je na Pole Pracy. Za pomocą ikonek znajdujących się na dole panelu możemy dodać nowy
symbol do biblioteki
(Add Symbol), usunąć go
(Delete), ustawić jego właściwości
(Properities), lub dodać
(New Folder).
nowy folder
U góry widoczny jest podgląd naszego symbolu. Klikając prawym przyciskiem myszy na wybranym symbolu mamy do
7
dyspozycji szereg opcji jak na przykład zmiana nazwy symbolu bądź jego sklonowanie. W prawym górnym rogu panelu możemy ustawić zaawansowane opcje.
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.
Właściwości Pola Pracy:
Wybierając opcję MOVIE z menu MODIFY naszym oczom ukaże się następujące okno:
Oto dostępne 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).
OBIEKTY
Jeżeli wciśniemy Ctrl+F8 zobaczymy na ekranie okno wybory obiektów
8
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 .
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.
PIERWSZA ANIMACJA
Wprowadzenie
Gratuluję wytrwałości, w końcu dotarliśmy do momentu, w którym naszą wiedzę teoretyczną sprawdzimy w praktyce.
Wiem, że będziecie wielokrotnie wracać do rozdziału o wyglądzie i funkcjach programu, dlatego też tej części zamiast
wyjaśniać wszystko ponownie, zrobiłem proste odnośniki do poprzedniego działu przy omawianiu niektórych zagadnień. Na początek stworzymy prostą animację, z użyciem kilku prostych elementów. Narysujemy kwadrat, a następnie
sprawimy, by poruszał się w poziomie, powiększał i stopniowo znikał. Przy okazji będzie on się obracał wokół własnej
osi. Zaczynajmy!
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.
9
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ę.
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łą .
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.
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.
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.
10
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%
Logiczne 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.
Znów wciskamy Enter aby zobaczyć naszą animację. To już koniec pracy, możemy spokojnie zapisać (File/Save As..
lub Ctrl+Shift+S) i opublikować (File/Publish lub Shift+F12) nasz plik.
ANIMACJA PO TORZE
Wykonując nasza poprzednią animację sprawiliśmy, ze kwadrat poruszał się w poziomie. W tej części kursu nauczycie
się animować obiekt po wybranym torze. Może to być na przykład koło, elipsa, czy dowolny, wykonany przez Was
rysunek. Animacja po torze jest niezwykle prosta i pozwala osiągnąć ciekawe efekty. W naszej animacji stworzymy
kwadrat poruszający się po elipsie, który dodatkowo będzie się obracał wokół własnej osi. W tej części zakładam, że
macie już jako taką wiedzę o programie więc w nawiasach podaję tylko skróty klawiszowe, z których łatwo się korzysta.Do dzieła!
Na początek oczywiście ustalamy właściwości filmu w panelu Movie Properities (Ctrl+M). Obszar Pola pracy ustawiamy
na 300x300 px, fpsy na 24. Resztę pozostawiamy bez zmian.
Teraz przygotujemy warstwy, w których będziemy pracować. Warstwę, która będzie nam potrzebna dodajemy symbolem . Kiedy klikniemy na ten symbol, nad naszą pierwszą warstwą pojawi się warstwa Guide Layer, a warstwa
pierwsza odsunie się nieznacznie w prawo. Wygląda to tak:
11
Warstwa pierwsza automatycznie przyjęła właściwość Guided, co możemy sprawdzić klikajac na nią prawym przyciskiem myszy i wybierając Properities.
To oznacza, że obiekty z pierwszej warstwy będą poruszać się po torze narysowanym w warstwie Guide: Layer 1.
Przechodzimy teraz do warstwy Guide i rysujemy w niej okrąg bez wypełniena. Wypełnienie usuwamy zaznaczając w
Fill Color opcję
.
Kiedy już narysujemy nasz okrąg na Polu Pracy, najpierw poprzez klikniecie na nim prawym przyciskiem i wybranie
opcji Scale zmniejszamy go. Następnie wybieramy Rotate i obracamy naszą elipsę do pozycji ukośnej. Teraz pozycjonujemy nasz rysunek tak, aby nie wystawał poza Pole Pracy. UWAGA: Obiekty w warstwie Guide (w naszym przypadku elpisa) nie są widoczne na filmie!
Teraz możemy już przejść do warstwy "Layer 1", której nazwę dla ułatwienia zmieniłem na "animowany kwadrat".
Warstwę Guide nazwałem "tor ruchu". W warstwie "animowany kwadrat" rysujemy teraz kwadrat dowolnych rozmiarów, który znajdował się będzie na naszej elipsie. Wyglądać to może następująco:
12
Obramowanie dla kwadratu w panelu Stroke ustaliłem na 1.5px, kolor linii wybrałem biały, a wypełnienie szare. Pora
animować nasz kwadrat. W tym celu w warstwie "animowany kwadrat" na 1 klatce klikamy prawym przyciskiem myszy i wybieramy "Create Motion Tween", a w klatce 50 i 100 dodajemy klatki kluczowe (F6). Przechodzimy do 50 klatki, wybieramy i przesuwamy w niej nasz kwadrat o odległość trochę krótszą niż połowa elipsy w prawo. Pamiętajmy,
że nasz kwadrat powinien stykać się z elipsą. Teraz przechodzimy do klatki 100 i znów przesuwamy go o niecałe pół
długości, tak, aby znalazł się prawie w punkcie wyjścia. Jeśli przesunęli go byśmy o więcej niż połowę elipsy, dojechałby do miejsca w klatce 50 a następnie wróciłby na swoje miejsce. W warstwie "tor ruchu" klawiszem F5 dodajemy
pustą klatkę w 100 klatce animacji. Nasza linia czasu powinna się prezentować następująco:
Ostatnią rzeczą, jaką wykonamy będzie obracanie kwadratu. Spowodujemy, że od klatki 1 do 50 wykona on jeden
obrót zgodnie ze wskazówkami zegara, a następnie, od 50 do 100 klatki "odkręci się". W tym celu w 1 klatce w warstwie "animowany kwadrat" w panelu Instance (Ctrl+i), zakładce Frame opcję Rotate ustawiamy na CW, a w polu
obok wpisujemy ilość obrotów- 1.
To samo wykonujemy w klatce 50, tyle że opcję Rotate ustawiamy na CCW. To już wszystko, pora zapisać film:)
ZMIANA KSZTAŁTU OBIEKTU (Shape)
Pora na kolejny typ animacji, który polega na zmianie kształtu obiektu. W naszej animacji standardowo:) zajmiemy
się płynnym przejściem kwadratu w koło. To stary i oklepany przykład, ale najlepiej i najprościej oddaje cechy tego
typu animacji.
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ę pa-
13
nelem 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.
Na naszej linii czasu między klatkami powinna się pojawić czarna strzałka na zielonym tle.
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 naszego kwadr atu.
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.
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.
EFEKT MASKI
14
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.
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:
Na początek stwórzmy dwie warstwy. Górną nazwijmy "maska", a dolną "napis". Przejdzmy do 1 klatki warstwy napis
( Text Tool), wybierając je z panelu Tools bądź wciskając A. W panei wpiszmy do niej tekst za pomocą narzędzia
lu 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).
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).
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:
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?.
15
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:
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
PRZYCISK
Krótkie wprowadzenie do ActionScript
AS to język skryptowy, wykorzystywany we Flashu. Język ActionScript podobnie jak sam Flash przeszedł wiele modyfikacji w odniesieniu do poprzednich wersji programu. We Flashu 5 jest on już w pełni zaawansowanym, imponującym
narzędziem z którego korzystają nie tylko zaawansowani flashmani. Język ten jest podobny do JavaScript i opiera się
na dodawaniu akcji do poszczególnych klatek lub obiektów (MC i buttony). Przy tworzeniu strony internetowej, dzięki
dużemu rozbiciu poszczególnych skryptów na różne obiekty unikamy kilometrowego kodu, którego edycja jest nużąca
i monotonna. Skrypty w AS są bardzo krótkie i proste, dzięki czemu wykrycie i poprawienie błędu nie trwa długo. By
wstawić skrypt do naszej animacji posługujemy się panelem Actions
(Window/Actions lub Ctrl+Alt+A). Samo
wstawianie skryptów opiera się na przeciąganiu lub wpisywaniu gotowych poleceń. Dla ułatwienia początkujący pracujący w trybie Normal Mode, otrzymają od programu pomoc w postaci wyświetlenia określonych pól do których wystarczy np. wpisać adres strony www, do której chcemy się odnieść za pomocą linku. Wszystko wyjaśnię przy okazji
tworzenia przycisku, więc nie martwcie się, jeśli jeszcze mało z tego wszystkiego rozumiecie:).
Tworzenie przycisku
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 "burak".
Klatkę kopiujemy do pozostałych trzech: OVER, DOWN i HIT. Spróbujemy teraz zrobić coś takiego, aby po najechaniu
myszką na nasz przycisk była odtwarzana jakaś animacja. W tym celu musimy MC z animacją wstawić do klatki OVER
przycisku.
Najpierw jednak musimy takową animację wykonać:). Tworzymy nowy obiekt Movie Clip, który nazwiemy koło. Teraz
w jedynej warstwie tego obiektu rysujemy białe koło i animujemy je w dowolny sposób. Ja sprawiłem, że koło porusza
16
się od prawej do lewej strony, przemienia się w kwadrat i na końcu znika (alpha na 0%). Otwieramy bibliotekę
(Ctrl+L) i przechodzimy do naszego przycisku dwukrotnie na nim klikając. Przechodzimy do klatki Over, przeciągamy
do niej z biblioteki nasz klip i pozycjonujemy go względem przycisku. Ja umieściłem go po lewej stronie przycisku.
Pozostało nam dograć do przycisku dźwięk i posłużyć się ActionScriptem, by stworzyć z niego odnośnik
Dźwięk importujemy do filmu wybierając opcję Import z menu File (Ctrl+R). Gdy już zaimportujemy plik dźwiękowy,
trafi on do naszej biblioteki. Chcemy, by dźwięk był odtwarzany w momencie najechania na przycisk kursorem, więc
musimy go wstawić do klatki Over. Klikamy na niej i otwieramy panel Instance (Ctrl+i), zakładkę Sound. Z rozwijanego menu Sound wybieramy nasz plik.
Na linii czasu, w klatce Over pojawiła się pionowa kreska informująca o tym, że klatka ta zawiera dźwięk.
Teraz powracamy do sceny głównej, przenosimy przycisk z biblioteki na Pole Pracy i pozycjonujemy go. Pozostało
stworzenie z przycisku odnośnika. Klikamy na nim prawym przyciskiem myszy i wybieramy Actions. Pojawło się okno
Actions, w którym z lewej strony wybieramy akcję getURL i klikamy na niej dwukrotnie bądź przeciągamy na prawą
stronę. Oba działania prowadzą do tego samego efektu- z prawej strony wyświetli się akcja:
Poniżej mamy panel, który ułatwi nam zdefiniowanie akcji. W okienku URL wpisujemy adres strony, która ma się wyświetlić po wciśnięciu przycisku. Resztę opcji pozostawiamy bez zmian.
Nasza akcja wygląda teraz następująco:
on (release) {
getURL ("http://www.webhelp.pl");
}
17
komenda on (release) powoduje to, że po przyciśnięciu buttona i zwolnieniu przycisku myszy, zostanie wykonana
akcja znajdująca się pomiędzy nawiasami { i }. Akcja getURL(); otwiera adres zdefiniowany w następującym po niej
nawiasie. Adres musi być wpisany w cudzysłowie.
Jeśli klikniemy na on (release) {, komenda podświetli się, a my na dole będziemy mieli do wyboru opcje:
Opcje można pojąć intuicyjnie, posiadając jedynie podstawową wiedzę z języka angielskiego. I tak na przykład zaznaczone okienko Press, sprawi, że adres zostanie otwarty już po wciśnięciu przycisku myszy, natomiast Roll Over
otworzy adres kiedy przejedziemy kursorem nad przyciskiem. Z opisem pozostałych opcji zapoznacie się w lekcji "Detektor Zdarzeń myszy".
To już wszystko! Wystarczy go teraz zapisać i opublikować...
ANIMOWANY TEKST
Przy tworzeniu animowanego tekstu będziemy korzystać z wielu efektów. Ustawmy wymiary naszego filmu na
400x100px. Teraz tworzymy nowy Movie Clip (Ctrl+F8), który nazywamy "animowany tekst". będziemy animowli
tekst www.webhelp.pl.
W tym celu stwórzcie osiem warstw. W siedmiu warstwach znajdą się literki z wyrazu "webhelp", w dziesiątej warstwie napis www i pl. Literki animujemy osobno, gdyż będą się one pojawiały po sobie, nie da się tego zrobić w jednej
warstwie. Nazywamy odpowiednio warstwy i w każdej wpisujemy daną literkę. Musicie uważać, żeby nie wstawić np.
do jednej klatki dwóch literek i żeby tak dobrać czcionkę, żeby nie wystawała potem poza pole pracy. Można np. w
pierwszej warstwie wpisać cały napis, a potem tylko przenosić i kasować z niej odpowiednie literki. Kiedy już mamy
we wszystkich warstwach klatki kluczowe, zaczynamy animować literki. W pierwszej warstwie "w" animujemy literę w.
Klikamy prawym przyciskiem na klatce kluczowej i wybieramy Create Motion Tween. Teraz wstawiamy klatki kluczowe w klatce 10 i 20.
W pierwszej klatce w okienku Info zmniejszamy zaznaczoną literkę do szerokości i wysokości 1px. Przechodzimy do
klatki 10 i tam szerokość ustawiamy na 30 a wysokość na 50px. Ja dodatkowo w 1 klatce ustawiłem jeszcze efekt
Alpha na 0%. Teraz czynność tą powtarzamy dla wszystkich literek a w dziesiątej warstwie tworzymy napis
www(przerwa na literki)pl... Nasza linia czasu powinna wyglądać tak:
Jeśli najedziecie myszką na niebieskie pole animacji w drugiej warstwie, pojawi się symbol rączki. Spróbujcie wtedy
kliknąć i przeciągnąć animację o 3 klatki w prawo.
18
Tak samo postępujemy z resztą warstw z literkami. Kiedy skończymy, linia czasu ma postać:
Kiedy wciśniemy Enter powinniśmy już zobaczyć animację, ale chcemy jeszcze sprawić, żeby literki nie znikały zaraz
po tym jak się pokażą. W tym celu animacja w każdej warstwie musi trwać do 38 klatki. W 38 klatce każdej warstwy
(oprócz dwóch ostatnich), wstawiamy pustą klatkę (F5). Prezentuje się to następująco:
Teraz zajmijmy się animacją ostatniej warstwy. Klatkę kluczową przeciągamy do 38 klatki, tworzymy Motion Tween i
wstawiamy następną klatkę kluczową do klatki 48 (F6). Wracamy do klatki 38, klikamy prawym przyciskiem myszy na
napisie, wybieramy Scale i rozciągamy nasz napis w poziomie.
Będąc w tej samej klatce w panelu Instance (Ctrl+i), zakładce Effect nadajemy efekt Alpha i wartość ustawiamy na
0%.
Pozostało nam jeszcze przedłużyć długość animowania liter, gdyż znikają one w klatce 38, a my chcemy by były aż do
48. Aby nasza animacja była jeszcze przez chwilę widoczna przedłużmy ją jednak aż do 70 klatki we wszystkich warstwach (F5). Listwa czasu wygląda tak:
To już wszystko. Możemy teraz zapisać i opublikować (Shift+F12) animację.
19