Dowiedz się, jak zastosować ruch i efekty przewijania dla elementów strony w programie Adobe Muse.

Uwaga:

Do programu Adobe Muse nie są już dodawane nowe funkcje, a jego obsługa zostanie wycofana 26 marca 2020 r. Aby uzyskać szczegółowe informacje i pomoc, zobacz stronę na temat wycofania usługi Adobe Muse.

Stosowanie efektów przewijania w elementach strony

Panel Efekty przewijania zapewnia cztery karty umożliwiające sterowanie ruchem, kryciem, widżetami pokazu slajdów oraz zawartością Adobe Edge Animate w oparciu o sposób przewijania strony. Gdy efekty przewijania są stosowane razem, a niektóre elementy przypięte, ustawione na 100% szerokości lub ułożone nad i za sobą za pomocą panelu Warstwy, użytkownik może utworzyć wiele interesujących efektów.

Stosowanie efektów przewijania ruchu za pomocą panelu Efekty przewijania

Interfejs panelu Efekty przewijania jest podobny do panelu efektów przewijania opcji Wypełnienie przeglądarki i Wypełnienie tła. Aby zastosować efekty przewijania wobec elementu strony, korzystając z karty Ruch w panelu Efekty przewijania, należy wykonać następujące kroki:

  1. W programie Muse przejdź do widoku Projektowanie i wybierz opcje Strona > Właściwości strony
  2. Aby efekt przewijania działał prawidłowo, ustaw wartość minimalnej wysokości strony na 2000 pikseli. 
  3. Kliknij OK, aby zapisać zmiany, a następnie zamknij okno Właściwości strony.
  4. W widoku Projektowanie narysuj na stronie prostokąt lub ramkę tekstową.
  5. Na karcie Wypełnij w menu Wypełnienie dodaj obraz tła ustawiony sąsiadująco lub niesąsiadująco. Możesz także wybrać wypełnienie jednolitym kolorem lub gradientem.
  6. Wybierz polecenie Okno > Efekty przewijania, aby otworzyć panel efektów przewijania.
Otwórz panel Efekty przewijania, aby uzyskać dostęp do ustawień efektów przewijania.
Otwórz panel Efekty przewijania, aby uzyskać dostęp do ustawień efektów przewijania.

  1. Włączanie efektów przewijania: w panelu Efekty przewijania zostanie wyświetlona karta Ruch (pierwsza od lewej). Podczas gdy element na stronie wybiera, umożliwia ruchu checkbox.

    Wskazówka: należy zwrócić uwagę, że zaznaczenie opcji Ruch powoduje dodanie uchwytu T do elementu, który przystaje do górnej krawędzi. Uchwyt T wskazuje położenie kluczowe, jakie zastosowano wobec efektu przewijania w elemencie. Efekt przewijania zacznie działać, kiedy osoba odwiedzająca przewinie stronę do pozycji kluczowej.

    Domyślnie uchwyt T jest wyświetlany nad elementem. Jednak można go kliknąć i przeciągnąć w celu jego wydłużenia, przeciągnąć w dół w celu zrównania go z górną krawędzią elementu lub przeciągnąć w dół i umieścić pod elementem.

  2. Pozycjonowanie uchwytu T w celu ustalenia położenia kluczowego: przeciągnij uchwyt T, aby ustalić położenie kluczowe. Umożliwi to ustawienie ruchu, jaki będzie miał miejsce przed i po zetknięciu się strony z górną częścią uchwytu T podczas przewijania.

    Możesz także wprowadzić wartość liczbową w polu Położenie kluczowe pośrodku panelu Efekty przewijania, gdy karta Ruch jest aktywna. Na ilustracji powyżej położenie kluczowe jest ustawione na 200 pikseli. 

    Położenie uchwytu T odpowiada położeniu kluczowemu elementu. Gdy strona jest przewijana w pionie, stosowane są ustawienia z sekcji Ruch początkowy, tak aby położenie elementu odpowiadało jego położeniu w widoku Projektowanie.

    Gdy osoba odwiedzająca przewinie stronę lub kliknie łącze zakotwiczenia i „przeskoczy” położenie kluczowe elementu, zostają zastosowane ustawienia z sekcji Ruch końcowy.

    Sekcja Ruch początkowy zawiera zestawy strzałek sterujące kierunkiem ruchu oraz opcje szybkości.

  3. Ustawianie pionowego kierunku ruchu początkowego: aby wybrać pionowy kierunek ruchu (w górę lub w dół), kliknij jeden z przycisków ruchu pionowego. W polu obok strzałki kierunkowej ruchu wprowadź wartość liczbową, aby ustawić szybkość ruchu względem szybkości przewijania strony. Jeśli wprowadzisz wartość 0, element nie będzie się poruszać w pionie. Możesz także wprowadzać wartości procentowe używając przecinka. Jeśli np. wprowadzisz wartość 0,5, element będzie się poruszać w pionie z szybkością równą połowie szybkości przewijania strony.

  4. Ustawianie kierunku w poziomie dla ruchu początkowego: za pomocą przycisków sterowania ruchem w poziomie (w lewo lub w prawo) możesz ustawić kierunek ruchu elementu przed osiągnięciem położenia kluczowego. W polu na prawo od strzałek poziomych możesz ustawić szybkość ruchu poziomego. Jeśli nie chcesz, aby element poruszał się w poziomie, wpisz w polu szybkości początkowej wartość 0.

  5. Powtórz kroki 7 i 8, aby ustawić kierunek i szybkość ruchu w sekcji Ruch końcowy.

W poniższym przykładzie położenie kluczowe jest ustawione na 500 pikseli. Po rozpoczęciu przewijania w przeglądarce element przesuwa się w dół do swojego położenia z taka samą szybkością (1) jak szybkość przewijania. Po przewinięciu strony do położenia kluczowego element trafia na swoje miejsce. Po przewinięciu strony za położenie kluczowe element przesuwa się w prawo z szybkością dwukrotnie większą od szybkości przewijania.

Zastosuj Ustawienia ruchu, aby ustawić efekt przewijania w programie Adobe Muse
Zastosuj Ustawienia ruchu, aby ustawić efekt przewijania

  1. Kliknij Podgląd lub wybierz polecenie Plik > Podgląd strony w przeglądarce, aby przetestować efekty przewijania. Przewiń stronę w dół, a następnie w górę, aby zobaczyć ruch elementów.
  2. Po zakończeniu testowania wróć do programu Muse lub kliknij przycisk Projektowanie, aby kontynuować edytowanie strony.

Stosowanie efektów przewijania krycia za pomocą panelu Efekty przewijania

W tej sekcji zajmiemy się stosowaniem przekształceń widoczności, które zmieniają wygląd elementu w zależności od sposobu przewijania strony przez osobę odwiedzającą. To przydatny sposób pokazywania i ukrywania zawartości poprzez przyciemnianie i rozjaśnianie elementów podczas przewijania strony do kolejnej sekcji. Wykonaj poniższe kroki, aby zastosować efekty przewijania wpływające na przezroczystość elementu strony za pomocą karty Krycie panelu Efekty przewijania.

  1. Podczas edytowania strony w widoku Projektowanie upewnij się, że w oknie Właściwości strony wartość w polu Min. wysokość przekracza wysokość większości monitorów wynoszącą 2000 pikseli. Aby odpowiednio wydłużyć stronę, możesz także dodać do niej więcej zawartości.
  2. W widoku Projektowanie narysuj na stronie prostokąt lub ramkę tekstową.
  3. Za pośrednictwem karty Wypełnij menu Wypełnienie (lub panelu o tej nazwie) dodaj do zaznaczonego elementu obraz tła ustawiony sąsiadująco lub niesąsiadująco lub ustaw tło jako kolor jednolity lub gradientowy. (Jeśli wolisz, możesz także dodać widżet Pokaz slajdów lub umieścić na stronie plik Adobe Edge Animate o rozszerzeniu OAM).
  4. Podczas gdy element jest zaznaczony, należy kliknąć kartę Krycie (drugą od lewej) w panelu Efekty przewijania i zaznaczyć opcję Krycie.
Zaznacz pole wyboru Krycie, aby włączyć efekty przewijania krycia dla zaznaczonego elementu.
Zaznacz pole wyboru Krycie, aby włączyć efekty przewijania krycia dla zaznaczonego elementu.

Włączenie opcji Krycie powoduje wyświetlenie przy elemencie uchwytu innego typu. Podobnie do uchwytu T, który odpowiadał za położenie kluczowe na karcie Ruch, także ten uchwyt możesz kliknąć i przeciągnąć, aby był wyświetlany nad elementem, równo z górną krawędzią elementu (lub nad dowolną jego częścią) lub pod nim. Uchwyt Krycie składa się z trzech części, które można przeciągać niezależnie, aby ustawić wartości Położenie kluczowe, Położenie tonowania 1 i Położenie tonowania 2.

  1. Kliknij i przeciągnij środkowy kwadracik, aby ustawić położenie kluczowe. W poniższym przykładzie położenie kluczowe jest ustawione na 150 pikseli.
Ustaw położenie kluczowe, przeciągając środkowy kwadracik w pionie.
Ustaw położenie kluczowe, przeciągając środkowy kwadracik w pionie.

  1. Kliknij i przeciągnij górną, okrągłą część uchwytu, aby umieścić go w żądanym położeniu. W poniższym przykładzie położenie tonowania 1 jest ustawione na 100 pikseli.
Ustaw Położenie tonowania 1 uchwytu Krycie
Kliknij i przeciągnij lewą górną, okrągłą część uchwytu, aby ustawić pierwsze położenie, które będzie mieć wpływ na przezroczystość elementu.

  1. Kliknij i przeciągnij dolną, okrągłą część uchwytu, aby umieścić go w żądanym położeniu. W poniższym przykładzie położenie tonowania 2 jest ustawione na 200 pikseli.
Ustaw Położenie tonowania 2 uchwytu Krycie
Kliknij i przeciągnij prawą dolną, okrągłą część uchwytu, aby ustawić drugie położenie, które będzie mieć wpływ na przezroczystość elementu.

Uwaga:

Jeśli chcesz, możesz przeciągnąć położenie kluczowe wzdłuż uchwytów położenia tonowania, aby ustawić tę samą wartość. Zamiast przeciągać uchwyty możesz wprowadzić wartości liczbowe w każdym z pól w panelu Efekty przewijania.

W tym przykładzie element zaczyna od pełnej przezroczystości i stopniowo osiąga pełne krycie (wartość Krycie odpowiadająca położeniu kluczowemu wynosi aktualnie 100%) po przewinięciu strony do położenia kluczowego. Po przewinięciu strony za położenie kluczowe element stopniowo staje się bardziej przezroczysty i wreszcie znika po przewinięciu strony powyżej 200 pikseli.

Ustaw wartość procentową krycia dla efektów przewijania
Ustaw wartość procentową krycia (gdzie 0% oznacza całkowitą przezroczystość) na karcie Krycie panelu Efekty przewijania.

  1. Kliknij Podgląd lub wybierz polecenie Plik > Podgląd strony w przeglądarce, aby przetestować efekty przewijania. Przewiń stronę w dół, a następnie w górę, aby zobaczyć zmianę krycia elementu w zależności od przewijania.
  2. Po zakończeniu testowania wróć do programu Muse lub kliknij przycisk Projektowanie, aby kontynuować edytowanie strony.

Korzystanie z karty Pokaz slajdów w panelu Efekty przewijania

