Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate

Canvas to nowy element w języku HTML5 udostępniający interfejsy API, które umożliwiają dynamiczne generowanie i renderowanie grafik, wykresów, obrazów i animacji. Jego dostępność zwiększa zakres funkcji platformy HTML5 o opcje tworzenia rysunków dwuwymiarowych. Omawiane funkcje są obsługiwane przez większość współczesnych systemów operacyjnych i przeglądarek.

Element Canvas udostępnia mechanizm renderowania map bitowych. Rysunki wyjściowe są ostateczne i nie można zmieniać ich rozmiarów. Dodatkowo obiekty narysowane w elemencie Canvas nie należą do modelu DOM danej strony internetowej.

Aby na stronie internetowej dodać element Canvas, należy użyć znacznika <Canvas>. Aby rozszerzyć taki element o zawartość interaktywną, można użyć kodu JavaScript. Aby uzyskać więcej informacji, skorzystaj z tego łącza.

Nowy typ dokumentu — HTML5 Canvas

Program Animate umożliwia tworzenie dokumentów HTML5 Canvas zawierających rozbudowane kompozycje, grafiki, animacje itd. Do programu Animate został dodany nowy typ dokumentu (HTML5 Canvas), który zapewnia natywną obsługę tworzenia rozbudowanej i interaktywnej zawartości HTML5. Oznacza to, że za pomocą tradycyjnej osi czasu, przestrzeni roboczej i narzędzi programu Animate można tworzyć zawartość z danymi wyjściowymi w formacie HTML5. Wystarczy kilka kliknięć, aby utworzyć i wygenerować całkowicie funkcjonalny dokument HTML5 Canvas. W programie Animate są dostępne predefiniowane opcje dokumentu i publikowania, które pozwalają na generowanie danych wyjściowych HTML5.

Program Animate jest zintegrowany z biblioteką CreateJS. Pozwala to na tworzenie złożonych materiałów interaktywnych, w których są stosowane otwarte rozwiązania internetowe i język HTML5. Program Animate umożliwia generowanie kodu HTML i kodu JavaScript zawartości utworzonej na stole montażowym (z uwzględnieniem bitmap, wektorów, kształtów, dźwięków, animacji itd.). Wynik pracy można wyświetlić we wszystkich urządzeniach i przeglądarkach obsługujących element Canvas języka HTML5.

Program Animate a interfejs API elementu Canvas

Program Animate tworzy dokumenty zgodne ze standardem HTML5, używając interfejsu API elementu Canvas. Program Animate umożliwia płynne przekształcanie obiektów utworzonych na stole montażowym w ich odpowiedniki Canvas. Ponieważ wszystkie funkcje technologii Animate są dokładnie odwzorowane w strukturze interfejsu API elementu Canvas, program Animate pozwala na publikowanie złożonej zawartości w dokumentach HTML5.

Tworzenie dokumentu HTML5 Canvas

Aby utworzyć dokument będący elementem Canvas języka HTML5, wykonaj następujące czynności:

1. Wybierz polecenie Plik > Nowy, aby wyświetlić okno dialogowe Nowy dokument. Wybierz zakładkę Zaawansowane u góry ekranu i kliknij opcję HTML5 Canvas. Zostanie otwarty nowy plik FLA z opcjami Ustawienia publikowania dopasowanymi do tworzenia plików HTML5.

Teraz można rozpocząć tworzenie zawartości HTML5 przy użyciu narzędzi dostępnych w programie Animate. Po przystąpieniu do pracy z dokumentem HTML5 Canvas widać, że niektóre funkcje i narzędzia nie są obsługiwane i są wyłączone. Wynika to z tego, że program Animate obsługuje te funkcje, które są obsługiwane za pośrednictwem elementu Canvas w języku HTML5. Nie są na przykład obsługiwane przekształcenia 3D, linie przerywane ani efekty fazy.

Dodawanie funkcji interaktywnych w dokumencie HTML5 Canvas

W programie Animate zawartość HTML5 jest publikowana przy użyciu bibliotek CreateJS.CreateJS to zestaw modułowych bibliotek i narzędzi udostępniających rozbudowaną zawartość interaktywną w otwartych technologiach internetowych za pośrednictwem standardu HTML5. Pakiet CreateJS zawiera biblioteki EaselJS, TweenJS, SoundJS i PreloadJS. Umożliwia on konwertowanie zawartości utworzonej na stole montażowym na kod HTML5 przy użyciu poszczególnych bibliotek w celu tworzenia plików wyjściowych HTML i JavaScript. Te pliki JavaScript można zmieniać w celu ulepszania zawartości.

Program Animate umożliwia bezpośrednie dodawanie funkcji interaktywnych do obiektów na stole montażowym utworzonych dla elementu Canvas języka HTML5. Oznacza to, że można dodawać kod JavaScript do poszczególnych obiektów na stole montażowym z poziomu programu Animate i wyświetlać podgląd zmian podczas tworzenia obiektów. Program Animate zapewnia natywną obsługę kodu JavaScript, oferując przydatne funkcje w edytorze kodu, które zwiększają wydajność obiegu pracy programistów.

Do zawartości można dodawać funkcje interaktywne przez wybieranie pojedynczych klatek i klatek kluczowych na osi czasu. W przypadku dokumentu HTML5 Canvas funkcje interaktywne można dodawać za pomocą kodu JavaScript. Aby uzyskać więcej informacji na temat pisania kodu JavaScript, skorzystaj z tego łącza.

Kod JavaScript można wpisać bezpośrednio w panelu Operacje. Podczas jego wpisywania dostępne są następujące funkcje:

Umożliwia szybkie i bezbłędne wstawianie oraz edytowanie kodu JavaScript. Podczas wpisywania znaków w panelu Operacje jest wyświetlana lista elementów, które mogą pasować do aktualnie wpisywanego kodu.

Ponadto program Animate obsługuje niektóre funkcje właściwe dla panelu Operacje podczas pracy z elementem Canvas języka HTML5. Funkcje te usprawniają dodawanie funkcji interaktywnych do obiektów na stole montażowym. Są to następujące funkcje:

Umożliwia wyświetlanie kodu przy użyciu różnych czcionek lub kolorów zgodnie ze składnią. Funkcja ułatwia strukturalny zapis kodu, dzięki czemu można łatwo wizualnie odróżnić poprawny kod od błędów składni.

Umożliwia wyświetlanie kodu przy użyciu różnych kolorów zgodnie ze składnią. Dzięki temu można wizualnie odróżnić poszczególne elementy składni.

Automatycznie dodaje nawiasy zamykające (kwadratowe i zwykłe) pasujące do otwierających podczas pisania kodu JavaScript.

Za pomocą kodu JavaScript można dodawać funkcje interaktywne do kształtów i obiektów na stole montażowym. Możliwe jest dodawanie kodu JavaScript do pojedynczych klatek i klatek kluczowych.

1. Zaznacz klatkę, do której chcesz dodać kod JavaScript.
2. Wybierz opcję Okno > Operacje, aby otworzyć panel Operacje.

Używanie wycinków kodu JavaScript

Funkcje interaktywne można dodawać przy użyciu wycinków kodu JavaScript dostępnych w programie Animate. Aby skorzystać z panelu Wycinki kodu, wybierz opcję Okna > Wycinki kodu. Więcej informacji na temat dodawania wycinków kodu JavaScript można uzyskać w tym artykule.

Odniesienia do dokumentacji biblioteki CreateJS

Kod do wywoływania interaktywności

Język JavaScript oferuje różne opcje umożliwiające zmianę animacji w interaktywną. Chcesz dowiedzieć się, jak wzbogacić swoją postać o interaktywne ruchy? Obejrzyj samouczek na końcu tego przykładu i wykonaj poniższe kroki.

Jak zmienić zawartość w interaktywną za pomocą języka HTML5

Publikowanie animacji w dokumencie HTML5

Aby opublikować zawartość ze stołu montażowego w dokumencie HTML5, wykonaj następujące czynności:

1. Wybierz polecenie Plik > Ustawienia publikowania.
2. Wybierz następujące ustawienia w oknie dialogowym Ustawienia publikowania:

Ustawienia podstawowe

Katalog, w którym plik FLA zostanie opublikowany. Domyślnie jest to ten sam katalog co pliku FLA. Można go zmienić, klikając przycisk przeglądania „...”.

Wybranie tej opcji powoduje, że oś czasu jest zapętlana. Jeśli nie jest ona zaznaczona, odtwarzanie zostanie zatrzymane na końcu osi czasu.

Jeśli ta opcja nie jest zaznaczona, ukryte warstwy nie są uwzględniane w generowanej zawartości.

Umożliwia użytkownikom określanie, jak stół montażowy ma być wyśrodkowany. Są dostępne opcje W poziomie, W pionie i W obu kierunkach. Dokument HTML Canvas/stół montażowy jest domyślnie wyświetlany na środku okna przeglądarki.

Umożliwia użytkownikom określanie, czy animacja ma reagować w odniesieniu do szerokości, wysokości czy obu wymiarów. Zmienia rozmiar opublikowanych danych wyjściowych na podstawie poszczególnych rozdzielczości ekranu. Wynikiem działania tej opcji są aktywne, ostre i czytelne dane wyjściowe zgodne z wyświetlaczami o wysokich rozdzielczościach.

Dane wyjściowe są ponadto rozciągane, tak aby obejmowały cały obszar ekranu bez żadnych krawędzi, a oprócz tego zachowywały pierwotne proporcje, mimo że niektóre części obszaru roboczego mogą nie mieścić się w widoku.

• Opcje Szerokość, Wysokość i W obu kierunkach gwarantują, że cała zawartość jest skalowana do rozmiaru obszaru roboczego i pozostaje widoczna nawet w przypadku wyświetlania na małym ekranie (np. na urządzeniach przenośnych lub tabletach). Jeśli rozmiar ekranu jest większy niż utworzony rozmiar sceny, obszar roboczy jest wyświetlany w pierwotnym rozmiarze.

Umożliwia użytkownikom określanie, czy animacja ma zostać dopasowana przez wyświetlanie danych wyjściowych w trybie pełnoekranowym czy przez jej rozciągnięcie. Domyślnie ta opcja jest wyłączona.

Dopasuj do widoku: Wyświetla dane wyjściowe w trybie pełnoekranowym z użyciem całej powierzchni ekranu i zachowaniem proporcji.

Rozciągnij, aby dopasować: Rozciąga w taki sposób, że w danych wyjściowych nie ma pustych obszarów na krawędziach.

Umożliwia użytkownikom określanie, czy chcą użyć domyślnego modułu wczytywania wstępnego czy wolą wybrać moduł wczytywania wstępnego z biblioteki dokumentu.

Moduł wczytywania wstępnego to wizualny wskaźnik w postaci animowanego pliku GIF, który jest wyświetlany, gdy trwa wczytywanie skryptów i zasobów wymaganych do renderowania animacji. Po wczytaniu zasobów moduł wczytywania wstępnego zostaje ukryty i jest wyświetlana rzeczywista animacja.

Domyślnie opcja wczytywania wstępnego nie jest zaznaczona.

• Wybierz opcję Domyślne, aby użyć domyślnego modułu wczytywania wstępnego.
• Wybierz opcję Przeglądaj, aby użyć wybranego pliku GIF wczytywania wstępnego. Plik GIF wczytywania wstępnego zostanie skopiowany do folderu obrazów skonfigurowanego w obszarze Eksportuj zasoby obrazów.
• Użyj opcji Podgląd, aby wyświetlić podgląd wybranego pliku GIF.

Przełączane opcje pozwalają wyłączyć publikowanie na najwyższym poziomie lub w podfolderach. Dla tego przycisku jest domyślnie wybrana opcja WŁĄCZ. Przełączenie na opcję WYŁĄCZ spowoduje wyłączenie pola folderu i wyeksportowanie zasobów do tego samego folderu, w którym znajduje się plik danych wyjściowych.

Eksportowanie dokumentu jako tekstury. Animację wektorową można wyeksportować jako tekstury w celu poprawienia wydajności jej odtwarzania. Więcej informacji znajduje się w rozdziale Publikowanie tekstur.

 Ta opcja jest dostępna tylko wtedy, gdy nie jest zaznaczona opcja Połącz obrazy w arkusz kształtów.

 Wszystkie obrazy zaimportowane z dokumentu Canvas (w tym skompresowane) można wyeksportować z zachowaniem ich rozmiaru. Usuń zaznaczenie opcji Eksportuj dokument jako teksturę i Połącz obrazy w arkusz kształtów na zakładce Podstawowe. Obrazy zostaną wyeksportowane z dokładnym zachowaniem rozmiarów.

Folder, w którym są umieszczane zasoby obrazów i na który wskazują odniesienia do tych zasobów.

Połącz w arkusze kształtów: Wybranie tej opcji pozwala połączyć zasoby obrazów w arkusz kształtów. Więcej opcji dotyczących arkuszy kształtów opisano w rozdziale Eksportowanie bitmap jak arkuszy kształtów.

Folder, w którym są umieszczane zasoby dźwięków dokumentu i na który wskazują odniesienia do tych zasobów.

Folder, w którym są umieszczane biblioteki CreateJS i na który wskazują odniesienia do tych bibliotek.

 W przypadku ustawienia domyślnego kontynuowane jest publikowanie plików posegregowanych w logiczne podfoldery.

Ustawienia zaawansowane

Względne adresy URL katalogów, do których zostaną wyeksportowane obrazy, dźwięki i potrzebne biblioteki CreateJS języka JavaScript. Jeśli pole wyboru po prawej stronie pozostanie niezaznaczone, zasoby nie zostaną wyeksportowane z pliku FLA, jednak mimo to do zbudowania adresów URL zostanie użyta określona ścieżka. Opcja ta pozwala przyspieszyć publikowanie z pliku FLA zawierającego wiele zasobów multimedialnych i uniknąć nadpisywania zmodyfikowanych bibliotek JavaScript.

Opcja Eksportuj wszystkie bitmapy jako arkusze kształtów pozwala spakować wszystkie bitmapy z dokumentu obszaru roboczego w jednym arkuszu kształtów. Zmniejsza to liczbę żądań wysyłanych do serwera, co poprawia wydajność. Można określić maksymalny rozmiar arkusza kształtu przez podanie wysokości i szerokości.

Użyj domyślnego: Dane wyjściowe HTML5 są publikowane przy użyciu szablonu domyślnego.

Importuj nowy: Pozwala importować nowy szablon dokumentu HTML5.

Eksportuj: Dokument HTML5 jest eksportowany jako szablon.

Po zaznaczeniu tej opcji są używane kopie bibliotek przechowywanych na serwerach CDN oprogramowania CreateJS pod adresem code.createjs.com. Pozwala to na przechowywanie tych bibliotek w buforze i udostępnianie ich różnym witrynom.

Jeśli ta opcja nie jest zaznaczona, ukryte warstwy nie są uwzględniane w generowanej zawartości.

Jeśli ta opcja jest zaznaczona, instrukcje wektorowe są generowane w zredukowanej postaci. Wyłączenie tej opcji powoduje eksportowanie instrukcji w czytelnej, opisowej postaci (przydatne do celów szkoleniowych).

Jeśli ta opcja jest zaznaczona, symbole osi czasu mają właściwość frameBounds zawierającą tablicę prostokątów odpowiadających obwiedni każdej klatki na osi czasu. Obwiednia w wielu klatkach znacznie wydłuża czas publikowania.

W przypadku zaznaczenia pola wyboru Dołączaj kod JavaScript w plikach HTML pole wyboru Zastąp plik HTML przy publikowaniu jest zaznaczone i wyłączone.W przypadku usunięcia zaznaczenia pola wyboru Zastąp plik HTML przy publikowaniu pole wyboru Dołączaj kod JavaScript w plikach HTML nie jest zaznaczone i jest wyłączone.

3. Kliknij przycisk Publikuj, aby opublikować zawartość do określonej lokalizacji.

 Animacja opracowana przy użyciu zagnieżdżonych osi czasu z pojedynczą klatką nie może zostać zapętlona.

Zmienne szablonu HTML

Przy importowaniu nowego własnego szablonu HTML w trakcie publikowania zmienne domyślne są zastępowane dostosowanymi wycinkami kodu na podstawie składników pliku FLA. 

W poniższej tabeli zestawiono zmienne szablonów rozpoznawane i zastępowane obecnie przez program Animate:

Następujące tokeny z poprzednich wersji są przestarzałe w bieżącej wersji:

 Tokeny te zostały podzielone na moduły i zastąpione innymi tokenami.

Obsługa interfejsu JSAPI podczas importu i eksportu szablonów HTML dokumentów Canvas

Następujące interfejsy JSAPI obsługują import i eksport szablonów HTML dla dokumentów Canvas:

• Eksportuje szablon publikowania dokumentu HTML5 Canvas dla danego dokumentu w określonej lokalizacji:

bool document::exportCanvasPublishTemplate(pathURI)

• Przykład:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace("Nie można wyeksportować szablonu");

• Importuje i ustawia szablon publikowania dokumentu HTML5 Canvas dla danego dokumentu z określonej lokalizacji pathURI:
  

bool document::importCanvasPublishTemplate(pathURI)

• Przykład: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace("Nie można zaimportować szablonu");

Osadzanie kodu JavaScript na stronach HTML

W programie Animate wprowadzono możliwość osadzania pliku JavaScript w pliku HTML podczas publikowania dokumentów Canvas.

1. W menu Ustawienia publikowania przejdź do zakładki Zaawansowane i wybierz opcję Dołączaj kod JavaScript w plikach HTML.
2. Kliknij przycisk OK w oknie dialogowym Dołączaj kod JavaScript w plikach HTML podczas publikowania, aby ponownie opublikować zawartość zastępującą kod HTML.
3. Spowoduje to wyłączenie pola wyboru Zastąp plik HTML przy publikowaniu i generowanie z jednoczesnym zastępowaniem kodu HTML podczas każdego zdarzenia publikowania.
4. W oknie dialogowym Nie dołączaj kodu JavaScript w plikach HTML wybierz przycisk OK, aby wykluczyć kod JavaScript i ponownie opublikować plik HTML.
5. Gdy pole wyboru  Zastąp plik HTML przy publikowaniu nie jest zaznaczone, opcja Dołączaj kod JavaScript w plikach HTML jest automatycznie wyłączona. 

 Jeśli nie chcesz, aby kod HTML był zastępowany, opcje Zastąp plik HTML przy publikowaniu i Osadź kod JavaScript w pliku HTML nie mogą być włączone równocześnie.

Dodawanie skryptów innych firm i globalnych

Podczas tworzenia animacji jest często używany kod JavaScript obejmujący cały materiał. Korzystając z tej funkcji, można dodawać skrypty globalne i innych firm niezwiązane z określoną klatką, które mogą dotyczyć całej animacji w programie Animate. 

Dodawanie i używanie skryptów globalnych:

Dodawanie skryptów innych firm

Podczas tworzenia animacji można stosować biblioteki JavaScript innych firm, jednak wymaga to ręcznego modyfikowania kodu generowanego przez program Animate. Ta funkcja zapewnia dodatkową elastyczność — dostęp w animacji do najnowszych bibliotek i skryptów JavaScript.

Dodawanie skryptów innych firm:

Scalanie danych JSON z kodem JavaScript

Zgodnie z sugestiami klientów i w związku z brakiem wystarczających zabezpieczeń plików JSON scaliliśmy odpowiednie dane z plikiem JavaScript, dzięki czemu nie jest tworzony osobny plik JSON.

Optymalizacja wyjścia HTML5 Canvas

Program Animate optymalizuje rozmiar i wydajność wyjścia HTML5 Canvas, realizując następujące operacje:

• Eksportowanie bitmap jako arkusza kształtów przy użyciu opcji z zakładki Arkusz kształtów w ustawieniach publikowania
• Wykluczenie ukrytych warstw (przez wyłączenie opcji Uwzględniaj warstwy ukryte) z publikowanych danych wyjściowych
• Wykluczenie wszystkich nieużywanych zasobów, takich jak dźwięki i bitmapy, a także wszystkich zasobów z nieużywanych klatek (ustawienie domyślne)
• Wykluczenie z eksportu zasobów pliku FLA przez wyłączenie eksportu zasobów obrazów, dźwięków i bibliotek pomocniczych JavaScript CreateJS oraz wykonanie eksportu za pomocą względnych adresów URL
• Dane wyjściowe HTML5 Canvas zgodne z wyświetlaczami o wysokich rozdzielczościach: Program Animate skaluje dane wyjściowe z uwzględnieniem proporcji pikseli urządzenia, na którym zawartość jest wyświetlana. Ta zgodność poprawia czytelność materiałów wyjściowych przy powiększaniu rozmiarów obrazu i eliminuje problemy z widocznością pikseli podczas przeglądania dokumentów HTML Canvas na urządzeniach o wysokiej rozdzielczości. 
  

Ustawianie przezroczystego tła elementu Canvas

Dokument Canvas można dostosować do różnych kolorów, a także zmodyfikować jego przezroczystość na wyświetlaczu. Podczas tworzenia przezroczystego dokumentu Canvas można przeglądać jego podstawową zawartość HTML w trakcie publikowania.

Uwaga: To ustawienie umożliwia także uzyskanie przezroczystego tła podczas publikowania plików OAM.

1. Wybierz dokument Canvas, który chcesz zmodyfikować.
2. W okienku Właściwości wybierz opcję Stół montażowy.
3. Na stole montażowym ustaw wartości procentowe dla opcji Alfa.

Obsługa próbki „Bez koloru”

Do ustawienia przezroczystego tła elementu Canvas można także użyć opcji próbki Bez koloru:

1. Wybierz opcję Modyfikuj > Dokument > Kolor stołu lub w inspektorze Właściwości wybierz opcję Ustawienia zaawansowane.
2. W próbce Kolor stołu wybierz opcję Bez koloru.

Eksportowanie bitmap jako arkusza kształtów

Wyeksportowanie kilku bitmap użytych w dokumencie HTML5 Canvas jako jednego arkusza kształtów zmniejsza liczbę żądań wysyłanych do serwera, redukuje rozmiar dokumentu wyjściowego i zwiększa wydajność. Arkusz kształtów można wyeksportować jako plik PNG (domyślnie), jako plik JPEG lub w obu tych formatach.

1. Na zakładce Arkusz kształtów zaznacz pole wyboru Połącz obrazy i zasoby w arkusze kształtów.
2. W polu Format wybierz opcję PNG, JPEG lub Oba.
   
3. Jeśli wybrano opcję PNG lub Oba, określ następujące opcje w obszarze Ustawienia formatu PNG:
   • Jakość: Pozwala ustawić jakość arkusza kształtów: 8 bitów (domyślnie), 24 bity lub 32 bity.
   • Rozmiar maksymalny: Określa maksymalną wysokość i szerokość arkusza kształtów w pikselach.
   • Tło: Kliknij, aby ustawić kolor tła arkusza kształtów. 
4. Jeśli wybrano opcję JPEG lub Oba, określ następujące opcje w obszarze Ustawienia formatu JPEG:
   
   • Jakość: Pozwala ustawić jakość arkusza kształtów.
   • Rozmiar maksymalny: Określa maksymalną wysokość i szerokość arkusza kształtów w pikselach.
   • Tło: Kliknij, aby ustawić kolor tła arkusza kształtów. 

Praca z tekstem w dokumencie HTML5 Canvas

Dokumenty HTML Canvas obsługują tekst statyczny i dynamiczny.

Tekst statyczny

Tekst statyczny zapewnia szersze możliwości. Wszystkie zasoby są konwertowane na kontury w czasie publikowania, a użytkownik ma zapewnione doskonałe środowisko pracy WYSIWYG. Jako że tekst jest publikowany w postaci konturów wektorowych, nie można go edytować w czasie wykonywania.

Uwaga: Zbyt duża ilość tekstu statycznego może spowodować znaczne powiększenie rozmiaru pliku.

Tekst dynamiczny

Tekst dynamiczny można modyfikować w czasie wykonywania. Nie powoduje on zbyt dużego powiększenia rozmiaru pliku. Obsługuje on mniej opcji niż tekst statyczny. Obsługuje także czcionki internetowe za pośrednictwem usługi Adobe Fonts.

W przypadku używania tekstu dynamicznego zawierającego czcionki niedostępne na komputerach użytkowników końcowych dane wyjściowe są wyświetlane za pomocą czcionek domyślnych, co zmniejsza nieco komfort użytkowania. Rozwiązaniem takich problemów są czcionki internetowe.

Dodawanie czcionek internetowych do dokumentu HTML5 Canvas

Program Animate udostępnia czcionki internetowe w typie tekstu dynamicznego w dokumentach HTML5 Canvas. Usługa Adobe Fonts zapewnia bezpośredni dostęp do tysięcy czcionek wysokiej jakości opracowanych przez najlepsze studia partnerskie. Członkostwo Creative Cloud pozwala korzystać z usługi Adobe Fonts w danych wyjściowych HTML5 w przypadku nowoczesnych przeglądarek i urządzeń przenośnych.

Więcej informacji na temat używania czcionek internetowych z usługi Adobe Fonts w programie Animate można znaleźć w rozdziale Korzystanie z czcionek internetowych w dokumentach HTML5 Canvas

W programie Animate 2015.2 ulepszono wygląd tekstu dynamicznego w dokumencie Canvas w taki sposób, że materiały na stole montażowym i materiały opublikowane są zsynchronizowane.

Uwaga: Czcionki Adobe Fonts nie są dostępne w przypadku tekstu statycznego.

Opis danych wyjściowych elementu Canvas języka HTML5

Opublikowana zawartość wyjściowa HTML5 składa się z poniższych plików:

Zawiera definicje wszystkich kształtów, obiektów i kompozycji w elemencie Canvas. Ponadto wywołuje przestrzeń nazw CreateJS do konwertowania zawartości Animate na zawartość HTML5 oraz odpowiedni plik JavaScript zawierający elementy interaktywne. 

Zawiera dedykowane definicje i kod wszystkich interaktywnych elementów animacji. W pliku JavaScript jest też zdefiniowany kod wszystkich typów animacji.

Domyślnie pliki te są kopiowane do tej samej lokalizacji, w której znajduje się plik FLA. Lokalizację tę można zmienić, podając ścieżkę wyjściową w oknie dialogowym Ustawienia publikowania (opcja Plik > Ustawienia publikowania).

Migrowanie istniejącej zawartości do elementu Canvas języka HTML5

Aby wygenerować zawartość wyjściową HTML5, można przeprowadzić migrację istniejącej zawartości w programie Animate. Program Animate umożliwia migrowanie zawartości przez ręczne kopiowanie lub importowanie poszczególnych warstw, symboli i innych elementów bibliotek. Można też uruchomić polecenie Konwertuj dokument AS3 na dokument HTML5 Canvas, aby automatycznie przenieść istniejącą zawartość ActionScript do nowego dokumentu HTML5 Canvas. Aby uzyskać więcej informacji, skorzystaj z tego łącza.

Podczas pracy z dokumentami HTML5 w programie Animate można zauważyć, że niektóre funkcje programu Animate nie są obsługiwane. Dotyczy to tych funkcji, które nie mają swoich odpowiedników w interfejsie API elementu Canvas. Z tego powodu nie można ich użyć w dokumentach HTML5 Canvas. Może to mieć wpływ na migrację zawartości w następujących sytuacjach:

zawartości (warstw lub symboli bibliotecznych) z tradycyjnych dokumentów Animate (na przykład z dokumentów ActionScript 3.0, AIR for Android czy AIR dla komputerów) do dokumentów HTML5. W takiej sytuacji nieobsługiwana zawartość zostanie usunięta lub przekonwertowana na obsługiwane wartości domyślne.

Na przykład skopiowanie animacji 3D spowoduje usunięcie wszystkich przekształceń 3D zastosowanych do obiektów na stole montażowym.

pliku PSD lub AI, który zawiera nieobsługiwaną zawartość. W takiej sytuacji zawartość zostanie usunięta lub przekonwertowana na obsługiwane wartości domyślne.

Na przykład w przypadku zaimportowania pliku PSD, do którego zastosowano efekty Faza gradientu, Program Animate usunie te efekty.

z dokumentami różnych typów (na przykład ActionScript 3.0 i HTML5 Canvas) i przełączanie między dokumentami przy wybranych narzędziach lub opcjach, które nie są obsługiwane. Program Animate wyświetla wówczas wskazówkę wizualną, że dana funkcja nie jest obsługiwana.

Utworzono na przykład linię przerywaną w dokumencie ActionScript 3.0 i przełączono się do dokumentu HTML5 Canvas, gdy narzędzie Linia było nadal wybrane. Obserwując wskaźnik i Inspektora właściwości, można zauważyć, że ikony tych elementów informują o braku obsługi linii przerywanej w dokumencie HTML5 Canvas.

Elementy ActionScript wraz z komentarzami do kodu są usuwane. Ponadto w razie wpisania kodu JavaScript w bloku komentarza (w przypadku korzystania z oprogramowania Toolkit for CreateJS z programem Animate 13.0) należy ręcznie usunąć komentarz z kodu.

Na przykład skopiowanie warstw zawierających przyciski spowoduje usunięcie tych przycisków.

Zmiany stosowane do zawartości po migracji

Poniżej podano typy zmian stosowanych po migracji starszej zawartości do dokumentu HTML5 Canvas.

Typy zawartości nieobsługiwane w dokumencie HTML5 Canvas są usuwane. Na przykład:

• Przekształcenia 3D są usuwane.
• Komentarze z kodu ActionScript są usuwane.
• Klipy wideo są usuwane.

Typ lub funkcja zawartości są obsługiwane, ale właściwość tej funkcji nie jest obsługiwana. Na przykład:

• Tryb mieszania Overlay nie jest obsługiwany; jego wartość zostaje zmieniona na Normal.
• Linia przerywana nie jest obsługiwana; zostaje zmieniona na linię ciągłą.

Pełną listę nieobsługiwanych funkcji wraz z ich wartościami domyślnymi ustawianymi podczas migracji można znaleźć w tym artykule.

Konwertowanie dokumentów innych typów na dokumenty HTML5 Canvas

Uniwersalny konwerter typów dokumentów pozwala konwertować projekty FLA (dowolnego typu) na każdy inny typ dokumentu, na przykład na format HTML5 Canvas, ActionScript/AIR, WebGL lub niestandardowy typ dokumentu. Po przekonwertowaniu zawartości na format docelowy można korzystać z funkcji projektowania oferowanych dla danego formatu przez program Animate. 

Więcej informacji można znaleźć w artykule Konwertowanie na inne formaty dokumentów.

Konwertowanie dokumentu ActionScript 3 na dokument HTML5 Canvas za pomocą skryptu JSFL

Program Animate udostępnia skrypt JSFL do konwertowania dokumentu AS3 na dokument HTML5 Canvas. Po uruchomieniu skrypt JSFL wykonuje poniższe czynności:

• Tworzy nowy dokument HTML5 Canvas.
• Kopiuje wszystkie warstwy, symbole i elementy bibliotek do nowego dokumentu HTML5 Canvas.
• Stosuje wartości domyślne do nieobsługiwanych funkcji, podfunkcji i właściwości funkcji.
• Tworzy oddzielny plik FLA każdej sceny, ponieważ dokument HTML5 Canvas nie obsługuje wielu scen w jednym pliku.

1. Otwórz dokument ActionScript 3 w programie Animate.
2. Wybierz opcję Polecenia > Konwertuj dokument AS3 na dokument HTML5 Canvas.

 Ta opcja jest dostępna tylko wtedy, gdy nie jest zaznaczona opcja Połącz obrazy w arkusz kształtów.