Praca praktyczna „Tworzenie animacji formularzy we Flashu” Poradnik metodyczny „Nauka tworzenia animacji na lekcjach informatyki. e-szkoła kurs Macromedia Flash mx ii: podstawy tworzenia animacji w programie Macromedia Flash mx moduł iii: animacja typu

Cała praca nad tworzeniem filmu odbywa się za pomocą panelu Oś czasu (Oś czasu), którego obraz pokazano poniżej. Panel Oś czasu podzielony jest na dwie części pionową linią, którą można przesuwać myszką. Prawa część panelu to tzw. „linijka ramowa” – linijka, na której umieszczone są symbole ramek, które wyglądają jak małe prostokąty. Zawartość ramek to statyczne obrazy, które zmieniają się w czasie i pojawiają się na polu roboczym. Numeracja klatek prezentowana jest w górnej części linijki. Pod linią ramki znajduje się „pasek stanu”.

Klatki kluczowe to klatki zawierające statyczne obrazy, które ożywają podczas animacji. Naciśnięcie klawisza powoduje utworzenie nowej klatki kluczowej. Naciśnięcie klawisza powoduje wyświetlenie zduplikowanej klatki po prawej stronie klatki kluczowej. Duplikat ramki- jest to ramka, która nie posiada własnej treści, lecz zawiera jedynie odnośnik do treści klatki kluczowej znajdującej się po jej lewej stronie. Utworzenie zduplikowanej klatki ułatwia pracę nad animacją, eliminując potrzebę rysowania tej samej historii w sąsiednich klatkach. Na linijce klatek pusta klatka kluczowa jest oznaczona pustym kółkiem, jeśli zawiera obiekt graficzny, to jest oznaczona czarnym kółkiem. Ostatnia klatka w łańcuchu zduplikowanych klatek jest oznaczona białym prostokątem.

- główne narzędzie podczas pracy z animacją we Flashu. Wyświetla informacje o warstwach, które klatki są klatkami kluczowymi, a które są generowane przez Flash. Za pomocą osi czasu możesz zrozumieć, które klatki zawierają działania lub znaki. Umożliwia przesuwanie klatek kluczowych i całych fragmentów animacji.

Główne cechy osi czasu:

1. Aby warstwa była aktywna, należy ją zaznaczyć. Możesz rysować i edytować tylko na aktywnej warstwie. Aktywna warstwa zostanie podświetlona na osi czasu, a ikona ołówka wskazuje, że można ją edytować (warstwa 3).
2. Zawartość warstw znajdujących się 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 żądane miejsce na osi czasu.
3. Aby utworzyć nową warstwę, wybierz pozycję na osi czasu dla nowej warstwy i kliknij 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 warstwowy, użyj elementów sterujących warstwami. Kliknięcie w kolumnę pod ikoną kłódki zablokuje możliwość edycji, natomiast kliknięcie w kolumnę pod ikoną oka sprawi, że warstwa stanie się niewidoczna.

Poniżej znajduje się przykład klipu animacyjnego, w którym różne tło (krajobraz) wraz z odpowiadającym mu blokiem tekstu jest umieszczone w różnych warstwach z przesunięciem o 25 klatek. Krajobraz uzyskano poprzez wypełnienie tła bitmapą Mikser kolorów->Bitmapa, a następnie obróbkę za pomocą narzędzia Fill Transformer.

Skala klatek - pole, w którym możesz dodawać i usuwać klatki proste i kluczowe. Jeśli wywołasz menu kontekstowe (prawy przycisk myszy) w dowolnej ramce, wyświetli się lista akcji, które można wykonać. Na skali wyświetlane są informacje o klatkach kluczowych (takie klatki są oznaczone czarnymi kółkami), zawierających akcje (litera „a” nad kółkiem) lub etykietę (czerwona flaga i nazwa etykiety). Kolor wskazuje także na rodzaj oprawek. Kolor szary to klatki dokładnie powtarzające klatkę kluczową (klatkę kluczową). Niebieskawe lub zielonkawe podświetlenie wskazuje, że klatki zostały wygenerowane przez Flash. I wreszcie biała lub „pusta” przestrzeń w paski wskazuje, że na tych ramkach nie ma nic.

Przyciski kontroli cieni- są to przyciski, które pozwalają wyświetlić sąsiednie klatki jak przez kalkę, aby zobaczyć różnicę pomiędzy klatkami poprzednimi i kolejnymi. Możesz ustawić głębokość takiego wyświetlania 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 tej samej warstwy. Ponieważ sceny Flash zwykle składają się z kilku warstw, powstałe „wielowarstwowe” klatki mogą zawierać zarówno warstwy wygenerowane, jak i „samodzielnie wykonane”. 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 zmieniać podczas procesu animacji. Ty ustawiasz te klatki kluczowe, a Flash ustawia pomiędzy nimi klatki pośrednie. Istnieją dwa typy klatek pośrednich – klatki oparte na zmianach geometrii (animacja kształtu) lub klatki oparte na zmianach charakteru ( animacja ruchu). I oczywiście ramki mogą być puste, tj. niczego nie zawierają.

Symbole są jednym z kluczowych pojęć we Flashu. Symbolem może być prosty element geometryczny lub ich kombinacja, albo cała animacja (film). Dzięki temu symbole mogą być wykorzystywane jako potężny mechanizm abstrakcji we Flashu. Istnieją trzy rodzaje symboli: animacja (klip filmowy), przycisk (przycisk) i obraz:

1. Obraz (grafika), to znak składający się z pojedynczej ramki. Stąd jego statyczna nazwa. Jeśli symbol jest w rzeczywistości obiektem statycznym (nie animowanym), lepiej zrobić z niego grafikę.
2. Przycisk. Flash ma typ symbolu specjalnie dostosowany do funkcji przycisków. Posiada 4 ramki: Up, Over, Down, Hit, które zawierają następujące stany przycisków:
   • Hit to normalny stan przycisku zawierającego link, który użytkownik już odwiedził.
3. Animacja (klip filmowy) . Jest to najbardziej „kompletny” typ znaku. Może zawierać dowolną liczbę ramek. Znak tego typu można traktować jako obiekt filmowy w języku ActionScript (osadzonego języka Flash).

Symbole można tworzyć od podstaw (Wstaw->Nowy symbol, Ctrl+F8) lub korzystając z bieżącego zaznaczenia, umieszczając je bezpośrednio w symbolu (Wstaw->Konwertuj na symbol, F8). Druga technika jest stosowana znacznie częściej niż pierwsza, ponieważ. nie musisz już pozycjonować symbolu i zmieniać go na żądany rozmiar.

Istnieją dwa zasadniczo różne sposoby animowania czegoś w Macromedia Flash:

1. Narysuj każdą klatkę samodzielnie, używając wyłącznie Flasha do przewijania klatek.
2. Wymuś, aby Flash automatycznie obliczał klatki pośrednie.

Animacja krok po kroku (klatka po klatce).

Jest to animacja złożona w całości z klatek kluczowych. Te. Sam określasz zarówno zawartość klatki, jak i jej „czas trwania” (czyli ile takich statycznych klatek zajmie obraz). Przed narysowaniem kolejnej klatki musisz wstawić 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 obejmują:

1. Animacja klatka po klatce daje w pewnym sensie większą kontrolę nad animacją i jeśli jesteś doświadczonym animatorem, możesz wykorzystać to 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 rysowania każdej klatki.

Wady obejmują:

1. Animacja klatka po klatce jest trudna do modyfikacji. Zwłaszcza jeśli nie jest to oddzielny zestaw obrazów, ale połączona animacja. Musisz zmodyfikować wszystkie ramki.
2. Animacja klatka po klatce zajmuje dość dużo miejsca, ponieważ trzeba przechowywać informacje o każdej klatce.

Podstawowe operacje na ramkach:

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

Podstawowe operacje na wałku:

• Oglądanie filmu - Kontrola, Film testowy.
• Zmiana wysokości i szerokości wideo - Modyfikuj, Film.
• Konwertuj film Flash na plik dokumentu HTML, Ustawienia publikowania, karta HTML.
• Podgląd dokumentu HTML - Plik, Podgląd publikacji.

