Användarhandbok Avbryt

Så här skapar du knappar med Animate

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

 

Grundläggande steg för att skapa knappar

  1. Bestäm vilken typ av knapp som bäst passar för dina behov

    Knappsymbol

    De flesta väljer knappsymboler utifrån flexibilitet. Knappsymboler innehåller en speciell intern tidslinje för knapplägen. Du kan enkelt skapa visuellt olika upp-, ned- och överlägen. Lägena för knappsymbolerna ändras dessutom automatiskt när de påveraks av användarens åtgärder.

    Skapa en filmklippsknapp

    Du kan använda en filmklippssymbol för att skapa sofistikerade knappeffekter. Filmklippssymboler kan innehålla nästa alla typer av innehåll, inklusive animeringar. Filmklippssymboler har emellertid inte inbyggda upp-, ned- och överlägen. Du skapar dessa lägen själv med ActionScript. En nackdel är emellertid att filmklippsfiler är större än knappfiler.

    Knappkomponent för ActionScript

    Använd en knappkomponent om du bara vill ha en standardknapp eller en alternativknapp, och om du inte vill anpassa den i någon större utsträckning. I knappkomponenterna för både ActionScript 2.0 och 3.0 finns inbyggd kod som möjliggör lägesändringar. Du behöver alltså inte definiera utseendet och beteendet för knapplägena. Det är bara att dra komponenten till scenen.

    • ActionScript 3.0-knappkomponenter tillåter vissa anpassningar. Du kan knyta knappen till andra komponenter samt dela och visa programdata. De har inbyggda funktioner som exempelvis stöd för hjälpmedel. Komponenterna Button, RadioButton och CheckBox finns tillgängliga.

    • Knappkomponenter för ActionScript 2.0 är inte anpassningsbara. Komponenten möjliggör lägesändringar.

  2. Definiera dina knapplägen.

    Upp-bildrutan

    Utseendet på knappen när användaren inte använder den.

    Över-bildrutan

    Utseendet på knappen när användaren är på väg att välja den.

    Ned-bildrutan

    Utseendet på knappen när användaren väljer den.

    Träff-bildrutan

    Området som känner av användarens klickningar. Det är valfritt att definiera denna träff-bildruta. Om du har en liten knapp eller om dess grafikområde inte är intilliggande, kan det vara bra att definiera den här bildrutan.

    • Innehållet i träff-bildrutan visas inte på scenen under uppspelning.

    • Grafiken i träff-bildrutan är ett fyllt område som är stort nog att rymma alla grafiska element i upp-, ned- och över-bildrutorna.

    • Om du inte anger en träff-bildruta används bilden för upp-läget.

      Du kan skapa en knapp som reagerar när du klickar på eller för pekaren över ett annat område på scenen (kallas även oförenad rollover). Placera grafiken i träff-bildrutan på en annan plats än den andra grafiken i knappbildrutor.

  3. Associera en åtgärd med en knapp.

    Om du vill att något ska hända när användarna väljer en knapp, ska du lägga till ActionScript-kod på tidslinjen. Placera ActionScript-koden i samma bildruta som knapparna. På panelen Kodfragment finns redan ActionScript 3.0-kod för många av de vanliga användningsområdena för knappar. Se Skapa interaktivitet med kodfragment.

     ActionScript 2.0 är inte kompatibelt med ActionScript 3.0. Om din version av Animate använder ActionScript 3.0, kan du inte klistra in ActionScript 2.0-kod i knappen (och vice versa). Innan du klistrar in ActionScript-kod från en annan källa i dina knappar, måste du kontrollera att versionen är kompatibel.

Skapa en knapp med en knappsymbol

Om du vill göra en knapp interaktiv placerar du en instans av knappsymbolen på scenen och tilldelar åtgärder till instansen. Du tilldelar åtgärderna till rottidslinjen i FLA-filen. Du kan inte lägga till åtgärder till tidslinjen för knappsymbolen. Om du vill lägga till åtgärder till knapptidslinjen, ska du i stället använda filmklippsknappen.

  1. Välj Redigera > Avmarkera allt eller klicka på ett tomt område på scenen för att vara säker på att inget är markerat på scenen.

  2. Välj Infoga > Ny symbol.

  3. Skriv ett namn i dialogrutan Skapa ny symbol. Välj Knapp som symboltyp.

    Animate växlar till symbolredigeringsläge. Tidslinjen ändras till fyra bildrutor med etiketterna Upp, Över, Ned och Träff. Den första bildrutan, Upp, är en tom nyckelbildruta.

  4. För att skapa knappbilden för Upp-läget väljer du Upp-bildrutan på tidslinjen och använder sedan ritverktygen, importerar grafik eller placerar en instans av en annan symbol på scenen.

    Du kan använda bildsymboler eller filmklippssymboler inuti en knapp, men du kan inte använda en annan knappsymbol.

  5. På tidslinjen klickar du på Över-bildrutan och väljer sedan Infoga > Tidslinje > Nyckelbildruta.

    Med Animate infogas en nyckelbildruta som duplicerar innehållet i Upp-bildrutan.

  6. Medan Över-bildrutan fortfarande är markerad kan du ändra eller redigera knappbilden på scenen för att skapa det utseende som du vill ha för över-läget.

  7. Upprepa steg 5 och 6 för Ned-bildrutan och den valfria Träff-bildrutan.

  8. Om du vill tilldela ett ljud till ett knappläge väljer du lägets bildruta på tidslinjen och sedan Fönster > Egenskaper. Välj sedan ett ljud på menyn Ljud i egenskapsinspektören. Endast ljud som redan är importerade visas på menyn Ljud.

  9. När du är klar väljer du Redigera > Redigera dokument. Du kommer nu tillbaka till huvudtidslinjen i FLA-filen. Om du vill skapa en instans av den knapp som du skapade på scenen drar du knappsymbolen från bibliotekspanelen till scenen.

  10. Om du vill testa en knapps funktion använder du kommandot Kontroll > Testa. Du kan även förhandsgranska lägena för en knappsymbol på scenen genom att välja Kontroll > Aktivera enkla knappar. Med det här kommandot kan du se upp-, över och ned-lägena för en knappsymbol utan att använda Kontroll > Testa.

Aktivera, redigera och testa knappsymboler

Standard är att Animate håller knappsymbolerna inaktiverade medan du skapar dem. Välj och aktivera sedan en knapp för att se hur den påverkas av mushändelser. Det bästa sättet är att inaktivera knapparna medan du arbetar och sedan aktivera dem för att snabbt testa deras beteende.

  • Om du vill markera en knapp använder du markeringsverktyget och drar en markeringsrektangel runt knappen.

  • Om du vill aktivera eller inaktivera knappar på scenen väljer du Kontroll > Aktivera enkla knappar. Detta kommando gör att en växling mellan de båda lägena sker.

  • Om du vill flytta en knapp använder du piltangenterna.

  • Om du vill redigera en knapp använder du egenskapsinspektören. Om du inte ser den väljer du Fönster > Egenskaper.

  • Om du vill testa knappen i utvecklingsmiljön väljer du Kontroll > Aktivera enkla knappar.

  • Om du vill testa knappen i Flash Player väljer du Kontroll > Testa filmen [eller Testa scenen] > Testa. Detta är det enda sättet att testa filmklippsknappar.

  • Om du vill testa knappen på förhandsgranskningspanelen i biblioteket markerar du knappen i biblioteket och klickar sedan på Spela upp.

Felsökning av knappar

Använd dessa resurser för att felsöka vanliga problem som kan förekomma med knappar:

Ytterligare knappresurser

Följande TechNotes innehåller instruktioner för några specifika knappscenarier:

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