Přidání animovaného obsahu v aplikaci Adobe Muse

Adobe Edge Animate je nástroj k navrhování interakcí na webu, který umožňuje zařadit do webů obsah animovaný pomocí webových standardů, jako je HTML5. Pomocí intuitivního rozhraní časové osy uvnitř aplikace Animate můžete vizuálně vytvářet působivé animace HTML5, které lze při zobrazení přehrávat ve všech moderních prohlížečích.

Před animací obsahu v aplikaci Muse lze provést několik změn, kterými připravíte soubor k animaci, aby jeho vnoření do aplikace Muse bylo bez komplikací. Postupujte takto:

Následujícím postupem přidáte animaci do stránky ve webu Muse:

Další informace o vytváření webového obsahu založeného na HTML5 a animací vytvářených pomocí nástroje Adobe Edge Animate najdete v části Zdroje pro nástroj Adobe Edge Animate. Pokud máte zájem o další tipy týkající se práce s aplikací Muse, podívejte se na stránku nápovědy a výukových lekcí aplikace Muse, kde najdete výukové lekce nebo na stránku Muse Events, kde najdete živé webové semináře a zaznamenaná videa s výukovými lekcemi.

Aplikace Adobe Muse umožňuje přidávat do webových stránek animace vytvořené v aplikaci Adobe Edge Animate. Funkce efektů posouvání v Adobe Edge Animate vyžaduje, abyste nejprve vytvořili animaci upravenou přesně pro tuto funkci.

Adobe Muse umožňuje přidat efekty posouvání do souborů OAM, a tak ovlivnit animace umístěné na hlavní časové ose. Animace lze navrhovat strategicky, aby na hlavní časové ose byly jen ty položky, které se mají při posunu stránky pohybovat; vytvořit můžete interaktivní animace. Z toho nepřímo vyplývá, že ostatní prvky je třeba umístit do vnořených časových os. 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 používání efektů posouvání v aplikaci Adobe Muse naleznete v tématu Efekty posouvání.

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

1. Exportujte soubor OAM z nástroje Animate a uložte jej do složky s webem. Informace o exportu souborů OAM z aplikace Animate najdete v tématu Umístění animací v aplikaci Adobe Muse.
2. Spusťte aplikaci Muse a dvojitým kliknutím otevřete stránku v pohledu Návrhu. Dostatečnou délku stránky pro posouvání zajistíte aktualizací nastavení minimální výšky v dialogovém okně Vlastnosti stránky.
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.

Ve výše uvedeném obrázku je pozice řídicího prvku nastavena na 700 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, animace na hlavní časové ose se přehraje 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.
  

6. 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á.
7. 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í.
   

Tento příklad ilustruje, jak lze pomocí efektů posouvání ovládat soubory OAM exportované z nástroje Adobe Edge Animate. V tomto příkladu je stránka vyplněna vertikálním přechodem, který začíná světlou tyrkysovou barvou a přechází do tmavě modré. Ukázkový soubor můžete stáhnout z webu ScrollEffects.com.

Tento animovaný efekt vytváří kombinace nastavení použitých na kartách Pohyb a Edge Animate.

Tři stejné soubory OAM jsou umístěny vodorovně vedle sebe, a tvoří tak řadu animovaných kompasů. Když si zobrazíte tento ukázkový web v prohlížeči, všechny tři kompasy se přesunou až do zorného pole a poté zůstanou na místě. Všechny tři kompasy se otáčejí jinou rychlostí> Tohoto otáčení jinou rychlostí však bylo dosaženo nastavením na panelu Efekty posouvání, a nikoliv vytvořením souboru Edge Animation.

Chcete-li vytvořit podobný efekt pomocí tří souborů OAM, postupujte následovně:

1. V pohledu Návrhu zvolte možnost Stránka > Vlastnosti stránky. V poli Minimální výška nastavte mnohem větší hodnotu. V ukázkovém webu je minimální výška stránky nastavena na 7 465 pixelů.
2. Vyberte všechny tři výskyty kompasu na stránce. Na kartě Pohyb na panelu Efekty posouvání mají všechny tři soubory OAM stejnou pozici řídicího prvku a nastavení pohybu, protože se zobrazují všechny hodnoty.

Pokud si ukázkový web zobrazíte v prohlížeči, zjistíte, že všechny tři prvky OAM vyskočí najednou a poté zůstanou v řadě, jakoby byly přichyceny.

3. Kliknutím mimo kompasy zrušte výběr všech tří a poté vyberte pouze jeden kompas nalevo. Stiskněte a podržte klávesu Shift a zároveň vyberte kompas napravo tak, aby byly vybrány oba kompasy. Otevřete kartu Edge Animate na panelu Efekty posouvání a zkontrolujte nastavení.

Dva postranní kompasy jsou nastaveny tak, aby se během animace na časové ose otáčely a přecházely na další rámec vždy, když se stránka posune o 350 pixelů.

4. Zrušte výběr dvou vnějších kompasů. Vyberte střední kompas a znovu se podívejte na kartu Edge Animate. Pole Přepnout rámce vždy po je nastaveno na 400 pixelů. Toto nastavení způsobuje, že se centrální animace ve srovnání se dvěma vnějšími kompasy pohybuje pomaleji.

Změnou rychlosti různých umístěných animací Edge Animate vzhledem k rychlosti posouvání stránky můžete vytvářet zajímavé animované efekty. Přidáním několika opakování stejného souboru OAM s různě nastavenými efekty posouvání můžete například vytvořit hejno ryb, nebe zaplněné pohybujícími se mraky nebo další efekty.