Stwórzmy wielowarstwowy film z animacją krok po kroku „Życie kwiatu”. Pierwsza warstwa to ramka, druga warstwa to doniczka, trzecia warstwa to kwiat. Możesz przedstawić trzecią warstwę w trzech warstwach: liść, łodyga, kwiatostan.

Doniczka i ramka są zawsze przed naszymi oczami, a kwiat ma czas urosnąć i więdnąć w 25 klatkach kluczowych. W warstwie „kwiatek” każda klatka różni się od poprzedniej, ale istnieje możliwość zmiany stanu kwiatka w każdej pojedynczej klatce.

Film zostanie opublikowany za pomocą opcji Plik->Ustawienia publikowania. Na zakładce Formaty wybiera się opcje publikowania, można zaznaczyć kilka z nich, na odpowiednich zakładkach ustawia się parametry dla wybranej opcji publikowania, następnie wciska się przycisk Publikuj. W takim przypadku utworzone pliki są zapisywane w tym samym folderze co plik oryginalny z rozszerzeniem .fla. W naszym przykładzie do publikacji wybrano opcję pliku z animacją Gif, tak jak we wszystkich kolejnych przykładach.

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

• utwórz warstwę „Krajobraz”;
• uruchom polecenie Plik/Importuj i zaimportuj obraz poziomy lub utwórz tło „asfaltowe”;
• wybierz 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;
• zgrupuj narysowany samochód i naciskając F8 utworzymy próbkę biblioteki - klip samochodowy;
• przesuń samochód, wybierz drugą klatkę i naciśnij F6;
• będziemy przesuwać samochód i tworzyć nowe klatki kluczowe, aż samochód zniknie poza polem roboczym;
• utwórz nową warstwę i nadaj jej nazwę „Koło1”;
• narysuj koło w pierwszej klatce i utwórz z niego przykładowe koło biblioteczne;
• utwórz nową klatkę kluczową i przesuń w niej koło za poruszanym samochodem i tak dalej. we wszystkich pozostałych ramach, kręcąc kołem pod niewielkim kątem;
• zablokuj warstwę „Koło1” i skopiuj całą powstałą sekwencję klatek do schowka;
• utwórz nową warstwę i nadaj jej nazwę „Koło2”;
• wybierz pierwszą klatkę i skopiuj całą sekwencję klatek z bufora;
• kliknij, aby zapętlić widok +.

Jako kolejne samodzielne zadanie możesz zaproponować utworzenie animacji krok po kroku „Palenie zapałki”:

We Flashu istnieją dwie możliwości tworzenia obrazów pośrednich - animacja ruchu (budowa animacji w oparciu o modyfikację postaci) animacja kształtu (budowa animacji w oparciu o zmiany kształtu). Metody te są zasadniczo różne.

Animacja ruchu

Przy tej metodzie animacji ustala się początkową pozycję, kolor, wymiary, orientację i parametry końcowe, a program sam wykonuje ten ruch. Dzięki tej metodzie animacji Flash automatycznie będzie animował klatki pomiędzy określonymi klatkami kluczowymi. Oznacza to, że rysujesz obiekt, następnie w innej klatce wprowadzasz zmiany, o których będziemy mówić poniżej, i prosisz Flasha o obliczenie klatek znajdujących się pomiędzy tymi dwiema klatkami kluczowymi. Spełnia swoje zadanie i zapewnia płynną animację.

Szybkość i płynność animacji zależy od liczby klatek przeznaczonych na ruch i szybkości filmu Flash (filmu). Szybkość filmu można zmienić w następujący sposób: Modyfikuj->Film…, +- tam parametr Frame Rate ustawia liczbę klatek na sekundę. Aby uzyskać animację wysokiej jakości, prędkość powinna wynosić co najmniej 25-30 klatek na sekundę. Płynność i czas trwania ustalane są poprzez liczbę klatek przeznaczonych na animację (jej fragment).

Rozważ animację z konstrukcją klatek pośrednich (ruch animowany). Jest to najczęściej stosowana technika animacji we Flashu. W tym przypadku animacja opiera się na modyfikacji postaci, tj. obiekt animacji jest postacią. 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 proporcjonalnie, jak i nieproporcjonalnie - osobno wysokość i szerokość);
2. skłonić;
3. Lokalizacja;
4. kąt obrotu;
5. efekty kolorystyczne;
6. Możesz użyć warstw prowadzących, aby ustawić ścieżkę obiektu.

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

• Złagodzenie — odwrotne przyspieszenie wykładnicze, działa dokładnie tak samo jak w przypadku animacji kształtu.
• Obróć pozwala kontrolować obrót. Auto — Flash automatycznie próbuje określić liczbę obrotów. CW (zgodnie z ruchem wskazówek zegara, zgodnie z ruchem wskazówek zegara) i CCW (przeciwnie do ruchu wskazówek zegara - przeciwnie do ruchu wskazówek zegara). Jednocześnie w polu po prawej stronie staje się możliwe wprowadzenie liczby obrotów. Można używać wyłącznie wartości całkowitych. Możesz wyłączyć rotację, wybierając opcję Brak.
• Orientuj na ścieżkę - obraca znak tak, aby pasował do linii kierunkowej. Przyciąganie przyciąga symbol do tej prowadnicy.

W przypadku, gdy liczba klatek sceny głównej nie jest wielokrotnością liczby klatek postaci, flaga Synchronizuj umożliwia synchronizację tych dwóch animacji.

Warstwy zawierające krzywą, wzdłuż której obiekt powinien się poruszać, nazywane są warstwy prowadzące(warstwy prowadzące) (tzn. zawierają trajektorię obiektu). Aby dodać warstwę przewodnią, musisz wybrać warstwę, na której znajduje się Twój symbol; następnie Naciskając prawy przycisk myszy, wybierz opcję Dodaj przewodnik z menu kontekstowego. W tym przypadku oryginalna warstwa staje się warstwą prowadzoną. Nie jest to jedyny sposób na utworzenie warstwy prowadzącej. Dowolną warstwę można uczynić prowadnicą określając ją we właściwościach lub prowadnicą przeciągając myszką żądaną warstwę tak, aby znalazła się pod prowadnicą.

Następnie musisz narysować trajektorię ruchu. Ścieżką może być dowolna krzywa, która nie jest obszarem wypełnienia. Wszystko! Warstwa kontrolna jest gotowa. Możesz wyłączyć go do edycji, aby ułatwić pracę, a w przyszłości sprawić, że będzie całkowicie niewidoczny.

Teraz, żeby skorzystać z tej warstwy, trzeba chwycić symbol za punkt środkowy (to takie małe kółeczko) i przeciągnąć go na ścieżkę. Poczujesz, kiedy symbol się na nim „zahaczy” i zobaczysz, jak będzie się po nim ślizgał.

Następnie wszystko przebiega według znanego scenariusza - klatki kluczowe, włącz animację ruchu... Jeśli chcesz, aby obiekt obracał się zgodnie ze ścieżką, a nie tylko poruszał się po niej, to na panelu Klatka musisz zaznaczyć pole wyboru Orientuj na ścieżkę.

Animacja ruchu umożliwia zastosowanie różnych efektów kolorystycznych do całego symbolu. Tej funkcji brakuje w animacji kształtu. Aby zastosować efekt do symbolu należy zaznaczyć ten symbol i na panelu efektów (Okna ->Panele ->Efekty) wybrać żądany efekt ustawiając jasność, przesunięcie koloru, odcień.

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

• narysuj okrąg w pierwszej klatce i wypełnij go promieniowym wypełnieniem gradientowym;
• pogrupuj obraz;
• wybierz go za pomocą narzędzia Transformator i przesuń środek obrotu o określoną odległość;
• przejdź do klatki 30, naciśnij , tj. zrób z niej kopię pierwszej klatki;
• wróć do pierwszej klatki, otwórz panel Właściwości i wybierz Ruch z listy Animacja;
• na dodatkowej liście Obróć wybierz wymuszony obrót w prawo (CW) lub w lewo (CCW).

Następny przykład jest nieco bardziej skomplikowany - jest to animacja ruchu liter tekstu:

• za pomocą narzędzia Tekst utwórz blok tekstowy;
• wybierz słowo pisane i podziel je na osobne litery (Modifi/Break Apart);
• podziel litery na osobne warstwy Modyfikuj/Rozmieść na warstwach;
• przekonwertuj każdą literę w każdej warstwie na rysunek, powtórz polecenie Modifi/Break Apart. Wybierz każdą literę i zgrupuj ją;
• na linijce klatek w pewnej odległości utworzymy kopie pierwszej klatki, w tym celu naciśniemy ;
• po kolei dla każdej litery wybierzemy pierwsze klatki, wyjmiemy ją z przestrzeni roboczej, zmieniając proporcje litery, środek obrotu itp.;
• W panelu Właściwości wybierz Ruch z listy Animacja. Na dodatkowej liście Obróć wybierz jeden obrót w prawo;
• obejrzyj animację w rzutni + .

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

W procesie animacji formy rysunek może rozpaść się na kilka niezależnych fragmentów, z których każdy stopniowo przekształci się w coś nieoczekiwanego. Lub odwrotnie, kilka niezależnych obrazów znajdujących się na polu roboczym, w procesie animacji, stopniowo zmieniając swój wygląd (rozmiar, kolor, kształt), staje się częścią jednego obrazu. Załóżmy, że potrzebujesz kwadratu, aby płynnie zamienić się w okrąg, lub sylwetka królika płynnie przechodzi w sylwetkę wilka. W takich przypadkach stosuje się animację kształtu.

Jak zwykle, ustawiasz dwie klatki kluczowe w pewnej odległości od siebie. Ta opcja animacji ma ścisłe ograniczenie: animacja musi zajmować osobną warstwę i być pojedynczą narysowaną figurą (nie powinno być żadnych grup ani symboli). Gdy już pojawią się dwie klatki kluczowe, należy uaktywnić pierwszą (wystarczy do niej przejść) i zaznaczyć ją w panelu Klatka (Okna->Panele->Ramka, +) na liście animacji, linię Kształt. Klatki na osi czasu powinny zmienić kolor na zielonkawy, a strzałka powinna rozciągać się od pierwszej klatki do drugiej. Rezultatem jest seria klatek pośrednich, które będą odzwierciedlać przejście od pierwszej figury do drugiej.

Podczas korzystania 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 ustawisz ujemne spowolnienie, ruch będzie odbywał się z dodatnim przyspieszeniem, prędkość wzrośnie. I odwrotnie, jeśli złagodzenie jest pozytywne, animacja zwolni;
• Parametr Blend określa algorytm przejścia:
  • Rozdzielczy - wygładza przejście z jednego kształtu do drugiego.
  • Kątowy (kątowy) - stara się zachować proporcje narożników.

Ostatnim narzędziem w animacji animacji kształtu są punkty kontrolne (wskazówki dotyczące kształtów, dosłownie - wskazówki dotyczące kształtów). To są punkty, w których pomagasz Flashowi w prawidłowym wykonaniu przejścia. Są niezastąpione w przypadku skomplikowanych form. Są bardzo łatwe w użyciu. Na pierwszej klatce kluczowej (w której rozpoczyna się animacja) dodajesz punkt kontrolny (Modyfikuj->Przekształć->Dodaj wskazówkę kształtu,

Możesz usunąć wszystkie punkty używając Modyfikuj->Przekształć->Usuń wszystkie wskazówki. Możesz usunąć pojedynczy punkt, klikając go prawym przyciskiem myszy i wybierając Usuń wskazówkę z menu kontekstowego. Ponieważ punkty kontrolne są oznaczone literami alfabetu łacińskiego, może być ich maksymalnie 27.

Opcji przejścia z jednej formy do drugiej może być wiele, dzięki czemu animacja może w mniejszym stopniu przebiegać ścieżką, która Ci odpowiada. Nawet przekształcenie tak prostej figury geometrycznej, jak prostokąt położony pionowo w ten sam prostokąt, ale umieszczony poziomo, może nastąpić na różne sposoby. Na przykład w procesie takiej transformacji figura może mieć kształt owalu, a 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ę w różnych warstwach, ale jednocześnie uczestniczących w animacji. Bardziej koordynującą sztuczką jest użycie etykiet kształtów omówionych powyżej.

Jeśli chcesz wyłączyć animację kształtu, w panelu Ramka 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 „przemiany” słonia w owcę i odwrotnie dla tej metody animacji.

Spróbuj stworzyć animację kształtu „przemiany” węża w orła i z powrotem:

Warstwa prowadząca i warstwa ścieżki

Często w procesie animacji konieczne jest, aby obiekt nie poruszał się po linii prostej, ale po zadanej ścieżce. Animacja w tym przypadku tworzona jest w zwykły sposób, a trajektoria rysowana jest w osobnej warstwie. Warstwa ścieżki narzędzia może obsługiwać kilka różnych animacji, każda na osobnej warstwie, ale wszystkie te warstwy animacji muszą znajdować się poniżej warstwy ścieżki narzędzia. Aby narysować ścieżkę, możesz użyć różnych narzędzi: Ołówek, Pędzel, Pióro, Elipsa lub Prostokąt. Aby powiązać poruszający się obiekt z tą trajektorią, wystarczy przenieść ten element na trajektorię w początkowej i końcowej klatce kluczowej animacji. Jednocześnie w panelu Właściwości należy dostosować parametry animacji tak, aby checkbox Snap był włączony. W tym celu należy najpierw zaznaczyć pierwszą klatkę kluczową animacji, przydatne jest także wybranie polecenia Widok/Przyciągaj do obiektów.

Przykładowo utwórzmy film „Lat motyla nad kwiatem” według poniższego algorytmu:

• zaimportuj rysunek kwiatu do pierwszej warstwy;
• w pierwszej klatce kluczowej drugiej warstwy narysuj motyla (motyla możesz uzyskać wektoryzując jego bitmapę Modyfikuj/Śledź mapę bitową);
• wybierz motyla, kliknij tworząc próbkę biblioteki;
• pozostając w drugiej warstwie przejdź np. do klatki 48 i naciśnij tworząc klatkę kluczową kończącą animację;
• w nim przeniesiemy motyla na drugą stronę pola roboczego;
• wybierz 60. klatkę i naciśnij tworząc łańcuch zduplikowanych klatek;
• wybierz pierwszą klatkę i w panelu Właściwości na liście Animacja wybierz Ruch;
• wybierz warstwę animacji i z menu kontekstowego wybierz polecenie Dodaj prowadnicę ruchu;
• narysuj na polu roboczym tej warstwy krzywą ruchu motyla, którego początek i koniec znajdują się w pobliżu;
• wybierz pierwszą klatkę kluczową animacji, umieść motyla na jednym końcu trajektorii;
• 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 na ścieżkę;
• Stwórzmy efekt trzepoczących skrzydeł motyla podczas lotu. Otwórzmy bibliotekę przykładów + ;
• kliknij dwukrotnie obraz motyla w rzutni;
• utwórz nową klatkę kluczową, np. trzecią, tak aby ruch skrzydeł motyla był naturalny;
• w nowej klatce kluczowej najpierw podnieś jedno skrzydło motyla, a następnie drugie;
• wróćmy do głównej sceny i rozpocznijmy podgląd.

Warstwa maskowana i maska ​​warstwy

Warstwa ta ma na celu zakrycie i ukrycie części obrazu znajdującej się bezpośrednio pod nią. Jeśli maska ​​warstwy nie zawiera żadnego obrazu, to całkowicie zakrywa (maskuje) warstwę znajdującą się poniżej i z nią związaną, co nazywa się warstwa maskująca. Jeśli coś zostanie narysowane w masce warstwy, wówczas każde wypełnienie tego rysunku stanie się przezroczystą częścią warstwy. Jeśli animujesz obraz utworzony w masce warstwy, przezroczysta część maski będzie przesuwać się po ekranie. Maska warstwy może maskować wiele warstw. Zwykłą warstwę można maskować, zmieniając jej położenie na stosie warstw. Wystarczy przeciągnąć myszką zwykłą warstwę pod maskę warstwy. Animacja w tym przypadku może być dwojakiego rodzaju. Lub animacja obiektów znajdujących się na maskowanych warstwach. Lub animacja obrazu znajdującego się na masce warstwy.

Przykład stworzenia efektu stopniowego pojawiania się tekstu na ekranie litera po literze. W tym celu wykorzystujemy animację ruchu obrazu znajdującego się w warstwie maski, stosując następujący algorytm:

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

Poniżej znajduje się plik z animacją gif, w której wykorzystano animację kształtu liter tekstu „Szczęśliwego Nowego Roku”, a następnie pojawiający się tekst jest „usuwany” za pomocą maski warstwy, prostokąta z wypełnieniem gradientowym, czyli uzyskuje się efekt „opalizacji” liter. Tło stanowi fragment grafiki rastrowej.

Poniższy przykład ilustruje „wzrost” od punktu słowa, gdzie zaimportowana grafika bitmapowa jest używana jako warstwa maski, a w warstwie maski tworzona jest animacja, w której słowo wyrasta z punktu, a następnie ponownie się zmniejsza. W tym przykładzie zastosowano również animację formularza.

Tworzenie przycisków

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

• W górę - normalny stan przycisku;
• Over - gdy kursor myszy znajduje się nad przyciskiem;
• W dół - gdy kursor znajduje się nad przyciskiem i wciśnięty jest przycisk myszy;
• Hit - normalny stan przycisku zawierającego link, który użytkownik już odwiedził;

Jeśli chcesz utworzyć kilka identycznych przycisków, w tym przypadku wystarczy utworzyć tylko jeden przykładowy przycisk. A następnie nałóż na niego niezbędne napisy, zmień kolor lub rozmiar. Jeśli przycisk ma zawierać animowane obiekty, należy najpierw utworzyć symbole klipu filmowego, a następnie po prostu umieścić je w odpowiedniej ramce przycisku.

Główne rodzaje działań:

1. Idź do - przejście do danej sceny lub klatki;
2. Odtwórz - uruchomienie zatrzymanego filmu;
3. Zatrzymaj - zatrzymaj film;
4. Toggle High Quality - przełącznik jakości wyświetlania filmu (tryb wygładzania);
5. Znajdź wszystkie dźwięki - wyłącz dźwięk;
6. Uzyskaj adres URL - przejdź pod podany adres;
7. FC Command - przesyłanie odtwarzania filmów do innych aplikacji;
8. Załaduj / Rozładuj film - najprostsze użycie tej komendy polega na załadowaniu filmu z podanego adresu;
9. Tell Target - wybór filmu do dalszej kontroli (wyznaczenie celu);
10. Jeśli ramka jest załadowana - wykonaj polecenie, jeśli załadowana jest określona ramka;
11. Jeśli - sprawdź prawdę;
12. Pętla - cykl;
13. Zadzwoń - zadzwoń;
14. Ustaw właściwości - ustawienie właściwości filmu;
15. Ustaw zmienną - wartość zmiennej;
16. Duplikuj/Usuń klip filmowy – tworzenie lub usuwanie instancji klipu;
17. Przeciągnij klip filmowy - włącza tryb przeciągania klipu;
18. Trace - wyświetla komunikaty podczas wykonywania akcji;
19. Komentarz - komentarze;

Algorytm tworzenia przycisku (alg1):

• utwórz puste miejsce na przycisk;
• 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 klikając dwukrotnie na obraz symbolu „Przycisk”;
• przejdź do ramki Over na osi czasu, wstaw pustą klatkę Insert\Keyframe, edytuj przycisk zmieniając jego kolor;
• przejdź do ramki Dół, wstaw pustą ramkę Wstaw\Klucz, edytuj przycisk zmieniając jego kolor;
• przejdź do klatki Hit, wstaw pustą klatkę Insert\Keyframe, edytuj przycisk;
• wyjdź z trybu edycji postaci (w lewym górnym rogu filmu przejdź do Sceny 1).

Algorytm tworzenia przycisku prowadzącego do określonej strony internetowej:

• utwórz przycisk (alg1);
• ustaw akcję wybierając Okno\Akcje. Z menu rozwijanego Czynności podstawowe wybierz akcję Uzyskaj adres URL, klikając ją dwukrotnie w oknie po lewej stronie. Klikając wybraną akcję w prawym oknie, określ jej parametry (na przykład adres URL: http:\\www.ya.ru);
• przetestuj powstały klip filmowy 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);
• przekonwertuj obraz na symbol (Wstaw\Konwertuj na symbol…);
• wybierz klatkę 30 w obu warstwach i wstaw klatkę kluczową Wstaw\Keyframe;
• przenieść obraz symbolu w klatce 30 w inne miejsce;
• cofnij się o 1 klatkę i wybierz Wstaw\Utwórz animację ruchu;
• wybierz warstwę z obrazem przycisku i ustaw jej akcję na Window\Actions. Wybierz akcję Zatrzymaj;
• obejrzyj powstały klip Control\Play.

Dla przykładu utwórzmy przycisk z wbudowaną animacją według poniższego algorytmu:

• naciśnij skrót klawiaturowy + stwórz nową instancję typu Button i nadaj jej nazwę knopka;
• naciśnij OK i wejdź do edytora próbek;
• w pierwszej klatce (Up) na polu roboczym narysuj owal i wypełnij go promieniowym wypełnieniem gradientowym;
• naciśnij klawisz trzy razy , spowoduje to skopiowanie zawartości pierwszej klatki do wszystkich pozostałych;
• wybierz drugą ramkę (Nad) i nieznacznie zwiększ w niej obraz przycisku, zakreśl go żółtym konturem;
• zaimportować plik z animacją z biblioteki (na przykład biegnąca osoba lub inny klip);
• zastosuj ten klip do obrazu przycisku, ustaw wszystkie skale w jednej linii;
• 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.

Obiekt ten został opublikowany w trybie HTML w odniesieniu do odpowiedniego pliku swf.

Skrypty w ActionScript

Utwórzmy przyciski sterujące działaniem pokazu slajdów:

• przygotować kilka obrazów rastrowych (slajdów);
• zaimportuj je do nowego filmu;
• na podstawie każdego z nich stworzymy próbki biblioteczne ( ) typu Button (przycisk), tworząc próbkę, usuniemy obraz z pola roboczego;
• nazwij pierwszą warstwę filmu Buttons, zaznacz pierwszą klatkę i umieść w niej utworzone przyciski tak, aby nie przeszkadzały w oglądaniu;
• utwórz warstwę do umieszczenia slajdów Obrazy;
• w nim kluczem utwórz puste klatki kluczowe, tyle, ile jest slajdów;
• wybierz pierwszą pustą klatkę kluczową i umieść w niej slajd biblioteki ( +— otwarcie biblioteki);
• powiąż skrypt z tą ramką. W tym celu, pozostając w pierwszej klatce, otwórz panel Akcje i kliknij dwukrotnie, aby wyświetlić skrypt Stop () z folderu Akcje / Sterowanie filmem, który zatrzymuje pokaz slajdów w oczekiwaniu na polecenie użytkownika;
• powtórz dwa ostatnie kroki algorytmu dla pozostałych pustych klatek kluczowych;
• ramka z pierwszym wstawionym slajdem będzie nazywana początkiem, a ostatnią końcem (nazwy ustawiane są w panelu Właściwości jako etykieta ramki);
• Wróćmy do warstwy z przyciskami, gdzie znajdują się miniatury naszych slajdów;
• do każdego przycisku dołączymy skrypt wysyłający program do ramki, w której znajduje się odpowiedni slajd;
• W tym celu wybierz przycisk i w panelu Akcje wpisz następujący skrypt:

Włączone (zwolnienie) (

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

• w pierwszej ramce warstwy z przyciskami można także umieścić przyciski alternatywnego wyboru slajdów. W naszym przykładzie są to „Start”, „Dalej”, „Wstecz” i „Koniec”;
• wybierz pierwszy alternatywny przycisk startu (Begin) i powiąż z nim skrypt:

Włącz (naciśnij) (

GotoAndStop("rozpocznij)";

• Dołącz następujący skrypt do przycisku Wstecz:

Włącz (naciśnij) (

Root.prevFrame();

• Dołącz następujący skrypt do przycisku Dalej:

Włącz (naciśnij) (

Root.nextFrame();

• do przycisku zakończenia (Koniec), który ustawia przejście do ostatniej klatki, dołączymy następujący skrypt:

Włącz (naciśnij) (

GotoAndStop("koniec");

Poniżej efekt naszej pracy:

Podczas tworzenia animacji przy użyciu języka ActionScript często stosowana jest pętla składająca się z trzech klatek. W pierwszej ramce (przygotowaniu) zapisywane są dane początkowe, w drugiej ramce umieszczane są elementy ciała pętli, a w trzeciej ramce zapisana jest komenda powrotu do drugiej ramki gotoAndPlay (2);. Praca pętli trójklatkowej polega na naprzemiennym oglądaniu klatek biorących udział w pętli, aż do momentu spełnienia warunku wyjścia z pętli.

Rozważ zastosowanie cyklu trzech klatek na przykładzie tworzenia ruchu maski. Nasz film będzie składał się z trzech warstw:

• Zaimportuj do pierwszej warstwy, którą nazwiemy Masked, obraz rastrowy. Na jej podstawie utworzymy próbkę biblioteczną typu „clip”. Usuńmy go z obszaru roboczego i umieść kopię tego klipu w obszarze roboczym.
• W panelu Właściwości nazwij go Maskowany.
• W drugiej warstwie umieść instancję klipu będącą maską oryginalnego kształtu. Nazwą drugiej warstwy i nazwą tej instancji będzie Maska.
• W trzeciej warstwie, którą nazwiemy Akcjami, stworzymy cykl składający się z trzech klatek.
• W pierwszej klatce wykorzystujemy metodę setMask obiektu MovieClip, która pozwala nam zamaskować dowolny klip innym klipem na innej warstwie. Format metody:

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

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

Za każdym razem, gdy uzyskany zostanie dostęp do drugiej klatki, zacisk maski zostanie obrócony o 2°. Okno w kształcie klipu Maski obraca się przed oczami użytkownika, przez które widoczna jest część klipu Maski.

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.

Instancja obiektu Color jest tworzona przy użyciu konstruktora ActionScript i ma następujący format:

<имя экземпляра объекта Color>= nowyKolor(<имя экземпляра клипа>)

• Wybierz pierwszą klatkę kluczową i zaimportuj do niej bitmapę wschodzącego słońca.
• Połączmy drugą warstwę i narysujmy trzy dowolne gwiazdy w pierwszej klatce.
• Będziemy je wybierać jeden po drugim i tworzyć klipy pod nazwami Star, Star1, Star2.
• Nazwij pierwszą instancję klipu St, drugą St1, a trzecią St2.
• Powiąż scenariusz z każdą próbką. Różnica w skryptach polega na tym, że do każdej instancji klipu przypisany jest inny kolor początkowy, inny kąt obrotu i różne warunki zmiany bieżącego koloru w instrukcjach if.
• Przekazywanie koloru do instancji klipu, takiej jak Star1, odbywa się za pomocą tej linii w skrypcie Star1Color.setTransform(colorTransform);.
• Będziemy wybierać klipy ze scenariuszem jeden po drugim, naciśnij i utwórz nowe klipy, na przykład o nazwach ClipStar, ClipStar1, ClipStar2.
• Na stole montażowym możesz wyświetlić kilka próbek każdego klipu.
• Przykładowy skrypt dla Star1 pokazano poniżej:

OnClipEvent(wczytanie)(

Star1Color = nowy kolor(ten);

ColorTransform = (rb:0, gb:255, bb:255);

G = 255;

B=255;

krok=5;

OnClipEvent(enterFrame)(

G-=krok;

ColorTransform.gb = g;

Jeśli (r >=0 && b == 255 && g == 0) (

R += krok;

ColorTransform.rb = r;

Jeśli (g == 0 && r == 255 && b

B-=krok;

ColorTransform.bb = b;

Jeśli (b == 0 && r == 255 && g >=0) (

G += krok ;

ColorTransform.gb = g;

Jeśli (g == 255 && b == 0 && r

R-=krok;

ColorTransform.rb = r;

Jeśli (r == 0 && g == 255 && b>=0) (

B += krok;

ColorTransform.bb = b;

Gwiazda1Kolor.setTransform(kolorTransform);

This._rotation -= 3;

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

• Narysujmy przycisk o nazwie „Przykłady”.
• Naciśnijmy klawisz i utwórz instancję biblioteki typu Button o nazwie primery.
• Przejdźmy do trybu edycji i zmieńmy wypełnienie przycisków oraz kolor tekstu dla stanów Over i Down, do każdej z tych ramek wchodzimy wciskając klawisz .
• Na ramce Hit, która nie zostanie odzwierciedlona w trybie animacji, usuń obraz przycisku i narysuj wypełniony prostokąt nieco większy od przycisku.
• Przekonwertujmy tekst „Przykłady” na symbol biblioteczny typu Graphic. W tym celu należy przejść do stanu przycisku W górę, zaznaczyć tekst i nacisnąć klawisz . Nazwijmy próbkę biblioteki „przykładami”. W ten sposób osadzamy symbol innego typu – graficzny – w symbolu przycisku.
• Powtórzmy powyższą procedurę dla stanów przycisku Over i Down, tworząc próbki biblioteczne „examples1” i „examples2” typu Graphic.
• Kliknij prawym przyciskiem myszy przykładową bazę biblioteki i wybierz opcję duplikacji. Zapisz kopię jako wiadomość. To będzie przykładowa biblioteka dla przyszłego przycisku „Wiadomości”.
• Podobnie otrzymujemy duplikaty próbek „przykłady”, „przykłady1” i „przykłady2”. Nazwijmy je odpowiednio „newsami”, „news1” i „news2”.
• Edytujmy zawartość otrzymanych próbek, zamieniając tekst „przykłady” na tekst „aktualności” o odpowiednich kolorach.
• Wejdźmy w tryb edycji przykładowych aktualności bibliotecznych. Wybierz stan przycisku W górę, a w bibliotece przykładowe „przykłady”.
• Spójrzmy na panel Właściwości. Naciśnijmy przycisk Zamień (zamień) i w otwartym oknie dialogowym wybierz próbkę „wiadomości” i naciśnij OK. W ten sposób zmienimy nazwę stanu przycisku W górę z „Przykłady” na nazwę „Aktualności”.
• Powtórzmy te same kroki dla pozostałych dwóch stanów przycisku przykładowej biblioteki wiadomości. 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.
• Przenieśmy instancję przycisku „Wiadomości” z biblioteki do obszaru roboczego.
• Podobnie otrzymujemy trzeci przycisk - „Kontakty”.
• Włącz panel Align (wyrównanie). Zaznaczmy wszystkie trzy przyciski i wybierzmy ich lokalizację, na przykład na tym samym poziomie i w tych samych odległościach od siebie.
• Otwórzmy panel Akcje i dołączmy do każdego przycisku skrypt określający, która strona internetowa zostanie załadowana po kliknięciu na nią myszką. Możesz także określić, w którym oknie zostanie załadowana wybrana strona, np. w bieżącym oknie przeglądarki (_self), w nowym oknie (_blank) itp. Dołącz następujący skrypt do pierwszego przycisku:

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

• Do pozostałych przycisków dołączymy skrypty wskazujące odpowiednie strony internetowe. W poniższym menu Flash nie zaimplementowano łączenia stron internetowych ze względu na wygodę przeglądania stron.

Praca praktyczna nr 1

Praca praktyczna nr 2:

Utwórz animację kształtu liczby „1”, która płynnie przechodzi w liczbę „2”. W tym celu utwórz animację kształtu obiektu na pierwszej i ostatniej klatce. Używaj liczb jako obiektów, dostosuj ich wygląd (rozmiar, kolor, położenie, korzystając z zestawu właściwości na odpowiednim panelu).

Aby stworzyć animację kształtu obiektu tekstowego na pierwszej i ostatniej klatce kluczowej, liczby muszą zostać „podzielone” – przekonwertowane z tekstu na grafikę. Odbywa się to w następujący sposób - polecenie podziału zostaje zastosowane do wybranego obiektu (tryb menu „Modyfikacja” - „Podziel”).

Praca praktyczna nr 3:

Animacja wynikowa w poprzednim zadaniu może nam nie odpowiadać ze względu na „brzydki” „przepływ” punktów obiektu na pierwszej klatce do niektórych punktów obiektu na ostatniej klatce. Aby poprawić realizm transformacji jednego obiektu w drugi, należy wskazać, do którego punktu obiektu na ostatniej klatce „przepłynie” wybrany punkt obiektu na pierwszej klatce.

W tym celu wykonaj następujące kroki (wykorzystując animację poprzedniej pracy):

Przykłady tworzenia animacji formularzy znajdują się w folderze Animacja - Animacja formularzy.

Krótkie podsumowanie wykładu:

Oprócz animacji ze zmianą właściwości obiektu (położenie, rozmiar, obrót, przezroczystość itp.) możesz stworzyć animację, w której zmienia się kształt obiektu.

Aby animować kształt obiektu tekstowego w pierwszej i ostatniej klatce kluczowej, tekst należy „podzielić” poprzez konwersję na grafikę.

Aby poprawić realizm transformacji jednego obiektu w drugi, należy wskazać, do którego punktu obiektu na ostatniej klatce „przepłynie” wybrany punkt obiektu na pierwszej klatce. W tym celu wykorzystywane są punkty kontrolne (wskazówki dotyczące krzywych).

Jeśli zastosujesz animację kształtu do kształtów o różnych kolorach, kolor zmieni się podczas transformacji.

Kluczowe terminy

• Animacja kształtu
• Podział tekstu
• Wskazówka dotycząca krzywej

Zestaw do ćwiczeń:

• Dla jakich obiektów można stworzyć klasyczną animację kształtu?
• Czy można zmienić kolor animowanego obiektu podczas tworzenia animacji kształtu?
• Przypisywanie punktów kontrolnych (wskazówek dotyczących krzywych) podczas tworzenia animacji kształtu?
• Co należy rozumieć przez graficzną reprezentację obiektu tekstowego?
• Czy do obiektu tekstowego można zastosować animację kształtu? Jakie przekształcenia trzeba w tym celu wykonać w bloku tekstowym?

Ćwiczenia

• Utwórz animację dymu.
• Animuj ruch i kształt chmury na niebie.
• Utwórz animację, aby zmienić kształt języka płomienia.
• Stwórz animację powiewającego na wietrze płótna banerowego.

Grafika kształtowa jest modna od kilku lat. Jednak za wielką popularnością kryje się żmudna praca polegająca na animowaniu każdego elementu w przestrzeni roboczej.

Jeśli nigdy wcześniej nie robiłeś animacji kształtów, teraz jest na to czas!

Wybraliśmy 30, które pomogą Ci opanować zasadę animacji kształtów, a także nauczą Cię, jak tworzyć i eksportować ilustracje wektorowe odpowiednie do dalszej animacji.

Animação Feliz de Shapes com Textos

Animacja sekwencji — samouczek programu Adobe After Effects

Wzmacniacz warstwy kształtu (promieniowy) — samouczek programu Adobe After Effects

Samouczek – Szybkie porady 03 – Okręgi 2D i kreska

Animacja sceny infograficznej Odcinek 1 After Effects

Poradnik Godziny dla Ziemi Po efektach

Tworzenie animowanych wzorów za pomocą modułu powtarzania warstw kształtów w programie After Effects

Summit 1.2 — Wprowadzenie do grafiki ruchomej — After Effects

Jak importować i animować plik wektorowy w After Effects

Wprowadzenie do punktu Ancor. Animacja dłoni

Jak stworzyć koła zębate?

Chusteczka promieniowa do zmiany kształtu

Odliczanie i odliczanie w Adobe After Effects

Praca ze skryptem Lines Creator

Kręgi są wszystkim! Lekcja 1. Stwórz intro

Kręgi są wszystkim! Lekcja 2

Kręgi są wszystkim! Lekcja 3: Dopasowywanie kolorów w Adobe Kuler

Kręgi są wszystkim! Lekcja 4

Efekt rozprzestrzeniania się kręgów

Animacja kształtu

Tworzenie prostego filmu o kształcie

Tworzenie animowanej ikony w kształcie

Tworzenie prostego wstępu do kształtu

Spektakularna animacja kształtu smartfona

Niesamowita animacja kształtu

Tworzenie prostej zmiany kształtu

Kształty! Tworzenie animowanych wzorów za pomocą powtarzacza warstw kształtów

Stylowa animacja kształtu

Jak zrobić animowany baner

Moduł ekspresowy plan:

• Obliczona animacja typu Shape
• Formaty dźwiękowe
• Punktacja animacji

Obliczona animacja typu Shape

Typ animacji kształt(forma) pozwala na tworzenie efektów - metamorfoz, wymuszających „przepływ” jednej formy w drugą. Jednocześnie Flash umożliwia zmianę współrzędnych obiektu, jego rozmiaru i koloru.

Korzystając z tego typu animacji, należy pamiętać, że Flash będzie działał tylko z prymitywami graficznymi (linie i wypełnienia) i nie będzie mógł animować grup, znaków, bloków tekstu ani bitmap. Aby nadal używać tych elementów w swojej pracy, będziesz musiał podzielić je na części (prymitywy) za pomocą polecenia Modyfikuj > Podziel.

Aby przestudiować ten rodzaj animacji obliczeniowej, zasymulujmy metamorfozę, w której okrąg zamieni się w kwadrat, w procesie transformacji figura będzie się poruszać, zmieniać swój kolor i rozmiar.
Utwórz więc nowy dokument o wymiarach 100x300 px, nazwij go metaforą i zapisz na dysku.

Na pierwszej klatce filmu użyj narzędzia Owal znajdującego się u góry sceny, aby narysować okrąg. Następnie przejdź do klatki 20 i ustaw ją jako klucz. Na dole sceny w klatce 20 narysuj kwadrat narzędziem Prostokąt i usuń okrąg, zaznaczając go wcześniej narzędziem Strzałka. Rozmiar narysowanego kwadratu powinien być większy niż rozmiar koła. Sam wybierz kolory koła i kwadratu, możesz ustawić figury na tej samej pionie za pomocą palety Informacje.

Po zabawie wszystkimi tymi punktami wróć do klatki 1 i korzystając z palety Właściwości, w sekcji Animacja ustaw wartość na Kształt. Należy pamiętać, że przestrzeń warstwy na palecie Oś czasu pomiędzy klatkami 1 i 20 została wypełniona jasnozieloną farbą, a od klatki 1 do klatki 20 rozciągała się strzałka. Jeśli zamiast strzałki na palecie rozciąga się linia przerywana, oznacza to, że zrobiłeś coś złego, np. w swojej pracy użyłeś nie prymitywów graficznych, ale grupę lub symbole…

Przetestuj swój film za pomocą polecenia Sterowanie > Testuj film.

Poeksperymentuj z paletą Oś czasu. Możesz kontrolować charakter ruchu, korzystając z części Łatwość, którą znasz już z materiału z poprzedniego wykładu, a także określić charakter sposobu, w jaki forma ulega przekształceniom w procesie jej metamorfozy. Aby to zrobić, musisz zapoznać się z sekcją mieszanka(przejście), tutaj zaoferowane zostaną dwie opcje:

dystrybucja(rozmazany) - Kontury linii i wypełnień w klatkach pośrednich zostaną wygładzone.

Kątowy (kątowy)- Kontury linii i wypełnień w ramkach pośrednich zachowają oczywiste kąty i linie proste.

Zwróć uwagę na paletę Osi czasu tego filmu, jego animacja różni się nieco od powyższego opisu, myślę, że dokładnie przestudiowając charakter ruchu postaci, będziesz w stanie samodzielnie zrozumieć zawartość górnej warstwy, na której prezentowana jest animacja.

Uwagi:
W tym artykule liczba klatek na sekundę wynosi 24 kl./s!

Animacji towarzyszy dźwięk. Aby jego wielokrotne powtarzanie nie przypominało agresywnego ataku dźwiękowego, podczas publikacji, w zakładce HTML, celowo odznaczyłem sekcję Pętla. Zrobiono to tak, aby przeglądarka odtworzyła wideo tylko raz! Jeśli chcesz obejrzeć film jeszcze raz skorzystaj z paska narzędzi przeglądarki i odśwież stronę. I jeszcze jedno na przyszłość: wykorzystanie fragmentów dźwięku w Twoich filmach należy traktować bardzo poważnie.

Po pierwsze: dźwięk „waży” bardzo dużo. Po drugie, jeśli nie możesz programowo sterować dźwiękiem, to znaczy nie dajesz użytkownikowi możliwości wyłączenia lub włączenia dźwięku w dowolnym momencie, to w ogóle nie powinieneś go używać w zapętlonych filmach, na przykład reklamach banery. Jednak animacja i niektóre elementy interaktywne bez dźwięku są po prostu nie do pomyślenia. Dlatego w ramach tego wykładu zajmiemy się tym bardziej szczegółowo, ale na razie zwróć uwagę, że dla fragmentu dźwiękowego na palecie Oś czasu wybrana jest osobna warstwa.

Ten film ma jeszcze jedną warstwę - tło (dolna warstwa), na tej warstwie znajdują się elementy statyczne - sceneria.

Kontrolowanie zmian kształtu za pomocą podpowiedzi kształtu (zakotwiczenia kształtu)

Aby zarządzać bardziej złożonymi zmianami kształtu, tzw Wskazówki dotyczące kształtu(punkty zakotwiczenia kształtu), które określają, w jaki sposób fragmenty pierwotnej formy zostaną przeniesione do nowej formy. Innymi słowy, punkty kontrolne służą do identyfikacji tych punktów pierwotnej formy, których względne położenie musi zostać zachowane - rodzaj koralików utrwalających niektóre elementy obrazu. Najbardziej typowym przykładem wykorzystania punktów kontrolnych jest animacja mimiki, w której pewne jej części (np. oczy) nie powinny brać udziału w transformacji.

Punkty węzłowe są oznaczone na obrazie małymi kółkami z literami. Listy (od A zanim z) służą jako nazwy (identyfikatory) punktów kontrolnych. Każdy punkt aktywny na obrazie źródłowym musi odpowiadać punktowi o tej samej nazwie na obrazie wynikowym. W sumie dla jednej cyfry można zastosować nie więcej niż 26 punktów kontrolnych (według liczby liter alfabetu). Punkty kontrolne na obrazie źródłowym mają kolor żółty, na obrazie wynikowym są zielone.

Aby umieścić punkty kontrolne, wykonaj następujące czynności:

• Kliknij lewym przyciskiem myszy w ramce odpowiadającej oryginalnemu obrazowi.
• Patrz menu Modyfikuj > Kształt > Dodaj wskazówkę dotyczącą kształtu(modyfikuj > kształt > dodaj punkt kontrolny) w rezultacie na scenie w Twojej ramce pojawi się „puste” miejsce pierwszego punktu kontrolnego - czerwone kółko z literą A.
• Przesuń go myszką za pomocą narzędzia Strzałka z włączonym modyfikatorem Przyciągaj do obiektów do punktu na obrazie, który chcesz oznaczyć jako węzeł.
• Kliknij lewym przyciskiem myszy ramkę odpowiadającą powstałemu obrazowi, scena będzie również miała czerwone kółko z tą samą literą, co w oryginalnej ramce.
• Przesuń okrąg do punktu obrazu, który powinien odpowiadać zaznaczonemu w ramce źródłowej, po przesunięciu okrąg zmieni kolor na zielony.
• Wróć do pierwszej klatki i upewnij się, że kolor punktu kontrolnego zmienił się na żółty.

Jeśli chcesz kontynuować umieszczanie punktów kontrolnych, powtórz powyższe kroki.

Uwagi:
Jeśli podczas transformacji użyjesz kilku punktów kontrolnych, rozmieść je zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego rogu obrazu. Dzieje się tak, ponieważ Flash obsługuje punkty aktywne w kolejności alfabetycznej.

W procesie rozmieszczania punktów węzłowych zaleca się okresowe testowanie wideo. Aby zmienić położenie punktu kontrolnego, po prostu przeciągnij go w nowe miejsce (można to zrobić zarówno na pierwszej, jak i ostatniej klatce sekwencji). Ponadto zawsze możesz usunąć dodatkowe punkty lub dodać nowe. Jeśli jesteś zadowolony z wyników swojej pracy, możesz ukryć punkty kontrolne. Wszystkie te operacje najwygodniej wykonać za pomocą menu kontekstowego. Aby go otworzyć, kliknij prawym przyciskiem myszy jeden z punktów kontrolnych. Menu zawiera cztery polecenia, z czego trzy pierwsze są dostępne tylko dla punktów kontrolnych obrazu źródłowego:

Dodaj wskazówkę(dodaj punkt kontrolny) — po wykonaniu polecenia na scenie pojawia się pusty nowy punkt kontrolny. Usuń wskazówkę(usuń punkt kontrolny) - punkt kontrolny, który kliknąłeś prawym przyciskiem myszy, aby otworzyć menu, zostanie usunięty.
Usuń wszystkie wskazówki(usuń wszystkie punkty kontrolne) - usuwa wszystkie punkty kontrolne.
Pokaż podpowiedzi(pokaż punkty zakotwiczenia) - ten tryb jest używany domyślnie (przy nazwie polecenia znajduje się znacznik wyboru). Ponowne wybranie tej opcji sprawi, że punkty kontrolne staną się niewidoczne. Opcji tej należy używać dopiero po osiągnięciu pożądanego rezultatu, ponieważ konieczne będzie powrót do menu Modyfikuj > Kształt > Dodaj wskazówkę kształtu, aby powrócić do widoku Punkty kontrolne.

Zwróćcie uwagę na zaprezentowane w tym wykładzie animowane filmy flash, w pierwszym przypadku miś koala zamienia się w puchacza bez użycia punktów kontrolnych, w drugim przypadku animację sterujemy za pomocą trzech par punktów kontrolnych.

Formaty dźwiękowe

Dźwięk to fala sprężysta, która rozchodzi się w gazach, cieczach i ciałach stałych i jest odbierana przez ucho ludzi i zwierząt. Osoba słyszy dźwięki o częstotliwościach od 16 Hz do 20 kHz. Dźwięki o częstotliwościach do 16 Hz nazywane są infradźwiękami, 2 x 10 4 -10 9 Hz - ultradźwiękami, a 10 9 -10 13 Hz - hiperdźwiękami. W procesie digitalizacji dźwięku rejestrowane są wszystkie jego charakterystyki falowe. Taki zapis nazywany jest modulacją impulsowo-kodową i jest sekwencyjnym zapisem wartości dyskretnych. Głębia bitowa urządzenia liczona w bitach wskazuje, ile wartości jednocześnie w jednym nagranym dyskretnym fragmencie pobierany jest dźwięk. Im większa głębia bitowa, tym bardziej dźwięk odpowiada oryginałowi. Każdy plik dźwiękowy można traktować jako bazę danych. Posiada własną strukturę, której parametry są zwykle wskazane na początku pliku. Następnie pojawia się uporządkowana lista wartości dla niektórych pól. Czasami zamiast wartości pojawiają się formuły, które pozwalają zmniejszyć rozmiar pliku.

Przyjrzyjmy się bliżej formatom danych audio, z których najczęściej będziemy korzystać podczas kopiowania filmów w programie Macromedia Flash.

wav (przebieg)- dyskretny format przeznaczony do przechowywania i przesyłania sygnału audio w postaci cyfrowej, ma wysoki stopień jakości i niestety niewiarygodny rozmiar. W formacie wav można zapisywać pliki stereo lub mono z głębokością próbkowania 8 lub 16 bitów. Oprócz zwykłych wartości dyskretnych, głębi bitowej, liczby kanałów i poziomów głośności, wav może określić wiele innych parametrów: znaczniki pozycji do synchronizacji, całkowitą liczbę wartości dyskretnych, kolejność odtwarzania różnych części pliku audio i tam jest także miejsce na umieszczenie informacji tekstowych.

MP3 (MPEG warstwa 3)— format strumieniowy przeznaczony do przechowywania i przesyłania sygnału audio w postaci cyfrowej, charakteryzujący się wysokim stopniem zwartości. Używany głównie do transmisji dźwięku w czasie rzeczywistym przez kanały sieciowe i do kodowania CD Audio. Termin „streaming” oznacza, że ​​transmisja danych odbywa się jako strumień niezależnych, odrębnych bloków danych – ramek. W tym celu oryginalny sygnał podczas kodowania jest dzielony na segmenty o równej długości, zwane ramkami i kodowane oddzielnie. Podczas dekodowania sygnał tworzony jest z sekwencji zdekodowanych ramek. Szerokość strumienia (bitrate) przy kodowaniu sygnału podobnego do CD Audio (44,1 kHz 16Bit Stereo) oznacza całkowitą ilość strumienia - ilość informacji przesłanej w jednostce czasu. Wartość ta waha się od 320 kbs (320 kilobitów na sekundę, pisane także jako kbs, kbps lub kb/s) do 96 kbs i mniej.

Punktacja animacji

Aby dodać dźwięk do filmu, wykonaj następujące kroki:

Zaimportuj do swojego filmu jeden lub więcej plików dźwiękowych w formacie wav lub mp3. W tym celu należy skorzystać z menu Plik > Importuj (plik > import). Pliki zostaną automatycznie umieszczone w bibliotece filmów jako symbole. Otwórz bibliotekę filmów za pomocą menu Okno > Biblioteka i sprawdź ją.

Utwórz nową warstwę na palecie Oś czasu i umieść na niej fragment dźwiękowy, korzystając z symboli znajdujących się w Twojej bibliotece - przeciągnij go z biblioteki na scenę. „Rozwiń” dźwięk - dodaj klatki (nie klucz) za pomocą polecenia Wstaw klatkę, tak aby na palecie w tej warstwie przebieg dźwięku był w pełni rozwinięty. Flash umożliwia utworzenie wielu warstw audio, a każda z nich będzie działać jak osobny kanał audio. Oznacza to, że podczas odtwarzania filmu jednocześnie odtwarzane są dźwięki z różnych warstw, które pokrywają się w czasie.

Przejdź do pierwszej klatki warstwy dźwiękowej i przejdź do sekcji palety Właściwości dźwięk(dźwięk). Jeżeli w Twojej bibliotece znajduje się kilka fragmentów dźwiękowych, to korzystając z rozwijanej listy znajdującej się w tej sekcji, możesz w każdej chwili zamienić wybrany dźwięk na inny. Na dole palety widoczne są początkowe parametry fragmentu dźwięku: szerokość pasma, mono/stereo, głębia bitowa, czas trwania, zajęte miejsce w pamięci.

Upuszczać Synchronizuj(synchronizuj - synchronizuj) wybierz sposób synchronizacji dźwięku:

wydarzenie(zdarzenie) - dźwięk jest synchronizowany poprzez powiązanie go z określonymi zdarzeniami w filmie, np. kliknięciem przycisku. Dźwięk sterowany zdarzeniami jest odtwarzany od momentu przeskoczenia do odpowiedniej klatki kluczowej i trwa niezależnie od osi czasu, nawet jeśli film jest zatrzymany (oczywiście pod warunkiem, że dźwięk jest wystarczająco długi).

początek(start) - metoda ta różni się od poprzedniej tym, że przy następnym wystąpieniu danego zdarzenia rozpoczyna się odtwarzanie nowego wystąpienia dźwięku, nawet jeśli odtwarzanie poprzedniego jeszcze się nie zakończyło.

zatrzymywać się(stop) - Zatrzymuje odtwarzanie określonego dźwięku.

Strumień(strumień) - strumieniowe przesyłanie dźwięku. Flash zapewnia „wymuszoną” synchronizację pomiędzy animacją i przesyłanym strumieniowo dźwiękiem (na przykład, jeśli klatki animacji nie mają czasu na odtworzenie na stronie internetowej z tą samą szybkością, co przesyłany strumieniowo dźwięk, odtwarzacz Flash pomija niektóre klatki). Przesyłanie strumieniowe dźwięku zawsze zatrzymuje się po zakończeniu animacji. Ponadto strumieniowe przesyłanie dźwięku nigdy nie trwa dłużej niż czas odtwarzania powiązanych klatek animacji.

W sekcji można ustawić liczbę powtórzeń dźwięku pętla(cykle). Tryb odtwarzania „nieskończonego” nie jest zaimplementowany, ale można go zasymulować, wprowadzając w tej sekcji odpowiednio dużą liczbę.

Można ustawić efekty dźwiękowe wpływające na głośność dźwięku. Z listy rozwijanej wybierane są gotowe ustawienia efekty(Efekt):

Nic- nie ma żadnych efektów, tę pozycję należy wybrać, jeśli nie podobają Ci się wybrane efekty.

lewy kanał- wyzwala dźwięk tylko w lewym kanale.
prawy kanał- Włącza dźwięk tylko w prawym kanale.
Zanikanie od lewej do prawej- płynne przejście dźwięku pomiędzy kanałami od lewej do prawej.
Zanikanie od prawej do lewej- płynne przejście dźwięku pomiędzy kanałami od prawej do lewej.
zanikać- stopniowy wzrost amplitudy dźwięku.
zanikać- stopniowe zmniejszanie się amplitudy dźwięku.

Jeśli wymagany jest inny rodzaj efektu, wybierz element z tej listy. Zwyczaj(inne), a następnie wyreguluj za pomocą paneli, które wyświetlają przebieg dźwięku. W takim przypadku możliwe są następujące działania:

• Na skali znajdują się pionowe znaczniki wskazujące czas odtwarzania nagrania dźwiękowego. Przeciągając te znaczniki, możesz odciąć niepotrzebne fragmenty na początku i na końcu nagrania dźwiękowego.
• Zmienną głośność dźwięku można ustawić za pomocą specjalnych znaczników znajdujących się na panelu przebiegów. Dodając taki znacznik (klikając) lub zmieniając jego położenie (przeciągając), zmieniamy w określonych punktach poziom głośności. W sumie może znajdować się maksymalnie osiem znaczników, które odpowiadają tym samym punktom czasowym na lewym i prawym panelu kanału. Głośność kanałów w tym samym czasie może być różna. Aby usunąć znacznik należy go wyciągnąć z panelu.

Inne elementy sterujące służą wyłącznie wygodzie. Można więc zmienić skalę osi czasu za pomocą przycisków Powiększ i Pomniejsz. Za pomocą przycisków możesz zmienić sposób prezentacji osi czasu sekundy(sekundy) i ramki(ramki).

Jeśli nie masz własnej biblioteki plików dźwiękowych, możesz skorzystać z biblioteki Macromedia Flash, przechodząc do okna > Biblioteki wspólne > Dźwięki.

Nagranie i edycja fragmentu dźwiękowego

Pracując nad filmem animowanym lub interaktywnym z pewnością będziesz mieć ochotę na nagranie własnego fragmentu muzycznego lub mowy. Nagrałeś więc dźwięk za pomocą mikrofonu i zapisałeś go jako plik dźwiękowy.wav.

Każdy plik wav ma dość duży rozmiar, ale jest to wada, którą można łatwo naprawić, ponieważ możemy przekonwertować go na plik mp3 za pomocą Centrum Play, a także popraw ten fragment za pomocą specjalnych programów, na przykład kuźnia dźwięku Lub Laboratorium Fal Steinberga.

Podczas nagrywania z mikrofonu przerwy pojawiają się przed i po fragmencie dźwięku (na przykład słowie). Pojawia się hałas. Głos jest zniekształcony. Wszystkie te niedociągnięcia, korzystając z wymienionych powyżej programów, mogą łatwo wyeliminować nawet początkujący.

W tych programach dźwięk jest przedstawiany graficznie jako fala. Dlatego też tutaj możemy z chirurgiczną precyzją odciąć niepotrzebne nam fragmenty. Dodaj różne efekty, na przykład „A la Masyanya”, zamień głos kobiecy na męski i ogólnie śnij dla własnej przyjemności.

Zadanie domowe: Podstawy tworzenia animacji w Macromedia Flash MX

Najpierw musisz zduplikować animacje flash zaprezentowane w materiale tego wykładu.

Po drugie, aby stworzyć film, który pozwoli zilustrować wspaniałe wersety z wiersza Siergieja Aleksandrowicza Jesienina:

Aha, i ja sam często dzwonię
Widziałem wczoraj we mgle:
Źrebię czerwonego miesiąca
Zaprzęgnięci do naszych sań...

Razem: masz cztery pliki w formacie fla (jeśli łączny rozmiar plików przekracza 150 Kb, spakuj pliki do archiwum) i wyślij je nauczycielowi.

Życzę sukcesów w samodzielnym studiowaniu Macromedia Flash MX!