Lägga till animerat innehåll i Adobe Muse

Sök

Läs om hur du skapar interaktiva Muse-webbplatser med animeringar och rullningseffekter som du har skapat med hjälp av Adobe Edge Animate.

Adobe Edge Animate är ett webbverktyg för interaktion som gör att du kan lägga till animeringar på webbplatser med hjälp av webbstandarder som exempelvis HTML5. Du kan använda det intuitiva tidslinjegränssnittet i Animate för att visuellt skapa tilltalande HTML5-animeringar som spelas upp när de visas i alla moderna webbläsare.

Förbereda animeringar i Animate

Innan du animerar innehåll i Muse finns det några ändringar du kan göra för att förbereda Animate-filen och göra inbäddningen i Muse smidig. Gör så här:

  1. Starta Animate. Fönstret Kom igång visas.

  2. Klicka på Öppna fil och bläddra sedan efter den exempelprojektfil du hämtade med filtillägget .an. Alternativt så öppnar du en Animate-fil som du har skapat.

    Du kan bädda in Edge Animate-animeringar i Adobe Muse.
    Klicka på länken Öppna fil i fönstret Kom igång.

  3. Klicka på Öppna för att öppna .an-filen och stänga dialogrutan Öppna. Projektet visas på Animate-arbetsytan.

    Animate-projektet visas på scenen.

    Animeringar som skapas med Animate ställs antingen in till att spelas automatiskt (autostart) eller kräver att man klickar på en statisk bild för att spela upp animeringen vid laddning. Exemplet SkyScraper är inställt på automatisk uppspelning, så ingen interaktion krävs. När den automatiska uppspelningen stängs av visas däremot en statisk bild på sidan tills du klickar på animationen. Om du vill se ett exempel på en animering som inte autostartar så går du till Animate Showcase (Animate-demonstration).

    Obs!

    Om du vill ange om en animering ska spelas upp omedelbart markerar du scenen och markerar eller avmarkerar kryssrutan Autostart i panelen Egenskaper.

    Aktivera automatisk uppspelning genom att välja egenskapen Autostart.

  4. Klicka på bakgrundsbilden så att den markeras på scenen. När den är markerad visas en blå begränsningsram, och bildens egenskaper visas i panelen Egenskaper till vänster (med namnet Image2 i det här exemplet). Tryck på Backsteg (Windows) eller Delete (OS X) för att ta bort bakgrundsbildfilen.

    Markera bakgrundsbilden och ta bort den.

  5. Behåll markeringen på scenen, klicka på färgväljaren för scenen i panelen Egenskaper och ange alternativet Genomskinlig.

    Ställ in genomskinlig bakgrund för scenen.

    Obs!

    Innehållet på scenen visas med vit bakgrund, den genomskinliga bakgrunden visas inte förrän du exporterar eller förhandsvisar animeringen.

  6. Välj Arkiv > Spara så att du sparar ändringarna.

  7. Välj Arkiv > Publiceringsinställningar så att dialogrutan Publiceringsinställningar öppnas.

  8. I kolumnen Publicera mål till vänster avmarkerar du kryssrutan Webb och väljer alternativet Animate Deployment Package (Animate-publiceringspaket).

  9. Klicka på Spara så att du sparar ändringarna och stänger dialogrutan Publiceringsinställningar.

  10. Välj Arkiv > Publicera för att publicera projektet.

  11. Avsluta Animate. Använd Utforskaren i Windows (eller Finder i Mac OS) och leta rätt på Animate-projektfilen på hårddisken. När du har publicerat projektet letar du upp mappen som heter Animate Package (Animate-paket). .OAM-filen i den här mappen används till att lägga till innehåll på din Muse-webbplats.

  12. Kopiera .OAM-filen och spara den i mappen på skrivbordet som innehåller alla andra bilder och resurser för din webbplats. När du har publicerat animeringen och sparat filen i din webbplatsmapp går du vidare till nästa avsnitt där du får montera Animate-innehållet på en sida.

Montera animeringar som skapats med Animate på en Muse-webbsida

Gör så här när du ska lägga till animeringen på en sida på Muse-webbplatsen:

  1. Starta Adobe Muse och öppna den webbplats du vill redigera.

  2. I planvyn dubbelklickar du på namnet på sidan där du vill lägga till animeringen.

  3. Välj Arkiv > Montera och navigera sedan till .OAM-filen i din webbplatsmapp.

  4. Klicka en gång på sidan för att placera ut animeringen.

    Obs!

    Till skillnad från när du placerar ut bilder kan du inte klicka och dra för att ändra storlek när du placerar ut Animate-animeringar. Om du vill placera ut innehållet i en annan storlek måste du uppdatera Edge-projektet och publicera .OAM-filen igen.

  5. Använd markeringsverktyget och positionera animeringen vid önskad plats på sidan. Även om animeringsbakgrunden ser ogenomskinlig ut i Muse kommer den att vara genomskinlig när du förhandsvisar eller publicerar sidan.

  6. Välj Arkiv > Förhandsvisa sidan i webbläsare och kontrollera att sidan visas på det sätt du förväntar dig. Om du behöver göra några ändringar återgår du till Muse och ändrar om sidelementen. Om du tittar i panelen Resurser märker du att .OAM-filen nu visas som en resurs. Animeringar som skapats med Edge Animate kan länkas om och uppdateras på samma sätt som andra resurser på sidan.

    Om du t.ex. går tillbaka till Animate kan du öppna projektet och ändra det. När du sedan publicerar OAM-filen igen och ersätter versionen i din webbplatsmapp visar panelen Resurser den gamla länkikonen. Det anger att den ursprungliga filen har redigerats sedan resursen placerades på en sida.

    Om du vill uppdatera den fil du har monterat högerklickar du på namnet på .OAM-filen i panelen Resurser och väljer Länka om.

    Med alternativet Länka om uppdateras den utplacerade resursen så att den matchar den redigerade källfilen. Det här är ett lättare sätt att uppdatera animeringen till skillnad från att manuellt ta bort och ersätta filer.

  7. Klicka på länken Publicera i kontrollpanelen. Välj önskade alternativ och klicka på OK för att publicera uppdateringen av webbplatsen.

Gå till Adobe Edge Animate-resurser om du vill lära dig mer om HTML5-webbinnehåll och animeringar med Adobe Edge Animate. Mer tips om att arbeta med Muse finns på Hjälp för Adobe Muse, och livesända webbseminarier och inspelade videokurser finns på Muse Events-sidan.

Bädda in omfattande medieinnehåll för att lägga till animering på webbplatsen

  1. Dubbelklicka på MasterFlash-miniatyren i vyn Planera när du vill öppna den för redigering i vyn Design. Observera att den statiska logotypen fortfarande är kvar eftersom du tidigare kopierade A-mall-sidan. Du kan använda den statiska bilden för att matcha placering för animationsrektangeln. Men se till att du raderar den statiska bilden med logotypen efter att du har bäddat in det avancerade medieelementet.

  2. Välj Arkiv > Montera. I dialogrutan Importera navigerar du till mappen Kevins_Koffee_Kart och väljer filen med namnet logo.swf.

  3. Placera SWF-filen i det övre vänstra hörnet, så att placeringen stämmer överens med placeringen av den befintliga logotypbildfilen.

  4. När du har passat in det nya SWF-fönstret som du placerade på den gamla, statiska logotypen raderar du den statiska logotypen genom att markera den och trycka på tangenten Delete.

  5. Om du vill granska hur hela webbplatsen ser ut med de nya ändringarna på startsidan ska du välja Arkiv > Förhandsvisa sidan i webbläsare för att testa hur logotypen visas på de olika sidorna. Utan att publicera webbplatsen kan du arbeta lokalt på datorn och förhandsvisa webbplatsen i en webbläsare genom att klicka dig igenom sidorna med webbplatsnavigeringen. Observera att animeringen (SWF-filen) visas en gång och sedan stoppar på startsidan. Om du klickar på andra sidor kommer endast den statiska logotypen att visas.

    Obs!

    Om du väljer Arkiv > Förhandsvisa sidan i webbläsare kommer det nya webbläsarfönstret att läsas in snabbare för att visa startsidan, men endast den aktiva sidan (startsidan) förhandsvisas. Välj det här alternativet om du bara vill kontrollera en sida på webbplatsen, i stället för hela webbplatsen.

Lägga till rullningseffekter till animeringar

Med Adobe Muse kan animeringar som du skapat med Adobe Edge Animate läggas till på webbsidor. Det första steget till att använda funktionen Rullningseffekter i Adobe Edge Animate är att skapa en animering till det ändamålet.

Med Adobe Muse kan du lägga till rullningseffekter till OAM-filer för att påverka animeringarna som ligger på huvudtidslinjen. Du kan designa animeringarna strategiskt så att bara de objekt du vill ska röra sig när sidan rullas är på huvudtidslinjen. Du kan även skapa interaktiva animeringar. Resten av elementen måste placeras inom den kapslade tidslinjen. När besökare rullar sidan styr rullningseffektsinställningarna bara uppspelningen av animerade element på huvudtidslinjen.

Mer information om rullningseffekter i Adobe Muse finns i Rullningseffekter.

Följ de här stegen för att arbeta med fliken Bildspel i panelen Rullningseffekter:

  1. Exportera OAM-filen från Animate och spara den i din webbplatsmapp. Mer information om hur du exporterar OAM-filer från Animate finns i Montera animeringar i Adobe Muse.
  2. Starta Muse och dubbelklicka på en sida för att öppna den i designvyn. Se till att sidan är tillräckligt lång för att rulla genom att uppdatera inställningarna för minsta höjd i dialogrutan Sidegenskaper.
  3. Välj Arkiv > Montera och gå till och välj OAM-filen från webbplatsmappen.
  4. Öppna panelen Rullningseffekter. Klicka på fliken Adobe Edge Animate (fjärde fliken från vänster) för att se över inställningarna för den här delen.
  5. När OAM-filen är markerad markerar du kryssrutan Edge Animate.
Ställ in Edge Animate-animeringen till att börja spela när sidan rullas till en specifik plats eller ställ in den till att växla bild efter varje gång sidan rullas ned till ett visst avstånd (i pixlar).

I bilden ovan är tangentpositionen inställd på 700 pixlar. Du kan dra T-handtaget eller ange ett annat värde i fältet Tangentposition för att ändra det.

Efter att du ställt in tangentpositionen kan du styra uppspelningen av animeringen med två alternativ:

  • Autostart: När det här alternativet är valt börjar animeringen i huvudtidslinjen spelas så fort webbläsaren rullas till tangentpositionen oavsett antalet bilder i huvudtidslinjen. Animeringen fortsätter spela tills sidan rullas ovanför tangentpositionen.
  • Växla bild efter: När det här alternativet är valt kommer huvudtidslinjens animering att gå vidare till en bild varje gång sidan rullas förbi ett givet antal pixlar. Om du till exempel skapar en sida som är 3 000 pixlar hög och anger talet 10 så spelas huvudtidslinjens animering upp med 1 bild per 10 pixlar som sidan rullas. Om besökaren rullar sidan snabbare kommer animeringens hastighet att öka.
Obs!

Rullningseffekter påverkar inte animerade objekt som är kapslade inom eller länkade från huvudtidslinjen i Animate-kompositionen. Därför går det att välja att ha antingen en statisk bakgrund eller kapslade element som fortsätter i en slinga och rör sig hela tiden oavsett hur besökaren rullar sidan.

  1. När du valt inställningarna på fliken Edge Animate i panelen Rullningseffekter väljer du Arkiv > Förhandsvisa sidan i webbläsare (eller klickar på knappen Förhandsvisa). Testa sidan genom att rulla uppåt och nedåt för att se Edge Animate-animeringsinnehållet (som lades till i huvudtidslinjen) spelas upp.
  2. Om du behöver göra ändringar går du tillbaka till Muse (eller klickar på knappen Design) och uppdaterar inställningarna i panelen Rullningseffekter.

Exempel

I det här exemplet visas hur du kontrollerar OAM-filer som du har exporterat från Adobe Edge Animate med hjälp av rullningseffekter. I det här exemplet är sidan fylld med en vertikal övertoning som börjar med en ljusturkos färg och övergår till en mörkblå. Du kan hämta exempelfilerna från ScrollEffects.com.

En kombination av inställningar på flikarna Rörelse och Edge Animate skapar den här animerade effekten.

Tre versioner av samma OAM-fil monteras horisontellt bredvid varandra och skapar en rad med animerade kompasser. När du tittar på exempelwebbplatsen i en webbläsare rör sig alla tre kompasser upp tills de blir synliga och stannar sedan på plats. Alla tre kompasser ser ut att snurra i olika hastigheter, men det är inställningarna i panelen Rullningseffekter, inte Edge Animate-filens konstruktion, som får dem att snurra i olika hastigheter.

Följ de här stegen för att skapa en liknande effekt med tre monterade OAM-filer:

  1. I vyn Design väljer du Sida > Sidegenskaper. Ställ in den minsta sidhöjden till ett mycket större värde. I webbplatsexemplet är den minsta sidhöjden satt till 7 465 pixlar.
  2. Markera alla tre kompasser på sidan. På fliken Rörelse i panelen Rullningseffekter kan du se att alla tre OAM-filer har samma tangentposition och rörelseinställningar eftersom alla värden visas.
Kompasserna rör sig uppåt tills sidan rullas till deras tangentposition och sedan stannar de kvar på plats när sidan fortsätter att rullas ned.

Om du förhandsvisar exemplet i en webbläsare så ser du alla tre OAM-element hoppa in samtidigt och sedan stanna kvar i en rad som om de vore fästa.

  1. Klicka bort från kompasserna för att avmarkera alla tre och välj sedan bara den vänstra kompassen. Håll ned Skift-tangenten när du väljer kompassen till höger så att båda är markerade. Öppna fliken Edge Animate i panelen Rullningseffekter för att se över inställningarna.
Kompasserna på sidorna är inställda till att växla bild efter 350 pixlar.

De två kompasserna på sidorna är båda inställda till att gå genom tidslinjens animering i en slinga och gå vidare till nästa bild varje gång sidan rullas 350 pixlar.

  1. Avmarkera de två yttre kompasserna. Välj kompassen i mitten och titta på fliken Edge Animate igen för att se att fältet Växla bild efter är inställt på 400 pixlar. Den här inställningen får animeringen i mitten att röra sig långsammare jämfört med de två yttre kompasserna.
OAM-filen i mitten är inställd till att växla bild efter 400 pixlar.

Det går att skapa intressanta animeringseffekter genom att variera hastigheterna på flera monterade Edge Animate-animeringar i relation till sidrullningshastigheten. Det går till exempel att skapa ett fiskstim, en himmel med moln som rör sig eller andra effekter genom att lägga till flera likadana OAM-filer med olika rullningseffekter.

Adobes logotyp

Logga in på ditt konto

Snabblänkar

Visa alla dina planer Hantera dina planer

Juridiska meddelanden    |    Onlinesekretesspolicy