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 CC 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
    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). 

    components_drag_drop
    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.

    components_preview
    De uitvoer van de voorvertoning van de component

Opmerking:

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.

    component_snippets
    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 CC

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.

    Component_example_7
    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 CC wijst een instantienaam toe aan de geselecteerde knop. U kunt de onlangs toegevoegde code in het deelvenster Handelingen bekijken.

    Component_example_4
    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.

    Component_example_5
    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>. 

    Component_example_6
    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. 

Opmerking:

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.

Gedistribueerde componenten installeren

Animate-ontwerpers of -ontwikkelaars kunnen de gedistribueerde ZXP-bestandscomponent installeren met het hulpprogramma Uitbreidingen beheren.

Voorwaarde

Het hulpprogramma Uitbreidingen beheren. Voor downloadinstructies klikt u op Help > Uitbreidingen beheren in uw Animate CC-product.

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.

    ManageExtensions
  2. Klik op Uitbreiding installeren en selecteer de uitbreiding (ZXP-bestand) die u wilt installeren.

  3. Als u de geïnstalleerde component in Animate CC 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.

    reloading-components

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