Läs om hur du använder rullningseffekter för rörelse och opacitet för sidelement i Adobe Muse.

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.

Använda rullningseffekter på sidelement

Panelen Rullningseffekter innehåller fyra olika flikar för att styra rörelse, opacitet, bildspelswidgetar och Adobe Edge Animate-innehåll baserat på hur en sida rullas. När rullningseffekter används ihop och när vissa element är fästa, satta till 100 % bredd och/eller ordnade över och bakom varandra med hjälp av panelen Lager kan man skapa en stor mängd övertygande effekter.

Använda rörelserullningseffekter med panelen Rullningseffekter

Gränssnittet för panelen Rullningseffekter liknar panelen för rullningseffekter för Webbläsarfyllning och bakgrundsfyllning. Följ de här stegen för att använda rullningseffekter på ett sidelement med fliken Rörelse i panelen Rullningseffekter:

  1. I Muse växlar du till vyn Design och väljer Sida > Sidegenskaper
  2. Ställ in minsta höjd till minst 2 000 pixlar för att se till att sidan är lång nog för att rulla. 
  3. Klicka på OK för att spara dina ändringar och stäng dialogrutan Sidegenskaper.
  4. I vyn Design ritar du en rektangel eller en textram på sidan.
  5. Använd fliken Fyllning eller menyn Fyllning och lägg till en bakgrundsbild som är sida vid sida eller fristående. Eller välj bara en helfylld färg eller en övertonande fyllningsfärg.
  6. Välj Fönster > Rullningseffekter för att öppna panelen Rullningseffekter.
Öppna panelen Rullningseffekter för att få åtkomst till inställningarna för rullningseffekter.
Öppna panelen Rullningseffekter för att få åtkomst till inställningarna för rullningseffekter.

  1. Aktivera Rullningseffekter: I panelen Rullningseffekter visas fliken Rörelse (långt till vänster). När elementet på sidan har markerats så markerar du kryssrutan Rörelse.

    Tips: Notera att det läggs till ett T-formigt handtag till elementet som sticker ut vid sidans överkant när du aktiverar kryssrutan Rörelse. T-handtaget visar tangentpositionen för den rullningseffekt som används på elementet. Rullningseffekten börjar används när en besökare når tangentpositionen vid rullning.

    T-handtagskontrollen visas som standard ovanför elementet. Men det går att klicka på och dra handtaget för att dra ut det längre, dra ned det så att det justeras utmed överkanten på elementet du styr, eller dra ned handtaget under elementet.

  2. Placera T-handtaget för att ställa in tangentpositionen: Dra T-handtaget för att ställa in tangentpositionen. Det gör att du kan ställa in den rörelse som ska ske före och efter att den rullade sidan möter T-handtagets överdel.

    Det går även att ange ett numeriskt värde i fältet Tangentposition i mitten av panelen Rullningseffekter när fliken Rörelse är aktiv. I bilden ovan är tangentpositionen inställd på 200 pixlar. 

    Platsen för det T-formade handtaget visar elementets tangentposition. När sidan rullas vertikalt används inställningarna i Startrörelse så att elementets placering matchar dess position som den visas i vyn Design.

    När en besökare rullar sidan eller klickar på en ankarlänk och hoppar förbi elementets tangentposition så används inställningarna i Slutrörelse.

    Delen Startrörelse innehåller en uppsättning vertikala och horisontella riktningspilar och hastighetsalternativ.

  3. Ställ in vertikal riktning för Startrörelse: Välj en vertikal riktning (upp eller ned) genom att klicka på en av de vertikala knapparna. Ange ett hastighetsvärde i fältet bredvid de vertikala riktningspilarna för att ange hur snabb rörelsen ska vara i relation till sidrullningshastigheten. Om du anger 0 så rör sig inte elementet vertikalt. Det går även att använda ett procenttal genom att ange en decimal. Om du till exempel anger 0,5 så rör sig elementet vertikalt i halva sidrullningshastigheten.

  4. Ställ in horisontell riktning för Startrörelse: Du ställer in elementets horisontella rullningshastighet genom att klicka på vänster- eller högerpilen för att ställa in riktningen som elementet ska röra sig i innan det når sin tangentposition. Ange hastighetsvärdet för den horisontella riktningen i fältet till höger om de horisontella pilarna. Om du inte vill att elementet ska röra sig i en horisontell riktning anger du 0 som värde för den horisontella hastigheten.

  5. Upprepa steg 7 och 8 för att ställa in riktningen och rörelsen för delen Slutrörelse.

I exemplet som visas nedan är tangentpositionen satt till 500 pixlar. När webbläsaren börjar rullas rör sig elementet nedåt och i position lika snabbt som sidan rullas. Elementet når sin position när sidan rullas till tangentpositionen. När sidan har rullat förbi sin tangentposition rör sig elementet till höger 2 gånger snabbare än sidrullningen.

Använda rörelseinställningar till att ange rullningseffekter i Adobe Muse
Använda rörelseinställningar till att ange rullningseffekter

  1. Tryck på Förhandsvisa eller välj Arkiv > Förhandsvisa sidan i webbläsare för att testa rullningseffekterna. Rulla sidan nedåt och tillbaka upp igen för att se elementet röra sig.
  2. Gå tillbaka till Muse eller klicka på Design-knappen när du har testat färdigt för att fortsätta redigera sidan.

Använda opacitetsrullningseffekter med panelen Rullningseffekter

I den här delen ser du hur man använder omformningar på synligheten som ändrar visningen av elementet baserat på interaktion med besökarens rullning. Det här är ett hjälpsamt sätt att visa och dölja innehåll genom att få föremål att se ut att tona in eller tona ut när besökaren rullar ned till en ny del av sidan. Följ de här stegen för att använda rullningseffekter som påverkar ett sidelements genomskinlighet med fliken Opacitet i panelen Rullningseffekter:

  1. Kontrollera att Sidegenskaper har ett pixelvärde som är högre än höjden på de flesta bildskärmar (till exempel 2 000 pixlar) i fältet minsta höjd när du redigerar en sida i vyn Design. Det går även att lägga till sidinnehåll till sidan för att se till att den är tillräckligt lång för att rulla.
  2. I vyn Design ritar du en rektangel eller en textram på sidan.
  3. Använd fliken Fyllning i menyn Fyllning (eller panelen Fyllning) för att lägga till en bakgrundsbild som är sida vid sida eller fristående till det markerade sidelementet eller ställ in en helfylld färg eller en övertonande färg. Om du vill kan du lägga till en bildspelswidget eller montera en Adobe Edge Animate-fil (en OAM-fil) på sidan.
  4. När elementet är markerat klickar du på fliken Opacitet (andra fliken från vänster) i panelen Rullningseffekter och markerar kryssrutan Opacitet.
Markera kryssrutan för Opacitet för att aktivera opacitetsrullningseffekter för det markerade elementet.
Markera kryssrutan för Opacitet för att aktivera opacitetsrullningseffekter för det markerade elementet.

När alternativet Opacitet aktiveras så visas en annan typ av handtag på elementet. Precis som T-handtaget som används för att ställa in tangentpositionen på fliken Rörelse kan du klicka på och dra handtaget så att det visas över elementet, dra ned det så att det passar överkanten (eller över vilken del av elementet som helst) eller dra ned det till under elementet. Opacitetshandtaget har tre olika delar som kan dras separat för att ställa in värden för tangentposition, toningsplacering 1 och toningsplacering 2.

  1. Klicka på och dra den fyrkantiga delen i mitten av handtaget för att ställa in dess tangentposition. I exemplet nedan är tangentpositionen satt till 150 pixlar.
Ställ in tangentpositionen genom att dra det fyrkantiga handtaget i mitten vertikalt.
Ställ in tangentpositionen genom att dra det fyrkantiga handtaget i mitten vertikalt.

  1. Klicka på och dra den runda överdelen av handtaget och sätt det i den position du vill. I exemplet nedan är toningsplacering 1 satt till 100 pixlar.
Ange toningsplacering 1 på handtaget Opacitet
Klicka på och dra den övre vänstra delen av det runda handtaget för att ställa in den första positionen som ska påverka elementets genomskinlighet.

  1. Klicka på och dra den runda nedre delen av handtaget och sätt det i den position du vill. I exemplet nedan är toningsplacering 2 satt till 200 pixlar.
Ange toningsplacering 2 på handtaget Opacitet
Klicka på och dra den övre högra delen av det runda handtaget för att ställa in den andra positionen som kommer att påverka elementets genomskinlighet.

Obs!

Det går att dra tangentpositionen utmed handtagen för toningsplacering och ställa in samma värde. Det går även att ställa in numeriska värden för varje fält i panelen Rullningseffekter istället för att dra i handtagen.

I det här exemplet börjar elementet som helt transparent och blir mer synligt tills det är helt opakt (opacitetsvärdet som motsvarar tangentpositionen är nu satt till 100 %) när sidan når tangentpositionen. När sidan rullar förbi tangentpositionen blir elementet gradvis mer genomskinligt igen och tonar bort när sidan rullas förbi 200 pixlar.

Ange ett procentvärde för opacitet för rullningseffekter
Ställ in ett procentvärde för opaciteten (där 0 % är helt genomskinligt) på fliken Opacitet i panelen Rullningseffekter.

  1. Tryck på Förhandsvisa eller välj Arkiv > Förhandsvisa sidan i webbläsare för att testa rullningseffekterna. Rulla sidan nedåt och tillbaka upp igen för att se elementets opacitet ändras i förhållande till sidrullningen.
  2. Gå tillbaka till Muse eller klicka på Design-knappen när du har testat färdigt för att fortsätta redigera sidan.

Arbeta med fliken Bildspel i panelen Rullningseffekter

En annan vanlig användning av rullningsrörelse är att kombinera rullningsinteraktion med visning av bilder i ett bildspel. Det går att lägga till en bildspelswidget till sidan och sedan använda fliken Bildspel i panelen Rullningseffekter för att använda rullningseffekter, till exempel att visa en ny bild i bildspelet automatiskt varje gång sidan rullas förbi en viss plats.

Klicka på fliken Bildspel (tredje fliken från vänster) för att se över inställningarna för den här delen.

Den vanliga användningen för den här delen av gränssnittet för rullningsrörelse är att fästa en bildspelswidget på sidan. I allmänhet kommer bildspelswidgeten att vara konfigurerad (med menyn Alternativ) att visa bara den större bildspelsbehållaren och dölja miniatyrbilderna och knapparna Nästa och Föregående.

Ett bildspel i helskärm passar särskilt väl för den här effekten, även om typen av bildspelswidget du väljer beror på webbsidans design.

Följ de här stegen för att använda rullningseffekter på en bildspelswidget:

  1. Uppdatera fältet för minsta höjd i dialogrutan Sidegenskaper så att sidan blir tillräckligt hög för att rulla. Eller lägg till tillräckligt med innehåll för att skapa en längre sida.
  2. Dra en bildspelswidget i helskärm från widgetprogrambiblioteket till sidan. Använd menyn Alternativ för att ställa in bildspelsalternativen. (När du använder rullningseffekter på bildspelswidgetar är alternativen Nästa, Föregående och Miniatyrbilder oftast avaktiverade.)
  3. Lägg till bilder till bildspelswidgeten genom att klicka på mappen bredvid delen Bilder i menyn Alternativ. Gå till de bilder du vill lägga till från din dator och lägg till dem i bildgalleriet.
  4. Använd gränssnittet Fäst i kontrollpanelen och fäst bildspelet i sin nuvarande position i webbläsarfönstret. När bildspelet är markerat klickar du på en av de sex fästpositionerna.
Använda rullningseffekter på bildspelswidgetar
Fäst bildspelswidgeten på en specifik plats så att den är kvar på samma plats i webbläsarfönstret när sidan rullas.

När du har lagt till och ställt in det fästa bildspelet kan du lägga till rullningseffekter.

På fliken Bildspel i panelen Rullningseffekter markerar du kryssrutan Bildspel när bildspelswidgeten är markerad.

Aktivera alternativet Bildspel i panelen Rullningseffekter.
Välj bildspelswidgeten och aktivera alternativet Bildspel i panelen Rullningseffekter.

Lägg märke till att handtaget för tangentpositionen läggs till i bildspelet i vyn Design när alternativet Bildspel är aktiverat. Om du vill uppdatera värdena för tangentrullningspositionerna kan du dra den vänstra och högra sidan av handtagen eller ange siffror i fältet Tangentrullningspositioner. Det går även att klicka på uppåt- och nedåtpilarna i panelen Rullningseffekter för att öka eller minska det numeriska värdet.

Fliken Bildspel i panelen Rullningseffekter har två knappar för två olika sätt att styra hur bilder spelas upp i ett bildspel. Det går att ställa in bildspelet att spela automatiskt eller att gå igenom bilderna baserat på när sidan rullas.

Det första sättet är att ställa in den önskade tangentpositionen och sedan aktivera kryssrutan Autostart.

