Podstawy animacji. Twórz i edytuj dyski flash

W pierwszej lekcji podstawowego mini-kursu „Podstawy animacji w Actionscript 3.0” dowiesz się o:

1. Co to jest animacja
2. Jak uzyskać iluzję ruchu za pomocą ramek
3. O możliwościach animacji poklatkowej
4. Funkcje i zalety animacji programowej

Adobe Flash jest właściwie rodzajem maszyny animacyjnej. Już w swoich pierwszych wersjach stworzył go w oparciu o koncepcję Tween. Wygląda następująco:

• na osi czasu tworzone są dwie klatki kluczowe o różnej zawartości (zmieniają się pozycje obiektów, ich kształt, kolor itp.);
• flash tworzy niezależnie wszystkie ramki pośrednie (przejściowe) (rys. 1).

Tak to wygląda w Adobe Flash CS6.

Ale ta lekcja i ogólnie kurs dotyczą nie tylko Tween, ale także potężnego języka wbudowanego we Flash o nazwie ActionScript. Studiując go, nauczysz się wielu przydatnych i praktycznych, zwłaszcza w sekcjach takich jak imitacja zjawisk fizycznych ze świata rzeczywistego i obliczenia matematyczne... Oczywiście ten rodzaj wiedzy da ci pełną kontrolę podczas tworzenia interaktywnych aplikacji, których nigdy nie osiągnąłbyś za pomocą samego Tween.

Zanim jednak przejdziemy do konkretnych sztuczek, technik i formuł, które pomogą Ci animować obiekty w języku ActionScript, przyjrzyjmy się bliżej idei animacji, niektórym jej podstawowym technikom i sposobom ich wykorzystania oraz sposobom uczynienia jej bardziej interesującą. i co najważniejsze dynamiczny.

Co to jest animacja?

Czym właściwie jest animacja? Definicję tego pojęcia można znaleźć w wielu słownikach. Na przykład, oto jeden podany przez Wikipedię:

Przetłumaczone na język potoczny animacja oznacza ruch... Jeśli nieco rozszerzymy tę definicję, możemy tak powiedzieć animacja to zmiana w czasie... Jest to szczególnie prawdziwe w przypadku zmian wizualnych (widocznych). Ruch to zmiana pozycji w czasie.... W pewnym momencie obiekt znajdował się w jednym miejscu, a minutę później w innym. Teoretycznie w miarę upływu czasu znajdował się również w punktach pośrednich między punktem początkowym i końcowym.

Jednak obiekt nie musi zmieniać swojej pozycji, aby można go było uznać za animowany. Może po prostu zmienić swoją zewnętrzną formę. W latach 90. (przerażające, ostatni wiek!) programy komputerowekto zrobił morph.

Na przykład masz dwa zdjęcia: dziewczynę i tygrysa. Program tworzy płynne przejście / animację między nimi (morfing).

Do stworzenia tego wideo flash wykorzystano oprogramowanie Sqirlz Morph 2.1

Podczas przekształcania obiekt może również zmienić swój rozmiar lub położenie. Na przykład w ten sposób możesz stworzyć iluzję rosnącego drzewa, wirującej kuli lub zmianę koloru przedmiotu.

Animacja czasu to ważna koncepcja.

Bez widocznego ruchu lub zmiany nie ma animacji, a zatem nie ma poczucia czasu dla widza!

Prawdopodobnie wielokrotnie widziałeś strzelanie aparatem, w którym brakuje żadnego ruchu, na przykład pustego pokoju lub pejzażu miejskiego.

W takiej sytuacji trudno powiedzieć, co jest przed Tobą: zwykłe zdjęcie czy wideoklip. Kiedy to oglądasz, nagle zauważasz drobne zmiany w kadrze: lekki ruch, zmianę przepływu światła lub ruch cienia. Nawet tak małe zmiany jasno wskazują, że czas ucieka i jeśli nadal będziesz obserwować, być może coś innego się zmieni. Jeśli w następnym okresie nie będzie żadnych zmian, znowu poczujesz, że patrzysz na zdjęcie. Dlatego brak czasu w kadrze oznacza, że \u200b\u200bobraz pozostanie niezmieniony.

Wszystko to prowadzi nas do bardzo ważnego wniosku: animacja, ruch wzbudza nasze zainteresowanie wizualne.

Wszyscy pamiętają obraz Leonarda da Vinci „Mona Lisa” - arcydzieło malarstwa, jedno z najsłynniejszych obrazów w historii światowej sztuki.

Można z dużym prawdopodobieństwem założyć, że zwykły człowiek po kilku minutach oględzin znudzi się i już niedługo zacznie szukać kolejnego obiektu do „zbadania”. Ale zacznij pokazywać mu najnowszy hollywoodzki przebój, a on nie zauważy, kiedy minie kilka godzin. To jest siła animacji!

Jak stworzyć iluzję ruchu w animacji poklatkowej

Wróćmy na chwilę do definicji animacji, którą widzieliśmy powyżej:

Animacja jest technika tworzenie iluzji ruchomych obrazów (ruch i / lub zmiana kształtu obiektów - morfing) za pomocą sekwencji nieruchomych obrazów (klatek) zastępujących się z określoną częstotliwością.

Autorzy takich definicji są zmuszeni wprowadzić do nich słowo iluzja. Często zdarza się, że w sztuce lub mediach, z którymi spotykamy się w życiu, istnieje tylko złudzenie ruchu. Nadszedł więc czas na wprowadzenie pojęcia personelu.

W teorii wszystkie rodzaje animacji wizualnych wykorzystują klatki - sekwencja obrazów lub fotografii szybko pokazywana widzowi w celu symulacji ruchu lub zmiany.

To, co widzisz na ekranie komputera, telewizji lub w kinie, jest oparte na materiałach filmowych. Wszystko zaczęło się od pierwszych kreskówek, w których poszczególne obrazy zostały narysowane na foliach, oraz pierwszych filmów, w których tę samą technikę użyto do pokazania serii zdjęć.

Koncepcja jest prosta: pokazano ci sekwencję obrazów, jeden po drugim, które nieco się od siebie różnią, a twój mózg łączy je w jeden ruchomy obraz.

Dlaczego więc mielibyśmy nazywać to iluzją ruchu?

Jeśli na ekranie monitora widzisz dziewczynę idącą ulicą, czy to nie jest ruch? Oczywiście to tylko obraz dziewczyny, a nie rzeczywisty przedmiot, ale to nie jest główny powód, dla którego uważamy taki ruch za iluzję.

Pamiętasz, mówiłem o przedmiocie, który w pewnym momencie jest w jednym miejscu, a minutę później w innym? Jednocześnie powiedziałem, że porusza się w prawdziwej przestrzeni. Tylko ten rodzaj ruchu możemy nazwać rzeczywistym. Obiekty poruszają się w przestrzeni płynnie, a nie skokowo, jak to ma miejsce we wszystkich rodzajach animacji poklatkowej... W nich przedmiot nie przemieszcza się z jednego miejsca w drugie; znika, a następnie pojawia się ponownie w innym miejscu następnej klatki. Im szybciej się porusza, tym dłuższe takie skoki.

Gdybym pokazał ci zdjęcie dziewczyny, która jest w jednym miejscu, a kilka sekund później kolejne zdjęcie z tą samą dziewczyną, ale w innym miejscu, to powiedziałbyś, że to dwa zdjęcia, a nie animacja.

Gdybym pokazał ci niektóre z jej zdjęć w ruchu, powiedziałbyś, że to tylko seria zdjęć.

Gdybym wystarczająco szybko pokazał Ci kilka fotografii, nie zmieniłoby to faktu, że to nadal fotografie, ale zacząłbyś je inaczej postrzegać.

Twój mózg postrzegałby je jako poruszającą się dziewczynę. Właściwie taka prezentacja nie różni się od dwóch pierwszych fotografii, tj. nie ma w nich prawdziwego ruchu, ale w pewnym momencie mózg poddaje się i wpada w tę iluzję... Naturalnie efekt ten został bardzo dobrze zbadany w przemyśle filmowym.

Po badaniach stwierdzono, że przy prędkości wyświetlania 24 klatki na sekundę, widz postrzega je jako pojedynczy ruchomy obraz. Jeśli pokażesz to wolniej, obraz zacznie irytująco „podskakiwać”, a iluzja ruchu zostanie zniszczona. Jeśli przyspieszysz do 50 klatek na sekundę, to nie doda to realizmu obrazowi (chociaż w animacji programowej, gdy widz wchodzi w interakcję z obrazem, reakcja będzie szybsza, a ruch obiektów przy dużych prędkościach będzie płynniejszy).

Koncepcja ramy umożliwia trzy rzeczy:

• przechowywanie
• przenoszenie
• i pokazywanie

Oczywiście nie można przechowywać, przenosić, a następnie pokazywać prawdziwej dziewczyny idącej ulicą, ale można przechowywać jej obraz / zdjęcie lub ich serię, a następnie przenieść i pokazać. Dzięki temu masz możliwość odtworzenia animacji prawie zawsze i wszędzie, z dostępnym dostępem do zapisanych zdjęć i możliwością ich wyświetlania.

Nadszedł czas, aby podać bardziej ogólną definicję ramy. Do tej pory, mówiąc o nim, mieliśmy na myśli fotografię, obrazek lub rysunek. Teraz policzmy w następujący sposób: ramka jest zapisem systemu w określonym momencie.

Ten system może być:

• zdjęcie krajobrazu zrobione z własnego okna;
• zbiór wirtualnych obiektów (zapis, w którym to przypadku byłyby ich kształty, rozmiary, kolory, lokalizacje itp. w danym momencie. W ten sposób film zmieniłby się z serii zdjęć w serię nagrań opisów obrazów. Zamiast po prostu pokaż obrazek, komputer bierze taki opis, tworzy z niego obrazek, po czym go pokazuje);
• ramki zawierające określone programy.

Programowanie personelu

Ponieważ komputer może czytać w locie, możesz obejść się bez długiej listy opisów ramek. Możesz uprościć wszystko, opisując tylko pierwszą klatkę i ustalając zasady tworzenia wszystkich kolejnych ramek.... Teraz komputer nie tylko tworzy obrazek z opisu, ale:

• najpierw tworzy opis,
• następnie generuje obraz na podstawie tego opisu
• i pokazuje to zdjęcie na końcu.

Wyobraź sobie, ile miejsca możesz zaoszczędzić, stosując to podejście! Zdjęcia zawsze zajmują przyzwoitą ilość miejsca na dysku i pasmo sieci. A 24 zdjęcia na sekundę mogą stać się po prostu „przytłaczające”. Jeśli potrafisz wszystko sprowadzić do jednego opisu i definicji reguł, masz możliwość setki razy zmniejszyć rozmiar pliku.

W 90 przypadkach na 100 nawet najbardziej obszerny program zawierający zasady dotyczące poruszania się i interakcji obiektów zajmuje mniej miejsca niż pojedynczy obraz średniej wielkości. Dlatego jednym z pierwszych efektów zauważonych podczas studiowania animacji oprogramowania jest jej ekonomiczne pod względem rozmiaru pliku.

Z pewnością istnieje kompromis. Jeśli Twój system zacznie się rozrastać, a reguły stają się coraz bardziej skomplikowane, komputer musi poświęcać coraz więcej zasobów na przetworzenie każdej kolejnej sceny, a potem także znaczny czas na wyświetlenie ich na ekranie.

Jeśli próbujesz utrzymać określoną liczbę klatek na sekundę, czasami procesor (milisekundy) nie ma czasu na „przetrawienie” tego wszystkiego. Dlatego jeśli komputer nie może wyrenderować sceny na czas, pogorszy się jakość odtwarzania (liczba klatek na sekundę). Z drugiej strony, konwencjonalna animacja oparta na obrazie nie dba o to, co jest w scenie i jak złożony jest obraz. Po prostu pokazuje następne zdjęcie na czas i to wszystko.

Korzyści z animacji oprogramowania

Kolejna przewaga animacji programowej nad animacją poklatkową, którą teraz omówimy, wykracza daleko poza zwykły rozmiar pliku. Jest to już ustalony fakt animacja programowa w większości przypadków jest używana dokładnie jako dynamiczna.

Prawdopodobnie oglądałeś Terminator 2: Judgement Day. Pod koniec filmu Terminator za każdym razem znika w tyglu z napisem „Wrócę”. Robi to w kinach, telewizji i na DVD. Nawet naciskając przycisk Stop lub Pauza, nie możesz go zatrzymać. A to dlatego, że zwykły film to nic innego jak sekwencja zdjęć... Pod koniec tego filmu (zdjęcia) pokazują, jak Terminator znika w piekle i to wszystko, co mogą zrobić.

Teraz przejdźmy od Terminatora do zwykłej strony flashowej. Pod koniec lat 90., kiedy Flash szybko zyskiwał na popularności, tylko leniwi nie chcieli wykorzystywać jego możliwości na swojej stronie internetowej:

• poruszające się, pojawiające się i znikające formy;
• muzyka towarzysząca;
• nagle pojawiające się wołanie o coś;
• wyłaniająca się plama światła lub cienia.

Wtedy takie rzeczy były nowe, więc chciałem wykrzyknąć: „Super!” Szczerze mówiąc, muszę powiedzieć, że nie wszystkie z tych witryn były naprawdę fajne. Pamiętając dziś to, co wtedy zobaczyłem, możemy powiedzieć, że tylko dwa lub trzy z nich naprawdę wyryły się w pamięci.

Animacja na nich trwała nie dłużej niż minutę. To wystarczyło, żebym przejrzał je trzy razy z rzędu. Czy były złe? Nie, po prostu po kilku pokazach uwaga słabnie, bo nie było już nic do oglądania, jak w filmie o Terminatorze. I tu możemy mówić o pewnym paradoksie - w tego typu filmach animacja się nie zmienia, każda klatka od pierwszej do ostatniej jest z góry określona.

Wróćmy do animacji oprogramowania. To nie musi być dynamiczne. Możesz stworzyć obiekt i za pomocą kodu zlokalizować go na scenie, a następnie przesuwać po nim. W takiej sytuacji za każdym razem, gdy uruchomisz taki klip, uruchomi się ten sam kod, powodując ten sam ruch. I oczywiście nie ma tu żadnej dynamiki.

Ale co, jeśli weźmiesz ten sam obiekt i użyjesz kodu do losowego określenia położenia tego obiektu, jego kierunku ruchu i prędkości? W takiej sytuacji po każdym uruchomieniu wideo zobaczymy coś innego niż poprzednie.

Ale jest też trzecia opcja. Po uruchomieniu filmu zostanie ustalona pora dnia, miesiąc i rok, a na podstawie tych danych zostanie zbudowana scena, np. Zimowy poranek, letnie popołudnie czy wrześniowy wieczór?

A oto czwarta. Czy w trakcie filmu widz, posługując się myszką lub klawiaturą, do woli, może zmienić pewne czynniki? Umożliwiłoby mu to interakcję z obiektami w scenie. Taki film byłby daleki od tego, do czego jesteśmy przyzwyczajeni, prawda? Można nawet uratować Terminatora!

Wirtualna rzeczywistość

To możliwe, że najciekawszym aspektem animacji dynamicznej jest zastosowanie praw matematyki i fizyki świata rzeczywistego do tworzonych w nim obiektów... Możesz nie tylko wprawić taki obiekt w ruch w przypadkowym kierunku, ale także zasymulować działanie grawitacji na niego. W rezultacie zacznie spadać. Kiedy upadek się skończy, uderzy o ziemię i odbije się, ale na wysokość nie równą tej, z której zaczął spadać. W końcu przestanie skakać i pozostanie na „ziemi”.

Następnie możesz pozwolić użytkownikowi na interakcję z nim:

• „Weź” to za pomocą myszy
• lub poruszaj się za pomocą klawiatury.

Gdy użytkownik zacznie z nim w ten sposób wchodzić w interakcję, będzie miał pełne poczucie, że jest to prawdziwy fizyczny obiekt.

Możesz się o tym przekonać grając czerwoną piłką poniżej.

Tworząc takie animacje, sprawiasz, że użytkownik czuje, że nie tylko patrzy na to, jak poruszają się klatki, ale także na to jest w określonej przestrzeni stworzonej przez ciebie... Jak długo tam będzie? Tak, pod warunkiem, że jest zainteresowany. Im więcej dasz mu okazji do interakcji, tym dłużej będzie tam przebywał, a potem też wielokrotnie wracał.

Wynik

W tym samouczku wprowadzającym omówiliśmy:

• podstawy animacji;
• różnice między animacją klatka po klatce a animacją programową;
• główne zalety dynamicznej animacji.

To koncepcyjna, podstawowa wiedza, na podstawie której powstanie cały kolejny materiał. darmowy mini kurs „Podstawy animacji w Actionscript 3.0».

W następnych samouczkach omówię niektóre narzędzia, których możesz użyć w swojej pracy. Najbardziej oczywistym zastosowaniem wszystkich informacji, które zostaną omówione w tym kursie, jest tworzenie gier. Oczywiste jest, że wymagają największej interakcji z użytkownikiem, gdzie jest on zobowiązany do rozwiązania określonych problemów i osiągnięcia wyznaczonych celów.

Ale informacje zawarte w tym kursie można z powodzeniem wykorzystać w swojej pracy zawodowej jako projektant stron internetowych. Na przykład, aby stworzyć ciekawe menu na stronie, banery reklamowe lub aplikacje (programy) dla systemu edukacji.

Jaki rodzaj animacji najbardziej Cię interesuje? Napisz o tym zostawiając komentarz poniżej. Ponadto, jeśli masz jakieś pytania podczas studiowania tej lekcji, zapytaj, nie wahaj się, chętnie na nie odpowiem.

Do zobaczenia na następnej lekcji!

Włącz obsługę JavaScript, aby zobaczyć komentarze.

ANIMACJA W BŁYSKU (część 1)

W poprzednim rozdziale rozważaliśmy Flash tylko jako edytor grafiki wektorowej. Jednak głównym celem Flasha jest tworzenie animowanych grafik, czyli kreskówek. Animacja we Flashu może zawierać ścieżki dźwiękowe i elementy interaktywne. Nie chodzi więc tylko o grafikę, ale o tworzenie produktów multimedialnych. Flash umożliwia tworzenie interesujących aplikacji, takich jak strony internetowe.
Wyniki Flash (pliki, animacje, strony internetowe) są zwykle nazywane filmy animowane, klipy, klipy wideo, wideo i animacje (ogólny termin to film). Zwykle klipy nazywane są kreskówkami, które są częścią innych kreskówek. Proces tworzenia kreskówki wygląda następująco. Najpierw tworzony jest oryginalny lub tzw. Plik autorski z rozszerzeniem fla. Ten plik można edytować i przeglądać w środowisku Flash. Następnie jest konwertowany na plik SWF, który można już przeglądać w odtwarzaczu Flash i przeglądarce internetowej. Ponadto możesz eksportować wyniki swojej pracy do plików w innych popularnych formatach: MOV, animowany GIF, JPEG i wiele innych.

Uwaga! Opisując narzędzia Flash, o ile nie zaznaczono inaczej, chodzi o wersję 5.0. Funkcje Flash MX zostaną omówione osobno.

W poprzednim rozdziale zauważyliśmy już główne różnice między Flash 5.0 a Flash MX. Przypomnijmy tylko jeden z nich, który jest najważniejszy. We Flash 5.0 właściwości obiektów są rozproszone na wielu paletach lub na wielu kartach jednej palety. Możesz otworzyć lub zamknąć te palety za pomocą menu Okno\u003e Panele. Flash MX zmniejszył liczbę palet. W menu Okno nie ma podmenu Panele, z którego można by wybrać panel (paletę), aby go otworzyć lub zamknąć. Palety we Flash MX są otwierane i zamykane bezpośrednio z menu Okno. Zwróć uwagę, że wszystkie właściwości bieżącego (tj. Wybranego) elementu na stole montażowym we Flash MX są wyświetlane na pojedynczej palecie Właściwości, która domyślnie znajduje się u dołu. Zawartość tej palety zależy od bieżącego obiektu (czyli aktualnie wybranego). Innymi słowy, zawartość palety Właściwości zależy od kontekstu.

Animacja próbna

Aby po raz pierwszy przyjrzeć się możliwościom animacji Flasha, stwórzmy prostą kreskówkę: okrąg, który porusza się od lewej do prawej na ekranie. Najpierw pokażemy, jak to zrobić we Flashu 5.0, a następnie we Flash MX. Przed
we wszystkim potrzebujemy narzędzi („Oval”) i („Selection”). Wykonaj następujące kroki we Flashu 5.0:

Teraz możesz otworzyć wygenerowany plik HTML w swojej przeglądarce. Możesz to jednak zrobić z poziomu Flasha, wybierając Plik\u003e Opublikuj podgląd\u003e HTML lub naciskając ... W ten sposób Flash użyje domyślnej przeglądarki. To wszystko! Następnie przyjrzymy się bardziej szczegółowo zagadnieniom tworzenia animacji.
Wszystko opisane powyżej jest dokładnie zgodne z Flash 5.O. Jeśli używasz Flash MX, pamiętaj o tym klawisz skrótu nie tworzy klatki kluczowej, a wszystkie parametry bieżącego (wybranego obiektu) są skupione w jednej palecie o nazwie Właściwości. Ogólnie rzecz biorąc, Flash MX jest wygodniejszy niż Flash 5.0, ale szkoda, że \u200b\u200bskrót klawiszowy zniknął.
Przyjrzyjmy się teraz tworzeniu animacji we Flash MX. Narysuj okrąg na obszarze roboczym. Wybierz go i pogrupuj jego kontur i wypełnij w jedną całość. Można to zrobić za pomocą polecenia Modyfikuj\u003e Grupa. Następnie kliknij prawym przyciskiem myszy końcową klatkę i wybierz Wstaw klatkę kluczową z menu kontekstowego. Przeciągnij okrąg w nowe miejsce. Kliknij lewym przyciskiem myszy na pierwszą klatkę. W takim przypadku okrąg będzie w swoim pierwotnym położeniu. Teraz przejdźmy do palety Właściwości, która obecnie zawiera parametry pierwszej klatki. Z listy rozwijanej Animacja wybierz wartość Ruch. W takim przypadku na osi czasu między pierwszą a ostatnią klatką kluczową pojawi się strzałka, co oznacza pomyślne utworzenie animacji. Aby odtworzyć kreskówkę, naciśnij .

Postać: 551. Tworzenie animacji we Flash MX

Jeśli na osi czasu zamiast strzałki pojawi się linia przerywana, oznacza to, że popełniłeś jakiś błąd. W takim przypadku na palecie Właściwości pojawi się przycisk z trójkątem i wykrzyknikiem. Kliknięcie go otworzy panel z komunikatem o błędzie. Brak animacji jest najczęściej spowodowany dwoma następującymi przyczynami: albo próbujesz animować niezgrupowane obiekty (w przypadku koła jest to ścieżka i wypełnienie), albo na tej warstwie znajduje się kilka zgrupowanych obiektów.
Oprócz metody omówionej powyżej możesz tworzyć animacje we Flash MX za pomocą polecenia Utwórz animację ruchu. W takim przypadku kliknij prawym przyciskiem myszy pierwszą klatkę i wybierz opcję Utwórz animację ruchu z menu kontekstowego. Spowoduje to przekonwertowanie obrazu koła na symbol graficzny. Kliknij prawym przyciskiem myszy ostatnią klatkę i wybierz Wstaw ramkę z menu kontekstowego. Przerywana linia pojawia się między pierwszą a ostatnią klatką. Teraz musisz przenieść okrąg w nowe miejsce. W rezultacie ostatnia klatka automatycznie stanie się kluczowa, a przerywana linia zostanie zastąpiona strzałką. Animacja jest zakończona.
Jak widać, metody tworzenia animacji we Flash 5.0 i Flash MX są bardzo podobne i proste. Wypróbuj je kilka razy i dobrze się trzymają.

Podstawowe pojęcia dotyczące animacji

Termin animacja odnosi się do sekwencji naprzemiennych obrazów (klatek), w wyniku których powstaje iluzja ruchu (płynna zmiana kształtu i / lub położenia obrazu). Macromedia Flash ma dwie metody animacji:

• Animacja klatka po klatce. Ta metoda polega na szybkim przeglądaniu wcześniej narysowanych ramek. W tym przypadku złudzenie ruchu powstaje w wyniku doboru odpowiedniej prędkości skrętu i stopnia podobieństwa sąsiednich ram. Ta metoda jest podobna do metody używanej do tworzenia animowanych plików GIF (patrz Rozdział 3).
• Animacja interpolacji... Metoda ta polega na utworzeniu kilku klatek kotwicznych (kluczowych), a następnie na ich podstawie „obliczeniu” klatek pośrednich (animacja z klatkami pośrednimi). Ta metoda jest podobny do rysowania gładkiej linii przez określone punkty. Na przykład, powiedzmy, że chcesz przenieść jakiś kształt z lewej strony ekranu na prawo o 25 klatek. W przypadku pierwszej metody animacji klatka po klatce będziemy musieli narysować wszystkie dwadzieścia pięć klatek, aw każdej kolejnej przesuwać kształt nieco w prawo. A jeśli chcesz zrobić figurę, przesuwając się w prawo, stopniowo znika lub zmienia kształt? Oczywiście ręczne wykonanie każdej klatki byłoby w tym przypadku zbyt nużące. W takich sytuacjach dostępna jest druga metoda animacji. W najprostszym przypadku wystarczy ustawić dwie klatki kluczowe: początek i koniec. Domyślnie Flash oblicza animacje liniowo, ale można również określić prawo wykładnicze.

Najpierw przyjrzyjmy się głównym elementom używanym podczas pracy z programem Flash: oś czasu, klatkom, symbolom i warstwom.

Oś czasu

Oś czasu jest podstawowym narzędziem do pracy z animacjami we Flashu. Wyświetla informacje o warstwach i klatkach kluczowych, a które pośrednie (generowane przez Flash). Korzystając z osi czasu, możesz zrozumieć, które klatki zawierają akcje lub etykiety. Pozwala na przesuwanie klatek kluczowych i poszczególnych części animacji. To narzędzie jest przemyślane i bardzo proste w obsłudze, szybko nauczysz się, jak z nim pracować.

Postać: 552. Oś czasu we Flashu 5.0

We Flash MX oś czasu została nieznacznie zmodyfikowana. Na przykład stało się możliwe tworzenie folderów zawierających warstwy. Omówiliśmy już ten sposób organizacji struktury kreskówki w poprzednim rozdziale. W prawym górnym rogu osi czasu znajduje się przycisk menu formatu klatki. Wybór formatu ramki zależy od wygląd oś czasu. W przeciwieństwie do Flash 5.0 ramki mogą teraz wyświetlać miniatury obrazów.

Postać: 553. Oś czasu we Flash MX

Wymieńmy główne elementy osi czasu.

• Marker - prostokąt podświetlony na czerwono wskazujący aktualną ramkę, której zawartość jest wyświetlana w obszarze roboczym. Komórki prostokątnej siatki (skala ramki) odpowiadają ramkom. Po kliknięciu dowolnej komórki znacznik automatycznie przesuwa się do niej, a zawartość odpowiedniej ramki jest wyświetlana w obszarze roboczym.
• Warstwy. Po lewej stronie linijki ramki znajduje się lista warstw. Poniżej znajdują się przyciski do dodawania i usuwania warstw. Jeśli chcesz, możesz uczynić każdą warstwę niewidoczną lub wyłączyć edycję.
• Skala ramek to pole, w którym można dodawać i usuwać ramki proste i kluczowe. Jeśli wywołasz menu kontekstowe, klikając prawym przyciskiem myszy dowolną ramkę, zobaczysz listę czynności, które można wykonać. Na skali ramki wyświetlane są następujące informacje:
  • klatki kluczowe są zaznaczone czarnymi kółkami;
  • klatki, z którymi powiązane są działania, są oznaczone literą „a” nad okręgiem;
  • zaznaczone ramki są oznaczone czerwoną flagą i nazwą etykiety.
• Kolor wskazuje również na rodzaj ramek. Klatki dokładnie pasujące do klatki kluczowej są wyszarzone. Podświetlenie w kolorze liliowym lub zielonym wskazuje, że ramki zostały wygenerowane przez Flash. Kolor biały oznacza puste ramki.
• Przyciski sterowania cieniem pozwalają wyświetlać sąsiednie klatki tak, jakby były przez kalkę kreślarską, aby zobaczyć różnice między sąsiednimi ramkami. Innymi słowy, pozwalają one stworzyć ślad dla ruchomego obrazu. Możesz ustawić liczbę wyświetlanych sąsiednich ramek.

Personel

Animacja składa się z sekwencji klatek. Ramkę można utworzyć ręcznie lub wygenerować za pomocą programu Flash. Dotyczy to ramek na tej samej warstwie. Ponieważ sceny Flash (czym one są, opisane w dalszej części tego rozdziału) zwykle składają się z kilku warstw, wynikowe „warstwowe” klatki mogą zawierać zarówno klatki wygenerowane, jak i „wykonane samodzielnie”.
W animacji komputerowej istnieje pojęcie klatek kluczowych (klatek kluczowych) - są to klatki, których Flash nie zmienia podczas tworzenia animacji, ale wykorzystuje je jako klatki odniesienia podczas generowania klatek pośrednich.
Istnieją dwa rodzaje animacji:

• Klatki oparte na animacji kształtu.
• Klatki animacji ruchu. Są one najczęściej używane podczas tworzenia animacji ruchu na scenie.

Należy również wspomnieć o pustych ramkach, które nic nie zawierają.

Na osi czasu sekwencja niezmiennych klatek jest szara, sekwencja animacji ruchu klatek jest liliowa, sekwencja klatek animacji kształtu jest zielona, \u200b\u200ba puste klatki są białe. Klatki kluczowe są oznaczone czarną kropką.
Podstawowe operacje na ramkach:

• wstaw pustą klatkę kluczową: Wstaw polecenie\u003e Pusta klatka kluczowa ( );
• wstaw klatkę kluczową powtarzając zawartość poprzedniej: polecenie Wstaw\u003e Klatka kluczowa ( , Tylko Flash 5.0);
• wyczyść klatkę kluczową: Wstaw\u003e C Ramka kluczowa ( +);
• wstaw zwykłą ramkę: polecenie Wstaw\u003e Ramka ( );
• usunąć ramkę: polecenie Wstaw\u003e Usuń ramki ( +).

Symbolika

Symbol jest jednym z kluczowych pojęć we Flashu. Rozmawialiśmy już o tym w poprzednim rozdziale. Symbol może być prostym kształtem, kombinacją kilku kształtów lub nawet całą animacją (filmem). Na przykład możesz utworzyć symbole dla „koła”, „nadwozia” i „reflektora”, a następnie połączyć je wszystkie w symbol „samochód”. Następnie możesz stworzyć scenę, w której ten „samochód” będzie „jeździł”. Możesz ustawić koło jako animowany symbol, aby sprawiać wrażenie, jakby się obracało. Drzwi samochodu mogą mieć symbol podobny do przycisku, aby otwierały się po kliknięciu. W takim przypadku w każdej chwili możesz zmienić zawartość i typ symbolu. Innymi słowy, symbol jest przedmiotem. Wydaje się, że termin „obiekt” jest bardziej znany, ale we Flashu jest to „symbol” (dlatego, aby uniknąć nieporozumień, będziemy nazywać symbolami znaków tekstowych).
Symbole można zagnieżdżać w sobie niezależnie od typu, co jest ich najważniejszą zaletą. Symbole można tworzyć od podstaw (polecenie Wstaw\u003e Nowy symbol lub klawisze +) i używając bieżącego zaznaczenia w obszarze roboczym, konwertując go na symbol (polecenie Wstaw\u003e Konwertuj na symbol lub klawisz ). Druga technika jest używana znacznie częściej niż pierwsza, ponieważ nie ma potrzeby pozycjonowania zaznaczenia i zmiany jego rozmiaru.
Do zarządzania symbolami służą tak zwane biblioteki, które omówimy poniżej. Wszystko, co narysujesz lub zaimportujesz na stół montażowy, można przekształcić (przekonwertować) na symbol. Ten symbol natychmiast przejdzie do biblioteki aktualnej (utworzonej lub edytowanej) kreskówki. Symbole z biblioteki można przenieść na scenę lub do innej kreskówki. W takim przypadku to, co przesłałeś, nie pojawia się jako symbol, ale jako instancja symbolu. Możesz edytować symbol, a wynik modyfikacji zostanie rozpropagowany do wszystkich jego instancji. Możesz edytować instancję symbolu bez wpływu na sam symbol. Możesz przekształcić zmodyfikowaną instancję symbolu w niezależny symbol. Okno biblioteki można otworzyć za pomocą polecenia Okno\u003e Biblioteka lub naciskając +... Zaleca się radzić sobie z tym samodzielnie.
Istnieją trzy rodzaje symboli: graficzny, przycisk i animacja (rysunek, klip) (Klip filmowy). Polecenie Wstaw\u003e Nowy symbol otwiera okno, w którym należy określić typ symbolu, który ma zostać utworzony. Rozważmy bardziej szczegółowo rodzaje symboli.

Postać: 555. Okno dialogowe określające nazwę i typ symbolu, który ma zostać utworzony

Graficzny

• O symbolach tego typu wspominaliśmy już w poprzednim rozdziale. Zachowanie grafiki opisano za pomocą osi czasu głównego filmu. Interaktywne elementy sterujące i dźwięk nie mogą być skojarzone z tym typem postaci. Prawie wszystko, co można zrobić za pomocą symbolu graficznego, można również zrobić za pomocą symbolu Klipu filmowego (patrz poniżej).
  Przypomnij sobie, że obrazy można tworzyć nie tylko ręcznie za pomocą narzędzi do rysowania, ale także importować z plików graficznych.

  Przycisk

  Przycisk - rodzaj symbolu specjalnie dostosowany do funkcji przycisku. Ten symbol może wyglądać na wszystko, niekoniecznie jako prostokątny lub okrągły przycisk. Ważne jest to, że ten symbol pełni funkcję przycisku. Podczas tworzenia symbolu przycisku na osi czasu pojawiają się cztery klatki, odpowiadające następującym sytuacjom:

• W górę - wskaźnik myszy nie znajduje się nad przyciskiem;
• Over - wskaźnik myszy znajduje się nad przyciskiem;
• W dół - wskaźnik myszy znajduje się nad przyciskiem i przycisk jest naciśnięty
  myszy;
• Hit - ramka określająca aktywny obszar przycisku reagującego na kliknięcie; jego zawartość jest niewidoczna i może być mniejsza lub większa niż widoczny obraz przycisku. Jeśli nie opiszesz tej ramki, zostanie do niej użyty obraz przycisku z ramki Up.

Zwróć uwagę, że w poprzednim rozdziale narysowaliśmy obraz przycisku, ale nie utworzyliśmy symbolu przycisku.
Aby utworzyć przycisk, wykonaj polecenie Wstaw\u003e Nowy symbol lub naciśnij klawisze +... W otwartym oknie dialogowym wprowadź nazwę symbolu i wybierz jego typ (Zachowanie) Przycisk. Flash przełączy się w tryb edycji symbolu. Spowoduje to wyświetlenie czterech klatek na osi czasu: w górę, powyżej, w dół i trafienie.
Pierwsza klatka jest w górę. Teraz musimy utworzyć obraz dla przycisku, używając narzędzi do rysowania, importując grafikę lub wklejając instancję innego symbolu. W takim przypadku można użyć symboli, takich jak Grafika (grafika) i Klip filmowy (animacja), ale nie można użyć przycisku (przycisku). Użyj klipu filmowego, jeśli chcesz, aby przycisk był animowany. Utworzony obraz dla przycisku zostanie wstawiony do ramki Up, która automatycznie stanie się kluczem.
Następnie kliknij oś czasu Over frame i ustaw ją jako klucz (Wstaw\u003e Klatka kluczowa lub klucz ). Zawartość poprzedniej klatki (Up) zostanie automatycznie skopiowana do ramki Over. Powtórz to dla ramek Down i Hit. Teraz możesz edytować obraz przycisku dla każdej z czterech ramek. Na przykład możesz zmienić kolor i / lub etykietę przycisku, aby uczynić przycisk bardziej dynamicznym: zmieni on swój wygląd w zależności od pozycji wskaźnika i stanu przycisku myszy. Rysunki przedstawiają przykładowo obrazy przycisku dla różnych ramek.
Jeśli chcesz odtwarzać dźwięk w zależności od stanu przycisku, wybierz odpowiednią klatkę na osi czasu i wykonaj polecenie Modyfikuj\u003e Klatka, aby otworzyć panel Klatka z zakładką Dźwięk. W tej zakładce możesz ustawić wymagane parametry.
Po zakończeniu tworzenia symbolu przycisku przejdź do trybu edycji komiksu (Edycja\u003e Edytuj film) i przeciągnij symbol przycisku z okna biblioteki na scenę, aby utworzyć instancję tego symbolu w swojej kreskówce (scenie).

