Dzisiaj mamy niezwykłą lekcję Adobe Illustrator. Ponieważ tym razem nie zrobimy statycznego obrazu, ale prawdziwą animację. Wyobraź sobie, że za pomocą Adobe Illustratora można także rysować bajki :)

I nie potrzebujemy do tego niczego. Właściwa organizacja warstw i eksport końcowej pracy w formacie swf, gdzie każda warstwa jest konwertowana na ramkę animacji. W dzisiejszej lekcji narysujemy animację odliczania w stylu filmu retro. Wyjście powinno być filmem flash z tym samym odliczaniem.

Pierwszą rzeczą do zrobienia jest narysowanie wszystkich niezbędnych elementów do przyszłej animacji. Aby to zrobić, w osobnym dokumencie stworzyłem dwie pozycje klatki filmowej, okrąg do zliczania, który jest pocięty na osobne sektory, teksturę i pionową rysę, aby dodać efekt starożytności, a także wszystkie liczby i napisy.

Gdy wszystkie części naszej kreskówki będą gotowe, możesz rozpocząć tworzenie animacji. Dla wygody najlepiej to zrobić w nowym dokumencie. Jednocześnie warstwy będą odgrywać rolę klatek animacji. I w pierwszej warstwie wystarczy skopiować ramkę filmu. Ustaw go na środku obszaru roboczego.

Teraz utwórz drugą warstwę i skopiuj do niej ramkę filmu, w której otwory wzdłuż krawędzi są wykonane z przesunięciem. To także musi być wyśrodkowane.

Z tych dwóch warstw można już uzyskać animację ruchomego filmu. Ale później potrzebujemy znacznie więcej warstw. Dlatego wybierz pierwsze dwie warstwy, przejdź do opcji panelu i utwórz kopię warstw.

Podobnie musimy zgromadzić 12 warstw z ramkami filmowymi, które określają jego ruch.

Teraz mamy całą masę warstw i wszystkie są widoczne. W tym sensie, że górne warstwy są zasłonięte przez dolne, co nie jest zbyt wygodne do pracy. Dlatego możesz wyłączyć niektóre warstwy, klikając ikonę oka po lewej stronie nazwy warstwy. Aby wyłączyć lub włączyć wszystkie warstwy jednocześnie, przytrzymaj klawisz Alt, klikając ikonę oka. Włączając i wyłączając warstwy, możesz dokładnie zobaczyć, co znajduje się w określonej ramce naszej przyszłej animacji. A teraz, aby dodać drżenia ruchowi filmu, musimy nieco przesunąć otrzymane klatki w różnych kierunkach. Aby to zrobić, dołącz tylko warstwę, z którą zamierzasz obecnie pracować, a następnie przesuń ramkę o kilka pikseli w dowolnym kierunku.

Po przejściu przez wszystkie warstwy i dodaniu niewielkiego przesunięcia możesz rozpocząć tworzenie animacji ruchomego koła. Aby to zrobić, skopiuj okrąg składający się z sektorów z dokumentu z częściami z kreskówek i umieść go na pierwszej warstwie na ramce filmu.

Jeśli usuniesz zaznaczenie z koła, będzie ono wyglądać jak całość. Właśnie tego potrzebujemy.

Ale ponieważ składa się z oddzielnych sektorów, możesz, zmieniając ich kolor, bardzo szybko i łatwo tworzyć animacje. Aby to zrobić, skopiuj ten okrąg na drugą warstwę i rozjaśnij pierwszy sektor. Pamiętasz, że nasz film drży podczas ruchu, więc nie jest konieczne umieszczanie koła dokładnie na środku kadru. Ustaw go na oko.

Podobnie musisz skopiować okrąg na każdą kolejną warstwę, jednocześnie malując jeszcze jeden sektor jaśniejszym kolorem niż poprzednio. Te 12 warstw razem tworzy animację ruchu filmu z kółkiem wypełniającym.

Następnie dodaj teksturę do naszych warstw. Włącz pierwszą warstwę i skopiuj teksturę z pliku źródłowego z częściami zamiennymi.

Następnie włącz kolejne warstwy i skopiuj tam tę samą teksturę. Aby wyglądał inaczej na każdej ramce, wystarczy obrócić go o 90 stopni. Jak można się domyślić, musimy dodać teksturę do wszystkich 12 ramek.

Jeśli masz już dość kopiowania w porządku, mogę cię zadowolić - pozostaje bardzo niewiele. Najtrudniejsza część się skończyła. Pozostaje dodać pionowe rysy i prawie wszystko. Aby to zrobić, ponownie skopiuj oryginalną rysę i umieść ją w dowolnym miejscu na kilku warstwach. W moim przypadku rysy pojawiają się tylko w dwóch warstwach.

Teraz, gdy główna pętla z animacją filmu jest gotowa, pozostaje dodać liczby. Ponieważ liczymy od 3 do 1 oraz słowo Go !!!, potrzebujemy jeszcze więcej warstw. Nie 12, ale aż 48. Aby to zrobić, musisz wykonać jeszcze trzy kopie gotowych warstw z animacją filmową.

A potem wszystko jest proste. Włącz pierwszą warstwę i umieść tam numer trzy.

Następnie musisz skopiować ten rysunek na kolejne warstwy, aż do zakończenia animacji koła. Gdy dojdziesz do następnej kopii warstw, w której okrąg zostanie ponownie całkowicie wypełniony, musisz już wstawić numer dwa. W ten sam sposób skopiuj numer jeden na żądane warstwy. A kiedy dojdziesz do ostatnich warstw przeznaczonych do napisu Idź !!!, po prostu usuń okrąg przed skopiowaniem napisu na żądaną warstwę.

To wszystko z animacją. Najważniejsze, żeby się nie pomylić. Możesz nadać warstwom dogodne nazwy, ale byłem jakoś leniwy :) A jednak, kiedy skończysz pracę, pamiętaj, aby włączyć wszystkie warstwy, klikając ikonę oka.

W oknie z ustawieniami eksportu pamiętaj o ustawieniu opcji Eksportuj jako: Warstwy AI do ramek SWF. Ta opcja zamienia warstwy ilustratora w klatki animacji. Następnie kliknij przycisk Zaawansowane.

Zostaną otwarte ustawienia zaawansowane. Tutaj musisz ustawić częstotliwość klatek. Mam 12 klatek na sekundę. Zaznaczenie Pętla odpowiada za cykl animacji. Dzięki niej wideo będzie odtwarzane w kręgu. A opcja Kolejność warstw: od dołu do góry odtwarza warstwy ilustratora od dołu do góry w panelu. Tak właśnie zbudowaliśmy naszą animację.

Na wyjściu otrzymujemy film flash z naszą animacją.

Teraz widzisz, że tworzenie prostych animacji w programie Adobe Illustrator nie jest tak trudne, jak się wydaje na pierwszy rzut oka.

Ale aby tworzyć długie filmy lub aplikacje interaktywne, nadal lepiej jest używać Adobe Flash lub innych edytorów Flash. Na przykład zrobiłem tego kota w starej Macromedia Flash, którą wykopałem w moim miejscu pracy.

Ponadto ostatnio HTML5 i CSS3 są coraz częściej wykorzystywane do tworzenia animacji. Ten kod jest obsługiwany przez nowoczesne przeglądarki i nie wymaga użycia odtwarzacza flash.

Roman aka dacascas dostosowane do bloga MicroStock Illustrator Notes

Subskrybuj nasz biuletyn, aby nie przegapić niczego nowego:

Przejrzysty plik GIF w programie Adobe Illustrator wykonuje się w następujący sposób. Przejdź do Plik\u003e Zapisz dla Internetu i urządzeń (Alt + Ctrl + Shift + S). W oknie, które zostanie otwarte, w polu Zoptymalizowany format pliku przejdź najpierw do zakładki Rozmiar obrazu (Rozmiar obrazu). Faktem jest, że cała strona domyślnie wpada w okno optymalizacji, co zwykle nie jest konieczne. Dlatego na karcie Rozmiar obrazu odznacz pole. Klip do obszaru roboczego (Przytnij, aby dopasować do strony) i kliknij Zastosuj.

Następnie na liście wyboru formatu wybierz GIF i zaznacz pole Przezroczystość.

Następnie określamy, które kolory będą przezroczyste. Wszystkie kolory obecne na obrazie są zawarte w zakładce. Tabela kolorów (Karta kolorów) i są wyświetlane jako kolorowe kwadraty. Wybierz narzędzie na pasku narzędzi po lewej stronie okna Kroplomierz (pipeta).

Istnieją dwa sposoby definiowania kolorów. Najprostszym sposobem jest określenie koloru za pomocą pipety bezpośrednio na obrazie - następnie kolor zostanie podświetlony na tablicy kolorów ciemnym pociągnięciem. Cóż, jeśli dokładnie wiesz, jaki kolor powinien być przezroczysty, możesz go wybrać bezpośrednio na tabeli kolorów, klikając odpowiednie pole koloru. W pierwszym i drugim przypadku, jeśli chcesz wybrać kilka kolorów, musisz pracować z wciśniętym klawiszem Shift (lub Ctrl). Po wybraniu koloru musisz poinstruować program, aby był przezroczysty. Aby to zrobić, kliknij ikonę Odwzorowuje wybrane kolory na Przezroczyste (Dodaj wybrane kolory do przezroczystości). Na rysunku ten przycisk jest zakreślony kółkiem, a kolor czerwony jest wybrany jako przezroczysty. Na obrazie pojawi się przezroczysty obszar, a mały kwadrat na tablicy kolorów zmieni swój wygląd - jego część stanie się białym trójkątem. Aby cofnąć wybrany kolor, wybierz go w Tabeli kolorów, a następnie ponownie kliknij ikonę Mapy wybranych kolorów na Przezroczyste.

Kilka słów o sposobie ustawiania przezroczystości. Odpowiedzialne za to menu rozwijane. Określ algorytm roztrząsania przezroczystości, w języku rosyjskim - algorytm symulujący przezroczystość (ryc. poniżej). Można wybrać cztery opcje: Bez ditheringu przezroczystości - bez algorytmu, Dithering przezroczystości dyfuzyjnej - algorytm rozproszenia, Dithering przezroczystości wzoru - algorytm oparty na wzorach i Dithering przezroczystości hałasu - algorytm oparty na szumach. W trybie algorytmu rozproszonego suwak staje się aktywny Ilość (Wartość), co pozwala zmienić wartość dyfuzji. Co zastosować w praktyce? W zależności od celu i obrazu. Nie korzystam z tej opcji i zawsze pozostawiam ustawienie domyślne - Bez roztrząsania przezroczystości.

Kliknij Zapisz - przezroczysty plik GIF jest gotowy. Prace zostały wykonane w programie Adobe Illustrator w wersji CS4 (wer. 14), ale wszystkie działania i skróty klawiaturowe są istotne dla wcześniejszej wersji CS3 (wer. 13).

Format pliku Flash (SWF) jest oparty na wektorze i przeznaczony do skalowalnej, kompaktowej grafiki w Internecie. Ponieważ ten format pliku oparty jest na grafice wektorowej, obiekt utrzymuje jakość obrazu w dowolnej rozdzielczości i jest idealny do tworzenia ramek animacyjnych. W programie Illustrator możesz tworzyć osobne klatki animacji na warstwach, a następnie eksportować warstwy obrazów do osobnych klatek do użytku na stronie internetowej. Możesz także zdefiniować postacie w pliku programu Illustrator, aby zmniejszyć rozmiar animacji. Podczas eksportowania każdy znak jest definiowany w pliku SWF tylko raz.

Polecenie eksportu (SWF)

Zapewnia największą kontrolę nad animacją i kompresją bitów.

Zapewnia większą kontrolę nad mieszaniem formatów SWF i bitów w pofragmentowanym układzie. To polecenie oferuje mniej parametrów obrazu niż polecenie Eksport (SWF), ale używa ostatnio używanych parametrów polecenia Eksport (patrz).

Przygotowując obiekt do zapisania w formacie SWF, pamiętaj o następujących zaleceniach.

Za pomocą Device Central możesz zobaczyć, jak program Illustrator będzie wyglądał w programie Flash Player na różnych urządzeniach przenośnych.

Wstaw grafikę programu Illustrator

Grafikę utworzoną w programie Illustrator można szybko, łatwo i łatwo skopiować i wkleić do aplikacji Flash.

Po wklejeniu grafiki programu Illustrator do aplikacji Flash zachowane są następujące atrybuty.

Kontury i kształty

Grubość obrysu
Definicje gradientu
Tekst (w tym czcionki OpenType)
Powiązane obrazy
Tryby mieszania

Ponadto programy Illustrator i Flash obsługują następujące funkcje podczas wstawiania grafiki.

Gdy wybierzesz całe warstwy najwyższego poziomu w obiekcie graficznym Illustrator i wkleisz je do aplikacji Flash, warstwy i ich właściwości (widoczność i blokowanie) zostaną zapisane.

Formaty kolorów inne niż RGB Illustrator (CMYK, skala szarości i formaty niestandardowe) są konwertowane przez Flash na RGB. Kolory RGB są wklejane w zwykły sposób.

Podczas importowania lub wklejania grafiki programu Illustrator możesz użyć różnych parametrów, aby zapisać określone efekty (na przykład cień rzucany przez tekst) jako filtry Flash.

Flash zapisuje maski programu Illustrator.

Eksportuj pliki SWF z programu Illustrator

Pliki SWF eksportowane z programu Illustrator mają podobną jakość i współczynnik kompresji jak pliki SWF eksportowane z Flash.

Podczas eksportowania możesz wybrać jeden z wielu predefiniowanych stylów zapewniających optymalną wydajność i określić, jak korzystać z kilku obszarów roboczych, jak konwertować znaki, warstwy, tekst i maski. Na przykład można określić eksport symboli programu Illustrator jako klipy lub obrazy graficzne, a także tworzenie symboli SWF z warstw programu Illustrator.

Zaimportuj pliki programu Illustrator do aplikacji Flash

Aby utworzyć kompletny układ w programie Illustrator, a następnie zaimportować go do aplikacji Flash w jednym kroku, możesz zapisać obiekt graficzny w rodzimym formacie Illustrator (AI) i zaimportować go z dużą dokładnością do aplikacji Flash, używając opcji Plik\u003e Importuj do pracy obszar ”lub„ Plik ”\u003e„ Importuj do biblioteki ”.

Jeśli plik programu Illustrator zawiera wiele obszarów roboczych, wybierz obszar roboczy do zaimportowania z okna dialogowego Importuj we Flashu i określ ustawienia dla każdej warstwy w tym obszarze roboczym. Wszystkie obiekty w wybranym obszarze roboczym są importowane do Flash jako pojedyncza warstwa. Podczas importowania innego obszaru roboczego z tego samego pliku AI obiekty z tego obszaru roboczego są importowane do Flasha jako nowa warstwa.

Podczas importowania grafiki programu Illustrator jako pliki AI, EPS lub PDF Flash zachowuje te same atrybuty, co podczas wklejania grafiki programu Illustrator. Ponadto, jeśli importowany plik programu Illustrator zawiera warstwy, możesz je zaimportować na jeden z poniższych sposobów.

Konwertuj warstwy programu Illustrator na warstwy Flash.

Konwertuj warstwy programu Illustrator na ramki Flash.

Konwertuj wszystkie warstwy programu Illustrator na jedną warstwę Flash.

Ostatnio różne rodzaje animacji SVG (Scalable Vector Graphics) na stronach i aplikacjach stały się bardzo popularne. Wynika to z faktu, że wszystkie najnowsze przeglądarki obsługują już ten format. Oto informacje na temat obsługi przeglądarki SVG.

