Komponent Paralaksa służy do tworzenia iluzji głębi za pomocą warstw obrazów. Gdy użytkownik przewija stronę w górę lub w dół na urządzeniu mobilnym, obrazy pierwszego planu i tła przesuwają się z różną szybkością.
Ten komponent jest przeznaczony do użycia wyłącznie w przypadku kreacji z paralaksą Display & Video 360.
Dodawanie komponentu Paralaksa do projektu
- Otwórz panel Komponenty, a następnie folder Interakcja.
- Przeciągnij komponent Paralaksa
na scenę.
- Kliknij dwukrotnie komponent, by przełączyć go do trybu edycji.
- Dodaj warstwy, przeciągając pliki obrazów z systemu plików na scenę lub panel Warstwy (tylko Windows i Mac). Możesz też kliknąć przycisk Dodaj obrazy
u dołu panelu Warstwy. Jako warstwy można dodać tylko obrazy.
- 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. Aby dodać stan pośredni, najedź kursorem myszy na prawą część karty Początek i kliknij przycisk
.
- W razie potrzeby określ dodatkowe opcje konfiguracji.
- 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.
u dołu panelu Warstwy. Jako warstwy można dodać tylko obrazy.
.Omówienie komponentu Paralaksa
Opcje konfiguracji
Aby skonfigurować komponent, kliknij go dwukrotnie na scenie lub zaznacz go i w panelu Właściwości kliknij Ustawienia… .
Dodawanie warstw
Warstwę możesz dodać na dwa sposoby:
- Przeciągnij plik z systemu plików (tylko Windows i Mac) lub z Biblioteki na scenę lub panel Warstwy.
- Kliknij przycisk Dodaj obrazy
Warstwami w komponencie Paralaksa mogą być tylko obrazy.
Przesuwanie warstw
- Wybierz warstwę, którą chcesz przesunąć.
- Otwórz kartę Początek, Środek lub Koniec. Możesz też dodać stan pośredni, jeśli nie zostało to jeszcze zrobione.
- Określ położenie warstwy, korzystając z jednej z tych metod:
- Przeciągnij warstwę na nowe miejsce.
- Użyj klawiszy strzałek, by przesuwać warstwę o jeden piksel. Aby przesunąć warstwę w danym kierunku o 10 pikseli, podczas naciskania strzałki przytrzymaj wciśnięty klawisz Shift.
- Na karcie Właściwości warstwy określ właściwości pozycji 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
.
Przełącz się na inną kartę, by dostosować pozycję warstwy w innym punkcie animacji.
Zamienianie obrazów
- Kliknij prawym przyciskiem myszy obraz na scenie, który chcesz zamienić, i wybierz z menu Zamień obraz....
- Wskaż obraz w Bibliotece lub kliknij przycisk Importuj pliki
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 wymienione wcześniej pojawiają się przed tymi, które znajdują się na dalszych pozycjach listy.
Usuwanie warstw
- Wybierz warstwę, którą chcesz usunąć.
- Kliknij przycisk Usuń
u dołu panelu Warstwy lub naciśnij klawisz Delete.
Zmienianie rozmiaru warstw
- Wybierz warstwę, której rozmiar chcesz zmienić.
- W panelu Właściwości warstwy ustaw szerokość i wysokość warstwy w pikselach.
- Kliknij przycisk Zablokuj współczynnik proporcji
, by określić, czy współczynnik proporcji między szerokością a wysokością ma być stały.
- Kliknij przycisk Zablokuj współczynnik proporcji
Warstwa dopasowuje się do określonego rozmiaru przez cały czas trwania animacji.
Zmienianie przezroczystości warstwy
- Wybierz warstwę, którą chcesz zmodyfikować.
- W panelu Właściwości warstwy ustaw przezroczystość początkową i końcową jako wartość z zakresu od 0 do 1 (0 – przezroczysta, 1 – nieprzezroczysta).
Zmienianie wygładzania animacji warstwy
- Wybierz warstwę, którą chcesz zmodyfikować.
- W panelu Właściwości warstwy wybierz typ wygładzania z menu Wygładzanie.
Niestandardowe wygładzanie nie jest dostępne.
Dodawanie stanu pośredniego
Aby mieć większą kontrolę nad animacją komponentu Paralaksa, możesz dodać stan pośredni i zmienić w nim właściwości warstwy.
- Najedź kursorem myszy na prawą część karty Początek i kliknij przycisk
- Domyślnie stan pośredni występuje w połowie między początkiem a końcem animacji. Możesz skorygować czas animacji.
- 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 Paralaksa zależy od tego, jak daleko nasunął się on na stronę lub z niej zsunął. 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.
Ukrywanie i pokazywanie 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 powoduje, że dana warstwa nie pokazuje się w podglądzie konfiguracji – nie ma to jednak wpływu na podgląd w przeglądarce ani na opublikowaną kreację.
Pokazywanie i ukrywanie duchów
- Wybierz warstwę.
- W sekcji Właściwości zaawansowane w panelu Właściwości warstwy kliknij przełącznik Pokaż stan nieaktywny.
Stan nieaktywny to przezroczysta wersja warstwy w nieedytowanych obecnie pozycjach. Pozwala porównać widoczne różnice między pozycją początkową a 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
Właściwości komponentu pojawiają się w panelu Właściwości. Aby je zobaczyć, musisz wyjść z trybu edycji.
| Właściwość | Opis |
|---|---|
| Nazwa | Nazwa komponentu Paralaksa. |
| 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ć właściwości warstwy w trybie edycji komponentu.
| Właściwość | Opis |
|---|---|
| Nazwa | Nazwa warstwy. Nie można jej edytować. |
|
Początek |
Odległość warstwy od lewej strony i góry komponentu w chwili, gdy staje się on widoczny (np. górna krawędź komponentu pojawia się w dolnej krawędzi widocznego obszaru). Wyrażona w pikselach lub procentowo. Właściwość można edytować po wybraniu karty Początek. |
| Środek | Odległość warstwy od lewej i górnej krawędzi komponentu w stanie pośrednim animacji. Wyrażona w pikselach lub procentowo. Tę właściwość można edytować po otwarciu karty Środek. |
| Koniec | Odległość warstwy od lewej strony i góry komponentu w chwili, gdy staje się on niewidoczny (np. dolna krawędź komponentu znajduje się w górnej krawędzi widocznego obszaru). Wyrażona w pikselach lub procentowo. Właściwość można edytować po wybraniu karty Koniec. |
| Rozmiar | Szerokość i wysokość warstwy. Wpływa na wygląd warstwy przez cały czas trwania animacji. |
| Przezroczystość | Przezroczystość początkowa i końcowa wyrażona jako wartość z zakresu od 0 (przezroczysta) do 1 (nieprzejrzysta). |
| Wygładzanie | Typ wygładzania animacji warstwy. Niestandardowe wygładzanie nie jest dostępne. |
| Pokaż stan nieaktywny | Gdy ta opcja jest włączona, w nieaktywnych (czyli obecnie nieedytowanych) pozycjach wyświetla się przezroczysta wersja warstwy. |
Zdarzenia
Zdarzenia służą do wywoływania innych działań w reklamie. Komponent Paralaksa wysyła to zdarzenie:
| Zdarzenie | Opis |
|---|---|
| Załadowano paralaksę | Wysyłane, gdy komponent jest gotowy do wyświetlenia. |
Podgląd
Podczas konfiguracji
Możesz wyświetlić podgląd komponentu Paralaksa, gdy nad nim pracujesz:
- Aby przejść do trybu edycji komponentu, kliknij go dwukrotnie na scenie.
- U góry kliknij kartę Podgląd.
- 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.
- 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 wybierzesz opcję Niestandardowy dla urządzenia, możesz ustawić nowy rozmiar, edytując to pole lub przeciągając uchwyty rozmiaru.
– wybierz orientację poziomą lub pionową.Reklamy z komponentem Paralaksa wyświetlają się w przeglądarce zawsze w trybie podglądu Paralaksy.