Handboek Annuleren

Componenten gebruiken in HTML5 Canvas

Zoeken
  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

Gebruik dit artikel voor meer informatie over het gebruik van aanpasbare componenten.

De component bevat een functie of een groep verwante en opnieuw te gebruiken componenten die kunnen worden aangepast en waarmee de productiviteit van advertentiemakers wordt verbeterd. Voorheen bood Animate ondersteuning voor Flash-componenten die werden gebruikt met op Flash gebaseerde doelen. Vanaf deze release biedt Animate ondersteuning voor HTML5 Canvas. 

  1. Selecteer Bestand > Nieuw.

    Kies Geavanceerd in de tabbladen boven aan het scherm in het dialoogvenster Nieuw document en selecteer dan de optie HTML5 Canvas.

    Nieuw document
    HTML5 Canvas

  2. Selecteer Venster > Componenten.

    Standaard componenten

  3. Selecteer Componenten > Video. Sleep en plaats de bijbehorende onderdelen op het werkgebied. 

  4. Selecteer de componentinstantie Video in het werkgebied en bekijk en wijzig de parameters in de Eigenschapcontrole. Met de bronparameter Source kunnen we een videobestand selecteren op een lokaal systeem of een URL opgeven om de video af te spelen (mp4, ogg, ogv of webm-indelingen). 

    De componenten slepen en neerzetten

  5. Selecteer „brondimensies laten overeenkomen“ om het formaat van de player te wijzigen om de afmetingen van de invoervideo te laten overeenkomen. Deze functie werkt alleen voor mp4-video's. Voor andere video-indelingen dient u de afmetingen van de video-instantie in het werkgebied handmatig aan te passen om te verzekeren dat de beeldverhouding hetzelfde blijft.

  6. Druk op CTRL + ENTER (CMD + ENTER op MAC) om een voorvertoning van de film weer te geven. De video wordt in uw standaardbrowser afgespeeld. Aangezien de besturingselementen standaard zichtbaar zijn, kunt u de besturingselementen bekijken wanneer u over de video in browser beweegt.

    U kunt dezelfde procedure gebruiken om andere componenten te gebruiken.

    De uitvoer van de voorvertoning van de component

 De componenten worden aan HTML-documenten toegevoegd als DOM-elementen. U moet dus naar codefragmenten verwijzen Codefragmenten > HTML5 Canvas > Componenten) om interactiviteit toe te voegen aan de componenten.

Interactiviteit aan componenten toevoegen met behulp van codefragmenten

  1. Selecteer Venster > Componenten.

  2. Om interactiviteit aan de componenten toe te voegen, selecteert u het deelvenster Venster > Codefragmenten. U kunt de toewijzing van de verschillende beschikbare gedragingen van componenten bekijken.

  3. Selecteer in het scherm Codefragment, HTML5 Canvas > Componenten.

    Standaard codefragmenten

  4. Op basis van de component die u hebt geselecteerd, dubbelklikt u op het overeenkomende codefragment om het fragment in het deelvenster Handelingen weer te geven. Voor informatie over het toevoegen van interactiviteit aan codefragmenten, zie Interactiviteit toevoegen aan codefragmenten in Animate. 

Voorbeeld

Gebruik het volgende voorbeeld om te leren hoe u codefragmenten kunt gebruiken waarbij het afspelen van video door code wordt beheerst.

  1. Selecteer de video-instantie in het werkgebied en schakel de instelling Automatisch afspelen in Eigenschappencontrole uit. 

  2. Dubbelklik twee keer op de component Knop in het deelvenster Componenten om twee instanties in het werkgebied te maken en de knoppen in te stellen. U kunt ze ook rechtstreeks verslepen vanuit het deelvenster Componenten naar het werkgebied.

    Plaats de knoppen

  3. Selecteer de eerste knopinstantie en wijzig het label naar Afspelen in de Eigenschappencontrole en de tweede knop naar Pauzeren. 

  4. Open het deelvenster Codefragmenten door te klikken op Venster > Codefragmenten. Navigeer naar HTML5 Canvas > Componenten en vouw de sectie Gebruikersinterface uit. 

  5. Selecteer de knop Afspelen op het werkgebied, dubbelklik op de gebeurtenis Knopklik in het deelvenster Codefragment en klik op OK. Animate  wijst een instantienaam toe aan de geselecteerde knop. U kunt de onlangs toegevoegde code in het deelvenster Handelingen bekijken.

    Codefragmenten toevoegen

  6. Selecteer de Video in het werkgebied en vouw de sectie Video in Codefragmenten uit. Dubbelklik op Afspelen van een video. De code die is vereist om de video af te spelen is toegevoegd aan het deelvenster Handelingen.

    Code toegevoegd in het deelvenster Handelingen

  7. Om nu de video te af te spelen wanneer er op de knop wordt geklikt, plaatst u de code tussen <Start van uw aangepaste code> en <Einde van uw aangepaste code>. 

    Plaats de code binnen de tags

  8. Als u een code wilt toevoegen om de video te pauzeren, selecteert u de knop Pauze, wijst u de nieuwe handler voor het klikken op een knop toe en voegt u de videocode voor pauzeren toe.

  9. Een voorvertoning van de film. Klik op de knop afspelen om de video af te spelen en op de knop Pauze te klikken om de video te pauzeren. 

 U kunt het kenmerk className voor elke component in Eigenschappencontrole weergeven. Gebruik deze klassenamen om de componenten die CSS gebruiken te ontleden. Gebruik de CSS-component om uw eigen aangepaste CSS te laden. Met de CSS-component kunt u een lokaal CSS-bestand selecteren dat in de film is opgenomen.

Interessante HTML5-componenten

Door interactiviteit toe te voegen maakt u interessante inhoud en kunt u werken met allerlei functies voor HTML 5-componenten. Wilt u weten hoe u deze HTML5-componenten kunt gebruiken voor Animate? Bekijk de zelfstudie aan het einde van dit voorbeeld en voer de volgende stappen uit.

  1. Klik op Vensters en selecteer Componenten.

  2. Vouw de map Video's uit, en klik en sleep het videopictogram naar het werkgebied.

  3. Ga naar Eigenschappen, vouw het tabblad Posities en grootte uit en stel de gewenste waarden in.

Uw Animate-composities verbeteren met behulp van HTML5-componenten

Bekijk de video om te weten hoe u meer componenten aan uw compositie kunt toevoegen.

Gedistribueerde componenten installeren

Animate-ontwerpers of -ontwikkelaars kunnen de gedistribueerde ZXP-bestandscomponent installeren met het hulpprogramma Uitbreidingen beheren. Zie Extensies installeren voor meer informatie.

Voorwaarde

Componenten installeren

Om gedistribueerde componenten te installeren gaat u als volgt te werk: 

  1. Dubbelklik op het bestand ManageExtensions.exe. Het dialoogvenster Uitbreidingen beheren wordt weergegeven.

  2. Klik op Uitbreiding installeren en selecteer de uitbreiding (ZXP-bestand) die u wilt installeren. Zie Extensies installeren voor meer informatie.

  3. Als u de geïnstalleerde component in Animate wilt weergeven, klikt u op Venster > Component. Het dialoogvenster Componenten verschijnt. 

  4. Klik op het pictogram van de hamburger rechtsboven en klik op Componenten opnieuw laden.

Verwante informatie

Adobe-logo

Aanmelden bij je account

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren

Juridische kennisgeving    |    Online privacybeleid