Handboek Annuleren

Maken van aangepaste componenten: Voorbeelden

  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

 

Gebruik dit artikel om een voorbeeld van een aangepaste HTML5-component te begrijpen.

In dit artikel wordt beschreven hoe u aangepaste componenten maakt. Het eerste voorbeeld beschrijft de afbeeldingscomponent (die ook wordt geleverd met Animate ) en het proces om het framework en de stappen die nodig zijn bij de ontwikkeling, te begrijpen. In het tweede voorbeeld wordt beschreven hoe u een bestaande UI-component (zoals jQueryUI) kunt verpakken en importeren naar Animate.

  1. Maken van een DOM-afbeeldingscomponent

    Een categorie maken met de naam Mijn componenten

    a. Maak een map mycomponents onder de map <HTML5Components> die wordt aangeroepen bij de eerste uitvoering

    b. Download het bijgevoegde bestand myimage.zip en pak de inhoud uit in de map

        mycomponents.

    Downloaden

    c. Start Animate opnieuw.

Mapstructuur in de map mycomponents
Mapstructuur in de map mycomponents

U moet nu dan een nieuwe categorie zien met de naam „My Components” in de componentenmap en een nieuwe component met de naam My Image eronder. U kunt dit in het werkgebied slepen, de eigenschap van de bronafbeelding instellen en de film publiceren om de aangepaste componenten in actie te zien. 

Metadata van component - components.js

Components.js-code
Components.js

Houd er rekening mee dat de categorie is ingesteld op CATEGORY_MY_COMPONENTS. De namen van elk van de eigenschappen gebruiken ook vergelijkbare sleutels. Dit is de sleutel voor de gelokaliseerde tekenreeks voor de categorienaam. Als u strings.json opent in de lokale map, worden de volgende items getoond.

 De meest gangbare fout tijdens het bewerken van dit bestand is een komma na het laatste element in de array.

Categoriedetails
Categoriedetails

De waarde van het pictogramveld is ingesteld op Sp_Image_Sm. Als u naar de map assets gaat, kunt u de volgende twee png-afbeeldingen zien met het voorvoegsel Sp_Image_Sm.

Waarde van het pictogramveld
Waarde van het pictogramveld

Dit zijn de pictogrammen voor een donkere en lichte UI.

De waarde van het 'source'-veld in components.json is ingesteld op 'src/myimage.js'. 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

U kunt de opmerkingen in de code volgen om het gemakkelijk te begrijpen. 

Kijk zeker ook eens naar de bron van de andere componenten die worden meegeleverd met Animate. In de meeste gevallen kunt u een daarvan gebruiken als beginpunt en vervolgens configureren volgens uw eigen vereisten.

Het verpakken van een jQuery-UI component

Dit gedeelte beschrijft hoe u een jQuery-UI-widget kunt verpakken en gebruiken in Animate. Dezelfde concepten kunnen worden gebruikt om een andere bestaande component uit eender welk ander UI-framework te verpakken.

Laten we eens kijken naar de verpakte DatePicker-component met Animate die een jQuery-UI-widget is. Download en extraheer de inhoud van het volgende archief en gebruik het ter referentie.

Downloaden

Structuur van de geëxtraheerde inhoud
Structuur van de geëxtraheerde inhoud

De map met de naam jquery-ui-1.12.0 is de bron voor het jQuery UI-framework dat de originele DatePicker-widget en de bijbehorende bronnen, zoals afbeeldingen en css, bevat om te verpakken en gebruiken in Animate zoals elke andere HTML5-component. Dit is alleen vereist voor lokale voorvertoning. Als u “gehoste bibliotheken” gebruikt in de publicatie-instellingen, hebt u de optie om de cdn te gebruiken om de afhankelijke bronnen te downloaden. 

Components.js-code
Components.js

Er zijn twee standaard afhankelijkheden, jQuery en anwidget.js. Aangezien anwidget.js niet in de CDN zit, hebben we er geen enkel CDN-item voor.

De volgende reeks items is voor de andere bronnen die vereist zijn voor het laden van het datepicker-widget uit de jquery ui. Als u een widget van een andere bibliotheek in een pakket opneemt, kunt u de set van afhankelijkheden ook opgeven. Deze afhankelijkheden worden gedownload voordat de component wordt geïnitialiseerd.

In het gedeelte eigenschappen hebben we slechts één eigenschap met de naam label beschikbaar gemaakt, die aan de label-eigenschap voor de date-picker component is verbonden. Op dezelfde manier kunnen we de andere eigenschappen ook beschikbaar maken, waarvan we willen dat de gebruiker ze kan configureren in ontwerpomgeving van Animate. Bij uitvoering wordt elk van deze beschikbaar als sleutelwaardepaar in de array opties voor de instantie. We kunnen de geconfigureerde waarde extraheren en deze toepassen bij uitvoering.

Hoofdbronbestand: src/datepicker.js.
Hoofdbronbestand: src/datepicker.js.

Secties die van het voorbeeld verschillen

  1. getCreateString:

    Het datepicker-widget van de jQuery-UI heeft een dergelijk invoertekstelement en zet dit om in een date-picker element bij uitvoering. Daarom wordt dienovereenkomstig DOM geïnitialiseerd.

  2. attach:

    We moeten deze functie voor deze widget overschrijven. Deze API wordt aangeroepen wanneer het element aan de DOM wordt gekoppeld. Vanwege de manier waarop de onderliggende runtime (in dit geval createjs) werkt, kan deze API meerdere keren tijdens een framereeks worden aangeroepen.

    We onthouden de toegevoegde status van het onderliggende element en roepen de toegevoegde API aan van de basisklasse (door gebruik te maken van._superApply (argumenten)). Als dit de eerste keer is dat we het element aan de ouder DOM toevoegen, dan gebruiken we de onderliggende aanroep voor widget jQuery-UI om de DOM van onze component naar een datumkiezer te converteren. Zie - https://jqueryui.com/datepicker/

    Het grootste deel van javascript-widgets werkt op een vergelijkbare manier. U kunt dezelfde techniek gebruiken om een willekeurige component van uw keuze te verpakken en op dezelfde manier in Animate te brengen.

  3. Update: We overschrijven update en passen de css-eigenschappen toe op de container div en kenmerken op het echte DOM-element.

     Wanneer u API's, zoals band toevoegt, weghaalt of bijwerkt, controleert u de standaard implementatie van de basisklasse en roept u de basisimplementatie op het gewenste moment op omdat de initialisatie component anders kan mislukken.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?