Tworzenie animacji oraz interaktywności w elemencie canvas HTML 5 nigdy nie było bardziej intuicyjne. Do niedawna standardem w tworzeniu animacji internetowej był Flash Professional. Jednak z powodu stale rosnącego zapotrzebowania na spełniającą nowoczesne standardy zawartość interaktywną w HTML 5, firma Adobe opublikowała nowe narzędzie pod nazwą Adobe Animate CC. Jest to wciąż to samo środowisko pracy wspierające zawartość Flashową (SWF) oraz Adobe AIR. Dodatkowo jednak, takie elementy jak canvas HTML 5 oraz wsparcie dla WebGL zostały włączone jako natywna obsługa do tego środowiska, tworząc go czołowym narzędziem do tworzenia animacji internetowych i nie tylko. Jest to idealne narzędzie do tworzenia reklam internetowych, które spełniają najnowsze standardy Interactive Advertising Bureau (IAB).

Wstęp do Adobe Animate CC

Na początku szkolenia Adobe Animate zapoznasz się dokładnie z interfejsem programu, który zostanie skonfigurowany tak, aby najlepiej dopasować obszar roboczy do Twoich potrzeb. Poznasz narzędzia niestandardowe i nauczysz się je tworzyć, zapisywać i udostępniać innym użytkownikom. Przyjrzymy się bliżej formatom plików wejściowych i wyjściowych obsługiwanych przez Adobe Animate CC, takich jak JPG, PNG czy SVG i temu jakie mają one zastosowanie w pracy z innymi aplikacjami.

Tworzenie animacji w Adobe Animate

Dokładnie przeanalizowane zostaną narzędzia dostępne w Adobe Animate CC, takie jak narzędzia do rysowania, malowania czy tworzenia kształtów i to jakie interakcje tworzą z osią czasu. W tym momencie dowiesz się więcej również o zastosowaniu warstw i podstawowych informacji dotyczących animacji klatek kluczowych. Szkolenie Adobe Animate – interaktywne projekty HTML5 przybliży Ci różne metody animacji ruchu i korzyści jakie daje nam interfejs edytora ruchu. Zapoznasz się z funkcją Motion Tween i nauczysz jak tworzyć animacje ruchu. Animacja ruchu doskonale sprawdza się w tworzeniu zmian ruchu, zaników czy też efektów kolorystycznych. Poznasz Shape Tween i dowiesz się jak je tworzyć, np. jak dodawać animacje kształtu do pociągnięć jednorodnych i nieregularnych. Zostanie poruszony temat animacji zagnieżdżonych, kiedy to obiekt symbolu zawiera symbole zagnieżdżone i one właśnie są niezależnie animowane na własnych osiach czasu. Dzięki zdobytej wiedzy z tego zakresu i znajomości tworzenia i stosowania ruchów predefiniowanych będziesz mógł efektywnie tworzyć różne typy animacji.

Tworzenie interaktywności

W ramach wprowadzenia do szkolenia Adobe Animate powiemy sobie kilka słów na temat różnic między językiem JavaScript a ActionScript 3.0. Następnie wykorzystamy panel Code Snippets, czyli panel Wycinki Kodu. Ułatwia on tworzenie skryptów w wyżej wymienionych językach bez konieczności wykazania się umiejętnościami programistycznymi. Dzięki znajomości obsługi panelu będziesz mógł dodawać kod, który wpływa na zachowanie obiektu na stole montażowym oraz kod, który steruje głowicą odtwarzania na osi czasu. Dowiesz się jak dodawać nowe wycinki przez siebie utworzone. Nasz trener zwróci Ci uwagę na kilka ważnych zasad o których należy pamiętać korzystając z panelu Code Snippets. Nauczysz się używać zdarzeń. Powiemy sobie o różnych zdarzeniach mających zastosowanie, takich jak zdarzenia onRelease, onSoundComplete i innych.

Zasady projektowania i tworzenia reklamy internetowej w technologii HTML 5

Tworzenie banerów w HTML5, które działają nienagannie we wszystkich przeglądarkach może być naprawdę niewdzięcznym zadaniem, jeśli próbujemy tego dokonać bazując jedynie na kodowaniu. Adobe Animate CC pozwala Web developerom i inżynierom na skupieniu się wyłącznie na kreatywnej stronie procesu tworzenia banera. Nie muszą zamartwiać się koniecznością kodowania podczas publikacji w HTML5 Canvas, stosunkowo nowym w Adobe Animate CC typie dokumentu. Efektem zaś są płynne animacje. W przeszłości to Flash służył do tworzenia animowanych reklam i banerów. Obecnie mamy do dyspozycji dużo lepsze narzędzie jakim jest HTML5. Przy jego pomocy stworzymy prace nie tylko atrakcyjne wizualnie, ale takie które bezproblemowo wyświetlą się również na najnowszych urządzeniach mobilnych. Narzędzia dostępne w HTML5 pozwolą nam zadbać o najdrobniejszy szczegół. Efekty powiększania i obracania pozwolą na uzyskanie wrażenia głębi w animacji. Możliwości związane z osią czasu pozwalają na wyświetlanie czasu obok numerów klatek oraz skrócenie zakresu klatek. Nie jest wymagana ręczna modyfikacja parametrów w przypadku sterowania szybkością. Te i wiele innych ułatwień i praktycznych wskazówek omówimy w tej części kursu. Szkolenie Adobe Animate – interaktywne projekty HTML dostarczy Ci wiedzę, w jaki sposób tworzyć reklamy internetowe od zera. Zobaczysz jak prawidłowo zaimportować grafiki z Adobe Illustrator, Photoshop oraz Adobe Creative Cloud. Będziemy stopniowo budować nasz baner poprzez importowanie kolejnych grafik, porządkowanie warstw i pracę nad naszymi animacjami. Będziemy tworzyć animacje korzystając z wielkich możliwości, jakie oferuje nam JavaScript. Zadania takie jak rozdzielanie stylów i logiki, organizowanie sekwencji animacji czy też dodawanie pożądanych efektów nie będą miały dla Ciebie tajemnic.

Optymalizacja projektu oraz grafik

Nie pominiemy również kwestii optymalizacji naszych grafik i całego projektu. Jak wiemy pliki charakteryzujące się dużym rozmiarem pobierane i odtwarzane są wolniej niż byśmy wszyscy sobie tego życzyli. Mamy kilka możliwości takiego przygotowania dokumentu, dzięki któremu będzie on właściwie odtwarzany. Dokładnie poznasz czynności optymalizacyjne jakie można wykonać. Dowiesz się więcej o zasadach kompresji i nauczysz się zasad wypośrodkowania między jakością obrazu i wielkością pliku. Poznasz reguły, którymi należy się kierować przy optymalizacji grafik i animacji oraz narzędzia, które warto wykorzystać w pracy.

Przekształcenia do HTML5 i wdrażanie na stronę www

Problemy z wydajnością, bezpieczeństwem, niekorzystny wpływ na urządzenia mobilne spowodowały, że wsparcie dla przestarzałej technologii Flash jest już zamierające. Istniejące projekty Flash mogą zostać zblokowane przed automatycznym wyświetleniem przez przeglądarki. Google nie daje zgody na uploadowanie reklam AdWords oraz DoubleClick wykonanych we Falshu. Warto więc przekształcić je do formatu HTML5. Poznasz wszystkie czynności jakie należy wykonać, aby ten proces przebiegł bezproblemowo. Zadbamy też oczywiście o należytą optymalizację. Teraz pozostaje Ci już tylko zamieścić efekt Twojej pracy na stronie WWW. Zapoznasz się z ustawieniami podstawowymi i zaawansowanymi i dowiesz się jakie opcje są najbardziej korzystne dla Twojego projektu.

Kreatywne zastosowanie typografii w Adobe Animate

Podczas szkolenia Adobe Animate – interaktywne projekty HTML5 dowiesz się jak budować ciekawe typograficzne kompozycje w Adobe Animate CC. Poznasz przydatne techniki, które dadzą Ci możliwość stworzenia grafik obok których nikt nie przejdzie obojętnie. Przyjrzymy się różnym zagadnieniom tj. jak dobrać kolor do tła oraz liter. Popracujemy z symbolami, będziemy modyfikować wektorowe litery.