Finn ut hvordan du bruker rulleeffekter for å justere bevegelse og tetthet for sideelementer i Adobe Muse.

Merk:

Adobe Muse legger ikke lenger til nye funksjoner, og kundestøtte opphører 26. mars 2020. Hvis du vil ha detaljert informasjon og hjelp, kan du se siden for tjenesteopphør for Adobe Muse.

Bruke rulleeffekter på sideelementer

Rulleeffekter-panelet inneholder fire forskjellige faner som lar deg kontrollere bevegelse, tetthet, kontrollprogrammer for lysbildefremvisning og Adobe Edge Animate-innhold alt etter hvordan en side rulles. Når rulleeffekter brukes sammen med hverandre, og når noen av elementene også er festet, angitt til 100 % bredde og/eller plassert over og bak hverandre med Lag-panelet, kan du skape en lang rekke overbevisende effekter.

Bruke rulleeffekter for bevegelse med Rulleeffekter-panelet

Grensesnittet for Rulleeffekter-panelet er likt grensesnittet for rulleeffekterpanelet for webleserfyll og bakgrunnsfyll. Følg disse trinnene for å ta i bruk rulleeffekter på et sideelement ved hjelp av Bevegelse-fanen i Rulleeffekter-panelet:

  1. I Muse bytter du til Design-visningen og velger Side > Egenskaper for side
  2. Angi Minste høyde-verdien til minimum 2000 bildepunkter, for å være sikker på at siden er lang nok til å rulle. 
  3. Klikk OK for å lagre endringene, og lukk dialogboksen Egenskaper for side.
  4. I Design-visningen tegner du et rektangel eller en tekstramme på siden.
  5. Bruk Fyll-fanen i Fyll-menyen til å legge til et bakgrunnsbilde som ligger eller ikke ligger side ved side. Du kan også bare velge en heltrukket fyllfarge eller en graderingsfyllfarge.
  6. Velg Vindu > Rulleeffekter for å åpne Rulleeffekter-panelet.
Åpne Rulleeffekter-panelet for å få tilgang til rulleeffektinnstillingene.
Åpne Rulleeffekter-panelet for å få tilgang til rulleeffektinnstillingene.

  1. Aktivere Rulleeffekter: Bevegelse-fanen (helt til venstre) vises på Rulleeffekter-panelet. Velg elementet på siden, og kryss av for Bevegelse.

    TIPS: Legg merke til det T-formede håndtaket som når du merker av for Bevegelse, legges til i elementet og strekker seg utover den øverste kanten. T-håndtaket viser nøkkelposisjonen som er brukt for Rulleeffekten som er tatt i bruk på elementet. Rulleeffekten begynner å virke når en besøkende ruller til nøkkelposisjonen.

    T-håndtakkontrollen vises som standard over elementet. Men du kan klikke og dra håndtaket for å strekke det oppover, du kan dra det ned for å stille det på linje med den øverste kanten av elementet du kontrollerer, eller du kan dra det ned under elementet.

  2. Plassere T-håndtaket for å angi nøkkelposisjonen: Dra T-håndtaket for å angi nøkkelposisjonen. Slik kan du konfigurere bevegelsen som skal finne sted før og etter at den rullede siden treffer toppen av T-håndtaket.

    Du kan også angi en numerisk verdi i Nøkkelposisjon-feltet i midten av Rulleeffekter-panelet mens Bevegelse-fanen er aktiv. I bildet over er nøkkelposisjonen angitt til 200 bildepunkter. 

    Plasseringen av det T-formede håndtaket utgjør elementets nøkkelposisjon. Når siden rulles vertikalt, brukes innstillingene i Startbevegelse-delen, slik at elementets posisjon samsvarer med plasseringen som vist i Design-visningen.

    Når den besøkende ruller siden eller klikker en ankerkobling for å hoppe forbi elementets nøkkelposisjon, brukes innstillingene i Sluttbevegelse-delen.

    Startbevegelse-delen inneholder et sett med vertikale og horisontale retningspiler og hastighetsalternativer.

  3. Konfigurere startbevegelsens vertikale retning: Velge en vertikal retning (opp eller ned) ved å klikke en av de vertikale knappene. Angi en hastighetsverdi i feltet ved siden av de vertikale retningspilene for å angi bevegelsens hastighet i forhold til rullehastigheten på siden. Hvis du angir 0, vil ikke elementet bevege seg vertikalt. Du kan også angi en prosent ved å bruke et desimaltegn. Hvis du for eksempel angir 0,5, beveger elementet seg vertikalt halvparten så raskt som rullehastigheten på siden.

  4. Konfigurere startbevegelsens horisontale retning: Klikk på venstre- eller høyre-pilen for å angi den horisontale (bevegelse til venstre eller høyre) retningen elementet skal bevege seg i før det når nøkkelposisjonen. I feltet til høyre for de horisontale pilene angir du hastighetsverdien for den horisontale retningen. Hvis du ikke vil at elementet skal bevege seg horisontalt, angir du det første feltet for horisontal hastighet til 0.

  5. Gjenta trinn 7 og 8 for å angi bevegelsesretningen og -hastighetene for Sluttbevegelse-delen.

I eksempelet som vises nedenfor, er nøkkelposisjonen angitt til 500 bildepunkter. Når webleseren begynner å rulle, beveger elementet seg ned og i posisjon ved en hastighet på 1 ganger, dvs. ved en hastighet som er lik rullehastigheten på siden. Elementet ankommer sin posisjon mens siden ruller til nøkkelposisjonen. Når siden ruller forbi nøkkelposisjonen, beveger elementet seg til høyre to ganger raskere enn rullehastigheten på siden.

Bruk bevegelsesinnstillingene for å angi rulleeffekter i Adobe Muse
Bruk bevegelsesinnstillingene for å angi rulleeffekter

  1. Trykk Forhåndsvisning eller velg Fil > Forhåndsvis side i webleser for å teste rulleeffektene. Rull siden ned og opp igjen for å se elementet bevege seg.
  2. Hvis du vil fortsette å redigere siden, går du tilbake til Muse eller klikker Design-knappen når du er ferdig med testingen.

Bruke rulleeffekter for tetthet med Rulleeffekter-panelet

I denne delen får du se hvordan du bruker synlighetstransformeringer som endrer visningen til et element basert på den besøkendes rulling. Dette er en nyttig måte å vise og skjule innhold på ved å få det til å se ut som om elementer blir tydeligere og tydeligere eller toner ut idet den besøkende ruller ned til en ny del av siden. Ved hjelp av Tetthet-fanen i Rulleeffekter-panelet kan du bruke rulleeffekter som påvirker et sideelements gjennomsiktighet. Følg disse trinnene:

  1. Når du redigerer en side i Design-visningen, må du kontrollere at bildepunktverdien i Minste høyde-feltet i Egenskaper for side er høyere enn gjennomsnitthøyden til de fleste skjermer, for eksempel 2000 bildepunkter. Du kan også legge til sideinnhold i siden for å sikre at den er lang nok til å rulle.
  2. I Design-visningen tegner du et rektangel eller en tekstramme på siden.
  3. Bruk Fyll-fanen i Fyll-menyen (eller bruk Fyll-panelet) for å legge til et bakgrunnsbilde som ligger eller ikke ligger side ved side, i det valgte sideelementet, eller angi en heltrukket fyllfarge eller en graderingsfyllfarge. (Hvis du foretrekker, kan du også legge til et kontrollprogram for lysbildefremvisning eller plassere en Adobe Edge Animate OAM-fil på siden).
  4. Merk elementet, klikk Tetthet-fanen (andre fane fra venstre) i Rulleeffekter-panelet og merk deretter av for Tetthet.
Merk av for Tetthet for å aktivere rulleeffekter for tetthet for det merkede elementet.
Merk av for Tetthet for å aktivere rulleeffekter for tetthet for det merkede elementet.

Når du aktiverer Tetthet-alternativet, vises en annen type håndtak på elementet. Akkurat som T-håndtaket som ble brukt til å angi nøkkelposisjonen i Bevegelse-fanen, kan du klikke og dra håndtaket slik at de vises over elementet, dra det ned slik at det er på linje med den øverste kanten (eller over hvilken som helst del av det elementet), eller dra det ned under elementet. Tetthet-håndtaket har tre forskjellige deler som kan dras uavhengig for å angi Nøkkelposisjon-, Fadeposisjon 1- og Fadeposisjon 2-verdier.

  1. Klikk og dra den midterste firkantede delen av håndtaket for å angi nøkkelposisjonen. I eksempelet som vises nedenfor, er nøkkelposisjonen angitt til 150 bildepunkter.
Angi nøkkelposisjonen ved å dra det midterste firkantede håndtaket vertikalt.
Angi nøkkelposisjonen ved å dra det midterste firkantede håndtaket vertikalt.

  1. Klikk og dra den øverste sirkelformede delen av håndtaket for å plassere det på ønsket sted. I eksempelet som vises nedenfor, er Fade-posisjon 1 angitt til 100 bildepunkter.
Angi Fade-posisjon 1 for Tetthet-håndtaket
Klikk og dra den øverste, venstre siden av det runde håndtaket for å angi den første posisjonen som vil påvirke elementets gjennomsiktighet.

  1. Klikk og dra den nederste sirkelformede delen av håndtaket for å plassere det på ønsket sted. I eksempelet som vises nedenfor, er Fade-posisjon 2 angitt til 200 bildepunkter.
Angi Fadeposisjon 2 for Tetthet-håndtaket
Klikk og dra den øverste, høyre siden av det runde håndtaket for å angi den andre posisjonen som vil påvirke elementets gjennomsiktighet.

Merk:

Om ønsket kan nøkkelposisjonen dras langs håndtakene for fadeposisjon, og angis til samme verdi. I stedet for å dra håndtakene kan du også angi numeriske verdier for hvert av disse feltene i Rulleeffekter-panelet.

I dette eksempelet er elementet helt gjennomsiktig til å begynne med, for så å bli stadig tettere, til det er helt ugjennomsiktig (Tetthet-verdien som tilsvarer nøkkelposisjonen, er for øyeblikket angitt til 100 %) når siden når nøkkelposisjonen. Når siden ruller forbi nøkkelposisjonen, blir elementet gradvis mer gjennomsiktig igjen, og når siden ruller forbi 200 bildepunkter, forsvinner det helt.

Angi prosenten for tetthet for rulleeffekter
Angi prosenten for tetthet (der 0 % er helt gjennomsiktig) i Tetthet-fanen i Rulleeffekter-panelet.

  1. Trykk Forhåndsvisning eller velg Fil > Forhåndsvis side i webleser for å teste rulleeffektene. Rull siden ned og opp igjen for å se elementets tetthet endre seg i forhold til rullingen av siden.
  2. Hvis du vil fortsette å redigere siden, går du tilbake til Muse eller klikker Design-knappen når du er ferdig med testingen.

Arbeide med Lysbildefremvisning-fanen i Rulleeffekter-panelet

En annen vanlig måte å bruke rullebevegelse på er å kombinere rulling med visningen av bilder i en lysbildefremvisning. Du kan legge til et kontrollprogram for lysbildefremvisning på siden og deretter bruke Lysbildefremvisning-fanen i Rulleeffekter-panelet til å bruke rulleeffekter, som å vise et nytt bilde i lysbildefremvisningen automatisk hver gang siden rulles til en bestemt plassering.

Klikk Lysbildefremvisning-fanen (tredje fane fra venstre) for å gå gjennom innstillingene for denne delen.

Den vanlige måten å bruke denne delen av rullebevegelsegrensesnittet på er å feste kontrollprogrammet for lysbildefremvisning til siden. Generelt vil kontrollprogrammet for lysbildefremvisning konfigureres (med Alternativer-menyen) til å vise bare den større lysbildefremvisningsbeholderen, samtidig som miniatyrer og Neste- og Forrige-knappene skjules.

En lysbildefremvisning i fullskjermformat er spesielt velegnet for denne effekten, selv om typen kontrollprogram for lysbildefremvisning du velger å legge til, til sist avhenger av designen på området.

Følg disse trinnene når du vil bruke rulleeffekter i et kontrollprogram for lysbildefremvisning:

  1. Oppdater feltet Minste høyde i dialogboksen Egenskaper for side for å gjøre siden høy nok for rulling. Du kan også legge til innhold for å opprette en lengre side.
  2. Dra et kontrollprogram for lysbildefremvisning fra kontrollprogrambiblioteket til siden. Bruk Alternativer-menyen til å konfigurere alternativene for lysbildefremvisningen. (Når du bruker rulleeffekter på kontrollprogrammer for lysbildefremvisning, er alternativene Neste, Forrige og Miniatyrer vanligvis deaktivert).
  3. Legg til bilder i kontrollprogrammet for lysbildefremvisning ved å klikke mappen ved siden av Bilder-delen i Alternativer-menyen. Bla for å velge bildene du vil legge til fra datamaskinen for å fylle ut bildegalleriet.
  4. Bruk Fest-grensesnittet i Kontroll-panelet for å feste lysbildefremvisningen til gjeldende posisjon i webleservinduet. Merk lysbildefremvisningen, og klikk én av de seks festeposisjonene.
Bruk rulleeffekter for kontrollprogrammer for lysbildefremvisning
Fest kontrollprogrammet for lysbildefremvisning til en bestemt posisjon, slik at det forblir i den posisjonen i webleservinduet mens siden ruller.

Når du har lagt til og konfigurert den festede lysbildefremvisningen, kan du legge til rulleeffekter.

Velg kontrollprogrammet for lysbildefremvisning, og merk av for Lysbildefremvisning i Lysbildefremvisning-fanen i Rulleeffekter-panelet.

Merk av for Lysbildefremvisning i Rulleeffekter-panelet.
Merk kontrollprogrammet for lysbildefremvisningen, og aktiver alternativet Lysbildefremvisning i Rulleeffekter-panelet.

Merk at så snart alternativet Lysbildefremvisning er aktivert, legges håndtaket for nøkkelposisjonen til i lysbildefremvisningen i Design-visningen. Hvis du vil oppdatere verdiene for nøkkelposisjonen for rulling, kan du dra venstre og høyre side av håndtaket eller angi numre i feltet Nøkkelposisjoner for rulling. Du kan også klikke oppover- og nedoverpilene i Rulleeffekter-panelet for å øke eller redusere den numeriske verdien.

Grensesnittet i Lysbildefremvisning-fanen i Rulleeffekter-panelet inneholder to knapper som gir deg to ulike måter å kontrollere avspillingen av bildene i lysbildefremvisningen på. Du kan angi at lysbildefremvisningen skal spilles av automatisk, eller angi at den skal gå trinnvis gjennom bildene basert på siderulling.

Den første måten går ut på å angi ønsket nøkkelposisjon og deretter merke av for Autoavspilling.

Når siden rulles forbi nøkkelposisjonen (eller når den besøkende klikker en kobling til en ankerkode og hopper ned siden forbi nøkkelposisjonen), begynner lysbildefremvisningen å spille av. Autoavspillingsfunksjonen vil fortsette å vise bildene. Den vil gå i sløyfe gjennom settet til siden ruller tilbake opp over nøkkelposisjonen eller den besøkende forlater siden.

I eksempelet som vises i bildet over, blir lysbildefremvisningen spilt av når siden ruller til 100 bildepunkter (eller et eller annet sted under den nøkkelposisjonsinnstillingen). Hvis den besøkende ruller opp igjen, stopper avspillingen av lysbildefremvisningen når siden ruller over nøkkelposisjonen (99 bildepunkter eller mindre).

Den andre måten å kontrollere kontrollprogrammet for lysbildefremvisningen på er å angi nøkkelposisjonen og deretter aktivere alternativknappen Bytt lysbilde hvert. I denne arbeidsflyten kan du også angi antall bildepunkter i feltet nedenfor alternativknappen for å indikere hvor ofte bildene i lysbildefremvisningen skal rykke frem basert på hvor langt ned siden rulles.

Du kan for eksempel feste et kontrollprogram for lysbildefremvisning til en lengre side, slik at den forblir i en fast posisjon mens det andre sideinnholdet ruller. Ved å angi en numerisk verdi for alternativet Bytt lysbilde hvert kan du konfigurere lysbildefremvisningen til å bytte til neste bilde i settet hver gang siden ruller ned til det angitte antallet bildepunkter.

I bildet over er nøkkelposisjonen angitt til 200. Når siden rulles forbi 200 bildepunkter fra toppen, vises det neste bildet i lysbildefremvisningen hver gang siden ruller nye 30 bildepunkter.

Angi rulleeffekter for lysbildefremvisninger i Adobe Muse
Angi lysbildefremvisningen til å rykke frem til det neste bildet hver gang siden ruller ned en bestemt avstand (i bildepunkter).

Arbeide med Adobe Edge Animate-fanen i Rulleeffekter-panelet

Adobe Edge Animate er et intuitivt designverktøy som lar deg opprette HTML5-baserte webanimasjoner. Når du bruker grensesnittet i Edge Animate, kan du bygge komposisjoner ved å bruke grafikk og symboler som beveger seg i sløyfe. Animasjonene du oppretter med Adobe Edge Animate, kan eksporteres som OAM-filer og deretter plasseres på sider i Muse-områdene. Animasjoner opprettet i Edge Animate spilles av i en webleser uten at det krever en plugin-modul.

Når du konstruerer animasjoner i Adobe Edge Animate, kan du dra inn elementer og manipulere bevegelsene til elementene ved hjelp av en tidslinje. I tillegg til å legge til elementer direkte i hovedtidslinjen kan du opprette nestede elementer med underelementer som spilles av ved hjelp av sine egne interne tidslinjer. Du kan lære mer om hvordan du arbeider med Adobe Edge Animate på produktsiden for Adobe Edge Animate. Du kan også se opplæringsvideoer for Adobe Edge Animate på Adobe TV.

Når du skal arbeide med rullebevegelsesfunksjonen for Adobe Edge Animate, går det første skrittet ut på å designe en komposisjon spesielt for dette formålet. Rulleeffekter kan brukes på OAM-filer for å påvirke animasjonene plassert på hovedtidslinjen. Du kan opprette interaktive animasjoner ved å designe animasjonen på en strategisk måte slik at bare elementene du vil skal bevege seg når siden ruller, befinner seg på hovedtidslinjen (og plassere alt annet i animasjonen i nestede symboltidslinjer). Når den besøkende ruller siden, kontrollerer rulleeffektinnstillingene bare avspillingen av animerte elementer på hovedtidslinjen.

Hvis du vil ha informasjon om hvordan du lager animasjoner du spesifikt vil bruke på et Adobe Muse-område, kan du se Legge til Adobe Edge Animate-innhold.

Følg disse trinnene når du vil arbeide med fanen Lysbildefremvisning i Rulleeffekter-panelet:

  1. Eksporter OAM-filen fra Adobe Edge Animate, og lagre den i områdemappen.
  2. Start Muse, og dobbeltklikk en side for å åpne den i Design-visningen. Bekreft at siden er lang nok til å rulle, ved å oppdatere Minste høyde-innstillingene i dialogboksen Egenskaper for side, eller legg til sideinnhold for å opprette en lengre side.
  3. Velg Fil > Plasser og bla for å velge OAM-filen fra områdemappen.
  4. Åpne Rulleeffekter-panelet. Klikk Adobe Edge Animate-fanen (fjerde fane fra venstre) for å gå gjennom innstillingene for denne delen.
  5. Merk OAM-filen, og merk av for Edge Animate.
Angi rulleeffekter for animasjoner i Adobe Muse
Angi at Edge Animate-animasjonen skal begynne å spille når siden ruller til en bestemt posisjon, eller angi at den skal bytte bilde hver gang siden ruller ned en bestemt avstand (i bildepunkter).

I bildet over er nøkkelposisjonen angitt til 50 bildepunkter. Du kan dra T-håndtaket eller justere det ved å angi en annen verdi i Nøkkelposisjon-feltet.

Når du har angitt nøkkelposisjonen, kan du kontrollere avspillingen av animasjonen ved hjelp av to alternativer:

  • Autoavspilling: Når dette alternativet er valgt, begynner animasjonen i hovedtidslinjen å spille av så snart webleseren rulles til nøkkelposisjonen, uavhengig av antall bilder i hovedtidslinjen. Animasjonen fortsetter å spille til siden rulles over nøkkelposisjonen.
  • Bytt bilde hvert: Når dette alternativet er valgt, rykker animasjonen i hovedtidslinjen frem ett bilde hver gang siden rulles forbi et bestemt antall bildepunkter. Hvis du for eksempel oppretter en side som er 3000 bildepunkter høy, og angir tallet 10, spilles animasjonen i hovedtidslinjen av ved en hastighet på ett bilde for hvert 10. bildepunkt siden rulles. Hvis den besøkende ruller raskere ned siden, øker animasjonshastigheten.

Merk:

Ikke alle animerte objekter som er nestet eller koblet fra hovedtidslinjen i Adobe Edge Animate-komposisjonen, påvirkes av innstillingene for rullebevegelseseffekt. Derfor kan du velge en statisk bakgrunn eller nestede elementer som hele tiden beveger seg i sløyfe, uavhengig av hvordan den besøkende ruller siden.

  1. Når du har valgt innstillingene i Edge Animate-fanen i Rulleeffekter-panelet, velger du Fil > Forhåndsvis side i webleser (eller klikker Forhåndsvis-knappen). Test siden ved å rulle opp og ned for å se avspillingen av Edge Animate-animasjonsinnholdet (som ble lagt til i hovedtidslinjen).
  2. Hvis du må gjøre endringer, går du tilbake til Muse (eller klikker Design-knappen) og oppdaterer innstillingene i Rulleeffekter-panelet.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet