Kurs Flash 5
Wygląd programu
Warstwy Warstwy to jeden z najważniejszych elementów naszej animacji. W nich to właśnie umieszczamy elementy które potem będziemy wyświetlać i animować. Na obrazku obok widzicie dwie warstwy jedna pod nazwa Layer 1 a druga Layer 2 . Nazwy warstw możemy zmieniać klikając na jej nazwę tak jak to się robi w przypadku zmiany nazwy pliku czy folderu w Windows. Nad warstwami widać symbole. Oko oznacz czy dana warstwa ma być widoczna jeżeli klikniemy na kropkę pod nim zamieni się ona w znak X oznaczający zablokowanie wyświetlania. Kłódka to blokada modyfikacji warstwy przydaje się podczas pracy na wielu warstwach gdy poszczególne elementy zachodzą na siebie a my chcemy wybrać jeden z nich. Kosz na śmieci kasuje zaznaczoną warstwę. Dwa symbole w lewym dolnym rogu dodają warstw z tym, że biały dodaje warstwę zwykłą, a fioletowy tzw. Guide Layer (warstwa przewodnik) o której więcej opowiem później. Pole klatek animacji Pole klatek animacji składa się z mi. z miarki liczby klatek która pokazuje w której klatce aktualnie się z znajdujemy. Pola z klatkami ( pole z prostokącikami) które odpowiednio od zawartości i akcji się zmienia. Klatka z czarną kropką oznacza, że zawiera ona jakiś obiekt. Pusta szara klatka oznacz, że nic w niej nie ma i nie przebiega żadna akcja. Klatka niebieska zawierająca strzałkę oznacza, że trwa akcja ruchu (Motion). Klatka zielona ze strzałką, że trwa akcja zmiany kształtu. Dodatkowo podaną mamy liczbę wyświetlanych klatek na sekundę ( na przykładzie 12 fps) oraz czas trwania animacji w miejsc w który się aktualnie znajdujemy. Okna ustawień narzędzi, tekstu i animacji Okna ustawień uruchamiamy i klikając na ikonki w dolnym prawym rogu ekranu. - Pierwsza ikonka otwiera okno pod nazwę Info . Tu w pierwszej zakładce mamy informację na temat zaznaczonego obiektu . Kolejna zakładka Transform pozwala modyfikować obiekt. Następna Stroke ustala rodzaj, grubość i kolor rysowanych linii oraz ostatnia Fill definiuje wypełnienie tworzonych obiektów. - Ikonka nr. 2 otwiera okno pod nazwą Mixer. Pierwsza jego zakładka pozwala na utworzenie koloru wypełnienia lub linii, druga zaś to paleta gotowych kolorów. - Ikonka nr. 3 oznaczona litrą A dotyczy opcji tekstu. Zakładka Character określa rodzaj czcionki, jej wielkość, kolor i styl. Zakładka Paragraph położenie tekstu, a Text Options jego rodzaj. - Ikonka nr. 4 otwiera okienko Instance . Możemy tu np. w pierwszej zakładce zmienić oznaczenie obiektu na Graphic (statyczny obiekt graficzny), Movie Clip (obiekt animowany) i Button (przycisk). Zakładka Effect pozwala okreścić efekt kolorów obiektu może on np. zmieniać podczas trwania animacji kolor z niebieskiego na czerwony lub po prostu zniknąć (Alpha 0%). Zakładka Frame dotyczy klatki animacji i pozwala na dodanie jej nazwy Label i określić typ animacji (Tweening) czy ma być to ruch (Motion) czy zmiana kształtu (Shape). Ostatnia zakładka Sound służy do dodawania i modyfikacji dźwięków zawartych w naszej animacji. - Ikonka nr. 5 otwiera tzw. Movie Explorer który wyświetla w postaci drzewa elementu które znajdują się w naszej animacji. - Ikonka nr. 6 otwiera okno Actions . Tutaj będziemy tworzyć tzw. Action Skrypty ,które bardzo zwiększają możliwości naszych animacji - Ikonka ostatnia nr. 7 otwiera tzw. bibliotekę (Library). Jest to biblioteka obiektów i elementów na naszej stronie. Utworzony button będziemy właśnie z niej pobierać i przeciągać na pole pracy. Pole pracy To tutaj właśnie wszystko się dzieje. Tu rysujemy nasze obiekty, tu zmieniamy ich kształt i ustawiamy odpowiednio względem siebie. Tworzenie obiektów jest bardzo proste jak rysowanie w Windows'owym Paint Brush'u. Obiekty tworzymy za pomocą narzędzi które mamy do dyspozycji z lewej strony naszego programu. Pole pracy możemy dostosować oczywiście do swoich potrzeb. Możemy zmienić kolor jego tła i rozmiar oraz określic liczbę klatek wyświetlanych na sekundę. Zmian tych dokonujemy w menu Modify,Movie... lub wciskamu CTRL+M. Sceny Sceny to coś nadrzędnego do warstw, pozwalają one na tworzenie animacji które mają złożoną budowę. Pozwalają na m.in. zbudowanie całej strony internetowej we flashu. Dzięki odwoływaniu się do poszczególnych scen tworzymy coś na wzór linków na zwykłych stronach www. Możemy sprawić np., że po kliknięciu na przycisk uruchomi się określona przez nas scena. Najczęściej jednak pracuje się na jednej (sama animacja) lub dwóch scenach (np. preloader i animacja). Aby dodać scenę do animacji wybieramy opcję Scene w menu Insert, a aby usunąć Remove Scene. Kolejność występowania i nazwy scen możemy zmienić w inspektorze scen (menu Modify,Scene...). Powszechne biblioteki Wybierając opcję Common Libraries z menu Window możemy wstawić na swoją stronę gotowe już elementy należą do nim m.in. przyciski, movie clipy, dźwięki i grafiki.
<<< Poprzedna strona Następna strona >>>
Pierwsza animacja
Zabieramy się do pracy. na początek pokażę wam jak stworzyć najprostrza animację. Będziemy animować kwadrat. Animacja będzie polegała na tym, że kwadrat z jednego brzegu ekranu przesuniemy na drugi podczas ruchu będzie on zmieniał kolor z błękitnego na biały. Ustalamy rozmiary pola pracy np. na Width (długość) 450 px (px-piksele) i Height (wysokość) 120 px. Kolor tła ustalamy np. na czarny.
Teraz wstawiamy klatkę kluczową w klatce nr. 1 by to zrobić wciskamy F6. Zbędne klatki możemy usuwać klikając nań prawym klawiszem myszy i wybierając opcję Cut Frames. W stworzonej klatce kluczowej nr.1 rysujemy kwadrat narzędziem Rectangle Tool (symbol kwadratu). Ustalamy kolor obramowania na żółty i wypełnienie na błękitny. Możemy także otwierając zakładkę Stroke okienka Info ustalić grubość i rodzaj obramowania. Ja zastosuję grubość 3 pikseli.
Kwadrat rysujemy z lewej strony pola pracy zostawiając od górnej jego krawędzi około 1 cm. . Teraz klikamy na klatkę nr. 1 prawym klawiszem myszy wybierając z rozwiniętego menu opcję Create Motion Tween. Następnie wstawiamy klatkę kluczową (F6) w klatce nr. 20. W polu warstw powinna się od razu pokazać strzałka na niebieski tle.
Teraz łapiemy będąc w tej klatce nasz kwadrat i przenosimy go na prawą stronę. Naciśnijcie Enter. Już widać jak kwadrat wędruje po ekranie. klikamy na klatkę nr. 20 i okienka Instance zakładka Effect wybieramy opcję Tint i ustalamy kolor na biały. Przejdźcie teraz do klatki nr. 1 i zakładki Frame tego samego okienka i ustalcie opcję Rotate (obrót) na CW (zgodnie ze wskazówkami zegara) i wartość times na 1. Możecie zobaczyć co osiągnęliśmy wciskając Enter. Kwadrat bieleje przesuwa się i obraca, ale to nie koniec.
Sprawimy że jeszcze będzie się zmniejszał. Przejdźcie do klatki 20 i kliknijcie prawym klawiszem na nasz już biały kwadrat. Z rozwiniętego menu wybierzcie opcję Scale. Teraz możecie łapiąc za róg kwadracika zmienić jego rozmiar. Zmniejszamy go . To by było na tyle teraz należy zapisać plik projektu (menu File, Save As...) i opublikować animację (menu File, Publish).
Po wykonaniu tych czynności mamy wszystko gotowe. Efekt, gdzy animacja nie wyświetla tła na stronie WWW - jego przezroczystości - możemy osiągnąć wybierając opcję z menu File, Publish Settings... i w zakładce HTML ustalić opcję Window Mode na Transparent Windowless, a następnie opublikować animację.
+++++++++++
Animacja tekstu
W tym rozdziale stworzymy animowany napis. Ja na potrzeby kursu animuję napis KURS FLASH'A. Tworzymy nową animację i określamy rozmiary formatki, kolor jej tła. Następnie przy pomocy narzędzia tekstowego (symbol T) tworzymy dowolna czcionką napis. Napis po utworzeniu jest obiektem tekst (mówi o tym obramowanie całego napisu), tekst utworzony czcionką której nasz odwiedzający nie posiada wyświetli się nie prawidłowo dlatego musimy napis przekształcić w obiekt graficzny. Klikamy CTRL+B. Możemy do utworzonego napisu dodać obramowanie dowolnej grubości służy do tego narzędzie Ink Bottle Tool. Na zaznaczony tekst klikamy raz dla każdej litery. Grubość i kolor możemy określić w zakładce Stroke okienka Info. Tekst mamy przygotowany. Teraz należy rozdzielić każdą literę od siebie by położona była ona w oddzielnej warstwie. Tworzymy nową warstwę. Klikamy dwa razy na wnętrze litery nr.2 powinna zaznaczyć się cała środek i obramowanie. Teraz z menu Edit wybieramy opcję Cut i przechodzimy do nowej warstwy warstwy. Wklejamy do niej wyciętą literę poleceniem z menu Edit, Paste i Place. Litera wklei się dokładnie w miejsce z którego żeśmy ją wycieli tylko będzie już w innej warstwie. Powtarzamy czynność dla każdej litery tak by każda litera miała swoją warstwę. Warstwy możemy odpowiednio nazwać tak jaką literę zawiera. Gdy już to wykonamy animujemy litery. Zaznaczamy cały tekst narzędziem strzałki tak jak zaznacza się ikony czy foldery w Windows'ie i klikamy prawym klawiszem myszy na zaznaczoną już klatkę dowolnej litery tak by nie odznaczyć pozostałych. Z rozwiniętego menu wybieramy opcję pierwszą Create Motion Tween. W efekcie każda klatka nr.1 w każdej warstwie powinna zrobić się niebieska. Wchodzimy teraz do klatki nr. 20 najwyższej warstwy i ciągnąc kursor w dół poprzez wszystkie warstwy zaznaczamy klatki nr.20, potem wciskamy F6 dodając klatkę kluczową która zakończy animację. Wszystkie warstwy powinny teraz zawierać strzałkę oznaczającą trwającą animację. Wracamy do klatki nr.1 i tu zaznaczmy ponownie cały tekst. Klikamy prawym klawiszem i wybieramy opcję Scale i skalujemy nasz tekst tak by był 3 czy nawet 4 razy większy. Ustawiamy teraz oddzielnie każdą literę tak by była nad polem roboczym, a nie poza nim. Litery mogą zachodzić na siebie gdyż są w oddzielnych warstwach. Mamy mały bałagan ale nic nie szkodzi. Teraz sprawimy by litery były nie widoczne i wraz z czasem trwania animacji pojawiły się na ekranie. Zaznaczamy ponownie razem wszystkie litery będąc w klatce nr. 1. W okienku Instance zakładka Effect, opcja Alpha ustawiamy na 0%. Litery znikną. Naciśnijcie teraz Enter by zobaczyć jak to działa. Litery zmniejszają się jednocześnie pojawiając się w naszej animacji. Teraz sprawimy, że litery będzą pojawiać się po kolei w odstępach czasu i pozostawać w polu animacji. Wchodzimy do warstwy litery nr. 2 klatka nr.1. Klikamy na nią prawym klawiszem i wybieramy opcję Insert Blank Keyframe. Powinna wstawić się pusta klatka przed klatką kluczową. Wybieramy ją i dodajemy jeszcze takich pustych klatek cztery klawiszem F5. Sprawi to, że litera nr. 2 pojawi się z opóźnieniem 5 klatek do litery nr.1. Czynność powtarzamy dla każdej litery tylko tak by od litery poprzedniej opóźnienie było większe o 5 klatek. By litery nie znikały po pojawieniu się dodajemy klatkę kluczową w każdej warstwie, prócz najwyższej w numerze klatki która kończy animację ostatniej litery. Warstwy na koniec powinny wyglądać tak: a cała animacja tak:
Animacja po torze
Pamiętacie naszą pierwszą animację, ruch kwadratu odbywał się po linii prostej od lewej krawędzi ekranu do prawej. Możemy jednak sprawić by obiekt poruszał się po dowolnym torze, służy do tego warstwa Guide Layer dodajemy ją klikając na symbol fioletowego dokumentu z symbolem fali w polu warstw. W tej warstwie rysujemy tor animacji można go narysować narzędziem ołówka lub obramowaniem koła. W warstwie poniżej warstwy toru animujemy jakiś obiekt. Obiekt ten powinniśmy ułożyć tak by podczas trwania animacji cały czas stykał się z narysowanym torem. Warstwa która ma zawierać animację po torze powinna mieć właściwość Giuded, ustala się ją klikając prawym klawiszem na warstwę i wybierając opcję Properties... Symbol warstwy zmienia się tworząc charakterystyczne wcięcie, oznacza to że warstwy są powiązane. Warstwa Guide nie jest wyświetlana w animacji. Warstwy wyglądają tak: Warstwa pierwsza, najwyższa to tor, druga to animacja po torze, a trzecia to warstwa zwykła nie związana z torem animacji. Przykładowa animacja może wyglądać tak:
Powrót
Maska
Teraz pokażę wam jak wygląda i jak zastosować efekt maski. Załóżmy, że chcemy coś odsłaniać powoli do tego celu służy nam właśnie maska. Zrobimy animację w której obrazek odsłaniany kółkiem. Tworzymy trzy warstwy w jednej tworzymy animowane kółko (animujemy je od lewej do prawej strony ekranu), w drugiej obrazek który owe kółko będzie odsłaniać, a w trzeciej możemy narysować tło. Ja zrobiłem animację, która pokazuje krajobraz w dzień odsłaniany maską kółka, tłem jest ten sam krajobraz tylko w nocy. Wchodzimy do właściwości warstwy z kółkiem która powinna znajdować się najwyżej w stosunku do pozostałych dwóch. Ustawiamy jej typ (Type) na Mask. Wybieramy warstwę z odsłanianym obrazkiem która jest druga i ustalamy jej typ na Masked. Tło to warstw najniższa z właściwością warstwy Normal. Warstwy powinny prezentować się tak:Animacja w efekcie powinna wyglądać np. tak:
+++++++++++++++++++
Shape hint's
Shape to animacja polegająca na płynnym przejściu jednego obiektu w drugi. By ją stworzyć tworzymy w klatce. nr 1 obiekt ja stworzyłem kwadrat. Następnie wstawiamy klatkę kluczową (F6) w klatce nr. 20 i usuwamy z niej kwadrat poleceniem Cut z menu Edit. Następnie rysujemy tu koło.
Teraz wracamy do klatki nr. 1 zaznaczamy ją lewym klawiszem myszy i z okienka Instance zakładka Frame opcja Tweening wybieramy Shape ( kształt ). Na górze w warstwie powinna pokazać się strzałka na zielonym tle. Animacja już działa następuje zmiana kształtu, ale dodamy punkty zmiany kształtu (Shape Hint's) które określą ja ta zmiana ma przebiegać.
Wchodzimy do menu Modify, Transform i opcja Add Shape Hints (CTRL+SHIFT+H). Na ekranie pojawi się czerwone kółeczko z literą A jest to nasz pierwszy punkt zmiany kształtu. Punktów możemy dodawać tyle ile jest liter w alfabecie czyli od A-Z. Dodajmy jeszcze 3 by mieć punktu A,B,C i D. Umieszczamy je po kolei w połowie boków kwadratu. Następnie przechodzimy do klatki nr. 20 .
Zauważcie, że punkty już tam są należy je teraz rozmieścić po przeciwległych stronach na okręgu niż były one w kwadracie . Punkt A tam gdzie był B, B gdzie A, C gdzie D, a D gdzie C. Nasze Hint'y powinny zmienić kolor na zielony. Odtwórzcie animację (Enter lub Ctrl+Enter). Zmiana kształty następuje znacznie inaczej niż bez zastosowania Shape Hint'sów.
Możemy jeszcze wrócić naszą animację by z kwadratu powstawało koło, a z koła z powrotem identyczny kwadrat. Zaznaczamy klatkę nr. 1 zawierającą kwadrat klikamy na nią prawym klawiszem myszy i wybieramy opcję Copy Frames. Wchodzimy do klatki nr. 40 i tu klikając prawym klawiszem wklejamy wcześniej skopiowana klatkę zawierającą nasz kwadrat wybierając z rozwiniętego menu opcję Paste Frames.
Teraz tylko w klatce z kółkiem ustalamy Tweening na Shape, dodajemy Shape Hint'y tak by wróciły one na swoje miejsce jakie było w klatce nr. 1 i wszystko gra. UWAGA !!! Sztuczkę kopiowania klatek możecie stosować także w zwykłych animacjach typu Motion, gdzie waszym założeniem jest by jakiś obiekt powrócił na swoje pierwotne miejsce. Po opublikowaniu nasza animacja powinna prezentować się mniej więcej tak:
+++++++++++++++++++++++++++++++++++
...
A-n-i-t-a