Användarhandbok Avbryt

Använda komponenter i HTML5 Canvas

Sök
Animate

Animate

Öppna appen
  1. Användarhandbok om Adobe Animate
  2. Introduktion till Animate
    1. Nyheter i Animate
    2. Visuell ordlista
    3. Systemkrav för Animate
    4. Tangentbordsgenvägar för Animate
    5. Arbeta med flera filtyper i Animate
  3. Animering
    1. Grunderna vid animering i Animate
    2. Så här använder du bildrutor och nyckelbildrutor i Animate
    3. Animering bildruta för bildruta i Animate
    4. Så här arbetar du med klassiska övergångsanimeringar i Animate
    5. Pensel
    6. Rörelseguide
    7. Rörelseinterpoleringar och ActionScript 3.0
    8. Om övergångsanimeringar med rörelse
    9. Animeringar med rörelseinterpolering
    10. Skapa en animering med rörelseinterpolering
    11. Använda nyckelbildrutor för egenskaper
    12. Animera placering med en interpolering
    13. Så här redigerar du rörelseinterpoleringar med rörelseredigeraren
    14. Redigera rörelsebanan för en interpolerad animering
    15. Ändra rörelseinterpoleringar
    16. Lägga till anpassade övergångar
    17. Skapa och använda förinställda rörelser
    18. Konfigurera interpoleringsintervall för animeringar
    19. Arbeta med rörelseinterpoleringar sparade som XML-filer
    20. Rörelseinterpoleringar jämfört med klassiska interpoleringar
    21. Skapa övergångar
    22. Använda animeringar med benverktyget i Animate
    23. Arbeta med figurriggning i Animate
    24. Så här använder du maskeringslager i Adobe Animate
    25. Så här arbetar du med scener i Animate
  4. Interaktivitet
    1. Så här skapar du knappar med Animate
    2. Konvertera Animate-projekt till andra dokumenttypsformat
    3. Skapa och publicera HTML5 Canvas-dokument i Animate
    4. Lägga till interaktivitet med kodfragment i Animate
    5. Skapa anpassade HTML5-komponenter
    6. Använda komponenter i HTML5 Canvas
    7. Skapa anpassade komponenter: Exempel
    8. Kodfragment för anpassade komponenter
    9. God praxis - annonsera med Animate
    10. Redigera och publicera VR
  5. Arbetsyta och arbetsflöde
    1. Skapa och hantera målarpenslar
    2. Använda Google Fonts i HTML5 Canvas-dokument
    3. Använda Creative Cloud Libraries och Adobe Animate
    4. Använda scen- och verktygspanelerna i Animate
    5. Arbetsflöde och arbetsyta i Animate
    6. Använda webbteckensnitt i HTML5 Canvas-dokument
    7. Tidslinjer och ActionScript
    8. Arbeta med flera tidslinjer
    9. Ange inställningar
    10. Använda redigeringspanelerna i Animate
    11. Skapa tidslinjelager med Animate
    12. Exportera animeringar för mobilprogram och spelplattformar
    13. Flytta och kopiera objekt
    14. Mallar
    15. Söka och ersätta i Animate
    16. Ångra, gör om och panelen Historik
    17. Kortkommandon
    18. Så här använder du tidslinjen i Animate
    19. Skapa HTML-tillägg
    20. Optimeringsalternativ för bilder och animerade GIF-filer
    21. Exportinställningar för bilder och GIF-filer
    22. Panelen Resurser i Animate
  6. Multimedia och video
    1. Omforma och kombinera grafikobjekt i Animate
    2. Skapa och arbeta med symbolinstanser i Animate
    3. Bildkalkering
    4. Så här använder du ljud i Adobe Animate
    5. Exportera SVG-filer
    6. Skapa videofiler för användning i Animate
    7. Så här lägger du till en video i Animate
    8. Rita och skapa objekt med Animate
    9. Omforma linjer och former
    10. Linjer, fyllningar och övertoningar med Animate CC
    11. Arbeta med Adobe Premiere Pro och After Effects
    12. Färgpaneler i Animate CC
    13. Öppna Flash CS6-filer i Animate
    14. Arbeta med klassisk text i Animate
    15. Placera grafik i Animate
    16. Importerade bitmappar i Animate
    17. 3D-grafik
    18. Arbeta med symboler i Animate
    19. Rita linjer och former med Adobe Animate
    20. Arbeta med bibliotek i Animate
    21. Exportera ljud
    22. Markera objekt i Animate CC
    23. Arbeta med Illustrator AI-filer i Animate
    24. Använda blandningslägen
    25. Ordna objekt
    26. Automatisera uppgifter med kommandomenyn
    27. Flerspråkig text
    28. Använda kameran i Animate
    29. Grafikfilter
    30. Ljud och ActionScript
    31. Ritinställningar
    32. Rita med ritstift
  7. Plattformar
    1. Konvertera Animate-projekt till andra dokumenttypsformat
    2. Stöd för anpassade plattformar
    3. Skapa och publicera HTML5 Canvas-dokument i Animate
    4. Skapa och publicera ett WebGL-dokument
    5. Så här paketerar du AIR för iOS-program
    6. Publicera AIR for Android-program
    7. Publicera för Adobe AIR för datorprogram
    8. Inställningar för ActionScript-publicering
    9. God praxis – organisera ActionScript i ett program
    10. Så här använder du ActionScript med Animate
    11. Hjälpmedel på arbetsytan i Animate
    12. Skriva och hantera skript
    13. Aktivera stöd för anpassade plattformar
    14. Översikt över stöd för anpassade plattformar
    15. Arbeta med plugin-program för anpassade plattformar
    16. Felsöka ActionScript 3.0
    17. Aktivera stöd för anpassade plattformar
  8. Exportera och publicera
    1. Så här exporterar du filer från Animate CC
    2. OAM-publicering
    3. Exportera SVG-filer
    4. Exportera bilder och video med Animate
    5. Publicera AS3-dokument
    6. Exportera animeringar för mobilprogram och spelplattformar
    7. Exportera ljud
    8. God praxis – tips för att skapa innehåll på mobila enheter
    9. God praxis – videokonventioner
    10. God praxis – riktlinjer för utveckling av SWF-program
    11. God praxis – strukturera FLA-filer
    12. De bästa sätten att optimera FLA-filer för Animate
    13. Inställningar för ActionScript-publicering
    14. Ange publiceringsinställningar för Animate
    15. Exportera projektorfiler
    16. Exportera bilder och animerade GIF-filer
    17. Publiceringsmallar för HTML
    18. Arbeta med Adobe Premiere Pro och After Effects
    19. Dela och publicera animeringar snabbt
  9. Felsökning
    1. Åtgärdade fel
    2. Kända fel

 

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

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

    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.

    Förhandsgranska komponentutdata

 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.

    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 .

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.

    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. Du kan visa den nyligen tillagda koden på åtgärdspanelen.

    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.

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

    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. 

 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.

Intressanta HTML5-komponenter

Det är intressant att lägga till interaktivitet i ditt innehåll och inkluderar många funktioner med HTML 5-komponenter. Vill du veta hur du använder dessa HTML5-komponenter på Animate? Titta på självstudiekursen i slutet av det här exemplet och följ stegen.

  1. Klicka på Fönster och välj Komponenter.

  2. Expandera mappen Videor, klicka och dra videoikonen till scenen.

  3. Expandera fliken Positioner och storlek på fliken Egenskaper och ange de nödvändiga värdena.

Så här förbättrar du dina kompositioner i Animate med HTML5-komponenter

Titta på videon för att lära dig hur du inkluderar fler komponenter i din komposition.

Installera distribuerade komponenter

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

Förutsättning

Installera komponenter

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

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

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

  3. Om du vill visa den installerade komponenten i Animate 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.

Liknande innehåll

Få hjälp snabbare och enklare

Ny användare?

Snabblänkar

Visa alla dina planer Hantera dina planer
Visa snabblänkar
Dölj snabblänkar

Juridiska meddelanden    |    Sekretesspolicy online