Leer hoe u volwaardige interactieve Adobe Muse-websites maakt met animaties en roleffecten die zijn gemaakt met Edge Animate.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Adobe Edge Animate is een webontwerpprogramma voor interactie dat u in staat stelt geanimeerde inhoud te leveren aan websites aan de hand van webstandaarden, zoals HTML5. U kunt de intuïtieve tijdlijninterface in Animate gebruiken om visueel aansprekende HTML5-animaties samen te stellen die kunnen worden afgespeeld in alle moderne browsers.

Animaties voorbereiden in Animate

Voordat u Animate-inhoud kunt plaatsen in Muse, kunt u een paar wijzigingen aanbrengen om het Animate-bestand voor te bereiden op naadloze integratie in Muse. Ga als volgt te werk:

  1. Start Animate. Het venster Get Started (Aan de slag) wordt weergegeven.

  2. Klik op Open File (Bestand openen) en selecteer een voorbeeldprojectbestand met de bestandstoevoeging .an dat u hebt gedownload. U kunt desgewenst ook een Animate-bestand openen dat u hebt gemaakt.

    Met Adobe Muse kunt u Edge Animate-animaties insluiten.
    Klik op de koppeling Open File (Bestand openen) in het venster Get Started (Aan de slag).

  3. Klik op Open (Openen) om het .an-bestand te openen en sluit het dialoogvenster Open (Openen). Het project wordt weergegeven in de Animate-werkruimte.

    Het project wordt weergegeven
    Het Animate-project wordt weergegeven in het werkgebied.

    Animaties die zijn gemaakt met Animate zijn ingesteld om automatisch te worden afgespeeld (automatisch afspelen) of vereisen dat u op een stilstaande afbeelding klikt om de animatie af te spelen zodra deze is geladen. Het SkyScraper-voorbeeld is ingesteld op automatisch afspelen en vereist geen interactie van de gebruiker. Wanneer automatisch afspelen echter uitgeschakeld is, wordt een statische afbeelding op de pagina weergegeven tot op de animatie wordt geklikt. Als u een voorbeeld van een animatie wilt bekijken dat niet automatisch wordt afgespeeld, gaat u naar Animate Showcase.

    Opmerking:

    Selecteer het werkgebied en schakel het selectievakje Autoplay (Automatisch afspelen) in het deelvenster Properties (Eigenschappen) in of uit om te bepalen of een animatie direct wordt afgespeeld.

    Optie Autoplay (Automatisch afspelen)
    Stel automatisch afspelen in door de eigenschap Autoplay (Automatisch afspelen) te selecteren.

  4. Klik op de achtergrondafbeelding om deze in het werkgebied te selecteren. Terwijl de achtergrondafbeelding is geselecteerd, wordt er een blauw selectiekader weergegeven en ziet u in het deelvenster Properties (Eigenschappen) links in het scherm de eigenschappen van de afbeelding (Image2 in dit voorbeeld). Druk op Backspace (Windows) of Delete (Mac) als u het bestand voor de achtergrondafbeelding wilt verwijderen.

    Blauw omsluitend kader
    Selecteer de achtergrondafbeelding en verwijder deze.

  5. Terwijl het werkgebied nog steeds is geselecteerd, klikt u op de kleurchip voor het werkgebied in het deelvenster Properties (Eigenschappen) en stelt u de optie Transparent (Transparant) in.

    Optie voor transparant
    Stel de achtergrondeigenschap van het werkgebied in op transparant.

    Opmerking:

    De inhoud van het werkgebied wordt tegen een witte achtergrond weergegeven. De transparante achtergrond wordt niet in het werkgebied weergegeven, tenzij u de animatie exporteert of er een voorvertoning van weergeeft.

  6. Selecteer File (Bestand) > Save (Opslaan) om de recente wijzigingen op te slaan.

  7. Kies File (Bestand) > Publish Settings (Publicatie-instellingen) om het dialoogvenster Publish Settings (Publicatie-instellingen) te openen.

  8. In de linkerkolom Publish Target (Doel publiceren), schakelt u het selectievakje Web uit en selecteert u de optie Animate Deployment Package (Adobe-distributiepakket).

  9. Klik op Save (Opslaan) om uw wijzigingen op te slaan en het dialoogvenster Publish Settings (Publicatie-instellingen) te sluiten.

  10. Kies File (Bestand) > Publish (Publiceren) om het project te publiceren.

  11. Sluit Animate af. Gebruik Windows Verkenner (of Mac OS Finder) om de Animate-projectmap op uw vaste schijf te zoeken. Na publicatie van het project wordt er een map gemaakt met de naam Animate Package. Het OAM-bestand in deze map wordt gebruikt om Animate-inhoud aan uw Muse-site toe te voegen.

  12. Kopieer het .OAM-bestand en sla dit op in de map op uw bureaublad die alle andere afbeeldingen en sitemiddelen voor uw website bevat. Nadat u de animatie hebt gepubliceerd en het bestand hebt opgeslagen in uw sitemap, gaat u verder naar de volgende sectie waar u de Animate-inhoud op een pagina plaatst.

