Hur man skapar en Flash -animation (med bilder)

Innehållsförteckning:

Hur man skapar en Flash -animation (med bilder)
Hur man skapar en Flash -animation (med bilder)

Video: Hur man skapar en Flash -animation (med bilder)

Video: Hur man skapar en Flash -animation (med bilder)
Video: Activate Adobe License 2024, Mars
Anonim

Flash är det främsta mediet för animering på Internet och till och med på andra format, till exempel TV. Att skapa en enkel Flash -animation i Flash är faktiskt ganska enkelt att åstadkomma, eftersom Flash erbjuder många användbara verktyg som förenklar hela processen. Om du har en idé om en Flash -animation eller en tecknad film kan du förmodligen ha en grov skiss på bara några timmar. Se steg #1 nedan för att lära dig hur skapa en Flash -animation.

Support för Adobe Flash upphör i december 2020. Efter den tiden kommer det inte längre att vara möjligt att använda Flash

Skapa en Flash -animation Steg 1
Skapa en Flash -animation Steg 1

Steg 1. Förstå grunderna i bild-för-bild-animering

Detta anses vara den "traditionella" animeringsmetoden, eftersom varje bildruta har samma bild men något förändrad. När bilderna spelas upp tillsammans verkar bilderna röra sig. Detta är samma grundteknik som används av traditionella handanimatörer och är mer tidskrävande än tweening (Se nästa avsnitt).

Som standard producerar Flash animationer med 24 bilder per sekund (FPS). Det betyder att en sekund av animationen kommer att ha 24 bildrutor, men inte varje bildruta måste vara annorlunda. Du kan justera detta om du vill, och många Flash-animationer använder 12 FPS, men 24 ger mycket "mjukare" animering

Skapa en Flash -animation Steg 2
Skapa en Flash -animation Steg 2

Steg 2. Installera Flash Professional

Det finns en mängd olika Flash -animationsprogram tillgängliga, men det mest kraftfulla är Adobes Flash Professional CC. Du kan installera provversionen gratis eller så kan du använda en annan produkt om du inte prenumererar på Adobes Creative Cloud. Resten av denna artikel kommer att referera till Flash Professional eller något annat redigeringsprogram som "Flash".

Skapa en Flash -animation Steg 3
Skapa en Flash -animation Steg 3

Steg 3. Skapa dina tillgångar

Eftersom ram-för-bild-animering kräver flera bilder med små skillnader, måste du skapa alla dessa tillgångar för hand. Du kan skapa dem alla innan du börjar, eller göra dem när du går. Du kan använda Flash -programmet för att rita direkt i ditt projekt, eller så kan du rita dina tillgångar i ditt favoritprogram för bildskapande.

Om du vill att dina bilder ska skalas utan att offra kvalitet, vill du skapa dem som vektorer istället för raster. Vektorbilder ritar om sig själva när de skalas, vilket betyder att det inte kommer att finnas någon pixelering eller aliasing. Rasterbilder är de traditionella bilderna du förmodligen är van vid (foton, målarbilder etc.). Dessa blir inte bra och kan se ganska fula ut om du vill göra dem större

Skapa en Flash -animation Steg 4
Skapa en Flash -animation Steg 4

Steg 4. Skapa din första ram

När du först startar Flash kommer du att ha ett tomt lager och en tom tidslinje. När du lägger till ramar fylls din tidslinje automatiskt. Du kan interagera med lager på samma sätt som i Photoshop.

  • Innan du lägger till din bild, skapa en grundläggande bakgrund för din film. Byt namn på lager 1 till "Bakgrund" och lås sedan lagret. Skapa ett andra lager och namnge det vad du vill. Detta blir det lager som du skapar din animering på.
  • Lägg till din teckning på duken i den första ramen. Du kan antingen importera din ritning från din dator, eller så kan du använda Flash: s ritverktyg för att skapa en ritning direkt i programmet.
  • Din första bild kommer att vara en nyckelbild. Nyckelbilder är ramar som har en bild och utgör ryggraden i din animering. Du kommer att skapa en ny nyckelbildram varje gång bilden ändras.
  • Nyckelrutor markeras med en svart prick på tidslinjen.
  • Du behöver inte en ny bild i varje bildruta. I allmänhet ger en nyckelram var fjärde-fem bildrutor en bra animering.
