Masz jedną lub dwie ikony, które chcesz ożywić z pomocą animacji. Co byś zaczynać? Przypuśćmy, że masz pliki SVG, programy Illustrator CC i po efektach CC, ale rozwiązanie wymienia Cię.

W tym artykule zamierzam zademonstrować, w jaki sposób można łatwo animować plik SVG, w tym przygotowanie pliku SVG w programie Illustrator i importowanie po efektach CC. Wyjaśnię również, jak konwertować go na kształt warstwy i dodać ruchy. I wreszcie porozmawiajmy o eksporcie i renderowaniu.

Koniec wyniku pracy.

Teraz chodźmy do najciekawszej części - nauczyć się ożywić obrazów.

Przygotowanie pliku SVG w programie Illustrator

Zacznijmy od otwarcia pliku SVG w Adobe Illustrator CC. Animuję małą ikonę samochodu, która jest dostępna za darmo na tydzień ikon.

Po otwarciu pliku musimy się nieustać i podzielić wszystkie obiekty na warstwach. Możesz to zrobić ręcznie lub używać Uwolnij się do warstw (sekwencja) Przyspieszyć proces. Przed importowaniem pliku pod wpływem efektów musimy zapisać go w formacie pliku Illustrator.

Nieprojekne obiekty możemy użyć wydania do warstw (sekwencji), aby nie wydawać cennego czasu.

Organizacja importu i plików pod wpływem CC

Teraz wszystko jest gotowe do importowania po efektach CC. Użyjmy kombinacji kluczy Ctrl + I (Windows)lub Polecenie + I. (Prochowiec)Aby przesłać okno dialogowe Importować plik.lub przejdź do Plik\u003e Importuj\u003e Plik ... Tam wybierz przygotowany przez nas plik Illustrator. CC i kliknij Import.Małe okno dialogowe powinno pojawić się z nazwą wybranego pliku. Wybierać Kompozycja z listy rozwijanej o nazwie Importować rodzaj..

Jeszcze szybki sposób Importowanie pliku - dwukrotnie kliknij miejsce kolumny na panelu projektu.

W panelu panelu osi czasu zobaczymy nową kompozycję. Dwa razy na nią kliknij. Teraz musimy zobaczyć warstwy Illustrator CC z pomarańczowymi ikonami po lewej stronie nazw.

Przed kontynuowaniem sprawy musimy przekształcić wszystkie te warstwy Warstwy kształtu.. Musimy podświetlić je wszystkie Ctrl + A / Command + Alub ręcznie za pomocą Shift + Left Mouse. Po tym kliknij kliknij prawym przyciskiem myszy mysz na warstwie i wybierz Utwórz\u003e Utwórz kształty z warstwy wektorowej.

Teraz, że nowe warstwy są podświetlone, przeciągnij je top Panele nad warstwami Illustrator CC, a następnie usuń warstwy Illustrator CC, aby nie przeszkadzać.

Konwersja warstw Illustrator CC w warstwach kształtów pod wpływem efektów CC

Chociaż nie jest to konieczne, ważne jest, aby otrzymać każdą warstwę odpowiedniej nazwy i / lub oznaczono ją z kolorami. Pozwoli nam skuteczniej pracować, ponieważ się skupimy klatki kluczowe. W poniższym przykładzie kolor inskrypcji mniej lub mniej odpowiada wypełnić odpowiednie warstwy.

Aby etykietować warstwy kształtu z odpowiednimi nazwami, kwiatami, napisami i lokalizacją, są bardzo praktyczne.

Użyj kombinacji klawiszy, aby skonfigurować ustawienia Ctrl + K / Command + K lub Skład\u003e Ustawienia kompozycji ... Z ustawień kompozycji musimy wybrać szerokość, wysokość, szybkość ramki i czas trwania (szerokość, wysokość, szybkość ramki i czas trwania). W tym projekcie wybrałem 60 klatek na sekundę, aby animacja była gładka.

Na ten moment Wydaje się, że wszystko jest gotowe do pracy, ale jest kolejna rzecz do zrobienia. Musimy grupować pewne warstwy razem, aby ich ruchy były synchronizowane z główną warstwą, którą możemy kontrolować. Ta metoda jest nazywana Rodzicielstwo..

Użyj bata Wybierz, aby przypisać warstwę nadrzędną do kilku warstw.

W naszym przykładzie przepisałem mniej istotnych warstw (spółek zależnych), takich jak przednia szyba, części ciała, drewno i liny podstawowej warstwy korpusowej (warstwa nadrzędna). Pozwoliło mi kontrolować położenie i obracanie całego samochodu (z wyjątkiem kół) za pomocą warstwy nadrzędnej.

Tworzenie animacji

Chciałem, żeby samochód uderzył w kamień i wisiał trochę w powietrzu. Chciałem też, żeby drzewo poruszyło się w górę iw dół i otworzył się pień. Zacząłem od tworzenia kamienia, maszyny i koła. Wtedy nadszedł czas, aby przezwyciężyć największą przeszkodę - nałożyć akcję na choince. Po zakończeniu, podjąłem małe szczegóły, takie jak bagażnik i liny.

Szkic z opisem animacji

Przede wszystkim konieczne było wykonanie elementu lub warstwy w postaci kamienia, ale zamiast powrócić do Illustrator CC, aby dodać inną warstwę, po prostu użyłem narzędzia do narzędzia Piórek w CC. Pozwoliło mi szybko zaprojektować mały kamień.

Och, potężne narzędzie do pióra!

Pień był stosunkowo prostym zadaniem. Zainstalowałem go zza samochodu i zrobiłem punkt wsparcia w dolnym lewym wierzchołku. Używając bicza wyboru, wyznaczyłem go do jednostki nadrzędnej. Przedostatnim krokiem było danie wpływu obrotu, który z kolei dokonał momentu odbicia maszyny bardziej realistyczną. ProduktnaMovin w połączeniu z biblioteką Mobile Lottie.

Str.s. Moje ilustrator CC i po efektach pliki CC.

Zestaw ikon dostępnych do pobrania za darmo.

Format pliku flash (SWF) jest oparty na grafika wektorowa I zaprojektowany do skalowalności, kompaktowej grafiki dla Internetu. Ponieważ ten format pliku jest oparty na grafice wektorowej, obiekt zapisuje jakość obrazu w dowolnej rozdzielczości i jest idealny do tworzenia ram animacji. W programie Illustrator możesz utworzyć oddzielne ramki animacji na warstwach, a następnie wyeksportuj warstwy obrazu w poszczególne ramki do użytku na stronie internetowej. Możesz także określić symbolika W pliku Illustrator, aby zmniejszyć rozmiar animacji. Podczas eksportowania każdy znak jest zdefiniowany w pliku SWF tylko raz.

Zespół eksportowy (SWF)

Zapewnia największą kontrolę nad kompresją animacją i bitową.

Zapewnia większą kontrolę nad mieszaniną formatów SWF i bitów w fragmentowanym układzie. Polecenie to oferuje mniej parametrów obrazu niż "Eksport" (SWF), ale używa ostatnich używanych parametrów poleceń do "Eksportuj" (patrz).

Przygotowując obiekt, aby zapisać w formacie SWF, pamiętaj o następujących zaleceń.

Korzystając z aplikacji Central Application, możesz zobaczyć, jak obiekt graficzny Illustrator będzie wyglądał w aplikacji. Odtwarzacz Flash. Na różnych urządzeniach kieszonkowych.

Wstawianie ilustruktora graficznego

Stworzone przez dodatek Illustrator. Obiekt graficzny może być szybko, po prostu i bez trudności Kopiuj i wklej do aplikacji Flash.

Podczas wkładania obiektu graficznego Illustrator, następujące atrybuty są zapisywane w aplikacji Flash.

Kontury i figury

• Grubość groźnowa

  Definicja gradientów

  Tekst (w tym czcionki OpenType)

  Podobne obrazy

• Tryby nakładki

Ponadto ilustrator i flash obsługują następujące możliwości podczas wkładania obiektu graficznego.

Podświetlając warstwy ilustratora w obiekcie graficznym najwyższy poziom Całe wstawienie ich do warstw aplikacji flash i ich właściwości (widoczność i blokowanie) są zapisywane.

Formaty kolorów Illustratora innych niż RGB (CMYK, stopnie szarej i formatów użytkownika) są konwertowane przez flash format RGB.. Kolory RGB są wkładane w zwykły sposób.

Podczas importowania lub wkładania obiektu graficznego ilustrator można zapisać przy użyciu różnych parametrów, aby zaoszczędzić pewne efekty (na przykład, cień spadł przez tekst) jako filtry flash.

Flash utrzymuje maski Illustrator.

Eksport plików SWF z aplikacji Illustrator

Pliki SWF eksportowane z aplikacji Illustrator odpowiadają jakości i stopniu kompresji plików SWF eksportowanych z aplikacji Flash.

Podczas eksportowania można wybrać jeden z wielu z góry określonych stylów, które zapewniają optymalne wyjście i określa metodę stosowania wielu obszarów montażowych, metodę do konwersji znaków, warstw, teksta i masek. Na przykład można określić eksport znaków Illustrator w postaci rolek lub graficzne obrazy, a także stworzenie znaków SWF z warstw ilustratora.

Importuj pliki Illustrator w aplikacji Flash

Aby utworzyć pełny układ w aplikacji Illustrator, a następnie zaimportuj go do aplikacji Flash w jednym kroku, możesz zapisać obiekt graficzny w swoim formacie Illustrator (AI) i zaimportuj go za pomocą wysokiej dokładności w aplikacji Flash przy użyciu polecenia File \u003e "Importuj do obszaru roboczego" lub "Plik"\u003e Importuj do biblioteki.

Jeśli plik Illustrator zawiera kilka obszarów montażowych, wybierz obszar instalacyjny do importowania w oknie dialogowym Importuj program Flash i określ ustawienia dla każdej warstwy w tym obszarze montażowym. Wszystkie obiekty w wybranym obszarze montażowym są importowane do programu Flash jako pojedynczą warstwę. Podczas importowania innego obszaru montażowego z tego samego pliku AI obiekty z tego obszaru montażowego są importowane do programu Flash jako nowa warstwa.

Podczas importowania graficznego ilustratora obiektu w postaci plików AI, EPS lub PDF, aplikacja Flash zapisuje te same atrybuty, jak podczas wkładania ilustruktora obiektów graficznych. Ponadto, jeśli plik importowany Illustrator zawiera warstwy, mogą być importowane w jednej z następujących metod.

Konwertuj warstwy Illustrator do warstw flash.

Konwertuj warstwy Illustrator do ramek Flash.

Konwertuj wszystkie warstwy ilustratora na jedną warstwę flash.

Niedawno animacja SVG (skalowalna grafika wektorowa wektorowa) grafika na stronach i aplikacjach stały się bardzo popularne. Wynika to z tego, że wszystko nowe przeglądarki Już wspieraj ten format. Oto informacje dla wspierania przeglądarek SVG.

W tym artykule omówiono najprostszy przykład animacji wektora SVG za pomocą leniwej linii malarza jQuery.

Kod źródłowy

Aby spełnić i całkowite zrozumienie tego zadania, podstawową znajomość HTML, CSS, JQUERY, ale niekoniecznie, jeśli po prostu chcesz ożywić SVG) Chodźmy!

I tak kroki, które musimy wykonać:

1. Utwórz odpowiednią strukturę plików
2. Pobierz i podłącz wtyczkę
3. Narysuj fajny obraz konturowy w programie Adobe Illustrator
4. Konwertuj nasze zdjęcie w Lazy Line Converter
5. Włóż wynikowy kod w Main.js
6. Dodaj trochę CSS do smaku

1. Utwórz poprawną strukturę plików
Dzięki temu pomoże to usłudze IniteZr, w której należy wybrać parametry, jak na poniższym rysunku.

• Klasyczny H5BP (HTML5 Płyta kotła)
• Brak szablonu.
• Po prostu HTML5 Shiv.
• Minilifikowany
• Tj. Cases.
• Rama chromowana.
• Następnie kliknij Pobierz go!

2. Pobierz i podłącz wtyczkę

Ponieważ Inicizr jest wyposażony w najnowszą bibliotekę jQuery, z archiwum, które musimy pobrać z repozytorium projektu Lazy Line Malarz, musisz przenieść tylko 2 pliki do naszego projektu. Pierwszy jest "jQuery.lazylinepainter-1.1.min.js" (wersja wtyczki może się różnić) Jest w głównym folderze powstałego. Drugi jest przykładem / JS / Vendor / Raphael-Min.js.

Te 2 pliki są umieszczane w folderze JS. I podłącz je do naszej index.html przed Main.js w następujący sposób:

3. Narysuj stromy obraz konturowy w programie Adobe Illustrator

1. Rysujemy nasz obraz konturowy w Illustrator (najłatwiejszym sposobem na zrobienie z narzędziem do pióra)
2. Konieczne jest, aby kontury naszego rysunku nie zamykają TC dla naszego efektu. Początek i kończy
3. Nie powinno być wypełnienia
4. Maksymalny rozmiar pliku - 1000 × 1000 px, 40 kB
5. Przycinanie obiektu Obiekt\u003e Artoki\u003e Dopasowane do boisk boards
6. Zapisz w formacie SVG (odpowiednie są standardowe ustawienia zapisywania))

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

4. Konwertuj nasze zdjęcie w Lazy Line Converter
Wystarczy przeciągnij ikonę w oknie, który na poniższym rysunku.
Gruby, kolor obwodu i prędkość animacji można zmienić w samym kodzie, który pojawi się po konwersji!

5. Włóż wynikowy kod w Main.js
Teraz po prostu włóż otrzymany kod w pustym pliku Main.js
Parametry:
Strokewidth - grubość konturu
Strokecolor - kolor konturowy
Możesz także zmienić prędkość rysunku każdego wektora, zmieniając wartości parametru czasu trwania (domyślnie 600)

6. Dodaj kilka CSS do smaku
Usuń z akapitu index.html

Witaj świecie! To jest kotłownia HTML5.

A zamiast go wkłada blok, w którym nastąpi nasza animacja

następnie dodaj kilka CSS do pliku Main.css, aby uzyskać bardziej przyjemny projekt:

Ciało (tło: # f3b71c;) #icony (pozycja: ustalona; top: 50%; w lewo: 50%; marża: -300px 0 0 -400px;)

zapisz wszystkie pliki.
Teraz po prostu otwórz index.html w nowoczesnej przeglądarce i ciesz się efektem.

Str.s. Począwszy od maszyny lokalnej, początek animacji uruchamia się przez kilka sekund.

Przezroczysty GIF w Adobe Illustrator jest następujący. Przechodzimy do pliku\u003e Zapisz dla menu Web & Urządzenia (Alt + Ctrl + Shift + S). W oknie, które otwiera się w zoptymalizowanym polu Plik Plik, musisz najpierw przejść do karty. Rozmiar obrazu (Rozmiar obrazu). Faktem jest, że cała strona spada do okna optymalizacji, a to zwykle nie ma potrzeby. Dlatego na karcie Rozmiar obrazu usuń zaznaczenie z pola wyboru Klips do podręcznika. (Przytnij rozmiar strony) i naciśnij przycisk Zastosuj.

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

Potem definiujemy, jakie kolory będą przejrzyste. Wszystkie kolory obecne na obrazie znajdują się w zakładce. Kolorowy stół (Stół kolorowy) i wyświetlany w postaci kolorowych kwadratów. Wybierz na pasku narzędzi po lewej stronie narzędzia okna Eyedropper. (pipeta).

Możesz zdefiniować kolory na dwa sposoby. Najłatwiejszym sposobem określenia koloru pipety bezpośrednio na obrazie - po tym, kolor jest podświetlony na tabeli kolorów z ciemnym uderzeniem. Cóż, jeśli wiesz dokładnie, jaki kolor powinien być przezroczysty, możesz zaznaczyć go bezpośrednio na stole kolorów, naciskając odpowiedni kolorowy kwadrat. W pierwszym i drugim przypadku, jeśli chcesz wybrać wiele kolorów, musisz pracować z klawiszem Shift (lub Ctrl). Po wybraniu koloru musisz określić program, aby był przezroczysty. Aby to zrobić, kliknij ikonę Mapy wybrane kolory do przezroczystego (Dodaj wybrane kolory do przezroczystości). Na zdjęciu ten przycisk jest kręcony, a czerwony kolor jest wybrany przezroczysty. Obraz pojawi się przezroczysty obszar, a kwadrat na stole tabeli zmienia swój widok - część go stanie się białym trójkątem. Aby anulować wybrany kolor, musisz podświetlić go w tabeli kolorów, a następnie ponownie kliknij mapy wybrane kolory na przezroczystą ikonę.

Kilka słów o sposobie określania przejrzystości. Opadające menu jest odpowiedzialne za to. Określ algorytm cyfrowy przezroczystośćW języku rosyjskim algorytm symulacji przezroczystości (rys. Poniżej). Możesz wykonać cztery wybory: brak przezroczystości Diter - bez algorytmu, dyfuzja Przezroczystość Dither - Diffuse Algorytm, Wzór Przezroczystość Dither - Wzór na podstawie wzoru i Przejrzystość hałasu Drugi - algorytm oparty na hałasie. W trybie algorytmu rozproszonego staje się aktywnym suwakiem Ilość. (Wartość), która umożliwia zmianę wartości dyfuzji. Co stosować w praktyce? W zależności od celu i obrazu. Nie używam tej opcji i zawsze zostawiam domyślne - bez przejrzystości DIVER.

Kliknij Zapisz - przezroczysty GIF. Gotowy. Praca została wykonana w wersji Adobe Illustrator w CS4 (V.14), ale wszystkie działania i redukcje klawiatury są istotne dla więcej wczesna wersja CS3 (v. 13).

Adobe Illustrator i After Effects
Importuj I. prosta animacja

Cześć. Dziś istnieje prosta animacja po efektach.

Zasoby: Adobe Illustrator CC
Adobe After Effects CC

Zacznijmy uczyć się od rysowania w programie Illustrator.

Remis
1) Narysuj tło za pomocą żółtego prostokąta

Rysunek 1 - Prostokąt

2) Narysuj krąg i Gradient Hill
Będziemy pracować trochę ponad krąg:
- Usuwamy niższy punkt na konturze, otrzymujemy łuk;
- Wydajmy prostą linię, zamykając dno łuku, otrzymujemy półkolę

Rysunek 2 - 1) Rysuj koło; 2) gradient; 3) Usuń punkt

3) Narysuj prostokąt i sprawi, że jest kopią
- jeden szary prostokąt;
- inny prostokąt ciemny szary
4) Narysuj trójkąt z gwiazdki, ustawiając liczbę promieni - 3

Rysunek 3 - 1) światło światło; 2) Zalec ciemności; 3) Trójkąt

5) Narysuj kota z piórem i prostymi figurami

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

A teraz bardzo GŁÓWNY za chwilę
Dystrybuuję zdjęcia na warstwach (fakt, że będzie animowany - na osobnej warstwie) w ten sposób:

Rysunek 5 - Wszystkie zdjęcia (znaczne znaczne warstwy)

Wszystko, teraz zapisujemy.
Zobaczmy ustawienia konserwacji

Rysunek 6 - Zapisz

A teraz następny etap. BliskoAdobe Illustrator i otwartych efektów.

Importuj po efektach
Plik - Importuj - Plik - Wybierz nasz zapisany plik Illustrator.
Wybierz, aby importować warstwy z Illustrator, jeśli dostarczysz materiał, otrzymamy zdjęcie z połączonymi warstwami, a my tego nie potrzebujemy.

Rysunek 7 - Importuj jako skład

Wszyscy importowane.
A teraz zobaczmy, co mamy. Kliknij dwukrotnie kompozycję Co by zostało otwarte i widzieliśmy warstwy (jeśli wszyscy zrobili wszystko, będzie kilka warstw). Dostajemy to, patrz rysunek

Rysunek 8 - Otwarta kompozycja

A teraz, za to, co tu jesteśmy dzisiaj - animacja.

Animacja B. Po efektach.
Ustaw punkt obrotu ze strzałek u góry za pomocą patelni za narzędziem (szybki klucz - y). Po prostu weź punkt i ruszaj się, gdzie jest to wymagane. W rezultacie będzie wyglądać tak ..

Rysunek 9 - Narzędzie i warstwy patelni

Cóż, wszystko, teraz idź do warstw do animacji.
Będziemy potrzebować strzałki warstwy i head_cat.
Zacznijmy od strzałki.
Otworzymy listę, znajdziemy i kliknij zegar. Ustawiamy pierwszy punkt na zerowym sekundzie. Całkowita animacja będzie trwała 2 sekundy.
Więc należy wykonać te ustawienia (w sumie umieścimy 3 punkty)

DRUGA.	0	1	2
	+66	- 70	+66

Tak będzie wyglądać:

Rysunek 10 - Strzałka rotacji

A teraz animowałem głową kota.
Otwórz głowę i znajdź Pozycja.
Będzie 4 punkty.
Będzie tylko ostatnia koordynacja nie dotykająca 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 - Głowica pozycji

Tak więc zasada animacji była taka. Strzałka kołysająca się z boku, gdy tylko zbliża się do kotka, wyciąga głowę do siebie, zatrzymując się w tej pozycji trochę, a następnie wraca do miejsca.

Ostatni etap

PRODUKCJA
Konieczne jest utworzenie gotowego produktu z pracy.
Idź do menu - Dodaj do renderowania kolejki
Panel renderowania otworzy się i wybierze format wyjściowy do modułu wyjściowego. Wziąłem * .mov

Rysunek 12 - Render

Kliknij przycisk renderowania i uzyskać wynik (po prostu nie zapomnij określić ścieżki).
To wszystko.