Starta Animate. Fönstret Kom igång visas.
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.
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:
Starta Animate. Fönstret Kom igång visas.
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.
Klicka på Öppna för att öppna .an-filen och stänga dialogrutan Öppna. Projektet visas på Animate-arbetsytan.
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).
Om du vill ange om en animering ska spelas upp omedelbart markerar du scenen och markerar eller avmarkerar kryssrutan Autostart i panelen Egenskaper.
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.
Behåll markeringen på scenen, klicka på färgväljaren för scenen i panelen Egenskaper och ange alternativet Genomskinlig.
Innehållet på scenen visas med vit bakgrund, den genomskinliga bakgrunden visas inte förrän du exporterar eller förhandsvisar animeringen.
Välj Arkiv > Spara så att du sparar ändringarna.
Välj Arkiv > Publiceringsinställningar så att dialogrutan Publiceringsinställningar öppnas.
I kolumnen Publicera mål till vänster avmarkerar du kryssrutan Webb och väljer alternativet Animate Deployment Package (Animate-publiceringspaket).
Klicka på Spara så att du sparar ändringarna och stänger dialogrutan Publiceringsinställningar.
Välj Arkiv > Publicera för att publicera projektet.
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.
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.
Gör så här när du ska lägga till animeringen på en sida på Muse-webbplatsen:
Starta Adobe Muse och öppna den webbplats du vill redigera.
I planvyn dubbelklickar du på namnet på sidan där du vill lägga till animeringen.
Välj Arkiv > Montera och navigera sedan till .OAM-filen i din webbplatsmapp.
Klicka en gång på sidan för att placera ut animeringen.
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.
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.
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.
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.
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.
Välj Arkiv > Montera. I dialogrutan Importera navigerar du till mappen Kevins_Koffee_Kart och väljer filen med namnet logo.swf.
Placera SWF-filen i det övre vänstra hörnet, så att placeringen stämmer överens med placeringen av den befintliga logotypbildfilen.
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.
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.
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:
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:
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.
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:
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.
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.
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.
Logga in på ditt konto