Animacje w programie Adobe Edge Animate

Użytkownicy w sieci oczekują, że znajdą spektakularne projekty i docenią animacje, które przyczyniają się do tych projektów, o ile nie marnują czasu lub nie wpływają negatywnie na nawigację na stronie.
Dobrze wykonane animacje skupiają uwagę na ważnych szczegółach, mogą pokazać, jak działa aplikacja i ułatwić nawigację, jeśli spełniają poprzednie wymagania, w których wiele z tych animacji zostało wykonanych Błysk a jeśli posiadały niezbędną jakość, zostały dobrze przyjęte przez użytkownika.
Ale czasy się zmieniły i tak jak technologie ewoluowały również w sposobie tworzenia animacji, tak właśnie się pojawia Adobe Edge Animacja, narzędzie, które pozwala nam tworzyć animacje za pomocą HTML5, CSS3 i JavaScript bez konieczności znajomości programowania.
Powyższe może wydawać się nieco skomplikowane, jak to możliwe, że bez znajomości programowania można mieć narzędzie, które pomoże mi tworzyć animacje w tych technologiach? Nie jest to tak skomplikowane, jak się wydaje, ale najpierw musimy znać narzędzie i że musimy z nim pracować, w tym celu uruchomimy je i zostaniemy odebrani przez ekran główny, który powinien wyglądać tak:

POWIĘKSZAĆ

Po prawej stronie widzimy linki do nauki tworzenia animacji za pomocą narzędzia, a po prawej linki do otwierania pliku lub tworzenia go. Kliknijmy na link Tworzyć nowe i zostaniemy przeniesieni do obszaru roboczego narzędzia, na razie nie będziemy się tym martwić, ale zapiszemy nasz projekt, aby móc zbadać stworzoną przez narzędzie strukturę, zobaczmy jak wygląda nasza struktura:

POWIĘKSZAĆ

Jeśli jesteśmy zaznajomieni z tworzeniem aplikacji internetowych, możemy zobaczyć niektóre pliki ze znanymi rozszerzeniami, zobaczmy funkcję każdego z nich w ramach projektu Animacja krawędzi:
.PlikTen plik jest używany przez narzędzie do śledzenia naszego projektu.
.plik HTMLTen plik opisuje stronę internetową, która używa kodu HTML, a także pozostałe strony w Internecie.
.Js plikTe pliki zawierają kod JavaScript dla naszego projektu, który definiuje pustą scenę dla naszej animacji i wykonuje inne niezbędne zadania w projektach Animacja krawędzi.
Oprócz tych plików w folderze krawędź_zawiera mamy dwa pliki JavaScript dodatkowe, które są bibliotekami dla naszego projektu i są wymienione w naszym HTML a jego funkcją jest wykonywanie czynności ruchu jako takiego.
Po zapoznaniu się ze strukturą naszego projektu nadszedł czas, aby poznać obszary naszej przestrzeni roboczej, najpierw zobaczmy, jak to wygląda:

POWIĘKSZAĆ

Każdy panel jest identyfikowany przez nazwę, gdzie Elementy, Właściwości (edytuj) i Oś czasu Posiadają narzędzia i widżety do tworzenia animacji. Największy panel jest znany jako scena Etap i tam budujemy animację, przyjrzyjmy się bliżej każdemu z elementów w naszym obszarze roboczym:
EtapTo tutaj wyświetlana i animowana jest grafika i tekst projektu, ma to ograniczenia w swoim rozmieszczeniu i pozwala na ukrycie elementów lub umieszczenie ich w nim. Dodatkowo, gdy zapiszemy nasz projekt Animować dba o zapisanie tekstu i grafiki jako strony HTML.
ElementyElementy to obiekty, które dodajemy do naszej sceny iw efekcie pojawiają się na naszej finalnej stronie internetowej, gdzie tymi elementami mogą być ilustracje, zdjęcia, a nawet tekst.
Właściwości (edytuj)Elementy posiadają właściwości, które mogą wpływać na ich położenie, a nawet wygląd na scenie i możemy nimi zarządzać za pomocą panelu Właściwości (edytuj).
Oś czasuPozwala nam to na prowadzenie ewidencji elementów i ich właściwości przez cały czas trwania naszego projektu.
BibliotekaTutaj możemy prowadzić ewidencję zasobów, które importujemy do projektu i zapewnić łatwy dostęp do symboli, w które wierzymy Animować.
NarzędziaPojawiają się na górze obszaru roboczego. Używamy ich do tworzenia, selekcji i modyfikacji elementów na scenie, jest ich niewiele, ale zdziwilibyśmy się, wiedząc, ile możemy z nimi zrobić.
Ponieważ wiemy, jak dystrybuowane jest nasze narzędzie i znamy zawarte w nim koncepcje, możemy zaryzykować stworzenie naszej pierwszej animacji.
Aby stworzyć naszą pierwszą animację zamierzamy trochę poeksperymentować z przejściami w danym obrazie, zobaczmy kolejne kroki:
1- Zamierzamy utworzyć nowy projekt z opcją nowy plik w przypadku, gdy zamknęliśmy, w którym pracujemy nad zrozumieniem struktury i elementów w narzędziu. Kiedy zaczynamy projekt, nasza scena jest pusta, możemy to zmienić we właściwościach etap po lewej stronie ekranu, w tym celu naciskamy białe pole i wybieramy kolor według naszych preferencji lub w przypadku, gdy mamy kolor w notacji szesnastkowej możemy go uwzględnić, jak widać na poniższym obrazku:

POWIĘKSZAĆ

2- W przypadku tego samouczka wybraliśmy ciemny kolor, aby obraz, który umieścimy w etap atrakcja. Teraz, aby dołączyć obraz, przejdźmy do Archiwum a my wybieramy importować, zostanie wyświetlony eksplorator plików i wybierzemy obraz do uwzględnienia:

POWIĘKSZAĆ

Ważne, że we właściwościach naszego scenariusza mamy przepełnienie u przelewowy w ukryty od naszego etap przedstawia niewielką część całego naszego kodu HTML, więc jeśli nie chcemy widzieć elementów poza sceną, ważne jest, aby mieć tę wartość dla tej właściwości. Możemy również zmienić nazwę naszych elementów w dziale Właściwości (edytuj), w ten sposób możemy lepiej je zidentyfikować w naszym projekcie.
3- Teraz idziemy do naszego Oś czasu i sprawdzamy, czy licznik odtwarzania jest na 0:00 na początek naszej animacji. Tutaj pojawia się interesująca część i tutaj musimy zwrócić maksymalną uwagę, najpierw musimy zweryfikować, czy tryb klatek kluczowych naciska tak dobrze, jak automatyczny tryb przejścia, co widzimy na poniższym obrazku:

Aby wykonać nasze animacje musimy korzystać z funkcjonalności Przełącz przypięcie który jest aktywowany w przycisku obok automatyczny tryb przejściaAktywując ten przycisk aktywujemy ramki lub przejście i musi mu towarzyszyć żółty licznik, ponieważ w ten sposób możemy wykonać przejście o tyle sekund, aż przesuniemy nasz Pin na ten sam poziom, co drugi licznik.
4- Aby wykonać nasze pierwsze przejście naciśnijmy przycisk Przełącz przypięcie i weźmiemy drugi licznik i zamierzamy go przesunąć 200 sekund, po tym przenosimy nasz obraz na dół naszego ekranu, zobaczmy jak to wygląda:

POWIĘKSZAĆ

Jak widać część podświetlona na niebiesko w Oś czasu reprezentuje przejście, które możemy wyświetlić, jeśli naciśniemy klawisz spacji. Widzimy więc, że dość łatwo jest dokonać przejścia, ale co, jeśli chcemy zrobić drugie przejście lub więcej? W tym celu musimy przenieść nasze Szpilka w kierunku drugiego licznika, w ten sposób wskazujemy Animować że zamykamy proces pierwszego przejścia i możemy rozpocząć nowe.
5- Zamierzamy zrobić drugie przejście gdzie tym razem zamierzamy zmniejszyć krycie naszego obrazu, w tym celu wybieramy nasz obraz zmniejszając jego krycie do 46% i jak wspomnieliśmy, przesuwamy Szpilka na drugim liczniku i powtórz kroki z punktu 4, zobaczmy:

POWIĘKSZAĆ

6- Na koniec zrobimy trzecie przejście aby uzupełnić naszą animację. Jak już wiemy, przesuwamy nasz drugi licznik o kilka sekund, przeciągamy nasz obraz po skosie w lewo i zamykamy przejście przesuwając Szpilka o drugim liczniku:

POWIĘKSZAĆ

7- Zapisujemy naszą pracę i naciskamy klawisz spacji, aby wyświetlić naszą animację, jeśli nadal nie jesteśmy zadowoleni, możemy przechodzić przez przejścia, które są reprezentowane przez niebieski kolor w naszym Oś czasu i modyfikujemy wartości lub jeśli życzymy sobie rodzaj przejścia.
Ponieważ jesteśmy zadowoleni z naszej pracy, czas na ostatni krok, czyli wyświetlenie go do przeglądania w przeglądarce, co jest celem, nad którym pracujemy.
Są dwa sposoby przeglądania naszej pracy, pierwszy i najprostszy można zrobić z narzędzia, w tym celu przechodzimy do zakładki Archiwum a my wybieramy Podgląd w przeglądarce, który natychmiast otworzy animację w naszej domyślnej przeglądarce internetowej:

Druga jest nieco bardziej skomplikowana, jeśli nie mamy doświadczenia w tworzeniu stron internetowych, czyli pobranie plików i wykonanie integracji z naszą aplikacją internetową. Ważne jest, aby być bardzo ostrożnym podczas robienia tego i uwzględnić wszystkie pliki wygenerowane przez Animować w przeciwnym razie animacja nie będzie działać.
Na tym zakończyliśmy ten samouczek, w którym mogliśmy wiedzieć, jak to działa Adobe Edge Animacja, widząc jego najważniejsze cechy i tworząc naszą pierwszą animację w ciągu kilku minut bez potrzeby pisania nawet jednej linii kodu, generując ją za pomocą HTML5 Tak JavaScript do wdrożenia w dowolnej aplikacji internetowej.