När sidan rullas förbi tangentpositionen (eller när besökaren klickar på en länk som hör till en ankartagg och hoppar ned på sidan förbi tangentpositionen) startar bildspelet. Autostartfunktionen fortsätter visa bilderna i en slinga tills sidan rullas upp igen ovanför tangentpositionen eller besökaren lämnar sidan.

I exemplet som visas i bilden ovan börjar bildspelet visas när sidan rullas till 100 pixlar (eller var som helst under den inställda tangentpositionen). Om besökaren rullar tillbaka upp slutar bildspelet spela när sidan rullar tillbaka ovanför tangentpositionen (99 pixlar eller mindre).

Det andra sättet att styra bildspelswidgeten är att ställa in tangentpositionen och sedan aktivera Byt bild efter med alternativknappen. I det här arbetsflödet kan du även ställa in antalet pixlar i fältet under alternativknappen för att ange hur ofta bilderna i bildspelet kommer att ändras baserat på hur långt ned sidan rullas.

Det går till exempel att fästa en bildspelswidget på en längre sida så att den är fäst på en plats när resten av sidans innehåll rullas. Genom att ställa in ett numeriskt värde för alternativet Byt bild efter går det att ställa in bildspelet till att växla till nästa bild varje gång sidan rullas ned till det angivna antalet pixlar.

I bilden ovan är tangentpositionen inställd på 200. När sidan rullas förbi 200 pixlar från överkanten visas nästa bild i uppsättningen i bildspelet varje gång sidan rullar 30 pixlar.

Ange rullningseffekter för bildspel i Adobe Muse
Ställ in bildspelet till att fortsätta till nästa bild varje gång sidan rullas ett visst avstånd (i pixlar).

Arbeta med fliken Adobe Edge Animate i panelen Rullningseffekter

Adobe Edge Animate är ett intuitivt designverktyg som gör att du kan skapa HTML5-baserade webbanimeringar. Med gränssnittet i Edge Animate går det att skapa kompositioner med rörlig grafik och symboler i slingor. Animeringarna du skapar med Adobe Edge Animate kan exporteras som OAM-filer och sedan monteras på dina Muse-webbplatser. Animeringar som skapas i Edge Animate spelas i webbläsaren utan att det behövs en plug-in.

När du skapar animeringar i Adobe Edge Animate drar du elementet till arbetsytan och styr deras rörelser med en tidslinje. Utöver att lägga till element till huvudtidslinjen går det att skapa kapslade element med underelement som spelar upp med sina egna tidslinjer. Gå till Adobe Edge Animate-produktsidan om du vill lära dig mer om att jobba med Adobe Edge Animate. Titta även på videorna med självstudiekurser om Adobe Edge Animate på Adobe TV.

När du vill arbeta med rullningsrörelsefunktionen i Adobe Edge Animate är det första steget att skapa en komposition för just det syftet. Det går att använda rullningseffekter på OAM-filer så att de påverkar animeringarna som är monterade i huvudtidslinjen. Genom att strategiskt designa animeringarna så att bara de saker du vill ska röra sig när sidan rullas är på huvudtidslinjen (och placera allt annat i animeringen i kapslade symboltidslinjer) går det att skapa interaktiva animeringar. När besökare rullar sidan styr rullningseffektsinställningarna bara uppspelningen av animerade element på huvudtidslinjen.

Mer information om hur du skapar animeringar för Adobe Muse-webbplatser finns i Lägga till Adobe Edge Animate-innehåll.

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

  1. Exportera OAM-filen från Adobe Edge Animate och spara den i din webbplatsmapp.
  2. Starta Muse och dubbelklicka på en sida för att öppna den i designvyn. Kontrollera att sidan är tillräckligt lång för att rulla genom att uppdatera inställningarna för minsta höjd i dialogrutan Sidegenskaper eller lägga till innehåll för att skapa en längre sida.
  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 så markerar du kryssrutan Edge Animate.
Ange rullningseffekter för animeringar i Adobe Muse
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å 50 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 1 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å kommer huvudtidslinjens animering att spelas upp med 1 bild per 10 pixlar som sidan rullas. Om besökaren rullar sidan snabbare kommer animeringens hastighet att öka.

Obs!

Animerade objekt som är kapslade eller länkade från huvudtidslinjen i Adobe Edge Animate-kompositionen påverkas inte av rullningsrörelseeffekternas inställningar. 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.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy