I dette afsnit skal du se nærmere på nogle af de mange anvendelsesmuligheder med rulleeffekter for at tilføje interaktive funktioner, unik navigation på websitet og udtryksfuld bevægelsesgrafik på dine Muse-websites.

Følg nedenstående trin for at komme i gang:

1. Besøg websitet med eksempler, og klik på hver enkelt sektion for at se de tilhørende eksempler. Rul ned på hver eksempelside for at se, hvordan rulleeffekter styrer den måde, som sideelementer vises på.
2. Rul til slutningen af websitet med eksempler for at downloade .muse-filen.
3. Åbn websitet med eksempler, og gennemgå projektet i Muse-arbejdsrummet.
4. Åbn panelet Lag, og udvid afsnittet med navnet Indhold for at se de elementer, der er brugt til at oprette hvert eksempel.

Piece-by-piece-effekten

Denne effekt får et sæt af individuelle elementer til at flyve ind og samles i sidedesignet, når den besøgende ruller ned på siden. Grafik og tekstrammer styres via rulleeffekter, der skaber interaktiv sammensætning, som om et puslespils brikker bliver samlet. Det er en spændende fremvisning af produktdetaljer på en webside.

Arbejdsforløbet for dette eksempel bruger sektionen Første bevægelse under fanen Bevægelse i panelet Rulleeffekter til at samle elementer i et fælles design. Når hver brik falder på plads, er Sidste bevægelse indstillet til 0 for at bevare de eksisterende elementers position, når nye elementer flyver ind.

Følg disse trin for at skabe en lignende piece-by-piece-effekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 14,120 pixels.
2. Brug tekstværktøjet til at oprette en tekstramme og indtaste det ønskede tekstindhold.
3. Åbn fanen Bevægelse i panelet Rulleeffekter, og aktiver afkrydsningsfeltet Bevægelse. I dette eksempel får indstillingerne i sektionen Første bevægelse tekstrammen til at flytte ned i position med ,25 gange (en fjerdedel hastighed) rullehastigheden. Når siden kommer til nøglepositionen for tekstrammen, når tekstrammen det sted, hvor den er placeret i visningen Design. Derefter får indstillingerne af Sidste bevægelse (værdien 0 for begge retninger) det første element til at blive stående, som om elementet var fastgjort.
4. En PNG-fil med gennemsigtighed (kontur af mobiltelefon) er placeret under tekstrammen. Dette element bruger indstillingerne under fanen Bevægelse i panelet Rulleeffekter til at flyve ind fra venstre side, flytte i position og derefter blive stående der.
5. Lige efter telefonkonturen følger et mindre hvidt element et lignende bevægelsesmønster og flyver ind fra venstre side og forbliver i position. Den hvide grafik skal forestille ørestykket øverst på en mobiltelefon. Dette aktiv (kaldet phone-earpiece.png) er placeret oven på mobiltelefonens kontur i panelet Lag, så det vises oven på telefonkonturen i designet. 
6. Lige efter ørestykket flyver et lille hvidt element, der skal forestille telefonens startknap, ind fra venstre, med samme funktionsmåde som ørestykket og vises også oven på mobiltelefonens kontur i designet.
7. Derefter glider en lys firkantet grafik med svagt farveløb lodret fra hvidt til lysegråt. Den bruger fanen Bevægelse i panelet Rulleeffekter til at flytte i position, så den passer perfekt ind i det gennemsigtige midterområde af mobiltelefonens kontur. Den forbliver i position og skal forestille telefonens display. Displayelementet (phone-screen.png) er placeret nederst i panelet Lag, så det vises bag alle andre elementer i sidedesignet.
8. Et sæt af fire rektangler (fyldt med rene blå, grønne, gule og røde farver) flytter derefter i position. For at skabe indtryk af, at brikkerne samles, er rektanglerne indstillet til forskellige retninger og hastigheder under fanen Bevægelse i panelet Rulleeffekter. Det blå rektangel flyttes nedad og mod venstre, det grønne og det gule rektangel lyttes opad og mod højre, mens det røde rektangel flyttes opad og mod venstre i sektionerne Første bevægelse. I sektionen Sidste bevægelse har alle rektanglerne indstillingen 0 for begge retninger, så hvert element ser ud til at være fastgjort på stedet, når det når dets endelige destination oven på mobiltelefonens display.
9. Når alle andre brikker er samlet, flyttes endnu et tekstfelt opad og placeres under det første tekstfelt med en hastighed af ,5 gange (halvdelen) sidens rullehastighed.

Endelig mangler der to elementer nederst: Et ensfarvet rektangel, der er fyldt med samme rene farve som siden (så det er usynligt i designet) og en gruppe af objekter (et gult rektangel med en lyspæregrafik) bag det.

Det ensfarvede rektangel er der for at skjule en gruppe, som er anbragt bag det.

10. Rektanglet er reelt fastgjort på stedet og flyttes aldrig, fordi alle værdierne i både felterne Første bevægelse og Sidste bevægelse er indstillet til 0. Når siden rulles til nøglepositionen for gruppen, der indeholder lyspæregrafikken, flyttes den til venstre og bliver synlig, da den ikke længere er skjult af rektanglet ovenpå. Lyspæregruppen er placeret på et højere lag end mobiltelefonens displayelement, men under mobiltelefonens kontur, så lyspæregrafikken ser ud til at blive viftet på plads (minder om ægte telefonovergang, når der viftes vandret). Lyspæregruppen dækker farveforløbsrektanglet, der tidligere repræsenterede telefonens display.

Som du kan se i dette eksempel, kan du bruge en kombination af en meget høj side, en række elementer, der er placeret strategisk på lag i panelet Lag, og fanen Bevægelse i panelet Rulleeffekter til at skabe en illusion af brikker, der samles i en animation, når siden rulles ned.

Glidende menu

Denne glidende menueffekt bruger mange af de samme konventioner, som er beskrevet i piece-by-piece-effekten. Elementerne ser ud til at flyve ind ved hjælp af fanen Bevægelse i panelet Rulleeffekter, og rektangler skjuler nogle af elementerne, indtil de er klar til at blive vist i sidedesignet.

Dette eksempel bruger strategisk placerede grupper af rektangler til at oprette udseendet af et komplekst vinkeldesign.

Vis eksempelwebsitet i en browser for at se flyet glide vandret hen over siden fra højre mod venstre efterfulgt af et sæt stiliserede menupunkter og en farveforløbsbaggrund med diagonale striber.

Følg disse trin for at skabe en lignende glidende effekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 4,665 pixels.
2. Flybilledet er placeret på et lag over alt andet indhold på siden, så det står øverst på listen i panelet Lag. Det er indstillet, så det kan flyttes til venstre både før og efter sin nøgleposition i fanen Bevægelse på panelet Rulleeffekter.
   

3. Fire tekstrammer er konfigureret til at flyve ind i venstre side og blive stablet lodret for at oprette navigationsmenuen. Under fanen Bevægelse i panelet Rulleeffekter har alle tekstrammer samme hastighed (1,25 gange rullehastigheden) i sektionen Første bevægelse. Hver tekstramme har egen nøgleposition. Når siden rulles ned, glider de enkelte tekstrammer i position og justeres i venstre side af designet. Alle tekstrammerne har værdierne 0,0 i sektionen Sidste bevægelse, så menupunkterne forbliver i position, når de er på plads.
4. Tekstrammerne er udfyldt med en ren baggrundsfarve, selvom de ved første øjekast ser ud til at være billeder, fordi de vises med diagonalt skårne sider i stedet for lige lodrette kanter. Denne effekt opnås ved at lægge en gruppe bestående af tre rektangler over tekstrammerne, som er fyldt med samme fyldfarve som browserens.

5. Tekstrammens animation er først skjult af en anden gruppe af rektangler, fordi tekstrammerne er placeret under gruppen i panelet Lag. Gruppen består af en kombination af tre rektangler: et større rektangel med en vertikal gradient og to andre mindre rektangler (en firkant og en roteret), som er fyldt med en ens farve, der passer til den øverste farve på gradienten.

6. Hvis du ruller ned for at se bunden af gruppen, vil du se en serie af fire yderligere rektangler med varierende bredder, der er drejet og tilpasset over det nederste højre hjørne af det store gradientrektangel.
   

Grupper er glimrende til at kombinere et sæt af elementer og styre dem som et enkelt element. I dette eksempel er der anvendt bevægelse med rulleeffekter på forskellige rektangler for at få gruppen til at bevæge sig som en samlet helhed.

Dette eksempel illustrerer også kreativ brug af negativ plads. Hvis browserfyldet har en ren baggrundsfarve, kan du skabe en række spændende udskæringseffekter ved at lagdele rektangler, der er fyldt med samme farve, oven på andre rektangler. I stedet for at designe grafik i et billedbehandlingsprogram og placere et enkelt billede på siden kan du bruge rektangler til at konstruere grafik i Muse-arbejdsrummet.

Udtoning

Dette eksempel på en animeret solopgang og solnedgang skabes via en kombination af to rulleeffekter: bevægelse og opacitet. Dette eksempel viser en sidebaggrund med farveforløbsfyld og et enkelt placeret PNG-billede af solen. PNG-billedet indeholder gennemsigtige arealer, så baggrundssidens fyldfarve er synlig.

Gennemgå eksempelwebsitet i en browser for at se, hvordan solen toner ind fra 100 % gennemsigtighed for at flytte hen over siden. På toppen er den helt uigennemsigtig, men når du ruller videre ned ad siden, går solen ned og bliver gradvist mere gennemsigtig igen, indtil den toner ud.
Følg disse trin for at skabe en lignende toningseffekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en større værdi end det gennemsnitlige skærmdisplay, så siden kan rulles. I eksemplet på websitet er sidens minimumhøjde indstillet til 2.988 pixels.
2. Billedet af solen er placeret i midten af siden. Under fanen Bevægelse i panelet Rulleeffekter er nøglepositionen indstillet til 1410 pixels. Bemærk også indstillingerne for sektionerne Første bevægelse og Sidste bevægelse.

Disse indstillinger får solen til at bevæge sig i en halvcirkelbane, der buer fra nederste venstre hjørne af siden op til midten (hvor nøglepositionen nås) og derefter ned igen til nederste højre hjørne af siden.

3. Klik på fanen Opacitet, mens solen er markeret, for at se indstillingerne. Toningsposition 1 er indstillet til 726 pixels (over solen). Toningsposition 2 er indstillet til 1925 pixels (under solen). Solen starter med 0 % opacitet (helt gennemsigtig) og bliver derefter helt uigennemsigtig, når siden rulles til dens nøgleposition. Idet en side ruller ned forbi solens centrale position, flyttes uigennemsigtigheden fra 100 % til 0 % opacitet for at oprette en fade ind- eller fade ud-effekt.
   

4. Test siden ved at vælge Filer > Forhåndsvisning af side i browser. Rul på siden for at se solen stige, mens den tones ind, og derefter gå nedad mod højre, mens den tones ud.
5. Luk browseren, og vend tilbage til Muse-arbejdsrummet.

Edge Animate

Dette eksempel viser, hvordan du kan styre OAM-filer, der er eksporteret fra Adobe Edge Animate, ved hjælp af rulleeffekter. I dette eksempel er siden udfyldt med et lodret farveforløb, der begynder med en lys turkis farve og overgange til en mørkeblå farve.

En kombination af anvendte indstillinger under fanerne Bevægelse og Edge Animate skaber denne animerede effekt.

Tre forekomster af samme OAM-fil er placeret vandret side om side for at oprette en række animerede kompasser. Når du får vist eksempelwebsitet i en browser, bevæges alle tre kompasser opad, bliver synlige og forbliver i position. De tre kompasser ser ud til at dreje med forskellige hastigheder, men det er indstillingerne i panelet Rulleeffekter og ikke konstruktionen af Edge Animation-filen, der får dem til at dreje med forskellige hastigheder.

Følg disse trin for at oprette en lignende effekt med tre placerede OAM-filer:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 7465 pixels.
2. Marker alle tre forekomster af kompasset på siden. Under fanen Bevægelse i panelet Rulleeffekter kan du se, at alle tre OAM-filer har samme nøgleposition og bevægelsesindstillinger, fordi alle værdierne vises.

Hvis du får vist eksemplet i en browser, kan du se alle tre OAM-elementer springe op samlet og blive stående på række, som om de er fastgjort.

3. Klik uden for kompasserne for at fravælge dem alle, og marker derefter kun kompasset til venstre. Tryk på og hold Skift-tasten nede, mens du markerer kompasset til højre, så begge er markeret. Åbn fanen Edge Animate i panelet Rulleeffekter for at gennemgå indstillingerne.

De to sidekompasser er begge konfigureret til at gå i løkke gennem tidslinjeanimationen og gå videre til næste billede, hver gang siden rulles 350 pixels ned.

4. Fravælg de to yderkompasser. Marker midterkompasset, og se igen under fanen Edge Animate, hvor feltet Skift billede hver er indstillet til 400 pixels. Denne indstilling får midteranimationen til at bevæge sig langsommere end de to yderkompasser.

Du kan oprette interessante animationseffekter ved at variere hastigheden af flere placerede Edge Animate-animationer i forhold til rullehastigheden af siden. Du kan f.eks. oprette en fiskestime, en himmel med skyer i bevægelse eller andre effekter ved at tilføje flere gentagelser af samme OAM-fil med forskellige anvendte indstillinger for rulleeffekt.

Diasshow-effekt

Du kan styre, hvordan sættet af billeder i en diasshow-widget vises i forhold til, hvordan siden rulles. Det involverer tilføjelse af en diasshow-widget på en side og derefter brug af fanen Diasshow i panelet Rulleeffekter til at opdatere diasshow-indstillingerne.

I dette eksempel er diasshowet udfyldt med en række billeder, der opretter en 360-graders roterende visning af en rygsæk. Du kan tage lignende diasshow-billeder ved at opstille et stativ og tage et foto af et objekt, der er placeret på en roterende stander. Denne effekt er velegnet til visning af en interaktiv produktbeskrivelse, der hjælper potentielle kunder med at se en vare fra alle vinkler, før de køber den.

Følg disse trin for at skabe en lignende effekt ved hjælp af en diasshow-widget:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 7.465 pixels.
2. En tekstramme med ordene Superpack er konfigureret til at bruge rulleeffekter. Konfigurer under fanen Bevægelse indstillingerne for Første bevægelse, så teksten flyttes ind fra venstre mod højre med samme hastighed, som siden rulles. I indstillingen Sidste bevægelse er begge retninger indstillet til 0, således at tekstrammen forbliver i sin position, som om den var fastgjort til siden.
   

3. Åbn Widgets-biblioteket, og træk en diasshow-widget til midten af siden til højre for tekstrammens endelige destination.
4. Brug indstillingen Tilføj billeder i menuen Indstillinger til at udfylde diasshowet med billedfiler. 

Mens diasshowet er markeret, kan du markere diasshow-widgeten og bruge funktionen Fastgør i kontrolpanelet til at fastgøre diasshowet i dets position. Du kan også eksperimentere ved at tilføje en diasshow-widget i fuld skærm og styre den med rulleeffekter. 

5. Åbn fanen Diasshow i panelet Rulleeffekter, mens diasshowet er markeret, og aktiver afkrydsningsfeltet Diasshow.
6. Træk enten T-håndtaget, eller indtast en værdi i feltet for at angive nøglepositionen. I dette eksempel er nøglepositionen indstillet til 1066 pixels.
7. Aktiver alternativknappen Skift dias hver, og indstil feltet nedenunder til 50 pixels.
   

8. Test siden i forhåndsvisningen eller en browser. Rul ned på siden for at se rygsækken rotere. Du kan også oprette billeder, der ser ud til at flyve opad eller falde nedad, ved at udfylde diasshowet med en række næsten ens, men lidt anderledes billedfiler, der minder om rammer i animeret GIF-format.
9. Efter test af rulleeffekterne skal du gå tilbage til visningen Design i Muse for at fortsætte redigeringen af siderne.
   

Oprulning

Med rulleeffekter kan du oprette en meget lang side, der er inddelt i sektioner med vidt forskellige udseender. Når den besøgende ruller ned på en side, er der overgang mellem sidesektioner, der ser ud til at rulle opad, med animerede teksteffekter og skillelinjer, der er oprettet med en skyggeeffekt.

Du kan bruge ankermærker eller bare tilføje en note, der opfordrer de besøgende til at rulle ned på siden for at se de andre sektioner. Når du kommer til bunden af eksempelwebsitet og klikker på knappen Top, kan du se hele siden flimre forbi, mens ankermærket vender tilbage til toppen af sidedesignet.

Følg disse trin for at skabe en lignende oprulningseffekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 16.990 pixels.
2. I menuen Browserfyld skal du indstille browserens fyldfarve til en ensfarvet blå.

3. Brug menuen Fyld, mens hele siden er markeret, til at indstille sidefarven til Ingen, så den blå browserfyldfarve skinner igennem.
4. Rul ned på siden til ca. 2248 pixels fra toppen. Brug rektangelværktøjet til at tegne et rektangel, der er 3000 pixels bredt gange 2000 pixels højt. Brug markeringsværktøjet til at centrere rektanglet på siden, så begge sider går længere ud end siderne af browservinduet.
5. Brug menuen Fyld til at angive en ren grøn fyldfarve, mens rektanglet stadig er markeret. Brug menuen Effekter til at indstille en skyggeeffekt.

6. Aktiver, mens det grønne rektangel er markeret, afkrydsningsfeltet Bevægelse under fanen Bevægelse i panelet Rulleeffekter. Klik på og træk i T-håndtaget, og skjul det, hvor den centrale placering er angivet på den øverste kant af det rektangel, der er 2248 pixels i eksempelwebsitet.

7. Brug sektionen Første bevægelse til at indstille rektanglet til at flytte nedad med en hastighed af 1,5 gange rullehastigheden. Indstil alle andre retninger til 0.
8. Brug tekstværktøjet til at oprette et tekstfelt nær toppen af det grønne rektangel. I dette eksempel indeholder tekstfeltet: This is the roll-up. Du kan indtaste dit eget tekstindhold og anvende den ønskede tekstformatering.
9. Aktiver, mens tekstrammen er markeret, fanen Bevægelse i panelet Rulleeffekter. Træk i T-håndtaget for at tilpasse det til den øverste kant af det grønne rektangel, og opdater indstillingerne for at styre, hvordan tekstrammen vises baseret på siderulning.

10. Indstil den første nedadgående bevægelse til 1,5 gange rullehastigheden. Indstil alle andre værdier i panelet til 0. Det flytter tekstfeltet nedad i samme retning og med samme hastighed som det grønne rektangel. Både rektanglet og tekstrammen forbliver i position, når siden rulles forbi deres nøglepositioner.
11. Hvis du klikker på Vis, kan du rulle ned for at se, hvordan det grønne rektangel og tekstfeltet rulles ned fra toppen og bliver synlige. Klik på Design, når du er færdig med testen, for at fortsætte redigeringen af siden.
12. Brug menuen Vis til at zoome ud til 10 % af websitets design. Marker det grønne rektangel og tekstfeltet. Tryk på og hold Alternativ-/Alt-tasten nede, mens du trækker de to elementer længere ned på siden, for at dublere dem. Indstil fyldfarven på det dobbelte rektangel til mørkeblå, og brug tekstværktøjet til at opdatere teksten.

I dette eksempel indeholder den dublerede tekstramme teksten: Use it to drastically alter the appearance of your website. Du kan dog indtaste en valgfri tekst for at identificere sidens mørkeblå sektion.

13. Brug markeringsværktøjet til at placere det dublerede rektangel og den dublerede tekstramme ca. 5.448 pixels ned fra toppen af siden.
14. Tjek fanen Bevægelse i panelet Rulleeffekter, mens det blå rektangel er markeret. Nøglepositionen er automatisk opdateret til rektanglets nye placering (5.448px), og den nedadgående retning i sektionen Første bevægelse er stadig indstillet til en hastighed af 1,5 gange rullehastigheden (og alle andre værdier er indstillet til 0). Hvis du tjekker den dublerede tekstramme, kan du se, at rulleeffekterne også er bevaret for det dublerede element.
15. Gentag trin 12 og 13 fire gange til for at oprette i alt seks forskellige store rektangler med tekstrammer ovenover. Hvert rektangel har de indstillinger af skyggeeffekt og rulleeffekt, der allerede er anvendt. Placer de sidste fire rektangler i følgende nøglepositioner: 8.648 pixels, 11.852 pixels, 15.058 pixels og 18.251 pixels, så hver sektion er adskilt af ca. 1.200 pixels.
16. Brug menuen Fyld til at indstille fyldfarven af rektanglerne til forskellige farver. Eksperimenter ved at anvende både rene farver og farveforløb i fyld for at gøre hver sektion anderledes end resten og skabe kontrast til dem.
17. Brug tekstværktøjet til at opdatere tekstindholdet for hver sektion. Du kan f.eks. ændre dem til at afspejle baggrundsfarven for rektanglet nedenunder: Dette er den blå sektion.
18. Test siden ved at vælge Filer > Forhåndsvisning af side i browser. Rul siden for at se de forskellige sidesektioner, som bliver afløst af den næste sidesektion.
19. Luk browseren, og vend tilbage til Muse-arbejdsrummet.
    

Dynamisk tekst

Du kan oprette usædvanlige typografiske design med en kombination af rulleeffekter for bevægelse og Adobe Edge-webskrifttyper. Med webskrifttyper kan du formatere tekst ved hjælp af en bred vifte af skrifttyper, der indlæses sammen med siden. I stedet for at placere og animere billeder af tekst, der er oprettet i et billedbehandlingsprogram, kan du oprette sider, der ser pæne ud og er lettere at opdatere med Edge-webskrifttyper. Og rulleeffekterne giver en iøjnefaldende fornemmelse af animation, når siden rulles ned.

Følg disse trin for at skabe en lignende effekt ved hjælp af dynamisk tekst:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 4.854 pixels.
2. Indstil sidens fyldfarve til Ingen. Browserens fyldfarve spiller ingen rolle, fordi siden bliver dækket af et langt rektangel i næste trin.
3. Brug rektangelværktøjet til at tegne et rektangel, der er 1.159 pixels bredt gange 4.854 pixels højt. Brug menuen Fyld til at udfylde rektanglet med en ren farve eller farveforløbsfarve. I dette eksempel er en forløbsfarve fra blågrøn til fuchsia anvendt som fyld. Brug markeringsværktøjet til at centrere rektanglet, så det udfylder hele browserområdet. Hvis det ønskes, kan du zoome ud for at sikre, at rektanglet er centreret på siden.

4. Når du har centreret rektanglet, skal du stille forstørrelsen i menuen Vis tilbage til 100 %.
5. Brug tekstværktøjet i venstre side til at oprette en række tekstrammer. I dette eksempel er der i alt fem tekstrammer. Indholdet af hver tekstramme er vist nedenfor, men du kan frit indtaste din egen tekst i hver ramme:
   • Five Frames
   • Scrolling
   • At Different Speeds Will
   • Create
   • Dynamisk spænding

Du kan som et valgfrit ekstra trin dublere nogle af tekstrammerne og derefter anvende lidt anderledes formatering. I dette eksempel er tekstrammen med ordet Create dubleret, og derefter er de to forekomster lagt oven på hinanden for at skabe en lyseblå slagskyggeeffekt.

6. Brug tekstværktøjet til at markere hver enkelt tekstramme. Brug panelet Tekst (eller indstillingerne for tekstformatering i kontrolpanelet) til at anvende forskellige webskrifttyper, skriftstørrelser, farver og andre typografiske indstillinger for at gøre hver ramme unik.
7. Marker alle tekstrammerne. Åbn derefter fanen Bevægelse i panelet Rulleeffekter, mens de er markeret. Indtast den samme numeriske værdi for at angive nøglepositionen for alle de markerede tekstrammer samtidig. (I dette eksempel er nøglepositionen indstillet til 1372 pixels). Indstil også den vandrette retning for både sektionen Første bevægelse og Sidste bevægelse til Højre. Indstil alle de lodrette retninger for sektionen Første bevægelse og Sidste bevægelse til 0, så tekstrammerne ikke bevæges lodret.
8. Klik uden for tekstrammerne, og klik derefter på hver tekstramme for sig. Indtast lidt anderledes værdier for de enkelte tekstrammer. På nedenstående liste er den første værdi den første bevægelseshastighed, mens den anden værdi er den sidste bevægelseshastighed for vandret retning (mod højre):
   • Fem rammer: ,9x, ,1x
   • Rulning: ,12x, ,5x
   • Ved forskellige hastigheder: ,7x, ,17x
   • Skabe: 1,1x, ,005x
   • Dynamisk spænding.: 1x, ,01x
     

9. Brug tekstværktøjet til at oprette et tekstfelt, og skriv tallet 5 i højre side af siden. Du kan igen vælge at dublere tekstrammen og derefter anvende forskellige farver og tekstformater for at give indtryk af facetkanter og slagskygger. Hvis du opretter dubletter af tekstrammer til designformål, skal du samle tekstrammerne i en gruppe, så du kan anvende rulleeffekter på gruppen.
10. Aktiver, mens tekstfeltet med tallet 5 er markeret, afkrydsningsfeltet Bevægelse under fanen Bevægelse i panelet Rulleeffekter. Indstil nøglepositionen numerisk, eller træk T-håndtaget (i dette eksempel er den 1425 pixels). Brug sektionen Første bevægelse til at indstille elementet til at flytte mod venstre 1 gange rullehastigheden. Brug sektionen Sidste bevægelse til at indstille elementet til at flytte mod venstre ,01 gange rullehastigheden.
11. Test siden ved at vælge Filer > Forhåndsvisning af side i browser. Rul siden for at se de fem tekstrammer flytte ind på siden fra venstre, mens tekstrammen med tallet 5 flyttes ind fra højre side. Rul op og ned for at se de animerede tekstrammer.
12. Luk browseren, og vend tilbage til Muse-arbejdsrummet.
     

Stablet menu

Du kan oprette spændende interaktiv webnavigation med rulleeffekter, så de forskellige knapper flyver ind i det synlige område af siden og derefter justeres for at skabe en menulinje. I dette eksempel bevæges de fire overgangsknapper op fra bunden af siden, når den rulles, og låses i position for at fremvise en lodret menulinje.

Når de fire knapper er justeret, flyver baggrundsindhold (i form af en lyspæregrafik, et farvelagt baggrundsareal, en tekstramme og diagonale hjørnestriber) ind fra begge sider for at oprette en sektion af websitet.

Knapperne har ikke links i dette eksempel, med du kan oprette links efter behov i menuen Hyperlink, så de besøgende kan klikke på dem for enten at indlæse en ny side eller bruge ankermærker til at springe til et andet sted på den aktuelle side.

Følg disse trin for at skabe en lignende stablet menueffekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 7465 pixels.
2. Indstil sidens fyldfarve til ingen, og indstil browserens fyld til en ren fyldfarve. I eksempelwebsitet er browserfyldet indstillet til en lys gyldenbrun farve.
3. Brug tekstværktøjet til at oprette en ny tekstramme. Skriv ordet Home. Brug formateringsindstillingerne i kontrolpanelet til at føje en baggrundsfarve til tekstrammen. Opdater også formateringsindstillingerne for at give teksten det ønskede udseende. Brug håndtagene på begge sider af knappen til at udvide bredde og højde til ca. 300 pixels i bredden og 115 pixels i højden.

4. Åbn panelet Tilstande. Vælg Overgangstilstand, og tilføj en anden fyldfarve (eller tilpas som ønsket) for at lave en overgangsknap.

5. Vælg igen den normale tilstand, når du har opdateret overgangstilstanden.
6. Åbn fanen Bevægelse i panelet Rulleeffekter. Aktiver afkrydsningsfeltet Bevægelse, mens knappen er markeret. Indstil nøglepositionen ved at trække T-håndtaget eller indtaste en numerisk værdi. Indstil også sektionen Første bevægelse til at flytte opad med en hastighed af 75 gange rullehastigheden. Lad alle andre felter være indstillet til 0.

7. Tryk på og hold Alternativ-/Alt-tasten nede, mens du trækker Home-knappen længere ned på siden. Det opretter en dublet af knappen. Sørg for, at dubletten er justeret lodret med den oprindelige Home-knap. Når de to elementer er justeret, og dubletten stadig er markeret, vises mørkeblå autohjælpelinje midlertidigt i midten.

8. Flyt den dublerede knap nedad på siden til ca. 460 pixels under originalknappen.
9. Gentag trin 7 og 8 for at dublere knappen to gange mere og oprette i alt fire knapper med lige stor afstand på siden. Brug tekstværktøjet til at redigere den anden, tredje og fjerde knap fra toppen for at opdatere tekstindhold ved hjælp af disse etiketter: Produkter, Billeder, Kontakt os.

Da du dublerede den første Home-knap, kopierede du formateringen af tekstrammen og dens indhold sammen med indstillingerne for rulleeffekter. Hvis du markerer en af de dublerede knapper, kan du i panelet Rulleeffekter se, at indstillingerne under fanen Bevægelse matcher de indstillinger, der er anvendt på Home-knappen, og nøglepositionen for hver knap er 460 pixels under den forrige knap (samme afstand som mellem hver knap på siden).

10. Beregn den samlede højde af de fire knapper, når de er justeret i deres endelige positioner, ved at lægge højden sammen med afstanden. I eksempelwebsitet er hver knap 116 pixels høj, og der er 4 pixels afstand mellem hver knap. Det betyder, at den samlede højde af den lodrette menulinje (når den er samlet) er 476 pixel. Brug rektangelværktøjet til at tegne et rektangel, der har den ønskede bredde af sidesektionen og samme højde som menulinjen. I dette eksempel er rektanglet 931 pixels bredt gange 476 pixels højt.
11. Hvis du vil kopiere designet i eksempelwebsitet, kan du indstille rektanglets fyldfarve til bleg pink i en lysere nuance end knappernes normale tilstand. Du kan også oprette runde hjørner ved at indtaste en værdi for hjørneradius i kontrolpanelet. I dette eksempel er alle fire hjørner indstillet til 10 pixels.

12. Brug markeringsværktøjet til at justere rektanglet, så dets øverste kant er ca. 5094 pixels fra toppen af siden. Sørg også for, at venstre side af rektanglet er lodret justeret med venstre side af knapperne. I eksempelwebsitet er rektanglet og knapperne 14 pixels fra venstre side af siden. Du kan se disse indstillinger, når du markerer et element og åbner panelet Transformer. X-værdien er afstanden fra venstre side (14 pixels), og Y-værdien er afstanden fra toppen af siden (5094 pixels).
13. Åbn panelet Rulleeffekter, mens rektanglet er markeret, og aktiver afkrydsningsfeltet Bevægelse under fanen Bevægelse. Indstil nøglepositionen til 4979.
14. Indstil Første bevægelse til at flytte mod højre med en hastighed af 1 gange rullehastigheden. Lad alle andre felter i fanen Bevægelse være indstillet til 0.

15. Sørg for, at rektanglet er placeret bag de fire knapper, ved at vælge Objekt > Placer bagest, mens rektanglet er markeret.
16. Vælg Filer > Placer, og naviger for at vælge en billedfil, og klik derefter én gang på siden for at placere den. I dette eksempel er en PNG-fil med gennemsigtighed placeret for at vise et lyspærebillede. Lyspæren er placeret oven på det store rektangel til højre for det areal, der dækkes af menuknapperne. I dette eksempel er billedet placeret 501 pixels fra venstre (X-position) og 5245 pixels fra toppen af siden (Y-position).
17. Sørg for, at det placerede billede er arrangeret bag de fire knapper, ved at vælge Objekt > Placer bagest, mens billedet er markeret. Formålet er at vise det placerede billede oven på det store rektangel, men bag de fire knapper.
18. Åbn fanen Bevægelse i panelet Rulleeffekter, mens det placerede billede er markeret, og aktiver afkrydsningsfeltet Bevægelse. Indstil nøglepositionen til den ønskede værdi. I dette eksempel er den indstillet til 4979 pixels.
19. Brug sektionen Første bevægelse til at indstille den højre værdi til at flytte med en hastighed af ,75 gange rullehastigheden. Indstil alle andre retningsværdier til 0.

20. Brug tekstværktøjet til at oprette en tekstramme. I eksempelfilen har tekstrammen følgende indhold: Stack linked text frames with high contrast roll-overs to create unusual menus. Du kan dog frit indtaste den ønskede tekst. Brug formateringsindstillingerne i kontrolpanelet til at formatere teksten efter behov. I dette eksempel er der ikke anvendt baggrundsfyldfarve på tekstrammen.
21. Brug markeringsværktøjet til at placere tekstrammen til højre for det placerede billede. I dette eksempel er tekstrammen indstillet til en X-værdi af 357 pixels (fra venstre) og en Y-værdi af 5136 pixels (fra toppen). Den faktiske placering afhænger af tekstindholdet og de formateringsindstillinger, du anvender på tekstrammen.
22. Sørg for, at tekstrammen er markeret, og brug indstillingen Objekt > Flyt bagud til at arrangere den, eller flyt den i panelet Lag, så tekstrammen vises bag de fire knapper, men oven på det store rektangel.
23. Aktiver afkrydsningsfeltet Bevægelse i panelet Rulleeffekter. Indstil nøglepositionen ved at trække T-håndtaget eller indtaste en værdi. I eksempelwebsitet er nøglepositionen indstillet til 4979 pixels, der er samme nøglepositionsværdi som for det placerede billede (lyspæregrafik).
24. Brug sektionen Første bevægelse til at indstille tekstrammen til at flytte mod venstre med en hastighed af ,5 gange rullehastigheden. Indstil alle andre felter til 0.

Den grundlæggende stablede menusektion er nu færdig. Der er dog endnu et designelement, du kan tilføje. Det involverer tilføjelse af flere roterede rektangler over nederste højre hjørne af det store rektangel på samme måde, som eksemplet Glidende menu brugte roterede rektangler til at skabe en diagonal stribeeffekt.

25. Brug rektangelværktøjet til at tegne flere rektangler af varierende bredde. Udfyld rektanglerne med samme farve som den baggrundsfarve, der er anvendt på browserfyldet. På denne måde vil rektanglerne ikke være synlige, før det store rektangel flytter til højre og på plads bag dem. Hvis du vil, kan du gruppere de diagonale rektangler, så du kan arbejde med dem som et enkelt element.

26. Du kan efter behov bruge panelet Lag eller vælge Objekt > Placer bagest for at arrangere det største rektangel, så det vises bag alle andre elementer på siden.
27. Sørg for at teste dit arbejde jævnligt ved at klikke på Vis eller se en forhåndsvisning af siden i en browser og rulle ned for at se den stablede menu flytte i position. Vend tilbage til Muse, når du er færdig med at teste.

Bevægelig baggrund

Du kan skabe en bevægelig baggrundseffekt ved at oprette en række store rektangler, der er udfyldt med fliseinddelte baggrundsbilleder, som dækker længden af en lang side. Dette eksempel bruger fanen Rul i menuen Fyld (i stedet for fanen Bevægelse i panelet Rulleeffekter) til at anvende bevægelsesindstillingerne.

Følg disse trin for at skabe en lignende bevægelig baggrundseffekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 6254 pixels.

2. Brug rektangelværktøjet øverst på siden til at tegne et stort rektangel. I dette eksempel er rektanglet 1159 pixels bredt gange 1312 pixels højt. Brug markeringsværktøjet til at centrere rektanglet på siden, så begge sider går længere ud end siderne af browservinduet.
3. Brug menuen Fyld til at angive et baggrundsbillede, mens rektanglet stadig er markeret. Indstil menuen Tilpasning til Flise for at fliseinddele vandret.

4. Du kan evt. bruge menuen Effekter til at angive en skyggeeffekt for at oprette en iøjnefaldende kant omkring rektanglet.
5. Åbn fanen Rul i menuen Fyld, mens det fyldte rektangel er markeret. Aktiver afkrydsningsfeltet Bevægelse, og træk derefter T-håndtaget, eller indtast et tal i feltet for at angive nøglepositionen. I eksempelwebsitet er nøglepositionen indstillet til 512 pixels. Du kan dog skjule håndtaget for at justere den med den øverste kant af rektanglet, hvis du vil.
6. Brug sektionen Første bevægelse til at indstille retningen til at flytte ned mod venstre, og indstil begge hastigheder til ,2 gange rullehastigheden. Gentag de samme indstillinger i sektionen Sidste bevægelse.

7. Gentag trin 2 - 6 for at oprette et fyldt rektangel mere. Placer det nye rektangel lige under det første rektangel, du har oprettet, så ingen af browserfyldarealerne skinner igennem, og der ikke er nogen afstand mellem de to rektangler. Fyld det nye rektangel med en anden fliseinddelt billedbaggrund.
8. Gentag trin 7 for at oprette et tredje stort rektangel, der er placeret lige under det andet rektangel. Brug menuen Fyld til at angive et andet fliseinddelt baggrundsbillede. Det kan være nyttigt at zoome ud ved hjælp af menuen Vis for at se alle rektangler og tilpasse dem vertikalt på siden.

9. Åbn fanen Rul i menuen Fyld, mens det andet rektangel er markeret. Opdater sektionen Første bevægelse til at flytte rektanglet mod højre med en hastighed af 3 gange rullehastigheden. Brug sektionen Sidste bevægelse til at anvende de samme indstillinger for at flytte rektanglet mod højre med en hastighed af 3 gange rullehastigheden. Lad begge lodrette retningsfelter være indstillet til 0.

10. Marker det tredje rektangel, og opdater indstillingerne under fanen Rul i menuen Fyld. Indstil sektionen Første bevægelse til at flytte opad med en hastighed af ,25 gange rullehastigheden og mod venstre ,6 gange rullehastigheden. Anvend de samme indstillinger i sektionen Sidste bevægelse for det tredje rektangel.
11. Test siden ved at vælge Filer > Forhåndsvisning af side i browser. Rul siden for at se de flisedelte rektangler komme til syne og flytte diagonalt, indtil du ruller ned til bunden af siden. Når du ruller opad, bevæges rektanglerne også fortsat.
12. Luk browseren, og vend tilbage til Muse-arbejdsrummet.

Masker

I dette eksempel ser et bjælkediagram ud til at blive animeret på plads. En pink pilegrafik snor sig opad over og bag bjælkerne i diagrammet. Selvom bjælkerne i diagrammet set ud til at vokse sig højere fra bunden af diagrammet, er de faktisk ensfarvede rektangler med anvendt bevægelse via rulleeffekter, der dukker frem bag de større hvide rektangler (fyldt med samme rene hvide farve som sidens baggrundsfarve).

Dette eksempel bruger flere teknikker sammen med rulleeffekter. Elementerne er arrangeret oven på og bagved hinanden i panelet Lag. Hvide rektangler tegnes oven på diagramelementerne. Når de hvide rektangler dækker bjælkediagrammet, er bjælkerne og pilen usynlige, som om de er maskeret. De hvide rektangler og diagramtabellen er indstillet til 0 i bevægelsens rulleeffekter for at forblive i position, mens siden rulles. Bjælkerne og den pink pilegrafik, der er placeret i laget nedenunder, har anvendte rulleeffekter for bevægelse, som får dem til at flytte op og komme til syne, når bjælkediagrammet sammensættes.

Følg disse trin for at skabe en lignende maskeeffekt:

1. Vælg Side > Sideegenskaber i visningen Design. Indstil feltet Min. højde til en meget højere værdi. I eksemplet på websitet er sidens minimumhøjde indstillet til 6076 pixels.
2. Indstil både side- og browserfyld til en ren hvid farve (eller den ønskede farve - men brug samme farve til at udfylde maskerektanglerne senere).
3. Brug rektangelværktøjet til at tegne et stort rektangel på siden. I dette eksempel er rektanglet 804 pixels bredt gange 489 pixels højt.
4. Indstil rektanglets fyldfarve til Ingen. Angiv den ønskede stregfarve. Brug menuen Streg til at indstille den venstre og nederste side af rektanglet til at vise en streg med styrken 20, mens den øverste og højre side skal indstilles til 0 for at skjule stregen. Dette danner grundlaget for søjlediagrammet.
   

5. Åbn fanen Bevægelse i panelet Rulleeffekter, mens rektanglet er markeret. Indstil nøglepositionen, og angiv 0 i alle fire felter. Denne indstilling betyder, at rektanglet ikke vil bevæge sig, før eller efter den centrale position er nået, så elementet bliver på sin plads.

6. Brug rektangelværktøjet til at tegne to større rektangler. Tegn det første rektangel, så det er justeret med venstre side af diagrammet. I dette eksempel er rektanglet 657 pixels bredt gange 1810 pixels højt.
7. Tegn det andet rektangel under diagrammet for at justere det med dets nederste kant. I dette eksempel er rektanglet 1002 pixels bredt gange 1541 pixels højt.
8. Indstil fyldfarven for begge rektangler til hvid (eller samme farve som browserens fyldfarve) og stregen til 0. Brug markeringsværktøjet til at justere rektanglerne til to af diagrammets sider.
   

9. Højreklik på de markerede rektangler, og vælg Objekt > Grupper for at gruppere de to maskerektangler samlet.
10. Åbn fanen Bevægelse i panelet Rulleeffekter, mens gruppen af rektangler er markeret. Indstil nøglepositionen (i eksemplet er den 1516 pixels), og indtast 0 i alle fire felter. Denne indstilling betyder, at gruppen af hvide rektangler ikke flyttes, før eller efter nøglepositionen er nået. Gruppen bliver i position ligesom diagrammets ydertabel.
11. Brug panelet Lag til midlertidigt at skjule og låse gruppen.
12. Rul ned til pladsen under gruppen, og brug rektangelværktøjet til at tegne i alt fem rektangler, der alle har samme bredde. I eksempelwebsitet er alle bjælkerne 74 pixels brede med varierende højder. Fra venstre mod højre er højderne af de fem rektangler i eksemplet 141, 188, 292, 444 og 583. Alle rektangler er fyldt med den samme grønne farve som den stregfarve, der definerer den venstre nederste kant af diagrammet.

13. Placeringen af rektanglerne (fra venstre mod højre) er opstillet nedenfor efter deres X- og Y-værdier:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
14. Marker derefter alle rektanglerne ved at starte med rektanglet til venstre og arbejde mod højre. Marker hvert enkelt af dem, aktiver afkrydsningsfeltet Bevægelse under fanen Bevægelse i panelet Rulleeffekter, og indstil følgende nøglepositioner:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
15. Opdater indstillingerne i panelet Rulleeffekter, mens alle rektanglerne er markeret, så sektionen Første bevægelse flyttes opad med 1 gange rullehastigheden. Indstil alle andre felter til 0.
    

16. Placer en PNG-fil med gennemsigtighed på siden. I eksempelwebsitet er PNG-filen et grafikbillede med en pink pil, der zigzagger opad. PNG-filen i dette eksempel er 695 pixels bred gange 443 pixels høj. Når du har placeret den på siden, skal du flytte den til position X: 78 og Y: 3427.
17. I panelet Lag skal du arrangere PNG-filen under første og tredje rektangelbjælke (fra venstre), men over den anden, fjerde og femte bjælke.

18. Åbn fanen Bevægelse i panelet Rulleeffekter, mens pilebillede er markeret, og aktiver afkrydsningsfeltet Bevægelse. Indstil nøglepositionen (i dette eksempel er den 3238 pixels). Brug sektionen Første bevægelse til at indstille retningerne opad og mod højre, og angiv ,25 gange rullehastigheden i begge Første bevægelse-felter. Indstil begge felter i Sidste bevægelse til 0.

19. Brug panelet Lag til at vise og låse gruppen af de to hvide rektangler op, som du tidligere har skjult og låst. Flyt gruppen oven på de andre elementer, så den kan ses oven på sidens øvrige indhold. Da gruppen er øverst, fungerer den som en maske, der kun viser bjælkerne og pilegrafikken, når de flyttes opad inde i diagrammets ramme.
20. Test siden ved at vælge Filer > Forhåndsvisning af side i browser. Rul siden for at se bjælkediagrammet flytte i position, mens de to hvide rektangler, der maskerer bjælkerne, skjuler diagramelementerne, indtil de er inde i diagrammet.
21. Luk browseren, og vend tilbage til Muse-arbejdsrummet.

Eksempler på webdesign med rulleeffekter

Tjek Demential Lab for at se funktionen Rulleeffekter i aktion.