Komponent Wir

Komponent Wir umożliwia tworzenie kreacji w angażującym formacie displayowym z interaktywnym modelem 3D. Gdy reklama pojawia się w widocznej części strony, początkowa animacja 3D jest powiązana z przewijaniem strony. Użytkownicy mogą bezpośrednio wchodzić w interakcję z modelem i wyświetlać reklamę na pełnym ekranie, by uzyskać więcej informacji.

Ten komponent jest przeznaczony do użycia wyłącznie w kreacjach Wir w Display & Video 360. Nie on jest obsługiwany przez przeglądarkę Microsoft Edge.

Aby dodać komponent Wir do projektu:

1. Otwórz panel Komponenty, a następnie folder Grafika i efekty.
2. Przeciągnij komponent Wir na scenę.
3. Kliknij dwukrotnie komponent, by otworzyć okno edytowania.
4. W panelu Warstwy zaznacz warstwę Model 3D.
5. W polu URL w panelu Właściwości wyszukaj plik GLB zasobu 3D, którego chcesz użyć. Możesz też dostosować inne właściwości (patrz poniżej).
6. Dodaj warstwy, przeciągając pliki obrazów z systemu plików na scenę lub do panelu Warstwy (tylko Windows i Mac). Możesz też kliknąć przycisk Importuj zasoby  u dołu panelu Biblioteka. Jako warstwy w komponencie Wir można dodawać tylko obrazy.
7. Korzystając z kart Początek i Koniec, umieść każdą warstwę tam, gdzie ma się pojawiać na początku i końcu animacji. Możesz przeciągnąć warstwę w wybrane miejsce lub użyć pól położenia Początek i Koniec w panelu Właściwości.
8. W razie potrzeby określ dodatkowe opcje konfiguracji (patrz poniżej).
9. Gdy komponent będzie spełniał Twoje oczekiwania (w czasie pracy nad nim możesz wyświetlić jego podgląd), kliknij Zapisz. Pojawi się zwykły interfejs programu Google Web Designer.

Opcje konfiguracji

Aby skonfigurować komponent, kliknij go dwukrotnie na scenie lub zaznacz go i w panelu Właściwości kliknij Ustawienia… .

Dodawanie stanu pośredniego

Aby mieć większą kontrolę nad animacją komponentu Wir, możesz dodać stan pośredni i zmienić w nim właściwości warstwy.

1. Najedź kursorem myszy na prawą część karty Początek i kliknij przycisk . Wyświetli się karta Środek.
2. Domyślnie stan pośredni występuje w połowie między początkiem a końcem animacji. Możesz skorygować czas animacji.
3. Otwórz kartę Środek, by określić właściwości warstwy w tym punkcie animacji.

Aby usunąć stan pośredni, najedź kursorem myszy na prawą część karty Środek i kliknij X.

Zmienianie czasu animacji

Czas animacji komponentu Wir zależy od tego, jak daleko nasunął się on na stronę lub zsunął z niej. Domyślnie animacja rozpoczyna się, gdy górna krawędź komponentu pojawia się w widocznej części strony (0%), a kończy, gdy jego dolna krawędź zniknie za górną krawędzią widocznej części strony (100%). Gdy dodasz stan pośredni, możesz dostosować miejsce, w którym pojawia się on w animacji. Czas animacji można dostosować na dwa sposoby:

• W panelu Czas animacji przeciągnij pola lub suwak początku, środka i końca do odpowiedniej wartości procentowej.
• Wpisz wartości procentowe dla początku, środka i końca w odpowiednich polach w panelu Czas animacji.

Włączanie przezroczystości tła modelu 3D

1. Wybierz model 3D.
2. W panelu Właściwości zaznacz pole Przezroczyste tło modelu 3D.

Dodawanie podpowiedzi gestu

1. Wybierz model 3D.
2. W panelu Właściwości kliknij menu Ikona i wybierz obraz z Biblioteki lub kliknij Przeglądaj..., by wybrać obraz w systemie plików.
3. Opcjonalnie w polu Tekst wpisz tekst, który ma się wyświetlać z ikoną.

Podpowiedź gestu pojawia się nad modelem 3D, by zachęcać użytkowników do interakcji z nim.

Obracanie modelu 3D

1. Wybierz model 3D.
2. W panelu Właściwości ustaw Odchylenie na początku, w środku i na końcu animacji.

Odchylenie określa kąt obrotu modelu wokół osi pionowej.

Dodawanie warstw obrazu

Warstwę możesz dodać na dwa sposoby:

• Przeciągnij plik z systemu plików na scenę lub panel Warstwy (tylko Windows i Mac).
• Kliknij przycisk Importuj zasoby  u dołu panelu Biblioteka.

Nowe warstwy komponentu Wir muszą być obrazami. Dozwolona jest tylko jedna warstwa modelu 3D. Jest ona uwzględniana domyślnie.

Przesuwanie warstw

1. Wybierz warstwę, którą chcesz przesunąć.
2. Otwórz kartę Początek, Środek lub Koniec.
3. Określ położenie warstwy, korzystając z jednej z tych metod:
   • Przeciągnij warstwę na nowe miejsce.
   • W panelu Właściwości określ właściwości pozycji w punkcie Początek, Środek lub Koniec. Możesz edytować wyłącznie właściwości zawarte na bieżącej karcie. Aby skopiować inną pozycję, użyj przycisków Dopasuj do pozycji początkowej, Dopasuj do pozycji środkowej lub Dopasuj do pozycji końcowej .

Otwórz kartę Początek, Środek lub Koniec, aby dostosować inną pozycję warstwy.

Zamienianie obrazów

1. Kliknij prawym przyciskiem myszy obraz na scenie, który chcesz zamienić, i wybierz z menu Zamień obraz....
2. Wskaż obraz w Bibliotece lub kliknij przycisk Importuj pliki , by wybrać obraz na komputerze.

Nowy obraz zastępuje pierwotny. Jeśli pierwotny obraz miał zmieniony rozmiar, nowy obraz przyjmie jego wymiary. W przeciwnym razie nowy obraz będzie mieć zwykłe wymiary.

Zmienianie kolejności warstw

W panelu Warstwy przeciągnij warstwę na nowe miejsce na liście.

Kolejność warstw określa, które z nich wyświetlają się przed innymi. Warstwy znajdujące się wyżej na liście pojawiają się przed tymi, które występują na dalszych pozycjach.

Usuwanie warstw obrazu

1. Wybierz warstwę, którą chcesz usunąć.
2. Kliknij przycisk Usuń  u dołu panelu Warstwy.

Warstwa modelu 3D jest niezbędna do działania komponentu Wir i nie można jej usunąć.

Zmienianie rozmiaru warstw

1. Wybierz warstwę, której rozmiar chcesz zmienić.
2. Zmień rozmiar warstwy, korzystając z jednej z tych metod:
   • W panelu Właściwości określ szerokość i wysokość warstwy. Kliknij przycisk Zablokuj współczynnik proporcji , by określić, czy współczynnik proporcji między szerokością a wysokością ma być stały.
   • Przeciągnij jeden z uchwytów zmiany rozmiaru w rogach i na krawędziach warstwy na scenie.

Warstwa dopasowuje się do określonego rozmiaru przez cały czas trwania animacji.

Zmienianie przezroczystości warstwy

1. Wybierz warstwę, którą chcesz zmodyfikować.
2. W panelu Właściwości ustaw przezroczystość początkową i końcową jako wartość z zakresu od 0 do 1 (0 – przezroczysta, 1 – nieprzezroczysta).

Na końcu animacji warstwa modelu 3D jest zawsze nieprzezroczysta.

Zmienianie wygładzania animacji warstwy

1. Wybierz warstwę, którą chcesz zmodyfikować.
2. W panelu Właściwości w sekcji Właściwości zaawansowane wybierz typ wygładzania w menu Wygładzanie.

Niestandardowe wygładzanie jest niedostępne.

Ukrywanie i wyświetlanie warstw

W panelu Warstwy kliknij pole obok miniatury warstwy (pod przyciskiem Ukryj wszystkie warstwy ).

Klikając przycisk Ukryj wszystkie warstwy , możesz ukryć lub wyświetlić wszystkie warstwy.

Ukrycie warstwy ułatwia pracę nad inną warstwą i sprawia, że dana warstwa nie pokazuje się w podglądzie konfiguracji – nie ma wpływu na podgląd w przeglądarce ani opublikowaną kreację.

Wyświetlanie i ukrywanie stanu nieaktywnego

1. Wybierz warstwę obrazu.
2. W panelu Właściwości w sekcji Właściwości zaawansowane zaznacz pole wyboru Pokaż stan nieaktywny.

Stan nieaktywny to przezroczysta wersja warstwy w nieedytowanych obecnie pozycjach. Pozwala porównać wzrokowo pozycje początkową, środkową i końcową. Stan nieaktywny pełni tylko funkcję pomocniczą. Nie pokazuje się w podglądach ani w opublikowanym pliku.

Właściwości

Właściwości komponentu Wir

Właściwość	Opis
Nazwa	Nazwa komponentu Wir.
Współczynnik przewijania	Liczba od 0 do 1 reprezentująca odległość przewinięcia przez użytkownika. Właściwość ta dotyczy tylko wyświetlania na scenie programu Google Web Designer. Wartością domyślną jest 0,5.

Właściwości warstwy możesz przeglądać i edytować, gdy masz otwarte okno edytowania komponentu Wir i wybraną warstwę.

Właściwości warstwy Model 3D

Uwaga: komponenty Wir utworzone w programie Google Web Designer w wersjach starszych niż 11.0.0 mają kilka innych właściwości warstwy Model 3D.

Właściwość	Opis
Nazwa	Nazwa komponentu Model 3D.
URL	Źródłowy plik GLB zasobu 3D. Aby upewnić się, że plik GLB jest prawidłowy, skorzystaj z walidatora Khronos glTF. Starsze komponenty Wir URL lub identyfikator zasobu 3D. Obsługiwane są tylko zasoby hostowane w Poly z włączonym udostępnianiem linków. Rozmiar zasobu nie powinien przekraczać 2 MB, ponieważ ładowanie większych zasobów w aplikacji Google Web Designer może się zakończyć niepowodzeniem. Dodatkowe wymagania znajdziesz w Przewodniku po zasobach 3D. Adresy URL powinny zaczynać się od https://poly.google.com/view/. Identyfikator znajdziesz na końcu adresu URL strony widoku w Poly, np. https://poly.google.com/view/0CkCZrXqCWW. Przykłady: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Odśwież zasoby  – klikając ten przycisk w polu URL, możesz odświeżyć zasób 3D. Jeśli nie zaobserwujesz żadnych zmian, może to oznaczać, że zasób wciąż jest przetwarzany. Poczekaj chwilę, a potem spróbuj ponownie.
Przezroczyste tło modelu 3D	Dotyczy tylko starszych komponentów Wir. Zaznacz to pole, jeśli chcesz, żeby tło komponentu Model 3D było przezroczyste.
Podpowiedź gestu
Ikona	Obraz, który ma być wyświetlany nad modelem 3D, aby zachęcać użytkowników do interakcji z nim. Podpowiedź gestu nieznacznie się porusza do czasu osiągnięcia limitu animacji, aby zwrócić uwagę użytkownika, i znika, gdy użytkownik rozpocznie interakcję z modelem.
Tekst	Tekst do wyświetlenia pod ikoną podpowiedzi gestu. Ma zastosowanie tylko wtedy, gdy wybrano taką ikonę.
Ustaw limit animacji	Zaznacz to pole i podaj czas trwania w sekundach, aby ograniczyć czas wyświetlania animacji podpowiedzi gestu.
Położenie i rozmiar
Początek	Odległość warstwy od lewej i górnej krawędzi komponentu Wir na początku animacji. Tę właściwość można edytować po otwarciu karty Początek.
Środek	Odległość warstwy od lewej i górnej krawędzi komponentu Wir w stanie pośrednim animacji. Tę właściwość można edytować po otwarciu karty Środek.
Koniec	Odległość warstwy od lewej i górnej krawędzi komponentu Wir na końcu animacji. Tę właściwość można edytować po otwarciu karty Koniec.
Rozmiar	Szerokość i wysokość warstwy. Wpływa na wygląd warstwy przez cały czas trwania animacji.
Obrót
Odchylenie	Kąt obrotu modelu wokół osi pionowej (w stopniach) na początku, w środku i na końcu animacji.
Styl
Przezroczystość	Przezroczystość na początku, w środku i na końcu animacji wyrażona jako wartość z zakresu od 0 (przezroczysta) do 1 (nieprzezroczysta).
Właściwości zaawansowane
Wygładzanie	Typ wygładzania animacji warstwy. Niestandardowe wygładzanie jest niedostępne.

Właściwości warstwy obrazu

Właściwość	Opis
Źródło	Źródło pliku obrazu. Edycja jest niemożliwa.
URL zdarzenia wyjściowego	Adres URL zdarzenia wyjściowego, które następuje, gdy użytkownik kliknie obraz.
Położenie i rozmiar
Początek	Odległość warstwy od lewej i górnej krawędzi komponentu na początku animacji. Tę właściwość można edytować po otwarciu karty Początek.
Środek	Odległość warstwy od lewej i górnej krawędzi komponentu w stanie pośrednim animacji. Tę właściwość można edytować po otwarciu karty Środek.
Koniec	Odległość warstwy od lewej i górnej krawędzi komponentu na końcu animacji. Tę właściwość można edytować po otwarciu karty Koniec.
Rozmiar	Szerokość i wysokość warstwy. Wpływa na wygląd warstwy przez cały czas trwania animacji.
Styl
Przezroczystość	Przezroczystość na początku, w środku i na końcu animacji wyrażona jako wartość z zakresu od 0 (przezroczysta) do 1 (nieprzezroczysta).
Właściwości zaawansowane
Wygładzanie	Typ wygładzania animacji warstwy. Niestandardowe wygładzanie nie jest dostępne.
Pokaż stan nieaktywny	Po włączeniu pojawia się przezroczysta wersja warstwy, która znajduje się w pozycji nieaktywnej (czyli takiej, której w danej chwili nie edytujesz).

Zdarzenia i działania

Zdarzenia

Zdarzenia służą do wywoływania innych działań w reklamie. Komponent Wir wysyła to zdarzenie:

Zdarzenie	Opis
Załadowano wir	Wysyłane po wczytaniu wszystkich zasobów wchodzących w skład komponentu.

Aby wybrać to zdarzenie w oknie Zdarzenie, ustaw komponent Wir jako element docelowy.

Możesz też konfigurować zdarzenia i działania związane z modelem 3D, który wchodzi w skład komponentu Wir.

Podgląd

Podczas konfiguracji

Podczas pracy nad komponentem Wir możesz wyświetlać jego podgląd:

1. Aby przejść do trybu edycji komponentu, kliknij go dwukrotnie na scenie.
2. U góry kliknij kartę Podgląd.
3. Przewiń w górę i w dół, by zobaczyć, jak widoczne warstwy zachowują się w przykładowym układzie urządzenia mobilnego. Ukryte warstwy nie są wyświetlane.
4. Podczas wyświetlania podglądu komponentu nie można go edytować. Kliknij kartę Początek, Środek lub Koniec, zmień właściwości, a potem ponownie kliknij kartę Podgląd, by zobaczyć zmiany.

W przeglądarce

Wyświetl podgląd komponentu w przeglądarce. Aby to zrobić, wyjdź z trybu edycji komponentu, a potem kliknij przycisk Podgląd w aplikacji Google Web Designer. Strona podglądu symuluje sposób wyświetlania reklamy na stronie internetowej. Umieszcza ją w takiej ilości treści, która wystarcza, by przewijać stronę z komponentem.

Masz do wyboru takie opcje podglądu:

• Urządzenie – wybierz urządzenie mobilne lub opcję Niestandardowy.
• Obróć urządzenie  – wybierz orientację poziomą lub pionową.
• Rozmiar widocznego obszaru – jeśli w przypadku danego urządzenia wybierzesz opcję Niestandardowy, możesz ustawić nowy rozmiar, wprowadzając zmiany w tym polu lub przeciągając uchwyty rozmiaru.

Reklamy z komponentem Wir zawsze wyświetlają się w przeglądarce w trybie podglądu paralaksy.