Handboek Annuleren

Interactiviteit toevoegen met codefragmenten in 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

 

Met het deelvenster Codefragmenten kunnen degenen die niet bekend zijn met programmeren, toch snel aan de slag met JavaScript en ActionScript 3.0. In dit deelvenster kunt u -code toevoegen aan uw FlA-bestand en zo veelgebruikte functionaliteit toevoegen. Om het deelvenster Codefragmenten te gebruiken hebt u geen kennis van JavaScript of ActionScript 3.0 nodig.

Met het deelvenster Codefragmenten kunt u de volgende taken uitvoeren:

  • Code toevoegen die invloed heeft op het gedrag van een object in het werkgebied.

  • Code toevoegen die de beweging bepaalt van de afspeelknop op de tijdlijn.

  • (alleen CS5.5) - Code toevoegen die gebruikersinteractie via een aanraakscherm mogelijk maakt.

  • Nieuwe door u gemaakte codefragmenten toevoegen aan het deelvenster.

Met de codefragmenten die zijn meegeleverd met Animate, kunt u ook op een eenvoudige manier meer te weten te komen over JavaScript of ActionScript 3.0. Door de code in de fragmenten te bekijken en de instructies over de fragmenten te volgen, raakt u vertrouwd met de codestructuur en de begrippen die worden gebruikt.

Optie Codefragmenten in Animate
Optie Codefragmenten in Animate

Voordat u begint

Het is belangrijk dat u de volgende grondbeginselen van Animate begrijpt als u met het deelvenster Codefragmenten werkt:

  • Bij veel van de codefragmenten moet u een aantal elementen van de code aanpassen. In Animate doet u dit in het deelvenster Handelingen. Elk fragment bevat specifieke instructies hiervoor.

  • Alle voorbeelden bevatten ofwel JavaScript- of ActionScript 3.0-code.

  • Sommige fragmenten hebben invloed op het gedrag van een object, zodat op het object kan worden geklikt of waardoor het wordt verplaatst of verdwijnt. U kunt deze fragmenten toepassen op het object in het werkgebied.

  • Sommige fragmenten zorgen ervoor dat een actie onmiddellijk wordt uitgevoerd zodra de afspeelknop zich bevindt in een frame waar het fragment deel van uitmaakt. Deze fragmenten past u toe op een tijdlijnframe.

  • Wanneer u een codefragment toepast, wordt de code aan het huidige frame van de laag Handelingen in de tijdlijn toegevoegd. Als u zelf geen laag Handelingen hebt gemaakt, voegt Animate boven alle andere lagen op de tijdlijn een laag toe.

  • Aan een object moet in Eigenschapcontrole een instantienaam worden toegewezen, zodat ActionScript het object in het werkgebied kan beheren.

  • U kunt klikken op de knoppen Beschrijving tonen en Code tonen. Deze knoppen verschijnen als u een fragment selecteert in het deelvenster.

Een codefragment toevoegen aan een object of tijdlijnframe

Een actie toevoegen die invloed heeft op een object of de afspeelknop:

  1. Selecteer een object in het werkgebied of een frame op de tijdlijn.

    Als u een object selecteert dat geen symboolinstantie is, wordt het object door Animate geconverteerd naar een filmclipsymbool als u het fragment toepast.

    Als u een object selecteert dat niet al een instantienaam heeft, wordt er door Animate een instantienaam toegevoegd als u het fragment toepast.

  2. Dubbelklik in het deelvenster Codefragmenten (Venster > Codefragmenten) op het fragment dat u wilt toepassen.

    Als u een object in het werkgebied hebt geselecteerd, wordt het fragment door Animate aan het deelvenster Handelingen toegevoegd voor de frames die het geselecteerde object bevatten.

    Als u een tijdlijnframe hebt geselecteerd, wordt het fragment door Animate alleen aan dat frame toegevoegd.

  3. Bekijk de zojuist toegevoegde code in het deelvenster Handelingen en volg de instructies boven aan het fragment om zo nodig elementen te vervangen.

Codefragmenten in deelvenster Handelingen

Nieuwe fragmenten toevoegen in het deelvenster Codefragmenten

U kunt op twee manieren nieuwe codefragmenten toevoegen aan het deelvenster Codefragmenten:

  • Door een fragment in te voeren in het dialoogvenster Nieuw codefragment maken.

  • Door een XML-bestand met het codefragment te importeren.

Het dialoogvenster Nieuw codefragment maken gebruiken:

  1. Kies in het menu van het deelvenster Codefragmenten de optie Nieuw codefragment maken.

  2. Geef in het dialoogvenster de titel, de knopinfotekst en de JavaScript- of ActionScript 3.0-code voor uw fragment op.

    Klik op de knop Automatisch vullen om de code toe te voegen die op dat moment is geselecteerd in het deelvenster Handelingen.

  3. Schakel het selectievakje Automatisch instance_name_here·vervangen·in·als·uw·code·de·tekenreeks·"instance_name_here" bevat en als u wilt dat deze tekenreeks door Animate automatisch wordt vervangen door de juiste instantienaam wanneer het fragment wordt toegepast.

    Het nieuwe fragment wordt door Animate toegevoegd aan de map Aangepast in het deelvenster Codefragmenten.

Een codefragment in XML-indeling importeren:

  1. Kies in het menu van het deelvenster Codefragmenten de optie XML van codefragmenten importeren.

  2. Selecteer het XML-bestand dat u wilt importeren en klik op Openen.

Kies in het deelvenstermenu de optie XML van codefragmenten bewerken om de juiste XML-indeling voor codefragmenten weer te geven.

Als u een codefragment wilt verwijderen, klikt u met de rechtermuisknop op het fragment in het deelvenster en selecteert u Delete Code Snippet (Codefragment verwijderen) in het contextmenu.

Interactieve animaties met HTML5

Bepaalde animaties vereisen codefragmenten voor ondersteuning op verschillende publicatieplatforms. Wilt u weten hoe u codefragmenten kunt gebruiken om de animatie interactief te maken? Bekijk de zelfstudie aan het einde van dit voorbeeld en voer de volgende stappen uit.

  1. Klik in Bibliotheek op Publicatie-instellingen.

  2. Selecteer JavScript/HTML.

  3. Klik op het tabblad HTML/JS op Exporteren en kies de volgende opties:

    • Bestandsnaam: Typ de naam van het bestand.
    • Opslaan als type: Selecteer HTML.
  4. Klik op OK.

Interactieve HTML5-animaties verbeteren

Bekijk de video om te zien hoe u de codes bewerkt.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?