Animaties plaatsen die zijn gemaakt met Animate op een Muse-webpagina

Voer de volgende stappen uit om de animatie aan een pagina op uw Muse-website toe te voegen:

  1. Start Adobe Muse en open de site die u wilt bewerken.

  2. Dubbelklik in de overzichtsweergave op de naam van de pagina waaraan u de animatie wilt toevoegen.

  3. Kies Bestand > Plaatsen… en selecteer het .OAM-bestand in uw sitemap.

  4. Klik eenmaal op de pagina om de animatie te plaatsen.

    Opmerking:

    In tegenstelling tot het plaatsen van afbeeldingen, kunt u niet klikken en slepen om een Animate-animatie die u plaatst te vergroten of te verkleinen. Als u de inhoud met een ander formaat wilt plaatsen, werkt u het Edge-project bij en publiceert u het .OAM-bestand opnieuw.

  5. Plaats de animatie met de tool Selecteren op de gewenste locatie op de pagina. Hoewel de animatieachtergrond dekkend lijkt te zijn in Muse, is de achtergrond transparant wanneer u de pagina voorvertoont of publiceert.

  6. Kies Bestand > Voorvertoning van pagina weergeven in de browser om ervoor te zorgen dat de animatie naar behoren wordt weergegeven. Als u wijzigingen wilt aanbrengen, gaat u terug naar Muse en verplaatst u de pagina-elementen. In het deelvenster Middelen wordt het .OAM-bestand nu vermeld als een middel. U kunt Edge Animate-animaties net als alle andere sitemiddelen opnieuw verbinden en bijwerken.

    Als u bijvoorbeeld teruggaat naar Animate, kunt u het project openen en wijzigen. Wanneer u het OAM-bestand later opnieuw uitgeeft en de versie in uw sitemap vervangt, wordt in het deelvenster Middelen het verouderde koppelingspictogram weergegeven. Dit betekent dat het oorspronkelijke bestand is bewerkt sinds het middel op een pagina is geplaatst.

    Als u het geplaatste bestand wilt bijwerken, klikt u met de rechtermuisknop op de naam van het OAM-bestand in het deelvenster Middelen en kiest u Opnieuw koppelen.

    De optie Opnieuw koppelen werkt het geplaatste middel bij en past dit aan het bewerkte bronbestand aan. Dit is een eenvoudigere manier om de animatie snel bij te werken. Zo hoeft u het bestand niet handmatig te verwijderen en te vervangen.

  7. Klik op de koppeling Publiceren in het Regelpaneel. Kies de gewenste opties en klik op OK om de site-updates te publiceren.

Bekijk voor meer informatie over het ontwikkelen van HTML5-webcontent en animaties met Adobe Edge Animate de bronnen voor Adobe Edge Animate. Ga voor meer tips over het werken met Muse naar de pagina Muse Help en zelfstudies voor zelfstudies. Of ga naar de pagina Muse Events voor live en opgenomen videolessen.

Veelzijdige media-inhoud insluiten om animatie aan de site toe te voegen

  1. In de overzichtsweergave dubbelklikt u op de miniatuur MasterFlash om deze in de ontwerpweergave te openen voor bewerking. Als u de pagina A-stramien eerder hebt gedupliceerd, staat de statische afbeelding van het logo er nog steeds. Het is handig om de statische afbeelding te gebruiken als hulpmiddel bij het plaatsen van de animatierechthoek. Vergeet echter niet het statische geplaatste logo te verwijderen nadat u het rijke media-element hebt ingesloten.

  2. Kies Bestand > Plaatsen. In het dialoogvenster Importeren navigeert u naar de map Kevins_Koffee_Kart en selecteert u het bestand logo.swf.

  3. Plaats het SWF-bestand in de linkerbovenhoek, in overeenstemming met de locatie van het bestaande logoafbeeldingsbestand.

  4. Als u het nieuwe SWF-venster dat u hebt geplaatst eenmaal met het oudere statische logo hebt uitgelijnd, verwijdert u het statische logo door dit te selecteren en op de toets Delete te drukken.

  5. Als u wilt zien hoe de hele site eruitziet met de nieuwe wijzigingen aan de startpagina, kiest u Bestand > Voorvertoning van site weergeven in browser om de weergave van het logo op verschillende pagina's te testen. Zonder de site te publiceren, kunt u op uw computer werken en vervolgens de site in een browser voorvertonen om door de pagina's in de sitenavigatie te klikken. De animatie (SWF-bestand) wordt één keer weergegeven en stopt dan op de startpagina. Als u op andere pagina's klikt, wordt alleen het statische logo weergegeven.

    Opmerking:

    Als u Bestand > Voorvertoning van pagina weergeven in browser kiest, wordt het nieuwe browservenster sneller geladen om de startpagina weer te geven, maar wordt alleen een voorvertoning van de actieve (start)pagina weergegeven. Kies deze optie als u één pagina van de site wilt controleren, in plaats van de hele website.

Scrolleffecten toevoegen aan animatie

Met Adobe Muse kunt u animaties die met Adobe Edge Animate zijn gemaakt toevoegen aan webpagina's. De eerste stap bij de Adobe Edge Animate-scrolleffectfunctie is het maken van een animatie voor dit specifieke doeleinde.

Met Adobe Muse kunt u Scrolleffecten aan OAM-bestanden toevoegen om de animaties op de hoofdtijdlijn aan te passen. U kunt de animatie strategisch ontwerpen, zodat alleen de items die u wilt verplaatsen terwijl de pagina wordt geschoven zich op de hoofdtijdlijn bevinden en u interactieve animaties kunt maken. Het behoeft nauwelijks gezegd te worden dat de overige elementen in geneste tijdlijnen moeten worden geplaatst. Wanneer bezoekers de pagina schuiven, bepalen de instellingen voor scrolleffecten alleen het afspelen van de geanimeerde elementen op de hoofdtijdlijn.

Zie Scrolleffecten voor meer informatie over scrolleffecten in Adobe Muse.

Voer de volgende stappen uit om te werken met het tabblad Presentatie van het deelvenster Scrolleffecten:

  1. Exporteer het OAM-bestand uit Animate en sla het op in uw sitemap. Voor informatie over het exporteren van OAM-bestanden uit Animate raadpleegt u Animaties plaatsen in Adobe Muse.
  2. Start Muse en dubbelklik op een pagina om deze te openen in de weergave Ontwerpen. Zorg ervoor dat de pagina lang genoeg is om te schuiven door de instellingen voor minimumhoogte bij te werken in het dialoogvenster Pagina-eigenschappen.
  3. Kies Bestand > Plaatsen, blader naar het OAM-bestand in de sitemap en selecteer het.
  4. Open het deelvenster Scrolleffecten. Klik op het tabblad Adobe Edge Animate (het vierde tabblad van links) om de instellingen voor deze sectie te controleren.
  5. Schakel het selectievakje Edge Animate in terwijl het OAM-bestand is geselecteerd.
Deelvenster Scrolleffecten
Stel de Edge Animate-animatie zodanig in dat deze begint met afspelen wanneer de pagina op een specifieke locatie belandt. Of stel de animatie zodanig in dat deze steeds naar een ander frame schakelt wanneer de pagina een bepaalde afstand (in pixels) omlaag wordt geschoven.

In bovenstaande afbeelding is de hoofdpositie ingesteld op 700 pixels. U kunt de T-vormige handgreep slepen of een andere waarde opgeven in het veld Hoofdpositie om de hoofdpositie aan te passen.

Als u de hoofdpositie hebt ingesteld, kunt u het afspelen van de animatie besturen met twee opties:

  • Automatisch afspelen: als deze optie is geselecteerd, wordt de animatie in de hoofdtijdlijn afgespeeld zodra de browser naar de hoofdpositie wordt geschoven, ongeacht het aantal frames in de hoofdtijdlijn. De animatie houdt pas op met afspelen wanneer de pagina boven de hoofdpositie wordt geschoven.
  • Van frame wisselen om de: als deze optie is geselecteerd, wordt steeds het volgende frame in de animatie op de hoofdtijdlijn afgespeeld als de pagina voorbij een bepaald aantal pixels wordt geschoven. Als u bijvoorbeeld een pagina maakt die 3000 pixels hoog is en de waarde 10 invoert, wordt de animatie in de hoofdtijdlijn afgespeeld met een snelheid van 1 frame voor elke 10 pixels die de pagina wordt geschoven. Als de bezoeker sneller omlaag schuift op de pagina, wordt het animatietempo verhoogd.

Opmerking:

Scrolleffectinstellingen zijn niet van invloed op geanimeerde objecten die zijn genest in of waarnaar wordt gekoppeld vanaf de hoofdtijdlijn in de Animate-compositie. Daarom kunt u kiezen tussen een statische achtergrond of het continu herhalen van geneste elementen die altijd in beweging zijn, ongeacht het feit of de bezoeker de pagina schuift of niet.

  1. Na het kiezen van de instellingen in het tabblad Edge Animate van het deelvenster Scrolleffecten, kiest u Bestand > Voorvertoning van pagina weergeven in browser (of klikt u op de knop Voorvertoning). Test de pagina door omhoog en omlaag te schuiven en te zien hoe de Edge Animate-animatie-inhoud (die aan de hoofdtijdlijn is toegevoegd) wordt afgespeeld.
  2. Als u wijzigingen wilt aanbrengen, gaat u terug naar Muse (of klikt u op de knop Ontwerpen) en werkt u de instellingen in het deelvenster Scrolleffecten bij.

Voorbeeld

In dit voorbeeld wordt geïllustreerd hoe u uit Adobe Edge Animate geëxporteerde OAM-bestanden kunt besturen met scrolleffecten. In dit voorbeeld wordt de pagina gevuld met een verticaal verloop dat begint met een lichtturkooise kleur en overgaat in donkerblauw. U kunt het voorbeeldbestand downloaden van ScrollEffects.com.

Dit geanimeerde effect wordt tot stand gebracht dankzij een combinatie van instellingen die zijn toegepast in de tabbladen Beweging en Edge Animate.

Drie instanties van hetzelfde OAM-bestand zijn horizontaal naast elkaar geplaatst om een rij met geanimeerde kompassen te maken. Wanneer u de voorbeeldsite in een browser bekijkt, komen de drie kompassen in beeld en blijven deze op hun positie staan. Elk van de drie kompassen lijkt met een andere snelheid te draaien, maar dat komt door de instellingen in het deelvenster Scrolleffecten, niet door de samenstelling van het Edge-animatiebestand.

Ga als volgt te werk om een vergelijkbaar effect met drie geplaatste OAM-bestanden tot stand te brengen:

  1. Kies Pagina > Pagina-eigenschappen in de ontwerpweergave. Stel een veel hogere waarde in in het veld Min. hoogte. In het sitevoorbeeld is de minimale hoogte van de pagina ingesteld op 7465 pixels.
  2. Selecteer alle drie instanties van het kompas op de pagina. Op het tabblad Beweging van het deelvenster Scrolleffecten ziet u dat alle drie OAM-bestanden dezelfde hoofdpositie- en bewegingsinstellingen hebben, omdat alle waarden worden weergegeven.
Dezelfde instellingen voor hoofdposities en beweging
De kompassen worden omhoog verplaatst totdat de pagina naar hun hoofdpositie wordt geschoven. Ze blijven vervolgens op deze positie staan als de pagina verder omlaag wordt geschoven.

Als u het voorbeeld in een browser bekijkt, ziet u dat alle drie OAM-bestanden tegelijk omhoogspringen en vervolgens op een rij blijven staan, net alsof ze zijn vastgezet.

  1. Klik ergens buiten de kompassen om de selectie van de drie kompassen op te heffen en selecteer vervolgens alleen het linker kompas. Houd Shift ingedrukt terwijl u het kompas aan de rechterkant selecteert, zodat beide kompassen zijn geselecteerd. Open het tabblad Edge Animate van het deelvenster Scrolleffecten om de instellingen te bekijken.
Elke 350 pixels van frame wisselen
De kompassen aan weerszijden zijn ingesteld om na elke 350 pixels naar een ander frame te gaan.

De twee kompassen aan de zijkant zijn beide geconfigureerd om te worden herhaald in de tijdlijnanimatie en om steeds naar het volgende frame te gaan wanneer de pagina 350 pixels verder omlaag schuift.

  1. Hef de selectie van de twee kompassen aan de buitenzijde op. Selecteer het middelste kompas. Als u weer naar het tabblad Edge Animate kijkt, ziet u dat het veld Van frame wisselen om de is ingesteld op 400 pixels. Deze instelling zorgt ervoor dat de animatie in het midden zich langzamer verplaatst dan de twee buitenste kompassen.
Elke 400 pixels van frame wisselen
Het middelste OAM-bestand is ingesteld om na elke 400 pixels over te schakelen naar het volgende frame.

U kunt interessante animatie-effecten maken door de snelheid van verschillende geplaatste Edge Animate-animaties te variëren ten opzichte van de schuifsnelheid van de pagina. U kunt bijvoorbeeld een school vissen maken, een lucht met bewegende wolken of andere effecten door meerdere versies van een OAM-bestand toe te voegen waarop verschillende instellingen voor scrolleffecten zijn toegepast.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid