Läs den här artikeln om du vill veta mer om hur du använder anpassade komponenter.

Komponenter tillhandahåller en funktion eller en grupp av relaterade återanvändbara och anpassningsbara komponenter som förbättrar produktiviteten för annonskreatörer. Tidigare hade Animate CC stöd för Flash-komponenter som användes med Flash-baserade mål. Från och med den här versionen har Animate stöd för HTML5 Canvas. 

  1. Välj Arkiv > Nytt.

    Välj Avancerat bland flikarna upptill på skärmen i dialogrutan Nytt dokument och välj sedan alternativet HTML5 Canvas.

    Nytt dokument
    HTML5 Canvas
  2. Välj Fönster > Komponenter.

    Standardkomponenter
    Standardkomponenter

  3. Välj Komponenter > Video. Dra och släpp de associerade komponenterna på arbetsytan. 

  4. Markera komponentinstansen Video på scenen och visa och ändra parametrarna i egenskapsinspektören. Med parametern Source kan du välja videofilen från en lokal plats eller ange en URL-adress för att spela upp videofilmen (mp4-, ogg-, ogv- eller webm-format). 

    components_drag_drop
    Dra och släpp komponenterna

  5. Välj Matcha källdimensioner för att ändra storlek på videospelaren så att den matchar storleken på den ingående videon. Den här funktionen fungerar bara med mp4-videofilmer. För andra videotyper måste du ändra storlek på videoinstansen på scenen manuellt för att bevara proportionerna.

  6. Tryck på Ctrl + Retur (Cmd + Retur på MAC) för att förhandsgranska filmen. Videon spelas upp i standardwebbläsaren. Eftersom kontrollerna är synliga som standard kan du visa dem genom att hovra över videon i en webbläsare.

    Du kan använda samma procedur för att använda andra komponenter.

    components_preview
    Förhandsgranska komponentutdata

Obs!

Komponenter läggs till i HTML-dokumentet som DOM-element, därför ska du använda kodfragment för komponenter (Kodfragment > HTML5 Canvas > Komponenter) när du vill lägga till interaktivitet i komponenter.

Lägga till interaktivitet i komponenter med kodfragment

  1. Välj Fönster > Komponenter.

  2. Om du vill lägga till interaktivitet i komponenterna väljer du panelen Kodfragment på menyn Fönster. Du kan visa mappningen för de olika tillgängliga komponentbeteendena.

  3. På panelen Kodfragment väljer du HTML5 Canvas > Komponenter.

    component_snippets
    Standardkodfragment

  4. Baserat på den valda komponenten dubbelklickar du på motsvarande kodfragment för att visa det på åtgärdspanelen. Information om hur du lägger till interaktivitet i kodfragment finns i Lägga till interaktivitet med kodfragment i Animate CC

Exempel

Använd följande exempel för att lära dig hur du använder kodfragment där videouppspelningen styrs med kod.

  1. Markera videoinstansen på scenen och inaktivera automatisk uppspelning i egenskapsinspektören. 

  2. Dubbelklicka på komponenten Knapp två gånger på komponentpanelen för att skapa två instanser på scenen och placera knapparna. Du kan också dra och släppa dem direkt från komponentpanelen till scenen.

    Component_example_7
    Placera knapparna

  3. Markera den första knappinstansen och ändra etiketten till Spela upp i egenskapsinspektören och den andra knappen till Pausa. 

  4. Öppna panelen Kodfragment genom att klicka på Fönster > Kodfragment. Navigera till HTML5 Canvas > Komponenter och expandera avsnittet om användargränssnitt. 

  5. Markera knappen Spela upp på scenen, dubbelklicka på Klickhändelse på knapp på panelen Kodfragment och klicka sedan på OK. Den valda knappen tilldelas ett instansnamn i Animate CC. Du kan visa den nyligen tillagda koden på åtgärdspanelen.

    Component_example_4
    Lägga till kodfragment

  6. Markera videon på scenen och expandera avsnittet Video i Kodfragment. Dubbelklicka på Spela en video. Den kod som behövs för att spela upp videon läggs till på åtgärdspanelen.

    Component_example_5
    Kod som lagts till på åtgärdspanelen

  7. Om du vill att videon spelas upp när någon klickar på knappen flyttar du koden mellan taggarna <Start your custom code> och <End your custom code>. 

    Component_example_6
    Flytta koden mellan taggarna

  8. Om du vill lägga till kod för att pausa videon väljer du pausknappen, tilldelar en ny knappklickningshanterare och lägger till pausningskoden.

  9. Förhandsgranska filmen. Klicka på uppspelningsknappen för att spela upp videofilmen och klicka på pausknappen för att pausa den. 

Obs!

Du kan visa attributet className för varje komponent i egenskapsinspektören. Använd de här klassnamnen för att skapa skal för komponenterna med en CSS. Använd CSS-komponenten för att läsa in de anpassade CSS-filerna. Med CSS-komponenten kan du välja en lokal CSS-fil som ingår i filmen.

Installera distribuerade komponenter

Animate-designers och -utvecklare kan installera den distribuerade ZXP-filkomponenten med hjälp av verktyget Hantera tillägg.

Förutsättning

Verktyget Hantera tillägg. Klicka på Hjälp > Hantera tillägg i Animate CC-produkten om du behöver hämtningsanvisningar.

Installera komponenter

Utför följande steg för att installera distribuerade komponenter:

  1. Dubbelklicka på filen ManageExtensions.exe. Dialogrutan Hantera tillägg visas.

    ManageExtensions
  2. Klicka på Installera ett tillägg och välj det tillägg (.zxp) som du vill installera.

  3. Om du vill visa den installerade komponenten i Animate CC klickar du på Fönster > Komponent. Dialogrutan Komponenter visas. 

  4. Klicka på streckikonen i det övre högra hörnet och klicka på Läs in komponenterna igen.

    reloading-components

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy