Dowiedz się, jak tworzyć bogate, interaktywne witryny internetowe Adobe Muse z animacjami i efektami nasuwania utworzonymi w programie Edge Animate.

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.

Adobe Edge Animate to narzędzie do tworzenia interaktywnych elementów, umożliwiające umieszczanie animowanej zawartości w witrynach za pomocą standardów internetowych, takich jak HTML5. W programie Animate możesz teraz korzystać z intuicyjnego interfejsu osi czasu, aby wizualnie tworzyć niezwykłe animacje w języku HTML 5, które mogą być odtwarzane w nowoczesnych przeglądarkach internetowych.

Przygotowywanie animacji w programie Animate

Przed przystąpieniem do animowania treści należy dokonać kilku zmian w programie Muse, aby przygotować plik Animate i zapewnić jego sprawne osadzenie. Wykonaj następujące czynności:

  1. Uruchom program Animate. Pojawi się okno Rozpocznij.

  2. Kliknij Otwórz plik, a następnie wyszukaj i wybierz plik pobranego projektu demonstracyjnego z rozszerzeniem .an. Jeśli wolisz, możesz otworzyć samodzielnie utworzony plik Animate.

    Program Adobe Muse umożliwia osadzanie animacji Edge Animate.
    Kliknij Otwórz plik w oknie Rozpocznij.

  3. Kliknij Otwórz, aby otworzyć plik .an i zamknąć okno dialogowe Otwórz. Projekt pojawi się w przestrzeni roboczej Animate.

    Projekt zostaje wyświetlony
    Projekt Animate jest wyświetlany na scenie.

    Animacje utworzone za pomocą programu Animate są ustawione na automatyczne odtwarzanie (autoodtwarzanie), albo po wczytaniu strony wyświetlają statyczny obraz, który należy kliknąć w celu rozpoczęcia odtwarzania animacji. Przykład SkyScraper jest ustawiony na automatyczne odtwarzanie i nie wymaga podejmowania działania przez użytkownika. Jednak gdy automatyczne odtwarzanie jest wyłączone, statyczny obraz jest wyświetlany na stronie do momentu kliknięcia animacji. Aby zobaczyć przykład animacji z wyłączonym automatycznym odtwarzaniem, odwiedź galerię Animate Showcase.

    Uwaga:

    Aby określić, czy animacja ma być odtwarzana natychmiast, wybierz scenę, a następnie zaznacz lub usuń zaznaczenie pola Automatyczne odtwarzanie w panelu Właściwości.

    Opcja Automatyczne odtwarzanie
    Włącz automatyczne odtwarzanie poprzez wybór właściwości Automatyczne odtwarzanie.

  4. Kliknij obraz tła, by wybrać go w scenie. Gdy jest zaznaczony, pojawi się niebieska obwiednia, a panel Właściwości po lewej stronie wyświetli właściwości obrazu (w tym przypadku o nazwie Obraz2). Naciśnij klawisz Backspace (Windows) lub Delete (Mac), aby usunąć plik obrazu tła.

    Niebieska obwiednia
    Wybierz obraz tła i usuń go.

  5. Podczas gdy scena jest wciąż zaznaczona, kliknij płytkę koloru dla niej w panelu Właściwości i ustaw opcję przezroczyste.

    Opcja Przezroczyste
    Ustaw właściwość tła sceny na przezroczyste.

    Uwaga:

    Zawartość sceny to białe tło; przezroczyste tło nie będzie widoczne na scenie, dopóki nie wyeksportujesz lub nie włączysz podglądu animacji.

  6. Aby zapisać ostatnie zmiany, wybierz polecenie Plik > Zapisz.

  7. Wybierz Plik >Ustawienia publikowania, aby otworzyć okno dialogoweUstawienia publikowania.

  8. W kolumnie Publikuj cel po lewej stronie odznacz pole wyboru Sieć i zaznacz opcję Pakiet Animate Deployment.

  9. Kliknij Zapisz, aby zachować zmiany i zamknąć okno dialogowe Ustawienia publikowania.

  10. Wybierz Plik > Publikuj, aby opublikować projekt.

  11. Zakończ program Animate. Skorzystaj z eksploratora Windows (lub Mac OS Finder), aby zlokalizować folder projektu na dysku twardym. Po opublikowaniu projektu zostanie wyświetlony folder o nazwie Animate Package. Znajdujący się w tym folderze plik .OAM służy do dodawania zawartości Animate do witryny Muse.

  12. Skopiuj plik .OAM i zapisz go na komputerze w folderze zawierającym wszystkie pozostałe obrazy i zasoby witryny. Po opublikowaniu animacji i zapisaniu pliku w folderze witryny, przejdź do kolejnej części, aby umieścić zawartość Animate na stronie.

Wstawianie animacji tworzonych w programie Animate na stronę Muse

