Share
I den här handledningen använder vi de nya funktionerna i Flash CS5s Deco-verktyg för att skapa en animerad bakgrundsbild.
Adobe Flash i Creative Suite 5 har blivit utrustad med några bra uppdateringar och förbättringar. Adobe Flash CS5 innehåller helt nya funktioner för både designers och utvecklare som den nya kodrutan, integration med Flash Builder och det nya verktyget Spring for Bones..
En av de nya funktionerna i Flash CS5 är Deco-ritverktyget (även om Deco-verktyget inte är en ny funktion, eftersom den först lagts till Flash CS4.) Det låter dig skapa teckningar och animeringar baserat på dynamiska former och färger . Det är ett av de smarta verktygen som kan spara tid och ansträngning genom att skapa ritningsobjekt och animering med färdiga symboler och objekt, eller ladda egna symboler från biblioteket.
I Adobe Flash CS5 har Deco-verktyget förbättrats för att inkludera nya former och funktioner som vi kommer att se i denna tut. Exemplet vi kommer att täcka bör ge djup förståelse för Deco-verktyget genom att skapa en animerad tecknadbakgrund med Deco-verktygen. Nästan allt arbete i det här exemplet görs med Deco-verktyget och dess funktioner. Syftet med detta exempel är dock att visa hur man använder Deco-verktyget och förstår dess funktioner genom att skapa Flash-animerade bakgrunder eller andra mönster och använda objekt som du kommer att ta från Deco-listan över objekt.
Denna tut visar hur mycket tid och ansträngning man kan spara genom att använda Deco-verktyget. Medan tecknade bakgrundsexemplet nedan tar timmar att skapa med hjälp av ritverktygen i Flash tillsammans med några ritningsförmågor kan vi skapa detta exempel på mindre än en timme med hjälp av Deco-verktyget, och vi behöver inga dragningsförmåga.
Du måste ha grundläggande kunskaper om Flash-verktyg, eftersom jag kommer att gräva direkt i Deco-verktyget och visa hur du anpassar det för att skapa bakgrund och animering. Låt oss börja med steg 1 ...
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Vi börjar med att skapa Flash-dokumentet och förbereda det innan vi börjar lägga till Deco-verktygsobjekten.
Skapa ett nytt Flash-dokument med måtten 600px X 450 px. Lägg till en rektangel med samma dimensioner som dokumentet och fyll rektangeln med en linjär fyllning (som bilden nedan) för att skapa effekten av mörk himmel.
Nu ska vi skapa vägbakgrunden, med hjälp av linjearket, skapa vägens konturform och fylla den med grå färger för att simulera verklig asfalt. Skapa sedan moln med hjälp av det ovala verktyget och slutresultatet ska se ut som följer:
Nu börjar vi använda Deco-verktyget för att skapa byggnaderna för att gå längs den trottoar som vi skapade ovan. Du kan ställa in vilken typ av skyskrapa du vill använda eller använda slumpmässiga byggnader. Du kan också ställa in storleken på byggnaderna.
Välj Deco-verktyget eller tryck på tangenten U på tangentbordet. På Egenskaper-panelen väljer du "Byggborste" i rullgardinsmenyn Drawing Effect. Gå sedan till Avancerade alternativen välj "Slumpmässig byggnad" och ställ in storleken till 2.
Klicka på vägen, dra sedan till toppen och släpp musen för att skapa den första byggnaden. Upprepa ovanstående steg för att skapa andra byggnader på vägen enligt bilden nedan
I de följande stegen kommer vi att använda trädborsten för att skapa träd på trottoaren och använda blomborsten för att skapa blommiga grenar över vissa byggnader. Med denna borste kan du ställa in storleken på trädet och dess gren, blad och blommor / fruktfärger.
Skapa ett nytt lager över byggnaderna. Välj Deco-verktyget. På Egenskaper-panelen väljer du Tree Brush i rullgardinsmenyn och i alternativet Advanced väljer du "Aspen Tree".
Klicka på trottoaren mellan byggnader för att skapa träden. Se till att dra för några pixlar för att skapa små träd. Ju längre du drar desto större blir trädstorleken. Den slutliga effekten efter att träden har lagts till bör vara enligt nedan:
Välj nu Flower Brush, och välj sedan "Poinsettia" i Advanced-alternativet. Ställ in blommans och bladets storlek till 50% och se till att avkryssningsfältet Branch är markerat
Dra upp skärmen för att skapa grenar av blommor. De borde vara långa för att visa dem som en gren. Om den resulterande grenen är för stor kan du välja den och minska dess storlek. Placera sedan den fördjupade blommafanten på byggnaderna, som framgår av figuren nedan:
Följande steg förklarar hur man skapar animerade fat av eld. Vi använder också Fire Animation-borsten som låter dig skapa animerad vektorbrand. Du kan ställa in eldstorlek, hastighet och ramvaraktighet. Dessutom kan du ställa in flammens färg och gnista.
Skapa en ny symbol genom att gå Infoga> Nytt symbol eller använd genväg Ctrl + F8 (Command + F8 i Mac) och ställ in det som filmklipp.
I det aktiva skiktet, skapa en cirkel för att representera toppen av tunnan och en annan för att göra botten av fatet. Dra två linjer mellan dem och fyll i tunnfyllningen med mellanlinjer för att se ut som exempel nedan:
Skapa ett nytt lager för att hålla eldanimeringen. Välj Deco-verktyget eller tryck på U på tangentbordet, välj Fire Animation från rullgardinsmenyn i Egenskaper-panelen och ställ in brandanimeringen till 50 ramar.
Nu kommer vi att ändra eldens storlek och läge för att få det att se ut som att flammor stiger ut ur tunnan:
Gå tillbaka till huvudfasen och lägg till filmfilmen på eldstaden på scenen bredvid byggnaderna, som framgår av figuren nedan. Du kan testa filmen genom att trycka på Ctrl + Enter (Command + Enter i Mac)
Medan Deco-verktyget inte ger alla möjliga penslar eller former kan du anpassa den utifrån dina behov med hjälp av symbolerna eller de färger du vill visa. Nu ska vi använda partikelsystemet som gör att du kan skapa flytande animationer som snöfall, fyrverkerier och andra effekter som beror på små partiklar som exploderar från en källa.
Denna pensel är baserad på två partiklar som kan vara standard symboler eller du kan använda symboler från biblioteket. Du kan också ställa in andra alternativ som längden på animationen, ränta per ram och andra alternativ som vi kommer att se nedan:
Skapa en ny symbol med Infoga> Nytt symbol eller använd genväg Ctrl + F8 (Command + F8 i Mac) och ställ det som ett filmklipp. Gå tillbaka till scenen och dra den nyskapade tomma symbolen från biblioteket till scenen och dubbelklicka sedan på symbolen för att gå in i redigeringsläget
Välj Deco-verktyget eller klicka på U-tangenten på tangentbordet och välj Partikelsystem i rullgardinsmenyn Drawing Effect i Egenskaper-panelen. Välj båda partiklarna 1 och partikel 2, sätt deras färg till vitt för att simulera snön som faller och använd standardformen. Ställ in övriga värden enligt följande:
Klicka nu på toppen av scenen så att partikelsystemet faller från toppen av scenen till botten. Du kommer att märka att partikelanimationen genereras och ramarna skapas.
Snöanimationen börjar små och blir större till slutet av animationen. Detta (som med elden) skapar en oönskad skärning i loopingsanimationen. För att lösa detta kan vi återigen ta bort startramarna för startspåren. Välj rammen till den punkt där snöfallet täcker hela scenen. I det här exemplet väljer vi de första 40 ramarna. Högerklicka och välj Ta bort ramar eller tryck på Skift + F5.
Om du märker att animeringen rör sig snabbt kan du lägga till en extra bild efter varje nyckelram genom att välja keyframe och trycka på F5.
Låt oss lägga till några blixt effekter med hjälp av Lightning Brush. Denna blixt ska animera och förekomma slumpmässigt. Du kan ställa in massor av alternativ med denna borste, såsom ljusets belysning, dess skala, strålbredden och komplexiteten. Du kan också välja om det ska animeras eller inte.
Skapa en ny filmklippssymbol och lägg den till scenen bakom byggnadslaget. I filmklippssymbolen trycker du på F7 för att skapa en tom ram i början av filmklippet och gå till bild 20.
Välj Deco-verktyget och välj Lighting Brush från Egenskaper-panelen. Håll inställningarna desamma, ändra bara färgen till vit och kryssrutan Animation.
Peka muspekaren längst upp till vänster om scenen, klicka och håll musen tills blixten når önskad komplexitet och släpp sedan musen. Tryck på F7 efter animeringen för att lägga till en tom ram efter det.
Gå till bild 70, upprepa ovanstående steg för att skapa mer blixt på höger sida av scenen med olika komplexitet och tryck på F7 efter animeringen för att ta bort blixten från scenen.
Du kan testa filmen genom att klicka på Ctrl + Enter (Command + Enter i Mac) eller välj Arkiv> Publicera för att exportera filmen som SWF och HTML-filer.
Vanligtvis genererar de filer som använder Deco-verktyget stora storlek SWF eftersom Deco-verktyget genererar borstarna och animeringen som ogroupade former och ram-för-ram-animeringar. Dessa två metoder ökar filens totala storlek. Det är dock bästa praxis att optimera filen efter att ha uppnått de önskade resultaten. Det finns några tips för att minska filstorleken enligt nedan:
I det ovanstående exemplet lärde vi oss hur vi använder Deco-verktyget för att skapa en animerad tecknadbakgrund. Detta sparar tid och kräver ingen speciell tecknad eller teckningsfärdigheter. Du kan upptäcka resten av penslar som finns tillgängliga i Deco-ritverktygen, se hur du använder dem och de olika alternativen som är associerade med var och en.
Jag hoppas att du gillade den här handledningen, tack för att du läste!
Accentsconagua