Lær hvordan du kan opprette omfattende og interaktive Adobe Muse-webområder med animasjoner og rulleeffekter som er opprettet ved hjelp av Adobe Edge Animate.

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.

Adobe Edge Animate er et verktøy for samhandlingsdesign som gjør deg i stand til å legge til animert innhold på webområder ved hjelp av webstandarder som HTML5. Du kan bruke det intuitive tidslinjegrensesnittet i Animate til å lage imponerende HTML5-animasjoner som spilles av når de vises i moderne weblesere.

Klargjøre animasjoner i Animate

Før du overfører innhold fra Animate til Muse, kan du utføre noen endringer for å klargjøre Animate-filen, slik at den kan bygges sømløst inn i Muse. Gjør følgende:

  1. Start Animate. Vinduet Get Started (Komme i gang) vises.

  2. Klikk Open File (Åpne fil), og bla deretter til en eksempelprosjektfil med filtypen .an som du har lastet ned. Du kan også åpne en Animate-fil som du har opprettet, hvis du foretrekker det.

    Med Adobe Muse kan du bygge inn Edge Animate-animasjoner.
    Klikk på koblingen Open File (Åpne fil) i vinduet Get Started (Komme i gang).

  3. Klikk Open (Åpne) for å åpne *.an-filen og lukke dialogboksen Open (Åpne). Prosjektet vises i arbeidsområdet til Animate.

    Prosjektet vises
    Animate-prosjektet vises på scenen.

    Animasjoner som er laget ved hjelp av Animate, er enten angitt til å spille av automatisk (autoavspilling) eller krever at du klikker et statisk bilde for å spille av animasjonen når den lastes inn. SkyScraper-eksempelet er angitt til automatisk avspilling og krever ingen brukerhandling. Når automatisk avspilling er slått av, vises det imidlertid et statisk bilde på siden til det klikkes på animasjonen. Hvis du vil se et eksempel på en animasjon uten automatisk avspilling, kan du gå til Animate Showcase.

    Merk:

    For å angi om en animasjon skal spilles av umiddelbart kan du velge scenen og merke av for eller fjerne merkingen av Autoplay (Automatisk avspilling) i panelet Properties (Egenskaper).

    Alternativet Automatisk avspilling
    Aktiver automatisk avspilling ved å velge egenskapen Autoplay (Automatisk avspilling).

  4. Klikk bakgrunnsbildet for å velge det på scenen. Når det er valgt, vises det en blå markeringsramme, og panelet Properties (Egenskaper) på venstre side viser egenskapene for bildet (med navnet Image2 i dette eksempelet). Trykk Tilbake-tasten (Windows) eller Delete (Mac) for å fjerne bakgrunnsbildefilen.

    Blå markeringsramme
    Velg bakgrunnsbildet, og slett det.

  5. Mens scenen fremdeles er valgt, klikker du fargeflisen for scenen i panelet Properties (Egenskaper) og velger alternativet for gjennomsiktig.

    Alternativet Gjennomsiktig
    Angi bakgrunnsegenskapen for scenen til gjennomsiktig.

    Merk:

    Innholdet på scenen viser en hvit bakgrunn. Du ser ikke den gjennomsiktige bakgrunnen på scenen, med mindre du eksporterer eller forhåndsviser animasjonen.

  6. Velg Fil > Lagre for å lagre de nylige endringene.

  7. Velg Fil > Publiseringsinnstillinger for å åpne dialogboksen Publiseringsinnstillinger.

  8. I kolonnen Publish Target (Publiseringsmål) til venstre opphever du merkingen for Web og merker av for Animate Deployment Package (Animate-pakke for distribusjon).

  9. Klikk Save (Lagre) for å lagre endringene og lukke dialogboksen Publish Settings (Publiseringsinnstillinger).

  10. Velg File > Publish (Fil > Publiser) for å publisere prosjektet.

  11. Avslutt Animate. Bruk Windows Utforsker (eller Mac OS Finder) til å finne Animate-prosjektmappen på harddisken. Når prosjektet er publisert, finner du en mappe kalt Animate Package. Bruk OAM-filen i denne mappen for å legge til Animate-innhold på Muse-webområdet ditt.

  12. Kopier .OAM-filen, og lagre den i den mappen på skrivebordet som inneholder alle de andre bildene og områdeinnholdselementene for webområdet ditt. Når du har publisert animasjonen og lagret filen i områdemappen, fortsetter du til neste del for å plassere Animate-innholdet på en side.

Plassere animasjoner som er opprettet ved å bruke Animate på en Muse-webside

Følg disse trinnene for å legge til animasjonen på en side på Muse-webområdet ditt:

  1. Start Adobe Muse, og åpne området som du vil redigere.

  2. I Planlegg-visning dobbeltklikker du navnet til siden som du vil legge til animasjonen på.

  3. Velg Fil > Plasser ..., og naviger deretter for å velge *.OAM-filen i områdemappen.

  4. Klikk én gang på siden for å plassere animasjonen.

    Merk:

    I motsetning til når du plasserer bilder, kan du ikke klikke og dra for å endre størrelsen på en Animate-animasjon når du plasserer den. Hvis du vil plassere innholdet med en annen størrelse, må du oppdatere Edge-prosjektet og publisere .OAM-filen på nytt.

  5. Bruk markeringsverktøyet til å plassere animasjonen på ønsket sted på siden. Vær oppmerksom på at selv om animasjonsbakgrunnen vises ugjennomsiktig i Muse, er bakgrunnen gjennomsiktig når du forhåndsviser eller publiserer siden.

  6. Velg Fil > Forhåndsvis side i webleser for å forsikre deg om at animasjonen vises som forventet. Hvis du ønsker å gjøre noen endringer, går du tilbake til Muse og omplasserer sideelementene. Hvis du tar en titt på Innholdselementer-panelet, ser du at *.OAM-filen nå er oppført som et innholdselement. Du kan oppdatere animasjoner laget med Edge Animate, og endre koblingen deres akkurat som for andre områdeinnholdselementer.

    Hvis du for eksempel går tilbake til Animate, kan du åpne prosjektet og endre det. Når du etter hvert publiserer .OAM-filen på nytt og erstatter versjonen i områdemappen, viser Innholdselementer-panelet ikonet for utdatert kobling. Dette viser at originalfilen har blitt endret siden innholdselementet ble plassert på en side.

    For å oppdatere filen som du plasserte, høyreklikker du navnet til OAM-filen i Innholdselementer-panelet og velger Koble på nytt.

    Koble på nytt-alternativet oppdaterer det plasserte innholdselementet slik at det stemmer med den redigerte kildefilen. Dette er en enklere måte å oppdatere animasjonen raskt på, i stedet for å slette og bytte ut filer manuelt.

  7. Klikk Publiser-koblingen i Kontroll-panelet. Velg ønskede alternativer, og klikk OK for å publisere oppdateringene av området.

Hvis du vil finne ut mer om hvordan du bygger opp HTML5-webinnhold og animasjoner med Adobe Edge Animate, kan du gå til Adobe Edge Animate-ressursene. Hvis du vil ha flere tips om å jobbe med Muse, bør du besøke siden for hjelp og opplæringer for Muse hvis du ser etter opplæringer, eller siden for Muse-arrangementer hvis du ser etter direktesendte og innspilte webinarer.

Bygge inn rikt medieinnhold for å legge til animasjon på området

  1. I Planlegg-visning dobbeltklikker du miniatyrbildet av MasterFlash-siden for å åpne den for redigering i Design-visning. Legg merke til at siden du tidligere dupliserte A-malsiden, er den statiske logoen fremdeles der. Det er nyttig å bruke det statiske bildet til å plassere animasjonsrektangelet riktig, men husk å slette det statisk plasserte logobildet når du har bygd inn det rike medieinnholdet.

  2. Velg Fil > Plasser. I dialogboksen Importer navigerer du til mappen Kevins_Koffee_Kart og velger filen logo.swf.

  3. Plasser SWF-filen i øvre venstre hjørne, på samme sted som den eksisterende logobildefilen.

  4. Når du har justert det nye SWF-vinduet som du plasserte, etter den gamle, statiske logoen, sletter du den statiske logoen ved å velge den og trykke Delete-tasten.

  5. For å se hvordan hele området fremstår med de nye endringene av Hjem-siden velger du Fil > Forhåndsvis område i webleser for å teste visningen av logoen på ulike sider. Du kan jobbe lokalt på datamaskinen uten å publisere området og deretter forhåndsvise området i en webleser for å klikke gjennom sidene i områdenavigeringen. Legg merke til at animasjonen (SWF-filen) vises én gang på Hjem-siden og deretter stopper. Hvis du klikker andre sider, vises bare den statiske logoen.

    Merk:

    Hvis du velger Fil > Forhåndsvis side i webleser, lastes det nye webleservinduet inn raskere til Hjem-siden, men det forhåndsviser bare den aktive siden (Hjem-siden). Velg dette alternativet hvis du vil kontrollere én side på området, ikke hele webområdet.

Legge til rulleeffekter i animasjoner

Med Adobe Muse kan du legge til animasjoner du har laget ved hjelp av Adobe Edge Animate på websider. Det første trinnet mot å bruke funksjonen rulleeffekter i Adobe Edge Animate er å lage en animasjon spesifikt for dette formålet.

Med Adobe Muse kan du legge rulleeffekter til i OAM-filer for å påvirke animasjoner som er 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. Det er indirekte angitt at resten av elementene må plasseres innenfor nestede tidslinjer. Når den besøkende ruller siden, kontrollerer rulleeffektinnstillingene bare avspillingen av animerte elementer på hovedtidslinjen.

Hvis du vil ha mer informasjon om rulleeffekter i Adobe Muse, kan du se Rulleeffekter.

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

  1. Eksporter OAM-filen fra Animate, og lagre den i områdemappen. Hvis du vil ha mer informasjon om å eksportere OAM-filer fra Animate, kan du se Plassere animasjoner i Adobe Muse.
  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.
  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. Når OAM-filen er valgt, merker du av i Edge Animate-boksen.
Rulleeffekter-panel
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 700 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:

Rulleeffektinnstillingene påvirker ikke animerte objekter som er nestet i eller har kobling fra hovedtidslinjen i Animate-komposisjonen. 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.

Eksempel

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å. Du kan laste ned eksempelfilen fra ScrollEffects.com.

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.
Samme nøkkelposisjoner og bevegelsesinnstillinger
Kompassene beveger seg opp til siden ruller til kompassenes nøkkelposisjon, og deretter forblir de på plass mens siden fortsetter å rulle ned.

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.
Bytte bilder hvert 350. bildepunkt
Kompassene på begge sider er angitt til å bytte bilder hvert 350. bildepunkt.

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.
Bytte bilder hvert 400. bildepunkt
Den midterste OAM-filen er angitt til å bytte bilder hvert 400. bildepunkt.

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.

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