SVG-bestanden exporteren

  1. Adobe Animate-handboek
  2. Inleiding tot Animate
    1. Nieuw in Animate
    2. Visuele verklarende woordenlijst
    3. Systeemvereisten voor Animate
    4. Animate-sneltoetsen
    5. Werken met meerdere bestandstypen in Animate
  3. Animatie
    1. Grondbeginselen voor animaties in Animate
    2. Frames en hoofdframes gebruiken in Animate
    3. Frame-voor-frame-animaties in Animate
    4. Werken met klassieke tween-animaties in Animate
    5. De tool Penseel
    6. Hulplijnen voor bewegingen
    7. Bewegings-tween en ActionScript 3.0
    8. Informatie over animaties met bewegings-tween
    9. Animaties met bewegings-tweens
    10. Een animatie met bewegings-tween maken
    11. Eigenschapshoofdframes gebruiken
    12. Een positie animeren met een tween
    13. Bewegings-tweens bewerken in de Bewegingseditor
    14. Het bewegingspad van een tween-animatie bewerken
    15. Bewegings-tweens manipuleren
    16. Aangepaste versnellingen toevoegen
    17. Voorinstellingen voor beweging maken en toepassen
    18. Animatietween-reeksen instellen
    19. Werken met als XML-bestanden opgeslagen bewegings-tweens
    20. Bewegings-tweens en klassieke tweens
    21. Vormen tweenen
    22. De tool Bone-animatie gebruiken in Animate
    23. Werken met structuren voor personages in Animate
    24. Maskeerlagen gebruiken in Adobe Animate
    25. Werken met scènes in Animate
  4. Interactiviteit
    1. Knoppen maken met Animate
    2. Animate-projecten converteren naar andere documentindelingen
    3. HTML5 Canvas-documenten maken en publiceren in Animate
    4. Interactiviteit toevoegen met codefragmenten in Animate
    5. Aangepaste HTML5-componenten maken
    6. Componenten in HTML5 Canvas gebruiken
    7. Maken van aangepaste componenten: Voorbeelden
    8. Codefragmenten voor aangepaste componenten
    9. Tips en trucs: Adverteren met Animate
    10. Ontwerp en publicatie van virtual reality
  5. Werkruimte en workflow
    1. Penselen maken en beheren
    2. Google-lettertypen gebruiken in HTML5 Canvas-documenten
    3. Creative Cloud Libraries en Adobe Animate gebruiken
    4. Het werkgebied en het deelvenster Tools voor Animate gebruiken
    5. Workflow en werkruimte in Animate
    6. Weblettertypen gebruiken in HTML5 Canvas-documenten
    7. Tijdlijnen en ActionScript
    8. Werken met meerdere tijdlijnen
    9. Voorkeuren instellen
    10. Deelvensters voor ontwerp in Animate gebruiken
    11. Tijdlijnlagen maken met Animate
    12. Animaties exporteren voor mobiele apps en game-engines
    13. Objecten verplaatsen en kopiëren
    14. Sjablonen
    15. Zoeken en vervangen in Animate
    16. Ongedaan maken, Opnieuw en het deelvenster Historie
    17. Sneltoetsen
    18. De tijdlijn gebruiken in Animate
    19. HTML-extensies maken
    20. Optimalisatieopties voor afbeeldingen en geanimeerde GIF-bestanden
    21. Exportinstellingen voor afbeeldingen en GIF-bestanden
    22. Deelvenster Elementen in Animate
  6. Multimedia en video
    1. Grafische objecten transformeren en combineren in Animate
    2. Symboolinstanties maken in Animate en ermee werken
    3. Afbeeldingen overtrekken
    4. Geluid gebruiken in Adobe Animate
    5. SVG-bestanden exporteren
    6. Videobestanden maken voor gebruik in Animate
    7. Een video toevoegen in Animate
    8. Werken met videoactiepunten
    9. Objecten tekenen en maken met Animate
    10. Lijnen en vormen omvormen
    11. Streken, verlopen en vullingen met Animate CC
    12. Werken met Adobe Premiere Pro en After Effects
    13. Deelvensters voor kleuren in Animate CC
    14. Flash CS6-bestanden openen met Animate
    15. Werken met klassieke tekst in Animate
    16. Illustraties opnemen in Animate
    17. Geïmporteerde bitmaps in Animate
    18. 3D-afbeeldingen
    19. Werken met symbolen in Animate
    20. Lijnen en vormen tekenen met Adobe Animate
    21. Werken met bibliotheken in Animate
    22. Geluiden exporteren
    23. Objecten selecteren in Animate CC
    24. Werken met Illustrator AI-bestanden in Animate
    25. Patronen toepassen met het sproeipenseel
    26. Overvloeimodi toepassen
    27. Objecten rangschikken
    28. Taken automatiseren met het menu Opdrachten
    29. Meertalige tekst
    30. De camera gebruiken in Animate
    31. Animate gebruiken met Adobe Scout
    32. Werken met Fireworks-bestanden
    33. Grafische filters
    34. Geluid en ActionScript
    35. Tekenvoorkeuren
    36. Tekenen met de pen
  7. Platforms
    1. Animate-projecten converteren naar andere documentindelingen
    2. Ondersteuning voor aangepaste platforms
    3. HTML5 Canvas-documenten maken en publiceren in Animate
    4. Een WebGL-document maken en publiceren
    5. Toepassingen verpakken voor AIR voor iOS
    6. AIR voor Android-toepassingen publiceren
    7. Publiceren voor Adobe AIR voor desktop
    8. Publicatie-instellingen voor ActionScript
    9. Tips en trucs: ActionScript organiseren in een toepassing
    10. ActionScript gebruiken met Animate
    11. Tips en trucs: Richtlijnen voor toegankelijkheid
    12. Toegankelijkheid in de Animate-werkruimte
    13. Scripts schrijven en beheren
    14. Ondersteuning voor aangepaste platforms inschakelen
    15. Overzicht van ondersteuning voor aangepaste platforms
    16. Toegankelijke inhoud maken
    17. Werken met plug-in voor ondersteuning voor aangepaste platforms
    18. Foutopsporing in ActionScript 3.0
    19. Ondersteuning voor aangepaste platforms inschakelen
  8. Exporteren en publiceren
    1. Bestanden exporteren uit Animate CC
    2. OAM-publicatie
    3. SVG-bestanden exporteren
    4. Afbeeldingen en video's exporteren met Animate
    5. AS3-documenten publiceren
    6. Animaties exporteren voor mobiele apps en game-engines
    7. Geluiden exporteren
    8. QuickTime-videobestanden exporteren
    9. Afspelen van externe video met ActionScript beheren
    10. Tips en trucs: Tips voor het maken van inhoud voor mobiele apparaten
    11. Tips en trucs: Videoconventies
    12. Tips en trucs: Richtlijnen voor het ontwerpen van SWF-toepassingen
    13. Tips en trucs: Structuur geven aan FLA-bestanden
    14. Beste werkwijzen voor het optimaliseren van FLA-bestanden voor Animate
    15. Publicatie-instellingen voor ActionScript
    16. Publicatie-instellingen opgeven voor Animate
    17. Projectorbestanden exporteren
    18. Afbeeldingen en geanimeerde GIF-bestanden exporteren
    19. HTML-publicatiesjablonen
    20. Werken met Adobe Premiere Pro en After Effects
    21. Snel uw animaties delen en publiceren

Wat is SVG?

SVG (Scalable Vector Graphics) is een XML-markeertaal voor het beschrijven van tweedimensionale afbeeldingen. SVG-bestanden verschaffen compacte, resolutie-onafhankelijke HiDPI-afbeeldingen voor het web, drukwerk en mobiele apparatuur. U kunt een SVG opmaken met CSS en dankzij de ondersteuning voor scripts en animatie vormt SVG een integraal onderdeel van het webplatform.

Bepaalde gebruikelijke afbeeldingsindelingen voor het web, zoals GIF, JPEG en PNG, zijn groot en hebben vaak een lage resolutie. De SVG-indeling is veel praktischer, omdat u afbeeldingen kunt beschrijven aan de hand van vectorvormen, tekst en filtereffecten. SVG-bestanden zijn compact en verschaffen hoogwaardige illustraties voor het web en ook voor handheldapparaten met beperkte resources. U kunt een SVG-afbeelding op het scherm vergroten zonder verlies van scherpte, details of helderheid. Daarnaast biedt SVG betere ondersteuning voor tekst en kleuren, waardoor u de afbeeldingen ziet zoals ze in het werkgebied worden weergegeven. De SVG-indeling is volledig gebaseerd op XML en biedt veel voordelen voor zowel ontwikkelaars als gebruikers.

Opmerking:

Nu kunt u SVG-bestanden exporteren uit Animate zonder dat er ongewenste definities en ID's worden aangemaakt. De samenstelling van SVG-bestanden is verbeterd in Animate 19.1. Deze uitvoeroptie zorgt voor een betere kwaliteit van de SVG's die worden geïmporteerd in de personageanimator.

De workflow voor exporteren naar SVG in Animate

Met Animate kunt u bestanden exporteren naar de indeling SVG-versie 1.1. U kunt visueel rijke illustraties maken met de krachtige ontwerptools van Animate en de illustraties vervolgens exporteren naar SVG.

In Animate kunt u bepaalde frames en hoofdframes van een animatie exporteren. En omdat de geëxporteerde illustratie een vectorillustratie is, is de resolutie van de afbeelding hoog, zelfs wanneer u schaalt naar verschillende grootten.

De functie SVG exporteren vervangt de vroegere functie FXG exporteren (verwijderd uit Animate (juni 2013)). U zult merken dat de functie SVG exporteren veel krachtiger is en dat de uitvoer van veel hogere kwaliteit is. In vergelijking met FXG gaat er bovendien nauwelijks inhoud verloren in SVG.

Illustratie met filtereffecten

Met SVG is het mogelijk dat filtereffecten niet precies zo worden weergegeven als in Animate, aangezien er geen één-op-één toewijzing tussen filters beschikbaar is tussen Animate en SVG. In Animate worden combinaties van verschillende primitieve filters die beschikbaar zijn in SVG benut om een vergelijkbaar effect te simuleren.

Omgaan met meerdere symbolen

SVG-exportbewerkingen verwerken naadloos meerdere symbolen, waarbij geen inhoud verloren gaat. De uitvoer lijkt precies op de illustraties in het werkgebied in Animate.

Illustraties exporteren in de SVG-indeling

  1. Scrub of verplaats in Animate de afspeelkop naar het gewenste frame.
  2. Selecteer Bestand > Exporteren > Afbeelding exporteren. Of selecteer Bestand > Publicatie-instellingen (selecteer de optie SVG-afbeelding in de sectie met overige indelingen.)
  3. Typ de locatie waar u het SVG-bestand wilt opslaan of blader er naartoe. Zorg dat u SVG selecteert als type bij Opslaan als.
  4. Klik op OK.
  5. Kies Insluiten of Koppelen naar uw SVG-bestand in het dialoogvenster SVG exporteren.
    • Verborgen lagen opnemen Alle verborgen lagen in het Animate-document worden geëxporteerd. Als u de selectie van Verborgen lagen exporteren opheft, worden alle lagen die als verborgen zijn gemarkeerd (met inbegrip van lagen die in filmclips zijn genest) niet naar het resulterende SVG-bestand geëxporteerd. Zo kunt u gemakkelijk verschillende versies van Animate-documenten testen door lagen onzichtbaar te maken.
    • Insluiten: er wordt een bitmap ingesloten in het SVG-bestand. Gebruik deze optie als u bitmaps rechtstreeks wilt insluiten in het SVG-bestand.
    • Koppeling: verschaft een koppeling naar het pad van bitmapbestanden. Gebruik deze optie als u de bitmaps niet wilt insluiten, maar een koppeling wilt verschaffen naar de bitmaps in het SVG-bestand. Als u de optie Afbeeldingen kopiëren naar map selecteert, worden de bitmaps opgeslagen in de map images die is gemaakt op de exportlocatie van het SVG-bestand. Als de optie Afbeeldingen kopiëren naar map niet is geselecteerd, wordt in het SVG-bestand vanaf de oorspronkelijke bronlocatie verwezen naar de bitmaps. Als de bronlocatie van de bitmap niet beschikbaar is, worden de bitmaps ingesloten in het SVG-bestand.
    • Afbeeldingen kopiëren naar /Images-map: hiermee kopieert u de bitmap naar de map /Images. Als de map /Images nog niet bestaat, wordt deze gemaakt op de exportlocatie van het SVG-bestand.
    • Optimaliseren voor Character AnimatorAnimate heeft nu een optie waarmee u SVG-bestanden kunt uitvoeren die goed samenwerken met Character Animator.

  1. Klik op OK.
Opmerking:

Niet alle Animate-functies worden ondersteund door de SVG-indeling. De met deze functies gemaakte inhoud wordt tijdens het exporteren verwijderd of standaard omgezet in een ondersteunde functie. Zie dit artikel voor meer informatie.

U kunt ook het dialoogvenster Publicatie-instellingen gebruiken om SVG-bestanden te exporteren in Animate (Bestand > Publicatie-instellingen). Selecteer de optie SVG in de sectie Andere indelingen om SVG-bestanden te exporteren.

Opmerking:

U wordt aangeraden SVG-bestanden alleen te bekijken in moderne browsers waarop de laatste updates zijn toegepast. Bepaalde grafische filters en kleureffecten worden namelijk wellicht niet goed gerenderd in oudere versies van browsers, zoals Internet Explorer 9.

SVG-bestanden uitwisselen met Adobe Illustrator

U kunt in Animate inhoud uitwisselen met Adobe Illustrator. Deze workflow dient ter vervanging van de functie voor FXG-export die niet meer voorkomt in Animate (13.0). U kunt SVG-bestanden exporteren vanuit Animate en deze importeren in Adobe Illustrator. Meer informatie over het gebruik van SVG-bestanden in Adobe illustrator vindt u in dit Help-onderwerp.

Gebruik deze workflow als u losse bewerkingen wilt aanbrengen aan uw illustraties en veelsprekende details wilt toevoegen. U kunt Illustrator ook gebruiken om effecten, zoals slagschaduw, toe te voegen aan de illustratie.

Ga als volgt te werk om SVG-bestanden te bewerken in Adobe Illustrator en de bewerkte inhoud te gebruiken in Animate:

  1. In Animate exporteert u naar SVG.
  2. Bewerk uw illustraties door het SVG-bestand te openen met gebruik van Adobe Illustrator.
  3. Sla het SVG-bestand op als een .ai-bestand en importeer het in Animate. Voor meer informatie over het gebruik van Illustrator-bestanden in Animate.

Adobe-logo

Aanmelden bij je account