Share
Del 1 i denna handledning tar Flash nybörjare genom de grundläggande principerna bakom teckning och animering av vektorer i Flash. Vi ska rita och animera en studsande strandboll. Förkunskaper om Flash kommer givetvis att hjälpa, men följande tekniker ska vara tillgängliga för alla och med de flesta programversioner. Del 2 kommer snart ...
Nedan är den slutliga animationen vi kommer att arbeta för. Vill du ha tillgång till hela Vector Source-filerna och nedladdningsbara kopior av varje handledning, inklusive den här? Gå med VECTORTUTS PLUS för bara 9 / månad.
Låt oss börja med att öppna ett nytt dokument (File> New ...). Det är bara ett Flash-dokument (ActionScript 2.0). ActionScript-versionen är inte relevant eftersom vi inte använder något.
Använd Egenskaper inspektören längst ner på skärmen för att ange dokumentegenskaperna, klicka på dimensionerna. Först, ge ditt dokument en titel, ge sedan scenen (området för ditt dokument som kommer att vara synligt när det publiceras) dimensioner på 600px vid 400px. Bakgrundsfärgen lämnar vi vit, men ändrar bildfrekvensen till 21 fps (ramar per sekund). 21 fps ger en snabb, jämn animationshastighet.
Organisationen är nyckeln när du arbetar med Flash, så innan vi börjar rita vår boll, låt oss namnet på det lag som det kommer att sitta på. Dubbelklicka Lag 1 och kalla det "Ball".
Välj det ovala verktyget, definiera en stroke och en fyllningsfärg, som de som visas. Dra sedan en likformig cirkel (genom att hålla Shift och dra musen). Använd också Egenskaper inspektören för att ge stroke en 3px vikt.
Genom att skapa symboler i Flash kan du använda flera instanser av samma objekt inom en fil. Symboler är alla tillgängliga från paletten Bibliotek (Fönster> Bibliotek). Genom att ändra en symbol ändras alla instanser av den symbolen i filen.
Vi ska förvandla vår cirkel till en symbol som blir vår boll. Välj hela cirkeln och tryck på F8. Namnge det "mc_ball", välj att göra det till en filmklippssymbol och klicka på OK.
Lägg till ett andra lager under "Ball" -laget och kalla det "Shadow." Inuti den första ramen i detta lager rita en ellips för att bilda en skugga under bollen. Ta bort stroke och färg det # E2E0E5. Förvandla den till en symbol precis som du gjorde tidigare med bollen, så kalla den "mc_shadow."
Placera de två symbolerna i ungefär rätt höjd för att ange att bollen sitter på marken. I paletten Justera (Fönstret> Justera) markerar du till steg och centrerar de två symbolerna horisontellt.
Vi har skapat våra symboler i sin mest grundläggande form, nu börjar vi animera dem. Håll skift och klicka på ram 20 i båda lagren på tidslinjen. Gå till Ändra> Tidslinje> Konvertera till nyckelramar eller tryck på F6 för att vända dessa ramar till Keyframes. Keyframes representerar punkter längs tidslinjen där något händer. Denna punkt på tidslinjen kommer att vara slutet på animationen; Med andra ord kommer bollen att ha hoppat upp från marken, nått det är toppen och återvände till denna startposition. Samma sak gäller vår skugga: den kommer att blekna när bollen steg och återvände till detta startläge vid ram 20.
Låt oss nu lägga till den punkt där bollen är högst. Välj ram 10 på båda lagren och tryck på F6 för att göra dem till Keyframes.
Med skjutreglaget fortfarande i ram 10 flyttar du bollsymbolen vertikalt uppåt till en viss punkt på scenen. Välj Free Transform Tool och gör förekomsten av "shadow_main" -symbolen bredare.
Slutligen, med den valda skuggan, gå till Färg på egenskapskontrollen och ändra den till ett alfavärde på 30%.
Tweening är processen där Flash automatiskt genererar alla steg mellan ett objekt eller formar två tillstånd.
Vi ska mellan ramarna mellan vår första bild och halvvägs längs animeringen i ram 10. Välj en ram mellan 1 och 10 på båda skikten och hänvisa återigen till Egenskapsinspektionen. Välj Rörelse från Tween-valet och du ser att de resulterande ramarna blir lila.
Flytta skjutreglaget fram och tillbaka längs tidslinjen med musen och du kommer se bollen och skuggan snyggt animerad. Hastigheten på denna rörelse är dock helt enhetlig. Vi behöver bollen att decelerera när den når sin topp och vi kan göra det med lätthet (ha ha).
Återigen, med en ram av varje lager valt (inom det mellanliggande området) hänvisas till Egenskapsinspektionen. Ändra tweening för att lätta ut med ett värde på 100. Detta kommer att sakta ner vår klättringskula.
Efter att ha lyckats animera uppgången av bollen, upprepa tweening steg för ramar 11 - 20. Denna gång underlättar rörelsen mellan i -100, vilket gör att bollen accelererar när den närmar sig marken.
Tryck på Command + Enter för att se din animerade boll hittills. Det ska se ut som animationen som visas nedan.
Om vi antar att vår boll är gjord av något lite mer flexibel än diamant, kommer den att förändras formen något efter påverkan med marken. Låt oss lägga till en sista Keyframe där bollen plattas i korthet.
Välj ram 21 på båda lagren och tryck på F6 för att göra dem till Keyframes. Använd sedan Free Transform Tool till squash symbolen "boll" från överkanten (håll Alt som du gör för att hålla den undre kanten där den är).
Vår studsrörelse är komplett. Nu behöver vi lägga till ytterligare detaljer och rörelse till vår boll. Dubbelklicka på "boll" -symbolen på någon av nyckelramarna för att ange tidslinjen för den symbolen. Du ser din nuvarande plats under tidslinjen - du borde vara inom "Scene 1, mc_ball."
Klicka på ikonen Infoga lager för att skapa ett andra lager ovanför den aktuella. Kopiera och klistra in cirkeln på plats från Layer 1 till Layer 2 (Command + C, Command + Shift + V). Nämn nu bottenskiktet "Ball Spinning" och den översta "Shade". Slutligen låser du "Ball Spinning" -laget.
Rita en stor cirkel någonstans på scenen, se till att den har en annan färg än den befintliga cirkeln.
Placera den större cirkeln så att det som fortfarande kan ses av den gula cirkeln handlar om rätt form för skuggning på bollen. Släpp alla objekt.
Välj nu den större cirkeln igen och tryck på Delete. Genom att lägga ogrupperade eller icke-symboliserade former över varandra kombinerar du dem på samma sätt som du gör med pixlar i färgapplikationer. Genom att nu ta bort den större cirkeln är du kvar med den lilla halvmåne som blir skuggning på bollen. Välj och ta bort resterande slag och färg halvmåne # E2E0E5.
Eftersom denna halvmåne fungerar som skuggning på vår boll skulle det vara trevligt att ge den en mångsidig opacitet. För att göra detta måste vi konvertera det till ett filmklippsymbol (du borde vara van vid denna åtgärd nu). Tryck på F8 och namnge det "mc_ball_shading" (dessa namn blir tvivelaktiga). Se egenskapskontrollen och ändra blandningen till Multiplicera. Perfekt!
Tryck på Command + Enter igen för att se din animerade boll hittills. Det ska se ut som animationen nedan.
Efter att ha tagit hand om skuggningen kan du nu låsa skiktet "Shade" (kanske till och med göra det osynligt att göra arbetet enklare) och låsa upp "Ball Spinning". Vi ska lägga till ett mönster för att ge vår cirkel för att ge den den här stranden bollen. Använd det ovala verktyget för att dra en stor oval på scenen. Det behöver en stroke på 1px och #FFFFFF, men ingen fyllfärg.
Placera stroke som visas i bilden nedan och släpp ut. Välj nu den del av stroke som ligger utanför bollen genom att helt enkelt klicka på den. Precis som med att göra den skuggande halvmånen tidigare har alla vektorerna på detta skikt fusionerats och bildade separata områden. Ta bort den yttre delen av stroke.
Rita ett par andra ovalar och placera dem ovanpå cirkeln så att de sammanfogar på toppen någonstans. Ta bort överskottet från utsidan av cirkeln. Ovalarna behöver inte vara lika stora eller proportioner, bara försök att återskapa något lite som bilden nedan. Det du har skapat är en serie segment som nu kan färgas individuellt.
Färga alternativa segment med # EA512D och ta bort alla bitar av vit slag från bollen. Tryck på Kommando + Enter för att se vad du har gjort hittills. Det ska se ut som animationen nedan.
Låt oss lägga till en sista dimension av rörelse till animationen, vi får bollen att sakta rotera när den studsar. För att göra detta behöver vi först bollen på lager "Ball Spinning" för att omvandlas till en symbol. Klicka på den första nyckelramen för skiktet för att se till att allt på det är valt. Tryck nu på F8 och namnge den här filmklippssymbolen "mc_ball_base." Du ser att den har lagts till bland de andra symbolerna i paletten Bibliotek (Fönster> Bibliotek).
Välj ram 32 på tidslinjen på lagret "Spinning Ball" och tryck på F6 för att skapa en ny Keyframe. Välj ram 32 på tidslinjen på skiktet ovan och tryck på F5. Detta skapar en ny ram, men eftersom "Shade" -symbolen inte förändras alls behöver vi inte göra det till en Keyframe. Vi behöver bara se till att när skytten når denna punkt längs tidslinjen är symbolen "Shade" närvarande.
Varför har vi valt ram 32? Nåväl, vi ska göra vår boll att rotera en gång var 32: e ram. Vår boll studsar en gång per 20 ramar och så innebär denna oregelbundna timing att bollen befinner sig i kontinuerligt olika snabba steg under studsningen. Om detta inte är klart, kommer det snart att vara ...
Välj en ram någonstans längs tidslinjen på lager "Ball Spinning" och hänvisa till Egenskapsinspektionen. Välj Motion tween som du gjorde med studsrörelsen. Den här gången vill vi inte ha något enkelt värde, vi behöver bollen att rotera stadigt med samma hastighet. Välj CW (Clockwise) från rullgardinsmenyn Rotate och lämna 1 som antalet gånger bollen kommer att rotera under intervallet. Naturligtvis är skiktet "Shade" opåverkat och skuggningen kommer därför att förbli i samma position på bollens ansikte.
Så där har du det! Tryck på Command + Enter igen och kontrollera att rörelsen är som du ville ha. Om det behöver bytas, kan du öka mängden ramar i tweens, ändra höjden på bollen, hur många gånger den roterar etc. Denna handledning har gett dig inblick i: Flash-tidslinjen och lagren, Flashens beteende vektorritningsverktyg, hierarkin för Flash-symboler och -objekt och rörelse-tweening.
Jag hoppas att du tyckte om det! Del 2 beror på publicering nästa månad och kommer att expandera på dessa tekniker, vilket förbättrar processen med en touch av Illustrator ...
Prenumerera på VECTORTUTS RSS-flödet för att hålla dig uppdaterad med de senaste vektorhandledningarna och artiklarna.
Accentsconagua