Kolejnym powszechnym zastosowaniem ruchu przewijania jest połączenie interakcji przewijania z wyświetlaniem obrazów w pokazie slajdów. Na stronie można umieścić pokaz slajdów, a następnie za pośrednictwem karty Pokaz slajdów panelu Efekty przewijania zastosować takie efekty, jak automatyczne wyświetlanie nowego obrazu w pokazie slajdów po każdorazowym przewinięciu strony do określonego położenia.

Kliknij kartę Pokaz slajdów (trzecia od lewej), aby zaznajomić się z ustawieniami dostępnymi w tej sekcji.

Powszechnym zastosowaniem tej części interfejsu ruchu przewijania jest przypięcie widżetu Pokaz slajdów do strony. Ogólnie rzecz biorąc, widżet Pokaz slajdów zostanie skonfigurowany (z pośrednictwem menu Opcje) do wyświetlania wyłącznie większego kontenera i ukrycia miniatur oraz przycisków Następna/Poprzednia.

Najlepiej przystosowaną do tego efektu odmianą pokazu slajdów jest wersja pełnoekranowa, przy czym wybór typu widżetu zależy przede wszystkim od projektu witryny.

Wykonaj poniższe kroki, aby zastosować efekty przewijania wobec widżetu Pokaz slajdów:

  1. Zaktualizuj wartość w polu Min. wysokość w oknie dialogowym Właściwości strony, aby upewnić się, że strona jest odpowiednio długa do przewijania. Aby wydłużyć stronę, dodaj do niej więcej zawartości.
  2. Przeciągnij widżet Pokaz slajdów z Biblioteki widżetów na stronę. Za pomocą menu Opcje skonfiguruj ustawienia pokazu slajdów. (W przypadku stosowania efektów przewijania wobec widżetów Pokaz slajdów opcje Następna, Poprzednia oraz Miniatury są zazwyczaj wyłączone).
  3. Dodaj obrazy do widżetu, klikając ikonę folderu obok sekcji Dodaj obrazy w panelu Opcje. Przejdź do folderu, z którego chcesz dodać zdjęcia, aby uzupełnić nimi galerię.
  4. Za pomocą interfejsu Pinezka w panelu sterowania przypnij pokaz slajdów do bieżącego położenia w oknie przeglądarki. Podczas gdy pokaz slajdów jest zaznaczony, należy kliknąć jedną z sześciu pozycji pinezki.
Zastosuj efekty przewijania dla widżetów Pokazu slajdów
Przypnij widżet Pokaz slajdów do określonego położenia, aby pozostał na swoim miejscu w oknie przeglądarki podczas przewijania strony.

Po dodaniu i skonfigurowaniu przypiętego pokazu slajdów możesz zastosować efekty przewijania.

Na karcie Pokaz slajdów panelu Efekty przewijania po zaznaczeniu widżetu Pokaz slajdów zaznacz pole wyboru Pokaz slajdów.

W panelu Efekty przewijania włącz opcję Pokaz slajdów.
Zaznacz widżet Pokaz slajdów, a następnie włącz opcję Pokaz slajdów w panelu Efekty przewijania.

Zwróć uwagę, że natychmiast po zaznaczeniu opcji Pokaz slajdów do pokazu slajdów w widoku Projektowanie zostaje dodany uchwyt położenia kluczowego. Jeśli chcesz zaktualizować wartości położenia głównego przewijania, możesz przeciągnąć lewą i prawą stronę uchwytu lub wprowadzić wartości liczbowe w polu położenia kluczowego. Możesz także kliknąć strzałkę w górę i w dół w panelu Efekty przewijania, aby zwiększyć lub zmniejszyć wartość.

Karta Pokaz slajdów panelu Efekty przewijania to interfejs obejmujący dwa przyciski, z których każdy zapewnia inny sposób sterowania odtwarzaniem obrazów w pokazie slajdów. Możesz ustawić automatyczne odtwarzanie pokazu slajdów lub skonfigurować go do stopniowego wyświetlania kolejnych obrazów w miarę przewijania strony.

Pierwszy sposób polega na ustawieniu żądanego położenia kluczowego, a następnie zaznaczeniu opcji odtwarzania automatycznego.

Po przewinięciu strony poza położenie kluczowe (lub gdy osoba odwiedzająca kliknie łącze do znacznika zakotwiczenia i „przeskoczy” w dół za położenie kluczowe) rozpocznie się odtwarzanie pokazu slajdów. Funkcja odtwarzania automatycznego będzie kontynuować wyświetlanie obrazów, zapętlając zestaw aż do przewinięcia strony z powrotem do punktu znajdującego się przed położeniem kluczowym lub opuszczenia strony przez osobę odwiedzającą.

W przykładzie przedstawionym na powyższym rysunku pokaz slajdów rozpoczyna odtwarzanie, gdy strona zostanie przewinięta do 100 pikseli (lub dowolnego miejsca poniżej tego położenia kluczowego). Jeśli osoba odwiedzają przewinie stronę z powrotem do góry, odtwarzanie pokazu slajdów zostanie zatrzymane, gdy położenie wyniesie 99 lub mniej pikseli.

Drugi sposób sterowania widżetem Pokaz slajdów polega na ustawieniu położenia kluczowego, a następnie wybraniu przycisku opcji Zmień slajd co. W tym obiegu pracy ustawia się także liczbę pikseli w polu poniżej przycisku opcji, która oznacza częstotliwość wyświetlania kolejnych slajdów w oparciu o odległość przewinięcia strony w dół.

Można np. przypiąć widżet Pokaz slajdów do dłuższej strony, tak aby pozostał w jednym miejscu, podczas gdy pozostała zawartość strony przewija się normalnie. Ustawiając wartość numeryczną dla opcji Zmień slajd co można skonfigurować pokaz slajdów w taki sposób, aby kolejny obraz w zestawie był wyświetlany po każdorazowym przewinięciu strony o określoną liczbę pikseli.

Na rysunku powyżej położenie kluczowe jest ustawione na 200 pikseli. Po przewinięciu strony powyżej 200 pikseli od góry kolejny obraz w serii zostaje wyświetlony w pokazie po każdorazowym przewinięciu strony o 30 pikseli.

Ustaw efekty przewijania dla Pokazów slajdów w programie Adobe Muse
Ustaw pokaz slajdów tak, aby kolejny obraz był wyświetlany po przewinięciu strony o określoną odległość (w pikselach).

Korzystanie z karty Edge Animate w panelu Efekty przewijania

Adobe Edge Animate to intuicyjne narzędzie umożliwiające tworzenie animacji internetowych opartych na języku HTML5. Za pomocą interfejsu Edge Animate można tworzyć kompozycje, wykorzystując zapętlone grafiki i symbole. Animacje tworzone za pomocą narzędzia Adobe Edge Animate można eksportować jako pliki formatu OAM i umieszczać na stronach witryn programu Muse. Utworzone w Edge Animate animacje są odtwarzane w przeglądarce i nie wymagają żadnej wtyczki.

Podczas tworzenia animacji w narzędziu Adobe Edge Animate możesz przeciągać je na plan i sterować ich ruchem za pomocą osi czasu. Poza możliwością dodawania elementów bezpośrednio do osi czasu możesz także tworzyć elementy zagnieżdżone zawierające podelementy, które są odtwarzane według wewnętrznych osi czasu. Aby dowiedzieć się więcej na temat pracy z narzędziem Adobe Edge Animate, odwiedź stronę produktu Adobe Edge Animate. Zachęcamy także do obejrzenia samouczków wideo dotyczących obsługi Adobe Edge Animate, które są dostępne w serwisie Adobe TV.

Aby skorzystać z funkcji przewijania ruchu Adobe Edge Animate, należy w pierwszej kolejności zaprojektować odpowiednią kompozycję. Efekty przewijania można stosować wobec plików OAM w celu zmodyfikowania animacji umieszczonych na głównej osi czasu. Dzięki strategicznemu projektowi animacji, w którym na głównej osi czasu znajdują się tylko te elementy, które mają się poruszać wraz z przewijaniem strony, a cała reszta znajduje się w animacji umieszczonej na osi czasu z symbolami zagnieżdżonymi, można tworzyć animacje interaktywne. Podczas przewijania strony przez osoby odwiedzające ustawienia efektu przewijania sterują wyłącznie odtwarzaniem elementów animowanych znajdujących się na głównej osi czasu.

Aby uzyskać więcej informacji na temat tworzenia animacji pod kątem dodania ich do witryny w programie Adobe Muse, zobacz Dodawanie zawartości Adobe Edge Animate.

Wykonaj poniższe kroki, aby skorzystać z karty Edge Animate w panelu Efekty przewijania:

  1. Wyeksportuj plik OAM z narzędzia Adobe Edge Animate i zapisz go w folderze swojej witryny.
  2. Uruchom program Muse i kliknij dwukrotnie dowolną ze stron, aby otworzyć ją w widoku Projektowanie. Sprawdź, czy strona jest odpowiednio długa do przewijania, aktualizując wartość w polu Min. wysokość w oknie Właściwości strony lub dodając więcej zawartości.
  3. Wybierz polecenie Plik > Umieść, a następnie otwórz folder plików witryny i wybierz plik OAM.
  4. Otwórz panel Efekty przewijania. Kliknij kartę Edge Animate (czwarta od lewej), aby zaznajomić się z ustawieniami dostępnymi w tej sekcji.
  5. Gdy plik OAM jest zaznaczony, zaznacz opcję Edge Animate.
Ustawianie efektów przewijania dla animacji w programie Adobe Muse
Ustaw odtwarzanie animacji Edge Animate po przewinięciu strony do określonego położenia lub przełączanie klatek po każdorazowym przewinięciu strony o określoną odległość (w pikselach).

Na ilustracji powyżej położenie kluczowe jest ustawione na 50 pikseli. Przeciągnij uchwyt T lub wprowadź wartość liczbową w polu położenia kluczowego, aby je dostosować.

Po ustawieniu położenia kluczowego możesz sterować odtwarzaniem animacji, korzystając z dwóch opcji:

  • Autoodtwarzanie: gdy ta opcja jest zaznaczona, odtwarzanie animacji na głównej osi czasu rozpoczyna się natychmiast po przewinięciu strony do położenia kluczowego niezależnie od liczby klatek na głównej osi czasu. Odtwarzanie animacji trwa aż do przewinięcia strony powyżej położenia kluczowego.
  • Zmień ramkę co: gdy ta opcja jest zaznaczona, animacja na głównej osi czasu będzie odtwarzana klatka po klatce po każdorazowym przewinięciu strony o określoną liczbę pikseli. Jeśli np. utworzysz stronę o długości 3000 i wprowadzisz liczbę 10, animacja na głównej osi czasu będzie odtwarzać jedną klatkę co 10 pikseli, o które zostanie przewinięta strona. Szybkość odtwarzania animacji jest proporcjonalna do szybkości przewijania strony przez osobę odwiedzająca.

Uwaga:

Ustawienia efektów przewijania ruchu nie dotyczą jakichkolwiek obiektów animowanych, które są zagnieżdżone lub połączone z poziomu głównej osi czasu kompozycji Adobe Edge Animate. Dzięki temu możesz wybrać tło statyczne lub stale zapętlone i poruszające się elementy zagnieżdżone, które będą niezależne od przewijania strony przez osobę odwiedzającą.

  1. Po dostosowaniu ustawień na karcie Edge Animate panelu Efekty przewijania wybierz polecenie Plik > Podgląd strony w przeglądarce (lub kliknij przycisk Podgląd). Przetestuj stronę, przewijając ją w dół i w górę, aby odtworzyć zawartość animowaną Edge Animate (dodaną do głównej osi czasu).
  2. Jeśli zechcesz dokonać zmian, wróć do programu Muse (lub kliknij przycisk Projektowanie) i zaktualizuj ustawienia w panelu Efekty przewijania.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online