Skip to content

Jak tworzyć i publikować dokumenty w formacie HTML5 Canvas (przykład) – łatwe i praktyczne

10 de luty de 2021

Adobe dał wiele do powiedzenia od samego początku. Różne programy, które narodziły się w tej organizacji, zmieniły sposób tworzenia, zaprojektować i zmodyfikować elementy treści cyfrowych, głównie dla najpopularniejszych sieci społecznościowych.

Istnieje wiele znanych na całym świecie programów, które są częścią Adobe Inc. W tej okazji, dowiesz się trochę więcej o tym, czym jest Adobe Animate CC.

Co to jest Adobe Animate CC?

To jest jeden z najbardziej znanych w firmie. To narzędzie umożliwia tworzenie i manipulowanie grafiką wektorową, taką jak Corel Photo Paint. Ten program jest idealnym studiem animacji do dostarczania interaktywnych treści cyfrowych.

Narzędzia projektowe

Posiada zróżnicowany arsenał przybory co pozwala ci pójść trochę dalej w twoich kreacjach. Niektóre funkcje, które można uzyskać w jego interfejsie, to:

  • Grafika wektorowa i rastrowa.
  • Dźwięk.
  • Kod panoramy.
  • Strumień wideo.
  • Dwukierunkowe audio (tylko w połączeniu z serwerem komunikacji Macromedia Flash).

Jego zastosowanie w dużych firmach

Nazwy głównych kanałów telewizyjnych używały tego programu do tworzenia i projektowania filmów i seriali. Niektóre z najbardziej znanych to:

  • Cartoon Network: The Amazing World of Gumball, Adventure Time, Foster’s Mansion for Imaginary Friends.
  • Disney: Kick Buttowski, Gravity Falls, Wreck-It Ralph.
  • Nickelodeon: Danny Phantom, The Loud House, The Fairly Oddparents.
  • Pixar: Animacja napisów do filmów takich jak Wall-E, The Incredibles i Ratatouille.

Aplikacja HTML5

Ten program był wcześniej znany jako Adobe Flash Professional, Macromedia Flash, Y FutureSplash Animator. Dopiero w grudniu 2015 roku firma ogłosiła, że ​​zostanie przemianowana na Adobe Animate, jako sposób na odłączenie poprzednich programów z Adoble Flash Player i HTML5.

Dzięki Canvas, generowanie grafiki lub dynamicznego renderowania jest dozwolone zarówno dla grafiki 2D, jak i bitmapa.

Twórz i publikuj dokumenty w HTML5 Canvas

Jeśli zaczniesz interesować się tym światem tworzenia i projektowania, tym razem będziesz mógł poznać pierwsze kroki, które musisz podjąć zaprojektuj dokument i opublikuj go w HTML5 Canvas.

Twórz i publikuj dokumenty w HTML5 Canvas

Proces tworzenia

Aby utworzyć dokument HTML5 Canvas, na stronie głównej Adobe Animate kliknij opcję HTML Canvas w sekcji Utwórz nowy.

Jeśli z jakiegoś powodu nie widzisz tego pola, możesz przeprowadzić proces tworzenia w następujący sposób:

  1. Przejdź do zakładki Plik.
  2. Nowy.
  3. Wybierz typ HTML5 Canvas.
  4. Kliknij zaakceptuj.

Proces projektowania

Gdy masz już scenę, na której możesz zaprojektować, czas skorzystać z różne narzędzia oferowane przez Adobe Animate. Jeśli dopiero zaczynasz korzystać z tego programu, najlepiej byłoby uzbroić się w cierpliwość podczas odkrywania dostępnych opcji.

Rozpoczęcie projektowania

Najlepiej, aby rozpocząć naukę korzystania z programu Adobe Animate, korzystając z rozszerzenia narzędzia ołówkowe, ponieważ jest jednym z najłatwiejszych do manipulacji.

Z tej funkcji możesz zacząć rysować i animować. Aby dodać puste klatki, naciśnij F7 i kontynuuj rysowanie, aż zakończysz animację, którą chcesz renderować.

Zapisz swój projekt

Po zakończeniu procesu tworzenia i projektowania przejdź do Zapisz to. Aby go później opublikować. W tym sensie musisz kliknąć:

  • Karta Plik.
  • Zapisać.
  • Utwórz nowy folder dla swojego projektu.
  • Naciśnij klawisze Ctrl + Enter, aby wyświetlić animację w przeglądarce.

Proces wydawniczy

Wróć do Adobe Animate, aby wyświetlić plik opcje konfiguracji do publikacji stworzonego przez Ciebie projektu. Dla tego:

  1. Kliknij plik.
  2. Publikuj ustawienia.
  3. Pojawi się okno dialogowe, w którym przypiszesz nową nazwę do swojego projektu (jeśli nazwałeś projekt, na przykład animacja, ustaw go na animacja2).
  4. Upewnij się, że wszystkie pola w sekcji Pliki wyjściowe są zaznaczone.
  5. Kliknij zaakceptuj.
  6. Wróć do zakładki Plik i wybierz opcję Publikuj.

W ten sposób, gdy wrócisz do folderu, który stworzyłeś dla swojego projektu, znajdziesz 2 nowe pliki: HTML i JavaScript z nową nazwą, którą przypisałeś do swojej animacji.

dołącz do naszego kanału telegram