Postać: 557.

Postać: 559.

Wszystko, co zrobiliśmy, to tylko obiekt wizualny. Wiadomo jednak, że przyciski służą jako elementy sterujące. Na przykład chcemy, aby coś się wydarzyło po kliknięciu przycisku. Innymi słowy, przycisk musi być funkcjonalny. Aby to zrobić, kliknij prawym przyciskiem myszy obraz przycisku i wybierz polecenie Akcje z menu rozwijanego. Spowoduje to otwarcie panelu Operacje obiektu pokazanego na rysunku. Na karcie Operacje obiektu tego panelu na liście po lewej stronie możesz wybrać akcję. Prawy margines zawiera instrukcje skryptu ActionScript. Możesz wybrać akcje i ich wartości parametrów (pola wejściowe i / lub przyciski opcji), obserwując, co Flash zapisuje w odpowiednim polu, lub możesz ręcznie napisać skrypt. Rysunek przedstawia przykład, w którym funkcja getURL (adpec) jest wybrana jako akcja wywołująca dokument (plik) znajdujący się pod podanym adresem. Ponadto akcja ta nastąpi w przypadku naciśnięcia przycisku (po kliknięciu lewym przyciskiem myszy na obraz przycisku) - odpowiada za to funkcja on (press)

.

Postać: 560. Panel do tworzenia i edycji akcji związanych z obiektem

Więcej szczegółów na temat paska akcji, aw szczególności na temat funkcji przycisków, zostanie omówionych w dalszej części tego rozdziału.
Zauważ, że akcje powinny być przypisane do instancji symbolu przycisku w kreskówce, a nie do ramek przycisków na osi czasu. Innymi słowy, umieszczasz instancję przycisku na scenie, a następnie przypisujesz do niej akcje.
Biblioteka symboli współdzielonych Flash, którą można otworzyć za pomocą opcji Okno\u003e Biblioteki wspólne, zawiera gotowe przyciski. Możesz otworzyć tę bibliotekę i przeciągnąć z niej symbol, który Ci się podoba, do obszaru roboczego tyle razy, ile potrzebujesz w kreskówce. Dzięki temu postać natychmiast wejdzie do prywatnej biblioteki twojej kreskówki. Możesz modyfikować zarówno symbol, jak i jego instancje. Na przykład, jeśli chcesz utworzyć serię przycisków w tym samym stylu, ale z różnymi etykietami, powinieneś zmodyfikować instancje, dla których wybierz instancję przycisku na scenie i wykonaj polecenie Modyfikuj\u003e Instancja.
We Flash MX można modyfikować ramki, instancje symboli i same symbole za pomocą palety Właściwości.
Jeśli szukasz prostego prostokątnego przycisku bez większego artystycznego wyrafinowania, to we Flash MX możesz skorzystać z gotowego komponentu PushButton z palety Komponenty. Instancje tego komponentu można edytować. Rozmawialiśmy o tym w poprzednim rozdziale.

Postać: 561. Dwa wystąpienia przycisku różniące się etykietami. Biblioteka - Moviel - okno biblioteki naszych postaci z kreskówek (w tej chwili zawiera tylko jeden symbol Push Bar); Library - Buttons.fla - okno biblioteki przycisków Common Libraries

Animacja (klip filmowy)

Animacja to najciekawszy typ postaci. Ten symbol może zawierać dowolną liczbę ramek. Język ActionScript traktuje ten symbol jako obiekt klipu filmowego. Każda postać tego typu (klip) ma własną oś czasu, która jest odtwarzana niezależnie od osi czasu głównej kreskówki. Alternatywnie klip może zawierać inne klipy i interaktywne elementy sterujące.
Omówiliśmy już tworzenie prostej kreskówki wcześniej w tym rozdziale. Bardziej szczegółowa historia znajduje się w następnej sekcji. Zauważ tutaj, że duża ogólność symbolu klipu filmowego wymaga pewnego doświadczenia, aby go w pełni wykorzystać. W wielu przypadkach cała animacja (cały rysunek) składa się z jednego klipu.

Biblioteki symboli

Z pojęciem biblioteki spotkaliśmy się już w poprzednim rozdziale oraz w tym rozdziale. Przyjrzyjmy się teraz bliżej. Biblioteka symboli pozwala programiście używać symboli utworzonych wcześniej w innych kreskówkach w nowych kreskówkach. Umożliwia to gromadzenie zgromadzonego materiału i organizację pracy zespołowej.

Flash udostępnia następujące typy bibliotek:

• Biblioteka kreskówek
• Biblioteka powszechna
• Stała biblioteka
• Biblioteka wspólna

We Flash MX, w przeciwieństwie do Flash 5.0, biblioteki współdzielone występują w dwóch wersjach:

• Run-time - współdzielona biblioteka wykonawcza;
• Czas autora to biblioteka współdzielona w czasie projektowania.

We Flash 5.0 jedynym typem biblioteki współdzielonej jest biblioteka wykonawcza.
Z punktu widzenia interfejsu użytkownika praca z bibliotekami różnych typów jest zorganizowana w ten sam sposób, jej zawartość można przeglądać w specjalnym oknie dialogowym.
Biblioteka kreskówek- biblioteka symboli związanych z konkretną kreskówką. Jest tworzony automatycznie, gdy tylko utworzysz pierwszy symbol. Ten symbol natychmiast przejdzie do biblioteki. Pustą bibliotekę można utworzyć, przechodząc do opcji Okno\u003e Biblioteka. Biblioteka, raz utworzona, istnieje tak długo, jak istnieje kreskówka. Możesz usunąć całą jej zawartość, ale nie możesz usunąć samej biblioteki. Nazwa komiksu (nazwa pliku) jest wyświetlana w tytule okna biblioteki. Symbole biblioteczne mogą być używane w dowolnej innej kreskówce. Aby to zrobić, po prostu otwórz nowy plik bez zamykania pliku, którego biblioteki chcesz użyć. W takim przypadku okno biblioteki pliku źródłowego musi być otwarte.
Biblioteka wspólna- wbudowana biblioteka Flash. W przeciwieństwie do biblioteki rysunków, jej zawartości nie można zmienić. Biblioteka współdzielona składa się z kilku bibliotek, takich jak przyciski, interakcje edukacyjne i inne. Udostępniona biblioteka Flash MX zawiera również sekcję Zasoby programisty, która zawiera komponenty interfejsu użytkownika (zobacz (patrz rozdział 8).
Elementy wspólnej biblioteki mogą być używane w ich kreskówkach zarówno w ich postaci, jak i jako początkowe puste miejsca do późniejszej modyfikacji.
Stała biblioteka- biblioteka stworzona przez użytkownika i dostępna z dowolnej kreskówki. Aby utworzyć bibliotekę trwałą, wykonaj następujące czynności:

1. Utwórz plik Flash (nowy rysunek, to znaczy plik z rozszerzeniem fla) z biblioteką zawierającą symbole, które chcesz dołączyć do stałej biblioteki.
2. Zapisz wygenerowany plik Flash w folderze Libraries, który znajduje się wśród innych folderów w pakiecie Flash.

Po utworzeniu nowa biblioteka pojawia się w menu Okno\u003e Biblioteki wspólne.
Biblioteka wspólnaumożliwia używanie zawartych w nim postaci w wielu kreskówkach bez kopiowania tych postaci do prywatnych bibliotek kreskówek. Elementy biblioteki współdzielonej nazywane są zasobami. Biblioteka współdzielona jest używana jako plik zewnętrzny i nie jest zawarta w kreskówce.
Biblioteki współdzielone są przydatne w następujących sytuacjach:

• podczas używania symboli czcionek na różnych stronach serwisu;
• podczas korzystania z tej samej ścieżki dźwiękowej na różnych stronach serwisu;
• przy użyciu różnych elementów, które powinny odpowiadać jednemu stylowi projektowania.

Aby utworzyć bibliotekę współdzieloną, należy zdefiniować jej zasoby (zawarte w niej symbole), włączyć eksport symboli współdzielonych, określić adres URL witryny, w której biblioteka będzie hostowana, wyeksportować plik Flash do formatu SWF i umieścić go w serwisie WWW.
Po utworzeniu biblioteki współdzielonej musisz określić, które z jej symboli można wyeksportować do innych kreskówek. Aby to zrobić, wybierz żądany symbol w oknie biblioteki i kliknij go prawym przyciskiem myszy. Z menu kontekstowego wybierz polecenie Powiązanie. Spowoduje to otwarcie okna o nazwie Właściwości powiązania symboli we Flashu 5.0, ale po prostu Właściwości powiązania we Flash MX. Te okna są nieco inne w różnych wersjach Flasha, ale istota jest taka sama.
W polu Identyfikator wpisz nazwę symbolu (bez spacji), z którym zostanie wyeksportowany do filmu współwłaściciela.
We Flash 5.0 możesz wyeksportować symbol lub zaimportować go. W tym drugim przypadku musisz podać adres URL kreskówki źródłowej, czyli pliku SWF z biblioteką współdzieloną. To samo można zrobić we Flash MX, ale są też dodatkowe funkcje. W szczególności, aby umożliwić natychmiastowe użycie wyeksportowanego symbolu z pierwszej klatki rysunku współwłaściciela, zaznacz pole wyboru Eksportuj w pierwszej klatce. Jeśli chcesz udostępnić wyeksportowany symbol w ActionScript, zaznacz pole wyboru Eksportuj do ActionScript.

Postać: 562. Okno Właściwości łącza symboli w programie Flash 5.0

Postać: 563. Okno właściwości łącza we Flash MX

Aby użyć symboli z biblioteki współdzielonej we współwłasnej kreskówce, otwórz bibliotekę dla tej kreskówki i wybierz Nowy symbol z rozwijanego menu biblioteki. Otworzy się okno Utwórz nowy symbol. We Flashu 5.0 w tym oknie można ustawić tylko nazwę i typ symbolu. Dlatego po pojawieniu się nowego symbolu w bibliotece, należy otworzyć okno Właściwości powiązania symboli, opisane powyżej. We Flash MX okno Utwórz nowy symbol zawiera wszystkie parametry symbolu jednocześnie.

Postać: 564. Utwórz nowe okno symbolu we Flash MX

Powyżej przyjrzeliśmy się pracy z bibliotekami współdzielonymi typu Run-time. Przypominamy, że jest to jedyny rodzaj współdzielonej biblioteki we Flash 5.0. Flash MX zapewnia także inny rodzaj współdzielonej biblioteki - czas autora. Nie będziemy tego szczegółowo omawiać tutaj. Zwracamy tylko uwagę, że użycie bibliotek czasu autora pozwala na zastąpienie zawartości symboli w edytowanym pliku Flash.

Tworzenie animacji

Rozważmy metody i przykłady tworzenia animacji.

Animacja klatka po klatce

Animacja klatka po klatce składa się w całości z klatek kluczowych. Tutaj sam określasz zarówno zawartość każdej klatki, jak i jej ekspozycję (czyli ile takich statycznych klatek zajmie obraz). Ta metoda była pierwotnie używana podczas tworzenia zwykłych ręcznie rysowanych kreskówek. Na osi czasu animacja klatka po klatce wygląda następująco:

Postać: 565. Animacja klatka po klatce składa się tylko z klatek kluczowych. Jeden i ten sam obraz może zajmować kilka takich ramek

Tylko w ten sposób można zorganizować zmianę całkowicie niezależnych obrazów - tak zwany pokaz slajdów. Z reguły w ten sposób powstaje zwykły baner.

Postać: 566. Cztery kolejne klatki z kreskówki, w której rośnie kwiat

Jednak animacja klatka po klatce jest trudna do zmodyfikowania. Jeśli ta animacja jest połączona, prawie wszystkie klatki muszą zostać zmodyfikowane. Ponadto animacja klatka po klatce zajmuje dość dużą objętość, ponieważ informacje o każdej klatce muszą być przechowywane.
Zwróć uwagę, że animowane pliki GIF, które są szeroko stosowane w projektowaniu stron internetowych, są tworzone we Flashu przy użyciu metody animacji klatka po klatce. Możesz utworzyć wiele klatek kluczowych (w razie potrzeby użyć wielu warstw), a następnie przekonwertować kompozycję na animowany plik GIF za pomocą operacji publikowania. Omówiono to bardziej szczegółowo w ostatniej sekcji tego rozdziału.

Animacja interpolacji

Dzięki tej metodzie animacje Flash automatycznie tworzy animacje, które mieszczą się między określonymi klatkami kluczowymi. Oznacza to, że rysujesz obiekt w jednej ramce, a następnie wprowadzasz zmiany w innej ramce. Utworzone klatki są kluczowe. Następnie poprosisz Flasha, aby obliczył klatki, które zmieszczą się między dwiema klatkami kluczowymi. W rezultacie otrzymujesz animację.
Szybkość i płynność animacji zależy od liczby klatek zarezerwowanych na ruch, a także szybkości filmu Flash (filmu). Szybkość przewijania kreskówki można ustawić we Flash 5.0 za pomocą polecenia Modyfikuj\u003e Film lub klawiszy +oraz we Flash MX - Modyfikuj\u003e Dokument. Parametr Szybkość klatek ustawia liczbę klatek wyświetlanych na sekundę. W przypadku animacji wysokiej jakości prędkość powinna wynosić co najmniej 25-30 klatek / s. Domyślna szybkość to 12 fps. Podczas tworzenia kreskówek jest zwykle wybierany eksperymentalnie, w zależności od dynamiki Twojej pracy, wymaganej jakości, ograniczeń rozmiaru pliku itp.
O płynności i czasie trwania decyduje liczba klatek przydzielonych do całej animacji (jej fragmentu). Na przykład, jeśli prędkość twojej kreskówki wynosi 30 klatek / s, a musisz przenieść obiekt z jednego rogu obrazu do drugiego w 2,5 sekundy, będziesz musiał wykonać 75 klatek na ruch. Flash ma dwie opcje renderowania obrazów pośrednich:

• Animacja kształtu - animacja budowania oparta na zmianach kształtu;
• Animacja ruchu - animacja budowania oparta na zmieniających się postaciach.

Pierwsza opcja jest używana w przypadkach, gdy trzeba zapewnić jedynie płynną zmianę kształtu obiektu. Drugi jest używany najczęściej ze względu na swoją wszechstronność.

Animacja kształtu

Powiedzmy, że chcesz, aby kwadrat płynnie zamienił się w okrąg, lub obraz kota płynnie zamienia się w obraz psa. W takich przypadkach stosuje się animację kształtu (zmiana kształtu, transformacja). W tym przypadku ustawiasz dwie klatki kluczowe w pewnej odległości od siebie. W rozpatrywanej wersji animacji istnieje ścisłe ograniczenie: animacja musi zajmować oddzielną warstwę i być pojedynczą narysowaną figurą (nie może być żadnych grup ani symboli). Po utworzeniu dwóch klatek kluczowych uaktywnij pierwszą (po prostu kliknij na nią) i wybierz opcję Ramka z palety (o nazwie Okna\u003e Panele\u003e Ramka lub naciskając + ) na liście animacji w linii kształtu, jak pokazano na rysunku.

Postać: 567. Określanie opcji animacji animacji kształtu

Klatki na osi czasu powinny zmienić kolor na zielonkawy, a strzałka powinna rozciągać się od pierwszej klatki do drugiej. W rezultacie otrzymasz serię klatek pośrednich, które będą odzwierciedlać przejście od pierwszego kształtu do drugiego. Aby pokazać zawartość sąsiednich ramek, musisz włączyć wyświetlanie cieni. Poniższa ilustracja przedstawia animację, w której okrąg płynnie zmienia się w sierp księżyca.

Postać: 568. Krąg płynnie zmienia się w półksiężyc. Tutaj pierwsza klatka kluczowa zawiera okrąg, a ostatnia, dziesiąta klatka zawiera półksiężyc. Rysunek przedstawia wszystkie klatki z kreskówki

Przyjrzyjmy się opcjom transformacji animacji kształtu. Gdy ta opcja jest zaznaczona, parametry Wygładzanie i Mieszanie oraz etykieta ramki etykiety pojawiają się na palecie Ramka.

• Parametr Łagodzenie ustawia odwrotne przyspieszenie wykładnicze. Wartość tego parametru może wynosić od -100 do +100. Oznacza to, że jeśli określisz wartość ujemną w polu Łagodzenie, to ruch będzie się odbywał z dodatnim przyspieszeniem (prędkość wzrośnie). I odwrotnie, jeśli wartość wygładzania jest dodatnia, animacja zwalnia.

Postać: 569. Animacja z przyspieszeniem (Easing< 0)

Postać: 570. Animacja łączenia (utrwalanie\u003e 0)

• Parametr Blend określa algorytm przejścia: rozdzielczy (niewyraźny) i kątowy (kątowy). Pierwsza stara się jak najbardziej zmiękczyć, wygładzić przejście od jednej figury do drugiej. Drugi stara się zachować proporcje narożników i odcinków prostych. Zaleca się eksperymentowanie z tym parametrem, aby zrozumieć, kiedy najlepiej jest użyć wartości parametru.

Ostatnim narzędziem w animacji animacji kształtu jest punkty kontrolne (wskazówki dotyczące kształtu), dzięki którym pomożesz Flashowi poprawnie wykonać przejście. Nie możesz się bez nich obejść podczas pracy ze złożonymi kształtami. Punkty kontrolne są bardzo łatwe w użyciu. W pierwszej klatce kluczowej (gdzie zaczyna się animacja) dodajesz punkt przerwania (polecenie Modyfikuj\u003e transformacja\u003e Dodaj wskazówkę dotyczącą kształtu lub klucze ++). Na scenie pojawi się mała czerwona kropka, oznaczona literą alfabetu łacińskiego. Dołączasz go do części obrazu, która nie porusza się tak, jak chcesz. Następnie przechodzisz do drugiej klatki kluczowej i dołączasz ten sam punkt do części, do której zaznaczona część powinna przejść w klatce początkowej. Ten punkt będzie już zielony, aw początkowej ramce zmieni kolor na żółty. W ten sposób można rozróżnić punkty kontrolne początku i końca (oba mogą znajdować się w tej samej klatce). Możesz usunąć wszystkie punkty za pomocą polecenia ModifyTransform\u003e Usuń wszystkie wskazówki... Aby usunąć pojedynczy punkt, możesz kliknąć go prawym przyciskiem myszy i wybrać polecenie Usuń wskazówkę z menu kontekstowego, które się pojawi. Ponieważ punkty kontrolne są oznaczone literami alfabetu łacińskiego, może ich być nie więcej niż 27.
Na następnych dwóch obrazkach widać różnicę między ramkami utworzonymi bez użycia punktów kontrolnych a ramkami utworzonymi za pomocą takich.

Postać: 571. Animacja kształtu bez użycia punktów kontrolnych

Postać: 572. Animacja kształtu za pomocą punktów kontrolnych

Podczas używania animacji kształtów można modyfikować następujące parametry kształtu:

• Formularz
• Lokalizacja
• Rozmiar (dowolny współczynnik proporcji)
• Kąt obrotu

Jeśli chcesz wyłączyć animację kształtu, na palecie Klatka wybierz wartość Brak z listy Animacja.

Animacja oparta na zmianie postaci (animacja ruchu)

Jak wspomniano powyżej, najczęściej używaną animacją jest animacja ruchu. W tym przypadku animacja opiera się na modyfikacji symboli, czyli obiekt animacji jest symbolem. Podobnie jak w przypadku animacji kształtów, każdy obiekt wymaga jednej warstwy na raz. Ta warstwa powinna zawierać jeden symbol, za pomocą którego będą miały miejsce wszystkie zmiany.
Oto niektóre parametry symboli, które można modyfikować za pomocą animacji ruchu:

• rozmiar (zarówno proporcjonalny, jak i nieproporcjonalny - osobno wysokość i szerokość)
• skłonić
• lokalizacja
• kąt obrotu
• efekty kolorystyczne

Istnieje kilka sposobów włączenia animacji ruchu i tylko jeden, aby ją wyłączyć. Aby włączyć animację ruchu, należy uaktywnić początkową klatkę przejścia, a następnie, naciskając prawy przycisk myszy, wybrać polecenie Utwórz animację ruchu z menu kontekstowego lub wybrać polecenie Wstaw\u003e Utwórz animację ruchu). Uniwersalnym sposobem włączania / wyłączania animacji ruchu jest wybranie wartości z listy animacji na palecie klatek.

Opcje animacji:

• Łagodzenie - ustawia odwrotne przyspieszenie wykładnicze; działa tak samo, jak w przypadku animacji kształtu;
• Obróć - pozwala kontrolować rotację:
  • Auto - wymusza na Flashu automatyczną próbę określenia liczby pętli;
  • CW - ustawia obrót w prawo;
  • CCW - ustawia obrót w lewo; w tym przypadku w dostępnym teraz polu po prawej stronie możesz wpisać liczbę obrotów (możesz użyć tylko wartości całkowitych lub wyłączyć obrót, wybierając wartość Brak na liście Obróć).
• Opcje - dodatkowe parametry:
  • Zorientuj do ścieżki - obraca symbol zgodnie z linią prowadzącą;
  • Przyciągaj - przyciąga symbol do linii pomocniczej;
  • W przypadkach, gdy liczba klatek w scenie głównej nie jest wielokrotnością liczby klatek postaci, pole wyboru Synchronizuj umożliwia synchronizację dwóch animacji.

Warstwy pomocnicze

Ruch obiektu można zorganizować za pomocą warstwy pomocniczej. W warstwie prowadzącej rysowana jest trajektoria, po której obiekt powinien się poruszać, następnie sam obiekt jest do niego przyciągany, a warstwa prowadząca wraz z trajektorią staje się niewidoczna. Ogólnie obiekt może być symbolem typu Klip filmowy, czyli jakaś kreskówka, lub nawet grupę obiektów różnego typu. Rozważmy prosty przykład, w którym obraz strzałki porusza się po dowolnej krzywej.
Na warstwie o nazwie Strzałka narysuj obiekt w kształcie strzałki i przekonwertuj go na symbol graficzny. W bardziej ogólnym przypadku obiekt może być symbolem klipu filmowego, to znaczy jakimś rysunkiem lub nawet grupą obiektów różnego typu.

Postać: 574. Obiekt w kształcie strzałki, który powinien się poruszać

Następnie kliknij prawym przyciskiem myszy nazwę warstwy strzałki i wybierz polecenie Dodaj prowadnicę ruchu z menu kontekstowego. W rezultacie na liście warstw pojawi się nowa warstwa Przewodnik: strzałka z charakterystyczną ikoną po lewej stronie jej nazwy. To jest to warstwa prowadząca (warstwa prowadząca). Prowadzona jest warstwa znajdująca się bezpośrednio pod nią na liście. W warstwie pomocniczej narysujmy ścieżkę ruchu. Aby to zrobić, możesz użyć dowolnego narzędzia do rysowania linii, na przykład Ołówek (Ołówek). Najważniejsze jest to, że ścieżka to linia (kontur), a nie obszar wypełnienia.
Wybierz nasz obiekt w postaci strzałki i przenieś go na początek ścieżki. Kiedy się poruszasz, na środku obrazu obiektu pojawia się okrąg, który powinien leżeć na linii trajektorii i niejako go złapać. Spowoduje to związanie obiektu ze ścieżką.
Na osi czasu wybierz klatkę odpowiadającą końcowi ruchu wzdłuż trajektorii (w naszym przykładzie jest to klatka 30). Zróbmy to kluczem. Należy to zrobić najpierw w warstwie prowadzącej, a następnie w warstwie prowadzonej.
Upewnij się, że warstwa prowadzona jest aktywna (w naszym przykładzie jest to warstwa Arrow). Przeciągnij obiekt na koniec ścieżki, a następnie wróć do pierwszej klatki na tej samej warstwie. Utwórzmy animację (polecenie Wstaw animację ruchu). Ogólnie rzecz biorąc, organizacja ruchu wzdłuż trajektorii prowadzącej jest zakończona.

Postać: 575. Narysuj trajektorię w warstwie prowadzącej

Postać: 576. Ustawianie parametrów ruchu po ścieżce

Postać: 577. Ruch obiektu wraz z jego orientacją wzdłuż ścieżki

Aby ścieżka ruchu była niewidoczna, wystarczy uczynić niewidoczną warstwę prowadzącą. Jeśli chcesz, aby obiekt był zorientowany wzdłuż ścieżki, ustaw właściwość Zorientuj na ścieżkę dla pierwszej klatki warstwy z obiektem. Przyspieszenie lub spowolnienie ruchu na ścieżce jest określane przez parametr Łagodzenie.
Jeśli warstwa prowadząca już istnieje, można wykonać każdą warstwę jako prowadzoną. Aby to zrobić, po prostu przeciągnij jego nazwę na listę warstw bezpośrednio pod nazwą warstwy pomocniczej lub utwórz nową warstwę poniżej linii pomocniczej i ustaw typ tej warstwy na Normalna.

Maski warstwowe

Zawartość warstwy można obejrzeć przez otwór, ukrywając wszystko inne. W tym celu stosuje się tak zwaną maskę warstwy - specjalny rodzaj warstwy, która zawiera samą maskę. Maskę (otwór lub rzutnię) można utworzyć na podstawie różnych typów obiektów: obszaru wypełnienia, pola tekstowego, instancji symbolu graficznego, a nawet kreskówki. Maska może zostać zmuszona do zmiany kształtu lub przesunięcia. Nie można jednak stosować masek warstw wewnątrz przycisków.
Maska to warstwa, w której dowolny obszar wypełnienia jest interpretowany jako otwór, przez który widoczna jest leżąca pod nim warstwa. To ignoruje kolor wypełnienia, gradient i kontur. Domyślnie maska \u200b\u200bwarstwy zakrywa (maskuje) tylko warstwę, która znajduje się bezpośrednio pod nią.
Spójrzmy na tworzenie prostej maski na podstawie obszaru wypełnienia. Najpierw utwórzmy zamaskowaną warstwę. Nazwijmy to Tło. Zaimportowaliśmy do niej bitmapę z pakietu Photoshop 7.O. Następnie utwórzmy maskę warstwy. Aby to zrobić, wystarczy kliknąć przycisk ze znakiem „+” u dołu listy warstw. Nazwijmy to Maską. W tej warstwie narysujemy jakiś kształt i wypełnimy go jakimś kolorem, czyli utworzymy obszar wypełnienia. Narysowaliśmy owal, a następnie przekształciliśmy go za pomocą narzędzia Podselekcja (biała strzałka). Teraz wskażemy, że ta warstwa jest maską warstwy. Aby to zrobić, kliknij prawym przyciskiem myszy jego nazwę i wybierz polecenie Maska z menu kontekstowego. W tym przypadku po lewej stronie nazwy warstwy maskującej i warstwy zamaskowanej pojawią się charakterystyczne ikony, a obie warstwy zostaną zablokowane (po prawej stronie ich nazwy pojawią się obrazy zamków). Maskowanie zacznie obowiązywać, a na scenie będzie widoczny tylko obszar tła, który jest zakryty kształtem maski warstwy.
Aby przejść do trybu edycji maski i zobaczyć zarówno tło, jak i rzutnię maski, odblokuj maskę warstwy (kliknij odpowiedni obraz blokady). W trybie edycji możesz zmienić kształt, położenie, a nawet liczbę rzutni maski.
Ogólnie można zamaskować wiele warstw, a nie tylko tę bezpośrednio pod maską. Jeśli chcesz, aby jakaś warstwa była maskowalna, to najpierw umieść ją poniżej maski warstwy, a następnie we właściwościach tej warstwy ustaw przełącznik Masked (Masked). I odwrotnie, aby usunąć warstwę z maski, ustaw ten przełącznik na Normalny.
Więc rozważaliśmy najprostszy sposób tworzenie maski. Dlaczego potrzebne są maski? Maska statyczna to narzędzie do tworzenia kolaży.
Tutaj nie będziemy się rozwodzić, w jakich przypadkach i dlaczego może być konieczne ukrycie czegoś przed istniejącym, aby reszta pojawiła się w interesującej lub koniecznej formie.

Postać: 578. Maska jest w trybie edycji. Aby zobaczyć efekt maski, ustaw blokadę maski warstwy (blokadę)

Postać: 579. Widok sceny przy włączonym trybie maskowania: maska \u200b\u200bwarstwy jest zablokowana (blokada). Tło jest widoczne tylko przez rzutnię maski

Najciekawsze i najbardziej przydatne efekty stosowania masek uzyskuje się poprzez ich animację: rzutnie masek mogą zmieniać ich kształt i przesuwać się na tle zamaskowanych warstw. Dlatego są szeroko stosowane w kreskówkach. Rozwijane menu, zmarszczki w wodzie, metamorfoza chmur, ruch ust podczas mówienia - wszystko to można zrobić za pomocą animowanych masek.
Przyjrzyjmy się teraz tworzeniu animowanych masek. Zasadniczo maska \u200b\u200banimacji to maska, której rzutnia zmienia kształt lub przesuwa się w obszarze roboczym. Możesz utworzyć wiele rzutni, ale wszystkie muszą być zgrupowane w jednym obiekcie za pomocą polecenia Modyfikuj\u003e Grupuj.
Dla uproszczenia stwórzmy owalną rzutnię i przesuwajmy ją na tle zamaskowanej warstwy. Powyżej pokazaliśmy, jak utworzyć maskę. Powtórz tę procedurę jako ćwiczenie.
Utwórz animację ruchu dla maski warstwy. Najpierw przesuńmy rzutnię w masce warstwy. W naszym przykładzie 20. klatka jest wybrana jako ostatnia (jest to klatka kluczowa). W masce warstwy przenieś kształt rzutni w nowe położenie. Wróć do pierwszej klatki i wykonaj polecenie Wstaw\u003e Utwórz animację ruchu (Wstaw\u003e Utwórz animację ruchu). W rezultacie między pierwszą a ostatnią klatką pojawia się strzałka. Aby animacja zadziałała, zalecamy najpierw wybrać kształt rzutni, a następnie zastosować do niego polecenie Modyfikuj\u003e Grupuj. Już zauważyliśmy tę okoliczność, rozważając warstwy prowadzące. Jeśli coś jest nie tak, zamiast strzałki pojawia się przerywana linia między pierwszą a ostatnią klatką. Następnie w warstwie zamaskowanej wklej ramkę na 20. pozycji. Może to być zwykła, niekoniecznie kluczowa ramka. Zablokuj warstwy i naciśnij klawisz zobaczyć maskę w akcji.

Postać: 580.

Postać: 581. Oś czasu podczas tworzenia ruchomej maski i widoku obszaru roboczego w trybie edycji (warstwy są odblokowane)

We Flash MX tworzenie animacji przebiega nieco inaczej niż we Flashu 5.O. Omówiliśmy już te różnice w sekcji Animacja próbna w tym rozdziale. Ich istota polega na doborze odpowiednich wartości dla właściwości ramy w palecie Właściwości (Właściwości).
Okno podglądu maski może zmienić kształt. Aby to zrobić, zamiast animacji ruchu użyj animacji kształtu. Aby to zrobić, we właściwościach pierwszej klatki wybierz wartość Kształt z listy rozwijanej Animacja. Rozdzielczość parametru Blend zapewnia płynniejsze ramki pośrednie; wartość Angular tego samego parametru pozwala zachować rogi i segmenty prostych w ramkach pośrednich.
Osobliwością animacji opartej na przekształcaniu jest to, że operacja grupowania nie powinna być stosowana do przekształconego obiektu, jak ma to miejsce podczas tworzenia animacji ruchu. Najlepszą transformację wizualną uzyskuje się, gdy transformowany jest tylko jeden obiekt. Jeśli chcesz przekształcić kilka obiektów, umieść je na jednej warstwie.
We Flash MX animacja typu transformacji jest wykonywana w podobny sposób. Osobliwością jest to, że właściwości pierwszej klatki są ustawiane na palecie Właściwości.
Ciekawe efekty wizualne uzyskuje się, gdy pod maską znajduje się kilka warstw tła. Rozważ przypadek, gdy chcesz oświetlić ciemny obraz wiązką latarki. W naszym przykładzie jest to obraz rastrowy - fragment wnętrza wiejskiego domu. Oczywiście w masce warstwy można użyć okrągłej rzutni, aby zasymulować plamkę światła. Następnie potrzebujemy dwóch warstw zawierających identyczne obrazy, różniące się tylko tym, że jedna z nich jest lżejsza od drugiej. Obrazy te można uzyskać z tego samego pliku, dostosowując jasność i kontrast w jakimś edytorze grafiki rastrowej, na przykład w programie Photoshop. Umieść jasny obraz na warstwie bezpośrednio pod maską warstwy, a ciemny obraz na jeszcze niższej warstwie. Obrazy w tych dwóch warstwach powinny być ułożone tak, aby jedna całkowicie zakrywała drugą. Warstwa z jasnym obrazem zostanie zamaskowana.

Postać: 582. Obrazy w różnych warstwach należy łączyć tak, aby jaśniejszy zakrył ciemną.

Maska warstwy będzie zawierać pływającą okrągłą rzutnię. W trybie widoku ten okrąg przesunie się po ciemnym obrazie, dotykając obszaru, nad którym się znajduje. W ten sposób powstaje wizualny efekt ruchu wiązki z latarki.

Postać: 583. Wykorzystanie maski do stworzenia efektu przesunięcia wiązki z latarki

Zauważ, że możesz sterować ruchem rzutni maski za pomocą skryptów ActionScript. Tworzenie skryptów jest niezbędne podczas tworzenia na przykład menu rozwijanych.
Innym sposobem tworzenia animacji opartych na maskach jest utrzymanie nieruchomego okna maski i poruszanie się elementów zamaskowanej warstwy. W ten sposób można stworzyć np. Efekt zmiany krajobrazu za oknem jadącego pociągu, czy biegające tytuły. Jeśli, powiedzmy, utworzysz grupę kilku rzutni (kilka obszarów wypełnienia zgrupowanych w jeden obiekt), to dzięki odpowiedniemu doborowi zamaskowanego obrazu i tła możesz stworzyć iluzję poruszania się i zmiany kształtu chmur lub fal morskich. Na koniec możesz jednocześnie przesuwać zarówno zamaskowane obiekty warstwy, jak i rzutnie.
Rozważmy przykład, w którym maska \u200b\u200bjest nieruchoma, a obraz w zamaskowanej warstwie się porusza. Oryginalny obraz, będący tłem całej kompozycji, przedstawia wydmę i zachmurzone niebo. Chcemy, aby chmury się poruszały. W tym celu umieściliśmy oryginalny obraz rozciągnięty na szerokość w zamaskowanej warstwie i uczyniliśmy rzutnię maski tak, aby pokrywała się z niebem na oryginalnym obrazie. Rozciągnięty obraz w warstwie maskującej jest przesuwany poziomo. W tym przypadku tylko niebo wchodzi przez okno maski, a wydma jest zamaskowana. Szerokość rozciągniętego obrazu powinna być taka, aby pod koniec ruchu jego lewa krawędź pokrywała się z lewą krawędzią obrazu tła. Oczywiście tylko pasek z chmurami mógł zostać potraktowany jako ruchomy obraz, ale nasza metoda okazała się w tym przypadku szybsza: po prostu skopiowaliśmy oryginalny obraz do zamaskowanej warstwy i zastosowaliśmy do niego polecenie Skaluj.

