Tworzenie i publikowanie materiałów rzeczywistości wirtualnej

  1. Podręcznik użytkownika programu Adobe Animate
  2. Wprowadzenie do programu Animate
    1. Nowości w programie Animate
    2. Słownik wizualny
    3. Wymagania systemowe programu Animate
    4. Skróty klawiaturowe programu Animate
    5. Praca z wieloma typami plików w programie Animate
  3. Animacja
    1. Podstawowe informacje o animacjach w programie Animate
    2. Korzystanie z klatek i klatek kluczowych w programie Animate
    3. Animacja klatka po klatce w programie Animate
    4. Praca z animacjami klasycznymi w programie Animate
    5. Narzędzie Pędzel
    6. Linie pomocnicze ruchu
    7. Animacje ruchu a język ActionScript 3.0
    8. Informacje o animacjach ruchu
    9. Animacje ruchu
    10. Tworzenie animacji ruchu
    11. Używanie klatek kluczowych właściwości
    12. Animowanie położenia za pomocą klatek pośrednich
    13. Edytowanie animacji ruchu za pomocą Edytora ruchu
    14. Edytowanie ścieżki ruchu animacji
    15. Operacje na animacjach ruchu
    16. Dodawanie własnych krzywych dynamiki
    17. Tworzenie i stosowanie ruchów predefiniowanych
    18. Konfigurowanie zakresów animacji
    19. Praca z animacjami ruchu zapisanymi jako pliki XML
    20. Porównanie animacji ruchu i animacji klasycznych
    21. Animowanie kształtów metodą klatek pośrednich
    22. Animacja oparta na narzędziu Kość w programie Animate
    23. Tworzenie konstrukcji postaci w programie Animate
    24. Używanie warstw maskujących w programie Adobe Animate
    25. Praca ze scenami w programie Animate
  4. Funkcje interaktywne
    1. Tworzenie przycisków w programie Animate
    2. Konwertowanie projektów programu Animate na dokumenty innych typów
    3. Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate
    4. Programowanie elementów interaktywnych za pomocą wycinków kodu w programie Animate
    5. Tworzenie własnych składników HTML5
    6. Używanie składników w zawartości HTML5 Canvas
    7. Tworzenie własnych składników: przykłady
    8. Wycinki kodu dla składników dostosowanych
    9. Sprawdzone procedury — reklama oparta na programie Animate
    10. Tworzenie i publikowanie materiałów rzeczywistości wirtualnej
  5. Przestrzeń robocza i obieg pracy
    1. Tworzenie pędzli malarskich i zarządzanie nimi
    2. Używanie czcionek Google Fonts w dokumentach HTML5 Canvas
    3. Korzystanie z Bibliotek Creative Cloud w programie Adobe Animate
    4. Korzystanie ze stołu montażowego i panelu Narzędzia w programie Animate
    5. Obieg pracy i przestrzeń robocza w programie Animate
    6. Używanie czcionek internetowych w dokumentach HTML5 Canvas
    7. Osie czasu a język ActionScript
    8. Praca z wieloma osiami czasu
    9. Ustawianie preferencji
    10. Korzystanie z paneli narzędziowych programu Animate
    11. Tworzenie warstw na osi czasu w programie Animate
    12. Eksportowanie animacji do aplikacji mobilnych i platform gier
    13. Przesuwanie i kopiowanie obiektów
    14. Szablony
    15. Znajdowanie i zamienianie w programie Animate
    16. Cofanie, ponawianie i panel Historia
    17. Skróty klawiaturowe
    18. Korzystanie z osi czasu w programie Animate
    19. Tworzenie rozszerzeń HTML
    20. Opcje optymalizacji obrazów i animowanych plików GIF
    21. Eksportowanie ustawień obrazów oraz plików GIF
    22. Panel Zasoby w programie Animate
  6. Multimedia i wideo
    1. Przekształcanie i łączenie obiektów graficznych w programie Animate
    2. Tworzenie i obsługa wystąpień symboli w programie Animate
    3. Obrys obrazu
    4. Używanie dźwięku w programie Adobe Animate
    5. Eksportowanie plików SVG
    6. Tworzenie plików wideo do używania w programie Animate
    7. Dodawanie wideo w programie Animate
    8. Praca z punktami sygnalizacji wideo
    9. Rysowanie i tworzenie obiektów w programie Animate
    10. Przekształcanie linii i kształtów
    11. Obrysy, wypełnienia, i gradienty w programie Animate CC
    12. Korzystanie z programów Adobe Premiere Pro i After Effects
    13. Panel Kolory w programie Animate CC
    14. Otwieranie plików programu Flash CS6 w programie Animate
    15. Praca z tekstem klasycznym w programie Animate
    16. Umieszczanie kompozycji w programie Animate
    17. Zaimportowane bitmapy w programie Animate
    18. Grafika 3D
    19. Praca z symbolami w programie Animate
    20. Rysowanie linii i kształtów przy użyciu programu Animate
    21. Praca z bibliotekami w programie Animate
    22. Eksportowanie dźwięków
    23. Zaznaczanie obiektów w programie Animate CC
    24. Praca z plikami AI programu Illustrator w programie Animate
    25. Stosowanie wzorków przy użyciu narzędzia Rozpylacz
    26. Stosowanie trybów mieszania
    27. Układanie obiektów
    28. Automatyzacja zadań za pomocą menu Polecenia
    29. Teksty wielojęzyczne
    30. Korzystanie z kamery w programie Animate
    31. Korzystanie z programów Animate i Adobe Scout
    32. Praca z plikami programu Fireworks
    33. Filtry graficzne
    34. Dźwięk a język ActionScript
    35. Preferencje rysowania
    36. Rysowanie za pomocą narzędzia Pióro
  7. Platformy
    1. Konwertowanie projektów programu Animate na dokumenty innych typów
    2. Obsługa platform niestandardowych
    3. Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate
    4. Tworzenie i publikowanie dokumentów WebGL
    5. Pakowanie aplikacji na potrzeby środowiska AIR for iOS
    6. Publikowanie aplikacji dla środowiska AIR for Android
    7. Publikowanie dla środowiska AIR na komputery
    8. Ustawienia publikowania kodu ActionScript
    9. Sprawdzone procedury — porządkowanie kodu ActionScript w aplikacji
    10. Korzystanie z kodu ActionScript w programie Animate
    11. Sprawdzone procedury — wskazówki dotyczące ułatwień dostępu
    12. Ułatwienia dostępu w przestrzeni roboczej programu Animate
    13. Pisanie skryptów i zarządzanie nimi
    14. Włączanie obsługi platform niestandardowych
    15. Omówienie obsługi platform niestandardowych
    16. Tworzenie zawartości z ułatwieniami dostępu
    17. Praca z wtyczkami obsługi platform niestandardowych
    18. Debugowanie kodu ActionScript 3.0
    19. Włączanie obsługi platform niestandardowych
  8. Eksportowanie i publikowanie
    1. Eksportowanie plików z programu Animate CC
    2. Publikowanie plików OAM
    3. Eksportowanie plików SVG
    4. Eksportowanie grafiki i wideo w programie Animate
    5. Publikowanie dokumentów ActionScript 3.0
    6. Eksportowanie animacji do aplikacji mobilnych i platform gier
    7. Eksportowanie dźwięków
    8. Eksportowanie plików wideo QuickTime
    9. Sterowanie zewnętrznym odtwarzaniem wideo przy użyciu kodu ActionScript
    10. Sprawdzone procedury — wskazówki dotyczące tworzenia zawartości dla urządzeń przenośnych
    11. Sprawdzone procedury — konwencje dotyczące wideo
    12. Sprawdzone procedury — wskazówki dotyczące tworzenia aplikacji SWF
    13. Sprawdzone procedury — określanie struktury pliku FLA
    14. Sprawdzone procedury optymalizowania plików FLA dla programu Animate
    15. Ustawienia publikowania kodu ActionScript
    16. Określanie ustawień publikowania w programie Animate
    17. Eksportowanie plików projektora
    18. Eksportowanie obrazów i animowanych plików GIF
    19. Szablony publikowania w formacie HTML
    20. Korzystanie z programów Adobe Premiere Pro i After Effects
    21. Szybkie udostępnianie i publikowanie animacji

Program Animate udostępnia typ dokumentu przeznaczony do pracy z materiałami VR 360 stopni i panoramami VR, który ułatwia tworzenie zawartości tego typu.Nowy typ dokumentu rzeczywistości wirtualnej umożliwia też importowanie modeli 3D (plików GLB) do projektu programu Animate w celu tworzenia animacji 3D. 

Aby wyświetlić podgląd zawartości utworzonej przy użyciu typu dokumentu VR, można użyć nowego panelu Widok VR. W panelu Widok VR można klikać i przesuwać wystąpienia klipów filmowych. Program Animate automatycznie wykrywa obiekty, kiedy są one klikane i przesuwane.Widok VR umożliwia umieszczanie obiektów w przestrzeni 3D. Zmiany rozmieszczenia obiektów (klipów filmowych) wprowadzone w widoku VR są automatycznie odzwierciedlane na stole montażowym 2D. W panelu Oś czasu można oznaczyć warstwę jako tekstową, aby zawinąć ją na cylindrze albo kuli w tych typach dokumentu.

Program Animate umożliwia zarządzanie animacjami rzeczywistości wirtualnej w czasie wykonywania — w oparciu o rozbudowane interfejsy API. Można na przykład dodać w środowisku VR stopni obiekty, które są uaktywniane, gdy użytkownik klika przycisk. 

Uwaga:

Funkcje rzeczywistości wirtualnej (360 stopni i panoramy) są dostępne jako wersje beta w wersji programu Animate z października 2018. 

Typy dokumentów rzeczywistości wirtualnej

Istnieją dwa typy dokumentów przeznaczone do pracy z rzeczywistością wirtualną:

Panorama VR

  • Te dokumenty umożliwiają tworzenie panoram do aplikacji rzeczywistości wirtualnej. 
  • W dokumentach tego typu zawartość narysowana bezpośrednio na warstwach tekstury jest zawijana na cylindrze.
  • Można określić, czy obraz panoramiczny ma się znajdować na warstwie tekstury, czy ma być rysowane tło. 
  • Program Animate konwertuje utworzone animacje 2D na panoramy i obsługuje przy tym elementy interaktywne. 

VR 360 stopni

  • Dokumenty tego typu umożliwiają tworzenie zawartości 360 stopni do aplikacji rzeczywistości wirtualnej.  
  • W dokumentach tego typu zawartość narysowana bezpośrednio na warstwach tekstury jest zawijana na kuli.
  • Można wybrać obraz podzielony na prostokąty równych wymiarów lub narysować zawartość. 
  • Program Animate konwertuje utworzone animacje 2D na zawartość 360 stopni i obsługuje elementy interaktywne.
Materiały VR (360 stopni i panoramy) na ekranie początkowym
Materiały VR (360 stopni i panoramy) na ekranie początkowym

Tworzenie i publikowanie materiałów rzeczywistości wirtualnej

