Warstwy - Layers

Warstwy z pewnością są najważniejszym elementem programu, znajdują się w nich klatki, w których z kolei umieszcza się obiekty. Panel warstw widoczny jest domyślnie w górnej części ekranu. Możemy go w każdej chwili ukryć poprzez odznaczenie w menu kontekstowym View opcji Timeline, lub użyć w tym celu przypisanego do tego działania skrótu Ctrl + Alt + T.

Do dobrych nawyków należy nadawanie nazw warstwom, które pochodzą od zawartych w nich animacji lub obiektów. W znacznym stopniu ułatwia to nawigację po projekcie, a jeżeli będziemy chcieli po jakimś czasie wyedytować część naszego filmu, nie stracimy niepotrzebnie czasu na żmudne przypominanie sobie, co znajduje się w poszczególnych warstwach.

Należy również pamiętać o tym, że warstwy mogą być względem siebie dowolnie pozycjonowane. Aby dokonać takiego działania, wystarczy kliknąć na daną warstwę przytrzymać lewy klawisz myszki i przeciągnąć ją w dół lub gorę. Pozycjonowanie jest bardzo przydatnym elementem w procesie tworzenia animacji, ponieważ warstwy posiadają tę właściwość, iż warstwy wyższe w hierarchii zakrywają elementy warstw niższych w hierarchii. Wiąże się to z tym, że jeśli chcielibyśmy umieścić pod tekstem jakieś tło, zachowując przy tym widoczność samego tekstu, to warstwa z tłem powinna znaleźć się poniżej warstwy zawierającej tekst. W ten sposób tekst zakrywa tło a nie na odwrót.

Istnieje możliwość nadawania warstwom pewnym określonych właściwości, które w znacznym stopniu ułatwiają oraz przyspieszają naszą pracę. Opiszmy więc symbole, które znajdują się nad nazwami warstw. Symbole te wyglądają następująco: , , . Można zauważyć jeszcze jeden symbol, który staje się widoczny w momencie, gdy klikniemy na warstwie i staje się ona aktywna. Symbol ten wygląda w ten sposób:  i oznacza, że pracujemy właśnie z tą warstwą, obok której występuje. Właściwości, które są opatrzone symbolami: , ,  mogą być nadawane samodzielnie, poprzez klikanie na odpowiednich czarnych kropkach znajdujących się obok nazw poszczególnych warstw.

Uaktywnienie funkcji Show/Hide All Layers, która oznaczona jest symbolem , powoduje, iż warstwa ta będzie niewidoczna w czasie edycji. O tym, że opcja jest uaktywniona informuje nas krzyżyk, po kliknięciu, na którym nastąpi odblokowanie opcji. Kolejna funkcja, której symbolem jest , to Lock/Unlock All Layers. Jeżeli aktywujemy tą funkcję, spowodujemy zamknięcie odpowiedniej warstwy. Gdy opcja ta jest włączona, nie mamy możliwości wybrania żadnych elementów z tej warstwy. Staje się to przydatne szczególnie wówczas, gdy posiadamy na naszym ekranie roboczym bardzo dużo obiektów, które umieszczone są w różnych warstwach, i chcemy je edytować. Do dobrego nawyku należy zatem zamykanie tych warstw, w których praca została już zakończona. Dzięki takiemu postępowaniu unikniemy przypadkowej edycji lub usunięcia elementów, które znajdują się w warstwie, z którą już wcześniej skończyliśmy pracę. Jeżeli opcja jest aktywna przy nazwie warstwy widnieje ikona niewielkiej kłódeczki. Dezaktywujemy tą opcję klikając na ikonę kłódki. Ostatnią z opcji, które mamy do wyboru stanowi Show All Layers as Outlines, która oznaczana jest symbolem . Proces włączania oraz wyłączania tej opcji przebiega w sposób identyczny jak w opcjach opisanych powyżej. Opcja jest aktywna, jeżeli obok nazwy funkcji widzimy kolorowy kwadrat pusty w środku. Dzięki uaktywnieniu tej opcji, w odpowiednich warstwach będą widoczne jedynie kontury obiektów, natomiast wypełnienie zostanie ukryte.

Ustawienia

Okna ustawień mogą być uruchomione wybierając odpowiednie opcje w menu window / panels, prościej je jednak wywołać przez kliknięcie na odpowiednią ikonkę znajdującą się domyślnie w dolnym rogu ekranu. Oknami ustawień prezentują się następująco:

 - Show Info  - Hide Character  - Show Movie Explorer  - Show library

 - Show Mixer  - Show Instance  - Show Actions

W momencie kliknięcia na poszczególne ikonki, naszym oczom ukażą się panele opisane na kolejnych stronach.

1. Panel Info - dostępny przez wybranie opcji Window/Panel/Info lub używając skrótu Ctrl + Alt + I.

Jak widać na powyższym obrazku Panel Info składa się z czterech zakładek.

W zakładce Info znajdują się atrybuty aktualnie zaznaczonego obiektu. Podany jest jego rozmiar w okienku W - oznaczającym szerokość, oraz w okienku H - oznaczającym wysokość. W okienkach określonych przez X i Y zdefiniowane jest położenie danego obiektu na osi pionowej oraz poziomej.

W zakładce Transform możemy znaleźć opcje pozwalające na edycję naszego obiektu. Okna oznaczone w następujący sposób:  i , pozwalają na rozciągnięcie lub zwężenie danego obiektu, zarówno w pionie jak i w poziomie. Po zaznaczeniu opcji Constain mamy pewność, że zmieniając jeden z parametrów, drugi zostanie zmieniony w sposób automatyczny tak, aby proporcje rysunku zostały zachowane. Dzięki istnieniu opcji Rotate mamy możliwość obracania zaznaczonego obiektu o wartość wpisaną w odpowiednim polu tekstowym. Jeżeli włączymy opcję Skew, to obiekt odchyli się w poziomie lub pionie o zdefiniowaną wartość.

W zakładce Stroke możemy ustalić grubość, styl oraz kolor konturów, jakie posiada nasz rysunek. Jeżeli rysunek konturów nie posiada to możemy je dodać przy pomocy narzędzia oznaczonego ikoną . Dolna część okna Stroke zawiera podgląd edytowanej właśnie linii.

W zakładce Fill znajdziemy opcje pozwalające na wypełnienie naszego rysunku dowolnie wybranym kolorem, gradientem lub bitmapą. Jeżeli klikniemy na rozwijane menu w tej zakładce naszym oczom ukażą się następujące opcje:

  • Solid - zwyczajne wypełnienie rysunku wybranym przez nas kolorem.
  • Linear Gradient - wypełnienie rysunku liniowym gradientem pionowym lub poziomym.
  • Radial Gradient - wypełnienie rysunku gradientem okrągłym.
  • Bitmap - wypełnienie rysunku bitmapą.

Jak tworzyć gradienty? Wystarczy wybrać z menu rozwijanego wypełnienie o nazwie Linear Gradient, a rysunek zostanie w domyślny sposób wypełniony poziomym gradientem. Jeżeli chcielibyśmy zmienić orientację tego gradientu na pionową, to z menu Tools, znajdującego się po lewej stronie, powinniśmy wybrać odpowiednie narzędzie wypełnienia, a później kliknąć na gradiencie oraz przeciągnąć kursor w poziomym kierunku. Zakładka Fill umożliwia również modyfikację kolorów gradientów oraz zmianę ich proporcji.

2. Panel Instance - dostępny przez wybranie opcji Window/Panel/ Instance lub używając skrótu Ctrl + I.

Panel Instance zawiera cztery zakładki.

Szczególnie istotna jest zakładka Instance. Możemy w niej nadawać poszczególnym obiektom ich charakterystyczne nazwy. Nazwy te mogą być później używane w języku ActionScript do odnoszenia się do tych obiektów. Pole Behaviour umożliwia zmianę zachowania obiektu na obiekt typu Movie Clip - czyli obiekt animowany, Buton - przycisk, oraz Graphic - obiekt graficzny typu statycznego. Ikonki znajdujące się na dole zakładki umożliwiają sklonowanie obiektu oraz dodanie do niego nowej akcji.