Postać: 584. Stwórz efekt pływającej chmury, używając stałej rzutni maski i ruchomej warstwy maski

Efekty kolorystyczne

Animacja ruchu umożliwia stosowanie różnych efektów kolorystycznych do całego symbolu. Ta funkcja nie jest dostępna w przypadku animacji kształtu.
W programie Flash 5.0, aby zastosować efekt do symbolu, należy zaznaczyć ten symbol i wybrać żądany efekt na palecie efektów, którą można otworzyć za pomocą polecenia Windows\u003e Panele\u003e Efekty (patrz zdjęcia).

Postać: 587. Precyzyjna regulacja wszystkich składników koloru (zaawansowane)

Postać: 588. Ustawianie przezroczystości (alfa)

We Flash MX podobne efekty wybiera się z listy rozwijanej Kolor na palecie Właściwości.

Postać: 589. Ustawianie efektów na palecie Właściwości we Flash MX

Przykłady animacji

Przyjrzeliśmy się już kilku przykładom tworzenia animacji powyżej, na przykład w sekcjach „Animacja próbna”, „Warstwy prowadzące” i „Maski warstw”. Podamy tutaj dodatkowe przykłady.

Akwarium

Zastanówmy się, jak na podstawie jednego symbolu „Ryba” można stworzyć „Akwarium” z wieloma różnymi rybami. Aby to zrobić, użyjemy biblioteki symboli dostarczonej z pakietem Flash 5.0 (polecenie Okno\u003e Biblioteki wspólne\u003e Klipy filmowe). Wybierz w nim symbol klipu filmowego o rybach. To nie jest tylko zdjęcie, ale kreskówka, to znaczy ryba porusza się w określonym obszarze. Przenieśmy instancję tego symbolu do obszaru roboczego edytora. Teraz wybierzmy go i edytujmy. Na przykład zmień rozmiar i lekko obróć, jak pokazano na poniższej ilustracji. Możesz zmienić kolor i dokonać innych przekształceń.

Postać: 590. Instancję symbolu z biblioteki można modyfikować

Powtórzmy tę operację kilka razy, czyli utworzymy kilka instancji symbolu „Ryby”. Każda instancja powinna „pływać” w swojej własnej, oddzielnej warstwie. Następnie ułóż kolejną warstwę, wypełnij ją jasnoniebieskim kolorem i narysuj trochę glonów. Wynik będzie podobny do pokazanego na poniższym rysunku.

Postać: 591. W obszarze roboczym występuje kilka wystąpień symbolu ryby, różniących się rozmiarem, kolorem i pozycją początkową. „Algi” malowane ręcznie w warstwie Background

Flash umożliwia tworzenie całkiem naturalistycznych kreskówek ze złożoną i wysokiej jakości animacją. Używa grafiki rastrowej. Z oryginalnego obrazu graficznego wycinane są poszczególne fragmenty, które następnie są modyfikowane i przekształcane w klipy. Te klipy są używane do tworzenia bardziej złożonych kompozycji itd. Poniższa ilustracja przedstawia klatkę kreskówki opartą na grafice bitmapowej.

Postać: 592. Ramka kreskówki utworzona przez skomponowanie fragmentów grafiki rastrowej

Rotacja planet wokół Słońca

Rozważmy teraz rotację trzech planet - Merkurego, Wenus i Ziemi - wokół Słońca. Ten bardzo pouczający i piękny przykład opisuje Aleksander Rybnikow na stronie http://zona5.al.ru. Szczegółowo, krok po kroku, opiszemy proces tworzenia kreskówki.
Krok 1. Stwórzmy nowy plik. Wykonajmy polecenie Modyfikuj\u003e Film iw otwartym oknie dialogowym, które wskazujemy wymiary fizyczne obszary w pikselach. Nie ograniczajmy się, bajki Flash wyglądają dobrze w trybie pełnoekranowym, więc ustawmy rozmiar klatki na 800x600. Domyślnie liczba klatek na sekundę w kreskówce jest ustawiona na 12 klatek / s. W takim przypadku rozsądne jest zwiększenie tej liczby do 16, ponieważ w przeciwnym razie obraz wyraźnie „drga”.
Krok 2. Najpierw narysujmy Kosmos. Aby to zrobić, po prostu obrysuj obszar roboczy prostokątem i wypełnij go czernią.
Krok 3. Teraz w centrum naszego Wszechświata konieczne jest umieszczenie Słońca. Postaraj się przedstawić to mniej lub bardziej wiarygodnie, to znaczy narysuj nie tylko pewien czerwony okrąg, ale także nałóż na niego nieco asymetryczny gradient, który powinien nadać twojej pracy trochę objętości, a następnie otocz Słońce świetlistą aureolą, która doda wiarygodności. Wszystko to można osiągnąć zarówno za pomocą samego edytora Flash, jak i importując gotowy obraz z dowolnego rastra edytor graficzny... Ale druga metoda w naszym przypadku jest wyjątkowo niewłaściwa, ponieważ Słońce jest dość dużym obiektem, a jeśli zostanie przedstawione w postaci obrazu rastrowego, objętość pliku wyjściowego znacznie wzrośnie. Zobaczmy, jak narysować Słońce za pomocą Flasha.
Narysuj okrąg, aby wypełnić listę rozwijaną próbkami kolorów, wybierz dowolny gradient. Za pomocą polecenia Okno\u003e Panele\u003e Wypełnij (Okno\u003e Palety\u003e Wypełnij) otwórz okno dialogowe, w którym można ustawić wartości kolorów gradientu. Niech Słońce zostanie zalane jasnożółtym, płynnie zmieniającym się w jasnoczerwony. Aureolę wykonamy w ten sam sposób, umieszczając większe koło, pokolorowane gradientem od czerwonego do czarnego. Ważne jest, aby Słońce było dokładnie w środku, to znaczy współrzędne środka powinny wynosić (400,300).
Krok 4. Czas narysować trzy planety. Należy pamiętać, że są one dość małe, więc w tym przypadku można zaimportować obraz bitmapowy w przezroczystym formacie GIF (a dokładniej obraz z przezroczystym tłem). Taki obraz nie powinien zajmować więcej niż 500 bajtów miejsca na dysku. Import odbywa się w następujący sposób.
Najpierw musisz utworzyć nową warstwę za pomocą polecenia Wstaw\u003e Warstwa (Wstaw\u003e Warstwa). Każda z planet będzie wymagała osobnej warstwy, dlatego warto nazwać warstwy nazwami planet. Następnie w tej warstwie należy utworzyć nowy symbol (polecenie Wstaw\u003e Symbol (Wstaw\u003e Symbol)). W menu Plik wybierz polecenie Importuj i zaimportuj żądany obraz GIF.
Krok 5. Następnie utworzony symbol należy umieścić na odpowiedniej warstwie. Aby to zrobić, otwórz bibliotekę symboli (polecenie Okno\u003e Biblioteka) i przeciągnij symbol planety stamtąd do obszaru roboczego (sceny).
Krok 6. Zwróć uwagę, że planety powinny następnie obracać się wokół Słońca. - środek sceny. Dlatego należy ponownie powrócić do edycji symbolu (dwukrotne kliknięcie na planetę) i wskazać w oknie dialogowym Informacje (polecenie Okno\u003e Informacje) jego odległość od środka. Wybrana jest odległość wzdłuż osi poziomej (wszystkie te wartości są ujemne, tj. Początkowo planety znajdują się na lewo od Słońca):

• dla Ziemi: - 250 pikseli;
• dla Wenus: - 180 pikseli;
• dla Mercury: - 120 pikseli.

Nieruchomy obraz jest gotowy! Powinien wyglądać jak najbardziej podobnie do poniższego rysunku:

Postać: 593. Scena stacjonarna: słońce i trzy planety na lewo od niego

Krok 7. Teraz obróćmy nasze planety w kierunku przeciwnym do ruchu wskazówek zegara wokół Słońca. Wiadomo, że planety, które są bliżej Słońca, obracają się szybciej. Spróbujmy obliczyć liczbę klatek komiksu w taki sposób, że Ziemia wykonuje jeden obrót w jednym cyklu, Wenus - dwa, a Merkury - trzy. Optymalna liczba klatek, wielokrotność dwóch, trzech i czterech, to 120. Byłoby brzydko, gdyby wszystkie planety w pewnym momencie stały się rzędem. Dlatego ustawmy początkowy kąt planet:

• dla Ziemi - 150 °;
• dla Wenus - 120 °;
• dla rtęci - 0 °.

Te dane można ustawić i zmienić w oknie dialogowym Informacje.
Krok 8. Teraz stwórzmy pierwszą klatkę kluczową dla dowolnej z planet, na przykład dla Ziemi. Aby to zrobić, kliknij prawym przyciskiem myszy pierwszą klatkę odpowiedniej warstwy i wybierz polecenie Utwórz animację ruchu z menu, które zostanie otwarte. Następnie skopiujemy tę klatkę do schowka (Soru) i wkleimy ją (Wklej) w miejsce ramki z liczbą 60. Następnie obróć Ziemię o kąt 180, czyli określ wartość kąta w oknie Transformacji równą -30 (patrz rysunek). Następną klatką kluczową będzie 90. klatka (obrót o 90 °), a ostatnią klatkę kluczową 120. (pełny obrót Ziemi wokół Słońca).

Postać: 594. Opracowanie animacji w kreskówce ze Słońcem i planetami

Krok 9. W podobny sposób możemy ustawić ruch Wenus i Merkurego. Aby wprawić Wenus w ruch, zajmie to dwa razy więcej klatek kluczowych, w przypadku Merkurego - trzy razy. W takim przypadku możesz skopiować kilka ramek jednocześnie. Dlatego w oknie dialogowym wystarczy ustawić kąty tylko dla jednego obrotu każdej z planet.
Krok 10. Pozostaje tylko opublikować wynikową scenę (polecenie Plik\u003e Publikuj) i cieszyć się efektem.
Plik SWF ma mniej niż 10 KB. Nawet nieanimowany plik GIF lub JPG zajmowałby dużo więcej miejsca na dysku. A nasz 7,5-sekundowy rysunek ma objętość zaledwie 10 KB!

Dźwięk w kreskówkach

Możesz dodać dźwięk do kreskówki. Aby to zrobić, musisz najpierw zaimportować plik dźwiękowy w jednym z następujących formatów: WAV, AIFF lub MP3. Import odbywa się za pomocą polecenia Plik\u003e Importuj.
Ścieżka dźwiękowa może ozdobić twoją kreskówkę. Jednak wielu użytkowników często woli wyciszyć dźwięk. Dlatego przy tworzeniu komiksu dźwięcznego dobrze byłoby umieścić w nim przycisk wyłączający dźwięk. Do tego przycisku należy przypisać akcję Zatrzymaj wszystkie dźwięki (podobne akcje przypisane do obiektów są również nazywane Akcją lub skryptem). Plik dźwiękowy ma następujące parametry, które wpływają zarówno na jakość dźwięku, jak i rozmiar pliku:

• Próbna stawka.Liczba próbek z sygnał dźwiękowywyprodukowane w ciągu jednej sekundy. Zwykle wartość ta nie przekracza 22 kHz, co odpowiada paśmie częstotliwości 11 kHz (zgodnie z twierdzeniem Kotelnikowa szerokość pasma odtwarzanych częstotliwości jest równa połowie częstotliwości próbkowania).
• Rozdzielczość bitowa.Liczba bitów (cyfr binarnych) używanych do próbkowania sygnału audio według poziomu. Pliki 16-bitowe mają mniej szumów w tle, ale kreskówki Flash zwykle używają 8-bitowego dźwięku, aby zmniejszyć rozmiar pliku.
• Kanały Dźwięk może być jedno- i dwukanałowy (mono i stereo). W przypadku kreskówek Flash dźwięk monofoniczny jest zwykle wystarczający, wymagający około połowy pamięci mniej niż dźwięk stereo.

Projektując kreskówkę, możesz użyć wysokiej jakości plików dźwiękowych, a następnie podczas publikowania w pliku SWF ustawić żądane opcje dźwięku.
Aby zaimportować plik dźwiękowy do kreskówki, wybierz polecenie Plik\u003e Importuj i w otwartym oknie dialogowym Importuj wybierz plik formatu dźwięku, który chcesz zaimportować. Następnie kliknij przycisk Otwórz. W rezultacie wybrany plik dźwiękowy zostanie umieszczony w bibliotece kreskówek.
Po zaimportowaniu pliku dźwiękowego do kreskówki musisz go umieścić i ustawić parametry. Wykonaj następujące czynności:

1. Utwórz nową warstwę dla pliku dźwiękowego.
2. Wybierz żądaną klatkę kluczową na tej warstwie, otwórz bibliotekę (Okno\u003e Biblioteka) i przeciągnij plik dźwiękowy do obszaru roboczego. Spowoduje to propagację pliku audio do wszystkich klatek, aż do następnej klatki kluczowej, jeśli taka istnieje.
3. We Flashu 5.0 przejdź do Wmdow\u003e Panele\u003e Dźwięk (Okno\u003e Palety\u003e Dźwięk). Otwiera się paleta dźwięków. We Flash MX zapoznaj się z paletą Właściwości. Wybierz żądane dźwięki z listy rozwijanej Dźwięk. Ta lista zawiera wszystkie zaimportowane pliki audio. Informacje o pliku są wyświetlane pod listą pod nazwą pliku: częstotliwość próbkowania w kHz, kanały, rozdzielczość bitowa, długość dźwięku i rozmiar pliku.
4. Z listy rozwijanej Efekt wybierz efekt dźwiękowy... Wartość domyślna to Brak. Na przykład efekt Fade In odtwarza dźwięk na poziomie wyciszenia.
5. Z listy rozwijanej Synchronizacja wybierz jedną z następujących opcji:
   • Zdarzenie. Rozpoczyna odtwarzanie dźwięku od pierwszej klatki kluczowej i trwa do końca pliku, nawet jeśli kreskówka już się zakończyła. To jest ustawienie domyślne.
   • Początek. Rozpoczyna odtwarzanie dźwięku od pierwszej klatki kluczowej. Jeśli jednak klatka kluczowa zostanie odtworzona ponownie, gdy dźwięk jest nadal odtwarzany, Flash ponownie rozpocznie odtwarzanie dźwięku. Ta wartość jest zwykle używana w przypadku przycisków dźwiękowych.
   • Zatrzymać. Zatrzymuje odtwarzanie dźwięku.
   • Strumień Synchronizuje dźwięk z animacją. Powoduje to, że Flash skraca lub wydłuża animację w celu dopasowania do dźwięku. Odtwarzanie dźwięku zatrzymuje się, gdy odtwarzana jest ostatnia klatka zawierająca dźwięk. Aby wskazać, gdzie kończy się dźwięk, możesz dodać ostatnią klatkę kluczową przed dodaniem dźwięku.
6. W polu Loop ustaw liczbę powtórzeń dźwięku. Jeśli znasz długość pliku audio, liczbę cykli animacji i liczbę klatek na sekundę, możesz obliczyć, ile cykli audio zajmie odtworzenie animacji. Na przykład, jeśli animacja zawiera 48 klatek, a ich częstotliwość odtwarzania wynosi 12 klatek / s, to czas trwania kreskówki wynosi 4 sekundy; jeśli czas trwania pliku dźwiękowego wynosi 2 s, to liczba cykli odtwarzania dźwięku wynosi 2. W praktyce, aby nie wykonywać obliczeń, zwykle wskazuje się na świadomie większą liczbę cykli.
7. Po dodaniu pliku dźwiękowego, aby wyświetlić wyniki, należy nacisnąć klawisz lub użyj polecenia Sterowanie\u003e Odtwórz (Sterowanie\u003e Odtwórz).

Po umieszczeniu pliku dźwiękowego w kreskówce możesz go edytować. Na przykład możesz usunąć niepotrzebne fragmenty dźwięku, zmienić jego głośność. Aby to zrobić, na palecie Dźwięk kliknij przycisk Edytuj. Otworzy się okno Edytuj obwiednię.
Pomiędzy panelami lewego i prawego kanału audio znajduje się linijka z suwakami, za pomocą której można ustawić początek i koniec pliku audio. Przesuwając lewy suwak w prawo, usuwamy początkowy fragment pliku. Podobnie, przesuwając prawy suwak, usuwamy ostatni fragment pliku audio.
Panele lewego i prawego kanału wyświetlają linie obwiedni, które z grubsza wskazują kierunek, w którym zmienia się głośność dźwięku. W takim przypadku ustawiane są kwadratowe znaczniki kopert. Przeciągnij znacznik w górę, aby zwiększyć głośność, lub w dół, aby zmniejszyć głośność. Linia koperty może mieć kapryśny kształt. Aby to zrobić, należy najpierw ustawić dodatkowe znaczniki, klikając kopertę, a następnie przeciągnąć je w żądane miejsca.
Po zakończeniu edycji pliku dźwiękowego kliknij przycisk OK, aby zamknąć okno Edytuj obwiednię.

Postać: 595. Okno edycji obwiedni

Pamiętaj, że dodanie dźwięku może znacznie zwiększyć rozmiar pliku kreskówki. Dlatego należy podjąć środki w celu kompresji informacji audio. Zmniejszenie częstotliwości próbkowania może obniżyć jakość dźwięku. Możesz użyć dźwięku 1-kanałowego zamiast dwukanałowego. Istnieją dwa sposoby ustawiania właściwości dźwięku we Flashu:

• Użyj karty Flash w oknie dialogowym Ustawienia publikowania, otwieranym przez Plik\u003e Opublikuj, aby zdefiniować właściwości wszystkich plików dźwiękowych w kreskówce. Ta metoda jest dobra, jeśli kreskówka zawiera jeden lub więcej podobnych dźwięków.
• Użyj okna dialogowego Właściwości dźwięku, aby ustawić właściwości dla poszczególnych plików dźwiękowych. Aby to zrobić, najpierw otwórz bibliotekę kreskówek (Okno\u003e Biblioteka) i kliknij dwukrotnie ikonę pliku dźwiękowego, którego właściwości chcesz zmienić. Informacje o pliku dźwiękowym są wyświetlane w górnej części okna dialogowego. Nowe wartości parametrów można wybrać z list rozwijanych w grupie Ustawienia eksportu. Nowy rozmiar pliku w kilobajtach i procent oryginalnego rozmiaru jest wyświetlany u dołu okna dialogowego. Możesz użyć formatu kompresji MP3 jako najlepszego dostępnego we Flashu.

Możesz przypisać dźwięki do różnych stanów symbolu przycisku. Dźwięki są przechowywane wewnątrz tego symbolu i dlatego są odtwarzane we wszystkich jego wystąpieniach. Aby dodać dźwięk do przycisku, wykonaj następujące czynności:

1. Na schemacie czasowym przycisku dodaj warstwę, na której umieścisz dźwięki.
2. W warstwie dźwiękowej utwórz klatkę kluczową odpowiadającą stanowi przycisku, który ma być odtwarzany.
3. Wybierz tę klatkę kluczową i ustaw opcje dźwięku.

Kompozycja kreskówkowa - sceny i klipy

Kreskówka może mieć złożoną strukturę (kompozycję). Tak więc poszczególne elementy jednej kreskówki mogą same być kreskówkami. W omawianym powyżej przykładzie akwarium ryby były różnymi instancjami klipu filmowego, to znaczy były kreskówkami. Każda kreskówka ma własną oś czasu, która steruje jej odtwarzaniem. Jeśli rysunek jest dołączony część w innej kreskówce, aby podkreślić tę okoliczność, nazywa się to klipem. Z kolei klip może zawierać inne klipy.
Aby zarządzać wieloma elementami w klipie, zwykle są one ułożone warstwami. Struktura wielowarstwowa służy do tworzenia prawie każdego mniej lub bardziej złożonego obiektu, czy to tylko rysunku, czy całej animacji.
Oprócz rozłożenia kreskówki (klipu) na warstwy, możesz podzielić go na segmenty czasu, czyli na sceny. Następnie sceny te można układać w dowolnej kolejności. Powody podzielenia kreskówki na sceny mogą być następujące:

• liczba klatek komiksu jest zbyt duża. Na przykład oś czasu nie jest widoczna na ekranie;
• w pewnym momencie kompozycja obrazów graficznych ulega zmianie (zmiana scenerii i postaci);
• fragment komiksu powtarza się kilkakrotnie lub może zostać wykorzystany w innych kreskówkach.

Podczas tworzenia nowej kreskówki (Plik\u003e Nowy) domyślnie tworzona jest tylko jedna scena o nazwie Scena 1. W takim przypadku każda rozwinięta animacja staje się częścią tej sceny. Aby dodać scenę, użyj polecenia Wstaw\u003e Scena. Spowoduje to wyczyszczenie obszaru roboczego, a nad linią czasu po lewej stronie pojawi się inna nazwa - Scena 2.

Postać: 596.

Jeśli twoja kreskówka zawiera kilka scen i klipów, użyj odpowiednich przycisków menu, aby wyświetlić żądaną scenę i klip w obszarze roboczym. Znajdują się one powyżej (we Flashu 5.0) lub poniżej (we Flash MX) osi czasu po prawej stronie.
Aby ustawić parametry sceny, przejdź do Okno\u003e Panele\u003e Scena (Okno\u003e Palety\u003e Scena). We Flash MX to polecenie jest krótsze: Okno\u003e Scena (Okno\u003e Scena). Otwarta paleta Scena wyświetli listę wszystkich scen w tej kreskówce. Kolejność scen na liście jest ważna, ponieważ jest to kolejność, w jakiej będą odtwarzane. Aby to zmienić, po prostu przeciągnij nazwę sceny z listy w nowe miejsce. Aby zmienić nazwę sceny, kliknij ją dwukrotnie, wprowadź nową nazwę i naciśnij .

Postać: 597. Paleta scen. W dolnej części palety znajdują się trzy przyciski do powielania, dodawania i usuwania sceny.

Aby wyświetlić scenę, możesz kliknąć jej nazwę na liście w palecie Scena, chociaż istnieją do tego inne narzędzia, na przykład przycisk menu znajdujący się nad osią czasu.

Cała praca nad tworzeniem filmu odbywa się za pomocą panelu Oś czasu, który pokazano poniżej. Panel Oś czasu jest podzielony na dwie części pionową linią, którą można przesuwać myszą. Prawa strona panelu to tak zwana „linijka ramki” - linijka, na której znajdują się symbole ramek, które wyglądają jak małe prostokąty. Zawartość ramek to statyczne obrazy, które zmieniają się w czasie, pojawiając się na polu roboczym. Numeracja ramek jest wyświetlana u góry linijki. „Pasek stanu” znajduje się pod paskiem ramek.

Klatki kluczowe to klatki, w których umieszczane są statyczne obrazy, które „ożywają” podczas animacji. Klawisz prowadzi do utworzenia nowej klatki kluczowej. Klawisz powoduje, że po prawej stronie klatki kluczowej pojawia się zduplikowana klatka. Zduplikowana ramka - To jest ramka, która nie ma własnej treści, ale zawiera tylko łącze do zawartości klatki kluczowej po jej lewej stronie. Utworzenie zduplikowanej klatki ułatwia pracę nad animacją, eliminując potrzebę rysowania tej samej sceny w sąsiednich klatkach. Na linijce ramki pusta klatka kluczowa jest oznaczona pustym kółkiem; jeśli zawiera obiekt graficzny, jest oznaczona czarnym kółkiem. Ostatnia klatka w łańcuchu zduplikowanych ramek jest oznaczona białym prostokątem.

- główne narzędzie podczas pracy z animacjami we Flashu. Wyświetla informacje o warstwach, które klatki są kluczowe i które Flash generuje. Korzystając z osi czasu, możesz zrozumieć, które klatki zawierają akcje lub etykiety. Umożliwia przenoszenie klatek kluczowych i całych fragmentów animacji.

Kluczowe cechy osi czasu:

1. Aby uaktywnić warstwę, musisz ją zaznaczyć. Możesz rysować i edytować tylko na warstwie aktywnej. Aktywna warstwa jest podświetlona na osi czasu, a ikona ołówka wskazuje, że można ją edytować (warstwa 3).
2. Zawartość warstw u góry osi czasu jest wyświetlana nad zawartością warstw znajdujących się pod nimi. Aby zamienić warstwy, przeciągnij nazwę warstwy w wybrane miejsce na osi czasu.
3. Aby utworzyć nową warstwę, wybierz pozycję na osi czasu dla nowej warstwy i naciśnij przycisk „Dodaj warstwę”.
4. Aby usunąć warstwę, po prostu przeciągnij ją do kosza.
5. Aby zmienić nazwę warstwy, kliknij ją dwukrotnie na osi czasu.
6. Tworząc obraz z warstwami, użyj elementów sterujących warstwami. Kliknięcie w kolumnie pod obrazem blokady zablokuje jakąkolwiek edycję, aw kolumnie pod obrazem oka uczyni warstwę niewidoczną.

Poniżej znajduje się przykład animacji, w której inne tło (krajobraz) z odpowiednim blokiem tekstu jest umieszczane na różnych warstwach z przesunięciem o 25 klatek. Krajobraz został uzyskany poprzez wypełnienie tła bitmapą Color Mixer-\u003e Bitmap z późniejszym przetworzeniem za pomocą narzędzia Fill Transformer.

Skala ramek to pole, w którym można dodawać i usuwać ramki proste i kluczowe. Jeśli wywołasz menu kontekstowe (prawy przycisk myszy) na dowolnej ramce, zobaczysz listę działań, które można wykonać. Skala wyświetla informacje o klatkach, które są kluczowe (takie ramki są oznaczone czarnymi kółkami), zawierają akcje (litera „a” nad okręgiem) lub etykietę (czerwona flaga, po której następuje nazwa etykiety). Kolor wskazuje również na rodzaj ramek. Szary reprezentuje klatki, które dokładnie pasują do klatki kluczowej. Niebieskawe lub zielonkawe podświetlenie wskazuje, że ramki zostały wygenerowane przez Flash. I wreszcie biała lub „pusta” przestrzeń w paski wskazuje, że w tych ramkach nic nie ma.

Przyciski sterowania cieniem - są to przyciski, które pozwalają wyświetlić sąsiednie klatki jak przez kalkę kreślarską, aby zobaczyć różnicę między poprzednią a kolejnymi klatkami. Możesz ustawić głębokość tego wyświetlacza po obu stronach znacznika. Animacja składa się z sekwencji klatek. Ramka może być skomponowana ręcznie lub wygenerowana przez Flash. Dotyczy to ramek na tej samej warstwie. Ponieważ sceny Flash zwykle składają się z kilku warstw, wynikowe „warstwowe” klatki mogą zawierać zarówno warstwy wygenerowane, jak i „stworzone samodzielnie”. W animacji komputerowej istnieje koncepcja - klatki kluczowe (klatki kluczowe). Ich nazwa mówi sama za siebie. Są to klatki, których Flash nie może modyfikować podczas procesu animacji. Ustawiasz te klatki kluczowe, a Flash buduje klatki pośrednie między nimi. Istnieją dwa typy klatek animacji - klatki animacji kształtu lub klatki animacji ruchu. I oczywiście ramki mogą być puste, tj. nic nie zawiera.

Symbole to jedno z kluczowych pojęć we Flashu. Symbol może być prostym prymitywem geometrycznym lub ich połączeniem lub całą animacją (filmem). Dzięki temu symbole mogą być używane jako potężny mechanizm abstrakcji we Flashu. Istnieją trzy rodzaje symboli: animacja (klip filmowy), przycisk (przycisk) i obraz (grafika):

1. Obraz (grafika), to znak pojedynczej ramki. Stąd wynika jego statyczna nazwa. Jeśli symbol jest rzeczywiście statycznym (nieanimującym) obiektem, lepiej zrobić z niego grafikę.
2. Przycisk (przycisk). Flash ma niestandardowy symbol funkcji przycisku. Posiada 4 ramki: Up, Over, Down, Hit, które zawierają następujące stany przycisków:
   • Trafienie to normalny stan przycisku zawierającego łącze, które użytkownik już odwiedził.
3. Animacja (klip filmowy). Jest to najbardziej „kompletny” rodzaj symbolu. Może zawierać dowolną liczbę klatek. Symbol tego typu można zinterpretować jako obiekt filmu w języku ActionScript (osadzony Flash).

Symbole można tworzyć zarówno "od zera" (Wstaw-\u003e Nowy symbol, Ctrl + F8), jak i używając bieżącego zaznaczenia poprzez umieszczenie go bezpośrednio w symbolu (Wstaw-\u003e Konwertuj na symbol, F8). Druga metoda jest używana znacznie częściej niż pierwsza, ponieważ symbol nie musi już być pozycjonowany ani zmieniać jego rozmiaru.

W Macromedia Flash istnieją dwa zasadniczo różne sposoby animowania czegoś:

1. Narysuj każdą klatkę samodzielnie, używając Flasha tylko do przechodzenia między klatkami.
2. Wymuś program Flash, aby automatycznie renderował klatki pośrednie.

Animacja krok po kroku (klatka po klatce)

Ta animacja składa się w całości z klatek kluczowych. Te. Sam określasz zarówno zawartość ramki, jak i jej „czas trwania” (tj. Ile takich statycznych ramek zajmie obraz). Przed narysowaniem następnej klatki wstaw pustą klatkę kluczową ( ), jeśli chcesz uzyskać kopię klatki kluczowej, naciśnij a następnie edytuj powstałą kopię. Jeśli chcesz użyć gotowych obrazów jako podstawy, możesz to zrobić w następujący sposób - Plik, Importuj ... Na osi czasu animacja klatka po klatce wygląda następująco:

Zalety tej metody to:

1. Animacja klatka po klatce daje w pewnym sensie większą kontrolę nad animacją, a jeśli jesteś doświadczonym animatorem, możesz to wykorzystać na swoją korzyść.
2. Tylko w ten sposób można zorganizować zmianę całkowicie niezależnych obrazów - pokaz slajdów (na przykład tworząc zwykły baner za pomocą Flasha).
3. I wszystko inne, co wynika z możliwości ręcznego narysowania każdej klatki.

Wady obejmują:

1. Animacja klatka po klatce jest trudna do zmodyfikowania. Zwłaszcza jeśli nie jest to dyskretny zestaw obrazów, ale powiązana animacja. Wszystkie ramki muszą zostać zmodyfikowane.
2. Animacja klatka po klatce zajmuje dość dużo miejsca, ponieważ musisz przechowywać informacje o każdej klatce.

Podstawowe operacje z personelem:

• Wstaw pustą klatkę kluczową - Wstaw -\u003e Pusta klatka kluczowa, .
• Klatka kluczowa powtarzająca zawartość poprzedniej - Wstaw -\u003e Klatka kluczowa, .
• Wyczyść klatkę kluczową - Wstaw -\u003e Wyczyść klatkę kluczową, +.
• Wstaw ramkę zwykłą - Wstaw ramkę, .
• Usuń ramkę - Wstaw -\u003e Usuń ramki, +.

Podstawowe operacje z walcem:

• Oglądanie wideo - Kontrola, film testowy.
• Zmiana wysokości i szerokości filmu - Modify, Movie.
• Konwertuj film Flash do pliku dokumentu HTML, ustawienia publikowania, zakładka HTML.
• Podgląd dokumentu HTML - Plik, Podgląd publikacji.

Stwórzmy wielowarstwowy film z animacją krok po kroku „Flower Life”. I warstwa - ramka, II warstwa - doniczka, III warstwa - kwiat. Możesz przedstawić trzecią warstwę w trzech warstwach: liść, łodyga, kwiatostan.

Doniczka i rama są zawsze przed naszymi oczami, a kwiat rośnie i blaknie w 25 kluczowych klatkach. W warstwie „kwiatek” każda klatka różni się od poprzedniej, ale stan kwiatka można zmieniać po jednej klatce.

Film jest publikowany za pomocą opcji Plik-\u003e Ustawienia publikowania. Na karcie Formaty zaznaczone są opcje publikowania, możesz wybrać kilka, na odpowiednich kartach ustaw opcje wybranej opcji publikowania, a następnie kliknij przycisk Publikuj. W tym przypadku utworzone pliki są zapisywane w tym samym folderze, co oryginalny plik z rozszerzeniem .fla. W naszym przykładzie opcja pliku animowanego Gif jest wybrana do publikacji, tak jak we wszystkich kolejnych przykładach.

Spróbuj wykonać drugie zadanie samodzielnie, korzystając z poniższego algorytmu. Spowoduje to utworzenie animacji „Poruszający się samochód”:

• utwórz warstwę „Krajobraz”;
• wykonaj polecenie Plik / Importuj i zaimportuj obraz z obrazem poziomym lub stwórz „asfaltowe” tło;
• zaznacz 30 klatkę na linijce i naciśnij klawisz F5. utwórz łańcuch zduplikowanych ramek dla krajobrazu;
• utwórz nową warstwę „Auto”;
• narysuj samochód bez kół w pierwszej klatce kluczowej;
• pogrupuj narysowany samochód i naciśnij klawisz F8, aby utworzyć próbkę biblioteki - klip samochodowy;
• przesuń samochód, wybierz drugą ramkę i naciśnij F6;
• będziemy przesuwać samochód i tworzyć nowe klatki kluczowe, aż samochód zniknie poza obszarem roboczym;
• utwórz nową warstwę i nazwij ją „Wheel1”;
• narysuj koło w pierwszej ramce i utwórz z niego przykładowe koło z biblioteki;
• utwórz nową klatkę kluczową i przesuń koło za poruszający się samochód itp. we wszystkich innych ramach, obracając koło pod niewielkim kątem;
• zablokuj warstwę „Wheel1” i skopiuj całą wynikową sekwencję klatek do bufora;
• utwórz nową warstwę i nazwij ją „Wheel2”;
• wybierz pierwszą klatkę i skopiuj całą sekwencję ramek z bufora;
• aby zapętlić widok, naciśnij +.

Jako kolejne niezależne zadanie możesz zaproponować stworzenie animacji krok po kroku „Wypalanie zapałki”:

We Flashu są dwie opcje tworzenia obrazów pośrednich - animacja ruchu (animacja budowania oparta na modyfikacji postaci), animacja kształtu (animacja budowania oparta na zmianie kształtu). Metody te radykalnie się różnią.

Animacja ruchu

Dzięki tej metodzie animacji ustalane jest położenie początkowe, kolor, rozmiar, orientacja i parametry końcowe, a sam program wykonuje ten ruch. Dzięki tej metodzie animacji Flash automatycznie tworzy klatki pośrednie między określonymi klatkami kluczowymi. Oznacza to, że rysujesz obiekt, a następnie wprowadzasz zmiany w innej klatce, o czym będziemy mówić poniżej, i poproś Flasha o obliczenie klatek, które znajdują się między tymi dwiema klatkami kluczowymi. Wykonuje swoją pracę i uzyskujesz płynną animację.

Szybkość i płynność animacji zależy od liczby klatek przydzielonych do ruchu i szybkości filmu Flash (filmu). Szybkość filmu można zmienić w następujący sposób: Modyfikuj-\u003e Film ..., + - tam parametr Frame Rate ustawia liczbę klatek na sekundę. W przypadku animacji wysokiej jakości prędkość powinna wynosić co najmniej 25-30 klatek na sekundę. Gładkość i czas trwania zależy od liczby klatek przydzielonych do animacji (jej fragmentu).

Rozważmy animację z konstrukcją klatek pośrednich (ruch z klatką pośrednią). Jest to najczęściej używana technika animacji we Flashu. W tym przypadku animacja opiera się na modyfikacji symboli tj. obiekt animacji jest symbolem. Podobnie jak w przypadku animacji animacji kształtu, dla każdego obiektu potrzebna jest jedna warstwa. Na tej warstwie powinien znajdować się jeden symbol, za pomocą którego nastąpią wszystkie zmiany.

Podczas korzystania z animacji ruchu modyfikowane są następujące parametry:

1. rozmiar (zarówno proporcjonalny, jak i nieproporcjonalny - osobno wysokość i szerokość);
2. skłonić;
3. lokalizacja;
4. kąt obrotu;
5. efekty kolorystyczne;
6. możesz użyć warstw pomocniczych do zdefiniowania ścieżki obiektu.

Istnieje kilka sposobów włączenia animacji ruchu (i niestety jest tylko jeden sposób, aby je wyłączyć). Aby włączyć animację ruchu, należy aktywować początkową klatkę przejścia, a następnie, naciskając prawy przycisk myszy, wybrać opcję Utwórz animację ruchu w menu kontekstowym (można to również zrobić, wybierając opcję Wstaw-\u003e Utwórz animację ruchu). Uniwersalnym sposobem włączania / wyłączania animacji ruchu jest użycie panelu Klatka i wybranie opcji Ruch w polu Animacja. Możesz tam również kontrolować parametry animacji:

• Łagodzenie - odwrotne przyspieszenie wykładnicze, działa dokładnie tak samo, jak w przypadku animacji kształtu.
• Rotate pozwala kontrolować rotację. Auto - Flash automatycznie próbuje określić liczbę pętli. CW (zgodnie z ruchem wskazówek zegara) i CCW (przeciwnie do ruchu wskazówek zegara). W takim przypadku obok pola po prawej stronie możliwe staje się wprowadzenie liczby obrotów. Można używać tylko wartości całkowitych. Możesz wyłączyć rotację, wybierając opcję Brak.
• Orient to path - obraca znak zgodnie z linią prowadzącą. Przyciągnij symbol do tego przewodnika.

W przypadkach, gdy liczba klatek sceny głównej nie jest wielokrotnością liczby klatek symbolu, pole wyboru Synchronizuj umożliwia synchronizację obu animacji.

Nazywane są warstwy zawierające krzywą, wzdłuż której ma się poruszać obiekt warstwy pomocnicze (warstwy prowadzące) (tj. zawierają ścieżkę do obiektu). Aby dodać warstwę pomocniczą, musisz wybrać warstwę, na której znajduje się twój symbol; następnie naciśnij prawy przycisk myszy i wybierz Dodaj przewodnik z menu kontekstowego. To sprawia, że \u200b\u200boryginalna warstwa jest warstwą prowadzoną. Nie jest to jedyny sposób tworzenia warstwy pomocniczej. Każdą warstwę można utworzyć jako prowadnicę, określając ją we właściwościach lub prowadząc, przeciągając żądaną warstwę myszą, tak aby znajdowała się pod prowadnicą.

Następnie musisz narysować trajektorię ruchu. Ścieżka może być dowolną krzywą, która nie jest regionem wypełnienia. Wszystko! Warstwa kontrolna jest gotowa. Możesz zabronić edycji, aby była wygodniejsza w pracy, a później całkowicie niewidoczna.

Teraz, aby użyć tej warstwy, musisz wziąć symbol centralnego punktu (to takie małe kółko) i przeciągnąć go na ścieżkę. Poczujesz, kiedy symbol „zaczepi się” na nim i zobaczysz, jak się po nim przesunie.

Wtedy wszystko przebiega zgodnie ze znanym scenariuszem - klatki kluczowe, włącz animację ruchu ... Jeśli chcesz, aby obiekt obracał się zgodnie z trajektorią, a nie tylko poruszał się po niej, to w panelu Ramka musisz zaznaczyć pole wyboru Zorientuj do ścieżki.

Animacja ruchu umożliwia stosowanie różnych efektów kolorystycznych do całego symbolu. Tej funkcji brakuje w animacji kształtu. Aby zastosować efekt do symbolu, należy wybrać ten symbol, a następnie w panelu efektów (Windows -\u003e Panele -\u003e Efekty) wybrać żądany efekt, ustawiając jasność, przesunięcie koloru, odcień.

Stwórz bardzo prosty przykład animacji piłki poruszającej się po okręgu, korzystając z poniższego algorytmu:

• narysuj okrąg w pierwszej klatce i wypełnij go radialnym wypełnieniem gradientowym;
• pogrupuj rysunek;
• zaznacz go narzędziem Transformator i przesuń środek obrotu na pewną odległość;
• przejdź do ramki 30, naciśnij czyli zróbmy to kopię pierwszej klatki;
• wróć do pierwszej klatki i otwórz panel Właściwości i wybierz Ruch na liście Animacja;
• na dodatkowej liście Obróć wybierz wymuszony obrót w prawo (CW) lub przeciwnie do ruchu wskazówek zegara (CCW).

Kolejny przykład jest trochę bardziej skomplikowany - to tworzenie animacji ruchu liter tekstu:

• używając narzędzia Tekst, utwórz blok tekstu;
• wybierz napisane słowo i podziel je na oddzielne litery (Modifi / Break Apart);
• oddzielić litery na osobnych warstwach Modyfikuj / Rozłóż na warstwy;
• przekonwertować każdą literę w każdej warstwie na rysunek, powtórz polecenie Modyfikuj / Rozłącz. Wybierz każdą literę i pogrupuj ją;
• na linijce ramki w pewnej odległości utwórz kopie pierwszej klatki, w tym celu naciskamy ;
• z kolei dobierzemy pierwsze ramki dla każdej litery, przeniesiemy ją poza obszar roboczy, zmieniając proporcje litery, środek obrotu itp .;
• w panelu Właściwości na liście Animacja wybierz opcję Ruch. Na dodatkowej liście Obróć wybierz jeden obrót zgodnie z ruchem wskazówek zegara;
• zobaczmy animację w rzutni + .

Animacja kształtu to płynna zmiana obiektu animacji na scenie. Przez obiekt rozumiemy tutaj nie grupę ani blok tekstu, jak w przypadku animacji ruchu, ale zwykły wielokolorowy rysunek, który może składać się z kilku fragmentów. Co więcej, ilość takich fragmentów na początku i na końcu animacji może być różna.

W procesie animacji kształtu rysunek może rozpaść się na kilka niezależnych fragmentów, z których każdy stopniowo przekształca się w coś nieoczekiwanego. Lub odwrotnie, kilka niezależnych obrazów znajdujących się w obszarze roboczym, w trakcie animacji, stopniowo zmieniając swój wygląd (rozmiar, kolor, kształt), staje się częścią jednego obrazu. Powiedzmy, że chcesz, aby kwadrat płynnie zamienił się w okrąg lub sylwetka królika płynnie wlewała się w sylwetkę wilka. W takich przypadkach używana jest animacja kształtu.

Jak zwykle ustawiasz dwie klatki kluczowe w pewnej odległości od siebie. Ta opcja animacji ma sztywne ograniczenie: animacja musi zajmować oddzielną warstwę i być pojedynczym narysowanym kształtem (nie może być żadnych grup ani symboli). Po dwóch klatkach kluczowych musisz aktywować pierwszą (po prostu do niej przejść) i wybrać Frame w ramce (Windows-\u003e Panels-\u003e Frame, +) na liście animacji ciąg znaków Shape. Klatki na osi czasu powinny zmienić kolor na zielonkawy, a strzałka powinna rozciągać się od pierwszej do drugiej. Rezultatem jest seria ramek pośrednich, które będą odzwierciedlać przejście od pierwszej cyfry do drugiej.

Korzystając z animacji kształtu, należy ustawić dwa parametry:

• Łagodzenie określa odwrotne przyspieszenie wykładnicze. Wartość tego parametru może wahać się od - 100 do + 100. Oznacza to, że jeśli określisz ujemne łagodzenie napięcia, to ruch będzie się odbywał z dodatnim przyspieszeniem, prędkość wzrośnie. I odwrotnie, jeśli łagodzenie jest pozytywne, animacja zwolni;
• Parametr Blend określa algorytm przejścia:
  • Dystrybucja - wygładza przejście z jednego kształtu do drugiego.
  • Kątowy - stara się zachować proporcje rogów.

Ostatnim narzędziem w animacji animacji kształtu są wskazówki kształtu (dosłownie wskazówki dotyczące kształtów). To są punkty, dzięki którym pomagasz Flashowi poprawnie wykonać przejście. Nie da się bez nich obejść w przypadku skomplikowanych kształtów. Są bardzo łatwe w użyciu. W pierwszej klatce kluczowej (od której zaczyna się animacja) dodajesz punkt kontrolny (Modyfikuj-\u003e Przekształć-\u003e Dodaj wskazówkę dotyczącą kształtu,

Możesz usunąć wszystkie punkty za pomocą Modyfikuj-\u003e Przekształć-\u003e Usuń wszystkie wskazówki. Aby usunąć pojedynczy punkt, możesz kliknąć go prawym przyciskiem myszy i wybrać Usuń wskazówkę z menu kontekstowego. Ponieważ punkty kontrolne są oznaczone literami alfabetu łacińskiego, może być ich maksymalnie 27.

Istnieje wiele opcji przejścia z jednej formy do drugiej, więc animacja może podążać ścieżką, która w mniejszym stopniu Ci odpowiada. Nawet przekształcenie tak prostej figury geometrycznej, jak prostokąt położony pionowo w ten sam prostokąt, ale położony poziomo, może nastąpić na różne sposoby. Na przykład w procesie takiej transformacji figura może mieć kształt owalu lub nawet koła. Aby kontrolować proces animacji, należy spróbować uprościć animację, dzieląc rysunki na kilka niezależnych fragmentów znajdujących się na różnych warstwach, ale jednocześnie uczestniczących w animacji. Bardziej skoordynowaną techniką jest użycie wspomnianych powyżej znaków kształtu.

Jeśli chcesz wyłączyć animację kształtu, w panelu Klatka wybierz opcję Animacja: brak.

Podczas korzystania z animacji kształtu można modyfikować następujące parametry kształtu:

• formularz;
• lokalizacja;
• rozmiar (dowolne proporcje);
• kolor;
• kąt obrotu.

Poniżej znajduje się przykład tej metody animacji „zamieniania” słonia w owcę iz powrotem.

Spróbuj ożywić kształt „przemiany” węża w orła iz powrotem:

Warstwa przewodnika i warstwa ścieżek

Często w procesie animacji konieczne jest, aby obiekt nie poruszał się po linii prostej, ale po zadanej trajektorii. W tym przypadku animacja jest tworzona w zwykły sposób, a trajektoria rysowana jest na osobnej warstwie. Warstwa ścieżek może obsługiwać kilka różnych animacji, z których każda znajduje się na osobnej warstwie, ale wszystkie te warstwy z animacją muszą znajdować się pod warstwą ścieżek. Możesz użyć różnych narzędzi do narysowania ścieżki: Ołówek, Pędzel, Pióro, Elipsa lub Prostokąt. Aby związać poruszający się obiekt z tą trajektorią, wystarczy przenieść ten element na trajektorię w początkowych i końcowych klatkach kluczowych animacji. W takim przypadku w panelu Właściwości należy dostosować parametry animacji, tak aby pole wyboru Przyciągaj było zaznaczone. Aby to zrobić, musisz najpierw zaznaczyć pierwszą klatkę kluczową animacji, przydatne jest również wybranie polecenia Widok / Przyciągaj do obiektów.

Na przykład stwórzmy film „Motyl lecący nad kwiatem” zgodnie z poniższym algorytmem:

• zaimportuj rysunek kwiatka do pierwszej warstwy;
• w pierwszej klatce kluczowej drugiej warstwy narysuj motyla (motyla można uzyskać, wektoryzując jego zdjęcie rastrowe Modify / Trace Bitmap);
• wybierz motyla, kliknij tworząc przykład biblioteki;
• pozostając w drugiej warstwie przejdź np. do klatki 48 i wciśnij tworząc klatkę kluczową, która kończy animację.
• w nim przeniesiemy motyla na drugą stronę pola roboczego;
• wybierz 60. ramkę i naciśnij tworząc łańcuch zduplikowanych ramek;
• wybierz pierwszą klatkę i w panelu Właściwości na liście Animacja wybierz Ruch;
• zaznacz warstwę z animacją i wybierz polecenie Dodaj prowadnicę ruchu z menu kontekstowego;
• narysuj na obszarze roboczym tej warstwy krzywą ruchu motyla, której początek i koniec znajdują się obok siebie;
• wybierz pierwszą klatkę kluczową animacji, umieść motyla na jednym końcu ścieżki;
• następnie wybierz inną klatkę kluczową animacji, umieść motyla na drugim końcu ścieżki;
• wybierz pierwszą klatkę kluczową animacji, otwórz panel Właściwości i zaznacz pole wyboru Zorientuj do ścieżki;
• stwórzmy efekt trzepotania skrzydłami motyla podczas lotu. Otwieranie biblioteki próbek + ;
• kliknij dwukrotnie obraz motyla w rzutni;
• utwórz nową klatkę kluczową, na przykład trzecią, tak aby ruch skrzydeł motyla był naturalny;
• w nowej klatce kluczowej najpierw podnieś jedno skrzydło motyla, a potem drugie;
• wróćmy do głównej sceny i uruchommy podgląd.

Warstwa maskująca i maska \u200b\u200bwarstwy

Warstwa ta ma na celu zakrycie i uczynienie niewidocznej części obrazu znajdującego się bezpośrednio pod nią. Jeśli maska \u200b\u200bwarstwy nie zawiera żadnego obrazu, wówczas całkowicie zakrywa (maskuje) warstwę poniżej i związaną z nią warstwę, która nazywa się warstwa maskująca... Jeśli coś jest narysowane w masce warstwy, każde wypełnienie tego rysunku staje się przezroczystą częścią warstwy. Jeśli animujesz obraz utworzony w masce warstwy, przezroczysta część maski przesunie się po ekranie. Maska warstwy może maskować wiele warstw. Możesz uczynić zwykłą warstwę maskowalną, zmieniając jej pozycję w stosie warstw. Wystarczy przesunąć myszką zwykłą warstwę pod maskę warstwy. W tym przypadku animacja może być dwojakiego rodzaju. Lub animacja obiektów umieszczonych na zamaskowanych warstwach. Lub animacja obrazu na masce warstwy.

Przykład tworzenia efektu zanikania na ekranie litera po literze. W tym celu animujemy ruch obrazu w warstwie maski przy użyciu następującego algorytmu:

• w pierwszej klatce warstwy wstaw statyczny blok tekstu i napisz słowo;
• wybierz 40. ramkę i naciśnij , określając w ten sposób długość przyszłej animacji;
• utwórz nową warstwę i uczyń ją maską warstwy (zaznacz warstwę i wybierz element Maska z menu kontekstowego) i odblokuj ją;
• w pierwszej ramce po lewej stronie słowa narysuj mały prostokąt i pogrupuj go;
• pozostając w masce warstwy, wybierz 40. klatkę i kliknij ;
• pozostając w 40. ramce, używając narzędzia Transformer, rozciągnij narysowany prostokąt tak, aby obejmował całe słowo;
• wybierz pierwszą klatkę i otwórz panel Właściwości, wybierz Ruch;
• zacznijmy animację.

Poniżej znajduje się plik animowany gif, w którym wykorzystano animację kształtu liter tekstu „Szczęśliwego Nowego Roku”, a następnie tekst, który się pojawi, jest „wymazywany” za pomocą maski warstwy, prostokąta z wypełnieniem gradientowym, dzięki czemu uzyskuje się efekt „opalizowania” liter. Tło to kawałek grafiki bitmapowej.

Poniższy przykład ilustruje słowo „rośnie” z punktu, w którym importowana grafika bitmapowa jest używana jako warstwa maski, a animacja jest tworzona w masce warstwy, w której słowo wyrasta z punktu, a następnie ponownie się zmniejsza. W tym przykładzie użyto również animacji kształtu.

Tworzenie przycisków

Przycisk to specjalny rodzaj symbolu, który ma reagować na działania użytkownika, na przykład naciśnięcie samego przycisku, jego odpowiednika na klawiaturze lub aktywnego obszaru w filmie. Oś czasu przycisku zawiera następujące cztery klatki:

• Up - normalny stan przycisku;
• Over - kiedy kursor myszy znajduje się nad przyciskiem;
• Dół - gdy kursor znajduje się nad przyciskiem i naciśnięty jest przycisk myszy;
• Hit - stan normalny przycisku zawierającego łącze, które użytkownik już odwiedził;

Jeśli potrzebujesz utworzyć kilka identycznych przycisków, to w tym przypadku wystarczy utworzyć tylko jeden przykładowy przycisk. A następnie zastosuj na nim niezbędne napisy, zmień kolor lub rozmiar. Jeśli przycisk ma zawierać animowane obiekty, musisz wcześniej utworzyć klipy filmowe, a następnie po prostu umieścić je w odpowiedniej ramce przycisku.

Podstawowe rodzaje działań:

1. Idź do - przejście do danej sceny lub klatki;
2. Odtwórz - uruchom zatrzymany film;
3. Stop - zatrzymaj film;
4. Toggle High Quality - przełącznik jakości wyświetlania filmów (tryb antyaliasingu);
5. Spot All Sounds - wycisz dźwięk;
6. Uzyskaj adres URL - przejdź pod wskazany adres;
7. FC Command - transfer odtwarzania filmów do innych aplikacji;
8. Load / Unload Movie - najprostszym sposobem użycia tego polecenia jest załadowanie filmu z określonego adresu;
9. Tell Target - wybór filmu do dalszego zarządzania (wyznaczenie celu);
10. If Frame Is Loaded - wykonanie polecenia, jeśli określona ramka jest załadowana;
11. Jeśli - sprawdź prawdę;
12. Pętla - cykl;
13. Call - call;
14. Set Property - ustawianie właściwości filmu;
15. Set Variable - wartość zmiennej;
16. Duplicate / Remove Movie Clip - utwórz lub usuń instancję klipu;
17. Przeciągnij klip filmowy - włącza tryb przeciągania klipu;
18. Śledzenie - wyświetla komunikaty podczas wykonywania czynności;
19. Komentarz - komentarze;

Algorytm tworzenia przycisku (alg1):

• utwórz szablon przycisku;
• wybierz przycisk za pomocą narzędzia i przekonwertuj go na symbol (Wstaw \\ Konwertuj na symbol ...). Podaj nazwę (na przykład, ale), wybierając typ przycisku;
• przejść do trybu edycji symbolu poprzez dwukrotne kliknięcie na obrazku symbolu „Przycisk”;
• przejdź do klatki Over na osi czasu, wstaw pustą ramkę Insert \\ Keyframe, edytuj przycisk, zmieniając jego kolor;
• przejdź do ramki Down, wstaw pustą ramkę Insert \\ Keyframe, edytuj przycisk, zmieniając jego kolor;
• przejdź do ramki Hit, wstaw pustą ramkę Insert \\ Keyframe, edytuj przycisk;
• wyjdź z trybu edycji symboli (w lewym górnym rogu filmu przejdź do Scena1).

Algorytm tworzenia przycisku umożliwiającego przejście do określonej strony internetowej:

• utwórz przycisk (alg1);
• ustaw akcję, w tym celu wybierz Window \\ Actions. Z menu rozwijanego Akcje podstawowe wybierz akcję Pobierz adres URL, klikając ją dwukrotnie w oknie lewego panelu. Klikając wybraną akcję w prawym oknie, określ jej parametry (na przykład URL: http: \\\\ www.ya.ru);
• przetestuj wynikowy Control \\ Test Movie.

Algorytm tworzenia przycisku zatrzymującego klip:

• utwórz przycisk (alg1);
• dodaj nową warstwę;
• stworzyć w nim animację;
• zbuduj w nim obraz (na przykład okrąg);
• przekonwertować obraz na symbol (Wstaw \\ Konwertuj na symbol ...);
• zaznacz klatkę 30 w obu warstwach i wstaw klatkę kluczową Insert \\ Keyframe;
• przenieść obraz symbolu w ramce 30 w inne miejsce;
• cofnij się o 1 klatkę i wybierz Wstaw \\ Utwórz animację ruchu;
• wybierz warstwę z obrazem przycisku i ustaw dla niej Window \\ Actions. Wybierz akcję Stop;
• wyświetl wynikowy klip Control \\ Play.

Jako przykład stwórzmy przycisk z wbudowaną animacją przy użyciu następującego algorytmu:

• naciśnij skrót klawiaturowy + , utwórz nową próbkę typu Button i ustaw nazwę knopka;
• kliknij OK i przejdź do edytora próbek;
• w pierwszej ramce (Góra) obszaru roboczego narysuj owal i wypełnij go radialnym wypełnieniem gradientowym;
• nacisnąć klawisz trzykrotnie , spowoduje to skopiowanie zawartości pierwszej ramki do wszystkich pozostałych;
• wybierz drugą ramkę (Over) i nieznacznie powiększ obraz znajdującego się w niej przycisku, obrysuj go żółtym konturem;
• zaimportuj plik z animacją z biblioteki (na przykład biegająca osoba lub dowolny inny klip);
• nałóż ten klip na obraz przycisku, wyrównaj wszystkie skale;
• wybierz trzecią ramkę (W dół) i nieznacznie zmniejsz znajdujący się w niej obraz przycisku;
• wróć do głównej sceny, otwórz bibliotekę + jeśli jest zamknięty, wyodrębnij utworzony przycisk.

Ten obiekt został opublikowany w trybie HTML ze wskazaniem odpowiedniego pliku swf.

Skrypty w języku ActionScript

Utwórzmy przyciski, które kontrolują działanie pokazu slajdów:

• przygotować kilka obrazów bitmapowych (slajdów);
• importowanie nowego filmu;
• na podstawie każdego z nich utwórz próbki biblioteczne ( ) typu Button (przycisk), tworząc próbkę usuniemy obrazek z pola roboczego;
• wywołaj pierwszą warstwę filmu Przyciski, wybierz pierwszą klatkę i umieść w niej utworzone przyciski tak, aby nie przeszkadzały w oglądaniu;
• utwórz warstwę do umieszczania slajdów Obrazy;
• w nim za pomocą klucza utwórz puste klatki kluczowe, tyle ile slajdów;
• wybierz pierwszą pustą klatkę kluczową i umieść slajd biblioteki ( + - otwarcie biblioteki);
• dołączmy skrypt do tej ramki. Aby to zrobić, pozostając w pierwszej klatce, otwórz panel Operacje i kliknij dwukrotnie skrypt Stop () w folderze Actions / Movie Control, co spowoduje zatrzymanie pokazu slajdów czekającego na polecenie użytkownika;
• powtarzamy ostatnie dwa kroki algorytmu dla pozostałych pustych klatek kluczowych;
• nadamy ramce nazwę zaczynającą się od pierwszego wstawionego slajdu i końcem ostatniego (nazwy są ustawiane w panelu Właściwości jako etykieta ramki);
• powrót do warstwy przycisków, w której znajdują się miniatury naszych slajdów;
• dołącz skrypt do każdego przycisku, który wysyła program do ramki, w której znajduje się odpowiedni slajd;
• aby to zrobić, wybierz przycisk i wprowadź następujący skrypt za pomocą panelu Operacje:

On (release) (

GotoAndStop (k); - liczba w nawiasach oznacza numer odpowiedniej ramki.

• w pierwszej klatce warstwy z przyciskami można również umieścić alternatywne przyciski wyboru slajdów. W naszym przykładzie są to „Początek”, „Do przodu”, „Wstecz” i „Koniec”;
• wybierz pierwszy alternatywny przycisk Rozpocznij i dołącz do niego skrypt:

Włącz (naciśnij) (

GotoAndStop ("begin)";

• połącz następujący skrypt z przyciskiem Poprzedni:

Włącz (naciśnij) (

Root.prevFrame ();

• połącz następujący skrypt z przyciskiem Dalej:

Włącz (naciśnij) (

Root.nextFrame ();

• do końca przycisku (End), który ustawia przejście do ostatniej klatki, dołączamy następujący skrypt:

Włącz (naciśnij) (

GotoAndStop ("koniec");

Poniżej efekt naszej pracy:

Podczas tworzenia animacji w języku ActionScript często używana jest pętla z trzema klatkami. W pierwszej klatce (przygotowanie) zapisywane są dane początkowe, w drugiej umieszczane są elementy korpusu pętli, aw trzeciej ramce napisane jest polecenie powrotu do drugiej klatki gotoAndPlay (2);. Praca cyklu trójklatkowego polega na naprzemiennym oglądaniu klatek uczestniczących w cyklu, aż do spełnienia warunku wyjścia z cyklu.

Rozważmy użycie cyklu trzech klatek na przykładzie tworzenia ruchu maski. Nasz film będzie miał trzy warstwy:

• Zaimportuj mapę bitową do pierwszej warstwy, którą nazwiemy Masked. Na jego podstawie stworzymy próbkę biblioteczną typu „clip”. Usuńmy go z obszaru roboczego i umieśćmy kopię tego klipu na obszarze roboczym.
• W panelu Właściwości nazwijmy go Zamaskowany.
• Na drugiej warstwie umieść wystąpienie klipu, który jest maską oryginalnego kształtu. Nazwą drugiej warstwy i nazwą tej instancji będzie Maska.
• W trzeciej warstwie, którą nazwiemy Akcjami, utwórz pętlę z trzema klatkami.
• W pierwszej klatce używamy metody setMask obiektu MovieClip, która pozwala zamaskować dowolny klip innym klipem na innej warstwie. Format metody:

<маскируемый клип>.setMask (<клип-маска>)

• Otwórz panel Operacje i dołącz jednowierszowy skrypt Masked.setMask (maska); do pierwszej klatki trzeciej warstwy.
• Korzystając z właściwości (Priperties) obiektu MovieClip, dodaj obrót maski Mask._rotation + \u003d 2; do drugiej pustej klatki kluczowej. Możesz także dodać współrzędne zmiany rozmiaru i maski. Na przykład maska._x - \u003d 1; maska._y + \u003d 1; maska.wysokość - \u003d 1; maska._width + \u003d 1;
• Dołącz zwykły skrypt gotoAndPlay (2) do trzeciej klatki;

Za każdym razem, gdy uzyskuje się dostęp do drugiej klatki, klip maski obraca się o 2 °. Okno w kształcie klipu Mask obraca się przed oczami użytkownika, przez które widoczna jest część klipu Masked.

Nauczmy się, jak kontrolować kolor instancji klipu bibliotecznego. Stwórzmy film, w którym gwiazdy obracają się w różnych kierunkach na tle wschodzącego słońca, zmieniając swój kolor.

Obiekt Color jest tworzony przy użyciu konstruktora ActionScript i ma następujący format:

<имя экземпляра объекта Color> \u003d nowy kolor (<имя экземпляра клипа>)

• Wybierz pierwszą klatkę kluczową i zaimportuj do niej mapę bitową Wschodzącego Słońca.
• Utwórzmy drugą warstwę i narysujmy trzy dowolne gwiazdy w pierwszej klatce.
• Będziemy je wybierać jeden po drugim i tworzyć klipy o nazwach Star, Star1, Star2.
• Nazwijmy wystąpienie pierwszego klipu St, drugiego - St1, a trzeciego - St2.
• Dołączmy nasz skrypt do każdej próbki. Różnica w skryptach polega na tym, że każda instancja klipu ma przypisany inny kolor początkowy, inny kąt obrotu i inne warunki zmiany bieżącego koloru w instrukcjach if.
• Kolor jest przenoszony do instancji klipu, na przykład dla Star1, za pomocą takiej linii w skrypcie Star1Color.setTransform (colorTransform);.
• Po kolei wybierzemy klipy ze skryptem, kliknij i utwórz nowe klipy, na przykład o nazwach ClipStar, ClipStar1, ClipStar2.
• W obszarze roboczym można wyświetlić kilka próbek każdego klipu.
• Przykładowy skrypt dla Star1 jest pokazany poniżej:

OnClipEvent (ładowanie) (

Star1Color \u003d new Color (this);

ColorTransform \u003d (rb: 0, gb: 255, bb: 255);

G \u003d 255;

B \u003d 255;

Krok \u003d 5;

OnClipEvent (enterFrame) (

G - \u003d krok;

ColorTransform.gb \u003d g;

Jeśli (r\u003e \u003d 0 && b \u003d\u003d 255 && g \u003d\u003d 0) (

R + \u003d krok;

ColorTransform.rb \u003d r;

Jeśli (g \u003d\u003d 0 && r \u003d\u003d 255 && b

B - \u003d krok;

ColorTransform.bb \u003d b;

Jeśli (b \u003d\u003d 0 && r \u003d\u003d 255 && g\u003e \u003d 0) (

G + \u003d krok;

ColorTransform.gb \u003d g;

Jeśli (g \u003d\u003d 255 && b \u003d\u003d 0 && r

R - \u003d krok;

ColorTransform.rb \u003d r;

Jeśli (r \u003d\u003d 0 && g \u003d\u003d 255 && b\u003e \u003d 0) (

B + \u003d krok;

ColorTransform.bb \u003d b;

Star1Color.setTransform (colorTransform);

This._rotation - \u003d 3;

Przyciski i menu to jedne z najważniejszych części witryny internetowej i każdej innej aplikacji, w której ważna jest interaktywność. Stwórzmy menu Flash.

• Narysujmy przycisk o nazwie „Przykłady”.
• Naciśnij klawisz i utwórz przykładową bibliotekę typu Button o nazwie primery.
• Przejdźmy do trybu edycji i zmieńmy wypełnienie przycisku i kolor tekstu dla stanów Over i Down, w każdej z tych ramek otrzymujemy naciskając klawisz .
• W ramce Hit, która nie zostanie odzwierciedlona w trybie animacji, usuń obraz przycisku i narysuj wypełniony prostokąt nieco większy niż przycisk.
• Zamień tekst „Przykłady” na symbol biblioteczny typu Grafika. Aby to zrobić, przejdź do stanu przycisku W górę, zaznacz tekst i naciśnij klawisz ... Nazwijmy przykład biblioteki „przykładami”. W ten sposób zaimplementowaliśmy symbol innego typu - Grafika - w symbolu przycisku.
• Powtórz powyższą procedurę dla stanów przycisków Ponad i W dół, tworząc przykładowe biblioteki przykładów „przykłady1” i „przykłady2” typu Grafika.
• Kliknij prawym przyciskiem myszy próbkę biblioteki podstawowej i wybierz duplikat. Zapisz kopię jako wiadomość. To będzie przykład biblioteki dla przyszłego przycisku News.
• Podobnie otrzymujemy duplikaty próbek „przykłady”, „przykłady1” i „przykłady2”. Nazwijmy je odpowiednio „news”, „news1” i „news2”.
• Edytujmy treść otrzymanych próbek, zmieniając tekst „przykłady” na tekst „aktualności” o odpowiednich kolorach.
• Wejdźmy w tryb edycji przykładowych wiadomości z biblioteki. Wybierzmy stan przycisku W górę, aw bibliotece znajdują się przykładowe „przykłady”.
• Rzućmy okiem na panel Właściwości. Wciśnij przycisk Zamień (zamień) iw otwartym oknie dialogowym wybierz przykładowe "nowości", wciśnij OK. W ten sposób zmienimy nazwę „Przykłady” na nazwę „Wiadomości” dla stanu przycisku W górę.
• Powtórz to dla pozostałych dwóch stanów przycisku przykładowego biblioteki grup dyskusyjnych. W tym przypadku zamienimy „przykłady1” na „wiadomości1”, a „przykłady2” na „wiadomości2”. Takie manipulacje prowadzą do uzyskania dokładnie tych samych przycisków, ale o innej nazwie.
• Wyjmijmy z biblioteki egzemplarz przycisku „News” do pola roboczego.
• Podobnie otrzymujemy trzeci przycisk - „Kontakty”.
• Włącz panel Wyrównaj. Wybierz wszystkie trzy przyciski i wybierz dla nich żądaną lokalizację, na przykład na tym samym poziomie w równych odległościach od siebie.
• Otwórzmy panel Akcje i dołączmy do każdego przycisku skrypt, który określa, która strona internetowa zostanie załadowana po kliknięciu na niej myszą. Możesz również określić, w którym oknie zostanie załadowana wybrana strona, na przykład w bieżącym oknie przeglądarki (_self), w nowym oknie (_blank) itp. Dołączmy następujący skrypt do pierwszego przycisku:

on (release) (getURL ("1.html", "_self");)

• Powiązamy skrypty z pozostałymi przyciskami wskazującymi na odpowiednie strony internetowe. W poniższym menu Flash powiązanie strony internetowej nie jest zaimplementowane ze względu na wygodę przeglądania strony.

Jeśli jesteś początkującym webmasterem i zdecydujesz się ożywić strony swojej witryny za pomocą Lampa błyskowa (Lampa błyskowa) animacje lub gotowe filmy Flash, to informacje na tej stronie są dla Ciebie.

Technologia Flash (tłumaczona z angielskiego jako „flash”) rozpoczęła swój rozwój w 1996 roku i dziś nawet początkujący webmaster zna takie terminy jak:

• lampa błyskowa transparent ;
• Spłukać menu ;
• Spłukać ekran powitalny ;
• elementy interaktywne, takie jak zegar wykonany na fleszu .
• Piękny chmura tagów w

W sieci zaczęły pojawiać się coraz częściej całe strony Flash, w tym czaty, księgi gości, ankiety i fora.
Wraz z nadejściem Lampa błyskowa animacje rozwój strony internetowej podążył w nowym kierunku.
Witryna internetowa wykonana w technologii flash bardzo różni się od jej odpowiedników w formacie HTML. Pierwszą rzeczą, która zawsze przyciąga uwagę użytkownika, są wszelkiego rodzaju ruchome, błyszczące, migoczące, opalizujące elementy strony.

Co potrzebujesz, aby wyświetlić FLASH

Obejrzeć animacje flashlub jakąkolwiek inną zawartość flash, w przeglądarce musi być zainstalowana wtyczka flash, którą można pobrać bezpośrednio ze strony programistów Flash - Macromedia (obecnie część Adobe).
Należy jednak zauważyć, że w przeciwieństwie do Internet Explorer, który może zainstalować wtyczkę flash w trybie automatycznym, inne przeglądarki, takie jak Opera czy FireFox, wymagają osobnej instalacji. Możesz pobrać wszystkie potrzebne programy z oficjalnej strony flashowej - adobe.com.

Skąd wziąć kod źródłowy do stworzenia witryny.

Tworzenie animacji Flash zajmuje dużo czasu, wysiłku i wiedzy. Często zdarza się, że bardzo brakuje jednej rzeczy, a czasem wszystkich naraz. A tutaj tzw źródła flash... Sieć jest pełna darmowych szablonów dla stron FLASH, są też pliki z rozszerzeniem…. .FLA.
Szablony zawierają wiele efektów animacji i pięknych przejść, nie musisz implementować tego czy innego efektu, po prostu pobierz go z szablonu. Ponadto szablony ułatwią Ci tworzenie witryny flash: otwierając szablon i zmieniając lub dodając do niego informacje, otrzymasz niesamowitą witrynę flashową w krótkim czasie i przy minimalnym wysiłku.

Tworzenie i edycja pendrive'ów.

Tworzenie filmów flash musisz wybrać dla siebie program, z którym będziesz pracować z lampą błyskową.
Dziś niekwestionowanym liderem jest produkt firmy Macromedia Adobe Flash Professional CS3... Flash CS3 to branżowy standard tworzenia aplikacji interaktywnych programy multimedialne na każdą platformę. Flash może być używany do tworzenia gier, stron internetowych, prezentacji CD, banerów i kreskówek.

Aby ręcznie wstawić filmy Flash na stronę HTML, używane są dwa tagi jednocześnie -