Wykonaj następujące czynności, aby dodać animację do strony witryny Muse:

  1. Uruchom program Adobe Muse i otwórz witrynę, którą chcesz edytować.

  2. W widokuPlanowanie kliknij dwukrotnie nazwę strony, do której chcesz dodać animację.

  3. Wybierz Plik > Umieść... a następnie przejdź do pliku .OAM i wybierz go w folderze witryny.

  4. Kliknij raz stronę, aby umieścić animację.

    Uwaga:

    W odróżnieniu od umieszczania obrazów, nie możesz korzystać z przeciągania przy umieszczaniu animacji Animate, aby w ten sposób zmieniać jej wielkość. Jeśli chcesz umieścić zawartość w innym rozmiarze, zaktualizuj projekt Edge i ponownie opublikuj plik .OAM.

  5. Użyj narzędzia Wybór, aby umieścić animację na stronie w żądanym położeniu. Zauważ, że chociaż tło animacji wydaje się matowe w Muse, będzie ono przezroczyste podczas podglądu lub publikowania strony.

  6. Wybierz Plik > Podgląd strony w przeglądarce, aby sprawdzić, czy animacja jest wyświetlana w oczekiwany sposób. Jeśli chcesz wprowadzić jakieś zmiany, wróć do Muse i zmień położenie elementów strony. Przeglądając panel Zasoby zauważysz, że plik .OAM jest teraz podany jako zasób. Animacje utworzone przy użyciu Edge Animate można połączyć ponownie i aktualizować tak, jak inne zasoby witryny.

    Na przykład jeśli wrócisz do Animate, możesz otworzyć projekt i zmienić go. Następnie po ponownej publikacji pliku .OAM i zastąpieniu wersji w folderze witryny w panelu Zasoby zostanie wyświetlona ikona nieaktualnego łącza. Oznacza to, że oryginalny plik został poddany edycji po umieszczeniu zasobu na stronie.

    Aby zaktualizować już umieszczony plik, kliknij plik .OAM prawym przyciskiem myszy w panelu Zasoby i wybierz Połącz ponownie.

    Opcja Połącz ponownie aktualizuje umieszczony zasób tak, by odpowiadał edytowanemu plikowi źródłowemu. Jest to najłatwiejszy sposób na szybkie zaktualizowania animacji, w przeciwieństwie do ręcznego usuwania i zastępowania plików.

  7. Kliknij łącze Publikuj w panelu sterowania. Wybierz żądane opcje i kliknij OK, aby opublikować aktualizacje witryny.

Aby dowiedzieć się więcej o tworzeniu zawartości sieciowej HTML5 i animacji przy pomocy Adobe Edge Animate, odwiedź Zasoby Adobe Edge Animate. Więcej wskazówek dotyczących pracy z programem Muse można znaleźć w samouczkach na stronie Pomoc i samouczki programu Muse lub na stronie Muse Events, na której znajdują się prezentacje internetowe w wersji zarejestrowanej oraz „na żywo”.

Dodawanie animacji do witryny poprzez osadzanie zawartości multimedialnej

  1. W widoku Planowanie kliknij dwukrotnie miniaturę strony MasterFlash, aby otworzyć ją w widoku Projektowanie. Zwróć uwagę, że w wyniku powielenia strony A-wzorcowej wciąż wyświetlane jest logo statyczne. Pozycję obrazu statycznego warto wykorzystać do umieszczenia prostokąta animacji. Jednak po osadzeniu zawartości multimedialnej należy pamiętać o usunięciu statycznego obrazu logo.

  2. Wybierz polecenie Plik > Umieść. W oknie dialogowym Importuj przejdź do folderu Kevins_Koffee_Kart i zaznacz plik o nazwie logo.swf.

  3. Umieść plik SWF w lewym górnym rogu, w tym samym miejscu, co istniejący obraz logo.

  4. Po wyrównaniu nowego okna pliku SWF ze starym statystycznym logo usuń to logo, zaznaczając je i naciskając klawisz Delete.

  5. Aby sprawdzić wygląd witryny po zastosowaniu zmian na stronie domowej oraz przetestować wyświetlanie logo na poszczególnych stronach, wybierz polecenie Plik > Podgląd witryny w przeglądarce. Bez publikowania strony możesz pracować na komputerze, a następnie uzyskać podgląd witryny w przeglądarce i klikać poszczególne strony z poziomu modułu nawigacji. Należy zwrócić uwagę, że animacja (plik SWF) na stronie domowej jest wyświetlana raz, po czym zatrzymuje się. Jeśli klikniesz pozostałe strony, zauważysz, że jest wyświetlane tylko logo statyczne.

    Uwaga:

    Jeśli wybierzesz polecenie Plik > Podgląd strony w przeglądarce, nowe okno przeglądarki ze stroną domową zostanie wczytane szybciej, ale wyświetlona strona będzie jedyną aktywną. Z opcji tej korzystamy w celu uzyskania podglądu pojedynczej strony, a nie witryny.

Dodawanie efektów przewijania do animacji

Program Adobe Muse umożliwia umieszczanie animacji utworzonych za pomocą aplikacji Adobe Edge Animate na witrynach internetowych. Aby zacząć korzystanie z efektów przewijania Adobe Edge Animate, należy utworzyć animacje przeznaczone specjalnie do tego celu.

Program Adobe Muse umożliwia dodawanie efektów przewijania do plików OAM i zastosowanie ich w animacjach umieszczonych na głównej osi czasu. Animacje można projektować w sposób strategiczny, tak aby na głównej osi czasu znajdowały się wyłącznie te elementy, które mają się poruszać wraz z przewijaniem strony. Dzięki temu można tworzyć interaktywne animacje. Pozostałe elementy należy umieścić na zagnieżdżonych osiach czasu. 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.

Więcej informacji dotyczących efektów przewijania w programie Adobe Muse można znaleźć w sekcji Efekty przewijania.

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

  1. Wyeksportuj plik OAM z narzędzia Animate i zapisz go w folderze swojej witryny. Więcej informacji dotyczących eksportowania plików OAM z aplikacji Animate można znaleźć w sekcji Umieszczanie animacji w Adobe Muse.
  2. Uruchom program Muse i kliknij dwukrotnie dowolną ze stron, aby otworzyć ją w widoku Projektowanie. W oknie dialogowym Właściwości strony sprawdź, czy minimalna wysokość strony jest wystarczająca, aby zastosować efekt przewijania.
  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.
Panel Efekty przewijania
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 700 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 efektu przewijania nie dotyczą obiektów animowanych, które są zagnieżdżone lub połączone z poziomu głównej osi czasu kompozycji 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.

Przykład

Ten przykład ilustruje sterowanie plikami OAM wyeksportowanymi z aplikacji Adobe Edge Animate za pomocą efektów przewijania. W tym przypadku strona jest wypełniona pionowym gradientem od jasnego turkusu po kolor ciemnoniebieski. Możesz pobrać przykładowy plik ze strony ScrollEffects.com.

Efekt animacji uzyskano dzięki kombinacji ustawień na karcie Ruch panelu Edge Animate.

Trzy instancje tego samego pliku OAM zostały umieszczone obok siebie w poziomie, tworząc rząd animowanych kompasów. Po otwarciu strony w przeglądarce wszystkie trzy kompasy wsuwają się od dołu, a następnie pozostają na swoim miejscu. Każdy z kompasów zdaje się obracać z różną szybkością, jednak wynika to z ustawień w panelu Efekty przewijania, a nie struktury pliku Edge Animation.

Wykonaj poniższe kroki, aby osiągnąć podobny efekt za pomocą trzech umieszczonych plików OAM:

  1. W widoku Projektowanie wybierz polecenie Strona > Właściwości strony. W polu Min. wysokość ustaw bardzo dużą wartość. W przykładowej witrynie wartość ta wynosi 7465 pikseli.
  2. Zaznacz wszystkie trzy instancje kompasu na stronie. Na karcie Ruch panelu Efekty przewijania widać, że wszystkie trzy pliki OAM mają to samo położenie kluczowe i ustawienia ruchu, ponieważ wszystkie wartości są widoczne.
Te same położenia kluczowe i ustawienia ruchu
Kompasy przesuwają się w górę aż do przewinięcia strony do ich pozycji kluczowej, a następnie pozostają na miejscu, podczas gdy strona jest dalej przewijana w dół.

Jeśli otworzysz stronę w przeglądarce, zauważysz, że wszystkie trzy elementy OAM „wyskakują” jednocześnie i pozostają w jednym rzędzie jak gdyby zostały przypięte.

  1. Kliknij poza kompasami, aby usunąć zaznaczenie, a następnie zaznacz tylko kompas po lewej. Naciśnij i przytrzymaj klawisz Shift i zaznacz kompas po prawej, tak aby zaznaczyć lewy i prawy kompas. Otwórz kartę Edge Animate panelu Efekty przewijania, aby sprawdzić ustawienia.
Zmień ramkę co 350 pikseli
Zgodnie z ustawieniami kompasy po obu stronach zmieniają ramkę co 350 pikseli.

Oba boczne kompasy zostały skonfigurowane do zapętlenia animacji na osi czasu i wyświetlania kolejnych ramek po każdorazowym przewinięciu strony w dół o 350 pikseli.

  1. Usuń zaznaczenie obu bocznych kompasów. Zaznacz środkowy kompas i spójrz ponownie na kartę Edge Animate – w tym przypadku wartość w polu Zmień ramkę co wynosi 400 pikseli. Ustawienie to powoduje, że środkowa animacja jest odtwarzana wolniej od dwóch bocznych.
Zmień ramkę co 400 pikseli
Środkowy plik OAM jest ustawiony na zmianę ramek co 400 pikseli.

Interesujące efekty animowane można uzyskać, ustawiając różną szybkość dla poszczególnych umieszczonych plików Edge Animate względem szybkości przewijania strony. Można np. utworzyć ławicę ryb, niebo z sunącymi obłokami lub inne efekty, dodając wiele instancji tego samego pliku OAM z różnymi ustawieniami efektu 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