Zjistěte, jak použít efekty posouvání pohybu a krytí pro prvky stránky v aplikaci Adobe Muse.

Poznámka:

Do aplikace Adobe Muse již nejsou přidávány žádné další funkce a 26. března 2020 bude její podpora ukončena. Podrobnější informace a možnosti asistence naleznete na stránce Ukončení životnosti aplikace Adobe Muse.

Používání efektů posouvání na prvky stránky

Panel Efekty posouvání obsahuje čtyři různé karty, které ovládají pohyb, krytí, widgety prezentace a obsah Adobe Edge Animate na základě toho, jakým způsobem se stránka posouvá. Pokud efekty posouvání použijete společně, některý z prvků přichytíte, nastavíte na 100% šířku a/nebo pokud efekty uspořádáte nad sebou nebo za sebou pomocí panelu Vrstvy, můžete vytvářet celou řadu působivých efektů.

Použití efektů posuvného pohybu pomocí panelu Efekty posouvání

Rozhraní efektů posouvání se podobá panelu efektů posouvání pro Výplň prohlížeče a Výplň pozadí. Postupujte podle těchto kroků a efekty posouvání použijte u prvku stránky pomocí karty Pohyb na panelu Efekty posouvání:

  1. V aplikaci Muse přepněte na zobrazení Návrh a vyberte možnost Stránka > Vlastnosti stránky.
  2. Nastavte hodnotu Minimální výška na nejméně 2 000 pixelů, aby stránka byla dostatečně dlouhá pro posouvání.
  3. Změny uložte kliknutím na tlačítko OK a dialogové okno Vlastnosti stránky se zavře.
  4. V pohledu Návrhu nakreslete obdélník nebo textový rámeček na stránce.
  5. Na kartě Výplň v nabídce Výplň přidejte dlaždicový nebo nedlaždicový obraz pozadí. Případně stačí vybrat plnou barvu nebo barevný přechod.
  6. Panel Efekty posouvání otevřete pomocí možnosti Okno > Efekty posouvání.
Otevřením panelu Efekty posouvání získáte přístup do nastavení efektů posouvání.
Otevřením panelu Efekty posouvání získáte přístup do nastavení efektů posouvání.

  1. Zapnutí efektů posouvání: Na panelu Efekty posouvání se zobrazí karta Pohyb (zcela vlevo). Když je prvek na stránce vybraný, zaškrtněte políčko Pohyb.

    TIP: Zaškrtnutím políčka Pohyb se do prvku přidá úchyt ve tvaru T, který přesahuje mimo horní okraj. Úchyt ve tvaru T naznačuje pozici řídicího prvku užitého u efektu posouvání použitého u daného prvku. Efekt posouvání se projeví, jakmile návštěvník dosáhne při posouvání pozice řídicího prvku.

    Úchyt ve tvaru T se ve výchozím nastavení zobrazí nad prvkem. Kliknutím a přetažením jej však můžete roztáhnout výše, přetáhnout dolů tak, aby byl zarovnán s horním okrajem prvku, který kontrolujete, nebo jej můžete přetáhnout dolů pod prvek.

  2. Umístění úchytu ve tvaru T pro nastavení polohy řídicího prvku: Polohu řídicího prvku nastavíte přetažením úchytu ve tvaru T. To vám umožní nastavit pohyb, ke kterému dojde předtím nebo poté, co posouvaná stránka dosáhne horní části úchytu ve tvaru T.

    Případně můžete zadat číselné hodnoty do pole Pozice řídicího prvku v prostřední části panelu Efekty posouvání, když je aktivní karta Pohyb. Ve výše uvedeném obrázku je pozice řídicího prvku nastavena na 200 pixelů. 

    Umístění úchytu ve tvaru T představuje pozici řídicího prvku. Pokud se stránka posouvá svisle, použije se nastavení v části Pohyb na začátku, aby pozice prvku odpovídala umístění, jak je zobrazeno v pohledu návrhu.

    Jakmile návštěvník stránku posune nebo klikne na odkaz na kotvu a přejde za pozici řídicího prvku, použije se nastavení v části Pohyb na konci.

    Část Pohyb na začátku obsahuje sadu svislých a vodorovných šipek a možnosti rychlosti.

  3. Nastavení svislého směru původního pohybu: Svislý směr (nahoru, nebo dolů) nastavte kliknutím na jedno ze svislých tlačítek. Do pole vedle šipek se svislým směrem zadejte hodnotu rychlosti, čímž nastavíte rychlost pohybu ve vztahu k rychlosti posouvání stránky. Pokud zadáte 0, prvek se svisle pohybovat nebude. Můžete také zadat procento pomocí desetinné čárky. Pokud například zadáte ,5, bude se prvek ve srovnání s rychlostí posouvání stránky pohybovat poloviční rychlostí.

  4. Nastavení vodorovného směru původního pohybu: Kliknutím na šipku vlevo nebo vpravo nastavte vodorovný směr posouvání prvku (vlevo, nebo vpravo). Nastavíte tak směr, kterým se prvek bude pohybovat, než dosáhne pozice řídicího prvku. V poli po pravé straně vodorovných šipek nastavte hodnotu rychlosti pro vodorovný směr. Pokud nechcete, aby se prvek pohyboval vodorovným směrem, nastavte pole s úvodní vodorovnou rychlostí na 0.

  5. Zopakujte kroky 7 a 8 a nastavte směr a rychlost pohybu pro část Pohyb na konci.

V příkladu zobrazeném níže je pozice řídicího prvku nastavena na 500 pixelů. Pokud se prohlížeč začne posunovat, prvek se pohybuje dolů do své pozice stejnou rychlostí, jakou se posunuje stránka. Prvek se na svou pozici přesune spolu s tím, jak se stránka posune do pozice řídicího prvku. Jakmile se stránka posune za pozici řídicího prvku, prvek se posune doprava 2násobkem rychlosti posunu stránky.

Použití Nastavení pohybu k nastavení efektu posouvání v aplikaci Adobe Muse
Použití Nastavení pohybu k nastavení efektu posouvání

  1. Stiskněte tlačítko Náhled nebo zvolte možnost Soubor > Náhled stránky v prohlížeči a efekty posouvání otestujte. Posunem stránky dolů a poté opět nahoru zjistěte, zda se prvek pohybuje.
  2. Po dokončení testování se vraťte do aplikace Muse nebo kliknutím na tlačítko Návrh pokračujte v úpravě stránky.

Použití efektu krytí při posouvání pomocí panelu Efekty posouvání

V této části zjistíte, jak lze uplatnit transformaci na viditelnost, která mění zobrazení prvku na základně posouvání stránky návštěvníkem. Jedná se o užitečný způsob zobrazování a skrývání obsahu, při kterém se během posouvání stránky do nové části položky zdánlivě postupně objevují a mizí. Efekty posouvání, které ovlivňují průhlednost prvku na stránce, můžete na kartě Krytí na panelu Efekty posouvání nastavit následujícím způsobem:

  1. Během úpravy stránky v zobrazení Návrh ověřte, zda je ve Vlastnostech stránky v poli Minimální výška zadána hodnota v pixelech, která je vyšší než průměrná výška většiny monitorů, např. 2 000 pixelů. Dostatečně dlouhou stránku k posouvání můžete také případně vytvořit přidáním obsahu.
  2. V pohledu Návrhu nakreslete obdélník nebo textový rámeček na stránce.
  3. Na kartě Výplň v nabídce Výplň (nebo na panelu Výplň) přidejte k vybranému prvku na stránce dlaždicový nebo nedlaždicový obraz pozadí nebo nastavte plnou barvu nebo barevný přechod. (Případně můžete na stránku přidat widget Prezentace nebo umístit soubor Adobe Edge Animate OAM.)
  4. Zatímco je prvek vybrán, klikněte na kartu Krytí (druhá karta zleva) na panelu Efekty posouvání a zaškrtněte políčko Krytí.
Zaškrtnutím políčka Krytí aktivujete pro vybraný prvek efekty krytí posouvání.
Zaškrtnutím políčka Krytí aktivujete pro vybraný prvek efekty krytí posouvání.

Aktivace možnosti Krytí způsobí, že se na stránce zobrazí jiný typ úchytu. Stejně jako v případě úchytu ve tvaru T použitého k nastavení pozice řídicího prvku na kartě Pohyb, klikněte na úchyt a přetáhněte jej tak, aby se zobrazil nad prvkem, nebo se zarovnal s horním okrajem prvku (nebo jej přetáhněte nad jakoukoliv část prvku), případně jej přetáhněte dolů pod prvek. Úchyt Krytí obsahuje tři různé části, které lze nezávisle přetahovat, a nastavit tak hodnoty Pozice řídicího prvku, 1. pozice zeslabení a 2. pozice zeslabení.

  1. Klikněte na střední čtvercovou část úchytu a přetažením nastavte pozici řídicího prvku. V příkladu níže je pozice řídicího prvku nastavena na 150 pixelů.
Pozici řídicího prvku nastavte přetažením prostředního čtvercového úchytu svisle.
Pozici řídicího prvku nastavte přetažením prostředního čtvercového úchytu svisle.

  1. Klikněte na horní kruhovou část úchytu a přetáhněte jej do požadovaného umístění. V příkladu níže je Pozice zeslabení 1 nastavena na 100 pixelů.
Nastavte Pozici zeslabení 1 úchytu Krytí
Klikněte na levou horní kruhovou část úchytu a přetáhněte jej, abyste nastavili první pozici, která ovlivní průhlednost prvku.

  1. Klikněte na spodní kruhovou část úchytu a přetáhněte jej do požadovaného umístění. V příkladu níže je Pozice zeslabení 2 nastavena na 200 pixelů.
Nastavte Pozici zeslabení 2 úchytu Krytí
Klikněte na pravou horní kruhovou část úchytu a přetáhněte jej, abyste nastavili druhou pozici, která ovlivní průhlednost prvku.

Poznámka:

V případě potřeby lze pozici řídicího prvku přetáhnout podél úchytů pozice zeslabení a nastavit ji tak na stejnou hodnotu. Místo přetažení úchytů lze také pro jednotlivá pole zadat číselné hodnoty na panelu Efekty posouvání.

V tomto příkladu je prvek zpočátku naprosto průhledný a postupně se stává čím dál víc neprůhledným, až nestane neprůhledným zcela (hodnota krytí odpovídající pozici řídicího prvku je aktuálně nastavena na 100 %), když stránka dosáhne pozice řídicího prvku. Jakmile se stránka posune za pozici řídicího prvku, začne se prvek opět postupně zprůhledňovat, až nakonec zcela vybledne, když se stránka posune za 200 pixelů.

Nastavte procento krytí pro efekty posouvání
Procento krytí (0 % znamená úplnou průhlednost) nastavte na kartě Krytí na panelu Efekty posouvání.

  1. Stiskněte tlačítko Náhled nebo zvolte možnost Soubor > Náhled stránky v prohlížeči a efekty posouvání otestujte. Posunutím stránky dolů a poté opět nahoru zjistíte, jak se mění krytí prvku v souvislosti s posouváním stránky.
  2. Po dokončení testování se vraťte do Aplikace Muse nebo kliknutím na tlačítko Návrh pokračujte v úpravě stránky.

Práce s kartou Prezentace na panelu Efekty posouvání

Další běžné použití posuvného pohybu spočívá v kombinaci posouvání se zobrazením obrázků v prezentaci. Na stránku můžete přidat widget Prezentace a poté pomocí karty Prezentace na panelu Efekty posouvání použít efekty posouvání, např. zobrazení nového obrázku v prezentaci automaticky vždy, když se stránka posune do určité pozice.

Nastavení v této části si můžete prohlédnout kliknutím na kartu Prezentace (třetí karta zleva).

Běžné použití této části rozhraní posuvného pohybu je přichycení widgetu Prezentace na stránku. Widget Prezentace bude obecně konfigurován (v nabídce Možnosti) tak, aby zobrazoval pouze kontejner větších prezentací a skrýval miniatury a tlačítka Další a Předchozí.

Pro tento efekt se zvlášť hodí prezentace na celou obrazovku, ačkoliv typ widgetu Prezentace, který vyberete, bude nakonec záviset na vzhledu webu.

Efekty posouvání použijete na widget Prezentace následovně:

  1. Aktualizujte pole Minimální výška v dialogovém okně Vlastnosti stránky tak, aby byla stránka dostatečně vysoká pro posouvání. Delší stránku můžete případně vytvořit přidáním obsahu.
  2. Z knihovny widgetů přetáhněte na stránku widget Prezentace. Možnosti prezentace nakonfiguruje v nabídce Možností. (Pokud na widgety Prezentace používáte efekty posouvání, jsou možnosti Další, Předchozí a Miniatury obvykle neaktivní.)
  3. K widgetu Prezentace přidejte obrázky kliknutím na složku vedle části Obrázky v nabídce Možností. V počítači vyhledejte a vyberte obrázky, které chcete přidat do galerie obrázků.
  4. Na ovládacím panelu v rozhraní Přichytit připněte prezentaci do aktuální pozice v okně prohlížeče. Zatímco je vybrána prezentace, klikněte na jednu ze šesti pozic pro přichycení.
Použití efektů posouvání na widgety Prezentace
Widget Prezentace přichyťte do konkrétního umístění tak, aby při posouvání stránky zůstal ve své pozici v okně prohlížeč.

Jakmile přidáte a nakonfigurujete přichycenou prezentaci, můžete přidat efekty posouvání.

Na kartě Prezentace na panelu Efekty posouvání zaškrtněte políčko Prezentace, zatímco je vybrán widget Prezentace.

Na panelu Efekty posouvání povolte možnost Prezentace.
Vyberte widget Prezentace a aktivujte možnost Prezentace na panelu Efekty posouvání.

Jakmile bude možnost Prezentace aktivní, úchyt pro pozici řídicího prvku se přidá do prezentace v pohledu Návrhu. Pokud chcete hodnoty pozice posuvníku pro řídicí prvek aktualizovat, můžete přetáhnout levou a pravou stranu úchytu nebo zadat čísla do pole Pozice posuvníku pro řídicí prvek. Můžete také kliknout na šipky dolů či nahoru na panelu Efekty posouvání, a zvýšit nebo snížit tak číselnou hodnotu.

Karta Prezentace na panelu Efekty posouvání obsahuje dvě tlačítka, která ovládají přehrávání obrázků v prezentaci různými způsoby. U prezentace můžete nastavit automatické spuštění nebo ji nastavit tak, aby se obrázky střídaly postupně na základě posouvání stránky.

Při prvním způsobu se nastaví požadovaná pozice řídicího prvku a poté se zaškrtne políčko Automaticky spustit.

Pokud se stránka posune za pozici řídicího prvku (nebo pokud návštěvník klikne na odkaz na značku kotvy a přejde dolů na stránku za pozici řídicího prvku), spustí se prezentace. Funkce automatického spuštění bude zobrazovat obrázky ve smyčce, dokud se stránka nepřesune zpět nad pozici řídicího prvku, nebo návštěvník stránku neopustí.

V zobrazeném příkladu se prezentace spustí, když se stránka posune na 100 pixelů (nebo kamkoliv pod nastavení pozice řídicího prvku). Pokud návštěvník posouvá stránku opět nahoru, přestane se prezentace přehrávat, jakmile se stránka posune nad pozici řídicího prvku (99 pixelů nebo méně).

Při druhém způsobu ovládání widgetu Prezentace se nastaví pozice řídicího prvku a poté se aktivujte přepínač Přepnout snímky vždy po. V tomto pracovním postupu nastavíte také v poli pod přepínačem počet pixelů, který bude určovat, jak často se obrázky v prezentaci budou střídat na základě toho, jak daleko dolů se stránka posune.

Widget Prezentace můžete například přichytit na delší stránku, aby tak zůstal ve své pozici, zatímco se ostatní obsah na stránce posouvá. Nastavením číselné hodnoty v možnosti Přepnout snímky vždy můžete určit, aby se prezentace přepínala na další obrázek v řadě pokaždé, když se stránka posune dolů o určitý počet pixelů.

Ve výše uvedeném obrázku je pozice řídicího prvku nastavena na 200. Jakmile se stránka posune o 200 pixelů od horní části, zobrazí se další obrázek v prezentaci pokaždé, když se stránka posune o dalších 30 pixelů.

Nastavení efektů posouvání pro Prezentaci v aplikaci Adobe Muse
Nastavte prezentaci tak, aby se další obrázek zobrazil pokaždé, když se stránka posune dolů o určenou vzdálenost (v pixelech).

Práce s kartou Adobe Edge Animate na panelu Efekty posouvání

Adobe Edge Animate je intuitivní designový nástroj, který umožňuje vytvářet webové animace na základě HTML 5. V rozhraní Edge Animate můžete vytvářet kompozice pomocí grafiky a symbolů opakovaného pohybu. Animace vytvořené pomocí nástroje Adobe Edge Animate lze exportovat jako soubory OAM a poté je umístit na stránky webu Muse. Animace vytvořené v nástroji Edge Animate se přehrávají v prohlížeči, aniž by bylo potřeba instalovat plugin.

Při vytváření animací v nástroji Adobe Edge Animate přetáhnete prvky na pracovní plochu a jejich pohyb zpracujete pomocí časové osy. Kromě přidání prvků přímo na hlavní časovou osu můžete také vytvořit vnořené prvky s dílčími prvky, které se přehrávají pomocí svých vlastních interních časových os. Chcete-li získat další informace o práci s nástrojem Adobe Edge Animate, přejděte na stránku produktu Adobe Edge Animate. Podívejte se také na výuková videa o nástroji Adobe Edge Animate na Adobe TV.

První krok při práci s funkcí posuvného pohybu Adobe Edge Animate spočívá v návrhu kompozice konkrétně pro tento účel. Efekty posouvání lze použít na soubory OAM, které ovlivní animace umístěné na hlavní časové ose. Strategickým navrhováním animací tak, aby se na hlavní časové ose vyskytovaly pouze položky, u kterých chcete, aby se při posunu stránku pohybovaly (a umístěním všech ostatních položek do animací v časových osách s vnořenými symboly), můžete vytvářet interaktivní animace. Když návštěvníci posunou stránku, řídí nastavení efektů posouvání přehrávání prvků pouze na hlavní časové ose.

Další informace o vytváření animací zejména pro přidání na web Adobe Muse naleznete v článku Přidání obsahu Adobe Edge Animate.

Na kartě Prezentace na panelu Efekty posouvání můžete pracovat následovně:

  1. Exportujte soubor OAM z nástroje Adobe Edge Animate a uložte jej do složky s webem.
  2. Spusťte aplikaci Muse a dvojitým kliknutím otevřete stránku v pohledu Návrhu. Ověřte, zda je stránka dostatečně dlouhá pro posouvání tím, že aktualizujete nastavení minimální výšky v dialogovém okně Vlastnosti stránky, nebo vytvořte delší stránku přidáním obsahu.
  3. Zvolte možnost Soubor > Umístit a vyhledejte soubor OAM ve složce webu.
  4. Otevřete panel Efekty posouvání. Nastavení v této části si můžete prohlédnout kliknutím na kartu Adobe Edge Animate (čtvrtá karta zleva).
  5. Zatímco je vybrán soubor OAM, zaškrtněte políčko Edge Animate.
Nastavení efektů posouvání pro animace v aplikaci Adobe Muse
Animaci Edge Animate nastavte tak, aby se začala přehrávat, když se stránka posune do konkrétního umístění, nebo ji nastavte tak, aby přepínala rámce pokaždé, když se stránka posune dolů o určitou vzdálenost (v pixelech).

Ve výše uvedeném obrázku je pozice řídicího prvku nastavena na 50 pixelů. Chcete-li ji upravit, můžete přetáhnout úchyt ve tvaru T nebo zadat odlišnou hodnotu do pole Pozice řídicího prvku.

Po nastavení pozice řídicího prvku můžete přehrávání animace ovládat dvěma způsoby:

  • Automatické přehrávání: Pokud je vybrána tato možnost, začne se animace na hlavní časové ose přehrávat hned, jakmile se prohlížeč posune do pozice řídicího prvku, bez ohledu na počet rámců na hlavní časové ose. Animace se bude přehrávat do té doby, než se stránka posune nad pozici řídicího prvku.
  • Přepnout rámce vždy po: Pokud je vybrána tato možnost, bude se animace na hlavní časové ose posouvat o jeden rámec vždy, když se stránka posune o určitý počet pixelů. Pokud například vytvoříte stránku, která je vysoká 3 000 pixelů a zadáte číslo 10, bude se animace na hlavní časové ose přehrávat rychlostí 1 rámec na každých 10 pixelů, o které se stránka posune. Pokud uživatel bude stránku posouvat rychleji, zvýší se i rychlost animace.

Poznámka:

Žádné animované objekty, které jsou vnořené nebo spojené s hlavní časovou linií v kompozici Adobe Edge Animate nebudou nastavením efektu posuvného pohybu ovlivněny. Můžete si tedy vybrat statické pozadí nebo kontinuálně se střídající vnořené prvky, které se neustále pohybují bez ohledu na to, zda návštěvník stránku posunuje, nebo nikoliv.

  1. Po výběru nastavení na kartě Edge Animate na panelu Efekt posouvání zvolte možnost Soubor > Zobrazit stránku v prohlížeči (nebo klikněte na tlačítko Náhled). Otestujte stránku posunutím nahoru a dolů, abyste zjistili, zda se obsah animace Edge Animate (přidaný na hlavní časovou osu) přehrává.
  2. Pokud potřebujete provést změny, vraťte se do aplikace Muse (nebo klikněte na tlačítko Návrh) a aktualizujte nastavení na panelu Efekty posouvání.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online