Lær, hvordan du anvender rulleeffekter for bevægelse og opacitet for sideelementer i Adobe Muse.

Bemærk:

Adobe Muse tilføjer ikke længere nye funktioner og slutter med at tilbyde support 26. marts 2020. Find flere oplysninger og hjælp på Adobe Muses side om ophør af tjeneste.

Anvendelse af rulleeffekter på sideelementer

Panelet Rulleeffekter indeholder fire forskellige faner, der styrer bevægelse, opacitet, diasshow-widgets og Adobe Edge Animate-indhold på basis af, hvordan en side rulles. Når rulleeffekter anvendes sammen med hinanden, og når nogle elementer også er fastgjort, indstillet til 100 % bredde og/eller arrangeret over og bag hinanden via panelet Lag, kan du skabe en række forskellige iøjnefaldende effekter.

Anvendelse af rulleeffekter for bevægelse ved hjælp af panelet Rulleeffekter

Brugergrænsefladen i panelet Rulleeffekter minder om panelet rulleeffekter for Browserfyld og baggrundsfyld. Følg disse trin for at anvende rulleeffekter på et sideelement ved hjælp af fanen Bevægelse i panelet Rulleeffekter:

  1. Skift til designvisning i Muse, og vælg Side > Sideegenskaber
  2. Angiv værdien af minimumhøjden til mindst 2000 pixels for at sikre, at siden er lang nok til rulning. 
  3. Klik på OK for at gemme ændringerne og lukke dialogboksen Sideegenskaber.
  4. Brug visningen Design til at trække et rektangel eller en tekstramme på siden.
  5. Brug fanen Fyld i menuen Fyld til at tilføje et fliseinddelt eller ikke-fliseinddelt baggrundsbillede. Eller vælg en ren farve eller farveforløbsfarve.
  6. Vælg Vindue > Rulleeffekter for at åbne panelet Rulleeffekter.
Åbn panelet Rulleeffekter for at åbne indstillingerne for rulleeffekter.
Åbn panelet Rulleeffekter for at åbne indstillingerne for rulleeffekter.

  1. Aktivering af rulleeffekter: Fanen Bevægelse vises (yderst til venstre) i panelet Rulleeffekter Aktivér afkrydsningsfeltet Bevægelse, mens elementet er markeret på siden.

    TIP: Bemærk, at aktivering af afkrydsningsfeltet Bevægelse føjer et T-formet håndtag til elementet, der fortsætter ud over den øverste kant. T-håndtaget angiver nøglepositionen af den anvendte rulleeffekt på elementet. Rulleeffekten træder i kraft, når en besøgende når til nøglepositionen under rulning.

    T-håndtaget vises som standard over elementet. Du kan dog klikke på og trække håndtaget for at forlænge det højere op, trække det nedad for at justere det med den øverste kant af det element, du indstiller, eller trække håndtaget ned under elementet.

  2. Placering af T-håndtaget for at indstille nøglepositionen: Træk T-håndtaget for at indstille nøglepositionen. Så kan du indstille det miljø, der skal eksistere, før og efter den rullede side kommer til toppen af T-håndtaget.

    Du kan også indtaste en numerisk værdi i feltet Nøgleposition i midten af panelet Rulleeffekter, mens fanen Bevægelse er aktiv. På billedet ovenfor er nøglepositionen indstillet til 200 pixels. 

    Placeringen af det T-formede håndtag repræsenterer elementets nøgleposition. Når siden rulles lodret, anvendes indstillingerne i sektionen Første bevægelse, så elementets position er lig med den placering, der kan ses i visningen Design.

    Når den besøgende ruller siden eller klikker på et ankerlink for at springe forbi elementets nøgleposition, anvendes indstillingerne i sektionen Sidste bevægelse.

    Sektionen Første bevægelse indeholder et sæt lodrette og vandrette retningspile og hastighedsindstillinger.

  3. Opsætning af lodret retning af den første bevægelse: Vælg en lodret retning (opad eller nedad) ved at klikke på en af de lodrette knapper. Indtast en hastighedsværdi i feltet ud for de lodrette retningspile for at indstille bevægelses hastighed i forhold til sidens rullehastighed. Hvis du indtaster 0, flyttes elementet ikke lodret. Du kan også indtaste en procent ved hjælp af et decimalpunkt. Hvis du f.eks. indtaster ,5, flyttes elementet lodret med halv hastighed i forhold til sidens rullehastighed.

  4. Opsætning af vandret retning af den første bevægelse: Angiv den vandrette rulleretning for elementet (venstre eller højre) ved at klikke på venstre eller højre pil for at indstille den retning, som elementet flyttes i, før det når nøglepositionen. Angiv hastigheden af vandret retning i feltet til højre for de vandrette pile. Hvis elementet ikke skal flyttes i vandret retning, skal du indstille det første vandrette hastighedsfelt til 0.

  5. Gentag trin 7 og 8 for at angive retning og hastighed af bevægelse for sektionen Sidste bevægelse.

I nedenstående eksempel er nøglepositionen indstillet til 500 pixels. Når rulning starter i browseren, flyttes elementet ned i position med en hastighed af 1 gange, der er samme hastighed som sidens rulning. Elementet kommer i position, når siden ruller til nøglepositionen. Når siden ruller forbi nøglepositionen, flyttes elementet mod højre med 2 gange hastigheden af sidens rulning.

Anvend bevægelsesindstillinger for at angive rulleeffekter i Adobe Muse
Anvend bevægelsesindstillinger for at angive rulleeffekter

  1. Tryk på Vis, eller vælg Fil > Forhåndsvisning af side i browser for at teste rulleeffekterne. Rul siden ned og op igen for at se elementets bevægelser.
  2. Vend tilbage til Muse, eller klik på knappen Design, når du er færdig med testen, for at fortsætte redigeringen af siden.

Anvendelse af rulleeffekter for opacitet ved hjælp af panelet Rulleeffekter

I dette afsnit får du at se, hvordan du kan anvende transformationer på synligheden, der ændrer visningen af et element på basis af den besøgendes rulleinteraktioner. Det er en praktisk metode at vise og skjule indhold ved at få elementer til at se ud som om, at de fader ind eller ud, når den besøgende ruller ned til et nyt afsnit på siden. Følg disse trin for at anvende rulleeffekter, der påvirker gennemsigtigheden af et sideelement, via fanen Opacitet i panelet Rulleeffekter:

  1. Bekræft under redigering af en side i visningen Design, at sideegenskaberne har en pixelværdi i feltet Minimumhøjde, der er større end gennemsnitshøjden af de fleste skærme, f.eks. 2000 pixels. Du kan også tilføje indhold på siden for at sikre dig, at den er lang nok til rulning.
  2. Brug visningen Design til at trække et rektangel eller en tekstramme på siden.
  3. Brug fanen Fyld eller menuen Fyld (eller panelet Fyld) til at tilføje et fliseinddelt eller ikke-fliseinddelt baggrundsbillede på det markerede sideelement, eller vælg en ren farve eller farveforløbsfarve. (Du kan også tilføje en diasshow-widget eller placere en Adobe Edge Animate OAM-fil på siden).
  4. Klik på fanen Opacitet (anden fane fra venstre), mens elementet er markeret, i panelet Rulleeffekter, og aktiver derefter afkrydsningsfeltet Opacitet.
Marker afkrydsningsfeltet Opacitet for at aktivere rulleeffekter for opacitet til det markerede element.
Marker afkrydsningsfeltet Opacitet for at aktivere rulleeffekter for opacitet til det markerede element.

Aktivering af indstillingen Opacitet viser en anden type håndtag på elementet. Ligesom T-håndtaget, der bruges til at angive nøglepositionen under fanen Bevægelse, kan du klikke på og trække håndtaget til at blive vist over elementet, trække det ned, så det matcher den øverste kant (eller over enhver del af elementet), eller trække det ned under elementet. Opacitetshåndtaget har tre forskellige dele, der kan trækkes hver for sig for at angive værdier for nøgleposition, toningsposition 1 og toningsposition 2.

  1. Klik på og træk den midterste kvadratdel af håndtaget for at indstille nøglepositionen. I nedenstående eksempel er nøglepositionen indstillet til 150 pixels.
Indstil nøglepositionen ved at trække det midterste kvadratiske håndtag lodret.
Indstil nøglepositionen ved at trække det midterste kvadratiske håndtag lodret.

  1. Klik på og træk den øverste cirkelformede del af håndtaget for at placere det på det ønskede sted. I nedenstående eksempel er toningsposition 1 indstillet til 100 pixels.
Angiv Toningsposition 1 i Opacitetshåndtaget
Klik på og træk øverste venstre side af det runde håndtag for at indstille den første position, der påvirker elementets gennemsigtighed.

  1. Klik på og træk den nederste cirkelformede del af håndtaget for at placere det på det ønskede sted. I nedenstående eksempel er toningsposition 2 indstillet til 200 pixels.
Angiv Toningsposition 2 i Opacitetshåndtaget
Klik på og træk øverste højre side af det runde håndtag for at indstille den anden position, der påvirker elementets gennemsigtighed.

Bemærk:

Du kan trække nøglepositionen sammen med toningspositionshåndtagene for at angive den samme værdi. I stedet for at trække håndtagene kan du indtaste numeriske værdier for hvert felt i panelet Rulleeffekter.

I dette eksempel starter elementet med at være helt gennemsigtigt og bliver mere og mere uigennemsigtigt, indtil det er helt uigennemsigtigt (den opacitetsværdi, der svarer til nøglepositionen, er aktuelt indstillet til 100 %), når siden når nøglepositionen. Når siden ruller forbi nøglepositionen, bliver elementet gradvist mere gennemsigtigt igen og fader ud af syne, når siden ruller forbi 200 pixels.

Angiv den procentvise opacitet for rulleeffekter
Indstil den procentvise opacitet (hvor 0 % er helt gennemsigtig) under fanen Opacitet i panelet Rulleeffekter.

  1. Tryk på Vis, eller vælg Fil > Forhåndsvisning af side i browser for at teste rulleeffekterne. Rul ned på siden og op igen for at se elementets skiftende opacitet i forhold til siderulningen.
  2. Vend tilbage til Muse, eller klik på knappen Design, når du er færdig med testen, for at fortsætte redigeringen af siden.

Arbejd med fanen Diasshow i panelet Rulleeffekter

En anden almindelig rullebevægelse består af at kombinere rulleinteraktion med visningen af billeder i et diasshow. Du kan tilføje en diasshow-widget på siden og derefter bruge fanen Diasshow i panelet Rulleeffekter til at anvende rulleeffekter som f.eks. visning af et nyt billede i diasshowet automatisk, hver gang siden rulles til et bestemt sted.

Klik på fanen Diasshow (tredje fane fra venstre) for at gennemgå indstillingerne for denne sektion.

Det er almindeligt at bruge denne del af rullebevægelsens grænseflade til at fastgøre en diasshow-widget til siden. Generelt bliver diasshow-widgeten konfigureret (via menuen Indstillinger) til kun at vise den største diasshowcontainer, mens miniaturebilleder og knapperne Næste og Forrige skjules.

Et diasshow i fuld skærm er især velegnet til denne effekt, men den type af diasshow-widget, du ender med at tilføje, afhænger af designet af websitet.

Følg disse trin for at anvende rulleeffekter på en diasshow-widget:

  1. Opdater feltet Min. højde i dialogboksen Sideegenskaber for at gøre siden høj nok til rulning. Du kan også tilføje indhold for at oprette en længere side.
  2. Træk en diasshow-widget fra widgets-biblioteket til siden. Brug menuen Indstillinger til at konfigurere indstillinger for diasshow. (Når du anvender rulleeffekter på diasshow-widgets, er indstillingerne Næste, Forrige og Miniaturebilleder normalt deaktiveret).
  3. Føj billeder til en diasshow-widget ved at klikke på mappen ud for sektionen Billeder i menuen Indstillinger. Vælg Gennemse for at vælge de billeder, du vil tilføje, fra din computer for at udfylde billedgalleriet.
  4. Brug grænsefladen Fastgør i kontrolpanelet til at fastgøre diasshowet til dets aktuelle position i browservinduet. Klik på en af de seks fastgørelsespositioner, mens diasshowet er markeret.
Anvend rulleeffekter på diasshow-widgets
Fastgør diasshow-widgeten til en specifik placering, så den forbliver i position i browservinduet, når siden rulles.

Når du har tilføjet og konfigureret det fastgjorte diasshow, kan du tilføje rulleeffekter.

Brug fanen Diasshow i panelet Rulleeffekter til at aktivere afkrydsningsfeltet Diasshow, mens Diasshow-widgeten er markeret.

Aktivér indstillingen Diasshow i i panelet Rulleeffekter.
Marker diasshow-widgeten, og aktiver indstillingen Diasshow i panelet Rulleeffekter.

Bemærk, at når indstillingen Diasshow er aktiveret, er håndtaget til nøglepositionen føjet til diasshowet i visningen Design. Hvis du vil opdatere nøglepositionens rulleværdier, kan du trække venstre og højre side af håndtaget eller indtaste tal i feltet Nøgleposition. Du kan klikke på de opad- og nedadgående pile i panelet Rulleeffekter for at øge eller mindske den numeriske værdi.

Fanen Diasshow i panelet Rulleeffekter indeholder de to knapper 1 og 2 med forskellige måder at styre afspilningen af billeder på i diasshowet. Du kan indstille diasshowet til automatisk afspilning, eller du kan konfigurere det til gradvist at flytte gennem billederne på basis af siderulning.

Den første måde er at angive den ønskede nøgleposition og derefter aktivere afkrydsningsfeltet Automatisk afspilning.

Når siden rulles forbi nøglepositionen (eller når den besøgende klikker på et link til et ankermærke og springer nedad på siden forbi nøglepositionen), begynder afspilningen af diasshowet. Den automatiske afspilning fortsætter med at vise billederne i løkke, indtil siden igen rulles op over nøglepositionen, eller den besøgende forlader siden.

I eksemplet på ovenstående billede begynder afspilningen af diasshowet, når siden rulles til 100 pixels (eller under denne indstilling af nøgleposition). Hvis den besøgende ruller op igen, stopper afspilningen af diasshowet, når siden rulles over nøglepositionen (99 pixels eller derunder).

Den anden måde at styre diasshow-widgeten på er at indstille nøglepositionen og derefter aktivere alternativknappen Skift dias hver. I dette arbejdsforløb skal du også angive antallet af pixels i feltet under alternativknappen for at angive, hvor ofte billederne i diasshowet skal skifte på basis af, hvor langt ned siden rulles.

Du kan f.eks. fastgøre en diasshow-widget til en længere side, så den bliver i en fast position, når det andet sideindhold rulles. Hvis du angiver en numerisk værdi for indstillingen Skift dias hver, kan du konfigurere diasshowet til at skifte til næste billede i sættet, hver gang siden rulles ned til det angivne antal pixel.

På billedet ovenfor er nøglepositionen indstillet til 200. Når siden rulles forbi 200 pixels fra toppen, vises det næste billede i serien i diasshowet, hver gang siden rulles yderligere 30 pixels.

Angiv rulleeffekter for diasshows i Adobe Muse
Indstil diasshowet til at gå til næste billede, hver gang siden rulles en bestemt afstand ned (i pixel).

Arbejd med fanen Adobe Edge Animate i panelet Rulleeffekter

Adobe Edge Animate er et intuitivt designværktøj, du kan bruge til at oprette HTML5-baserede webanimationer. Du kan bruge grænsefladen i Edge Animate til at opbygge kompositioner ved hjælp af bevægelsesgrafik og -symboler, der går i løkke. De animationer, du opretter med Adobe Edge Animate, kan eksporteres som OAM-filer og derefter placeres på sider i dine Muse-websites. Animationer, der er oprettet i Edge Animate, afspilles i en browser uden krav om ekstramodul.

Når du konstruerer animationer i Adobe Edge Animate, trækker du elementer over på scenen og manipulerer med deres bevægelser via en tidslinje. Foruden at tilføje elementer direkte på hovedtidslinjen kan du også oprette indlejrede elementer med underelementer, der afspilles via deres egne interne tidslinjer. Hvis du vil vide mere om at arbejde med Adobe Edge Animate, skal du se Adobe Edge Animate-produktsiden. Du kan også se Adobe Edge Animate-videoselvstudier på Adobe TV.

Når du skal arbejde med Adobe Edge Animate-funktionen for rullebevægelse, skal du først designe en komposition specifikt til dette formål. Rulleeffekter kan anvendes på OAM-filer for at påvirke de animationer, der er placeret på hovedtidslinjen. Hvis du designer animationen strategisk, så kun de elementer, du vil flytte, når siden rulles, er på hovedtidslinjen (og placerer alt andet i animationen i indlejrede symboltidslinjer), kan du oprette interaktive animationer. Når besøgende ruller siden, styrer indstillingerne af rulleeffekt kun afspilningen af animerede elementer på hovedtidslinjen.

Find flere oplysninger om oprettelse af animationer specifikt til tilføjelse på et Adobe Muse-website i Tilføj Adobe Edge Animate-indhold.

Følg disse trin for at arbejde med fanen Diasshow i panelet Rulleeffekter:

  1. Eksporter OAM-filen fra Adobe Edge Animate, og gem den i din websitemappe.
  2. Start Muse, og dobbeltklik på en side for at åbne den i visningen Design. Bekræft, at siden er lang nok til at rulle, ved at opdatere indstillingen af minimumhøjde i dialogboksen Sideegenskaber eller tilføje sideindhold for at oprette en længere side.
  3. Vælg Filer > Placer, og naviger for at vælge OAM-filen i websitemappen.
  4. Åbn panelet Rulleeffekter. Klik på fanen Adobe Edge Animate (fjerde fane fra venstre) for at gennemgå indstillingerne for denne sektion.
  5. Aktiver afkrydsningsfeltet Edge Animate, mens OAM-filen er valgt.
Angiv rulleeffekter for animationer i Adobe Muse
Indstil Edge Animate-animationen til at begynde afspilning, når siden rulles til et bestemt sted, eller indstil den til at skifte billede, hver gang siden rulles en bestemt afstand (i pixel).

På billedet ovenfor er nøglepositionen indstillet til 50 pixels. Du kan trække T-håndtaget eller indtaste en anden værdi i feltet Nøgleposition for at justere den.

Når du har indstillet nøglepositionen, kan du styre afspilningen af animationen med to indstillinger:

  • Automatisk afspilning: Når denne indstilling er valgt, begynder afspilningen af animationen på hovedtidslinjen, når browseren rulles til nøglepositionen, uanset antallet af billeder på hovedtidslinjen. Afspilningen af animationen fortsætter, indtil siden rulles over nøglepositionen.
  • Skift billede hver: Når denne indstilling er valgt, vil animationen på hovedtidslinjen gå 1 billede frem, hver gang siden rulles forbi det angivne antal pixel. Hvis du f.eks. opretter en side, der er 3000 pixels høj, og indtaster tallet 10, afspilles animationen på hovedtidslinjen med en hastighed af 1 billede for hver 10 pixels, siden rulles. Hvis den besøgende ruller hurtigere ned ad siden, øges animationshastigheden.

Bemærk:

Ingen animerede objekter, der er indlejret i eller sammenkædet fra hovedtidslinjen i Adobe Edge Animate-kompositionen, påvirkes af indstillingerne af bevægelse for rulleeffekter. Derfor kan du vælge enten at have en statisk baggrund eller indlejrede elementer, der konstant kører i løkke og bevæges ensartet, uanset om besøgende ruller siden.

  1. Når du har valgt indstillingerne under fanen Edge Animate i panelet Rulleeffekter, skal du vælge Filer > Forhåndsvisning af side i browser (eller klik på knappen Vis). Test siden ved at rulle op og ned for at afspille Edge Animate-animationsindholdet (der er føjet til hovedtidslinjen).
  2. Hvis du skal foretage ændringer, skal du vende tilbage til Muse (eller klikke på knappen Design) og opdatere indstillingerne i panelet Rulleeffekter.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online