Obs!
Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns på sidan med information om när Adobe Muse inte längre kommer att vara tillgängligt.
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.
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:
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
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.
-
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.
-
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.
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:
- 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.
- 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.
- Välj Arkiv > Montera och gå till och välj OAM-filen från webbplatsmappen.
- Ö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.
- När OAM-filen är markerad markerar du kryssrutan Edge Animate.
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.
- 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.
- 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.
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:
- 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.
- 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.
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.
- 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.
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.
- 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.
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.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.