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

Hledat

Naučte se pomocí animací Edge Animate vytvářet bohaté interaktivní weby Adobe Muse s animacemi a efekty posouvání.

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říprava animací v aplikaci Animate

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:

  1. Spusťte nástroj Animate. Zobrazí se okno Začínáme.

  2. Klikněte na možnost Otevřít soubor a vyhledejte a vyberte stažený soubor ukázkového projektu s příponou .an. Nebo můžete také otevřít soubor nástroje Animate, který jste vytvořili.

    Aplikace Adobe Muse umožňuje vložení animací aplikace Edge Animate.
    V okně Začínáme klikněte na odkaz Open File (Otevřít soubor).

  3. Kliknutím na tlačítko Open (Otevřít) otevřete soubor .an a zavřete dialog Open (Otevřít). Projekt se zobrazí na pracovní ploše nástroje Animate.

    Na ploše se zobrazí projekt nástroje Animate.

    Animace vytvořené v aplikaci Animate jsou nastaveny buď na automatické přehrávání (autoplay), nebo vyžadují, abyste přehrávání spustili kliknutím na statický obrázek. Ukázka SkyScraper je nastavena na automatické přehrávání a nevyžaduje žádný vstup od uživatele. Pokud by ale bylo automatické přehrávání vypnuté, zobrazí se na stránce statický obraz, na který je nutné kliknout. Chcete-li zobrazit ukázku animace bez automatického přehrávání, navštivte stránku Animate Showcase.

    Poznámka:

    Chcete-li určit, jestli se animace přehraje okamžitě, vyberte plochu a poté na panelu Properties (Vlastnosti) zaškrtněte nebo zrušte zaškrtnutí pole Autoplay (Přehrát automaticky).

    Zaškrtnutím vlastnosti Autoplay (Přehrát automaticky) zapněte automatické přehrávání.

  4. Kliknutím na obraz pozadí na ploše jej vyberte. Zobrazí se modrý ohraničovací rámeček a na panelu Properties (Vlastnosti), nacházejícím se vlevo, se zobrazí vlastnosti tohoto obrazu (v této ukázce pojmenovaného Image2). Stisknutím klávesy Backspace (Windows) nebo Delete (Mac) odstraňte soubor obrazu pozadí.

    Vyberte obraz pozadí a odstraňte jej.

  5. Jelikož je plocha stále vybraná, klikněte na panelu Properties (Vlastnosti) na vzorek barvy plochy a nastavte volbu průhlednosti.

    Nastavte vlastnost pozadí plochy na průhlednou.

    Poznámka:

    Obsah na ploše má bílé pozadí. Průhledné pozadí tedy neuvidíte, dokud plochu neexportujete nebo nevytvoříte náhled animace.

  6. Pomocí příkazu nabídky File (Soubor) > Save (Uložit) uložte poslední změny.

  7. Výběrem příkazu File (Soubor) > Publish Settings (Nastavení publikování) otevřete dialog Publish Settings (Nastavení publikování).

  8. Vlevo ve sloupci Publish Target (Cíl publikování) zrušte zaškrtnutí políčka Web a zaškrtněte volbu Animate Deployment Package (Balíček nasazení animace).

  9. Kliknutím na tlačítko Save (Uložit) uložte provedené změny a zavřete dialog Publish Settings (Nastavení publikování).

  10. Pomocí příkazu nabídky File (Soubor) > Publish (Publikovat) projekt publikujte.

  11. Ukončete nástroj Animate. Pomocí programu Průzkumník Windows (nebo Mac OS Finder) vyhledejte složku projektu Animate na disku. Po publikování projektu najděte složku s názvem Animate Package. Soubor .OAM v této složce se používá k přidání obsahu Animate na stránku Muse.

  12. Zkopírujte soubor OAM a uložte jej do složky na ploše obsahující všechny ostatní obrazy a datové zdroje vašeho webu. Po publikování animace a uložení souboru do složky vašeho webu přejděte do následující části, ve které vložíte obsah z nástroje Animate na stránku.

Umístění animací vytvořených pomocí nástroje Animate do webové stránky Muse

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

  1. Spusťte aplikaci Adobe Muse a otevřete web, který chcete upravit.

  2. V zobrazení Plán dvojitě klikněte na název stránky, do které chcete přidat animaci.

  3. Zvolte Soubor > Umístit... a ve složce webu vyhledejte a vyberte soubor .OAM.

  4. Jedním kliknutím na stránku umístěte animaci.

    Poznámka:

    Na rozdíl od umisťování obrazů nemůžete upravit velikost umístěné animace z nástroje Animate přetažením. Pokud chcete umístit obsah o jiné velikosti, aktualizujte projekt Edge a znovu publikujte soubor .OAM.

  5. Pomocí nástroje pro výběr umístěte animaci na požadované místo na stránce. Pamatujte si, že i když pozadí animace vypadá v aplikaci Muse jako neprůhledné, bude toto pozadí při zobrazení náhledu nebo po publikování stránky průhledné.

  6. Pomocí příkazu nabídky Soubor > Náhled stránky v prohlížeči zkontrolujte, jestli animace vypadá podle očekávání. Pokud chcete provést nějaké změny, vraťte se do aplikace Muse a přemístěte prvky stránky. Když se podíváte na panel Datové zdroje, uvidíte, že soubor .OAM je nyní uveden jako datový zdroj. U animací vytvořených pomocí nástroje Edge Animate lze upravit vazby a aktualizovat je stejně jako všechny ostatní datové zdroje.

    Když se například vrátíte do nástroje Animate, můžete projekt otevřít a změnit. Když později znovu publikujete soubor .OAM a nahradíte verzi ve složce stránky, panel Assets (Datové zdroje) zobrazí ikonu zastaralého odkazu. Ta naznačuje, že od doby umístění datového zdroje do stránky byl původní soubor upraven.

    Chcete-li aktualizovat umístěný soubor, klikněte na panelu Datové zdroje pravým tlačítkem na název souboru .OAM a vyberte příkaz Změnit odkaz.

    Volba Změnit odkaz aktualizuje umístěný datový zdroj tak, aby odpovídal upravenému zdrojovému souboru. Jde o snadnější způsob rychlé aktualizace animace, na rozdíl od ručního odstraňování a nahrazování souborů.

  7. Na ovládacím panelu klikněte na položku Publikovat. Vyberte požadované volby a kliknutím na tlačítko OK publikujte aktualizace webu.

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.

Vložení multimediálního obsahu plnícího funkci animace do webu

  1. V zobrazení Plán dvojitým kliknutím na miniaturu stránky MasterFlash otevřete tuto stránku pro úpravy v zobrazení Návrh. Jelikož jste stránku A-vzorová předtím duplikovali, nachází se v ní stále ještě statický obraz s logem. Užitečné je použít statický obrázek odpovídající umístění obdélníku animace. Po vnoření mediálního prvku však odstraňte obrázek statického umístěného loga.

  2. Zvolte Soubor > Umístit. V zobrazeném dialogu Importovat přejděte do složky Kevins_Koffee_Kart a vyberte soubor pojmenovaný logo.swf.

  3. Umístěte soubor SWF do levého horního rohu, přesně na umístění stávajícího souboru s logem.

  4. Po zarovnání nového okna souboru SWF se starším statickým logem toto statické logo odstraňte tak, že jej vyberete a stisknete klávesu Delete.

  5. Zkontrolujte si vzhled celého webu, včetně nových změn v domovské stránce, pomocí příkazu Soubor > Náhled webu v prohlížeči a vyzkoušejte zobrazení loga na různých stránkách. Není nutné web publikovat, můžete pracovat lokálně na svém počítači a poté si zobrazit náhled webu v prohlížeči a procházet stránkami pomocí navigace webu. Všimněte si, že animace (soubor SWF) se na domovské stránce zobrazí jednou a poté se zastaví. Když kliknete na ostatní stránky, zobrazí se pouze statické logo.

    Poznámka:

    Pokud použijete příkaz nabídky Soubor > Náhled webu v prohlížeči, nové okno prohlížeče zobrazující domovskou stránku se načte rychleji, ale zobrazí pouze náhled aktivní (domovské) stránky. Tuto volbu tedy použijte pouze v případě, když chcete zkontrolovat jednu stránku webu, a nikoli celý web.

Přidávání efektů posouvání do animací

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.
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 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.
Poznámka:

Nastavení efektu posouvání neovlivňuje animované objekty, které jsou vnořené nebo odkazované z hlavní časové osy v kompozici Animate. 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í.

Příklad

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.
Kompasy se pohybují vzhůru, dokud se stránka neposune do pozice řídicího prvku, a během dalšího posouvání stránky dolů zůstanou na místě.

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.

  1. 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í.
Kompasy na obou stranách jsou nastaveny tak, aby přepínaly rámce každých 350 pixelů.

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ů.

  1. 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.
Centrální soubor OAM je nastaven na přepínání rámců každých 400 pixelů.

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.

Logo Adobe

Přihlaste se ke svému účtu.

Rychlé odkazy

Zobrazit všechny vaše plány Správa plánů

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