Dzisiaj nie dość zwykłej lekcji Adobe Illustrator.. Ponieważ tym razem nie zrobimy statycznego obrazu, ale najbardziej prawdziwej animacji. Wyobraź sobie, okazuje się być korzystanie z Adobe. Illustrator Możesz także rysować kreskówki :)

I nic na to nie potrzebujemy. Właściwa warstwa i organizacja eksportowa skończona praca W formacie SWF, gdzie każda warstwa jest przekształcana w ramę animacji. W dzisiejszej lekcji rysujemy animację odliczania w stylu retro. Na wyjściu film flash z tym jest to bardzo odliczanie.

Pierwszą rzeczą do zrobienia jest wyciągnięcie wszystkich niezbędnych przedmiotów do przyszłej animacji. Aby to zrobić, w oddzielnym dokumencie dokonał dwóch pozycji folii folii, okrąg w celach informacyjnych, który jest cięty do oddzielnych sektorów, tekstury i pionowej zarysowania, aby dodać efekt starożytności, a także wszystkie liczby i napisy.

Kiedy wszystkie części naszej kreskówki są gotowe, możesz rozpocząć tworzenie samej animacji. Dla wygody lepiej jest robić w nowym dokumencie. W tym samym czasie warstwy odgrywają rolę ramek animacji. W pierwszej warstwie musi tylko skopiować ramę filmu. Umieść go w środku obszaru roboczego.

Teraz utworzyć drugi warstwę i skopiuj w niej ramę na zdjęcia filmowe, w których otwory wokół krawędzi są wykonane z przesunięciem. Musi też znajdować się w centrum.

Tych dwóch warstw można już uzyskać animację ruchomego filmu. Ale później będziemy potrzebować znacznie więcej warstw. Dlatego zaznacz dwie pierwsze warstwy, przejdź do opcji panelu i wykonaj kopię warstwy.

Podobnie musimy gromadzić 12 warstw ramkami filmu, zadając jej ruch.

Teraz mamy całą grupę warstw i wszystkie są widoczne. W tym sensie górne warstwy są zablokowane przez niższą, która nie jest całkowicie wygodna do pracy. Dlatego możesz wyłączyć kilka warstw, klikając ikonę za pomocą oka w lewo od nazwy warstwy. Aby wyłączyć lub włączyć wszystkie warstwy jednocześnie, utrzymuj klawisz Alt naciśnięty po kliknięciu ikony Glazik. W tym i wyłączanie warstw, można zobaczyć dokładnie, co znajduje się w pewnej ramie naszej przyszłej animacji. A teraz, aby dodać lekkie jitter do ruchu filmu, musisz umieścić odebrane ramki w różnych kierunkach. Aby to zrobić, włącz tylko warstwę, z którą zamierzasz pracować ten momentA następnie przesuń ramkę na parę pikseli w dowolnym kierunku.

Kiedy przeszedłeś na wszystkie warstwy i dodałeś małą zmianę, możesz rozpocząć tworzenie animacji poruszającego się koła. Aby to zrobić, skopiuj okrąg składający się z sektorów, z dokumentu z częściami zamiennymi kreskówek i umieść go na pierwszej warstwie nad ramą folii.

Jeśli usuniesz wybór z kółku, będzie wyglądał jak pojedynczy liczbę całkowitą. To właśnie potrzebujemy.

Ale ponieważ składa się z oddzielnych sektorów, możesz, zmieniając swój kolor, bardzo szybko i łatwo tworzyć animację. Aby to zrobić, skopiuj ten okrąg w drugiej warstwie i spraw, aby pierwszego sektora lżejszy. Pamiętasz, że film drżący podczas jazdy, więc nie jest konieczne umieścić okręgu dokładnie w środku ramy. Umieść go na oku.

Podobnie, musisz skopiować koło do każdej kolejnej warstwy, podczas pomalowania linii szczotkowania do jednego sektora więcej niż poprzedni czas. Wszystkie razem te 12 warstw tworzą animację ruchu filmu za pomocą koła napełniania.

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

Następnie z kolei włącz następujące warstwy i skopiuj tam tę samą teksturę. Tak więc wyglądała na każdą ramkę, po prostu obróć ją na kąt 90 stopni. Jak już odgadłeś, musimy dodać teksturę do wszystkich 12 klatek.

Jeśli już jesteś zmęczony radzeniem sobie, mogę ci dostarczyć - pozostaje bardzo mało. Najtrudniejsze już za sobą. Pozostaje dodać pionowe zadrapania i prawie wszystko. Aby to zrobić, ponownie skopiuj oryginalne zadrapanie i umieść go w dowolnym miejscu w kilku warstwach. W moim przypadku zadrapania pojawiają się tylko w dwóch warstwach.

Teraz, który jest gotowy główny cykl z animacją filmu, pozostaje dodawanie liczb. Ponieważ pochodzi od 3 do 1 plus inne słowo idź !!!, to potrzebujemy jeszcze więcej warstw. Nie 12, ale aż 48. W tym celu musisz dokonać jeszcze trzech kopii gotowych warstw z animacją filmu.

A potem wszystko jest proste. Włączamy pierwszą warstwę i umieścimy tam trzy liczby.

Następnie musisz skopiować tę figurę w następujących warstwach, aż animacja koła zostanie zakończona. Po osiągnięciu następnej kopii warstwy, gdzie koło zostanie całkowicie wypełniony całkowicie, musisz umieścić dwa numery dwa. Podobnie skopiuj numer jeden do pożądanych warstw. A kiedy dostaniesz do ostatecznych warstw, zaprojektowanych do wpisania do Idź !!!, po prostu wyjmij okrąg przed skopiowaniem napisu w pożądanej warstwie.

W tym z animacją wszystko. Najważniejszą rzeczą nie jest zdezorientowana. Możesz dać warstwy niektóre wygodne nazwy, ale byłem w jakiś sposób leniwy :) A nawet gdy skończysz pracę, upewnij się, że włączaj wszystkie warstwy, klikając ikonę przeszklenia.

W oknie z ustawieniami eksportowymi należy zainstalować eksport jako: warstwy AI do ramy SWF. To jest ta opcja, która zamienia warstwy Illustrator w ramki animacji. Następnie kliknij przycisk Zaawansowany.

otwarty dodatkowe ustawienia. Tutaj trzeba ustawić szybkość klatek na szybkość klatek. Mam 12 klatek na sekundę. Zapętlenie znaku wyboru jest odpowiedzialne za animację cykliczną. Dzięki niej, wideo zostanie odtwarzane w okręgu. A opcja nakazu warstwy: Dolna w górę odtwarza warstwy Illustrator od dołu do góry w panelu. Właśnie to zbudowaliśmy naszą animację.

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

Teraz widzisz, że prosta animacja do zrobienia w Adobe Illustrator nie jest tak trudna, ponieważ wydaje się na pierwszy rzut oka.

Ale aby tworzyć długie rolki lub interaktywne aplikacje, nadal lepiej jest użyć Adobe Flash. albo inni edytory flash. Na przykład ten kot zrobiłem w starej Macromedia Flash, który wykopał w pracy.

Ostatni raz, HTML5 i CSS3 są używane coraz częściej tworzyć animację. Ten kod Obsługiwane przez nowoczesne przeglądarki i nie wymagają użycia flash gracza.

Roman aka Dacascas. Szczególnie dla blogu Note Micrstrum Illustrator

Subskrybuj nasz Newsletter, aby nie przegapić niczego nowego:

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).

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 wiele obszarów montażowych, wybierz obszar montażowy, aby zaimportować 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.

Adobe Illustrator i. Po efektach.
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.