Skapa en Flash -animation Steg 5
Skapa en Flash -animation Steg 5

Steg 5. Förvandla din teckning till en symbol

Genom att göra din teckning till en symbol kan du enkelt lägga till den flera gånger i en ram. Detta är särskilt användbart om du snabbt behöver skapa flera objekt, till exempel en fiskskola.

  • Välj hela din ritning. Högerklicka på markeringen och välj "Konvertera till symbol". Detta lägger till bilden i ditt bibliotek där du snabbt kan komma åt den i framtiden.
  • Radera ritningen. Oroa dig inte! Du kommer att lägga tillbaka det till scenen genom att helt enkelt dra objektet från ditt bibliotek. Du kan enkelt lägga till flera instanser av samma ritning till din scen!
Skapa en Flash -animation Steg 6
Skapa en Flash -animation Steg 6

Steg 6. Lägg till några tomma ramar

När du har din första ram klar kan du lägga till dina tomma ramar som finns mellan den första nyckelramen och den andra nyckelramen. Tryck på F5 fyra eller fem gånger för att lägga till tomma ramar efter din första nyckelram.

Skapa en Flash -animation Steg 7
Skapa en Flash -animation Steg 7

Steg 7. Skapa din andra nyckelbild

När du har lagt till några tomma ramar är du redo att skapa din andra nyckelram. Det finns i huvudsak två olika sätt att göra detta: du kan kopiera din befintliga nyckelram och göra små justeringar, eller så kan du skapa en tom nyckelram och infoga en ny bild. Om du använder konst skapad i ett annat program vill du ha den andra metoden. Om du skapade din konst med Flash: s designverktyg, använd den första metoden.

  • För att skapa en nyckelram med innehållet i den föregående nyckelramen, tryck på F6. För att skapa en tom nyckelram, högerklicka på den sista ramen på din tidslinje och välj "Infoga tom nyckelram". Allt i din scen kommer att tas bort.
  • När du har skapat din andra nyckelbild måste du justera bilden för att ge effekten av rörelse. Om du använder Flash-designverktyg kan du använda Transform-verktyget för att välja aspekter av din ritning och flytta dem något, till exempel armen på en pinne-person.
  • Om du sätter in ny konst för varje nyckelram vill du se till att den placeras på samma plats eller på nästa logiska plats på skärmen. Detta säkerställer att konsten inte hoppar runt mellan ramarna.
Skapa en Flash -animation Steg 8
Skapa en Flash -animation Steg 8

Steg 8. Upprepa processen

Nu när du har skapat två nyckelbilder är det dags att iterera. Du kommer att upprepa i princip samma process tills du är klar med din animering. Lägg till några tomma ramar mellan varje nyckelram och se till att dina rörelser ser flytande ut.

Gör små, stegvisa förändringar. Din animering kommer att se mycket smidigare ut om du gör mycket små ändringar i nyckelramen. Till exempel, om du vill att en pinne ska vifta med en arm, ska din andra nyckelram inte vara den andra änden av vågen. Använd istället några nyckelrutor för att övergå från början av vågen till slutet. Detta ger en mycket mjukare animering

Del 2 av 3: Gör en punkt-till-punkt-animation (Tweening)

Skapa en Flash -animation Steg 9
Skapa en Flash -animation Steg 9

Steg 1. Förstå grunderna i tweening

Flash innehåller en funktion som kallas tweening, som låter dig i huvudsak ställa in start- och slutpunkter för ditt objekt. Flash kommer sedan att flytta och transformera objektet baserat på dina inställningar mellan dessa två punkter, vilket skapar en illusion av animering. Du behöver inte skapa bilder för varje nyckelbildram som du skulle göra med bild-för-bild-animering.

  • Tweening är särskilt användbart för att skapa "morphing" -effekter, där ett objekt blir ett annat under animeringen.
  • Bild-för-bild-animering och tweening kan användas tillsammans i samma film.
  • Du kan bara ha ett objekt som genomgår en rörelse -tween i taget. Det betyder att om du vill att flera objekt ska animeras på en gång måste de alla vara på separata lager.
Skapa en Flash -animation Steg 10
Skapa en Flash -animation Steg 10

Steg 2. Skapa ditt första objekt

Till skillnad från bild-för-bild-animering behöver du inte skapa flera objekt för att animera med hjälp av tween-funktionen. Istället skapar du ett objekt och ändrar sedan dess egenskaper under interponeringsprocessen.

  • Innan du lägger till din bild, skapa en grundläggande bakgrund för din film. Byt namn på lager 1 till "Bakgrund" och lås sedan lagret. Skapa ett andra lager och namnge det vad du vill. Detta blir det lager som du skapar din animering på.
  • Det rekommenderas starkt att du använder Flash: s inbyggda designverktyg eller importerar din bild från ett vektorteckningsprogram. Vektorer kan enkelt skala utan förvrängning, medan traditionella rasterbilder inte skalas och transformeras bra.
Skapa en Flash -animation Steg 11
Skapa en Flash -animation Steg 11

Steg 3. Konvertera ditt objekt till en symbol

För att kunna mellanrumma ditt objekt måste du konvertera det till en symbol. Detta är formatet för objekt som Flash använder för att manipulera dem. Om du försöker att koppla mellan ett objekt som inte har gjorts till en symbol uppmanas du att göra det först.

Högerklicka på ditt objekt och välj "Konvertera till symbol" Objektet läggs till i ditt bibliotek, vilket gör det enkelt att klona objekt

Skapa en Flash -animation Steg 12
Skapa en Flash -animation Steg 12

Steg 4. Skapa din första rörelse -tween

En rörelse-tween flyttar objektet från en plats till en annan Högerklicka på symbolen i din scen och välj "Create Motion Tween". 24 ramar kommer att läggas till på din tidslinje, eftersom detta är standardlängden för en tween. Kom ihåg att Flash som standard animeras med 24 bildrutor per sekund, vilket innebär att denna rörelsemellantid tar en sekund att slutföra.

När du skapar rörelse -interpolen flyttas du automatiskt till den sista ramen för interpolen

Skapa en Flash -animation Steg 13
Skapa en Flash -animation Steg 13

Steg 5. Skapa banan

När du har skapat tween kan du flytta objektet till den plats som du vill att det ska hamna på. Flash visar banbanan, som är prickad för att visa objektets plats för varje ram i interpolen.

När du först skapar banan kommer det att vara en rak linje från startpunkten till slutpunkten

Skapa en Flash -animation Steg 14
Skapa en Flash -animation Steg 14

Steg 6. Förläng dina bakgrundsramar

Om du körde din animering just nu skulle ditt objekt röra sig längs banan, men din bakgrund skulle försvinna efter en ram. För att åtgärda detta måste du förlänga din bakgrund över alla ramar i animationen.

Välj ditt bakgrundsskikt på tidslinjen. Klicka på den sista ramen på din tidslinje, som också bör vara den ram din rörelse mellan slutar på. Tryck på F5 för att infoga ramar upp till denna punkt, så att din bakgrund visas under hela tween

Skapa en Flash -animation Steg 15
Skapa en Flash -animation Steg 15

Steg 7. Lägg till nyckelbilder

Om du lägger till nyckelrutor i din bana kan du transformera ditt objekt under rörelsemellanrummet. Du kan bara göra ändringar i ett objekt om det är nyckelramat. Om du vill lägga till nyckelrutor i din bana väljer du först ramen på tidslinjen som du vill förvandla till en nyckelbild. Klicka sedan på och dra objektet till den position du vill att det ska befinna sig under den ramen. Din bana justeras automatiskt och en nyckelram läggs till på tidslinjen. Nyckelramar betecknas med diamantikoner på tidslinjen.

Skapa en Flash -animation Steg 16
Skapa en Flash -animation Steg 16

Steg 8. Justera din tween -bana

För att ändra sökvägen för ditt objekt kan du klicka och dra var och en av rampositionsmarkörerna på sökvägen till en ny plats. Undvik att lägga för mycket variation på vägen, annars rör sig föremålet på ett oregelbundet sätt (om inte detta är ditt mål!).

Skapa en Flash -animation Steg 17
Skapa en Flash -animation Steg 17

Steg 9. Förvandla ditt objekt

När du väl har dina nyckelramar och bana upprättade kan du omvandla ditt objekt så att det ändras när det rör sig genom rörelsemellanbanan. Du kan ändra form, färg, rotation, storlek och alla andra egenskaper för objektet.

  • Välj ramen som du vill att transformationen ska ske i.
  • Öppna objektets panelen Egenskaper. Du kan trycka på Ctrl+F3 om panelen för närvarande inte är synlig.
  • Ändra alla värden i fönstret Egenskaper för att påverka objektet. Du kan till exempel ändra nyansen eller färgen, lägga till filter eller ändra skalan.
  • Du kan också använda Free Transform -verktyget för att fritt ändra formen som du vill.
Skapa en Flash -animation Steg 18
Skapa en Flash -animation Steg 18

Steg 10. Gör sista handen för din tween

Testa din rörelse -tween genom att trycka på Ctrl+↵ Enter. Se till att transformationerna ser bra ut och att animationen rör sig med rätt hastighet. Om din animation går för snabbt kan du antingen sänka scenens FPS eller öka intervallet mellan tecken.

  • Som standard är FPS 24, så försök att sänka den till 12. För att göra det, klicka utanför scenen och ändra sedan FPS i panelen Egenskaper. Om du ändrar den till 12 fördubblas längden på din animering, men kan göra den mer "ryckig".
  • Om du vill ändra ditt interpensintervall väljer du det lager som innehåller interpolen och använder skjutreglaget för att dra ut det. Om du vill att interpolen ska vara dubbelt så lång, förläng den till 48 bilder. Se till att infoga tomma ramar i ditt bakgrundsskikt så att bakgrunden inte försvinner halvvägs genom animationen. Om du vill förlänga bakgrunden markerar du lagret, klickar på den sista ramen i animationen på tidslinjen och trycker sedan på F5

Del 3 av 3: Lägga till ljud och musik

Skapa en Flash -animation Steg 19
Skapa en Flash -animation Steg 19

Steg 1. Spela in eller hitta dina ljudeffekter och musik

Du kan lägga till ljudeffekter till åtgärder som sker i din animering för att få den att sticka ut och ge den lite personlighet. Musik gör din animation mer uppslukande och kan göra en bra animation till en otrolig. Flash stöder en mängd olika filformat, inklusive AAC, MP3, WAV och AU. Välj den på som ger dig den bästa kvaliteten för den lägsta filstorleken.

MP3 ger vanligtvis en helt acceptabel ljudkvalitet samtidigt som filstorleken hålls på ett minimum. Undvik WAV -filer om möjligt, eftersom dessa ofta är ganska stora

Skapa en Flash -animation Steg 20
Skapa en Flash -animation Steg 20

Steg 2. Importera ljudfilerna till ditt bibliotek

Innan du kan lägga till ljud i ditt projekt måste de läggas till i Flash's Library. Detta gör att du snabbt kan lägga till dem i ditt projekt senare. Klicka på Arkiv → Importera → Importera till bibliotek. Sök efter ljudfilen på din dator. Se till att ljudfilen har ett lätt att komma ihåg namn, så att du snabbt kan hitta det från menyn senare.

