Lær hvordan du legger til kontrollprogrammer for komposisjon i Adobe Muse. Konfigurer kontrollprogrammer for komposisjon for å lage interaktive områder.

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.

Ved hjelp av kontrollprogrammer for komposisjon i Adobe Muse kan du legge til kompleks interaktivitet i webområdene dine. Enten det er snakk om et webområde for fotografier eller et webområde for en restaurant, kan kontrollprogrammer for komposisjon være nesten uunnværlige for et webområde, og kan brukes til å vise en rekke typer innhold. Du kan bruke disse kontrollprogrammene til å lage unike navigasjons- og webleseropplevelser uten å skrive en eneste linje med kode.

Adobe Muse tilbyr flere typer kontrollprogrammer for komposisjon som lar deg legge til og designe ulike typer innhold for webområdet ditt. Hvis du for eksempel er en bruker som oppretter et webområde for fotografier, kan du velge et kontrollprogram for lysboksvisning for å legge til et bildegalleri på webområdet ditt. Dette kontrollprogrammet toner midlertidig ned resten av siden, slik at den besøkendes fokus trekkes mot det aktive visningsområdet.

Det er også mulig å lage interessante webdesigner ved å neste kontrollprogrammer inni et kontrollprogram for komposisjon. Hvis du for eksempel designer en katalog, kan du bruke et kontrollprogram for en tom komposisjon for å opprette en hamburgermeny, og neste et kontrollprogram for lysbildefremvisning i Mål-området til kontrollprogrammet for en tom komposisjon. Slike designer gir en unik brukeropplevelse for de besøkende på webområdet ditt.

Les videre for å lære om de ulike typene kontrollprogram for komposisjon som er tilgjengelige i Adobe Muse.

Typer kontrollprogrammer for komposisjon

Et kontrollprogram for komposisjon omfatter to beholdere: Utløser og Mål. Utløserområdet er der en besøkende på webområdet klikker, og målområdet er det tilsvarende område som vises. Du kan koble utløser- og målområdene sammen for å legge til kompleksitet og interaktivitet på webområdet ditt.

Adobe Muse har følgende typer kontrollprogrammer for komposisjon. Ut fra dine designbehov kan du enten bruke ett av disse kontrollprogrammene eller en kombinasjon av dem gjennom nesting.

Tom

Kontrollprogram for tom komposisjon i Adobe Muse
Kontrollprogram for tom komposisjon i Adobe Muse

Dette er et kontrollprogram med små miniatyrbilder. Som standard har ikke dette kontrollprogram noe fyll. Du kan manuelt koble dette til en målbeholder.

Aktuelle nyheter

Aktuelle nyheter – kontrollprogram for tom komposisjon i Adobe Muse
Aktuelle nyheter – kontrollprogram for tom komposisjon i Adobe Muse

Dette kontrollprogrammet fungerer omtrent som et trekkspillkontrollprogram. Du kan legge til tekst og bilder i beholderområdet for dette kontrollprogrammet.

Lysboksvisning

Lysboksvisning – kontrollprogram for lysboksvisning i Adobe Muse
Lysboksvisning – kontrollprogram for lysboksvisning i Adobe Muse

Et kontrollprogram der innholdet i målområdet blir aktivt når du klikker utløseren. Resten av siden tones ned når målet vises.

Presentasjon

Kontrollprogram for presentasjon i Adobe Muse
Kontrollprogram for presentasjon i Adobe Muse

Dette kontrollprogrammet inneholder små miniatyrbilder som er koblet til målpresentasjonsområdet. Som standard sveipes lysbildene horisontalt i dette kontrollprogrammet.

Verktøytips

Kontrollprogram for verktøytips i Adobe Muse
Kontrollprogram for verktøytips i Adobe Muse

Dette kontrollprogrammet inneholder verktøytipstekst. Når en bruker holder pekeren over utløserområdet, vises verktøytipset umiddelbart.

Legge til og konfigurere kontrollprogrammer for komposisjon

Hvis du vil legge til og bruke et kontrollprogram for komposisjon i Adobe Muse, velger du kontrollprogrammet for komposisjon som du vil legge til, og drar kontrollprogrammet til Design-visningen. Disse kontrollprogrammene er responsive som standard, og du kan se at kontrollprogrammet er flytende på tvers av ulike avbruddspunkter. Hvis du vil endre posisjonen eller innholdet i et kontrollprogram for komposisjon, kan du endre, forandre størrelse på og feste de enkelte kontrollprogramelementene for et bestemt avbruddspunkt.

Følg denne fremgangsmåten for å legge til et kontrollprogram for komposisjon i layouten.

  1. Åpne Adobe Muse. I velkomstskjermbildet klikker du enten Opprett ny for å opprette et nytt webområde, eller du åpner et eksisterende Adobe Muse-webområde der du vil legge til et kontrollprogram for komposisjon.

  2. Gå til Planlegg-visningen, og dobbeltklikk og åpne siden der du vil legge til kontrollprogrammet.

  3. Åpne kontrollprogrambiblioteket (Vindu > Kontrollprogrambibliotek), og klikk Komposisjoner for å utvide alternativet. Velg et av kontrollprogrammene for komposisjon ut fra ditt designbehov.

    Du kan for eksempel velge en lysboksvisning fra kontrollprogrambiblioteket.

    Merk:

    Hvis du vil fjerne alt standardinnholdet i et kontrollprogram, høyreklikker du kontrollprogrammet og velger Fjern kontrollprograminnhold.

    Dra et kontrollprogram for komposisjon fra kontrollprogrambiblioteket i Adobe Muse.
    Dra et kontrollprogram for komposisjon fra kontrollprogrambiblioteket.

    Standardversjonen av kontrollprogrammet for lysbokskomposisjon har tre mindre grå utløserbokser over den større grå målbeholderen.

    Når de besøkende klikker en utløserbeholder, vises målbeholderen til kontrollprogrammet for lysboksvisning. Du kan bygge inn bilder, tekst og videoer, inkludert YouTube-videoer, som målet.

  4. Velg beholderen eller utløseren i kontrollprogrammet for komposisjon. Velg kontrollprogrammet for å velge hele kontrollprogrammet. Valgindikatoren øverst til venstre i programmet viser ordet Komposisjon.

    Du kan velge utløseren ved å dobbeltklikke og velge de mindre boksene i dette kontrollprogrammet. Ordet Utløser vises i valgindikatoren. De mindre boksene er utløserne for dette kontrollprogrammet. De er knapper som responderer på det brukerne gjør.

    Se valgindikatoren øverst til venstre på Adobe Muse-siden
    Se valgindikatoren øverst til venstre på siden

    Du kan slå fast at ingen andre elementer er merket når valgindikatoren øverst til venstre viser ordet Side.

  5. Velg Fil > Plasser for å åpne dialogboksen Importer. Bla gjennom for å velge filene du vil plassere i dette kontrollprogrammet. Klikk Åpne for å velge filen, og lukk dialogboksen Importer.

    Klikk én gang hvor som helst på siden for å plassere bildet i full størrelse.

  6. Mens bildet fortsatt er valgt, høyreklikker du og velger Klipp ut på kontekstmenyen.

    Du kan også bruke tastatursnarveien for å klippe ut bildet – når du bruker den, fjernes bildet fra siden og kopieres til utklippstavlen.

  7. Høyreklikk utløserknappen, og velg Lim inn. Du kan også bruke tastatursnarveien for å lime inn bildet i utløseren. Vær oppmerksom på at utløserbeholderen automatisk utvides i størrelse til bildets dimensjoner.

    Det kan være vanskelig å lime innhold inn i en beholder. Det kan hende at du tror at innholdet er limt inn i beholderen, men at innholdet faktisk er limt inn på siden.

    Hvis du må bekrefte at bildet finnes i utløserbeholderen, trykker du Esc én gang og sjekker valgindikatoren. Hvis ordet Utløser vises, vet du at bildet er i utløserbeholderen. Hvis valgindikatoren viser ordet Side, må du klippe ut bildet og lime det inn i utløserbeholderen på nytt.

    Du kan også åpne Lag-panelet (Vindu > Lag) for å bekrefte hvor bildet er limt inn. Lag-panelet viser hierarkiet for elementene på en side.

  8. Du kan legge til flere miniatyrbilder ved å klikke plusstegnet (+) ved siden av utløserbeholderne.

    Klikk + for å legge til miniatyrbilder i en lysboksvisning
    Klikk + for å legge til miniatyrbilder
  9. Når du har plassert kontrollprogrammet i Design-visningen, kan du begynne med å konfigurere kontrollprogrammet. Du kan konfigurere alternativene for kontrollprogrammet for komposisjon ved å velge kontrollprogrammet og klikke den blå pilen øverst til høyre i kontrollprogrammet.

    Konfigurere kontrollprogrammer for komposisjon ved hjelp av Alternativer-menyen
    Konfigurere kontrollprogrammer for komposisjon ved hjelp av Alternativer-panelet

    Du kan konfigurere de følgende innstillingene i Alternativer-panelet:

    • Plassering: Angir hvor målområdet er plassert på siden. Velg Stablet hvis du vil at målene skal overlappe, og velg Spredt hvis du vil at målene skal ha ulike plasseringer. Velg Lysboks hvis du vil tone ned resten av siden.
    • Vis mål: Angir innstillingen for målatferd når en bruker klikker utløseren. 
    • Skjul mål: Angir innstillingene for skjuling av et mål. Målområdet forblir skjult med mindre en bruker klikker utløseren. 
    • Overgang: Angir hvordan innholdet i målområdet endres når en bruker klikker eller ruller over utløseren. Velg Uttoning for å tone inn det nye målet, Horisontal for å bringe inn målene i en horisontal bevegelse, Vertikal for å bringe inn målene i en vertikal bevegelse. 
    • Overgangshastighet: Angir hastigheten på overgangen for kontrollprogrammet for komposisjon. Hvis du vil at overgangen skal være umiddelbar, velger du Ingen.
    • Autoavspilling: Konfigurer dette alternativet for å opprette en lysbildefremvisning på webområdet ditt. Hvis du velger dette alternativet, spilles lysbildene av automatisk, uten at brukeren gjør noe.
    • Bland: Velg dette alternativet hvis du vil vise målene i tilfeldig rekkefølge.
    • Utløsere øverst: Velg dette alternativet hvis du vil plassere utløseren ovenfor målbeholderen. Du kan se det samme hierarkiet i Lag-panelet også.
    • Aktiver sveip: Velg dette alternativet for å aktivere sveipebevegelse for å flytte til neste mål for berøringsaktiverte enheter.
    • Skjul alle først: Velg dette alternativet hvis du vil skjule målalternativene ved første innlasting av webområdet. Brukerne må klikke den tilsvarende utløseren for å se et mål.
    • Automatisk lysboks: Velg dette alternativet hvis du vil at lysboksen skal vises automatisk når webområdet lastes inn.
    • Deler: Velg Forrige-, Neste- eller Lukk-knappen som alternativ for å legge til ekstra interaktivitet i kontrollprogrammet. Brukere kan klikke Forrige-, Neste- eller Lukk-alternativene på webområdet.
    • Redigering: Velg Vis lysboksdeler mens du redigerer for å vise Design-visningen når du redigerer kontrollprogrammet. Velg Vis alle i Design-modus for å vise alle målbeholderne samtidig i Design-visningen.
    Konfigurere innstillingene for kontrollprogrammer for komposisjon i Adobe Muse
    Konfigurer innstillingene for kontrollprogrammer for komposisjon

    Merk:

    Alternativet Vis lysboksdeler mens du redigerer deaktiveres når du har valgt Spredt eller Stablet som alternativ på rullegardinlisten for Plassering.

    Alternativet Skjul alle først deaktiveres hvis du velger alternativet Automatisk lysboks.

  10. Hvis du vil fjerne utløsere du ikke trenger, dobbeltklikker du for å velge den utløseren du vil slette. Trykk Slett-tasten (Mac) eller Tilbake-tasten (Windows) for å fjerne den valgte utløseren.

  11. Klikk hovedbildet i utløserbeholderen for å ta i bruk lysbokseffekten.

    Klikk et bilde til venstre (utløser) for å vise lysboksvisningen
    Klikk et bilde til venstre (utløser) for å vise lysboksvisningen (som vist til høyre)

    Trykk Escape for å lukke lysboksvinduet og gå tilbake til Design-visningen for å fortsette med å redigere Adobe Muse-siden.

  12. Når du har konfigurert og plassert kontrollprogrammet for komposisjon i designen, kan du teste kontrollprogrammet i Forhåndsvisning-visningen.

Hvis du velger et kontrollprogram for komposisjon i en responsiv layout, kan du lese den følgende delen. Sørg for at du tester og forhåndsviser kontrollprogrammet ved alle avbruddspunkter.

Bruke kontrollprogrammer for komposisjon i en responsiv layout

Kontrollprogrammer for komposisjon er som standard flytende eller responsive. Du kan legge til og bruke kontrollprogrammer for komposisjon i en responsiv layout ved å gjøre ett av følgende:

  • Hvis du oppretter et nytt responsivt område med den nyeste versjonen av Adobe Muse, gjør du slik: Gå til Kontrollprogrambibliotek-panelet, og dra og plasser kontrollprogrammet for komposisjon i Design-visningen.
  • Hvis du bruker Adobe Muse 2017.0.3 eller tidligere versjoner, er ikke kontrollprogrammet for komposisjon responsivt. I så fall åpner du .muse-filen i den nyeste versjonen av Adobe Muse. Velg elementene inne i kontrollprogrammet, og velg Endre størrelse-alternativet Responsiv bredde og høyde (det som er aktuelt).
Omgjøring av ikke-responsive kontrollprogrammer for komposisjon til responsive
Omgjøring av ikke-responsive kontrollprogrammer for komposisjon til responsive

Merk:

Du kan ikke velge hele kontrollprogrammet og endre Endre størrelse-alternativene. Velg ett eller flere enkeltelementer i kontrollprogrammet for å gjøre det responsivt.

Konfigurer kontrollprogrammet ved å følge fremgangsmåten som er beskrevet under Legge til og konfigurere kontrollprogrammer for komposisjon. Når du har konfigurert og formatert kontrollprogrammet, kan du enten forhåndsvise kontrollprogrammet i en webleser eller bruke markøren og endre størrelsen. Du vil se at størrelsen på slike kontrollprogrammer automatisk endres etter skjermstørrelsen.

Kontrollprogram for responsiv komposisjon i Adobe Muse
Kontrollprogram for responsiv komposisjon i Adobe Muse

Merk:

Når du legger til kontrollprogrammer for komposisjon i en responsiv layout, anbefales det at du setter opp en design i det største avbruddspunktet først. Når du er ferdig med å plassere og konfigurere kontrollprogrammet ved det største avbruddspunktet, kan du eventuelt legge til flere avbruddspunkter der det er behov for det.

Hvis du vil vite mer om hvordan du designer området ditt med en responsiv layout, kan du se Layout av objekter i en responsiv design.

Kombinere et kontrollprogram for komposisjon med andre kontrollprogrammer

Et av de mest unike aspektene ved et kontrollprogram for komposisjon er støtten for nestede kontrollprogrammer inne i et kontrollprogram for komposisjon. Det betyr at du kan legge til kontrollprogrammer som skjemaer, lysbildefremvisninger eller menyelementer i et kontrollprogram for komposisjon.

Du kan for eksempel legge til et kontrollprogram for lysbildefremvisning inne i målbeholderen for et kontrollprogram for aktuelle nyheter på et webområde for matlaging. Når en besøkende på webområdet klikker menyetiketten (kontrollprogrammet for aktuelle nyheter), vises målområdet som inneholder galleriet, som en lysbildefremvisning.

Du kan også legge til et kontaktskjema som et mål, slik at en bruker som klikker Kontakt-etiketten, tas umiddelbart til kontaktskjemaet.

Det finnes mange flere kombinasjoner og designmuligheter du kan oppnå med nesting. Vær imidlertid oppmerksom på følgende aspekter når du designer nestede kontrollprogrammer i en responsiv layout:

  • Festing er ikke tilgjengelig for responsive elementer som er nestet inne i en ikke-responsiv beholder. 
  • Objekter vil ikke være responsive når du plasserer dem inne i en ikke-responsiv beholder.

Merk:

Når du nester kontrollprogrammer inne i kontrollprogrammer for komposisjon, anbefales det at du ikke bruker mer enn tre nivåer med nesting.

I den følgende delen kan du lese om hvordan du oppretter en undermeny ved hjelp av et kontrollprogram for komposisjon. Les videre for å lære dette eksempelscenarioet for å opprette en skjult undermeny i områdenavigeringen.

Opprette undermenyer ved hjelp av kontrollprogrammer for komposisjon

Du kan konfigurere kontrollprogrammer for komposisjon for å bygge områdenavigering med undermenyer. Du kan opprette et menyelement som viser en undermeny når en bruker ruller markøren over det aktive området, og skjuler den samme undermenyen når brukeren ruller markøren bort fra det aktive området som utløste visningen av undermenyen. Du kan også konfigurere kontrollprogrammet slik at en undermeny skjules hvis en bruker velger ikke å klikke noen av koblingene på undermenyen og i stedet ruller markøren bort fra undermenyen. Evnen til å opprette disse typene med interaktive undermenyer er nyttig når du bygger et navigasjonsfelt for et område med mange forskjellige underdeler. 

Vis mål-menyen og Skjul mål-menyen er nyttige når du ønsker å gjenskape en vanlig menyatferd for webområdet ditt. Brukere kan klikke koblingene, eller de kan rulle markøren utenfor vindusområdet for å skjule vinduet. Du trenger ikke klikke en lukkeknapp for å skjule en undermeny når dette alternativet er aktivert.

Denne funksjonen er tilgjengelig når du arbeider med følgende kontrollprogrammer for komposisjon:

  • Tom
  • Aktuelle nyheter
  • Verktøytips

På Alternativer-panelet finner du to kommandoer for å vise målbeholderen:

  • Ved klikk: Viser målet når en bruker klikker
  • Ved overrulling: Viser målet når en bruker ruller over utløseren

Du kan også velge å skjule målbeholderen i et kontrollprogram for komposisjon. Dette er de fire alternativene for skjuling av målbeholderen:

  • Ingen
  • Ved klikk
  • Ved utrulling
  • Ved utrulling av utløser og mål

I denne delen ser du hvordan du bruker Ved overrulling-funksjonen for å vise målbeholderen, og Ved utrulling-funksjonen i både utløserbeholderen og målbeholderen for å skjule målbeholderen.

Følg trinnene nedenfor for å finne ut hvordan du kan aktivere Skjul ved utrulling-innstillingene for kontrollprogrammer for komposisjon for å opprette en menylinje som skjuler og viser koblinger til undermenyer basert på hva brukerne gjør:

  1. Legg til et kontrollprogram for komposisjon på siden i Design-visningen ved å dra kontrollprogrammet fra kontrollprogrambiblioteket.

  2. Velg utløserbeholderne. Flytt alle tre utløserbeholderne til toppen over den store målbeholderen ved hjelp av markeringsverktøyet, og bruk like stort mellomrom mellom dem.

    Flytte utløserbeholderne
    Omplasser utløserbeholderne over det største hovedbildet.

  3. Bruk markeringsverktøyet til å dra sidehåndtakene for hver utløserbeholder. Utvid bredden for å opprette et sett med tre "faner" øverst, som minner om et kontrollprogram for panel med faner.

    Bruk rektangelet for å dra håndtakene
    Dra markeringsrammene for å utvide bredden på de tre utløserknappene.

  4. Legg til det nødvendige innholdet i hvert av de tre utløserområdene. Utløserinnholdet kan inkludere tekst, koblinger, bilder, rektangler, innebygd HTML og mer. Du kan for eksempel bruke tekstverktøyet til å legge til tekst i hver utløser: Kobling én, Kobling to og Kobling tre.

    Opprett deretter en kobling i det andre målinnholdsområdet.

  5. Klikk en utløserbeholder, og velg deretter den større målbeholderen som er tilknyttet den. Legg til en kobling i det andre målinnholdsområdet. Klikk deretter rullegardinlisten ved siden av etiketten Hyperkoblinger til høyre i Kontroll-panelet. Legg til en kobling til webadressen du vil koble til.

  6. Velg Fil > Forhåndsvis side i webleser for å teste hvordan kontrollprogrammet for komposisjon vises.
    Samhandle med kontrollprogrammet ved å klikke utløserbeholderne Kobling én, Kobling to og Kobling tre.

    Legg merke til at målbeholderen som standard alltid vises og aldri er skjult. Du kan klikke mellom de tre utløserknappene for å vise den tilsvarende målbeholderen, men én av de tre målbeholderne vises alltid.

  7. For å konfigurere Skjul ved utrulling-innstillingen velger du kontrollprogrammet for komposisjon. Klikk den blå pilen for å få tilgang til Alternativer-panelet og redigere kontrollprogrammets konfigurasjonsalternativer.

    Sørg for at følgende innstillinger er aktivert:

    • Plassering: Stablet (standard)
    • Vis mål: Ved overrulling
    • Skjul mål: Ved utrulling av utløser og mål
    • Overgang: Uttoning (standard)
    • Overgangshastighet: 0,5 sekunder (standard)
    • Spill av automatisk: Deaktivert (standard)
    • Bland: Deaktivert (standard)
    • Skjul alle først: Aktivert
    Alternativer-panel for komposisjoner
    Oppdater innstillingene på Alternativer-panelet for å kontrollere hvordan kontrollprogrammet fungerer.

    Nøkkelinnstillingene som kontrollerer Skjul-/Vis-funksjonaliteten, er Vis mål-menyen, Skjul mål-menyen og alternativet Skjul alle først.

  8. Velg Fil > Forhåndsvis side i webleser på nytt for å teste de nylige endringene i kontrollprogrammet.

    Når kontrollprogrammet for komposisjon starter for første gang, er alle områdene som standard skjult.

    Samhandle med kontrollprogrammet på nytt. Legg merke til at når du ruller over et utløserområde, vises det tilsvarende målområdet. Hvis markøren forblir i kontrollprogramområdet, kan du samhandle med innhold i målområder (for eksempel ved å klikke koblingen til et webområde i den midterste målbeholderen).

    Hvis du imidlertid ruller markøren bort fra utløseren eller målområdene, skjules målområdene til du ruller over et annet utløserområde.

    Ved hjelp av denne funksjonen kan du konfigurere mye mer avansert, interaktiv områdenavigering som reagerer på musebevegelsene til brukerne.

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