W tym artykule opisano najprostszy przykład animacji wektora SVG za pomocą lekkiej wtyczki Jquery Lazy Line Painter.

Kod źródłowy

Aby ukończyć i w pełni zrozumieć to zadanie, podstawowa znajomość HTML, CSS, Jquery jest pożądana, ale nie wymagana, jeśli chcesz tylko animować SVG). Zacznijmy!

I tak kroki, które musimy wykonać:

Utwórz poprawną strukturę plików
Pobierz i podłącz wtyczkę
Narysuj fajny obraz konturowy w programie Adobe Illustrator
Konwertuj nasz obraz na Lazy Line Converter
Wklej wynikowy kod do main.js
Dodaj trochę CSS do smaku

1. Utwórz poprawną strukturę pliku
Pomoże nam w tym usługa Initializr, w której musisz wybrać parametry jak na poniższym obrazku.

Classic H5BP (płyta kotła HTML5)
Bez szablonu
Tylko HTML5 Shiv
Zminimalizowane
Klasy IE
Chromowana ramka
Następnie kliknij Pobierz!

2. Pobierz i podłącz wtyczkę

Ponieważ initializr jest wyposażony w najnowszą bibliotekę Jquery, z archiwum musimy pobrać z repozytorium projektu Lazy Line Painter, musimy przenieść tylko 2 pliki do naszego projektu. Pierwszy to „jquery.lazylinepainter-1.1.min.js” (wersja wtyczki może się różnić), znajduje się w katalogu głównym odebranego folderu. Drugi to przykład / js / vendor / raphael-min.js.

Te 2 pliki są umieszczone w folderze js. I podłącz je do naszego index.html przed main.js w następujący sposób:

3. Narysuj fajny obraz konturowy w programie Adobe Illustrator

Rysujemy nasz kontur obrazu w programie Illustrator (najłatwiej to zrobić za pomocą narzędzia Pióro)
Konieczne jest, aby kontury naszej figury nie zamykały się, ponieważ dla naszego efektu potrzebny jest początek i koniec
Nie powinno być wypełnienia
Maksymalny rozmiar pliku - 1000 × 1000 px, 40kb
Utwórz kadr do granic obiektu Obiekt\u003e Obszary robocze\u003e Dopasuj do granic obszarów roboczych
Zapisz w formacie SVG (wystarczą standardowe ustawienia zapisu)

Na przykład możesz użyć ikon w załączniku.

4. Konwertuj nasz obraz na Lazy Line Converter
Po prostu przeciągnij ikonę do pola na obrazku poniżej.
Grubość, kolor konturu i szybkość animacji można zmienić w samym kodzie, który pojawia się po konwersji!

5. Wklej wynikowy kod do main.js
Teraz wystarczy wkleić wynikowy kod do pustego pliku main.js
Parametry:
strokeWidth - grubość konturu
strokeColor - kolor konturu
Możesz także zmienić prędkość rysowania każdego wektora, zmieniając wartości parametru czasu trwania (domyślnie 600)

6. Dodaj trochę CSS do smaku
Usuń akapit z index.html

Witaj świecie! To jest Boilerplate HTML5.

I zamiast tego wstawiamy blok, w którym odbędzie się nasza animacja

następnie dodaj trochę CSS do pliku main.css, aby uzyskać ładniejszy wygląd:

Korpus (tło: # F3B71C;) # ikony (pozycja: stała; góra: 50%; lewa: 50%; margines: -300px 0 0 -400px;)

zapisz wszystkie pliki.
Teraz wystarczy otworzyć index.html w nowoczesnej przeglądarce i cieszyć się efektem.

P.S. podczas uruchamiania na komputerze lokalnym rozpoczęcie animacji może być opóźnione o kilka sekund.

Adobe Illustrator i After Effects
Import i prosta animacja

Hej. Dzisiejsza recenzja to prosta animacja w After Effects.

Zasoby: Adobe Illustrator CC
Adobe After Effects CC

Rozpocznijmy badanie od rysowania w Illustratorze.

Remis
1) Narysuj żółty prostokąt jako tło

Rysunek 1 - Prostokąt

2) Narysuj okrąg i wypełnij go gradientem
Popracujmy trochę nad kołem:
- usuń dolny punkt na konturze, uzyskaj łuk;
- narysuj linię prostą, zamykając spód łuku, otrzymujemy półkole

Rysunek 2 - 1) narysuj okrąg; 2) gradient; 3) usuń punkt

3) Narysuj prostokąt i wykonaj jego kopię
- jeden prostokąt jest szary;
- drugi prostokąt jest ciemnoszary
4) Rysujemy trójkąt z gwiazdki, ustawiając liczbę promieni - 3

Rysunek 3 - 1) światło proste; 2) prostokątny ciemny; 3) trójkąt

5) Narysuj kota za pomocą pióra i prostych kształtów

Rysunek 4 - 1) głowa; 2) szyja; 3) ciało; 4) noga; 5) ogon

A teraz najbardziej GŁÓWNY za chwilę
Rozłóż zdjęcia na warstwy (co będzie animowane - na osobnej warstwie) w następujący sposób:

Rycina 5 - wszystkie zdjęcia (czerwony znacznik ważnych warstw)

Wszystko, teraz oszczędzaj.
Zobaczmy ustawienia zapisu

Rysunek 6 - Zapisz

A teraz następny krok. BliskoAdobe Illustrator i otwórz program After Effects.

Importuj do After Effects
Plik - Import - Plik - wybierz nasz zapisany plik Ilustrator
Wybieramy importowanie warstw z programu Illustrator, jeśli umieścimy materiał, otrzymamy obraz ze scalonymi warstwami, ale nie jest nam to potrzebne.

Rysunek 7 - Importuj jako skład

Wszystkie zaimportowane.
Zobaczmy teraz, co mamy. Kliknij dwukrotnie kompozycję otworzy się i zobaczyliśmy warstwy (jeśli wszystko zostało zrobione poprawnie, będzie kilka warstw). Rozumiemy to, patrz rysunek

Rycina 8 - Kompozycja otwarta

A teraz jesteśmy tu na dziś Animacja.

Animacja w Po efektach
Ustaw punkt obrotu na strzałce u góry za pomocą narzędzia Przesuń za (skrót - Y). Po prostu weź punkt i przenieś go tam, gdzie chcesz. W rezultacie będzie to wyglądać tak ...

Rysunek 9 - Narzędzie Przesuwanie i warstwy

Cóż, to wszystko, przejdź teraz do warstw animacji.
Potrzebujemy warstwy Arrow i Head_cat.
Zacznijmy od strzałki.
Otworzymy listę, znajdź i kliknij zegar. Więc punkt pierwszy ustawiamy na zero sekund. W sumie animacja potrwa 2 sekundy.
Oto ustawienia, które musisz wykonać (wystarczy umieścić 3 punkty)

druga	0	1	2
	+66	- 70	+66

Tak to będzie wyglądać:

Rysunek 10 - Strzałka obrotu

A teraz animujemy głowę kota.
Rozwiń head_cat i znajdź Pozycja.
Będą 4 punkty.
Tylko ostatnia współrzędna zostanie zmieniona bez dotykania reszty.

druga	0.1	0.17	1.12	2.0
Pozycja	689.3	729.3	729.3	689.3

Patrzymy na zdjęcie.

Rysunek 11 - Ustaw głowicę

Tak więc zasada animacji była taka. Strzała kołysze się na boki, gdy tylko zbliża się do kociaka, wciąga głowę w siebie, zatrzymuje się nieco w tej pozycji, a następnie przywraca ją na swoje miejsce.

Ostatni etap

Produkcja
Konieczne jest stworzenie gotowego produktu z pracy.
Przejdź do menu - Dodaj do kolejki renderowania
Otwiera się panel Renderowania, aw module wyjściowym (dwa kliknięcia) wybieramy format wyjściowy. Wziąłem * .mov

Rysunek 12 - Renderowanie