Share
Denna handledning expanderar på tekniker som omfattas av del 1 i Illustrate och animera en studsbollserie. Vi använder Illustrators 3D-verktyg för att förbättra Flashs spinnrörelse för studsningsbollen och titta på att arbeta mellan de två applikationerna. De aktuella stegen kan också följas oberoende av del 1.
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.
... och låt oss bara påminna oss om den subtilt enklare animationen vi skapade under del 1 i denna tut ...
Händer upp, som följde den första delen av denna tut Illustrate and Animate a Bouncing Ball: Del 1 - Adobe Flash? Tja, de som gjorde det kommer att ha en Flash-fil att lägga till - de som inte gjorde det, oroa dig inte. Denna andra del kan också följas som en individuell tut, vilket ger ett lika tillfredsställande slutresultat.
Till att börja med ska vi skapa en 3D-boll i Illustrator. För det andra kommer vi att animera det inom Illustrator, och äntligen tar vi över det till Flash för slutändringar. Låt oss börja med att öppna ett nytt dokument i Illustrator. Bollen vi använde för den första delen av denna tut uppmätt 90px x 90px så definiera din Artboard med samma dimensioner.
Innan vi skapar vårt 3D-objekt, låt oss lägga till ett mönster i paletten Symboler som vi ska använda för att kartlägga till den färdiga bollen. Om du kommer ihåg från den första delen av tutet hade vår boll sex alternativt färgade ränder - dekorera vår 3D-version på samma sätt blir rak.
Skapa sex vertikala, lika stora och åtskilda rektanglar. Färga dem växelvis med rött # DF3F22 och gul # E3CB0E. Gruppera dem tillsammans om du önskar och dra hela partiet i paletten Symboler (Fönster> Symboler). Tilldela denna nya symbol ett namn som "ball_pattern", inte att vi gör några andra symboler som du behöver skilja på den ...
Vi ska använda 3D Revolve-verktyget för att göra en boll. Börja med Ellipse-verktyget och gör en cirkel i samma storlek som (och Alignned med) Artboard. Använd Direct Selection-verktyget för att ta bort vänsterförankringspunkten. Avsluta genom att se till att den har en fyllning (även om färgen är irrelevant eftersom vi kommer att kartlägga "ball_pattern" till det) men ingen stroke.
Med det här objektet valt går du till Effekter> 3D> Revolve ... Check Förhandsgranska och standardalternativen ska ge dig följande resultat.
Nu ger bollen det mönster genom att klicka på Map Art från dialogrutan 3D Options. En sfär kommer bara att ha en yta att kartlägga; snyggt och enkelt. Välj din "ball_pattern" från rullgardinsmenyn Symbol och kolla Skala till passform.
Alternativet Shade Artwork är av särskild betydelse här. Om du kontrollerar det får du en bra effekt på bollens yta (se bilden nedan). Emellertid blir de resulterande vektorerna så komplexa att Flash finner det väldigt svårt att göra dem i animering. Det betyder inte att skuggning din boll inte är ett alternativ - om du väljer att göra det är det möjligt att använda bilderna i Flash genom att först rasterera dem. Flash har inga problem med att hantera de bitmaps som skapas, men du förlorar naturligtvis flexibiliteten att arbeta med vägar.
Jag ska demonstrera detta senare, men för nu bara ta mitt ord för det och lämna Shade Artwork unchecked! Klicka på OK för att återgå till dialogrutan 3D-alternativ och kontrollera att alternativet Surface här också är inställt på No Shading.
För att slutföra 3D-processen (för nu) placerar du bollen i lämplig vinkel och klickar på OK. Tänk på att vi kommer att animera det som roterar kring den centrala axeln som visas nedan.
Kopiera och klistra in din 3D-boll på plats (Command + C, Command + F). De två objekten kommer att synas som separata vägar om du expanderar skiktet.
Med den dubbla bollen vald, se paletten Utseende (Fönster> Utseende). Dubbelklicka på 3D-effekten för att redigera den.
Återigen i dialogrutan 3D-alternativ behöver du bara utföra en uppgift och klicka sedan på OK. Vi måste rotera bollen runt 120 °. Detta kommer att vända bollen till den första punkten där den ser ut exakt samma som utgångspunkten; Det är liten punkt att rotera det hela 360 ° när det ser ut identiskt vid tre tillfällen under en revolution ...
Detta kommer att kräva lite ögonarbete. Klicka och dra en av de gröna kanterna på positionskuben för att vrida bollen runt den centrala axeln. Håll ögonen på förhandsvisningen av din boll och sluta dra när du ser att bollen har vridit sig tillräckligt. Bollens trådram matchar snyggt mot vårt mönster; Varje färgat segment av vår boll består av två längsgående segment av trådramen. Detta borde göra det enkelt att bedöma exakt var man ska sluta dra.
Efter att ha fyllt i dina två 3D-objekt, gå till Objekt> Blanda> Blandningsalternativ. Här anger du animeringsstegen mellan bollens två tillstånd. Välj specificerade steg och skriv in 18 (det här är godtyckligt, ju fler steg du väljer, ju mer gradvis animationen kommer att bli).
Välj dina två objekt och gå till Objekt> Blanda> Gör. Resultatet blir helt otänkbart: alla dina blandade steg är en topp på varandra ...
För att animera dem i Flash måste vi dela upp stegen och placera dem på separata lager. Utöka lagret som håller blandningen och se till att du har valt blandningen (som visas nedan). Öppna palettmenyn nu i paletten Lager och välj Release to Layers (Sequence).
Med det gjort väljer du alla de resulterande lagren och drar dem ut ur det första lagret de sitter i. Vi behöver dem att vara helt oberoende. Ta sedan bort det ursprungliga "Layer 1;" det är ju tomt trots allt. Du kommer att lämnas med en serie lager, var och en innehåller en 3D-boll i gradvis rotationsgrad. De sista och de första är exakt samma självklart (de var de två ursprungliga staterna som blended) så du kan också ta bort ett av dessa två lager.
Jo det är det. Jag har precis förklarat vad jag ska göra i titeln på detta steg; Spara och stäng dokumentet. Det är avslutat!
Ända sedan Adobe tog Macromedias imperium i bruk mellan sina applikationer har det blivit enklare och lättare. Importera och exportera mellan Illustrator och Flash har varit möjligt under en tid, men resultaten kan ibland vara lite oförutsägbara. Exportera Illustrator-lager som SWF-filmsekvenser, eller som enskilda SWF-filer gav ganska bra kompatibilitet mellan program. Sedan kom CS3. Sedan dess har vi kunnat importera AI-filer direkt och hantera processen helt från Flash själv.
Låt oss ta en titt på alternativen vi har och tillämpa dem på denna tut. Om du har en Flash-fil från Del 1 i denna tut, eller om du arbetar med källfilerna, öppna "source_1.fla;" vår ursprungliga animerade boll. Annars öppnar du bara ett nytt dokument i Flash.
Gå till Flash> Inställningar ... och välj AI File Importer. Alternativen är alla rimligen självförklarande; Vi måste se till att innehållet i vår AI-fil importeras som sökvägar (inte bitmappar, men som jag nämnde tidigare är det här ett alternativ om banorna är för komplexa). Konfigurerade som nedan kommer våra importerade banor att redigeras, innehållet i varje lager konverteras till enskilda filmklipp och allt som ligger utanför Artboard kommer att ignoreras (vi har bara föremål inom Artboard så det påverkar inte oss verkligen ).
OK, låt oss importera vår AI-källfil. Återigen, om du jobbar med en ny flashfil, ignorera bara mina referenser till del 1 i denna tut.
I "source_1.fla" (eller din egen färdiga FLA-fil från del 1) öppnar du biblioteket (Command + L) och dubbelklickar på "mc_ball_base". Detta var vår boll i det mest grundläggande tillståndet; detta filmklipp var vad vi spann och sedan sprang tillbaka. Allt vi gör på denna film kommer därför att spinnas och studsas också. Lås "Layer 1" och gör en ny kallad "importerad boll".
Med den första nyckelramen för "importerad boll" -lagret vald, gå till Arkiv> Importera> Importera till steg ...
Välj AI-filen från ditt system och klicka på OK. Du kommer att presenteras med Importera * fil * till biblioteket dialog, här är där du slutför importalternativen angående din AI-fil och det här kan göras på en nivå mellan objekt och objekt.
Först märker du att varje Illustrator-lager har ett sökobjekt i det. Varje väg har en varningssymbol som anger att det finns ett problem. Att klicka på Incompatibility Report bekräftar faktiskt att dessa objekt inte är kompatibla med Flash på grund av 3D-rotationseffekten.
Dessa är våra gjorda 3D-bollar och Flash kan inte redigera dessa i deras nuvarande tillstånd. vi skulle ha varit tvungna att utöka 3D-effekterna för att de skulle kunna redigeras. Detta är inte ett problem i vårt fall. Vi vill inte redigera dem, men vi kanske vill skala dem. Ignorera möjligheten att importera dem som bitmappar; De kommer att importera bra som skalbara banor.
Alla andra standardinställningar här är bra för våra behov; Se bara till att lagren konverteras till Keyframes. Klicka på OK.
Efter att ha importerat din AI-fil ser du en sekvens av nyckelramar på ditt "importerade boll" -lager. Om du flyttar reglaget upp och ner på tidslinjen visas hur dessa ramar ger dig din roterande boll. Perfekt!
Slutför nu effekten genom att placera "Layer 1" ovanför "importerad boll" och radera allt från detta lager utom stroke. Klicka sedan på ramen ovanför den sista keyframen i din sekvens (i min ram 19) och klicka F5 för att sprida ramarna längs animeringens längd. Detta kommer att ha placerat det ursprungliga slaget över din boll.
Kommando + Enter kommer att förhandsgranska din animering. I mitt fall har jag också valt att sakta ner den ursprungliga snurrande effekten genom att förlänga rörelseperioden i "mc_ball-filmen". Du ser att bollen spinner 360 ° medsols och även 360 ° runt centralaxeln; en effekt omöjlig (utan massiv koncentration och ett par månader ritning) genom att endast använda Flash.
Är du nyfiken på hur det skulle ha sett om vi hade gått för den skuggade bollen? Upprepa de tidigare stegen som valde att skugga din 3D-boll i Illustrator:
Du märker att jag valde att inte importera nyckelbilderna i spinnrörelsen. bollen roterar inte längre medurs. Om jag hade gjort det här skulle belysningen också snurra (och det skulle förstöra effekten). Det är ett ganska bra resultat tycker du inte? Återigen är problemet med bitmappar att de inte skala eller rotera bra i Flash. Som du kanske sett har den punkt som bollen flattar när den träffar marken gjorts något pixelerad - ett problem vektorer upplever inte.
Här avslutar den andra delen av denna 2 del tut! Dessa slutgiltiga steg har förhoppningsvis gett dig en inblick i: separering av Illustrator-blandningar i lager, import av AI-filer till Flash och möjligheter och gränser för vektorer och bitmappar. Som någonsin hoppas du njöt av den här!
Prenumerera på VECTORTUTS RSS-flödet för att hålla dig uppdaterad med de senaste vektorhandledningarna och artiklarna.
Accentsconagua