W zakładce Effect mamy możliwość dodania efektów do animowanego obiektu. W tym celu wystarczy wybrać z menu rozwijanego, któryś z dostępnych efektów:

  • Brightness - opcja rozjaśniająca dany obiekt. Jej wartość jest definiowana w procentach.
  • Tint - opcja płynnej zmiany jednego koloru w inny kolor.
  • Alpha - często używany efekt, który powoduje znikanie obiektu. Ustalenie wartości na0% sprawia, że dany obiekt staje się całkowicie niewidoczny.
  • Advanced - opcja pozwalająca na bardzo precyzyjne określenie opcji poszczególnych efektów.

Zakładka Frame po siada wiele interesujących opcji. W polu Label znajdującym się w tej zakładce możemy nadać nazwę wybranej klatce animacji. Nazwa ta stanowi etykietę pozwalającą na odniesienie się do tej klatki korzystając z języka ActionScript, bez użycia wartości liczbowych trudnych do zapamiętania. Jest to pomocna opcja również wtedy, gdy kolejność przygotowywanych przez nas klatek animacji ulegnie zmianie. Wtedy odniesienie do liczby, będzie dotyczyło innej klatki, co spowoduje błędne działanie całej animacji. W oknie Tweening znajdują się opcje Morion oraz Shape. Określają one typ animacji: Shape oznacza zmianę kształtu, natomiast Motion - ruch. Każdemu typowi animacji możemy przypisać zachowanie, takie jak obrót, znajdujący się w oknie Rotate, przy typie animacji Motion.

W zakładce Sound mamy możliwość edycji oraz dodawania zaimportowanych wcześniej plików muzycznych. Importować możemy wszystkie standardowe typy plików muzycznych, takie jak mp3 oraz wav. Do importowania dochodzi, jeżeli wybierzemy opcję Import z menu File, lub też naciśniemy kombinację klawiszy Ctrl + R, oraz klikniemy podwójnie na odpowiednim pliku. Dźwięki, które zaimportowaliśmy trafiają do odpowiedniej biblioteki, natomiast o tym, że do danej klatki dodano dźwięk informuje nas granatowy zygzak znajdujący się obok danej klatki. Po tym jak do klatki dodamy plik muzyczny, możemy wybrać dla niego jeden z udostępnionych nam w rozwijanym menu Effect efektów:

  • Left Channel - muzyka jest odtwarzana jedynie w kanale lewym.
  • Right Channel - muzyka jest odtwarzana jedynie w kanale prawym.
  • Fade Left to Right - następuje płynne przejście z lewego kanału do kanału prawego.
  • Fade Right to Left - następuje płynne przejście z prawego kanału do kanału lewego.
  • Fade in - na początku muzyka jest wyciszona, a następnie stopniowo pogłaśniana. Dzięki temu mamy możliwość ściszenia naszych głośników bez doznania uszczerbku na zdrowiu.
  • Fade out - muzyka jest na końcu muzyka stopniowo wyciszana.
  • Custom - opcja ta pozwala na precyzyjne zdefiniowanie opcji zaawansowanych dotyczących efektów dźwiękowych.

3. Panel Character - dostępny przez wybranie opcji Window/Panel/Character lub używając skrótu Ctrl + T.

W panelu tym znajdują się trzy zakładki.

Zakładka Charakter definiuje nam właściwości wpisywanego przez nas tekstu. Okienko Font pozwala na wybór odpowiedniej czcionki, poniżej możemy ustalić jej rozmiar, odstępy pomiędzy poszczególnymi znakami, jej kolor lub ewentualny indeks dolny albo górny.

W zakładce Paragraph możemy zmieniać ustawienia paragrafów oraz marginesów. Akapit oraz margines są możliwe do ustawienia w dokładności do jednego piksela. Ikony oznaczone jako Align pozwalają na wyrównanie tekstu w następujący sposób:

 - wyrównanie następuje do marginesu lewego.

 - tekst zostaje wycentrowany.

 - wyrównanie następuje do marginesu prawego.

 - tekst zostaje wyjustowany.

W zakładce Text options znajdziemy pole wyboru pomiędzy Output Text, a Input Text. Input Text jest polem tekstowym, w którym istnieje możliwość wpisania określonej wartości z klawiatury. Output Text jest polem wyświetlającym odpowiedni tekst. Możemy dla niego ustalić takie opcje jak Dynamic Text, Static Text oraz Single Line. Poza tym możemy ustalić zmienną w polu nazywanym variable, natomiast dla Input Text możemy nadać maksymalną ilość znaków - opcja Max Chars.

4. Panel Mixer - dostępny przez wybranie opcji Window/Panel/Mixer.

Panel Mixer zawiera dwie zakładki.

W zakładce Mixer mamy możliwość wyboru koloru zaznaczonego obiektu. Okno Alpha służy do ustawienia stopnia przeźroczystości danego obiektu.

W zakładce Swatches możemy zdefiniować kolor z dostępnej palety kolorów zaawansowanych. W dolnej części zakładki znajduje się panel służący do edycji gradientów.

5. Show Movie Explorer - dostępny przez wybranie opcji Window/Movie Explorer lub używając skrótu Ctrl + Alt + M.

Show Movie Explorer służy do otwierania oka Movie Explorer, w którym każdy z elementów nasze animacji jest widoczny w postaci drzewka, które można w dowolny sposób modyfikować.

6. Show Actions - dostępny przez wybranie opcji Window/Actions lub używając skrótu Ctrl + Alt + A.

Po wybraniu tej opcji otwierane jest okno Actions. W oknie tym możliwe jest tworzenie ActionScryptów. Z prawej strony można zauważyć puste pole, w którym nasze skrypty mają się znajdować. Z lewej strony są dostępne standardowe akcje, które podzielono na kilka kategorii. Do wyboru są dwa tryby pracy, które wybieramy po kliknięciu na symbol , który znajduje się w prawym górnym rogu otwartego panelu:

  • Normal Mode - jest to tryb przeznaczony dla początkujących użytkowników, który zawiera wiele funkcji, które ułatwiają pracę nad ActionScryptami. Skrypty są dodawane dzięki dwukrotnemu kliknięciu na danym poleceniu znajdującym się w lewym oknie albo na przeciągnięciu polecenia do okna prawego. Jeżeli w prawym oknie mamy już określone polecenie, to na dole w celu ułatwienia pracy pojawią się okna pozwalające na określenie dokładnych parametrów wykorzystywanych przez nas skryptów.
  • Export Mode - jest to tryb przeznaczony dla zaawansowanych użytkowników. Mamy w nim możliwość ręcznego wpisywania swoich własnych skryptów z klawiatury oraz bezpośredniej modyfikacji kodu istniejących skryptów.

7. Show Library - dostępny przez wybranie opcji Window/Library lub używając skrótu Ctrl + L.

Po wybraniu tej opcji mamy wgląd do biblioteki, czyli zbioru wszystkich elementów znajdujących się na naszym ekranie. W celu umieszczenia elementów bibliotecznych w przygotowywanej przez nas animacji, wystarczy przeciągnąć je na pole pracy. Przy pomocy okonek, które znajdują się na dole panelu, możemy dodawać do biblioteki nowe symbole, korzystając z przycisku Add symbol: , usuwać symbole z biblioteki korzystając z przycisku Delete: , dodawać nowy folder korzystając z przycisku New folder:  oraz ustawiać właściwości danego obiektu przy pomocy przycisku Properties: . U samej góry mamy podgląd naszego symbolu. Jeżeli klikniemy prawym klawiszem myszy na jakimkolwiek symbolu, pojawi się do naszej dyspozycji szereg opcji, takich jak zmiana nazwy danego symbolu oraz możliwość sklonowania. Prawy górny róg panelu umożliwia ustawienie opcji zaawansowanych.

Nasza pierwsza animacja

W momencie, gdy poznaliśmy już wiedzę teoretyczną, spróbujemy wykorzystać ją w praktyce tworząc pierwszą animację. Czytając podane niżej przykłady można śmiało wracać do opisu teoretycznego, gdzie dane zagadnienia są dokładnie wyjaśnione. Na początku stwórzmy prostą animację używając do tego celu kilku nieskomplikowanych elementów. Postaramy się najpierw narysować kwadrat, a następnie wprawimy go w ruch, będzie się również powiększał, obracał wokół własnej osi oraz stopniowo znikał.

Pierwsza rzecz, o której należy pamiętać przy tworzeniu każdej animacji, stanowią cechy Pola Pracy, co rzutuje na cały projektowany przez nas film. Aby edytować Pole Pracy należy posłużyć się panelem Movie Proprietes, który można otworzyć za pomocą kliknięcia w menu Modify na opcję Movie, można też nacisnąć klawisz skrótu Ctrl + M. Ustawmy szerokość Pola Pracy, czyli opcję Height na wartość 400 px, natomiast wysokość naszego Pola Pracy, czyli Height, niech wynosi 100px. Kolor tła ustawiamy na czarny, natomiast w polu liczby klatek odtwarzanych na każdą sekundę - Frame Rate, wpiszmy wartość 24, co zapewni płynną animację. Resztę opcji można pozostawić bez zmian.

W tym momencie, gdy ustawiliśmy już podstawowe właściwości projektowanego przez nas filmy, możemy w końcu zabrać się za rysowanie kwadratu. Zanim przejdziemy do tego momentu wybierzmy klatkę, w której nasz kwadrat powstanie. Niech będzie to pierwsza klatka znajdująca się w warstwie Layer 1, która domyślnie jest traktowana jak klatka kluczowa. Zarówno nasza klatka, jak i warstwa Layer 1 powinna podświetlić się na czarno, co jest znakiem gotowości do rozpoczęcia pracy.

Z panelu zawierającego narzędzia, który znajduje się domyślnie po lewej stronie ekranu, wybieramy narzędzie Rectangle Tool, które posiada wygląd kwadratu, możemy też użyć klawisza skrótu W. Ustawmy wypełnienie naszego kwadratu na szary kolor, natomiast linię zróbmy białą.

Wybrania stylu oraz grubości naszej linii możemy dokonać w panelu Stroke. Teraz możemy już narysować kwadrat umieszczając go po lewej stronie Pola Pracy. Wymiary tego kwadratu na razie nie są ważne, ponieważ zmienimy je na takie, jakie nas interesują korzystając z opcji panelu Info. W momencie, gdy narysujemy już kwadrat, czarna kropka pojawi się w klatce, w której aktualnie pracujemy, oznaczając tym samym, że mamy do czynienia z klatką kluczową zawierającą jakieś obiekty. Teraz powinniśmy wybrać narzędzie Arrow Tool z menu po lewej stronie ekranu, lub nacisnąć klawisz V, a następnie powinniśmy zaznaczyć nasz obiekt poprzez kliknięcie lewym przyciskiem myszy na niezajętej przestrzeni, przeciągając przy tym nasz kursor w ten sposób, aby objął swoim zasięgiem cały rysunek. Robimy to w identyczny sposób jak wygląda zaznaczanie myszką kilku plików naraz w Eksploratorze Windows. Jeżeli zaznaczymy już kwadrat, otwieramy panel Info naciskając kombinację klawiszy Ctrl + Alt + I oraz wpisując w pola W oraz H wartości 30px.

Widzimy, że obiekt zmienił już swoje rozmiary, w tym momencie umieszczamy go w lewym dolnym rogu naszego Pola Pracy. Pozostaje nam jeszcze stworzenie akcji ruchu oraz dodanie kilku ciekawych efektów. Akcja ruchu tworzona jest przez kliknięcie prawym przyciskiem myszy na kluczowej klatce i wybranie z dostępnych opcji Create Motion Tween. Nasza klatka powinna podświetlić się na niebiesko. W następnym kroku powinniśmy umieścić klatkę kluczową w klatce 50 naszej animacji. Aby tego dokonać wybierzmy na listwie czasowej klatkę 50 oraz naciśnijmy przycisk F6. Obszar znajdujący się pomiędzy klatkami powinien podświetlić się na niebiesko, pojawia się również długa czarna strzałka.

Teraz, gdy nadal znajdujemy się w 50 klatce wybieramy narzędzie Arrow Tool, a następnie klikamy na kwadrat, przytrzymujemy lewy przycisk myszki i przeciągamy trzymany kwadrat na prawo, aż do prawej krawędzi Pola Pracy. Spróbujmy również powiększyć nasz obiekt, poprzez kliknięcie na nim prawym klawiszem myszy, wybranie opcji Scale, a następnie przeciągamy w zewnętrznym kierunku któryś z rogów kwadratu. Później pozycjonujemy nasz powiększony kwadrat w taki sposób, aby nie wystawał poza nasze Pole Pracy. Jeżeli naciśniemy klawisz Enter, zobaczymy, że nasz kwadrat w miarę upływu animacji przesuwa się w prawo, powiększając się przy okazji. Pozostaje nam zatem jeszcze sprawić, aby w miarę upływu czasu stopniowo zanikał. W tym celu klikamy na klatkę numer 50, otwieramy panel Effect, a następnie ustalamy opcję Alpha na wartość 0%.

Jeżeli nie dodalibyśmy w 50 klatce żadnego efektu, natomiast w pierwszej klatce ustawilibyśmy efekt Alpha na 0%, to nasz kwadrat zacząłby się stopniowo pojawiać w miarę upływu czasu. Powróćmy teraz do klatki numer 1 i po otwarciu panelu Instance przy pomocy kombinacji klawiszy Ctrl + I, w zakładce Frame ustawmy Tweening na wartość Motion, Rotate ustawmy na CW, natomiast liczbę obrotów times na 1.

Teraz znowu naciśnijmy klawisz Enter, aby zobaczyć efekt naszej pracy. Powinniśmy osiągnąć zamierzony rezultat. Kończąc pracę możemy zapisać nasza animację korzystając z opcji File/Save As.., lub naciskając kombinację klawiszy Ctrl + Shift + S. Możemy też naszą pracę opublikować, używając w tym celu opcji File/Publish albo naciskając Shift + F12.

Animacja po torze

W trakcie poprzedniego przykładu udało nam się sprawić, by kwadrat poruszał się w poziomie. Ta część naszego kursu nauczy nas jak animować nasze obiekty po dowolnie wybranym torze. Torem ruchu może być zarówno elipsa, koło, jak i dowolny rysunek wykonany przez nas. Podobnie jak poprzedni przykład otrzymanie animacji po torze należy do bardzo prostych zadań, pozwala to jednak na osiągnięcie bardzo interesujących efektów. Spróbujmy w naszej nowej animacji stworzyć kwadrat, który będzie poruszał się po elipsie, dodatkowo obracając się wokół własnej osi. W opisach kolejnych kroków będziemy już używali wyłącznie skrótów klawiszowych, które powinny nam być do tego momentu doskonale znane. Na początku ustawmy właściwości naszego filmu znajdujące się w panelu Movie Properities. Ustawmy obszar naszego pola pracy na wartość 300px, zarówno przy szerokości jak i przy wysokości. Liczbę klatek na sekundę ustawiamy na 24, resztę pozostawiamy bez zmian.

Przygotujmy teraz warstwy, które będziemy używali w naszej pracy. Kolejne warstwy dodajemy klikając na symbol . Jeżeli klikniemy już na ten symbol, nad pierwszą domyślną warstwą pojawia się warstwa o nazwie Guide: Layer 1.

Pierwsza warstwa dostała automatycznie atrybut Guided, co możemy w każdej chwili sprawdzić poprzez kliknięcie na niej prawym przyciskiem myszy i wybór opcji Properities.

Oznacza to, że obiekty należące do pierwszej warstwy będą się poruszać po torze, który został narysowany w warstwie Guide: Layer 1. Przejdźmy teraz do warstwy Guide i narysujmy w niej okrąg nieposiadający wypełnienia. Wypełnienie możemy usunąć poprzez zaznaczenie w Fill Color opcji .