Skapa en Flash -animation Steg 21
Skapa en Flash -animation Steg 21

Steg 3. Skapa ett nytt lager för varje ljudfil

Detta är inte absolut nödvändigt, eftersom du kan lägga till ljud i befintliga lager, men att lägga varje fil på sitt eget lager ger dig mycket mer kontroll över blekning in och ut, när du ska börja och stoppa, och det är lättare att flytta runt ljud.

Skapa en Flash -animering Steg 22
Skapa en Flash -animering Steg 22

Steg 4. Skapa en nyckelram där ljudet börjar

På ljudets lager, välj ramen i animationen som du vill att ljudet ska börja med. Tryck på F7 för att infoga en tom nyckelram. Om du till exempel vill inkludera en musikfil som spelas under animeringens längd, välj den första ramen på musikfilens lager. Om du lägger till dialog för ett tecken, välj ramen där tecknet börjar prata.

Skapa en Flash -animation Steg 23
Skapa en Flash -animation Steg 23

Steg 5. Lägg till ljud- eller musikfilen

I egenskapsramen ser du ett ljudavsnitt. Du kan behöva utöka den för att se alternativen. Klicka på "Namn" -menyn och välj den fil du vill ha från ditt bibliotek.

Skapa en Flash -animation Steg 24
Skapa en Flash -animation Steg 24

Steg 6. Konfigurera ljudfilen

När du har valt en fil kan du konfigurera hur den ska spelas. Det du väljer kommer att baseras på vad du behöver ljudet för att åstadkomma i animationen. Du kan ändra inställningarna för effekt, synkronisering och upprepning för varje ljud med hjälp av menyn under menyn Namn i ramen Egenskaper.

  • Effekt - Detta låter dig lägga till effekter i ljudet, till exempel blekning in och ut eller lägga till eko. Du kan välja från förinställda inställningar i rullgardinsmenyn, eller så kan du klicka på pennikonen bredvid menyn för att skapa dina egna anpassade inställningar.
  • Sync - Detta avgör hur låten spelas i animationen. Händelsen spelar ljudet tills det är klart. Om samma ljud utlöses igen innan det första slutar, fortsätter originalet att spela tills det är klart. Start fungerar som händelse, men stannar om ljudet spelas upp igen. Stopp stoppar ljudet i den ramen. Om du vill använda detta tillsammans med andra ljudegenskaper, skapa en ny nyckelbild där du vill att ljudet ska stanna och använda det här alternativet. Stream kommer att försöka matcha ljudet som spelas med antalet bildrutor på andra lager. Detta används bäst för dialog.
  • Repeat - Med den här inställningen kan du ställa in hur länge ljudet ska upprepas. Du kan ställa in den för att spela bara en gång, eller låta den loopa så många gånger du vill. Om din animering är en looping -animering, bör du ställa in din musik att loopa oändligt.
Skapa en Flash -animation Steg 25
Skapa en Flash -animation Steg 25

Steg 7. Avsluta ditt projekt

När du äntligen är klar med ditt projekt, spara det som en SWF -fil. Detta är formatet som används för att spela filmen. Du kan spela den i praktiskt taget vilken webbläsare som helst, eller använda en dedikerad Flash -spelare för att titta på den. Det finns också en mängd olika webbplatser som du kan ladda upp den till för andra att se, till exempel Newgrounds, Albino Blacksheep och Kongregate.

Skapa en Flash -animation Steg 26
Skapa en Flash -animation Steg 26

Steg 8. Ta dina framtida projekt vidare

Den här guiden tar upp grunderna för att skapa en animering, men det finns så mycket mer du kan lära dig och göra. Lägg till några knappar och förgreningsvägar, så har du ett äventyrsspel som du kan välja själv. Du kan gå en krasskurs i ActionScript och få mycket mer kontroll över de finare detaljerna i din animation. Fortsätt experimentera, så lär du dig snart lära dig alla slags knep och implementeringar.

Rekommenderad: