Handboek Annuleren

Knoppen maken met Animate

  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 tussenvoegingsanimaties in Animate
    5. De tool Penseel
    6. Hulplijnen voor bewegingen
    7. Bewegings-tween en ActionScript 3.0
    8. Over tussenvoegingsanimaties met beweging
    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. Tussenvoegingen met vormen
    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. Objecten tekenen en maken met Animate
    9. Lijnen en vormen omvormen
    10. Streken, verlopen en vullingen met Animate CC
    11. Werken met Adobe Premiere Pro en After Effects
    12. Deelvensters voor kleuren in Animate CC
    13. Flash CS6-bestanden openen met Animate
    14. Werken met klassieke tekst in Animate
    15. Illustraties opnemen in Animate
    16. Geïmporteerde bitmaps in Animate
    17. 3D-afbeeldingen
    18. Werken met symbolen in Animate
    19. Lijnen en vormen tekenen met Adobe Animate
    20. Werken met bibliotheken in Animate
    21. Geluiden exporteren
    22. Objecten selecteren in Animate CC
    23. Werken met Illustrator AI-bestanden in Animate
    24. Overvloeimodi toepassen
    25. Objecten rangschikken
    26. Taken automatiseren met het menu Opdrachten
    27. Meertalige tekst
    28. De camera gebruiken in Animate
    29. Grafische filters
    30. Geluid en ActionScript
    31. Tekenvoorkeuren
    32. 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. Toegankelijkheid in de Animate-werkruimte
    12. Scripts schrijven en beheren
    13. Ondersteuning voor aangepaste platforms inschakelen
    14. Overzicht van ondersteuning voor aangepaste platforms
    15. Werken met plug-in voor ondersteuning voor aangepaste platforms
    16. Foutopsporing in ActionScript 3.0
    17. 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. Tips en trucs: Tips voor het maken van inhoud voor mobiele apparaten
    9. Tips en trucs: Videoconventies
    10. Tips en trucs: Richtlijnen voor het ontwerpen van SWF-toepassingen
    11. Tips en trucs: Structuur geven aan FLA-bestanden
    12. Beste werkwijzen voor het optimaliseren van FLA-bestanden voor Animate
    13. Publicatie-instellingen voor ActionScript
    14. Publicatie-instellingen opgeven voor Animate
    15. Projectorbestanden exporteren
    16. Afbeeldingen en geanimeerde GIF-bestanden exporteren
    17. HTML-publicatiesjablonen
    18. Werken met Adobe Premiere Pro en After Effects
    19. Snel uw animaties delen en publiceren
  9. Problemen oplossen
    1. Opgeloste problemen
    2. Bekende problemen

 

Standaardstappen voor het maken van knoppen

  1. Besluit welk type knop het beste aansluit bij uw vereisten.

    Knopsymbool

    De meeste mensen kiezen voor knopsymbolen omdat deze zo flexibel zijn. Knopsymbolen bevatten een speciale interne tijdlijn voor de toestanden van de knop. Het is heel eenvoudig visueel verschillende toestanden Omhoog, Omlaag en Boven te maken. De toestand van knopsymbolen wordt ook automatisch aangepast aan handelingen van gebruikers.

    Filmclipknop

    Met een filmclipsymbool kunt u geavanceerde knopeffecten creëren. Filmclipsymbolen kunnen vrijwel elk type inhoud bevatten, inclusief animatie. Filmclipsymbolen beschikken echter niet over geïntegreerde toestanden Omhoog, Omlaag en Boven. Deze toestanden maakt u zelf met gebruik van ActionScript. Een nadeel is wel dat filmclipbestanden groter zijn dan knopbestanden. 

    ActionScript-knopcomponent

    Gebruik een knopcomponent als u alleen een standaardknop of een schakelknop nodig hebt die u niet op geavanceerde wijze wilt aanpassen. Zowel in ActionScript 2.0 als in 3.0 bevatten knopcomponenten geïntegreerde code die wijzigingen in de toestand mogelijk maakt. U hoeft de vormgeving en het gedrag van knoptoestanden dus niet te definiëren. U sleept de component gewoon naar het werkgebied.

    • U kunt ActionScript 3.0-knopcomponenten wel enigszins aanpassen. U kunt de knop aan andere componenten binden en toepassingsgegevens delen en weergeven. De componenten beschikken over geïntegreerde functies, zoals ondersteuning voor toegankelijkheid. Er zijn Button-, RadioButton- en CheckBox-componenten beschikbaar. 

    • In ActionScript 2.0 kunt u Button-componenten niet aanpassen. De component maakt wijzigingen in de toestand mogelijk. 

  2. Definieer de toestanden van de knop.

    Het frame Omhoog

    De weergave van de knop als de gebruiker er niet op klikt of drukt.

    Het frame Boven

    De weergave van de knop als de gebruiker op het punt staat deze te selecteren.

    Het frame Omlaag

    De weergave van de knop als de gebruiker deze selecteert.

    Het frame Actief

    Het gebied dat reageert op klikken van de gebruiker. Het definiëren van een frame Actief is optioneel. Het kan handig zijn dit frame te definiëren in geval van kleine knoppen of niet-aangrenzende grafische gebieden.

    • De inhoud van het frame Actief is tijdens het afspelen niet zichtbaar in het werkgebied.

    • De afbeelding voor het frame Actief moet een effen gebied zijn dat groot genoeg is om alle grafische elementen voor de frames Omhoog, Omlaag en Boven te bevatten.

    • Als u geen frame Actief opgeeft, wordt de afbeelding voor de toestand Omhoog gebruikt.

      U kunt een knop maken die reageert wanneer op een ander gedeelte van het werkgebied wordt geklikt of wanneer de muis erboven wordt geplaatst (dit wordt ook wel een rollover-koppeling genoemd). Plaats de afbeelding voor het frame Actief op een andere locatie dan de afbeeldingen voor de andere knopframes.

  3. Koppel een handeling aan de knop.

    Voeg de ActionScript-code toe aan de tijdlijn als u wilt dat er iets gebeurt wanneer de gebruiker een knop selecteert. Plaats de ActionScript-code in dezelfde frames als de knoppen. Het deelvenster Codefragmenten beschikt over vooraf geschreven ActionScript 3.0-code voor vele verschillende knopgebruiken. Zie Interactiviteit toevoegen met codefragmenten.

     ActionScript 2.0 is niet compatibel met ActionScript 3.0. Als uw Animate-versie ActionScript 3.0 gebruikt, kunt u geen ActionScript 2.0-code in een knop plakken (en andersom). Controleer of uw versie compatibel is voordat u ActionScript uit een andere bron in uw knoppen plakt.

Een knop met een knopsymbool maken

U kunt een knop interactief maken door een instantie van het knopsymbool in het werkgebied te plaatsen en vervolgens handelingen aan de instantie toe te wijzen. U wijst de handelingen toe aan de hoofdtijdlijn van het FLA-bestand. Voeg geen handelingen toe aan de tijdlijn van het knopsymbool. Als u handelingen aan de knoptijdlijn wilt toevoegen, kunt u beter een filmclipknop gebruiken.

  1. Selecteer Bewerken > Alle selecties opheffen of klik in een leeg gebied van het werkgebied om ervoor te zorgen dat niets in het werkgebied is geselecteerd.

  2. Kies Invoegen > Nieuw symbool.

  3. Typ een naam in het dialoogvenster Nieuw symbool maken. Selecteer Knop als het symbooltype.

    Animate schakelt over naar de symboolbewerkmodus. De tijdlijn verandert om vier opeenvolgende frames weer te geven met de labels Omhoog, Boven, Omlaag en Actief. Het eerste frame, Omhoog, is een leeg hoofdframe.

  4. U kunt de knopafbeelding voor de toestand Omhoog maken door het frame Omhoog te selecteren in de tijdlijn. Gebruik vervolgens de tekengereedschappen, importeer een afbeelding of plaats een instantie van een ander symbool in het werkgebied.

    U kunt grafische symbolen of filmclipsymbolen in een knop gebruiken, maar u kunt niet een ander knopsymbool gebruiken.

  5. Klik in de tijdlijn op het frame Boven en selecteer vervolgens Invoegen > Tijdlijn > Hoofdframe.

    Animate voegt een hoofdframe in dat de inhoud van het voorafgaande frame Omhoog dupliceert.

  6. Terwijl het frame Boven nog steeds is geselecteerd, wijzigt of bewerkt u de knopafbeelding in het werkgebied om de gewenste weergave voor de toestand Boven te maken.

  7. Herhaal stap 5 en 6 voor het frame Omlaag en het optionele frame Actief.

  8. Als u een geluid wilt toewijzen aan een toestand van de knop, selecteert u het frame van die toestand in de tijdlijn en kiest u Venster > Eigenschappen. Selecteer vervolgens een geluid in het menu Geluid in de Eigenschapcontrole. Alleen geluiden die u al hebt geïmporteerd, verschijnen in het menu Geluid.

  9. Wanneer u klaar bent, selecteert u Bewerken > Document bewerken. Hiermee keert u in Animate terug naar de hoofdtijdlijn van uw FLA-bestand. Als u een instantie wilt maken van de knop die u in het werkgebied hebt gemaakt, sleept u het knopsymbool van het deelvenster Bibliotheek naar het werkgebied.

  10. Kies de opdracht Besturing > Testen  om de functionaliteit van een knop te testen. U kunt de toestanden van een knopsymbool in het werkgebied ook voorvertonen door Besturing > Eenvoudige knoppen inschakelen te selecteren. Op deze manier kunt u de toestanden Omhoog, Boven en Omlaag van een knopsymbool weergeven zonder dat u de opdracht Besturing > Testen hoeft te gebruiken.

Knopsymbolen inschakelen, bewerken en testen

Standaard blijven knopsymbolen in Animate uitgeschakeld wanneer u ze maakt. Selecteer een knop en schakel deze in om te zien hoe de knop reageert op muisgebeurtenissen. U kunt knoppen tijdens het werken het beste uitschakelen en ze pas inschakelen als u hun functionaliteit snel wilt testen.

  • Selecteer een knop door met het selectiegereedschap een selectiekader rond de knop te slepen.

  • Als u knoppen wilt in- of uitschakelen in het werkgebied, kiest u Besturing > Eenvoudige knoppen inschakelen. Deze opdracht fungeert als een schakelknop tussen de twee toestanden.

  • U kunt een knop verplaatsen met de pijltoetsen.

  • Gebruik de Eigenschapcontrole om een knop te bewerken. Kies Venster > Eigenschappen als de Eigenschapcontrole niet wordt weergegeven.

  • Kies Besturing > Eenvoudige knoppen inschakelen als u de knop in de ontwerpomgeving wilt testen.

  • Kies Besturing > Film testen (of Scène testen) > Testen als u de knop in Flash Player wilt testen. Dit is de enige manier waarop u filmclipknoppen kunt testen.

  • Als u een knop wilt testen in het voorbeeldvenster van de bibliotheek, selecteert u een knop in de bibliotheek en klikt u op Afspelen.

Problemen met knoppen oplossen

Gebruik deze bronnen om veel voorkomende problemen met knoppen op te lossen:

Aanvullende knopbronnen

De volgende TechNotes bevatten instructies voor enkele specifieke knopscenario's:

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online