W momencie, gdy narysujemy już nasz okrąg umieszczając go w Polu Pracy, na początku przez kliknięcie na nim prawym przyciskiem myszy, wybieramy opcję Scale, zmniejszając go tym samym. Później wybieramy opcję Rotate i obracamy naszą elipsę do ukośnej pozycji. W tym momencie dokonujemy pozycjonowania naszego rysunku w taki sposób, by nie wystawał poza nasze Pole Pracy. Pamiętajmy, że obiekty, które umieszczone są w warstwie o atrybucie Guide na filmie nie są widoczne. Teraz spokojnie możemy już przejść do warstwy Layer 1, której nazwę możemy zmienić na przykład na animowany kwadrat. Warstwa Guide: Layer 1 może być nazwana jako tor ruchu kwadratu. Mając aktywną warstwę animowany kwadrat, rysujemy dowolnych rozmiarów kwadrat, który będzie się znajdował na linii naszej elipsy. Pokazane to jest na poniższym rysunku.

Obramowanie kwadratu ustalmy w panelu Strone na 2px, kolor linii ustalmy na biały natomiast wypełnienie niech będzie szare. Czas rozpocząć pracę nad animacją naszego kwadratu. Aby tego dokonać klikamy prawym przyciskiem myszy na klatce numer 1, w czasie, gdy warstwa animowany kwadrat jest aktywna, i wybieramy opcję Create Motion Tween, natomiast w klatkach 50 oraz 100 dodajemy przy pomocy klawisza F6 klatki kluczowe. Przejdźmy teraz do klatki numer 50, następnie wybierzmy oraz przesuńmy nasz kwadrat o pewną odległość, niewiele mniejszą niż połowa elipsy, w prawo. Powinnyśmy uważać, by nasz kwadrat stykał się ciągle z elipsą. Przejdźmy teraz do klatki numer 100 i znowu przesuńmy nasz kwadrat o niecałą połowę długości elipsy, tak, by znajdował się docelowo w punkcie startowym. Jeżeli przesunęlibyśmy go o wartość większą niż połowa elipsy, dojechałby on do miejsca sprecyzowanego w klatce 50, a następnie powróciłby po swoich śladach na swoje miejsce. Ustawiamy warstwę aktywną na tor ruchu kwadratu i przy pomocy klawisza F5 ustawiamy pustą klatkę w miejsce klatki numer 100. Linia czasu, którą uzyskamy dzięki tym operacjom będzie wyglądać następująco:

Ostatnia rzecz, jaka nam pozostała do wykonania to sprawienie, by kwadrat się obracał. Spowodujmy, by klatki o numerach od 1 do 50 wykonały jeden pełny obrót w kierunku zgodnym ze wskazówkami zegara, a następnie ustawmy, że pomiędzy klatkami od 50 do 100 kwadrat odkręci się. Aby tego dokonać wystarczy, będąc w 1 klatce warstwy animowany kwadrat, otworzyć panel Instance i w zakładce Frame ustawić opcję Rotate na CW, natomiast w polu times wpisać wartość 1. Identycznie postępujemy w klatce 50, z tą różnicą, że teraz opcję Rotate ustawiamy na CCW. Po naciśnięciu klawisza Enter powinniśmy zobaczyć na ekranie monitora animację, jaką chcieliśmy zrealizować.

Zmiana kształtu obiektu - Shape

Teraz pora na kolejny typ animacji, polegający na zmianie kształtu danego obiektu. Nasza animacja, będzie realizowała płynne przejście kwadratu w koło. Jest to stary oraz oklepany przykład, który jednak najprościej i najlepiej oddaje cechy animacji tego typu. Na początku musimy stworzyć nowy film oraz ustalić właściwości naszego Pola Pracy. Ustawmy właściwości naszego filmu, które znajdują się w panelu Movie Properities. Ustawmy obszar naszego pola pracy na wartość 300px, zarówno przy szerokości jak i przy wysokości. Liczbę klatek na sekundę ustawiamy na 24, resztę pozostawiamy bez zmian. Teraz wybierzmy pierwszą klatkę warstwy domyślnej, którą nazwijmy na przykład shape, i narysujmy w jej obrębie dowolny kwadrat. W następnej kolejności wstawmy w klatkę numer 30 pustą klatkę kluczową. W tym celu klikamy prawym klawiszem myszki na klatce numer 30 i wybieramy pozycję Insert Blank Keyframe. Na miejsce naszego kwadratu rysujemy koło. Aby jego rozmiary oraz położenie odpowiadały naszemu kwadratowi, posługujemy się panelem Info. Jeżeli będziemy już mieli gotowe koło, wróćmy do pierwszej klatki i wybierzmy dla niej odpowiednie właściwości. W zakładce Frame panelu Instance, wybieramy z menu rozwijanego, znajdującego się przy opcji Tweening, pozycję Shape.

Na linii czasu, która znajduje się pomiędzy klatkami pojawi się czarna strzałka znajdująca się na zielonym tle.

Jeżeli teraz naciśniemy klawisz Enter, zobaczymy, w jaki sposób nasz kwadrat płynnie zmienia się w koło. Jednak nie jest to jeszcze koniec pracy. Zapoznajmy się z jeszcze jedną przydatną funkcją zwaną Shape Hints. Dzięki tej funkcji możemy dostosować tor, według którego ma przebiegać zmiana kształtu. Zaznaczmy klatkę numer 1 i z menu Modify wybierzmy kolejno opcje: Transform oraz Add Shape Hints, możemy zamierzony efekt osiągnąć od razu naciskając kombinacje klawiszy Ctrl+Shift+H. Powinno się pojawić niewielkie czerwone kółeczko wraz z symbolem litery A. Operację tą należy powtórzyć jeszcze przynajmniej trzy razy w taki sposób, by wyświetlić litery od A do D. W tym momencie spróbujmy umieścić te litery w poszczególnych rogach naszego kwadratu, tak jak zostało to pokazane na rysunku poniżej.

Teraz przejdźmy do klatki, w której znajduje się koło. Jak powinniśmy zauważyć, znajdziemy już tutaj nasze litery, wystarczy je tylko właściwie rozmieścić. Przykładowe rozmieszczenie pokazane jest na rysunku poniżej, jednak warto spróbować innych rozwiązań.

Jeżeli wszystkie kółeczka podświetliły się na zielony kolor, oznacza to, że cała operacja została poprawnie przeprowadzona, a Shape Hinty zostały właściwie nadane. Dla uzyskania jeszcze ciekawszego efektu można zaimplementować powrót kółeczka do kształtu kwadratu.

Efekt maski

Ta część kursu opisuje w zasadzie dwie istotne sprawy. Nauczymy się teraz stworzyć efekt maski oraz efektywnie posługiwać się obiektami typu Graphic oraz oknem Movie Clip. Na początku należy utworzyć nowy Movie Clip, w tym celu z menu Insert wybierzmy opcję New Symbol, która jest dostępna również pod skrótem klawiszowym Ctrl + F8. Teraz ustalmy jego zachowanie na Movie Clip oraz wpiszmy jakąś nazwę.

Po wciśnięciu OK tworzy się pierwszy klip filmowy. Można w nim wykonywać wszystkie te rzeczy, które są możliwe przy pracy w głównym Polu Pracy. Właściwe korzystanie z klipów znacznie ułatwia pracę oraz pomaga zachować określony porządek. Napis znajdujący się powyżej panelu warstw informuje nas, w którym klipie aktualnie się znajdujemy.

Stwórzmy teraz dwie warstwy. Warstwę górną nazwijmy maska, natomiast warstwę dolną nazwijmy napis. Teraz przejdźmy do pierwszej klatki w warstwie napis i przy pomocy narzędzia Text Tool, wybranego z panelu Tools, wpiszmy do niej jakiś tekst. Korzystając z opcji panelu Charakter można ustawiać odpowiednie opcje, które dotyczą tekstu. Ustawiamy kolor tekstu na biały i wpisujemy jakiś tekst, na przykład słowo kalafior. Znajdując się nadal w warstwie napis, możemy teraz wstawić pustą klatkę do klatki numer 35 naszej animacji.

Przejdźmy teraz do pierwszej klatki w warstwie maska i narysujmy na niej niezbyt szeroki prostokąt, na przykład o szerokości rzędu 30px, który będzie nieco wyższy od naszego tekstu. Kolory naszego prostokąta nie odgrywają teraz żadnej roli, nie będą one widoczne w czasie animacji. Prostokąt będzie obiektem odsłaniającym nasz napis. Dodatkowo możemy go nieco pochylić dzięki zastosowaniu opcji Rotate. Ustawmy teraz prostokąt w taki sposób, by znalazł się on przed tekstem i zacznijmy go animować od strony prawej do lewej, aż dojdzie do końca tekstu. W identyczny sposób animowaliśmy w pierwszym przykładzie kwadrat. Koniec tej animacji powinien znaleźć się w klatce numer 35 - jeżeli zrobilibyśmy inaczej, to klatki kluczowe można przenosić w bardzo prosty sposób, po prostu klikając na nich a następnie przesuwając je w pożądanym kierunku.

Kliknijmy teraz prawym przyciskiem myszy na warstwie maska i wybierzmy opcję Mask. W tym momencie właściwości warstwy niższej powinny zostać ustawione automatycznie na Masked, natomiast my zobaczymy na ekranie taki widok:

Należy pamiętać, że po właściwym wykonaniu tej operacji poszczególne warstwy zostaną zablokowane i aby dokonać w nich jakichkolwiek zmian musimy je najpierw odblokować przez odznaczenie ikony kłódki. Powinniśmy pamiętać, by przed odtworzeniem animacji znowu zamknąć te warstwy. Oznacza to, że warstwa maska posiada obiekty, które stopniowo odkrywamy z warstwy napis. Jeżeli w tym momencie naciśniemy klawisz Enter powinniśmy zobaczyć interesujący efekt. Chcielibyśmy jednak tak zmodyfikować animację, aby napis był widoczny przez cały czas. Stwórzmy zatem nową warstwę klikając na ikonę Add Layer i nazwijmy ją tło. Nowa warstwa powinna znajdować się poniżej starszych warstw. Do nowo powstałej warstwy powinniśmy skopiować pierwszą klatkę warstwy napis, poprzez kliknięcie na niej prawym przyciskiem myszy i wybranie opcji Copy Frames. W następnej kolejności, przy pomocy polecenia Paste Frazes możemy wstawić skopiowaną warstwę do 1 klatki warstwy tło. Teraz wybierzmy narzędzie Text Tool i zmieńmy kolor naszego tekstu na jakiś odcień szarości. Wstawmy teraz pustą klatkę do klatki 35 animacji, otrzymując wygląd listwy czasowej jak na zdjęciu poniżej:

W tym momencie skończyliśmy już pracę nad Movie Clipem i wystarczy już jedynie umieścić go w głównym Polu Pracy. W tym celu kliknijmy na ikonę Scene 1, powracając do części głównej naszej animacji. Otwórzmy bibliotekę Ctrl + L i przeciągnijmy nasz klip filmowy na Pole Pracy w podobny sposób, jak robimy to z grupą plików Windowsowych. W sposób automatyczny klip znajdzie się w klatce numer 1 warstwy pierwszej. Poza klipem w bibliotece znajdują się również obiekt typu Graphic, zawierający nasz prostokąt. Poprzez dwukrotne kliknięcie na tym obiekcie zostaniemy przeniesieni do okna, w którym możliwa jest edycja rysunku. Rysunki powinniśmy zapisywać jako obiekty Graphic wówczas, gdy używamy ich w wielu klipach oraz w wielu animacjach. Nie musimy wtedy poprawiać pewnej części rysunku w każdym klipie oddzielnie, jeżeli zauważymy drobny błąd. Wystarczy w takim wypadku zmienić obiekt Graphic. Naciskając kombinację klawiszy Ctrl + Enter możemy zobaczyć owoc naszej pracy.

Wprowadzenie do ActionScript

ActionScript jest powszechnie wykorzystywanym we Flashu językiem skryptowym. Podobnie jak sam Flash, również język ActionScript przeszedł ogromną ilość modyfikacji wraz z upływem czasu. W wersji 5 Flasha stanowi on już imponujące zaawansowane narzędzie, które może być wykorzystywane nie tylko przez zaawansowanych autorów animacji Flash. Opisywany język jest bardzo podobny do JavaScript. Opiera on się na dodawaniu wybranych akcji do poszczególnych obiektów lub klatek, takich jak MC i buttony. Dzięki rozbiciu wszystkich skryptów na różne obiekty, unikamy ogromnych kodów przy tworzeniu zaawansowanych stron WWW. Edycja długich kodów może być niezwykle monotonna i nużąca. Skrypty, które pisane są w ActionScript są bardzo proste i zwięzłe, dzięki czemu poprawienie i wykrycie błędu nie trwa zbyt długo. Aby wstawić skrypt do animacji posłużmy się panelem Actions. Proces wstawiania skryptów opiera się wyłącznie na przeciąganiu gotowych kodów lub wpisywaniu krótkich poleceń. Dodatkowe ułatwienia znajdą początkujący użytkownicy, którzy pracują w trybie Normal Mode. Otrzymują oni w automatyczny sposób pomoc, w postaci wyświetlania pewnych określonych pól, w których trzeba wpisać jedynie adres strony WWW, do której przeniesiemy się klikając na odpowiedni link.

Tworzenie przycisku

Postaramy się teraz stworzyć przycisk, który będzie odnośnikiem do jakiejś strony WWW, dodamy do niego dźwięk i sprawimy, aby po najechaniu na niego myszką była odtwarzana określona animacja. W celu wykonania przycisku należy na początku stworzyć obiekt buton oraz nadać mu jakąkolwiek nazwę. W następnej kolejności w kluczowej klatce przycisku powinniśmy narysować prostokąt o wymiarach, powiedzmy 100x25 px. Wypełnijmy go na szaro i ustawmy białe obramowanie o grubości 2 px. Odpowiednio wcześniej tło naszej animacji powinno być ustalone na czarne. Teraz piszemy na przycisku dowolny tekst, na przykład słowo: burak.

Klatkę skopiujmy do pozostałych trzech: HIT, DOWN i OVER. Teraz spróbujmy zaaranżować efekt, który będzie odtwarzał jakąś animację po najechaniu myszką na przycisk. Aby tego dokonać należy do klatki OVER przycisku wstawić MC z animacją.

Na początku musimy wykonać pożądaną animację. W tym celu tworzymy zupełnie nowy obiekt Movie Clip i nazywamy go na przykład: koło. W tym momencie powinniśmy narysować białe koło w jedynej warstwie należącej do tego obiektu i animować je w dowolny sposób. Przykładowo można sprawić, by koło poruszało się z prawej na lewą stronę, przy okazji zmieniając się w kwadrat i stopniowo znikając. Otwórzmy teraz bibliotekę i przejdźmy do naszego przycisku poprzez dwukrotne kliknięcie na nim. Następnie przejdźmy do klatki OVER i przeciągnijmy do niej nasz klip z biblioteki, odpowiednio pozycjonując go względem samego przycisku.

Do zrealizowania pozostało jedynie dogranie dźwięku do przycisku oraz posłużenie się ActionScriptem, aby utworzyć z niego odnośnik. Importu dźwięku do filmu dokonamy dzięki użyciu opcji Import z menu File. Jeżeli już zaimportujemy dany dźwięk, powinien on trafić do naszej biblioteki. Chcielibyśmy, by dźwięk został odtworzony w chwili najechania kursorem na przycisk, musimy go więc wstawić do klatki OVER. Kliknijmy teraz na niej i otwórzmy panel Instance, a następnie wybierzmy zakładkę Sound. Z menu rozwijanego Sound wybierzmy nazwę naszego pliku.

W klatce OVER, na linii czasu powinniśmy zobaczyć pionową kreskę informującą o tym, że dana klatka zawiera plik dźwiękowy.

Powróćmy teraz do głównej sceny, przenieśmy przycisk z biblioteki do Pola Pracy i odpowiednio go pozycjonujmy. Pozostało nam jedynie stworzenie z naszego przycisku odnośnika do strony internetowej. Kliknijmy prawym przyciskiem na przycisku i wybierzmy Actions. W oknie Actions, które się pojawiło, wybierzmy znajdującą się z lewej strony akcję getURL i kliknijmy na niej dwa razy lub przeciągnijmy na prawą stronę. Na skutek tego działania w oknie po prawej stronie zobaczymy dodaną właśnie akcję.

Poniżej znajdziemy panel ułatwiający zdefiniowanie akcji. W oknie URL wpiszmy adres wybranej strony, która powinna się wyświetlić po naciśnięciu danego przycisku. Reszta opcji powinna być pozostawiona bez zmian. Teraz nasza akcja będzie prezentowała się w następujący sposób:

on (release) {

getURL ("http://www.xxxxxxx.pl");

}

Użycie komendy on(release) spowoduje, że po naciśnięciu buttona oraz po zwolnieniu przycisku myszy, wykonana zostanie akcja, która znajduje się między dwoma nawiasami klamrowymi. Akcja getUrl(); odpowiada za otwarcie adresu zdefiniowanego w nawiasie po niej następującym. Adres ten powinien zostać wpisany w cudzysłowie. Jeżeli klikniemy w polu on(release) komenda ta się podświetli a na dole znajdziemy wiele opcji do wyboru.

Niektóre z opcji można pojąć w intuicyjny sposób, mając jedynie elementarną wiedzę z języka angielskiego. Przykładowo dzięki zaznaczeniu okienka Press, adres internetowy zostanie otwarty tuż po tym jak klikniemy myszą na przycisku, natomiast opcja Roll Over otworzy nam adres już w momencie, gdy przejedziemy nad przyciskiem kursorem myszy.

ActionScripts

Opiszmy akcję getURL, która znajduje się kategorii BasicActions. Opisywana akcja jest łudząco podobna do znacznika HTML "a href", z tą drobną różnicą, że umożliwia na przesyłanie elementów formularzy. GetUrl pozwala na łączenie się ze standardową stroną internetową, serwerem FTP, innym filmem Flash, skryptem CGI oraz dowolnym innym rodzajem plików.

Do parametrów getURL należą:

  • URL - w polu tym może zostać wpisany zarówno bezwzględny adres strony zgodny z formatem http://www.nazwadomeny.pl oraz http://www.nazwadomeny.pl/podkatalog/main.html, oraz względny adres ścieżki dostępu, o ile naszym celem jest połączenie z plikiem, który pozostaje w jakiejś relacji do naszego filmu Flash, przykładowo możemy wpisać w tym polu grafika/zdjecie.jpg albo po prostu wpisać nazwę pliku, jeśli znajduje on się w tym samym katalogu, co nasza animacja Flash. Jeżeli chcemy się połączyć z serwerem FTP wystarczy, że wpiszemy ftp://nazwaużytkownik:jegohasł, można też wpisać zwykły adres ftp, jeśli chcemy zapewnić logowanie anonimowe. GetURL może również służyć do wywołania domyślnego programu pocztowego. Ma to miejsce wtedy, gdy w polu URL wpiszemy mailto:
  • Window - stanowi odpowiednik atrybutu target znajdującego się w znaczniku "a href". Udostępnia on cztery opcje:

_self - do tego samego okna lub ramki, w której umieszczony jest film SWF zostaje załadowany adres URL.

_blank - otwierane jest nowe okno przeglądarki, w którym otwierany jest adres URL.

_parent oraz _top - opcje te służą do współpracowania z ramkami. Działają one w zasadzie tak samo, czyli powodują załadowanie do okna przeglądarki adresu URL oraz realizują usunięcie aktualnego zestawu ramek.

Jeżeli nasz plik SWF będzie służył jako pasek nawigacyjny, który umieszcza się w lewej części strony internetowej i ma on służyć sterowaniu otwieraniem stron prawej części okna, to w polu Window powinniśmy wpisać nazwę ramki, do której chcemy, aby adres URL został załadowany. Jeśli pozostawimy pole Window puste, to zostanie mu domyślnie przypisana opcja _self.

  • Variables - jeśli chcemy, by akcja getURL funkcjonowała jak normalny odnośnik, to parametr Variables powinien zostać pozostawiony w opcji domyślnej Don't Send. Zarówno opcje Send Using GET, jak i Send Using POST służą zdefiniowaniu sposobu przesyłania określonych wartości do skryptów, które znajdują się po stronie serwera, przykładowo podczas przesyłania formularzy do konkretnych skryptów CGI.

Przetestujmy teraz praktycznie akcję getURL. W tym celu otwórzmy nowy dokument Flashi i stwórzmy nowy symbol przycisku. Następnie przeciągnijmy do z biblioteki na Pole Pracy. Teraz zaznaczmy nasz przycisk i otwórzmy edytor skryptów znajdujący się w panelu Actions. Wybieramy z kategorii BasicActions pozycję getURL, jak można zauważyć został automatycznie dodany manipulator typu on(release), który jest związany z klasycznym zdarzeniem myszy, polegającym na najechaniu wskaźnikiem na przycisk i kliknięciem. Z wiedzą, którą już posiadamy możemy bez przeszkód eksperymentować z wypełnieniem pól URL oraz Window. Przykładowy projekt składa się z następujących plików: get_url.swf, ramka_glowna.html, get_url.html, ramka_dolna.html oraz ramka_dolna2.html. W pliku get_url.html znajdują się dwie ramki: jedną o nazwie glowna, do której jest ładowana strona ramka_glowna.html oraz przykładowy plik get_url.swf, oraz ramka o nazwie dolna, do której jest ładowana strona o nazwie ramka_dolna.html.

Dzięki wybraniu opcji _self otwierany jest adres URL wpisany w bieżącej ramce lub oknie, zależnie od tego, gdzie zostanie umieszczony plik swf. W naszym przykładzie plik posiadający nazwę ramka_glowna.html zostanie załadowany ponownie do ramki glowna. Adres, który wpisaliśmy w polu URL jest względnym adresem, ponieważ plik ładowany znajduje się w tym samym katalogu, w którym znajduje się nasz plik swf.

Wybranie opcji _blank otwiera wpisany przez nas adres URL, który w przykładzie jest plikiem o nazwie ramka_glowna.html, w nowo otwartym oknie przeglądarki. Adres wpisywany jest jak poprzednio w polu URL.

Zmiana kolorów

Zmiana kolorów może być dokonana przy pomocy obiektu Color. Dzięki tej klasie możemy zmienić lub ustalić kolor naszego klipu filmowego. Najpierw musimy przygotować nasz film, a następnie przy pomocy obiektu koloru odpowiednio ustalić funkcje konstruktora w następujący sposób: NazwaKoloruObiektu = new Color(odwołanie_do_naszego_klipu);. NazwaKoloruObiektu to nazwa tworzonego obiektu, natomiast odwołanie_do_naszego_klipu to ścieżka dostępu do stworzonego przez nas klipu. Przy pomocy metody setRGB możemy przypisać kolor do określonego obiektu. W definicji koloru powinniśmy użyć szesnastkowych wartości RBG, tak jak jest to rozwiązane w zwykłych dokumentach html. Najpierw podaje się kolor czerwony, później zielony, a na końcu niebieski, szablon informacji o kolorze wygląda w następujący sposób: 0xRRGGBB. Przykładowy skrypt stworzy nam nowy obiekt dla klipu filmowego nazwanego samochod. Do obiektu podpięta jest metoda setRGB, która nadaje samochodowi kolor niebieski.

on (release) { myColor = new Color(samochod); myColor.setRGB(0x0000FF); } Kontrola odtwarzania klipówPierwszy przykład stanowi aplikacja, która umożliwia kontrolę odtwarzania danego filmu. Film może być kontrolowany przy pomocy takich poleceń jak stop(), czy play(). Aplikacja jest złożona z ekranu, na którym odtwarzane są obrazy. Ekran jest klipem, do którego możemy się odwoływać. Każdy klip zbudowany jest z kilku klatek i warstw. Górna warstwa klipu posiada w sobie tylko jedną klatkę, w której umieszcza się komendę stop(). Dzięki takiemu rozwiązaniu klip nie będzie odtwarzany w nieskończoność i zatrzyma się on na pierwszej klatce. Poniżej warstwy górnej położone są kolejne warstwy, wśród nich możemy wyróżnić ramki, a pod nimi warstwy maskujące z odpowiednimi kształtami. W przykładowej zamaskowanej warstwie znajduje się osiem obrazków, które przedstawiają widoki nieba. Ułożenie masek w ten sposób pozwala nadać odpowiednie kształty ekranowi. Na scenie umieszczonych jest pięć przycisków, które są odpowiedzialne za pełną kontrolę nad odtwarzaniem klipu. Każdy z przycisków posiada odpowiedni symbol, po którym bez problemów jesteśmy się w stanie zorientować, jakie działanie wywoła naciśnięcie na niego. Pierwszy z tych przycisków spowoduje odtworzenie po kolei każdego z ośmiu obrazków, aż do momentu zatrzymania się na pierwszy, z racji umieszczenia w jego obrębie komendy stop(). ActionScript nakazuje Flaszowi, by po naciśnięciu przycisku play przeszedł po każdym z obrazków, korzystając z polecenia play(). Komenda ta jest przypisana do ekranu, powodując odwołanie do niego: on (release) { ekran.play(); }Użycie przycisku stopu powoduje natychmiastowe zatrzymanie odtwarzania na danym obrazie. Jest to spowodowane użyciem polecenia stop(): on (release) { ekran.stop(); } Przycisk oznaczający powrót do początku odtwarzania nakazuje klipowi, by powrócił do pierwszej klatki i zatrzymał się tam. Operacja ta jest realizowana przy pomocy polecenia gotoAndStop() z dodanym parametrem 1: on (release) { ekran.gotoAndStop(1); } Ostatnie z dwóch przycisków pozwalają na wyświetlenie poprzedniego i następnego obrazu. W tym celu użyto dwóch poleceń prevFrame() oraz nextFrame(): on (release) { ekran.prevFrame();} on (release) { ekran.nextFrame(); } Polecenia te mogą być z powodzeniem wykorzystywane do kontroli animacji oraz do sporządzania pokazów slajdów we Flashu. Zdarzenia klipów oraz przycisków Zdarzenia, które zachodzą w przyciskach lub klipach są niezmiernie istotne dla całego filmu, za sprawą swojej odpowiedzialności za określone reakcje umieszczonych na ekranie elementów. Jeżeli poznamy wszystkie zdarzenia przycisków i klipów, zyskamy znacznie lepsze panowanie nad poszczególnymi elementami animacji oraz będziemy w stanie pisać bardziej realistyczne w działaniu skrypty. Począwszy od wersji Flash MX stało się możliwe przypisywanie zdarzeń także na linii czasu, dzięki odwołaniu się do nazwy danego elementu. Wcześniejsze wersje umożliwiały przypisywać zdarzenia jedynie na skutek bezpośredniego umieszczenia kodu we wszystkich elementach. W poniższej tabeli pokazano wszystkie zdarzenia, które mogą być nadawane przyciskom.

Przypisane bezpośrednio do przycisku zdarzenie

Zdarzenie przypisane do przycisku na linii czasu

Opis zdarzenia

on (press)

nazwa_przycisku.onPress

Zdarzenie występuje w chwili najechania kursorem myszy na aktywne pole przycisku i po naciśnięciu klawisza myszy.

on (release)

nazwa_przycisku.onRelease

Zdarzenie występuje w chwili najechania kursorem myszy na aktywne pole przycisku i po naciśnięciu klawisza myszy, a następnie jego zwolnieniu.

on (release Outside)

nazwa_przycisku.onReleaseOutside

Zdarzenie występuje w chwili najechania kursorem myszy na aktywne pole przycisku i po naciśnięciu na nim klawisza myszy, a następnie jego zwolnieniu już poza obszarem aktywnym.

on (rollOver)

nazwa_przycisku.onRollOver

Zdarzenie występuje w chwili najechania kursorem myszy nad aktywnym polem przycisku.

on (rollOut)

nazwa_przycisku.onRollOut

Zdarzenie występuje w chwili przejechania kursorem myszy z obszaru pola aktywnego poza ten obszar.

on (dragOver)

nazwa_przycisku.onDragOver

Zdarzenie występuje w chwili najechania kursorem myszy na obszar aktywny przycisku i po naciśnięciu na nim klawisza myszy. Następnie wskaźnik zostaje przesunięty poza aktywny obszar i gdy powtórne znajdzie się na aktywnym obszarze przy równoczesnym wciśnięciu klawisza myszy następuje wyzwolenie akcji.

on (dragOut)

nazwa_przycisku.onDragOut

Zdarzenie występuje w chwili najechania kursorem myszy na obszar aktywny przycisku i wciśnięciu klawisza myszy. Następnie wskaźnik musi zostać przesuwany poza aktywny obszar przy równoczesnym wciśnięciu klawisza myszy.

on (keyPress "klawisz")

Zdarzenie występuje w chwili wciśnięcia właściwego klawisza znajdującego się na klawiaturze komputera.

nazwa_przycisku.onKeyDown

Zdarzenie występuje w chwili wciśnięcia dowolnego klawisza znajdującego się na klawiaturze komputera.

nazwa_przycisku.onKeyUp

Zdarzenie występuje w chwili puszczenia dowolnego klawisza znajdującego się na klawiaturze komputera.

Jeżeli mamy do czynienia z przyciskami, możemy przypisać do nich kilka zdarzeń, podając je po kolejnych przecinkach. Skrypt, który pokazany jest poniżej umieszcza się wewnątrz przycisku, powodując ustawienie jego przeźroczystości przycisku na 50%, po najechaniu na niego kursorem. This jest słowem kluczowym, które dotyczy tego obiektu, w którym skrypt się znajduje.

on (rollOver) { this._alpha = 50; } Identyczny efekt możemy uzyskać pisząc skrypty w oparciu o linię czasu. Trzeba najpierw nadać przyciskowi w palecie Properities nazwę, na przykład: klawisz. guzik.onRollOver = function() { this._alpha = 50; } Poniższa tabela opisuje zdarzenia możliwe do przypisania klipom.

Przypisane bezpośrednio do klipu zdarzenie

Zdarzenie przypisane do klipu na linii czasu

Opis zdarzenia

onClipEvent (load)

nazwa_klipu.onLoad

Zdarzenie jest wyzwalane w chwili ładowania klipu.

onClipEvent (enterFrame)

nazwa_klipu.onEnterFrame

Zdarzenie jest wyzwalane w zależności od prędkości odtwarzania klipu.

onClipEvent (unload)

nazwa_klipu.onUnload

Zdarzenie jest wyzwalane w chwili wyjścia z danej aplikacji.

onClipEvent (mouseDown)

nazwa_klipu.onMouseDown

Zdarzenie jest wyzwalane w chwili wciśnięcia klawisza myszy.

onClipEvent (mouseUp)

nazwa_klipu.onMouseUp

Zdarzenie jest wyzwalane w chwili zwolnienia klawisza myszy.

onClipEvent (mouseMove)

nazwa_klipu.onMouseMove

Zdarzenie pozwala śledzić położenia kursora na ekranie.

onClipEvent (keyDown)

nazwa_klipu.onKeyDown

Zdarzenie jest wyzwalane w chwili wciśnięcia dowolnego z klawiszy klawiatury komputera.

onClipEvent (keyUp)

nazwa_klipu.onKeyUp

Zdarzenie jest wyzwalane w chwili zwolnienia dowolnego z klawiszy klawiatury komputera.

onClipEvent (data)

nazwa_klipu.onData

Zdarzenie pozwala określić, czy plik SWF został w całości wczytany.

Po przypisaniu zdarzenia bezpośrednio do klipu nie jest możliwe wybranie kilku ze zdarzeń równocześnie, w taki sposób jak można to było robić w przypadku przycisków. Jeśli chcemy dodać inne zdarzenia do poszczególnych klipów musimy napisać zestaw nowych instrukcji. Wersja Flash MS umożliwia przypisywanie do klipu na linii czasu wszystkich tych zdarzeń, które były obsługiwane przez przyciski.

Polecenia warunkowe

Szczególnie ważnym elementem w przypadku pisania kodu w jakimkolwiek języku programowania jest podejmowanie decyzji. Dają nam one możliwość poprawnego reagowania na określone wartości, które zwiększają kontrolę nad całością programu. Polecenia warunkowe realizowane są przy pomocy instrukcji if, która dokonuje porównania dwóch wartości. Jeżeli w wyniku sprawdzenia warunku otrzymaliśmy prawdę, to wykonywany jest kod umieszczony w nawiasach klamrowych. Jeżeli w wyniku sprawdzenia warunku otrzymaliśmy fałsz, to fragment kodu pomiędzy klamrami jest pomijany. Poniżej znajduje się przykładowy zestaw instrukcji:

zmienna = 3; if (zmienna == 3) { gotoAndPlay("nastepna") } W wyniku działania powyższego fragmentu kodu, jeżeli warunek zawarty po słowie if w nawiasach okrągłych będzie prawdziwy, to kod, który jest zawarty w nawiasach klamrowych spowoduje skok do etykiety nazwanej: następna, która znajduje się na linii czasu. Jeżeli chcielibyśmy zareagować w wypadku, w którym warunek nie byłby spełniony, wystarczy użyć po poleceniu słowa kluczowego else i również je otoczyć nawiasami klamrowymi z komendami w środku. Komendy te powinny opisywać reakcję Flasha w wypadku niespełnienia warunku zawartego po słowie kluczowym if. Przykład takiego kodu znajduje się poniżej. zmienna = 3; if (zmienna == 4) { gotoAndPlay("nastepna") } else { gotoAndPlay("poprzednia") } Możliwe jest również użycie dłuższej składni poleceń if, które będą przeprowadzały kilka testów warunkowych. Operatory, które mogą być wykorzystywane wewnątrz kodu oraz w operatorach warunków wyglądają następująco: == - jest to test równości

!= - jest to test nierówności

"" - jest to operator, który zazwyczaj stosujemy w deklaracjach łańcuchów tekstowych

and - operator logicznego i

or - operator logicznego lub

+ - operator dodawania albo łączenia łańcuchów tekstowych

- - operator odejmowania

* - operator mnożenia

Key - obiekt

Obiekt Key stanowi obiekt najwyższego poziomu, który może być używany bez konieczności użycia konstruktorów. Metod obiektu Key powinniśmy używać do budowania interfejsów, które mogą być kontrolowane przez użytkownika przez zwykłą klawiaturę. Obiekt Key posiada stałe właściwości, które reprezentują najczęściej używane w grach klawisze. Przykład kodu podany jest poniżej.

onClipEvent (numberOfFrames) {if(Key.isDown(Key.LEFT)) { polozenie_x=polozenie_x+15;}}Startdrag

W celu stworzenia movie clip, którego użytkownik ma możliwość przesunąć do dowolnej lokalizacji, należy przypisać akcje startDrag oraz stopDrag do przycisków znajdujących się wewnątrz naszego movie clip'a w sposób pokazany poniżej.

on(press) { startDrag(Przycisk);}on(release) { stopDrag();}

Date - obiekt

Obiekt Date pozwala na odczyt czasu oraz daty według uniwersalnego czasu, jakim jest lokalny czas Greenwich - GMT albo według czasu odliczanego przez system operacyjny, który znajduje się na komputerze, na którym odtwarzany jest nasz film Flash. Motody obiektu Date mogą być wywołane po utworzeniu przy pomocy konstruktora odpowiedniej instancji obiektu Date. Używanie obiektu Date wymaga posiadania co najmniej wersji 5 Flash Playera. Poszczególne metody obiektu Date nie są stałe, są one przypisywane indywidualnym instancjom obiektu Date, które wskazano w chwili wywołania metody. Lista metod wchodzących w skład obiektu Date przedstawiona jest poniżej.

Nazwa metody

Opis metody

getDate

Zwraca, według czasu miejscowego, pełną datę wskazanego obiektu Date.

getDay

Zwraca, według czasu miejscowego, dzień wskazanego obiektu Date.

getFullYear

Zwraca, według czasu miejscowego, czterocyfrowy rok wskazanego obiektu Date.

getHours

Zwraca, według czasu miejscowego, godziny wskazanego obiektu Date.

getMinutes

Zwraca, według czasu miejscowego, minuty wskazanego obiektu Date.

getMonth

Zwraca, według czasu miejscowego, miesiąc wskazanego obiektu Date.

getSeconds

Zwraca, według czasu miejscowego, sekundy wskazanego obiektu Date.

Przykład podany poniżej utworzy nowy obiekt Date, poprzez połączenie zwróconych wartości starego obiektu Date: getMonth, getDate oraz getFullYear i wyświetli je w polu tekstowym, które jest przypisane zmiennej DateText.

mojaData = new Date();DateText = (mojaData.getMonth() + "/" + mojaData.getDate() + "/" + mojaData.getFullYear());

WŁAŚCIWOŚCI

_alpha

Składnia: nazwaNaszejInstancji._alpha = procent

Argumenty: procent jest liczbą od 0 to 100, która określa przeźroczystość.

Opis: jest to właściwość, która ustawia albo odczytuje wartość przeźroczystości _alpha. Własność ta ustawiana jest w zakresie od 0, oznaczającego całkowitą przeźroczystość do 100, oznaczającego całkowitą widoczność. Obiekty znajdujące się w movie clip, których wartość ustawiono na 0 nadal są aktywne, jednak nie są widoczne. Przykładowo, jeżeli istnieje w movie clip przycisk, którego wartość _alpha ustawiono na 0, to o ile zaimplementowano odpowiednie reakcje na zdarzenia, będzie on reagował na wciśnięcie klawisza myszki na obszarze gdzie się znajduje.

_rotation

Składnia: nazwaNaszejInstancji._rotation = Liczba_Całkowita

Argumenty: Liczba_Całkowita - oznacza ilość stopni, o jakie movie clip.

_visible

Składnia: nazwaNaszejInstancji._visible = Boolean;

Argumenty: Boolean oznacza wstawienie wartości true lub false, w celu określenia czy dany movie clip jest widoczny.

Opis: jest to właściwość ustalająca czy film, który jest określony w argumencie nazwaNaszejInstancji jest widoczny. Klipy, które są niewidoczne posiadają własność _visible ustawioną na false i są wyłączone. Przykładowo przycisku w klipie posiadającego właściwość _visible ustawioną na false nie można kliknąć.

_Width i _height

Składnia: nazwaNaszejInstancji._width = wartość;

Argumenty: wartość szerokości filmu podawana w pikselach.

Opis: jest to właściwość, która odpowiada za ustawienie szerokości filmu. Właściwości _height oraz _width we wcześniejszych wersjach Flash`a, można było jedynie odczytywać. W Flash 5 mogą być one zarówno ustawiane jak i pobierane.

_x i _y

Składnia: nazwaNaszejInstancji._x = Liczba_CałkowitaArgumenty: Liczba_Całkowita to lokalna koordynata x lub y naszego movie clip'a.

Opis: jest to właściwość ustawiająca koordynatę x naszego movie clip'a w stosunku do układu współrzędnych nadrzędnego clip'a. Jeżeli dany movie clip znajdzie się na głównej linii czasu, wtedy układ jego współrzędnych zaczyna się w lewym górnym rogu sceny. Jeżeli movie clip znajdzie się w środku innego movie clipa, który poddawany jest transformacjom, to wtedy movie clip znajdzie się w lokalnym układzie współrzędnych movie clip'a, który go zawiera. Przykładowo dla movie clip'a, który jest obrócony o 90º w kierunku przeciwnym do ruchu wskazówek, movie clip'y, które są w nim zawarte dziedziczą jego układ współrzędnych, który jest obrócony o 90º. Układ współrzędnych danego movie clip'a zaczyna się w punkcie bazowym.

_yscale i _xscale

Składnia: nazwaNaszejInstancji._xscale = wartość_w_procentach

Argumenty: procenty określają poziomą skalę instancji. Domyślna wartość wynosi 100.

Opis: jest to właściwość, określająca w procentach poziomą skalę klipa, która została zastosowana począwszy od bazowego punktu tego klipa. Domyślny punkt bazowy ma współrzędne (0,0). Skalując lokalny układ współrzędnych mamy wpływ na właściwości _x i _y, które wyrażone są w pikselach. Przykładowo, jeśli przeskalujemy nadrzędny klip do 50%, to zmiana właściwości _x przesunie dany obiekt wewnątrz naszego klipa o połowę ilości pikseli, o jakie nastąpiłoby to przesunięcie w wypadku, gdyby skala nadrzędnego klipa wyniosła 100%.