Podstawy animacji. Tworzenie animacji motion

W pierwszej lekcji podstawowego mini-kursu "Podstawy animacji w ActionScript 3.0" Dowiesz się o:

1. Co to jest animacja
2. Jak osiągnąć iluzję ruchu z personelem
3. Na możliwości animacji próbki
4. W sprawie cech i zalet animacji oprogramowania

Adobe Flash. W rzeczywistości jest to rodzaj maszyny do animacji. Już w jego pierwszych wersjach stworzył go za pomocą koncepcji między Tween. Jest to następujące:

• w skali czasu tworzone są dwie klawisze z różnymi treściami (pozycje obiektów, ich forma, kolor itp. Zmiana);
• wszystkie pośrednie (przejściowe) ramki Flash tworzy niezależnie (rys. 1).

W ten sposób wygląda w programie Adobe Flash CS6.

Ale ta lekcja i kurs jest na ogół nie tylko między Tween, ale o potężnym języku, który jest wbudowany w błysk i nazywa się ActionScript. Studiując go, nauczysz się wiele przydatnych i praktycznych, zwłaszcza w takich sekcjach jak imitacja zjawisk fizycznych prawdziwego świata i obliczeń matematycznych. Oczywiście taka wiedza zapewni Ci pełną kontrolę podczas tworzenia interaktywnych aplikacji, których nigdy nie można osiągnąć tylko z Tween.

Ale zanim przejdziemy do konkretnych technik, techników i formuł, które pomogą Ci ożywić obiekty z ActionScript, spójrzmy bardziej szczegółowo Idea animacji, jego podstawowe techniki i jak są one używane w nim, a także jak zrobić to bardziej interesujące i co najważniejsze dynamiczne.

Co to jest animacja?

Co, co w rzeczywistości jest animacją? Definicja tej koncepcji można znaleźć w wielu słowników. Tutaj na przykład jeden z nich, co daje Wikipedię:

Przetłumaczony animacja oznacza ruch. Jeśli poprawisz tę definicję, możemy to powiedzieć animacja jest zmianą czasu. W szczególności dotyczy to zmian wizualnych (widocznych). Ruch jest zmianą czasu. W pewnym momencie obiekt był w jednym miejscu i minutę później. Teoretycznie znajdowało się również w punktach pośrednich między początkowym a ostatecznym, gdy porusza się czas.

Ale obiekt niekoniecznie musi zmienić swoją pozycję, aby być uznanym za animowany. On może po prostu zmienić przedni. W latach 90. (strasznych do powiedzenia, ubiegłego wieku!) Byli popularni programy komputerowektóry morfał.

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

Podczas tworzenia tego rolki flash został użyty program SQIRZ MORPH 2.1

Z morfaniem obiekt może również zmienić jego rozmiar lub lokalizację. Na przykład, w ten sposób możesz utworzyć iluzję rosnącego drzewa, obracającego się piłki lub zmiany koloru obiektu.

Ważna koncepcja jest ważna koncepcja.

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

Prawdopodobnie widziałeś kamerę wielokrotnie strzelając, na której nie ma ruchu, na przykład pustego pokoju lub krajobrazu miejskiego.

W takiej sytuacji trudno powiedzieć, że przed tobą: zwykłe zdjęcie lub klip wideo. Jak wyglądasz, nagle zauważysz małe zmiany w ramce: łatwy ruch, zmieniając przepływ światła lub przesuwając cień. Nawet takie małe zmiany wyraźnie informują o tym, że czas idzie, a jeśli nadal obserwujesz, to może coś innego się zmieni. Jeśli w następnym okresie nie ma zmian, wydajesz się, że widzisz, co patrzysz na zdjęcie. W związku z tym brak czasu w ramce oznacza, że \u200b\u200bobraz zostanie niezmieniony.

Wszystkie powyższe prowadzi nas do bardzo ważnego wniosku: animacja, ruch powoduje zainteresowanie wizualne.

Wszyscy pamięta zdjęcie Leonardo da Vinci "Mona Lisa" - arcydzieło malarstwa, jednej z najbardziej znanych obrazów w świecie historii sztuki.

Możliwe jest z dużą ilością prawdopodobieństwa, że \u200b\u200bzwykły człowiek przychodzi po kilku minutach inspekcji i wkrótce zacznie szukać następnego obiektu "studiów". Ale zacznij pokazać mu ostatniego Hollywood Blockbuster i nie zauważy, jak lata będzie kilka godzin. To jest moc animacji!

W jaki sposób iluzja ruchu w animacji próbki

Wróćmy na sekundę do definicji animacji, z którą się dowiedzieliśmy:

Animacja jest technika Tworzenie iluzji ruchomych obrazów (ruch i / lub zmian w postaci obiektów - morfing) przy użyciu sekwencji stałych obrazów (ramek) i wymiana siebie z pewną częstotliwością.

Autorzy takich definicji są zmuszeni do wejścia do słowa złudzenia w nich. Często zdarza się, że tylko iluzja ruchu i istnieje w tych rodzajach przewoźników sztuki lub mediów, z którymi stoimy w życiu. Dlatego oto czas wejścia do koncepcji ramek.

Teoretycznie wszystkie rodzaje aplikacji animacji wizualnych ramki - sekwencja zdjęć lub fotografii, szybko pokazana przez widza, aby naśladować ruch lub zmianę.

Co widzisz na ekranie komputera, telewizja lub w kinie jest oparta na ramkach. Wszystko zaczęło się od pierwszych filmów animowanych, gdzie przyciągnięto kilka zdjęć na prześcieradłach przezroczystego filmu i pierwszych filmów, gdzie ta sama technika była używana podczas pokazania serii zdjęć.

Koncepcja jest prosta: pokazujesz sekwencję zdjęć, jeden po drugim, który nieco różni się ze sobą, a twój mózg łączy je razem w pojedynczym ruchomym obrazie.

Więc dlaczego powinniśmy nazwać to iluzją ruchu?

Jeśli widzisz dziewczynę, która spada na ulicę na ekranie monitora, to nie jest ruch? Oczywiście jest to tylko obraz dziewczyny, a nie prawdziwy obiekt, ale to nie jest główny powód, dla którego uważamy za taki ruch iluzji.

Pamiętam, mówił o obiekcie, który w pewnym momencie jest w jednym miejscu, a po minucie już w drugiej? Jednocześnie powiedziałem, że porusza się w prawdziwej przestrzeni. To tylko taki rodzaj, który możemy nazwać prawdziwym. Obiekty poruszają się w przestrzeni płynnie, a nie skacze, jak to się dzieje we wszystkich typach przejrzystej animacji. W nich obiekt nie porusza się z jednego miejsca do drugiego; Znika, a następnie pojawia się w innym miejscu w następnej klatce. Im szybciej porusza się, tym dłuższe takie skoki.

Gdybym pokazał ci zdjęcie dziewczyny, która jest w jednym miejscu, a po kilku sekundach kolejne zdjęcie z tą samą dziewczyną, ale już gdzie indziej, powiedziałbyś, że były to dwa zdjęcia, a nie animacji.

Gdybym pokazał ci kilka jej zdjęć podczas ruchu, nadal mówisz, że jest to tylko seria zdjęć.

Gdybym pokazał ci kilka zdjęć dość szybko, nie zmieniłoby to faktu, że nadal są fotografiami, ale zaczniesz je widzieć inaczej.

Twój mózg zobaczyłby je jako poruszająca się dziewczyna. W istocie taka reprezentacja nie różni się od dwóch pierwszych zdjęć, tj. nie ma w nich prawdziwego ruchu, ale w pewnym momencie mózg poddaje się i kupił na tej iluzji. Naturalnie, w branży produkcyjnej efekt ten był bardzo dobrze badany.

Po przeprowadzeniu badań stwierdzono, że przy prędkości pokazu 24 klatek na sekundęPrzeglądarka postrzega je jako pojedynczy ruchomy obraz. Jeśli pojawi się wolniej, obraz zaczyna się denerwować "skakanie", a iluzja ruchu jest zniszczona. Jeśli przyspieszyłeś do 50 klatek na sekundę, nie dodanie realizmu obrazu (choć w animacji programu z interaktywną interakcją widza z obrazem, odpowiedź będzie szybsza, a ruch obiektów o dużych prędkościach jest bardziej "gładki ").

Koncepcja ramek umożliwia trzy rzeczy:

• przechowywanie
• przenoszenie
• i pokaż

Oczywiście, nie możesz przechowywać, przejść, a następnie pokazać prawdziwą dziewczynę idąc ulicą, ale możesz przechowywać jej obraz / zdjęcie lub serię ich, a następnie przekazać je i pokazać je. W ten sposób masz możliwość odtworzenia animacji prawie zawsze i wszędzie, podczas uzyskiwania dostępu do zapisanych zdjęć i możliwość ich pokazania.

Nadszedł czas, aby dać bardziej ogólną definicję ramek. Do tej pory mówiąc o nim, mamy na myśli zdjęcie, zdjęcie lub rysunek. Teraz rozważmy się w następujący sposób: ramka jest wprowadzaniem systemu w pewnym momencie..

Ten system może być:

• obraz krajobrazu wykonany z własnego okna;
• kolekcja wirtualnych obiektów (rekord, w tym przypadku, byłyby ich kształty, rozmiary, kolory, lokalizacja itp. W pewnym momencie. W ten sposób twój film wykazałby się z serii zdjęć w serię rekordów opisy zdjęć. Zamiast po prostu pokazać zdjęcie, komputer ma taki opis, tworzy z niego zdjęcie, a następnie go pokazuje);
• personel zawierający niektóre programy.

Ramki programowania.

Ponieważ komputer może rozważyć "w locie", masz możliwość wykonania bez długiej listy opisów ramek. Wszyscy możesz uprościć, opisując tylko pierwszą ramkę i ustawiając zasady tworzenia wszystkich kolejnych ramek.. Teraz komputer nie tylko tworzy zdjęcie z opisu i:

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

Wyobraź sobie, ile miejsca możesz zaoszczędzić, używając tego podejścia! Zdjęcia zawsze zajmują przyzwoitą ilość miejsca na dysku i pasmo Sieci. I 24 zdjęcia na sekundę może być po prostu "gorąco". Jeśli uda ci się zmniejszyć na jeden opis i definicję reguł, masz możliwość zmniejszenia rozmiaru pliku setki razy.

W 90 przypadkach na 100, nawet najbardziej obszerny program z zasadami sposobu poruszania się i interakcji zajmuje mniej miejsca niż jedno zdjęcie średniej wielkości. Dlatego jeden z pierwszych efektów, które odnotowano podczas studiowania animacji oprogramowania jest jej wydajność pod względem wielkości pliku.

Zdecydowanie jest kompromis. Jeśli twój system zacznie rosnąć, a zasady stają się coraz trudniejsze i trudniejsze, komputer musi spędzić coraz więcej zasobów do przetwarzania każdej kolejnej sceny, a następnie znacznie znacznie wyświetlać je na ekranie.

Jeśli spróbujesz utrzymać pewną szybkość klatek, to czasami pozostawia czas na procesor (Milisekund), wszystko to "Digest". Dlatego, jeśli komputer nie może obliczyć sceny na czas, wówczas będzie cierpi jakość odtwarzania (szybkość klatek). Z drugiej strony, zwykła animacja oparta na obrazie, niewiele troszczy się o tym, co jest na scenie i jak trudno jest ten obrazek. Wystarczy pokazać następne zdjęcie na czas i to jest to.

Zalety animacji oprogramowania

Następna zaleta animacji oprogramowania w stosunku do próbki, którą teraz omówimy, przechodzi znacznie dalej niż prosty rozmiar pliku. To jest fakt, że animacja oprogramowania w większości przypadków jest używana jako dynamiczna.

Prawdopodobnie obserwowałeś film "Terminator 2: Dzień sądu". Na końcu filmu za każdym razem, gdy terminator znika w topnieniu kotle z frazą "Wrócę". Robi to w kinach, w telewizji i na DVD. Nawet klikając przycisk "Stop" lub "Pause", nie jesteś w stanie go zatrzymać. A to dlatego zwykły film jest niczym więcej niż sekwencją zdjęć. Pod koniec tego filmu, one (zdjęcia) pokazują terminator znikający w Belem i wszystko, do czego są w stanie.

Teraz przejdźmy z Terminatora do zwykłej witryny flash. Pod koniec lat 90., gdy błysk szybko zyskał swoją popularność, tylko leniwy nie chciał korzystać z jego możliwości na swojej stronie internetowej:

• poruszające się, pojawiające się i znikające formy;
• muzyka kanałowa;
• nagle pojawi się na coś;
• pojawiające się miejsce światła lub cienia.

Wtedy takie rzeczy były w nowościach, więc chciałem wykrzyknąć: "fajnie!" Sprawiedliwość, należy powiedzieć, że nie wszystkie z takich witryn było naprawdę fajne. Pamiętając dzisiaj, że widziałem, można powiedzieć, że tylko dwa lub trzy z nich, naprawdę rozbił się w pamięci.

W czasie trwania animacja na nich była nie więcej niż minutę. To wystarczyło tylko dla mnie, żebym oglądać trzy razy z rzędu. Co oni były źli? Nie, tuż po kilku poglądach uwaga była słabsza, ponieważ nie było już nic więcej do wyglądania w filmie o terminorze. A tu możesz mówić o pewnym paradoksie - w tym rodzaju filmów, animacja nie zmienia się, każdą ramkę, od pierwszego do ostatniego ustalonego.

Wróćmy do animacji oprogramowania. Nie musi być dynamiczny. Możesz utworzyć obiekt i korzystać z kodu, określić jego lokalizację na scenie, a następnie sprawić, że się porusza. W takiej sytuacji za każdym razem, gdy rozpoczynasz ten klip, ten sam kod będzie działał, powodując ten sam ruch. I jest oczywiste, że tu nie ma głośników.

A co, jeśli weźmiesz ten sam obiekt i za pomocą kodu, losowo określ lokalizację tego obiektu, kierunek jego ruchu i prędkości? W takiej sytuacji, po uruchomieniu rolki, za każdym razem, gdy zobaczymy coś innego od poprzedniego.

Ale jest trzecia opcja. Po uruchomieniu wałka zostanie ustalona, \u200b\u200bmiesiąc i rok, a na podstawie tych danych jest zbudowana scena, na przykład, zimowy poranek, letnie popołudnie lub wrzesień wieczorem?

I oto czwarty. Podczas filmu widza, przy pomocy myszy lub klawiatury, woli, może zmienić niektóre czynniki? Pozwoliłoby to wchodzić w interakcje z obiektami na scenie. Taki film byłby daleko od tyle, ile kiedyś zobaczyliśmy, prawda? Byłoby to możliwe, nawet uratować terminatora!

Wirtualna rzeczywistość

Być może to najciekawszym aspektem dynamicznej animacji jest stosowanie obiektów matematyki i fizyki prawdziwego świata stworzony w nim. Możesz nie tylko poruszać taki obiekt poruszać się w kierunku losowym, ale także naśladować wpływ na grawitację. W rezultacie zacznie spadać. Kiedy koniec upadku uderzy w ziemię i odbicie, ale nie równa wysokości, której zaczął upaść. W końcu przestanie galopować i pozostanie leżeć na "ziemi".

Następnie możesz włączyć użytkownikowi wchodzić w interakcje:

• "Weź" mysz
• lub poruszaj się za pomocą klawiatury.

Po tym, jak użytkownik zacznie się z tym współpracować w ten sposób, będzie miał pełne uczucie, że jest to prawdziwy obiekt fizyczny.

Możesz zobaczyć samodzielnie, grając z czerwoną piłką poniżej.

Tworzenie takiej animacji, sprawiasz, że użytkownik uważasz, że nie tylko patrzy na to, jak poruszają się ramki, ale co jest w pewnej przestrzeni, którą stworzyłeś przez ciebie.. Jak długo tam będzie? Tak, dokładnie tak długo, jak on jest zainteresowany. Im więcej dajesz mu możliwości interakcji, tym dłużej pozostanie tam, a następnie również cofnął się wiele razy.

Wyniki

W tej lekcji wejściowej omówiliśmy:

• podstawy animacji;
• różnice animacji próbki i oprogramowania;
• główne zalety dynamicznej animacji.

Są to konceptualna, podstawowa wiedza, na podstawie której zostanie zbudowany cały kolejny materiał. darmowe mini kurs "Podstawy animacji w ActionScript 3.0».

W następujących lekcjach rozmawiam o niektórych narzędziach, które możesz zastosować w swojej pracy. Najbardziej oczywistym wykorzystaniem wszystkich informacji, które zostaną omówione w tym kursie, aby stworzyć gry. Oczywiste jest, że to oni wymagają największej interakcji z użytkownikiem, gdzie jest wymagane, aby rozwiązać pewne zadania i osiągnąć cele.

Ale informacje o tym kursie można skutecznie wykorzystać do pracy zawodowej jako projektant stron internetowych. Na przykład, aby utworzyć interesujące menu na stronie, reklamie banerowej lub aplikacji (programach) dla systemu edukacji.

A jaki rodzaj animacji powoduje bardziej zainteresowane osobiście? Napisz o tym, pozostawiając komentarz poniżej. Ponadto, jeśli masz jakieś pytania podczas badania tej lekcji, poprosić, zapytaj, aby odpowiedzieć na nie tylko z przyjemnością.

Do zobaczenia w następnej lekcji!

Włącz javascript, aby zobaczyć komentarze.

Jeśli jesteś mistrzem Novice Web Master i zdecydujesz się ożywić strony swojej witryny Lampa błyskowa. (Lampa błyskowa) animacja lub gotowe rolki flash, a następnie informacje na tej stronie są dla Ciebie.

Flash (przetłumaczone z języka angielskiego "Flash") Technologia rozpoczęła swoją rozwój od 1996 roku, a dziś nawet Novice Web Master jest zaznajomiony z takimi terminami jak:

• lampa błyskowa. transparent ;
• Lampa błyskowa menu ;
• Lampa błyskowa wygaszacz ekranu ;
• Elementy interaktywne, takie jak zegarki wykonane na flash .
• Piękny tag Cloud. w

I całe strony flash, w tym pomieszczenia czatu, książki gości, głosowanie i forum zaczęły pojawiać się w sieci bardziej często.
Z Adwentem Lampa błyskowa. animacja Tworzenie stron internetowych nabył nowy kierunek.
Witryna wykonana z pomocą technologii flash jest bardzo różna od swojego faceta HTML. Pierwszą rzeczą, która zawsze przyciąga uwagę użytkownika, jest wszelkiego rodzaju ruchome, błyszczące, migające, elementy transfuzji na stronie.

Co musisz oglądać flash

Obejrzeć animacja flash.lub jakakolwiek inna zawartość flash do przeglądarki musi być zainstalowana wtyczkę Flash, która można pobrać bezpośrednio z witryny rozwoju Flash - Macromedia (obecnie zawarta w firmie Adobe).
Warto to zauważyć, w przeciwieństwie do Internet Explorer.który może zainstalować wtyczkę tryb automatyczny, Inne przeglądarki, takie jak Opera lub Firefox-A, wymagają oddzielnej instalacji. Możesz pobrać wszystkie niezbędne programy z oficjalnej witryny Flash - Adobe.com.

Gdzie uzyskać źródło do tworzenia witryny.

Stworzenie animacji flash zajmuje dużo czasu, wysiłku i wiedzy. Często zdarza się, że coś jeden, a czasami, a czasami to nie wystarczy. I tutaj tak zwany Źródło błysku. W sieci jest pełne darmowe szablony Witryny flash i są pliki z rozszerzeniem .... .Fla.
Szablony zawierają wiele efektów animacji i pięknych przejść, nie trzeba zaimplementować jednego lub innego efektu, po prostu weź go z szablonu. Również szablony sprawią, że tworzą witrynę flash: Otwieranie szablonu i zmiany lub dodawania do niego informacje, otrzymasz oszałamiającą stronę flash w krótkim czasie i minimum wysiłku.

Tworzenie i edycja dysków flash.

Aby utworzyć rolki flash Konieczne jest wybranie programu za pomocą pomocy, którą pracujesz z lampą błyskową.
Dziś bezwarunkowy przywódca wśród produktu Macromedia Adobe Flash Professional CS3. Flash CS3 jest standardem przemysłowym dla rozwoju interaktywnego oprogramowanie multimedialne. Dla każdej platformy. Flash można zastosować do tworzenia gier, stron internetowych, prezentacji CD, banerów i bajków.

Aby wstawić filmy flash na stronie HTML, dwa znaczniki są używane jednocześnie -