Lær, hvordan du skaber nuancerede, interaktive Adobe Muse-websites med animationer og rulleeffekter, der er oprettet ved hjælp af Adobe Edge Animate.

Bemærk:

Adobe Muse tilføjer ikke længere nye funktioner og slutter med at tilbyde support 26. marts 2020. Find flere oplysninger og hjælp på Adobe Muses side om ophør af tjeneste.

Adobe Edge Animate er et designværktøj til webinteraktion, som sætter dig i stand til at give websites animeret indhold ved hjælp af webstandarder som HTML5. Du kan bruge den intuitive tidslinjegrænseflade inden for Animate til visuelt at oprette overbevisende HTML5-animationer, der afspilles, når de vises i alle moderne browsere.

Forberedelse af animationer i Animate

Før du animerer indhold til Muse, kan du foretage et par ændringer for at klargøre Animate-filen, så integrering i Muse bliver ubesværet. Benyt følgende fremgangsmåde:

  1. Start Animate. Vinduet Kom godt i gang vises.

  2. Klik på Åbn fil, og gennemse derefter for at vælge en eksempelprojektfil, du har hentet, af filtypen .an. Hvis du foretrækker det, kan du også vælge at åbne en Animate-fil, du har oprettet.

    Med Adobe Muse kan du integrere Edge Animate-animationer.
    Klik på linket Åbn fil i vinduet Kom godt i gang.

  3. Klik på Åbn for at åbne .an-filen, og luk dialogboksen Åbn. Projektet vises i Animate-arbejdsrummet.

    Projektet vises
    Animate-projektet vises på scenen.

    Animationer, der er oprettet ved brug af Animate, er enten automatisk indstillet til (automatisk afspilning) eller kræver, at du klikker på et statisk billede for at afspille animationen efter indlæsning. Eksemplet SkyScraper er indstillet til automatisk afspilning og kræver ingen brugerinteraktion. Men når automatisk afspilning er slået fra, vises der et statisk billede på siden, indtil der klikkes på animationen. Gå til Animate Showcase for at få vise et eksempel på en animation, der ikke afspilles automatisk.

    Bemærk:

    Hvis du vil styre, om en animation afspilles med det samme, skal du vælge scenen og derefter markere eller fjerne markeringen i afkrydsningsfeltet Automatisk afspilning i panelet Egenskaber.

    Indstillingen for AutoPlay
    Aktiver automatisk afspilning ved at markere egenskaben Automatisk afspilning.

  4. Klik på baggrundsbilledet for at markere det i scenen. Mens det er markeret, vises et blåt afgrænsningsområde, og i panelet Egenskaber til venstre vises egenskaberne for billedet (i dette eksempel med navnet Image2). Tryk på Backspace (Windows) eller Delete (Mac) for at fjerne baggrundsbilledfilen.

    Blå afgrænsningsramme
    Marker baggrundsbilledet, og slet det.

  5. Mens scenen stadig er markeret, skal du klikke på farvechippen for scenen i panelet Egenskaber og angive indstillingen for gennemsigtighed.

    Indstillingen for Gennemsigtig
    Angiv baggrundsegenskaben for scenen til gennemsigtig.

    Bemærk:

    Indholdet i scenen viser en hvid baggrund. Den gennemsigtige baggrund vises ikke i scenen, medmindre du eksporterer animationen eller får vist en forhåndsvisning af den.

  6. Vælg Filer > Gem for at gemme de seneste ændringer.

  7. Vælg Filer > Udgivelsesindstillinger for at åbne dialogboksen Udgivelsesindstillinger.

  8. I kolonnen Udgivelsesdestination til venstre skal du fjerne markeringen i afkrydsningsfeltet Web og vælge indstillingen Animate-aktiveringspakke.

  9. Klik på Gem for at gemme dine indstillinger og lukke dialogboksen Udgivelsesindstillinger.

  10. Vælg Filer > Udgiv for at udgive projektet.

  11. Afslut Animate. Brug Windows Stifinder (eller Mac OS Finder) til at finde mappen med Animate-projektet på harddisken. Når du har udgivet projektet, finder du en mappe ved navn Animate Package. .OAM-filen i denne mappe bruges til at tilføje Animate-indhold på dit Muse-website.

  12. Kopier .OAM-filen, og gem den i den mappe på dit skrivebord, som indeholder alle de andre billeder og websiteaktiver til dit website. Når du har udgivet animationen og gemt filen i din websitemappe, skal du fortsætte til næste afsnit for at placere Animate-indholdet på en side.

Placering af animationer, der er oprettet ved hjælp af Animate, på en Muse-webside

Følg disse trin for at føje animationen til en side på dit Muse-website:

  1. Start Adobe Muse, og åbn det website, du vil redigere.

  2. dobbeltklikke på navnet på den side, hvor du vil tilføje animationen, i visningen Plan.

  3. Vælg Filer > Placer..., og naviger derefter for at vælge .OAM-filen i din websitemappe.

  4. Klik én gang på siden for at placere animationen.

    Bemærk:

    Du kan ikke klikke og trække, når du placerer en Animate-animation for at ændre størrelsen på den, sådan som du kan, når du placerer billeder. Hvis du vil placere indholdet i en anden størrelse, skal du opdatere Edge-projektet og udgive .OAM-filen igen.

  5. Brug markeringsværktøjet til at placere animationen på det ønskede sted på siden. Bemærk, at selvom animationsbaggrunden ser ud til at være ugennemsigtig i Muse, er baggrunden gennemsigtig, når du ser en forhåndsvisning af siden eller udgiver den.

  6. Vælg Filer > Forhåndsvisning af side i browser for at sikre, at animationen vises som forventet. Hvis der er ændringer, du gerne vil foretage, kan du vende tilbage til Muse og placere sideelementerne igen. I panelet Aktiver kan du se, at filen .OAM, nu er vist som et aktiv. Animationer, der er oprettet ved hjælp af Edge Animate, kan sammenkædes igen og opdateres på samme måde som ethvert andet websiteaktiv.

    Hvis du f.eks. vender tilbage til Animate, kan du åbne projektet og ændre det. Når du senere genudgiver .OAM-filen og erstatter versionen i din website-mappe, viser panelet Aktiver ikonet for forældet link. Den oprindelige fil er blevet redigeret, siden aktivet blev placeret på siden.

    Hvis du vil opdatere den fil, du har placeret, skal du højreklikke på navnet på .OAM-filen i panelet Aktiver og vælge Sammenkæd igen.

    Indstillingen Sammenkæd igen opdaterer det placerede aktiv, så det matcher den redigerede kildefil. Det er en hurtigere måde at opdatere animationen på i sammenligning med manuelt at slette og erstatte filer.

  7. Klik på linket Udgiv i kontrolpanelet. Vælg de ønskede indstillinger, og klik på OK for at udgive websiteopdateringerne.

Hvis du vil vide mere om opbygning af HTML5-webindhold og animationer med Adobe Edge Animate, kan du gå til Adobe Edge Animate Resources. Hvis du vil have flere tip til, hvordan du arbejder med Muse, skal du sørge for at besøge siden med hjælp og selvstudier til Muse for at finde selvstudier eller siden med Muse-arrangementer for at se live webinarer og selvstudier optaget på video.

Indlejring af multimedieindhold for at tilføje animation på websitet

  1. Dobbeltklik på miniaturebilledet af MasterFlash-siden i visningen Plan for at åbne den, så den kan redigeres i visningen Design. Bemærk, at eftersom du tidligere har duplikeret A-Master-siden, vises det statiske logo stadig. Det er praktisk at bruge det statiske billede til at matche placeringen af animationsrektanglet. Du skal dog sørge for at slette det statisk placerede logobillede efter integreringen af multimedieelementet.

  2. Vælg Filer > Placer. Gå til filen logo.swf i mappen Kevins_Koffee_Kart i dialogboksen Importer, og marker den.

  3. Placer SWF-filen i øverste venstre hjørne for at matche placeringen af den eksisterende logobilledfil.

  4. Når du har justeret det nye SWF-vindue, som du har placeret, i forhold til det gamle statiske logo, skal du slette det statiske logo ved at markere det og trykke på Delete-tasten.

  5. Du kan få vist, hvordan hele websitet ser ud med de nye ændringer på startsiden, ved at vælge Filer > Forhåndsvisning af website i browser for at afprøve visningen af logoet på forskellige sider. Du kan arbejde lokalt på computeren uden at udgive websitet og derefter få vist websitet i en browser for at klikke gennem siderne i websitenavigationen. Bemærk, at animationen (SWF-filen) kun vises en enkelt gang og derefter stopper på startsiden. Hvis du klikker på andre sider, er det kun det statiske logo, der vises.

    Bemærk:

    Hvis du vælger Filer > Forhåndsvisning af side i browser, indlæses det nye browservindue med startsiden hurtigere, men det er kun den aktive startside, der vises. Vælg denne indstilling, hvis du vil kontrollere en enkelt websiteside i stedet for hele websitet.

Tilføjelse af rulleeffekter i animationer

Med Adobe Muse kan du tilføje animationer, der oprettet ved brug af Adobe Edge Animate på websider. Det første trin til at bruge Adobe Edge Animate-rulleeffektfunktionen er at oprette en animation til netop dette formål.

Adobe Muse giver dig mulighed for at føje rulleeffekter til OAM-filer og påvirke de animationer, der er placeret på den primære tidslinje. Du kan designe animationen strategisk, så kun de elementer, du vil flytte, når siden rulles, står på hovedtidslinjen, hvor du opretter interaktive animationer. Det er indlysende, at resten af elementerne skal placeres i indlejrede tidslinjer. Når besøgende ruller siden, styrer indstillingerne af rulleeffekt kun afspilningen af animerede elementer på hovedtidslinjen.

Du kan finde yderligere oplysninger om rulleeffekter i Adobe Muse i Rulleeffekter

Følg disse trin for at arbejde med fanen Diasshow i panelet Rulleeffekter:

  1. Eksporter OAM-filen fra Animate, og gem den i din websitemappe. Du kan finde yderligere oplysninger om eksport af OAM-filer fra Animate i Placering af animationer i Adobe Muse.
  2. Start Muse, og dobbeltklik på en side for at åbne den i visningen Design. Bekræft, at siden er lang nok til at rulle, ved at opdatere indstillingen af minimumhøjde i dialogboksen Sideegenskaber.
  3. Vælg Filer > Placer, og naviger for at vælge OAM-filen i websitemappen.
  4. Åbn panelet Rulleeffekter. Klik på fanen Adobe Edge Animate (fjerde fane fra venstre) for at gennemgå indstillingerne for denne sektion.
  5. Mens OAM-filen er markeret, skal du markere afkrydsningsfeltet Edge Animate.
Panelet Rulleeffekter
Indstil Edge Animate-animationen til at begynde afspilning, når siden rulles til et bestemt sted, eller indstil den til at skifte billede, hver gang siden rulles en bestemt afstand (i pixel).

På billedet ovenfor er nøglepositionen indstillet til 700 pixels. Du kan trække T-håndtaget eller indtaste en anden værdi i feltet Nøgleposition for at justere den.

Når du har indstillet nøglepositionen, kan du styre afspilningen af animationen med to indstillinger:

  • Automatisk afspilning: Når denne indstilling er valgt, begynder afspilningen af animationen på hovedtidslinjen, når browseren rulles til nøglepositionen, uanset antallet af billeder på hovedtidslinjen. Afspilningen af animationen fortsætter, indtil siden rulles over nøglepositionen.
  • Skift billede hver: Når denne indstilling er valgt, vil animationen på hovedtidslinjen gå ét billede frem, hver gang siden rulles forbi det angivne antal pixel. Hvis du f.eks. opretter en side, der er 3000 pixels høj, og indtaster tallet 10, afspilles animationen på hovedtidslinjen med en hastighed af 1 billede for hver 10 pixels, siden rulles. Hvis den besøgende ruller hurtigere ned ad siden, øges animationshastigheden.

Bemærk:

Indstillinger af rulleeffekt påvirker ikke animerede objekter, der er indlejret i eller sammenkædet fra hovedtidslinjen i Animate-kompositionen. Derfor kan du vælge enten at have en statisk baggrund eller indlejrede elementer, der konstant kører i løkke og bevæges ensartet, uanset om besøgende ruller siden.

  1. Når du har valgt indstillingerne under fanen Edge Animate i panelet Rulleeffekter, skal du vælge Filer > Forhåndsvisning af side i browser (eller klik på knappen Vis). Test siden ved at rulle op og ned for at afspille Edge Animate-animationsindholdet (der er føjet til hovedtidslinjen).
  2. Hvis du skal foretage ændringer, skal du vende tilbage til Muse (eller klikke på knappen Design) og opdatere indstillingerne i panelet Rulleeffekter.

Eksempel

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

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

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

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

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

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

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

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

  1. Fravælg de to yderkompasser. Marker midterkompasset, og se igen under fanen Edge Animate, hvor feltet Skift billede hver er indstillet til 400 pixels. Denne indstilling får midteranimationen til at bevæge sig langsommere end de to yderkompasser.
Skifte billede hver 400 pixels
Den midterste OAM-fil er indstillet til at skifte billede for hver 400 pixels.

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

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online