Przezroczysty plik GIF w programie Adobe Illustrator jest wykonywany w następujący sposób. Przejdź do Plik> Zapisz dla Internetu i urządzeń (Alt + Ctrl + Shift + S). W oknie, które się otworzy, w polu Zoptymalizowany format pliku musisz najpierw przejść do zakładki Rozmiar obrazu(Rozmiar obrazu). Faktem jest, że domyślnie cała strona wpada do okna optymalizacji i zwykle nie jest to konieczne. Dlatego na karcie Rozmiar obrazu usuń zaznaczenie pola wyboru Przytnij do obszaru roboczego(Przytnij do rozmiaru strony) i kliknij przycisk Zastosuj.
Następnie wybierz GIF z listy wyboru formatu i zaznacz pole wyboru Przezroczystość.
Następnie określimy, które kolory będą przezroczyste. Wszystkie kolory obecne na obrazie są zawarte w zakładce Tabela kolorów(Tabela 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. Najprościej jest określić kolor za pomocą zakraplacza bezpośrednio na obrazie - po tym kolor zostanie podświetlony w tabeli kolorów ciemnym pociągnięciem. Cóż, jeśli dokładnie wiesz, jaki kolor powinien być przezroczysty, możesz wybrać go bezpośrednio w tabeli kolorów, klikając odpowiedni kolorowy kwadrat. A 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 należy poinstruować program, aby był przezroczysty. Aby to zrobić, musisz kliknąć ikonę Odwzorowuje wybrane kolory na przezroczyste(Dodaj wybrane kolory do przezroczystości). Na ilustracji ten przycisk jest zakreślony, a kolor czerwony jest zaznaczony jako przezroczysty. Na obrazie pojawi się przezroczysty obszar, a kwadrat na tablicy kolorów zmieni swój wygląd - jego część stanie się białym trójkątem. Aby anulować wybrany kolor, musisz wybrać go w Tabeli kolorów, a następnie ponownie kliknąć ikonę Odwzorowuje wybrane kolory na przezroczysty.
Kilka słów o sposobie ustawienia przezroczystości. Odpowiada za to rozwijane menu. Określ algorytm ditheringu przezroczystości, w języku rosyjskim - Algorytm do symulacji przezroczystości (ryc. poniżej). Można dokonać czterech wyborów: No Transparency Dither — brak algorytmu, Diffusion Transparency Dither — algorytm rozproszony, Pattern Transparency Dither — algorytm oparty na wzorcu oraz Noise Transparency Dither — algorytm oparty na szumie. W trybie algorytmu rozproszonego suwak staje się aktywny Ilość(Kwota), która umożliwia zmianę wartości dyfuzji. Co zastosować w praktyce? W zależności od celu i wizerunku. Nie używam tej opcji i zawsze zostawiam ją domyślną - No Transparency Dither.
Kliknij Zapisz — przezroczysty gif gotowy. Prace przeprowadzono w Adobe Illustrator w wersji CS4 (v.14), ale wszystkie akcje i skróty klawiszowe są istotne dla więcej wczesna wersja CS3 (w. 13).
Teraz trochę skomplikujmy zadanie - zrobimy animowany baner Flash. Oczywiście nie ma potrzeby mówić o pełnoprawnej animacji Flash - istnieją do tego wyspecjalizowane pakiety. Ale aby stworzyć prosty, amatorski film, możesz użyć programu Illustrator.
Nie ma specjalnych narzędzi i narzędzi interfejsu, takich jak oś czasu, typowych dla programów do tworzenia animacji w programie Adobe Illustrator. Ale jest jedna subtelność - możesz używać warstw jako ramek.
Utwórz baner z samym tekstem.
- Pogrupuj postacie za pomocą polecenia Obiekt ›Grupa(Obiekt ›Grupa).
- Następnym zadaniem jest zrobienie konturów ze znaków czcionki, w przeciwnym razie poprawne ułożenie warstw nie zadziała. Aby to zrobić, wybierz grupę i wybierz Wpisz ›Utwórz kontury(Czcionka ›Ślad).
- Następnie otwórz menu palety Warstwy(Warstwy), klikając przycisk strzałki na palecie (rysunek 8.11).
Ryż. 8.11... Menu palety warstw
Interesuje nas polecenie w tym menu Zwolnij na warstwę (sekwencja)(Konwertuj na warstwy (sekwencyjnie)), który konwertuje każdy pojedynczy obiekt do Nowa warstwa... Należy pamiętać, że podczas korzystania z polecenia należy wybrać grupę. Grupa, a nie warstwa Warstwa 1.
Jak powinna wyglądać paleta Warstwy(Warstwy) po wykonaniu Zwolnij na warstwę (sekwencja)(Konwertuj na warstwy (sekwencyjne)), pokazane na ryc. 8.12.
Ryż. 8.12... Paleta warstw po wykonaniu polecenia Zwolnij na warstwę (sekwencja)
To kończy przygotowanie, możesz zaoszczędzić Zapisz dla sieci(Zapisz dla Internetu) w SWF. SWF to główny format grafiki opartej na Flashu. Bardziej trafne byłoby stwierdzenie, że jest to format Flash (ryc. 8.13).
Prawdopodobnie dzisiaj wszyscy użytkownicy są już mniej lub bardziej zaznajomieni z Flashem. Jest to obecnie najbardziej rozpowszechniony format animacji w Internecie i jest używany do budowy zdecydowanej większości multimedialnych stron internetowych.
Oczywiście Adobe Illustrator nie ma nawet jednej dziesiątej możliwości Flasha, bo program do tego nie jest przeznaczony. Niemniej jednak możesz w nim zrobić statyczny obraz lub prosta animacja.
Ryż. 8.13... Ustawienia optymalizacji dla formatu SWF
Istnieją następujące ustawienia.
- Tylko czytać(Tylko czytanie). Jeśli zaznaczysz pole, plik zostanie zapisany w taki sposób, że nie będzie już można go otworzyć do edycji w żadnym programie. To z jednej strony zmniejsza rozmiar plików, a z drugiej chroni Twoje prawa autorskie.
- Ustawienie wskazywane przez 1. Parametrem określającym rodzaj zapisu jest obraz lub animacja.
- Jeśli wybierzesz opcję Plik AI do pliku SWF (Plik programu Illustrator do pliku SWF), obraz zostanie zapisany jako statyczny obraz, który całkowicie powtarza to, co widzisz na ekranie podczas pracy w programie Illustrator.
- Warstwy do ramek SWF(Warstwy do ramek SWF) umożliwia animowanie istniejących warstw do renderowania jako ramek. Musimy wybrać tę konkretną opcję.
- Jakość krzywej(Jakość krzywej). Dokładność krzywych w pliku, aby powtórzyć krzywe oryginalnego obrazu. Zmniejszenie tego parametru znacznie obniża jakość, szczególnie w obszarze drobnych detali, ale zmniejsza się rozmiar pliku. W naszym przypadku optymalna wartość to „7”.
- Częstotliwość wyświetlania klatek(Opóźnienie ramki). Szybkość klatek, a co za tym idzie szybkość animacji. Aby efekt był poprawny, ustaw nie więcej niż 4 klatki na sekundę.
- Pętla(Powtarzać). Odtwórz animację wiele razy. Nadaje się do animacji, w których ważna jest powtarzalna pętla. Baner jest tego typu.
W ostatnim czasie na stronach internetowych i aplikacjach bardzo popularne stały się różnego rodzaju grafiki SVG (Scalable Vector Graphics). Wynika to z faktu, że wszystkie najnowsze przeglądarki obsługują już ten format. Oto informacje na temat obsługi przeglądarek SVG.
W tym artykule omówiono najprostszy przykład Animacje SVG wektory za pomocą lekkiej wtyczki Jquery Lazy Line Painter.
ŹródłoAby ukończyć i w pełni zrozumieć to zadanie, wymagana jest podstawowa znajomość HTML, CSS, Jquery, ale nie jest wymagana, jeśli chcesz tylko animować SVG) Zaczynajmy!
A więc kroki, które musimy wykonać:
- Stwórz poprawną strukturę plików
- Pobierz i podłącz wtyczkę
- Rysuj fajną grafikę konturową w programie Adobe Illustrator
- Konwertuj nasze zdjęcie do konwertera Lazy Line
- Wklej otrzymany kod do main.js
- Dodaj trochę CSS do smaku
1. Stwórz prawidłową strukturę plików
Pomoże nam w tym usługa Initializr, gdzie należy wybrać parametry jak na poniższym obrazku.
- Klasyczny H5BP (płyta kotła HTML5)
- Brak szablonu
- Tylko HTML5 Shiv
- Zminimalizowany
- Klasy IE
- Chromowana rama
- Następnie kliknij Pobierz!
2. Pobierz i podłącz wtyczkę
Ponieważ initializr jest dostarczany z najnowszą biblioteką jquery, z archiwum, które musimy pobrać z repozytorium projektu Lazy Line Painter, do naszego projektu wystarczy przesłać tylko 2 pliki. Pierwszy to „jquery.lazylinepainter-1.1.min.js” (wersja wtyczki może się różnić) i znajduje się w katalogu głównym wynikowego folderu. Drugi to przykład /js/sprzedawca/raphael-min.js.
Te 2 pliki umieszczamy w folderze js. I łączymy je z naszym index.html przed main.js w ten sposób:
3. Narysuj fajny obraz konturowy w programie Adobe Illustrator
- Narysuj nasz zarys w programie Illustrator (najłatwiej to zrobić za pomocą narzędzia Pióro)
- Konieczne jest, aby kontury naszego rysunku się nie zamykały, ponieważ początek i koniec są niezbędne dla naszego efektu.
- Nie powinno być wypełnień
- Maksymalny rozmiar pliku - 1000 × 1000 px, 40kb
- Przytnij do obiektu> Obszary robocze> 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 nasze zdjęcie na konwerter Lazy Line
Po prostu przeciągnij swoją ikonę do poniższego pola.
Grubość, kolor konturu i szybkość animacji można zmienić w samym kodzie, który pojawi się po konwersji!
5. Wklej otrzymany kod do main.js
Teraz po prostu wklejamy powstały kod do pustego pliku main.js
Opcje:
strokeWidth - grubość konturu
strokeColor - kolor konturu
Możesz również 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.
A zamiast tego wstawiamy blok, w którym będzie się odbywała nasza animacja.
następnie dodaj trochę CSS do pliku main.css, aby uzyskać ładniejszy wygląd:
Treść (tło: # F3B71C;) #ikony (pozycja: stała; góra: 50%; lewa: 50%; margines: -300px 0 0 -400px;)
zapisz wszystkie pliki.
Teraz po prostu otwórz index.html w nowoczesnej przeglądarce i ciesz się efektem.
PS w przypadku uruchomienia na komputerze lokalnym rozpoczęcie animacji może zostać opóźnione o kilka sekund.
Dziś mamy nietypowy samouczek Adobe Illustrator. Ponieważ tym razem nie zrobimy statycznego obrazu, ale prawdziwą animację. Wyobraź sobie okazuje się z z Adobe Możesz także rysować bajki w programie Illustrator :)
I niczego do tego nie potrzebujemy. Kompetentna organizacja warstw i eksportu ostateczna praca do formatu swf, gdzie każda warstwa jest konwertowana na klatkę animacji. W dzisiejszym samouczku narysujemy animację odliczania w stylu retro. Wyjście powinno być filmem flash z tym właśnie odliczaniem.
Pierwszą rzeczą do zrobienia jest narysowanie wszystkich niezbędnych elementów do przyszłej animacji. W tym celu w osobnym dokumencie wykonałem dwie pozycje kadru filmowego, okrąg dla odniesienia, który został pocięty na osobne sektory, fakturę i pionową rysę, aby dodać efekt starożytności, a także wszystkie liczby i napisy.
Kiedy wszystkie części naszej kreskówki są gotowe, możesz zacząć tworzyć samą animację. Dla wygody najlepiej to zrobić w nowym dokumencie. W tym przypadku warstwy będą pełniły rolę klatek animacji. A na pierwszej warstwie wystarczy skopiować ramkę taśmy filmowej. Umieść go na środku obszaru roboczego.
Teraz utwórz drugą warstwę i skopiuj do niej pasek folii, w którym otwory wzdłuż krawędzi są przesunięte. Musi być również wyśrodkowany.
Z tych dwóch warstw możesz już uzyskać animację ruchomego filmu. Ale później potrzebujemy znacznie więcej warstw. Wybierz więc dwie pierwsze warstwy, przejdź do opcji panelu i zrób kopię warstw.
Podobnie musimy zgromadzić 12 warstw ruchomych obrazów filmu.
Teraz mamy całą masę warstw i wszystkie są widoczne. W tym sensie, że górne warstwy zasłaniają dolne, co nie jest zbyt wygodne w pracy. Dlatego możesz wyłączyć niektóre warstwy, klikając ikonę z okiem po lewej stronie nazwy warstwy. Aby wyłączyć lub włączyć wszystkie warstwy jednocześnie, przytrzymaj klawisz Alt podczas klikania ikony oka. Włączając i wyłączając warstwy, możesz dokładnie zobaczyć, co znajduje się w określonej klatce naszej przyszłej animacji. A teraz, aby dodać do ruchu filmu lekkie drżenie, musimy lekko przesunąć powstałe klatki w różnych kierunkach. Aby to zrobić, uwzględnij tylko warstwę, z którą będziesz pracować ten moment a następnie przesuń ramkę o kilka pikseli w obie strony.
Po przejściu przez wszystkie warstwy i dodaniu niewielkiego przesunięcia możesz zacząć tworzyć animację poruszającego się okręgu. Aby to zrobić, skopiuj okrąg składający się z sektorów z dokumentu z częściami rysunkowymi i umieść go na pierwszej warstwie nad ramką taśmy filmowej.
Jeśli usuniesz zaznaczenie okręgu, będzie on wyglądał jak pojedyncza całość. Właśnie tego potrzebujemy.
Ale ponieważ składa się z oddzielnych sektorów, możesz bardzo szybko i łatwo stworzyć animację, zmieniając ich kolor. Aby to zrobić, skopiuj ten okrąg do drugiej warstwy i rozjaśnij pierwszy sektor. Pamiętacie, że nasz film drży podczas ruchu, więc wcale nie jest konieczne umieszczanie koła dokładnie na środku kadru. Umieść go na oko.
W podobny sposób należy skopiować okrąg do każdej kolejnej warstwy, malując jaśniejszym kolorem o jeden sektor więcej niż poprzednio. Te 12 warstw razem tworzy film animowany z kołem wypełniającym.
Następnie musimy dodać teksturę do naszych warstw. Włącz pierwszą warstwę i skopiuj tam teksturę z oryginalnego pliku z częściami zamiennymi.
Następnie włącz kolejno kolejne warstwy i skopiuj tam tę samą teksturę. Aby na każdej klatce wyglądał inaczej, po prostu obróć go o 90 stopni. Jak można się domyślić, musimy dodać teksturę do wszystkich 12 klatek.
Jeśli jesteś już zmęczony kopiowaniem, mogę cię zadowolić - niewiele zostało. 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ż odliczamy od 3 do 1 plus słowo Go !!!, potrzebujemy jeszcze więcej warstw. Nie 12, ale aż 48. W tym celu należy wykonać jeszcze trzy kopie gotowych warstw z animacją filmu.
A potem wszystko jest proste. Włącz pierwszą warstwę i umieść tam numer trzy.
Następnie musisz skopiować tę figurę do kolejnych warstw, aż animacja okręgu się skończy. Kiedy dojdziesz do następnej kopii warstw, gdzie okrąg zostanie ponownie całkowicie zamalowany, musisz już umieścić numer dwa. W ten sam sposób skopiuj numer jeden do żądanych warstw. A kiedy dojdziesz do ostatnich warstw podpisu Go!!!, po prostu usuń kółko przed skopiowaniem podpisu do żądanej warstwy.
To wszystko z animacją. Najważniejsze, żeby się nie pomylić. Możesz nadać warstwom dogodne nazwy, ale byłem jakoś zbyt leniwy :) A jednak, kiedy skończysz, włącz ponownie wszystkie warstwy, klikając ikonę oka.
W oknie z ustawieniami eksportu ustaw opcję Eksportuj jako: Warstwy AI na Klatki SWF. To właśnie ta opcja zamienia warstwy programu Illustrator w klatki animacji. Następnie kliknij przycisk Zaawansowane.
Będzie otwarte dodatkowe ustawienia... Tutaj musisz ustawić szybkość klatek Szybkość klatek. Mam 12 klatek na sekundę. Za zapętlenie animacji odpowiada checkbox Looping. Dzięki niej wideo będzie odtwarzane w kółko. A opcja Kolejność warstw: Od dołu do góry odtwarza warstwy ilustratora od dołu do góry na panelu. Dokładnie tak zbudowaliśmy naszą animację.
Na wyjściu otrzymujemy wideo flash z naszą animacją.
Teraz widać, że wykonanie prostej animacji w programie Adobe Illustrator nie jest takie trudne, jak się wydaje na pierwszy rzut oka.
Ale do tworzenia długich filmów lub interaktywnych aplikacji nadal lepiej jest używać Adobe Flash lub innych edytorów flash. Na przykład zrobiłem tego kota w starym Macromedia Flash, który wykopałem w mojej pracy.
Ostatnio do tworzenia animacji coraz częściej wykorzystuje się HTML5 i CSS3. Ten kod jest obsługiwany przez nowoczesne przeglądarki i nie wymaga użycia odtwarzacza flash.
Roman aka dakasy specjalnie na bloga
Zapisz się do naszego newslettera, aby nie przegapić niczego nowego:
Optymalizacja grafiki internetowej
Informacje graficzne przesyłane są znacznie wolniej niż informacje tekstowe, a czas ładowania obrazów jest proporcjonalny do ich rozmiaru pliki graficzne... Dlatego szybkie ładowanie Strony internetowe przyjmują niewielki rozmiar osadzonej grafiki, co osiąga się poprzez ich optymalizację. Przez optymalizację obrazu rozumie się jego przekształcenie zapewniające minimalny rozmiar pliku przy zachowaniu wymaganej w tym przypadku jakości obrazu, co osiąga się przede wszystkim poprzez zmniejszenie liczby kolorów w obrazach graficznych, stosowanie skompresowanych i specjalnych formatów plików oraz optymalizację parametrów kompresji dla poszczególne fragmenty obrazów.
Program Illustrator ma wbudowane narzędzia do optymalizacji obrazu, które zapewniają szybki i wydajny proces optymalizacji za pomocą różnych metod podglądu. Podgląd daje dość dokładne wyobrażenie o tym, jak zoptymalizowany obraz będzie wyglądał w czasie rzeczywistym, co pomaga ocenić wynik optymalizacji i dokonać dobrego wyboru. żądane ustawienia... Możesz zoptymalizować zarówno obrazy utworzone bezpośrednio w programie Illustrator, jak i inne, na przykład zdjęcia, które mają zostać opublikowane w witrynie sieci Web.
Parametry optymalizacji ustawia się w oknie Zapisz dla sieci(Save for Web) wywoływane poleceniem o tej samej nazwie z menu Plik(Plik). Program oferuje jeden z czterech trybów podglądu, ale dwa najlepiej nadają się do oceny jakości optymalizacji:
- 2-Up(dwie opcje) - jednoczesne oglądanie oryginału i zoptymalizowanego obrazu zgodnie z określonymi ustawieniami (ryc. 1);
- 4-Up(cztery opcje) - w tym trybie obszar podglądu podzielony jest na cztery okna (rys. 2), w których wyświetlany jest obraz oryginalny oraz trzy wersje zoptymalizowanego: pierwsza wersja tworzona jest na podstawie ustawionych wartości optymalizacji, a druga dwa to warianty aktualnych ustawień optymalizacji.
Oba tryby mogą znacznie zaoszczędzić czas podczas wyszukiwania najlepszej opcji optymalizacji, ponieważ eliminują potrzebę zapisywania obrazów z różnymi ustawieniami optymalizacji, a następnie ich wizualnego porównywania. Ponadto można ocenić nie tylko jakość zoptymalizowanego obrazu, ale także jego rozmiar i czas ładowania dla różnych opcji połączenia. Dla porównania najwygodniejszy tryb to 4-Up (cztery opcje), który pozwala wizualnie ocenić wpływ kompresji lub redukcji palety na jakość obrazu i jego wielkość, a ostatecznie określić najlepsze parametry optymalizacja.
Illustrator umożliwia optymalizację grafiki internetowej w formatach nie tylko GIF, JPG, PNG-8 i PNG-24, ale także SWF i SVG. Zindeksowane obrazy z niewielką liczbą kolorów są przechowywane w Format GIF... Aby zapisywać obrazy w pełnym kolorze iw skali szarości — fotografie i bogatą w kolory grafikę, taką jak wypełnienia gradientowe — użyj Format JPG... W przypadku obrazów w pełnym kolorze z przezroczystymi obszarami zastosuj Format PNG co pozwala na zapisywanie zarówno indeksowanych, jak i pełnokolorowych obrazów, podczas gdy w formacie PNG-8 maksymalna możliwa liczba kolorów zoptymalizowanego obrazu wynosi 256, a w formacie PNG-24 obraz może mieć miliony kolorów, a zatem jest podobny do formatu JPEG. Różnica między PNG-24 a JPEG polega na tym, że metoda kompresji używana do optymalizacji obrazów PNG-24 nie powoduje utraty jakości, ale zwiększa rozmiar pliku. Formaty SVG i SWF łączą elementy graficzne, tekstowe i interaktywne, a także mogą być optymalizowane.
Rozważać konkretny przykład optymalizacja obrazu. Załóżmy, że logo witryny zostało opracowane w programie Illustrator (rys. 3), początkowo zapisane w formacie AI. Próba natychmiastowej optymalizacji pod kątem sieci nie przyniesie niczego dobrego, ponieważ w tym przypadku obraz zostanie automatycznie przycięty, co nie będzie uwzględniać rzeczywistego położenia napisu uzyskanego w wyniku deformacji (ryc. 4 i 5).
Dlatego spróbujmy wyeksportować logo do Format PSD zespół Plik => Eksportuj(Plik => Eksportuj) - rozmiar tworzonego obrazu wyniesie 143 KB. Otwórz wynikowy plik PSD i użyj polecenia Plik => Zapisz dla sieci(Plik => Zapisz dla Internetu). Biorąc pod uwagę ograniczoną liczbę kolorów obrazu, w tym przypadku format GIF jest optymalny, z określonymi ustawieniami, o których musisz zdecydować. Eksperymentując z ustawieniami, możesz się upewnić, że najwyższa jakość podaje domyślny algorytm kompresji programu Selektywny(Selektywny). Jeśli chodzi o wygładzanie, biorąc pod uwagę obecność wypełnienia gradientowego, lepiej wybrać algorytm z generowaniem szumu - Hałas(rys. 6). Rozmiar wynikowego pliku optymalizacji wyniesie 6729 KB (rys. 7), przy czym zachowana zostanie przezroczystość tła, co łatwo zweryfikować zapisując obraz w formacie GIF wraz z plikiem HTML (rys. 8). W rezultacie w ten przykład pliki emblem.html i emblem.gif zostały uzyskane w folderze Primer1.
guziki
Nieodzownym specyficznym elementem projektu każdej strony WWW są kontrolki graficzne - przyciski. Bez nich po prostu nie sposób wyobrazić sobie strony. Przyciski rysowania stały się dziś szczególnym gatunkiem, a program Illustrator umożliwia tworzenie najbardziej skomplikowanych opcji. Na przykład przyciski zaprojektowane jako obiekty siatki i / lub z maskami nakładek wyglądają znacznie bardziej imponująco niż zwykłe.
Rozważmy opcję utworzenia okrągłego wypukłego przycisku w programie Illustrator. Narysuj obiekt wektorowy w kształcie koła wypełniony dowolnym kolorem (rys. 9) i przekształć go w siatkę za pomocą polecenia Obiekt => Utwórz siatkę gradientową(Obiekt => Utwórz siatkę gradientową), określając cztery wiersze i cztery kolumny oraz na liście Wygląd zewnętrzny(Widok) wybierając opcję Do centrum Atrakcja(Podświetlenie) równe 60 (rys. 10). Wybierz narzędzie Wybór bezpośredni i kliknij w lewo górny róg obiektu, podświetlając znajdujące się tam punkty węzłowe (rys. 11). Zmień kolor odpowiedniej komórki na biały, wybierając ją w palecie Próbki(rys. 12).
Weź narzędzie Elipsa(Elipsa), umieść znacznik myszy na środku okręgu utworzonego wcześniej i trzymając wciśnięte klawisze Alt oraz Zmiana, rozciągnij nowy okrąg na stary, tak aby był o 1-2 piksele większy od starego ze wszystkich stron. Uczyń ją czarną obwódką ( Udar mózgu) Szerokość 1-2 piksele i wypełnienie gradientem promieniowym od czerwieni do bieli (Rysunek 13). Przeciągnij utworzony obiekt wektorowy o 1-2 piksele w prawo iw dół, a następnie, nie usuwając zaznaczenia, kliknij go kliknij prawym przyciskiem myszy myszą iz menu kontekstowego wybierz polecenie Rozmieść => Prześlij na spód(Rozmieść => Odeślij). W rezultacie otrzymujesz puste miejsce na przycisk, pokazany na ryc. czternaście.
Z reguły na dowolnej stronie internetowej znajduje się kilka przycisków tego samego typu, różniących się na przykład tylko kierunkiem narysowanych na nich strzałek, wskazujących kierunek poruszania się po witrynie. Rozważmy najprostszy przypadek posiadania dwóch przycisków, z których jeden ze strzałką w dół będzie oznaczał przejście do następnej strony, a przycisk ze strzałką w górę do poprzedniej. Jako pustą strzałkę weź zwykły trójkąt narysowany przez narzędzie Wielokąt(Wielokąt), wypełniony czernią, a także ozdobiony jako obiekt siatkowy dla większego efektu. Przesuń strzałkę do przycisku i dostosuj położenie wszystkich obiektów względem siebie za pomocą odpowiednich przycisków na palecie Wyrównywać(Wyrównanie). Pierwszy z otrzymanych przycisków pokazano na ryc. 15. Utwórz kopię warstwy przycisków, wybierając polecenie Powiel warstwę Warstwy, - w rezultacie otrzymujemy dwie identyczne warstwy. Następnie na kopii warstwy wybierz strzałkę i obróć ją o 180 °, wybierając polecenie Przekształć => Obróć- Transformacja => Obrót. Otrzymujemy ten sam przycisk, jak pokazano na ryc. 16. Należy pamiętać, że znacznie wygodniej jest przechowywać wszystkie przyciski tego samego typu jednego projektu w jednym pliku na różnych warstwach, co jest widoczne w tym przypadku.
Teraz musisz zapisać zoptymalizowane wersje każdego z przycisków. Najpierw ustaw niewidoczną dolną warstwę - w tym przypadku przycisk na górnej warstwie zostanie zapisany. Wybierz drużynę Plik => Zapisz dla sieci(Plik => Zapisz dla Internetu), skonfiguruj opcje optymalizacji przycisków, na przykład, jak pokazano na rysunku 1-4. 17, kliknij przycisk Zapisać(Zapisz) i wprowadź nazwę pliku. Przycisk zapisany w wyniku pokazano na ryc. 18. Teraz przywróć widoczność dolnej warstwy i spraw, aby górna była niewidoczna i w ten sam sposób zapisz drugi przycisk, nadając mu inną nazwę. Wynik pokazano na ryc. 19.
Teraz pozostaje tylko upewnić się, że przyciski dobrze wyglądają na stronie internetowej i umieścić je na niestandardowej stronie (Rysunek 20). W rezultacie w tym przykładzie plik Primer2.html i dwa obrazy graficzne w folderze images (folder Podkład2).
W razie potrzeby podczas procesu optymalizacji przycisk można łatwo zamienić w plasterek. W tym przypadku po wybraniu polecenia Plik => Zapisz dla sieci(Plik => Zapisz do Internetu) i ustawiając parametry optymalizacji wybierz narzędzie z palety narzędzi Wybierz plasterek(Wybierz plasterek) i kliknij dwukrotnie obraz, który ostatecznie automatycznie zamieni się w plasterek o numerze seryjnym 1 (ryc. 21). Ponowne dwukrotne kliknięcie otworzy okno Opcje plasterków(Opcje plasterka), w którym musisz określić link i, jeśli to konieczne, zmienić nazwę plasterka (ryc. 22), a następnie zapisać zoptymalizowany obraz. Wynikiem będą w tym przypadku pliki Primer3.html (Rys. 23) oraz Primer3.gif (folder Primer3).
Elementy interaktywne
Jednym ze sposobów na ożywienie strony jest wprowadzenie elementów projektu, które zmieniają jej wygląd zewnętrzny(lub stanu) w zależności od zachowania myszy lub rzadziej w przypadku jakichkolwiek innych sytuacji: skalowanie, przewijanie, ładowanie, błędy itp.
Wśród takich elementów najbardziej znane są rollovery (od angielskiego rollover - rollover, turnover) - elementy, które zmieniają swój wygląd pod wpływem myszy. Animowane przyciski to przykłady typowych najazdów. Najazdy są często wykorzystywane do tworzenia innych elementów nawigacyjnych serwisu. W rzeczywistości każdy najazd to nie jeden, ale kilka (do czterech) obrazów, z których każdy odpowiada określonemu zdarzeniu. Za główne zdarzenia uważa się: Normalny - stan normalny, Over - najechanie kursorem myszy na element i Down - naciśnięcie lewego przycisku myszy, gdy kursor znajduje się nad nim. Teoretycznie w grę mogą wchodzić takie zdarzenia jak Kliknięcie – zwolnienie lewego przycisku myszy po naciśnięciu, Góra – po zwolnieniu przycisku, Out – wyjście z aktywnej strefy. Jednak w praktyce częściej ograniczają się do zmiany elementu tylko dla pierwszych trzech lub nawet dwóch wydarzeń.
Klasyczne najazdy
W klasycznym sensie rollover to seria obrazów graficznych w formacie GIF i odpowiadający im kod HTML, dzięki czemu w zależności od zachowania myszy jeden obraz zastępuje inny w oknie przeglądarki.
Program Illustrator nie jest przeznaczony do bezpośredniego tworzenia najazdów w klasycznym sensie, ale może pomóc w zaprojektowaniu dla nich początkowych elementów. Ideą w tym przypadku jest stworzenie warstwy z obrazem odpowiadającym pierwszemu zdarzeniu. Następnie utwórz kopię warstwy i przekształć obraz, aby pasował do drugiego zdarzenia itp. Powstały obraz wielowarstwowy jest eksportowany do pliku PSD z zachowanymi warstwami, na podstawie którego tworzony jest rollover w programie Image Ready. Zaletą korzystania z programu Illustrator, podobnie jak w wielu innych przypadkach, jest szereg jego interesujących funkcji, które nie są dostępne w innych. narzędzia programowe, w połączeniu z wygodą przekształcania grafiki wektorowej.
Spróbujmy stworzyć rollover w postaci napisu zmieniającego kolor w zależności od zachowania myszki. Otwórz program Illustrator i utwórz zaokrąglony prostokąt wypełniony na czarno (Rysunek 24), zrób jego kopię i umieść w wolnym obszarze ekranu. Przekształć pierwszą kopię prostokąta w obiekt siatki z podświetleniem pośrodku (polecenie Obiekt => Utwórz siatkę gradientową- Object => Create Gradient Mesh), określając cztery wiersze i dziesięć kolumn (Rysunek 25). Aktywuj drugą kopię prostokąta i dostosuj dla niej wypełnienie gradientowe w przybliżeniu, jak pokazano na ryc. 26. Wymieszaj obiekt gradientu z siatką, zmniejsz Krycie obiektu gradientu do około 80%, a jego rozmiar do około 1 piksela, aby naśladować efekt wypukłości. A następnie wydrukuj tekst na obiektach. W swojej pierwotnej postaci niech będzie miał kolor biały, który będzie odpowiadał stanowi Normalny (rys. 27), a następnie, gdy zmieni się stan najazdu, kolor podpisu zmieni się np. na zielony - po najechaniu nad nim za pomocą wskaźnika myszy (stan Over) i na niebieski - po naciśnięciu przycisku myszy (stan Down).
Zwróć uwagę na paletę Warstwy- na tym etapie jest w nim tylko jedna pojedyncza warstwa. Wykonaj dwie kopie tej warstwy za pomocą polecenia Powiel warstwę(Duplicate Layer) z menu palety Warstwy, - w palecie będą trzy warstwy (rys. 28). Następnie w pierwszym egzemplarzu warstwy zmień kolor podpisu na zielony, aw drugim na niebieski (ryc. 29). W rezultacie otrzymasz niezbędną blankiet do najazdu.
Eksportuj swój pop ten obraz do formatu PSD z warstwami zachowanymi za pomocą polecenia Plik => Eksportuj(Plik => Eksportuj) i wybór modelu kolorów RGB (Rys. 30). Otwórz utworzony plik PSD w ImageReady (rysunki 31 i 32). Utwórz ramki z warstw, wybierając polecenie Twórz ramki z warstw(Utwórz klatki z warstw) z menu palety Animacja... Okno animacji będzie wyglądać jak na rys. 33. W tym samym czasie w palecie Najazdy początkowo zostanie utworzony pojedynczy stan Normalny.
Następnie w oknie Animacja wybierz ramkę odpowiadającą stanowi najechania, będąc w palecie Warstwy warstwa jest wybierana automatycznie Kopia warstwy 1(rys. 34). Przejdź do palety Najazdy i kliknij przycisk Utwórz stan najazdu(Utwórz stan najazdu) - rys. 35, co doprowadzi do pojawienia się stanu Stan ponad w palecie Najazdy(rys. 36). Stwórz stan w ten sam sposób Stan w dół... Aktywuj stan Normalna w palecie Najazdy i usuń w palecie Animacja wszystkie ramki, z wyjątkiem tej, która powinna odpowiadać stanowi Normalna... W efekcie dla każdego stanu rollover w palecie Animacja będzie tylko jedna ramka (rys. 37, 38 i 39).
Ryż. 38. Widok obrazu, okna animacji oraz palety warstw i najazdów dla Over State
Sprawdź wynik, klikając przycisk Podgląd w domyślnej przeglądarce(Browser Preview) na pasku narzędzi i przejście do okna przeglądarki (Rysunek 40). Następnie zapisz plik za pomocą polecenia Plik => Zapisz zoptymalizowany(Plik => Zapisz zoptymalizowane) i określenie opcji HTML i obrazy (* .html)... W rezultacie w tym przykładzie otrzymaliśmy plik Primer4.html i serię obrazów graficznych w folderze images.
Ryż. 40. Okno przeglądarki z elementem Rollover
Najazdy SVG
Rosnąca popularność formatu SVG (Scalable Vector Graphics – skalowalna grafika wektorowa), stworzonego w oparciu o standard XML, pozwala również na otrzymywanie różnorodnych elementów interaktywnych, w szczególności najazdów, tylko w praktyce jest realizowany zupełnie inaczej. Warto zauważyć, że tworzenie interaktywnych najazdów SVG, w przeciwieństwie do klasycznych, gdy odpowiedni kod HTML jest generowany całkowicie automatycznie, wymaga znajomości języka JavaScript oraz zrozumienia podstawowych zasad programowania obiektowego.
Istnieje specjalna paleta do pracy z obiektami SVG. Interaktywność SVG, który można łatwo otworzyć za pomocą polecenia Okno => Interaktywność SVG(Okno => interaktywność SVG) - ryc. 41.
Rozważać ta opcja tworzenie najazdu na przykładzie interaktywnego przycisku, którego kolor podpisu zmieni się z czarnego na niebieski po najechaniu myszą i ponownie zmieni się na czarny, gdy mysz opuści aktywną strefę.
Utwórz prostokątny przycisk z zaokrąglonymi krawędziami i wybierz dla niego odpowiednie wypełnienie gradientowe, na przykład, jak pokazano na ryc. 42. Dostosuj przezroczystość przycisku w palecie Przezroczystość(Przezroczystość) - w tym przykładzie wartość parametru Nieprzezroczystość(Krycie) ustawione na 50%. Zrób kopię przycisku, wypełnij go ciemnozielonym kolorem (rys. 43), a następnie przekształć go w obiekt siatkowy za pomocą polecenia Obiekt => Utwórz siatkę gradientową(Obiekt => Utwórz siatkę gradientową), określając cztery wiersze i dziesięć kolumn oraz na liście Wygląd zewnętrzny(Widok) wybierając opcję Do centrum(Środek) i ustawienie wartości Atrakcja(Podświetlenie) równe 100. Zmniejsz krycie warstwy obiektu siatki o około 40% (rys. 44). Umieść obiekt siatkowy na górze gradientu, a przycisk będzie przypominał ten pokazany na ryc. 45.
Ryż. 44. Przekształcenie kopii przycisku w obiekt siatkowy
Uzupełnij przycisk zamierzonym podpisem i dostosuj jego położenie za pomocą odpowiednich przycisków na palecie Wyrównywać(Wyrównanie). Wynikowy obraz będzie zawierał pojedynczą warstwę z trzema nałożonymi na siebie obiektami (Rysunek 46). Zaplanowane zdarzenia będą odnosić się do obiektu tekstowego, więc dla wygody zmień jego nazwę na Tekst klikając dwukrotnie obiekt i wprowadzając nową nazwę. Zmień nazwę warstwy w ten sam sposób z Warstwa 1 do warstwy(rys. 47).
Obsługa zdarzeń zakłada użycie procedur JavaScript, więc musisz dołączyć plik opisujący te procedury. Nazywa się Events.js i jest zapisywany na dysku w folderze Sample Files \ Sample Art \ SVG \ SVG podczas instalacji Programy Adobe Ilustrator. Aby połączyć plik Events.js użyj polecenia Pliki JavaScript Interaktywność SVG(rys. 48). Następnie musisz nacisnąć przycisk Dodać(Dodaj) i znajdź żądany plik na dysku twardym. Kiedy jego imię pojawi się w polu URL(rys. 49), kliknij przycisk Gotowe(Wyloguj).
Ryż. 48. Wybór polecenia Pliki JavaScript
Następnie należy zdefiniować reakcję obiektu na zdarzenia myszy. Tekst... Wybierz obiekt Tekst w polu Wydarzenie(Event) palety Interaktywność SVG wybierz wydarzenie po najechaniu myszą elemColor (evt, "Tekst", "# 3333FF")- oznacza to, że gdy mysz znajdzie się nad obiektem Tekst jego kolor zmieni się na niebieski (rys. 50). Aby kolor tekstu zmienił się na czarny po opuszczeniu przez mysz aktywnej strefy, musisz utworzyć kolejne wydarzenie onmouseout- wybierz go w polu Wydarzenie(Event) palety Interaktywność SVG... Następnie w linii działania wpisz tekst elemColor (evt, "Tekst", "# 000000")- to zwróci czarny (rys. 51).
Ryż. 51. Ostateczny widok palety Interaktywność SVG dla obiektu Tekst
Zapisz utworzony najazd jako plik SVG za pomocą polecenia Plik => Zapisz jako(Plik => Typ pliku format SVG, a następnie konfigurowanie opcji zapisywania pliku SVG, jak pokazano na rys. 52. Po zapisaniu otrzymasz tylko jeden plik z rozszerzeniem SVG, a nie dwa, jak w przypadku klasycznego rollovera - w tym przypadku uzyskano plik Primer5.svg (folder Primer5). Aby jednak rollover naprawdę zadziałał, należy dodatkowo skopiować plik Events.js z opisem procedur JavaScript do folderu z plikiem SVG. Następnie możesz sprawdzić, czy najazd działa - wynik będzie wyglądał jak na ryc. 53.
Animacja SVG
Format SVG może być również używany do przekazywania animacji. Spróbujmy stworzyć prosty element animacji (w tym przypadku będzie to informacja o firmie), która pojawi się na ekranie po najechaniu myszką na odpowiedni obiekt graficzny i zniknie po zdjęciu myszki z interaktywnego elementu.
Stwórzmy serię obiektów graficznych i tekstowych, takich jak ten pokazany na rys. 54. W wygodny sposób zmieniaj nazwy wszystkich utworzonych obiektów, klikając kolejno na nazwę kolejnego obiektu w palecie Warstwy i wpisać żądaną nazwę (rys. 55). Należy pamiętać, że wyróżnione na ryc. 56 obiektów - Tekst1, Tekst2, Tekst3 oraz Ścieżka1- zawsze będzie widoczny, a wszystkie inne - dopiero po najechaniu myszką na obiekt Tekst 1.
Ryż. 54. Oryginalny widok obrazu
Dołącz plik Events.js z opisem procedur JavaScript za pomocą polecenia Pliki JavaScript(pliki JavaScript) z palety Interaktywność SVG naciskając przycisk Dodać(Dodaj), wybierając żądany plik na dysku twardym i klikając przycisk Gotowe(Wyloguj).
Zdefiniuj reakcję obiektu na zdarzenia myszy Tekst 1... Wybierz obiekt Tekst, w terenie Wydarzenie(Event) palety Interaktywność SVG wybierz wydarzenie po najechaniu myszą a w wierszu poniżej wpisz tekst elemShow (evt, "Text4"); elemShow (evt, "Ścieżka2")... W rezultacie, gdy mysz znajduje się nad obiektem Tekst 1 obiekty staną się widoczne Tekst4 oraz Ścieżka2... Należy pamiętać, że jeśli w momencie wystąpienia zdarzenia ma zostać wykonanych kilka akcji, należy je określić za pomocą znaku „;”. Następnie wykonaj podobną operację na zdarzeniu onmouseout wpisując dla niego tekst, co będzie oznaczać ukrywanie obiektów (rys. 57).
Zapisz wynik jako plik SVG za pomocą polecenia Plik => Zapisz jako(Plik => Zapisz jako), określając nazwę pliku, wybierając w polu Typ pliku format SVG, a następnie konfigurowanie opcji zapisywania pliku SVG, jak pokazano na ryc. 58. Po zapisaniu otrzymasz plik Primer6.svg (folder Primer6). Nie zapomnij skopiować pliku Events.js do folderu z tym plikiem. Jeśli po tym uciekniesz cos ten plik, zobaczysz wynik pokazany na ryc. 59. To prawie to, czego potrzebujesz. Jedyne, czego nie uwzględniliśmy w naszych planach, to początkowy wygląd obiektów. Tekst 4 i Ścieżka 2 przy starcie. Aby pozbyć się tej wady, wybierz oba obiekty danych jednocześnie i utwórz dla nich akcję. elemUkryj (evt, "Text4"); elemUkryj (evt, „Ścieżka2”) na imprezie onload(rys. 60). Zapisz plik ponownie i upewnij się, że obiekty są teraz Tekst4 oraz Ścieżka2 widoczne tylko po najechaniu myszką na obiekt Tekst 1.
Animacja GIF
Każda strona internetowa jest nie do pomyślenia bez animacji internetowej, w tym animowanych gifów. Jedną z opcji ich tworzenia jest skorzystanie z aplikacji Adobe ImageReady, która między innymi umożliwia tworzenie animacji z warstw. Jednocześnie sam obraz warstwowy można przygotować w różnych aplikacjach, w tym Adobe Illustrator.
Bardzo łatwo jest stworzyć animację na podstawie elementów z palety Symbolika(Symbole) otwierane przez polecenie Okno => Symbole(Okno => Symbole) lub z jednej z bibliotek symboli, które można otworzyć za pomocą polecenia Okno => Biblioteki symboli(Okno => Biblioteki symboli).
Jako przykład postaramy się zwiększyć rozmiar dowolnego obiektu symbolicznego, kluczowe etapy procesu powiększania obiektu muszą być ustawione na osobnych warstwach. Najpierw po prostu umieść obiekty symboli jeden nad drugim, a następnie zwiększ rozmiar każdego następnego obiektu, na przykład, jak pokazano na rys. 61. W rezultacie w palecie Warstwy zostanie utworzona jedna warstwa z wieloma obiektami (rys. 62). Jeśli wyeksportujesz ten obraz bezpośrednio do formatu PSD, to nie zadziała, ponieważ jest tylko jedna warstwa i oczywiście po otwarciu pliku PSD w programie ImageReady będzie również tylko jedna warstwa. Dlatego musisz najpierw umieścić obiekty na różnych warstwach. To może być skończone różne sposoby- najłatwiej jest najpierw wybrać warstwę Warstwa 1 w palecie Warstwy i użyj polecenia Zwolnij na warstwę(Zwolnij do warstw). Rezultatem będzie przeniesienie każdego z obiektów na własną warstwę, ale wszystkie zostaną zagnieżdżone w warstwie. Warstwa 1... Dlatego będziesz musiał ręcznie przeciągnąć wszystkie zagnieżdżone warstwy do Górna część paletę Warstwy tak, aby znajdowały się nad warstwą Warstwa 1 a potem pusta warstwa Warstwa 1 wystarczy wyjąć (rys. 63). Wyeksportuj obraz do formatu PSD za pomocą polecenia Plik => Eksportuj(Plik => Eksportuj) z ustawieniami jak na rys. 64.
Załaduj utworzony plik PSD do ImageReady (rysunki 65 i 66). Otwórz menu palety AnimacjaTwórz ramki z warstw(Tworzenie ramek z warstw). W rezultacie zostanie utworzonych pięć ramek, z których każda będzie odpowiadać własnej warstwie, oraz okno palety Animacja przyjmie formę jak na ryc. 67.
Następnie ustaw czas trwania każdej z utworzonych klatek - w tym przypadku czas trwania wszystkich klatek jest ustawiony na 0,2 s. A następnie zapisz zoptymalizowaną animację za pomocą polecenia Plik => Zapisz zoptymalizowany(Plik => Zapisz zoptymalizowany). Otrzymany wynik może przypominać ryc. 68.
Jeszcze wygodniej jest uzyskać puste miejsca, które łatwo zamienić w animację w ImageReady, skorzystaj z funkcji Mieszanki na żywo Oprogramowanie Illustrator. To połączone użycie programów Illustrator i ImageReady znacznie przyspiesza proces tworzenia animacji GIF.
Na przykład narysuj dwa dowolne wielokolorowe obiekty, a następnie połącz je z odpowiednimi parametrami (ryc. 69). Nie można użyć tego pliku bezpośrednio do tworzenia animacji, ponieważ obraz znajduje się na jednej warstwie (ryc. 70). Dlatego najpierw musisz umieścić każdy element obiektu mieszania na osobnej warstwie. Do tego w oknie Warstwy podświetl linię
Ryż. 70. Stan początkowy okna Warstwy
Wyeksportuj utworzony plik do formatu PSD za pomocą polecenia Plik => Eksportuj(Plik => Eksportuj). Otworzyć utworzony plik PSD w programie ImageReady (rys. 73). Należy pamiętać, że wszystkie warstwy utworzone w programie Illustrator pojawią się w oknie warstw (rys. 74) oraz w oknie Animacja do tej pory będzie tylko jedna ramka.
Aktywuj menu palety Animacja klikając czarną strzałkę w prawym górnym rogu palety i wybierając polecenie Twórz ramki z warstw(Tworzenie klatek z warstw) - w efekcie w tym przykładzie zostanie utworzonych pięć klatek, a okno palety Animacja przyjmie formę zgodną z ryc. 75. Zaznacz wszystkie klatki, przytrzymując wciśnięty przycisk Zmiana, i ustaw odpowiedni czas trwania klatki - w tym przykładzie dla każdej z klatek pobierany jest taki sam czas 0,2 s. Następnie zapisz zoptymalizowany plik za pomocą polecenia Plik => Zapisz zoptymalizowany(Plik => Zapisz zoptymalizowane) poprzez ustawienie na liście Typ pliku opcja Tylko obrazy (* .gif)... Animacja będzie przypominać ryc. 76.
O wiele ciekawsze jest nie poruszanie się, a płynna zmiana rozmiaru mieszanych obiektów. Na przykład możesz użyć już utworzonego przejścia mieszania. W takim przypadku, po utworzeniu osobnych warstw dla każdego elementu przejścia mieszania, umieść wszystkie obiekty jeden na drugim za pomocą przycisków Środek wyrównania w poziomie(Poziome wyrównanie do środka) i Środek wyrównania w pionie(Pionowe wyrównanie do środka) paleta Wyrównywać(rys. 77).
Wyeksportuj utworzony plik do formatu PSD ( Plik => Eksportuj- Plik => Eksportuj) i otwórz utworzony plik PSD w programie ImageReady (rys. 78). Twórz klatki animacji na podstawie warstw ( Twórz ramki z warstw- Utwórz klatki z warstw) i wybierz dla nich odpowiedni czas trwania (rys. 79). A następnie, aby animacja była bardziej efektywna, skopiuj istniejące klatki, ale w odwrotnej kolejności - tak, aby obraz najpierw się zwiększał, a potem zmniejszał i tak dalej w kółko (ryc. 80). Następnie zapisz zoptymalizowany plik ( Plik => Zapisz zoptymalizowany- Plik => Zapisz z optymalizacją). Powstałą animację pokazano na ryc. 81.
Ryż. 80. Stan okna animacji po zduplikowaniu klatek
Ryż. 81. Zakończona animacja