Aby utworzyć zawartość VR w programie Animate, wykonaj następującą procedurę:

  1. Zaimportuj obraz 360 albo panoramiczny jako tło na stole montażowym.

    Jeśli rozmiar obrazu jest duży, można dostosować rozmiar widoku stołu montażowego.

    • Aby ustawić rozmiar, wybierz polecenie Modyfikuj > Dokument.
    • Kliknij opcję Tak jak zawartość.

    Wybierz ikonę Wyśrodkuj stół montażowy w prawym górnym rogu okna, aby ustawić obraz na środku ekranu. 

  2. Aby utworzyć warstwę tekstury, kliknij ikonę Utwórz zawinięcie teksturą dla wszystkich warstw na panelu Oś czasu, tak jak na poniższym zrzucie ekranu:

    Tworzenie zawinięcia teksturą dla warstw
    Tworzenie zawinięcia teksturą dla warstw

    Zależnie od wybranego typu dokumentu warstwa tekstury jest zawijana wokół cylindra lub kuli.

  3. Można dodać obiekty do stołu montażowego, dodać animację klasyczną lub opartą na klatkach pośrednich do obiektów (zależnie od stosowanych zasobów) i utworzyć animację. 

    Stół montażowy 360 stopni VR
    Stół montażowy 360 stopni VR

    Powyższy zrzut ekranu ilustruje widok stołu montażowego w programie Animate. Zawiera on obraz podzielony na prostokąty o równych wymiarach w dokumencie typu VR 360 stopni, ptaka ze ścieżką ruchu oraz klasyczną animację na osi czasu. 

  4. Opcja Okna > Widok VR umożliwia wyświetlenie widoku zawartości.

    Podgląd materiałów VR w widoku VR
    Podgląd materiałów VR w widoku VR

    Kliknij przycisk Uruchom widok VR w panelu Widok VR.

    Panel Widok VR
    Panel Widok VR

    W trybie podglądu w widoku VR można przywrócić pierwotny stan zawartości, używając przycisku Wyzeruj. Widok VR nie odzwierciedla automatycznie każdej zmiany na stronie tworzenia. Aby sprawdzić zmiany zasobów wprowadzone w środowisku montażowym, kliknij przycisk Odśwież

    Opcje odświeżania i zerowania w widoku VR
    Opcje odświeżania i zerowania w widoku VR

    W trybie podglądu można przesuwać wystąpienia klipów filmowych. Program Animate automatycznie wykrywa obiekty wskazane kursorem myszy. Kształt kursora zmienia się na ikonę przesuwania po wskazaniu obiektów (tak jak przedstawiono na zrzucie ekranu). Zależnie od wybranego typu dokumentu obiekty można przesuwać na ścieżce w kształcie cylindra lub kuli.

    Aby panoramować w oknie Widok VR, kliknij ekran podglądu i przeciągnij. 

    Ikona przesuwania obiektów
    Ikona przesuwania obiektów

  5. Aby opublikować zawartość, wybierz polecenie Plik > Publikuj lub użyj skrótu Ctrl + Enter. Podczas publikowania program Animate zawija obraz na siatce cylindrycznej lub sferycznej. Można dodawać więcej warstw i animacji na tych warstwach.

    Przykładowy opublikowany materiał VR 360 stopni będzie przypominał poniższy animowany plik GIF. 

    Przykładowe dane wyjściowe VR 360 stopni
    Przykładowe dane wyjściowe VR 360 stopni

    Przykładowe dane wyjściowe panoramy VR
    Przykładowe dane wyjściowe panoramy VR

    Podczas publikowania materiałów rzeczywistości wirtualnej można wybrać użycie serwerowych bibliotek JavaScript jako środowiska wykonawczego. Domyślnie program Animate używa dla publikowanej zawartości środowiska wykonawczego opartego na bibliotekach serwerowych. Można usunąć zaznaczenie tej opcji w oknie Ustawienia publikowania, aby spakować środowisko wykonawcze razem z publikowaną zawartością wyjściową. 

    Ustawienia publikowania
    Ustawienia publikowania bibliotek

Korzystanie z zawartości 3D

Typ dokumentu rzeczywistości wirtualnej umożliwia importowanie modeli 3D (plików GLB) do projektu programu Animate w celu pracy z grafiką 3D.

  1. Utwórz dokument typu VR — 360 stopni lub panorama.

  2. Wybierz polecenie Plik > Importuj i przejdź do pliku GLB, aby zaimportować go na stół montażowy lub do biblioteki.

    Importowanie zawartości 3D w celu montażu
    importowanie zawartości 3D na stół montażowy

  3. Dodawanie animacji i elementów interaktywnych oraz publikowanie odbywa się podobnie jak w przypadku obiektów klipów filmowych.

    Podgląd modelu 3D można wyświetlić w widoku VR. 

Używanie rzeczywistości wirtualnej w czasie wykonywania

Program Animate umożliwia zarządzanie animacjami rzeczywistości wirtualnej w czasie wykonywania — w oparciu o interfejsy API. Można na przykład dodać w środowisku VR 360 stopni obiekty, które użytkownik klika przyciskiem. 

Są dostępne następujące interfejsy API rzeczywistości wirtualnej:

Pakiet: anWebgl

Właściwości

Nazwa

Typ/klasa

Dostęp

Opis

Przykład

Stage

Stage

Zapis i odczyt

Pozwala pobrać/ustawić właściwość stołu montażowego.

anWebgl.stage

virtualCamera

VirtualCamera

Zapis i odczyt

Zapewnia dostęp do kamery domyślnej.

anWebgl.virtualCamera

Root

MovieClip

Tylko odczyt

Obiekt ekranowy najwyższego poziomu (oś czasu bieżącej sceny).

anWebgl.root

Metody

Nazwa

Prototyp

Opis

Przykład

addGLBFile

addGLBFile(sciezkaPliku: string, wywolaniePomyslne: function, wywolanieBlad: function): void

Wczytuje model 3D z określonego pliku GLB.

anWebgl.addGLBFile("model.glb", funkcjaWywolaniaSukces, funkcjaWywolaniaBlad).

playAll

playAll(): void

Odtwarza animacje z wszystkich klipów filmowych, w tym najwyższego poziomu.

anWebgl.playAll();

stopAll

stopAll(): void

Zatrzymuje animacje wszystkich klipów filmowych, w tym najwyższego poziomu.

anWebgl.stopAll();

Klasa: MovieClip

Dziedziczy: DisplayObjectContainer

Właściwości

Metody

Nazwa

Prototyp

Opis

Przykład

Play

play(): void

Odtwarza animację klipu filmowego.

anWebgl.root.getChildByName("nazwa").play();
(lub)

this.play(); 

Stop

stop(): void

Zatrzymuje animację klipu filmowego.

anWebgl.root.getChildByName("nazwa").stop();

 

playAll

playAll(): void

Odtwarza animację wszystkich klipów filmowych, w tym najwyższego poziomu.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll(): void

Zatrzymuje animację wszystkich klipów filmowych, w tym najwyższego poziomu.

anWebgl.root.getChildAt(0)).stopAll();

 

Klasa: DisplayObject

Dziedziczy: IEventDispatcher

Nazwa

Prototyp

Opis

Przykład

hitTestPoint

hitTestPoint(x, y, Boolean).

Zwraca obiekt displayObject/displayObjectContainer/movieClip zależnie od obiektu trafienia.

Wartości x i y są współrzędnymi na ekranie.

anWebgl.root.hitTestPoint(300, 200, true, false);

Nazwa

Typ/klasa

Dostęp

Opis

Przykład

X

Number

Zapis i odczyt

Wykonuje przesunięcie względem osi X.

var nazwa =anWebgl.root.getChildByName("nazwa");
nazwa.x+=10;

 

Y

Number

Zapis i odczyt

Wykonuje przesunięcie względem osi Y.

var nazwa = anWebgl.root.getChildByName("nazwa");
nazwa.y+=10;

 

Z

Number

Zapis i odczyt

Wykonuje przesunięcie względem osi Z.

var nazwa = anWebgl.root.getChildByName("nazwa");
nazwa.z+=10;

 

scaleX

Number

Zapis i odczyt

Skaluje względem osi X.

var glowna = anWebgl.root;
var potomna = glowna.getChildAt(0);
potomna.scaleX=2;

 

scaleY

Number

Zapis i odczyt

Skaluje względem osi Y.

var glowna = anWebgl.root;
var potomna = glowna.getChildAt(0);
potomna.scaleY=10;

 

scaleZ

Number

Zapis i odczyt

Skaluje względem osi Z.

var glowna = anWebgl.root;
var potomna = glowna.getChildAt(0);
potomna.scaleZ=10;

 

rotationX

Number

Zapis i odczyt

Obraca względem osi X.

anWebgl.root.getChildByName("nazwa").rotationX+=30;

(lub)

anWebgl.root.nazwaKlipuFilmowego.rotationX+=30;

rotationY

Number

Zapis i odczyt

Obraca względem osi Y.

anWebgl.root.getChildByName("nazwa").rotationY+=30;

 

rotationZ

Number

Zapis i odczyt

Obraca względem osi Z.

anWebgl.root.getChildByName("nazwa").rotationZ+=30;

 

Parent

DisplayObjectContainer

Tylko odczyt

Kontener obiektu macierzystego.

var glowna = anWebgl.root;
var potomna = glowna.getChildAt(0);
console.log(potomna.parent)

 

Visible

Boolean

Zapis i odczyt

Widoczność obiektów

var glowna = anWebgl.root;
var potomna = glowna.getChildAt(0);
console.log(potomna.visible);

Klasa: DisplayObjectContainer

Dziedziczy: DisplayObject

Nazwa

Prototyp

Opis

Przykład

numChildren

numChildren:num

Zwraca liczbę obiektów potomnych obiektu.

anWebgl.root.nazwaWystapieniaKlipuFilmowego.numChildren;

removeChild

removeChild(obiekt: DisplayObject): void

Usuwa obiekt argumentu, jeśli istnieje.

anWebgl.root.nazwaWystapieniaKlipuFilmowego.removeChild(obiektPotomny);

Contains

contains(obj:DisplayObject):boolean

Zwraca wartość true (prawda), jeśli obiekt podany w argumencie jest obiektem potomnym, albo false (fałsz), jeśli tak nie jest.

anWebgl.root.nazwaWystapieniaKlipuFilmowego.contains(obiektPotomny);

getChildAt

getChildAt(indeks:Number): DisplayObject

Zwraca obiekt potomny wskazany przez argument indeks.

anWebgl.root.nazwaWystapieniaKlipuFilmowego.getChildAt(2);

getChildByName

getChildByName(nazwa: String): DisplayObject

Zwraca obiekt potomny o podanej nazwie, jeśli istnieje.

anWebgl.root.nazwaWystapieniaKlipuFilmowego.getChildByName(nazwaObiektuPotomnego);

Klasa: Stage

Właściwości

Nazwa

Dostęp

Opis

Przykład

stageWidth

Tylko odczyt

Szerokość stołu montażowego.

anWebgl.stage.stageWidth

stageHeight

Tylko odczyt

Wysokość stołu montażowego

anWebgl.stage.stageHeight

Color

Zapis i odczyt

Kolor tła stołu montażowego.

anWebgl.stage.color

Klasa: VirtualCamera

Metody

Nazwa

Prototyp

Opis

Przykład

getCamera

getCamera()

Pobiera obiekt kamery. Umożliwia pobieranie i ustawianie właściwości kamery w czasie wykonywania.

let kamera = anWebgl.virtualCamera.getCamera();
let polozenie = cam.getPosition();
console.log("Położenie kamery x: " +pos.x + ", y: "+ pos.y+", z: "+pos.z);

 

getPosition

getPosition()

Zwraca obiekt z właściwościami x, y i z, które wskazują bieżące położenie kamery.

let kamera = anWebgl.virtualCamera.getCamera();
let polozenie = cam.getPosition();
console.log("Położenie kamery x: " +pos.x + ", y: "+ pos.y+", z: "+pos.z);

 

setPosition

setPosition()

Przesuwa kamerę do położenia bezwzględnego ustalonego przez parametry wejściowe. Wartość domyślna wynosi 0.

let polozenieKamery = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(polozenieKamery);

 

moveBy

moveBy()

Przesuwa kamerę względem bieżącego położenia.

let wektorPrzesuniecia = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(wektorPrzesuniecia);

 

resetPosition

resetPosition()

Zeruje położenie kamery — przesuwa ją do początku układu współrzędnych (0,0,0).


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

Obraca kamerę o kąt bezwzględny podany jako parametr wejściowy.

let __obrot__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__obrot__);

 

resetRotation

resetRotation()

Zeruje kąt kamery — ustawia wartość 0.

anWebgl.virtualCamera.getCamera().resetRotation();

 

Logo Adobe

Zaloguj się na swoje konto