Finn ut hvordan du legger til og bruker ulike rulleeffekter, for eksempel brikke-for-brikke, glidende meny, opprulling med mer.

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.

Designideer for rulleeffekter

I denne delen får du et innblikk i noen av de mange måtene du kan legge til interaktive funksjoner på, unik områdenavigering og uttrykksfull bevegelsesgrafikk i Muse-områdene ved hjelp av rulleeffekter.

Følg trinnene nedenfor for å komme i gang:

  1. Besøk området med fungerende eksempler, og klikk hver del for å se ulike eksempler. Rull ned hver eksempelside for å se hvordan rulleeffektene kontrollerer måten sideelementene vises på.
  2. Rull til slutten av området med fungerende eksempler for å laste ned filen .muse.
  3. Åpne eksempelområdet, og gå gjennom prosjektet i Muse-arbeidsområdet.
  4. Åpne Lag-panelet, og utvid delen merket Innhold for å se elementene som brukes for å lage hvert eksempel.

Brikke-for-brikke-effekt (the piece by piece effect)

Denne effekten får et sett med individuelle elementer til å fly inn og samle seg i designen på siden mens den besøkende ruller ned siden. Grafikk og tekstrammer kontrolleres med rulleeffekter som skaper interaktiv kompilering, som om brikker i et puslespill settes sammen. Dette gjør det mulig å vise frem produktdetaljer på en webside på en spennende måte.

Arbeidsflyten i dette eksempelet bruker Startbevegelse-delen i Bevegelse-fanen i Rulleeffekter-panelet til å føre elementer sammen i en konsolidert design. Etter at hver brikke har beveget seg på plass, er Sluttbevegelse-innstillingene angitt til 0 for å unngå at de eksisterende elementene beveger seg mens nye elementer flyr inn.

Følg disse trinnene hvis du vil skape en lignende brikke-for-brikke-effekt:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 14 120 bildepunkter.
  2. Bruk Tekstverktøy til å opprette en tekstramme, og skriv inn ønsket tekstinnhold.
  3. Åpne Bevegelse-fanen i Rulleeffekter-panelet, og merk av for Bevegelse. I dette eksempelet får innstillingene i Startbevegelse-delen tekstrammen til å bevege seg ned og i posisjon ved en hastighet som er 0,25 ganger (en fjerdedel av) rullehastigheten. Idet siden når tekstrammens nøkkelposisjon, når tekstrammen stedet hvor den er plassert i Design-visningen. Deretter får Sluttbevegelse-innstillingene (0 verdier for begge retninger) det første elementet til å bli på plass, som om elementet er festet.
  4. En PNG-fil med gjennomsiktighet (omriss av en mobiltelefon) er plassert under tekstrammen. Dette elementet bruker innstillingene i Bevegelse-fanen i Rulleeffekter-panelet til å fly inn på siden fra venstre, bevege seg i posisjon, og deretter forbli der.
  5. Rett bak omrisset av mobiltelefonen følger et mindre hvitt element et lignende bevegelsesmønster – det flyr inn på siden fra venstre og forblir deretter i posisjon. Den hvite grafikken simulerer ørepluggen på toppen av en mobiltelefon. Dette innholdselementet (kalt phone-earpiece.png) plasseres over omrisset av mobiltelefonen i Lag-panelet, slik at den vises over omrisset i designen. 
  6. Rett bak ørepluggen flyr et lite hvitt element som simulerer telefonens Hjem-knapp, inn fra høyre. Det etterligner oppførselen til ørepluggen og vises også over omrisset av mobiltelefonen i designen.
  7. Deretter bruker en rektangulær grafikk, med lys farge og diskré gradering som flyter vertikalt fra hvitt til lysegrått, Bevegelse-fanen i Rulleeffekter-panelet til å bevege seg i posisjon, slik at den passer perfekt inne i det gjennomsiktige området midt i omrisset av mobiltelefonen. Så snart den er i posisjon, forblir den på plass og ser ut som telefonens skjerm. Skjermelementet (phone-screen.png) er lagt til som lag nederst i Lag-panelet. Dermed er det plassert slik at det vises bak alle de andre elementene i sidedesignen.
  8. Et sett med fire rektangler (fylt med heltrukne blå, grønne, gule og røde farger) beveger seg i posisjon etterpå. For å skape effekten av noe spredt som flyr sammen, er hvert av rektanglene angitt med forskjellige retninger og hastigheter i Bevegelse-fanen i Rulleeffekter-panelet. Det blå rektangelet beveger seg ned og til høyre, de grønne og gule rektanglene beveger seg opp og til høyre, og det røde rektangelet beveger seg opp og til venstre i Startbevegelse-delene. I Sluttbevegelse-delen har alle rektanglene en innstilling på 0 for begge retninger – noe som får hvert element til å oppføre seg som om det er festet på plass så snart det ankommer den endelige destinasjonen oppå mobiltelefonskjermen.
  9. Etter at alle de andre brikkene er samlet, beveger et andre tekstfelt seg opp for å legge seg under det første tekstfeltet. Det beveger seg med en hastighet som er 0,5 ganger (halvparten av) rullehastigheten på siden.

Og endelig er det to gjenstående elementer nederst: et heltrukket rektangel som er fylt med samme heltrukne fargen som siden (gjør det usynlig i designen), og en gruppe objekter (et gult rektangel med lyspæregrafikk) bak det.

Firkanten med heltrukket farge er der for å skjule gruppen, som er plassert bak den.

Brikke-for-brikke-rulleeffekt i Adobe Muse
Brikke-for-brikke-rulleeffekt i Adobe Muse

Merk:

Merk at når begge elementene er merket, så vises verdiene som er de samme for alle valgte elementer, i feltene. I dette eksempelet er både rektangelet og gruppen angitt til 0 for den vertikale retningen i Startbevegelse-delen, og til 0,0 i Sluttbevegelse-delen. Ingen verdier vises i det horisontale feltet i Startbevegelse-delen, fordi gruppen er angitt til å bevege seg til venstre 1 ganger (samme hastighet som) rullehastigheten, mens rektangelet er angitt til 0.  

  1. Rektangelet festes på plass og beveger seg aldri, fordi alle verdiene i både Startbevegelse- og Sluttbevegelse-feltene er angitt til 0. Mens siden ruller til nøkkelposisjonen for gruppen som inneholder lysbildegrafikken, beveger den seg til venstre og blir synlig da den ikke lenger skjules av rektangelet. Lyspæregruppen er lagdelt over mobiltelefonens skjermelement, men under omrisset av mobiltelefonen. Dermed ser det ut som om lyspæregrafikken dras på plass (i likhet med overganger som oppstår på en ordentlig telefon når skjermbildet dras horisontalt). Lyspæregruppen dekker rektangelet med gradering som tidligere representerte telefonskjermen.

Som du kan se av dette enkle eksempelet, kan du bruke en kombinasjon av en veldig høy side, en rekke elementer som er strategisk lagdelt i Lag-panelet, og Bevegelse-fanen i Rulleeffekter-panelet til å skape illusjonen av brikker som kommer sammen i en animasjon mens siden ruller ned.

Glidende meny (sliding menu)

Den glidende menyen bruker mange av de samme konvensjonene som er beskrevet for brikke-for-brikke-effekten. Ved hjelp av Bevegelse-fanen i Rulleeffekter-panelet ser elementene ut til å fly inn, og rektanglene skjuler noen av elementene til de er klare til å presenteres i sidedesignen.

Dette eksempelet bruker strategisk posisjonerte grupper med rektangler til å få det til å se ut som en kompleks vinklet design.

Vis eksempelområdet i en webleser for å se flyet fly horisontalt over siden fra høyre til venstre, etterfulgt av et sett med formaterte menyalternativer og en bakgrunn med gradering og diagonale striper.

Følg disse trinnene hvis du vil skape en lignende glidende effekt:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 4 665 bildepunkter.
  2. Flybildet er lagdelt over alt det andre innholdet på siden og vises dermed øverst i listen i Lag-panelet. Den er satt til å flytte til venstre både før og etter nøkkelposisjonen i Bevegelse-fanen i Rulleeffekter-panelet.
Glidende meny-effekt i Adobe Muse-rulleeffekter
Glidende meny-effekt i Adobe Muse-rulleeffekter

  1. Fire tekstrammer er konfigurert til å fly inn til venstre og stables vertikalt for å opprette navigeringsmenyen. I Bevegelse-fanen i Rulleeffekter-panelet har hver tekstramme samme hastighet (1,25 ganger rullehastigheten) i Startbevegelse-delen. Hver tekstramme har også en forskjellig nøkkelposisjon. Mens siden ruller ned glir hver tekstramme i posisjon og stilles på linje på venstre side av designen. Alle tekstrammene har 0,0 verdier i Sluttbevegelse-delen, noe som fører til at menyelementene forblir på plass så snart de er i posisjon.
  2. Tekstrammene er fylt med en heltrukket bakgrunnsfarge, selv om de ved første øyekast ser ut til å være bilder fordi de viser diagonalt kuttede sider i stedet for rette vertikale kanter. Denne effekten er oppnådd ved å plassere en gruppe på tre firkanter over tekstrammene, som fylles med den samme heltrukne fargen som webleserfyllfargen.
Gruppér og ordne rektangler over menyelementene for å lage vinklede høyre- og venstrekanter.
Gruppér og ordne rektangler over menyelementene for å lage vinklede høyre- og venstrekanter.

  1. Tekstrammeanimasjonen skjules først av en annen gruppe rektangler, fordi tekstrammene er plassert under gruppen i Lag-panelet. Gruppen er en kombinasjon av tre firkanter: En større firkant med en vertikal gradering, og to andre mindre firkanter (én kvadratformet og én rotert) som er fylt med en heltrukken farge som passer med den øverste fargen i graderingen.
  1. Hvis du ruller ned for å se gjennom bunnen av gruppen, vil du se en serie med fire nye firkanter med varierende bredder som er rotert og justert over det nederste høyre hjørnet av en større gradert firkant.
Rotér rektangler fylt med den samme fargen som sidefyllfargen for å kutte av hjørnet på rektangelet med graderingsfyll.
Rotér rektangler fylt med den samme fargen som sidefyllfargen for å kutte av hjørnet på rektangelet med graderingsfyll.

Grupper er flotte når du vil kombinere et sett med elementer og kontrollere dem som et enkelt element. I dette eksempelet er det brukt rulleeffekter for bevegelse på en gruppe forskjellige rektangler for å få gruppen til å bevege seg som en enkelt enhet.

Dette eksempelet viser også kreativ bruk av negativt rom. Hvis webleserfyllet har en heltrukket bakgrunnsfarge, kan du lage mange interessante utklippseffekter ved å legge rektangler fylt med samme farge i lag over andre rektangler. I stedet for å designe grafikk i et bilderedigeringsprogram og plassere et enkelt bilde, kan du bruke rektangler til å konstruere grafikk i Muse-arbeidsområdet.

Tone ut (fade it)

Dette eksempelet av en animert soloppgang og solnedgang er oppnådd ved å bruke en kombinasjon av to rulleeffekter: bevegelse og tetthet. Eksempelet viser en bakgrunnsside med graderingsfargefyll med et enkelt PNG-bilde av solen. PNG-bildet omfatter gjennomsiktige områder som lar bakgrunnssidens fyllfarge vise gjennom.

Se eksempelområdet i en webleser, og se hvordan solen, som først er helt gjennomsiktig, endrer grad av gjennomsiktighet idet den beveger seg over siden. På toppen er den helt ugjennomsiktig, men når du fortsetter å rulle ned siden, går solen ned og blir trinnvis mer gjennomsiktig, til den toner helt ut.
Følg disse trinnene hvis du vil skape en lignende uttoningseffekt:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en større verdi i Minste høyde-feltet enn det som kan vises i en gjennomsnittsskjerm, slik at det er mulig å rulle siden. I dette områdeeksempelet er den minste høyden på siden angitt til 2988 bildepunkter.
  2. Bildet av solen er plassert midt på siden. I Bevegelse-fanen i Rulleeffekter-panelet er nøkkelposisjonen angitt til 1410 bildepunkter. Legg også merke til at innstillingene for Startbevegelse- og Sluttbevegelse-delene.
Angi innstillinger for Startbevegelse og Sluttbevegelse for uttoningseffekt.
Angi innstillinger for Startbevegelse og Sluttbevegelse for uttoningseffekt.

Disse innstillingene får solen til å bevege seg i en halvsirkulær bane. Den går i en bue fra nedre venstre side opp til midten (der den når nøkkelposisjonen) og deretter tilbake ned til nedre høyre side.

  1. La solen være merket, og klikk Tetthet-fanen for å se innstillingene. Fadeposisjon 1 er angitt til 726 bildepunkter (over solen). Fadeposisjon 2 er angitt til 1925 bildepunkter (under solen). Solen begynner med 0 % tetthet (helt gjennomsiktig), og deretter blir den helt ugjennomsiktig idet siden ruller til solens nøkkelposisjon. Når siden ruller ned forbi solens nøkkelposisjon, endres tettheten fra 100 % til 0 % gjennomsiktig, og dette skaper en effekt av at den toner inn og ut.
Juster mengden gjennomsiktighet i Tetthet-fanen i Rulleeffekter-panelet.
Juster mengden gjennomsiktighet i Tetthet-fanen i Rulleeffekter-panelet.

  1. Test siden ved å velge Fil > Forhåndsvis side i webleser. Rull siden for å se solen "stå opp" samtidig som den blir tydeligere og tydeligere, og deretter "gå ned" til høyre samtidig som den toner ut.
  2. Lukk webleseren, og gå tilbake til Muse-arbeidsområdet.

Edge Animate

Dette eksempelet viser hvordan du kontrollerer OAM-filer eksportert fra Adobe Edge Animate med rulleeffekter. I dette eksempelet er siden fylt med en vertikal gradering som begynner med en lys turkis farge og forvandles til en mørkeblå.

Denne animerte effekten skapes av en kombinasjon av innstillinger som angis i Bevegelse- og Edge Animate-fanene.

Tre tilfeller av den samme OAM-filen er plassert side ved side horisontalt og skaper en rekke med animerte kompasser. Når du viser eksempelområdet i en webleser, beveger alle de tre kompassene seg opp, hvorpå de kommer til syne og deretter forblir i posisjon. Hvert av de tre kompassene ser ut til å spinne ved forskjellige hastigheter, men det er innstillingene i Rulleeffekter-panelet, ikke konstruksjonen av Edge Animation-filen, som får dem til å gå rundt ved forskjellige hastigheter.

Følg disse trinnene hvis du vil skape en lignende effekt med tre plasserte OAM-filer:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 7465 bildepunkter.
  2. Merk alle de tre kompassene på siden. I Bevegelse-fanen i Rulleeffekter-panelet kan du se at alle de tre OAM-filene har samme nøkkelposisjon og bevegelsesinnstillinger, fordi alle verdiene vises.
Lag animerte effekter for OAM-filer ved å bruke rulleeffekter
Lag animerte effekter for OAM-filer ved å bruke rulleeffekter

Hvis du forhåndsviser eksempelet i en webleser, vil du se at alle de tre OAM-elementene hopper opp samtidig og deretter forblir på rekke som om de er festet.

  1. Klikk ved siden av kompassene for å oppheve merkingen av dem, og merk deretter bare kompasset til venstre. Trykk og hold nede Shift-tasten mens du merker kompasset til høyre, slik at begge er merket. Åpne Edge Animate-fanen i Rulleeffekter-panelet for å gå gjennom innstillingene.
Opphev merkingen av alle tre kompassene, og velg kompasset til venstre og høyre.
Opphev merkingen av alle tre kompassene, og velg kompasset til venstre og høyre.

De to kompassene på sidene er begge konfigurert til å gå i sløyfe gjennom tidslinjeanimasjonen og rykke frem til neste bilde hver gang siden ruller ned 350 bildepunkter.

  1. Opphev merkingen av de to ytterste kompassene. Merk det midterste kompasset, og sjekk at Bytt bilde hvert-feltet i Edge Animate-fanen er angitt til 400 bildepunkter. Denne innstillingen får den midterste animasjonen til å bevege seg langsommere enn de to ytterste kompassene.
Velg det midterste kompasset, og velg innstillingen for rulleeffekter.
Velg det midterste kompasset, og velg innstillingen for rulleeffekter.

Du kan skape interessante animasjonseffekter ved å variere hastigheten til flere plasserte Edge Animate-animasjoner i forhold til rullehastigheten på siden. Du kan for eksempel skape en fiskestim, en himmel fylt av skyer i bevegelse eller andre effekter ved å legge til flere eksemplarer av den samme OAM-filen med ulike rulleeffektinnstillinger.

Lysbildefremvisningseffekt (slideshow effect)

Du kan kontrollere hvordan settet med bilder i et kontrollprogram for lysbildefremvisning vises i forhold til hvordan siden rulles. Dette omfatter å legge til et kontrollprogram for lysbildefremvisning i en side og deretter bruke Lysbildefremvisning-fanen i Rulleeffekter-panelet til å oppdatere lysbildealternativene.

I dette eksempelet fylles lysbildefremvisningen med en rekke bilder som skaper en 360-graders roterende visning av en ryggsekk. Du kan ta lignende lysbildefremvisningsbilder ved å ta bilder av et motiv som er plassert på et roterende stativ. Denne effekten er nyttig hvis du vil beskrive et produkt interaktivt og hjelpe potensielle kunder til å se det fra alle vinkler før de kjøper det.

Følg disse trinnene når du vil skape en lignende effekt med et kontrollprogram for lysbildefremvisning:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 7465 bildepunkter.
  2. En tekstramme med ordet "Superpack" er konfigurert til å bruke rulleeffekter. I Bevegelse-fanen konfigurerer du Startbevegelse-innstillingene til å bevege teksten inn fra venstre til høyre, i samme hastighet som rullehastigheten på siden. I Sluttbevegelse-innstillingene er begge retningene angitt til 0, slik at tekstrammen forblir i posisjon som om den var festet til siden.
     
Merk av for Bevegelse, og konfigurer rulleeffektene til å bevege tekstrammen mot høyre.
Merk av for Bevegelse, og konfigurer rulleeffektene til å bevege tekstrammen mot høyre.

  1. Åpne Kontrollprogrambibliotek, og dra et kontrollprogram for lysbildefremvisning til midten av siden, til høyre for tekstrammens endelige destinasjon.
  2. Bruk alternativet Legg til bilder i Alternativer-menyen for å fylle lysbildefremvisningen med bildefiler. 

Når du har merket Lysbildefremvisning, kan du velge kontrollprogrammet for lysbildefremvisning og bruke Fest-grensesnittet i Kontroll-panelet til å feste lysbildefremvisningen på plass. Du kan også eksperimentere ved å legge til et kontrollprogram for lysbildefremvisning i fullskjermformat og kontrollere det med rulleeffekter. 

  1. Merk lysbildefremvisningen, åpne Lysbildefremvisning-fanen i Rulleeffekter-panelet og merk av for Lysbildefremvisning.
  2. Dra enten T-håndtaket eller angi en verdi i feltet for å angi nøkkelposisjonen. I dette eksempelet er nøkkelposisjonen satt til 1066 bildepunkter.
  3. Aktiver alternativknappen Bytt lysbilde hvert, og angi feltet under til 50 bildepunkter.
Angi lysbildefremvisningen til å rykke frem til neste bilde hver gang siden ruller ned nye 50 bildepunkter.
Angi lysbildefremvisningen til å rykke frem til neste bilde hver gang siden ruller ned nye 50 bildepunkter.

  1. Test siden i Forhåndsvisning eller i en webleser. Rull ned siden for å se at ryggsekken ser ut til å rotere. Du kan også skape bilder som ser ut til å fly oppover eller falle nedover, ved å fylle lysbildefremvisningen med rekke lignende, men litt forskjellige bildefiler, tilsvarende rammer i en animert GIF.
  2. Etter å ha testet rulleeffektene går du tilbake til Design-visningen i Muse for å fortsette å redigere sidene.

Opprullingen (the roll-up)

Med rulleeffekter kan du skape en veldig lang side som brytes inn i seksjoner med radikalt forskjellige fremtoninger. Idet den besøkende ruller ned en side, finner det sted overganger mellom sidedeler som ser ut til å rulle opp, med animerte teksteffekter og atskillende kanter skapt med en skyggeeffekt.

Du kan bruke ankerkoder eller bare legge til en merknad for å oppmuntre besøkende til å rulle ned siden for å se hver av delene. Når du er nederst på eksempelområdet og klikker knappen for å gå tilbake til toppen av siden, ser du hele siden fare forbi idet ankerkoblingen vender tilbake til toppen av sidedesignen.

Følg disse trinnene hvis du vil skape en lignende opprullingseffekt:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 16 990 bildepunkter.
  2. I Webleserfyll-menyen angir du webleserfyllfargen til heltrukken blå.
Angi webleserfyllfargen i Webleserfyll-menyen.
Angi webleserfyllfargen i Webleserfyll-menyen.

  1. Merk hele siden, og bruk Fyll-menyen til å angi fargen til ingen, slik at den blå fyllfargen for webleseren vises gjennom.
  2. Rull ned siden til omtrent 2248 bildepunkter fra toppen. Bruk Rektangelverktøy til å tegne et rektangel som er 3000 bildepunkter bredt og 2000 bildepunkter høyt. Bruk Markeringsverktøy til å sentrere rektangelet på siden, og la begge sidene utvide seg fordi sidene i webleservinduet.
  3. La rektangelet være merket, og bruk Fyll-menyen til å angi en heltrukket grønn fyllfarge. Bruk Effekter-menyen for å angi en skyggeeffekt.
Bruk en skyggeeffekt på rektangelet for å skape en mer dramatisk kant.
Bruk en skyggeeffekt på rektangelet for å skape en mer dramatisk kant.

  1. Merk det grønne rektangelet, og merk av for Bevegelse i Bevegelse-fanen i Rulleeffekter-panelet. Klikk og dra T-håndtaket, og skjul det slik at nøkkelposisjonen er angitt til den øverste kanten på firkanten, som er 2248 bildepunkter i eksempelområdet.
  1. I Startbevegelse-delen angir du at rektangelet skal bevege seg ned ved en hastighet som er 1,5 ganger rullehastigheten. Angi alle andre retninger til 0.
  2. Bruk Tekstverktøy til å opprette et tekstfelt nær toppen av det grønne rektangelet. I dette eksempelet sier tekstfeltet: This is the roll-up (Dette er opprullingen). Du kan imidlertid skrive inn tekstinnholdet og bruke den tekstformateringen du foretrekker.
  3. Merk tekstrammen, og aktiver Bevegelse-fanen i Rulleeffekter-panelet. Dra T-håndtaket for å justere det i forhold til den øverste kanten på den grønne firkanten, og oppdater innstillingen for å styre hvordan tekstrammen vil vises basert på siderulling.
Still T-håndtaket på linje med den øverste kanten på det grønne rektangelet.
Still T-håndtaket på linje med den øverste kanten på det grønne rektangelet.

  1. Angi den nedadgående retningen i Startbevegelse til å bevege seg 1,5 ganger rullehastigheten. Angi alle andre verdier i panelet til 0. Dette får tekstfeltet til å bevege seg ned i samme retning og hastighet som det grønne rektangelet. Både rektangelet og tekstrammen forblir på plass når siden ruller forbi nøkkelposisjonene deres.
  2. Hvis du klikker Forhåndsvisning, kan du rulle ned og se hvordan det grønne rektangelet og tekstfeltet ruller ned fra toppen og blir synlig. Når du er ferdig med testingen, klikker du Design for å fortsette å redigere siden.
  3. Bruk Vis-menyen til å zoome ut til 10 % av områdedesignen. Merk det grønne rektangelet og tekstfeltet. Trykk og holde nede Tilvalg-/Alt-tasten mens du drar de to elementene lenger ned på siden for å duplisere dem. Angi fyllfargen for den dupliserte firkanten til mørkeblå, og bruk tekstverktøyet for å oppdatere teksten.
Oppdater bakgrunnsfyllfargen for det dupliserte rektangelet, og endre tekstrammeinnholdet for den nye delen av siden.
Oppdater bakgrunnsfyllfargen for det dupliserte rektangelet, og endre tekstrammeinnholdet for den nye delen av siden.

I dette eksempelet har den dupliserte tekstrammen teksten: Use it to drastically alter the appearance of your website (Bruk den til å endre utseendet til webområdet dramatisk). Du kan imidlertid skrive inn akkurat den teksten du vil for å identifisere den mørkeblå delen av siden.

  1. Bruk Markeringsverktøy til å plassere det dupliserte rektangelet og tekstrammen ca. 5448 bildepunkter ned fra toppen av siden.
  2. Merk det mørkeblå rektangelet, og aktiver Bevegelse-fanen i Rulleeffekter-panelet. Nøkkelposisjonen er automatisk blitt oppdatert til rektangelets nye plassering (5448 piksler), og den nedadgående retningen i Startbevegelse-delen er fortsatt angitt til å bevege seg ved en hastighet som er 1,5 ganger rullehastigheten (og alle andre verdier er angitt til 0). Hvis du sjekker den dupliserte tekstrammen, vil du se at rulleeffektene også er forbeholdt det dupliserte elementet.
  3. Gjenta trinn 12 og 13 fire ganger til for å skape totalt seks rektangler i ulike størrelser med tekstrammer over dem. Hvert rektangel har skyggeeffekten og rulleeffektinnstillingene som allerede er brukt. Plasser de siste fire rektanglene ved følgende nøkkelposisjoner: 8648 bildepunkter, 11 852 bildepunkter, 15 058 bildepunkter og 18 251 bildepunkter, slik at hver del skilles fra hverandre med ca. 1200 bildepunkter.
  4. Bruk Fyll-menyen til å angi fyllfarge for rektanglene. Eksperimenter ved å bruke både heltrukket fargefyll og graderingsfargefyll, slik at hver del på siden skiller seg ut og står i kontrast til de andre delene.
  5. Bruk Tekstverktøy til å oppdatere tekstinnholdet for hver del. Du kan for eksempel endre hver del slik at den reflekterer bakgrunnsfargen til rektangelet under, som dette: Dette er den blå delen.
  6. Test siden ved å velge Fil > Forhåndsvis side i webleser. Rull siden for å se de ulike sidedelene komme til syne og deretter bli erstattet av den neste sidedelen.
  7. Lukk webleseren, og gå tilbake til Muse-arbeidsområdet.

Dynamisk tekst (dynamic type)

Du kan skape uvanlig typografisk design ved å bruke en kombinasjon av bevegelsesrulleeffekter og Adobe Edge-webskrifter. Med webskrifter kan du formatere tekst med et bredere utvalg av skrifter som lastes når siden lastes. I stedet for å plassere og animere bilder av tekst opprettet i et bilderedigeringsprogram, kan du skape sider som ser flotte ut og er enklere å oppdatere, med Edge-webskrifter. Og rulleeffektene skaper en dramatisk følelse av animasjon mens siden ruller ned.

Følg disse trinnene hvis du vil skape en lignende effekt med dynamisk tekst:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 4854 bildepunkter.
  2. Angi fyllfargen for siden til ingen. Webleserfyllfargen spiller ingen rolle, fordi siden vil bli dekket av et langt rektangel i det neste trinnet.
  3. Bruk Rektangelverktøy til å tegne et stort rektangel som er 1159 bildepunkter bredt og 4854 bildepunkter høyt. Bruk Fyll-menyen til å fylle rektangelet med et heltrukket fargefyll eller graderingsfargefyll. I dette eksempelet brukes en blågrønn til fuksia graderingsfarge som fyll. Bruk Markeringsverktøy til å midtstille rektangelet slik at det fyller hele webleserområdet. Hvis du vil, kan du zoome ut for å sikre at firkanten er midtstilt på siden.
Zoom ut, og plasser rektangelet på midten av den lange siden.
Zoom ut, og plasser rektangelet på midten av den lange siden.

  1. Når du har midtstilt rektangelet, angir du forstørrelsen i Vis-menyen tilbake til 100 %.
  2. På venstre side av siden bruker du Tekstverktøy til å skape en rekke tekstrammer. I dette eksempelet er det totalt fem tekstrammer. Innholdet i hver tekstramme står oppført nedenfor, men skriv gjerne inn tekst etter eget ønske i hver tekstramme:
    • Five Frames
    • Scrolling
    • At Different Speeds Will
    • Create
    • Dynamic Tension

Som et valgfritt ekstra trinn kan du duplisere noen av tekstrammene og deretter bruke en noe annerledes formatering. I dette eksempelet er tekstrammen med ordet "Create" duplisert og deretter er de to eksemplarene lagdelt oppå hverandre for å skape en lyseblå bakgrunnsskyggeeffekt.

  1. Bruk Tekstverktøy til å merke hver av tekstrammene. Bruk Tekst-panelet (eller tekstformateringsalternativene i Kontroll-panelet) for å bruke ulike webskrifter, skriftstørrelser, farger og andre typografiske innstillinger, slik at hver tekstramme skiller seg ut.
  2. Merk alle tekstrammene. Når de er merket, åpner du Bevegelse-fanen i Rulleeffekter-panelet. Angi den samme numeriske verdien for å angi nøkkelposisjonen for alle de merkede tekstrammene samtidig. (I dette eksempelet er nøkkelposisjonen angitt til 1372 bildepunkter.) Angi også den horisontale retningen for både Startbevegelse- og Sluttbevegelse-delene til høyre. Angi alle de vertikale retningene for Startbevegelse- og Sluttbevegelse-delene til 0, slik at tekstrammene ikke beveger seg vertikalt.
  3. Klikk et annet sted enn tekstrammene, og klikk deretter hver tekstramme enkeltvis. Angi litt forskjellige verdier for hver av tekstrammene. I listen nedenfor er den første verdien Startbevegelse-hastigheten og den andre verdien Sluttbevegelse-hastigheten for den horisontale (høyre) retningen:
    • Five Frames: .9x, .1x
    • Scrolling: .12x, .5x
    • At Different Speeds Will: .7x, .17x
    • Create: 1.1x, .005x
    • Dynamic Tension.: 1x, .01x

Merk:

Hvis du velger å duplisere en tekstramme for å skape bakgrunnsskyggeeffekten, kan du gruppere to eller flere eksemplarer av en tekstramme og kontrollere dem som en enkelt gruppe når du bruker rulleeffekter.

  1. Bruk Tekstverktøy til å opprette et tekstfelt, og skriv inn nummeret 5 til høyre på siden. Nok en gang kan du velge å duplisere tekstrammen og deretter bruke forskjellige farger og tekstformatering for å gi illusjonen av skråkanter og bakgrunnsskygger. Hvis du oppretter duplikater av en tekstramme for designformål, grupperer du tekstrammene sammen, slik at du kan bruke rulleeffekter på gruppen.
  2. Merk tekstfeltet med nummer 5, og merk av for Bevegelse i Bevegelse-fanen i Rulleeffekter-panelet. Angi nøkkelposisjonen numerisk eller ved å dra T-håndtaket (i dette eksempelet er det 1425 piksler). I Startbevegelse-delen angir du elementet til å bevege seg til venstre 1 ganger rullehastigheten. I Sluttbevegelse-delen angir du elementet til å bevege seg til venstre 0,01 ganger rullehastigheten.
  3. Test siden ved å velge Fil > Forhåndsvis side i webleser. Rull siden for å se de fem tekstrammene bevege seg inn på siden fra venstre side mens tekstrammen med nummer 5 beveger seg inn fra høyre. Rull opp og ned for å se tekstrammene animeres.
  4. Lukk webleseren, og gå tilbake til Muse-arbeidsområdet.
     

Stablet meny (stacked menu)

Du kan skape engasjerende interaktiv områdenavigering ved hjelp av rulleeffekter, slik at de ulike knappene flyr inn i det synlige området på siden og deretter stiller seg på linje for å skape en menylinje. I dette eksempelet beveger fire overrullingsknapper seg opp fra bunnen av siden mens den rulles, før de låses i posisjon og viser en vertikal menylinje.

Når de fire knappene er på linje, flyr bakgrunnsinnholdet (i form av lyspæregrafikk, farget bakgrunnsområde, tekstramme og diagonale hjørnestriper) inn fra begge sider for å skape en del av området.

Selv om knappene ikke er koblet i dette eksempelet, kan du om ønsket legge til koblinger ved å bruke rullegardinmenyen Hyperkoblinger, slik at de besøkende kan klikke på dem for å laste ned en ny side eller bruke ankerkoder til å hoppe til et annet sted på gjeldende side.

Følg disse trinnene hvis du vil skape en lignende effekt av stablet meny:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 7465 bildepunkter.
  2. Angi sidefyllfargen til ingen, og angi webleserfyllet til en heltrukket fyllfarge. I dette eksempelområdet er webleserfyllet angitt til en lys brungul farge.
  3. Bruk Tekstverktøy til å opprette en ny tekstramme. Skriv inn ordet Home (Hjem). Bruk formateringsalternativene i Kontroll-panelet til å legge til bakgrunnsfarge i tekstrammen. Oppdater også formateringsalternativene for å formatere teksten som ønsket. Bruk håndtakene på sidene av knappen for å utvide den i bredden og høyden slik at den blir ca. 300 bildepunkter bred og 115 bildepunkter høy.
Bruk alternativene i Kontroll-panelet til å formatere tekstrammen.
Bruk alternativene i Kontroll-panelet til å formatere tekstrammen.

  1. Åpne Tilstander-panelet. Velg Overrullingstilstand, og legg til en annen fyllfarge (eller formater den etter behov) for å lage en overrullingsknapp.
Velg Overrullingstilstand, og formater knappen slik at den viser et annet utseende enn Normal tilstand.
Velg Overrullingstilstand, og formater knappen slik at den viser et annet utseende enn Normal tilstand.

  1. Når du har oppdatert Overrullingstilstand, velger du Normal tilstand igjen.
  2. Åpne Bevegelse-fanen i Rulleeffekter-panelet. Når knappen er valgt, merker du av for Bevegelse. Angi nøkkelposisjonen ved å dra T-håndtaket eller angi en numerisk verdi. Angi også Startbevegelse-delen til å bevege seg opp ved en hastighet som er 75 ganger rullehastigheten. La alle andre felt være angitt til 0.
Aktiver rulleeffekter i Bevegelse-fanen, og angi deretter retningen og bevegelseshastigheten.
Aktiver rulleeffekter i Bevegelse-fanen, og angi deretter retningen og bevegelseshastigheten.

  1. Trykk og holde nede Tilvalg-/Alt-tasten mens du drar Home-knappen (Hjem) lenger ned på siden. Da opprettes et duplikat av knappen. Pass på at duplikatet er stilt vertikalt på linje med den opprinnelige Home-knappen (Hjem). Når de to elementene er justert og duplikatet fortsatt er valgt, vil en mørkeblå smart hjelpelinje visers midlertidig i midten.
Trykk og hold inne Tilvalg-/Alt-tasten, og dra et duplikat av knappen for å justere den vertikalt.
Trykk og hold inne Tilvalg-/Alt-tasten, og dra et duplikat av knappen for å justere den vertikalt.

  1. Beveg den dupliserte knappen ned siden, til ca. 460 bildepunkter under den opprinnelige knappen.
  2. Gjenta trinn 7 og 8 for å duplisere knappen to ganger til, slik at du oppretter til sammen fire knapper som er jevnt fordelt på siden. Bruk tekstverktøyet til å redigere den andre, tredje og fjerde knappen fra toppen for å oppdatere teksten ved hjelp av disse etikettene: Produkter, Bilder, Kontakt oss.
Rediger teksten i tekstrammene for å gjøre hver knappeetikett unik.
Rediger teksten i tekstrammene for å gjøre hver knappeetikett unik.

Da du dupliserte den første Home-knappen (Hjem), kopierte du formateringen til tekstrammen og innholdet i rammen samt rulleeffektinnstillingene. Hvis du merker en av de dupliserte knappene og ser i Rulleeffekter-panelet, vil du se at innstillingene i Bevegelse-fanen samsvarer med innstillingene brukt på Home-knappen (Hjem), og nøkkelposisjonen for hver knapp er 460 bildepunkter under forrige knapp (den samme avstanden som mellomrommet mellom hver knapp på siden).

  1. Beregn den totale høyden til de fire knappene når de er justert i sine endelige plasseringer ved å legge sammen høyden og avstanden. I eksempelområdet er hver av knappene 116 bildepunkter høye, og det er 4 bildepunkters avstand mellom hver knapp. Det betyr at den totale høyden på den vertikale menylinjen (samlet) er 476 bildepunkter. Bruk Rektangelverktøy til å tegne et rektangel som er like bredt som sidedelens ønskede bredde og av samme høyde som menylinjen. I dette eksempelet er rektangelet 931 bildepunkter bredt og 476 bildepunkter høyt.
  2. Hvis du kunne tenke deg å kopiere designen i eksempelområdet, kan du angi fyllfargen i rektangelet til blek rosa, i en lysere nyanse enn knappenes normale tilstand. Om ønsket kan du også skape avrundede hjørner ved å angi en hjørneradiusverdi i Kontroll-panelet. I dette eksempelet er alle fire hjørner angitt til 10 bildepunkter.
Velg rektangelet, og angi hjørneradiusen for avrundede hjørner.
Velg rektangelet, og angi hjørneradiusen for avrundede hjørner.

  1. Bruk Markeringsverktøy til å justere rektangelet slik at den øverste kanten er ca. 5094 bildepunkter fra toppen av siden. Pass også på at den venstre siden av rektangelet er vertikalt justert med den venstre siden på knappene. I eksempelområdet er både rektangelet og knappene 14 bildepunkter fra venstre side på siden. Du kan se disse innstillingene når du merker et element og åpner Transformering-panelet. X-verdien er avstanden fra venstre side (14 bildepunkter), og Y-verdien er avstanden fra toppen av siden (5094 bildepunkter).
  2. La rektangelet være merket, åpne Rulleeffekter-panelet og merk av for Bevegelse i Bevegelse-fanen. Angi nøkkelposisjonen til 4979.
  3. Angi Startbevegelse til å bevege seg til høyre ved en hastighet på 1 ganger rullehastigheten. La alle andre felt i Bevegelse-fanen være angitt til 0.
Bruk rulleeffekter til å få rektangelet til å bevege seg inn på siden ved å fly inn fra venstre og bevege seg mot høyre i posisjon.
Bruk rulleeffekter til å få rektangelet til å bevege seg inn på siden ved å fly inn fra venstre og bevege seg mot høyre i posisjon.

  1. For å sikre at rektangelet er plassert bak de fire knappene, velger du Objekt > Plasser lengst bak når rektangelet er merket.
  2. Velg Fil > Plasser og bla for å velge en bildefil, og klikk deretter en gang på siden for å plassere den. I dette eksempelet er en PNG med gjennomsiktighet plassert for å vise et lyspærebilde. Lyspæren er plassert på toppen av det store rektangelet, på høyre side borte fra området som vil bli dekket av menyknappene. I dette eksempelet er bildet posisjonert 501 bildepunkter fra venstre (X-posisjon) og 5245 bildepunkter fra toppen av siden (Y-posisjon).
  3. Påse at bildet er plassert bak de fire knappene ved å velge Objekt > Plasser lengst bak når bildet er merket. Målet er å vise det plasserte bildet over det store rektangelet, men bak de fire knappene.
  4. Merk det plasserte bildet, åpne Bevegelse-fanen i Rulleeffekter-panelet og merk av for Bevegelse. Angi nøkkelposisjonen til ønsket verdi. I eksempelområdet er den angitt til 4979 bildepunkter.
  5. I Startbevegelse-delen angir du høyre verdi til å bevege seg ved en hastighet som er 75 ganger rullehastigheten. Angi alle de andre retningsverdiene til 0.
Angi Startbevegelse til å bevege seg til høyre ved samme hastighet som rektangelet.
Angi Startbevegelse til å bevege seg til høyre ved samme hastighet som rektangelet.

  1. Bruk Tekstverktøy til å opprette en tekstramme. I eksempelfilen har tekstrammen følgende innhold: Stack linked text frames with high contrast roll-overs to create unusual menus (Stable koblede tekstrammer med overrullinger med høy kontrast for å skape uvanlige menyer). Du kan imidlertid skrive inn det tekstinnholdet du vil. Bruk formateringsalternativene i Kontroll-panelet til å formatere teksten som ønsket. I dette eksempelet er det ikke brukt bakgrunnsfyllfarge på tekstrammen.
  2. Bruk Markeringsverktøy til å posisjonere tekstrammen til høyre for det plasserte bildet. I dette eksempelet er tekstrammen angitt til en X-verdi på 357 bildepunkter (fra venstre) og en Y-verdi på 5136 bildepunkter (fra toppen). Den faktiske plasseringen avhenger av tekstinnholdet og formateringsalternativene du bruker på tekstrammen.
  3. Merk tekstrammen, og bruk alternativet Objekt > Send bakover for å plassere den, eller beveg den i Lag-panelet, slik at tekstrammen vises bak de fire knappene, men over det store rektangelet.
  4. Merk av for Bevegelse i Rulleeffekter-panelet. Angi nøkkelposisjonen ved å dra T-håndtaket eller angi en verdi. I eksempelområdet er nøkkelposisjonen angitt til 4979 bildepunkter, den samme nøkkelposisjonsverdien som brukes av det plasserte bildet (lyspæregrafikk).
  5. I Startbevegelse-delen angir du at tekstrammen skal bevege seg mot venstre ved en hastighet som er 0,5 ganger rullehastigheten. Angi alle de andre feltene til 0.
Tekstrammen er satt til å bevege seg mot venstre (motsatt retning av rektangelet og det plasserte bildet) ved en langsommere hastighet.
Tekstrammen er satt til å bevege seg mot venstre med langsommere hastighet.

Den grunnleggende stablede menyen er nå fullstendig. Det er imidlertid enda et designelement du kan legge til. Dette går ut på å legge til flere roterte rektangler over det nedre høyre hjørnet i det store rektangelet, på samme måte som det ble brukt roterte rektangler til å legge til en diagonal stripe-effekt i eksempelet med den glidende menyen.

  1. Bruk Rektangelverktøy til å tegne flere rektangler med ulike bredder. Fyll rektanglene med den samme fargen som bakgrunnsfargen brukt på webleserfyllet. På den måten vil ikke rektanglene være synlige før det store rektangelet beveger seg til høyre og i posisjon bak dem. Hvis du ønsker, kan du gruppere settet med diagonale firkanter for å arbeide med dem som et enkelt element.
Roter en rekke rektangler slik at de skaper diagonale striper langs nedre høyre hjørne i det store rektangelet.
Roter en rekke rektangler slik at de skaper diagonale striper langs nedre høyre hjørne i det store rektangelet.

  1. Om nødvendig bruker du Lag-panelet eller velger Objekt > Plasser lengst bak, slik at det store rektangelet vises bakerst, bak alle de andre elementene på siden.
  2. Pass på å teste fremdriften regelmessig ved å klikke Forhåndsvisning, eller ved å forhåndsvise siden i en webleser og rulle ned for å se den stablede menyen bevege seg på plass. Gå tilbake til Muse når du er ferdig med testingen. 

Bakgrunnsbevegelse

Hvis du vil skape en bakgrunnseffekt, kan du opprette en rekke store rektangler fylt med bakgrunnsbilder side ved side som dekker lengden av en lang side. I dette eksempelet brukes Rull-fanen i Fyll-menyen (heller enn Bevegelse-fanen i Rulleeffekter-panelet) til å angi bevegelsesinnstillingene.

Følg disse trinnene hvis du vil skape en lignende bakgrunnsbevegelseseffekt:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 6254 bildepunkter.

Merk:

Til dette eksempelet spiller det ingen rolle om du angir en farge for webleserfyllet, fordi siden er dekket av rektangler. Angi sidefyllfargen til ingen.

  1. På toppen av siden bruker du Rektangelverktøy til å tegne et stort rektangel. I eksempelområdet er rektangelet 1159 bildepunkter bredt og 1312 bildepunkter høyt. Bruk Markeringsverktøy til å sentrere rektangelet på siden, og la begge sidene utvide seg fordi sidene i webleservinduet.
  2. La rektangelet være merket, og bruk Fyll-menyen til å angi et bakgrunnsbilde. Angi Tilpassing-menyen til Flis for å bruke bildet til en flis.
Angi et bakgrunnsbilde side ved side som fyll i rektangelet.
Angi et bakgrunnsbilde side ved side som fyll i rektangelet.

  1. Om ønsket kan du bruke Effekter-menyen til å angi en skyggeeffekt for å skape en dramatisk kant rundt rektangelet.
  2. Merk det fylte rektangelet, og åpne Rull-fanen i Fyll-menyen. Merk av for Bevegelse, og klikk og dra T-håndtaket eller angi et nummer i feltet for å angi nøkkelposisjonen. I eksempelområdet er nøkkelposisjonen angitt til 512 bildepunkter. Om ønsket kan du imidlertid skjule håndtaket for å stille det på linje med den øverste kanten av rektangelet.
  3. I Startbevegelse-delen angir du at retningen skal bevege seg ned og til venstre, og at begge hastighetene skal bevege seg 0,2 ganger rullehastigheten. Gjenta de samme innstillingene i Sluttbevegelse-delen. 
Angi Bevegelse-alternativene i Rull-fanen i Fyll-menyen.
Angi Bevegelse-alternativene i Rull-fanen i Fyll-menyen.

  1. Gjenta trinn 2–6 for å opprette et annet fylt rektangel. Plasser det nye rektangelet rett under det første rektangelet du laget, slik at ikke noe av webleserfyllområdet vises gjennom, og slik at det ikke er noe mellomrom mellom de to rektanglene. Fyll det nye rektangelet med et annet bakgrunnsbilde side ved side.
  2. Gjenta trinn 7 for å opprette et tredje stort rektangel som plasseres rett under det andre rektangelet. Bruk Fyll-menyen til å angi en annet bakgrunnsbilde side ved side. Det kan være nyttig å zoome ut ved hjelp av Vis-menyen for å se alle firkantene og justere dem vertikalt på siden.
Zoom ut, og bruk Markeringsverktøy til å plassere de tre store rektanglene vertikalt.
Zoom ut, og bruk Markeringsverktøy til å plassere de tre store rektanglene vertikalt.

Merk:

I eksempelområdet er det tredje rektangelet lengre enn de to første. Du kan dra håndtakene for å utvide høyden på det tredje dupliserte rektangelet eller opprette et fjerde rektangel for å fylle det gjenstående nederste området på siden.  

  1. Merk det andre rektangelet, og åpne Rull-fanen i Fyll-menyen. Oppdater Startbevegelse-delen til å bevege seg til høyre ved en hastighet som er 3 ganger rullehastigheten. I Startbevegelse-delen bruker du de samme innstillingene for å bevege rektangelet til høyre ved en hastighet som er 3 ganger rullehastigheten. La begge de vertikale retningsfeltene være angitt til 0.
Angi innstillingene for Startbevegelse og Sluttbevegelse for å bevege det andre rektangelet til høyre.
Angi innstillingene for Startbevegelse og Sluttbevegelse for å bevege det andre rektangelet til høyre.

  1. Merk det tredje rektangelet, og oppdater innstillingene i Rull-fanen i Fyll-menyen. Angi Startbevegelse-delen til å bevege seg oppover ved en hastighet som er 0,25 ganger rullehastigheten, og til venstre ved en hastighet som er 0,6 ganger rullehastigheten. Bruk de samme innstillingene i Sluttbevegelse for det tredje rektangelet.
  2. Test siden ved å velge Fil > Forhåndsvis side i webleser. Rull siden for å se hvert av rektanglene side ved side som ser ut som om de beveger seg diagonalt til du ruller ned til bunnen av siden. Når du ruller opp, fortsetter rektanglene å bevege seg.
  3. Lukk webleseren, og gå tilbake til Muse-arbeidsområdet.

Masker

I dette eksempelet vises et stolpediagram som animeres på plass. En rosa pilgrafikk utvider seg oppover og flettes over og under linjene i diagrammet. Selv om stolpene i diagrammet ser ut til å vokse seg høyere fra bunnen av diagrammet, er de faktisk rektangler med heltrukket farge hvor det er brukt bevegelsesrulleeffekter som gjør at de kommer til syne fra baksiden av større hvite rektangler (fylt med den samme heltrukne hvite fargen som sidens bakgrunnsfarge).

Dette eksempelet bruker flere teknikker sammen med rulleeffekter. Elementene er plassert foran og bak hverandre med Lag-panelet. Hvite rektangler tegnes på toppen av diagramelementene. Når de hvite rektanglene dekker stolpediagrammet, er stolpene og pilen skjult fra visningen – som om de er maskert. De hvite rektanglene og diagramtabellen bruker 0-innstillinger i bevegelsesrulleeffektene for å forbli på plass mens siden ruller. Stolpene og den rosa pilgrafikken som er lagdelt under, har bevegelsesrulleeffekter som får dem til å bevege seg opp og til syne mens stolpediagrammet samles.

Følg disse trinnene hvis du vil skape en lignende maskeeffekt:

  1. I Design-visningen velger du Side > Egenskaper for side. Angi en mye høyere verdi i Minste høyde-feltet. I dette områdeeksempelet er den minste høyden på siden angitt til 6076 bildepunkter.
  2. Angi både Side- og Webleserfyll til en heltrukket hvit farge (eller en annen farge du foretrekker – men bruk den samme fargen til å fylle de maskerte rektanglene senere).
  3. Bruk Rektangelverktøy til å tegne et stort rektangel på siden. Rektangelet i eksempelområdet er 804 bildepunkter bredt og 489 bildepunkter høyt.
  4. Angi fyllfargen for rektangelet til ingen. Angi en ønsket strekfarge. I Strek-menyen angir du at de venstre og nedre sidene av rektangelet skal vise en strek med en vekt på 20, mens toppen og de høyre sidene er angitt til 0 for å skjule streken. Dette oppretter grunnlaget for søylediagrammet.
     
Bruk Strek-menyen til å angi en strek på venstre og nedre sider av rektangelet.
Bruk Strek-menyen til å angi en strek på venstre og nedre sider av rektangelet.

  1. Merk rektangelet, og åpne Bevegelse-fanen i Rulleeffekter-panelet. Angi nøkkelposisjonen til 0 i alle fire felt. Denne innstillingen betyr at firkanten ikke vil bevege seg før eller etter at nøkkelposisjonen er nådd, slik at elementet holder seg på plass.
Angi 0 i alle feltene for å "feste" rektangelet på siden.
Angi 0 i alle feltene for å "feste" rektangelet på siden.

  1. Bruk Rektangelverktøy til å tegne to større rektangler. Tegn det første rektangelet slik at det er på linje med venstre side av diagrammet. I eksempelområdet er rektangelet 657 bildepunkter bredt og 1810 bildepunkter høyt.
  2. Tegn det andre rektangelet under diagrammet, slik at det på linje med den nederste kanten. I eksempelområdet er rektangelet 1002 bildepunkter bredt og 1541 bildepunkter høyt.
  3. Angi hvit fyllfarge for begge rektanglene (eller samme farge som webleserfyllet), og angi streken til 0. Bruk markeringsverktøyet til å justere triangelet i forhold til de to sidene av diagrammet.
Plasser de to større rektanglene til venstre og under stolpediagrammet.
Plasser de to større rektanglene til venstre og under stolpediagrammet.

  1. Merk rektanglene, og høyreklikk og velg Objekt > Gruppe for å gruppere de to maskerte rektanglene sammen.
  2. Når du har merket gruppen med rektangler, åpner du Bevegelse-fanen i Rulleeffekter-panelet. Angi nøkkelposisjonen (i eksempelet er det 1516 bildepunkter), og angi 0 i alle de fire feltene. Denne innstillingen betyr at gruppen med hvite rektangler ikke vil bevege seg før eller etter at nøkkelposisjonen er nådd. Gruppen forblir på plass akkurat som den ytre tabellen for diagrammet.
  3. Bruk Lag-panelet til midlertidig å skjule og låse gruppen.
  4. Rull ned til rommet under gruppen, og bruk Rektangelverktøy til å tegne totalt fem rektangler som alle har samme bredde. I eksempelområdet er alle linjene 74 bildepunkter brede og har varierende høyde. Høydene på de fem rektanglene, fra venstre til høyre, i eksempelet er 141, 188, 292, 444 og 583. Alle firkantene er fylt med samme grønnfarge som strøket som definerer den venstre og nedre kanten av søylediagrammet.
Plasser de fem rektanglene forskjøvet i forhold til hverandre langs siden.
Plasser de fem rektanglene forskjøvet i forhold til hverandre langs siden.

  1. Plasseringen til rektanglene (fra venstre til høyre) står oppført nedenfor, etter deres X- og Y-verdier:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. Deretter merker du hvert av rektanglene. Begynn med rektangelet til venstre og jobb deg mot høyre. Merk hvert enkelt rektangel, merk av for Bevegelse i Bevegelse-fanen i Rulleeffekter-panelet og angi følgende nøkkelposisjoner:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. La alle rektanglene være merket, og oppdater innstillingene i Rulleeffekter-panelet, slik at Startbevegelse-delen beveger seg opp ved en hastighet som er 1 ganger rullehastigheten. Angi alle de andre feltene til 0.
     
Angi bevegelsesverdiene for alle fem rektangler samtidig i Rulleeffekter-panelet.
Angi bevegelsesverdiene for alle fem rektangler samtidig i Rulleeffekter-panelet.

  1. Plasser en PNG-fil med gjennomsiktighet på siden. I eksempelområdet er PNG-filen en grafikk av en rosa pil som går i sikksakkbevegelse oppover. PNG-filen i dette eksempelet er 695 bildepunkter bred og 443 bildepunkter høy. Etter å ha plassert det på siden, beveger du det til plasseringen X: 78 og Y: 3427.
  2. I Lag-panelet plasserer du PNG-filen under det første og tredje søylerektangelet (fra venstre), men over den andre, fjerde og femte søylen.
Bruk Lag-panelet til å plassere PNG-pilbildet slik at de ser ut til å veve mellom stolpene i diagrammet.
Bruk Lag-panelet til å plassere PNG-pilbildet slik at de ser ut til å veve mellom stolpene i diagrammet.

  1. Merk pilbildet, åpne Bevegelse-fanen i Rulleeffekter-panelet og merk av for Bevegelse. Angi nøkkelposisjonen (i eksempelet er det 3238 bildepunkter). I Startbevegelse-delen angir du retningene opp og til venstre og angir rullehastigheten til 0,25 ganger i begge Startbevegelse-feltene. Angi begge feltene i Sluttbevegelse-delen til 0.
Oppdater innstillingene for bevegelse i Rulleeffekter-panelet.
Oppdater innstillingene for bevegelse i Rulleeffekter-panelet.

  1. I Lag-panelet viser du og låser opp gruppen med de to hvite rektanglene som du skjulte og låste tidligere. Flytt gruppen over de andre elementene, slik at den vises på toppen av det andre innholdet på siden. Siden gruppen er øverst, vil den fungere som en maske slik at bare stolpene og pilgrafikken vises når de beveger seg opp inne i rammen for diagrammet.
  2. Test siden ved å velge Fil > Forhåndsvis side i webleser. Rull siden for å se stolpediagrammet bevege seg i posisjon mens de to hvite rektanglene som maskerer stolpene, skjuler stolpediagramelementene til de er inne i diagrammet.
  3. Lukk webleseren, og gå tilbake til Muse-arbeidsområdet.

Eksempler på områdedesign som bruker rulleeffekter

Se webområdet Demential Lab for å se hvordan Rulleeffekter-funksjonen fungerer.

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