Share
Sedan Adobe Creative Suite tidigare släpptes har integrering mellan sina produkter varit en av nyckelfunktionerna. Efter Adobe-fusionen med Macromedia utvidgades Creative Suite-integrationen för att täcka produkter som Flash, Dreamweaver och Fireworks. Denna handledning visar hur vi kan använda Flash, Photoshop, Illustrator och After Effects tillsammans för att bygga ett enda projekt.
Integration mellan Adobe Creative Suite-produkter förbättrar ditt arbetsflöde genom dessa applikationer genom att ge dig möjlighet att enkelt och effektivt flytta mellan dem. Detta är nere för kompatibilitet mellan dem och CS-produkternas förmåga att läsa vanliga format och objekt. Det enhetliga gränssnittet är en annan sida av integrationen mellan produkter; När du väl har läst hur du arbetar med en produkt kommer du att känna till resten av familjen.
Integrationen tar många former i Adobe Creative Suite. Möjligheten att ta ditt arbete med mobila enheter och testa med hjälp av Adobe Device Central är en annan form av integration, eftersom du kan använda samma program som du kör på datorer på olika typer av enheter. Den tredje typen av integration är integrationen mellan designers och utvecklare som arbetar i samma miljö, blir bekant med arbetsflödet av en annan och de verktyg de använder båda.
Den här artikeln kommer att täcka integrationen mellan Flash och andra Adobe Creative Suite-produkter som Photoshop, Illustrator och After Effects för att ge en uppfattning om hur dessa produkter effektivt integrerar varandra. Vi kommer att simulera ett projekt för att skapa en animerad banner i Flash som använder resurser från Photoshop och Illustrator. Vi kommer också att använda After Effects för att förbättra Flash-animeringen med förinställningarna After Effects.
Medan den här artikeln hoppar mellan Adobe Creative Suite 5-applikationer behöver du inte ha mycket erfarenhet av dessa applikationer, eftersom vi bara täcker hur man integrerar arbetsflödet mellan alla dessa applikationer genom vårt exempel.
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Det första steget är att skapa basen Flash bannerfil som kommer att vara mittpunkten för att integrera med Flash och Photoshop, Illustrator och After Effects.
Låt oss skapa ett dokument för bannern med 336px x 280px och med 30 bilder per sekund. Och sätt bakgrundsfärgen till svart från dialogrutan Dokumentinställningar.
Den här dokumentstorleken kommer att vara standardstorleken för alla dokument som vi kommer att skapa i Photoshop och After Effects, bara för att hålla sakerna snygga.
Efter att du skapat flashdokumentet producerar vi den första animationen i bannern med hjälp av Deco-verktyget. Innan du går igenom följande steg kan du granska en tidigare artikel som täcker Deco-verktyget Använda New Deco-ritverktyget i Flash CS5. Nu, låt oss se animationens första steg:
Välj Deco-verktyget och från alternativen Deco-verktyg i Egenskaper-panelen, välj Grid Fill.
I alternativen Grid anger du dess egenskaper enligt följande:
Välj den första ramen i tidslinjepanelen och klicka med musen på scenen för att skapa ett slumpmässigt rutnät. I ramnummer 3 trycker du på F7 för att skapa en tomram och upprepa ovanstående steg för att skapa ett annat slumpmässigt rutnät.
Upprepa ovanstående steg var och en av två ramar för 20 bildrutor för att skapa en animering för slumpmässig rutnätning.
Vid denna tidpunkt flyttar vi till Photoshop för att förbereda de resurser som vi kommer att använda i den vidare banneranimationen.
I tidigare versioner av Flash var det bara en metod att importera bitmappsresurser till Flash, det var genom att importera bildformat som JPG för bästa bildkomprimering och PNG för transparenta bilder. Men import av flera lager Photoshop-filer tog mycket tid att spara varje lager som en separat bild och importera den till Flash separat. Den nya PSD-importören i Flash gör att du kan importera PSD-filer direkt till Flash med olika alternativ som vi kommer att se senare.
I följande steg importerar vi Photoshop-filen Banner.psd till Flash med hjälp av Flash PSD-importdialogrutan:
På Arkiv-menyn väljer du Importera> Importera till scen och välja PSD-fil. Vi kommer att använda psd_banner.psd fil från källnedladdningen (länken längst upp i handledningen).
Låt oss ta en titt över PSD-importdialogrutan och dess tillgängliga egenskaper. Dialogrutan består av följande delar:
Lagsektionen, du kan förhandsgranska PSD-skikten i dokumentet i detta avsnitt och markera eller avmarkera de lager som du vill importera till Flash. Det ger också en förhandsgranskning av typen av skiktet. Till exempel har det redigerbara textskiktet en T-bokstav på skiktet för att identifiera att skiktet kan redigeras.
Å andra sidan innehåller bitmappskiktet en bitmappsymbol för att visa att skiktet inte kan redigeras. Och du kan slå samman mellan två lager genom att välja dem med Shift-tangenten och trycka på knappen Sammanlagningsskikt.
Under skiktet kan du konvertera skikten till antingen Flash-lager eller nyckelbilder. Och du kan välja att placera lagren i sin ursprungliga position och ändra Flash-scenen för att vara lika med Photoshop-filen.
I det högra avsnittet kan du ställa in egenskaperna för vart och ett av de valda lagen i skiktet. I det övre området kan du välja hur man importerar lagren. Till exempel i textlagret kan du välja att importera laget som antingen redigerbar text, vektorbanor eller utplattad bitmappsbild. Dessutom kan du välja att importera bitmappslagen sammanfogade med dess format eller separeras från den.
Du kan täcka det importerade lagret till filmklippet och ge det ett förekomstnamn direkt från dialogrutan PSD-import utan att behöva konvertera det efter att ha importerat det. I slutet av det här avsnittet kan du ställa in publiceringsinställningarna för det importerade lagret, t.ex. komprimeringstyp och kvalitet.
Låt oss nu komma tillbaka till vårt exempel och ange importalternativen.
Ställ in dialogrutan PSD Import för att importera alla PSD-lager som Flash-lager och konvertera de importerade lagren till filmklipp. Observera att de importerade lagren visas ovanför Flash-lagret som vi tidigare skapat. Flytta bakgrundslagret för att visas i ramnummer 10 i tidslinjen och manskiktet ska visas i bild 15
Utöka alla lager av animeringen till bild 50, högerklicka på det första lagret och välj Motion-tweening
Välj bakgrundsbilden i rörelsens första ram och ställ in alfanumeriska till 0%, gå sedan till ram 15 och sätt bakgrunden alpha till 100%. Upprepa ovanstående alfanumerisering till filmklippet för manskiktet som ska visas efter bakgrundens fulla utseende.
I detta skede har vi integrerade Photoshop-resurser med ett Flash-projekt med dialogrutan PSD Import. I nästa steg importerar vi resurser från Adobe Illustrator.
Medan Photoshop är mer specialiserat på bitmapp och bildredigering, är Adobe Illustrator det bästa valet att bygga vektor- och illustrationsresurser för ditt projekt. I den här delen importerar vi vektorresurser till Flash med hjälp av dialogrutan AI-import som importerar Adobe Illustrator-filinnehållet som ett redigerbart vektorlager.
Under följande steg importerar vi Illustrator-filen Flora.ai från Illustrator till Flash och använd den i banner animationen.
På Arkiv-menyn väljer du Importera> Importera till steg och välj Flora.ai fil. AI-importdialogrutan visas. Även om det liknar PSD-importdialogrutan har det några ytterligare funktioner för att ge fler alternativ som fungerar med Illustrator-filerna, t.ex. möjligheten att välja specifikt Artboard och välja att importera de oanvända symbolerna eller importera lagren som en enda bitmappsbild.
I AI-importdialogrutan ska du kontrollera att AI-lagret är markerat och kryssrutan Filmklipp klickar för att skapa ett filmklipp baserat på det importerade lagret.
Den importerade vektorn placeras på ett nytt lager, flytta det nya lagret bakom manskiktet.
Skapa ett nytt masklagret och sätt vektorlaget som det maskerade lagret. I maskeringsskiktet skapar du ett litet filmklipp för en cykel som fungerar som masken för vektorblomman och kommer att animeras för att avslöja det.
Högerklicka på masklagret och välj rörelseinterpolering. I den första ramen av rörelsen minska cykelfilmens klipp i mitten av blomman. I den sista bilden ändra storlek på den för att täcka alla blommorna och avslöja den under masken.
Här såg vi hur Flash integreras enkelt med Illustrator för att få vektorresurser till Flash-scenen. Vi använde dialogrutan AI-import som tillhandahåller anpassade alternativ baserat på Illustrators importerade filstruktur.
Efter detta steg kommer vi att skapa texten i Adobe After Effects och lägga till den i bannern som det sista steget i vårt integrationsexempel.
Medan du kan skapa textanimering och effekter i Flash, ger Adobe After Effects utökad förmåga att skapa fler effekter, antingen genom att använda effekterna förinställningar eller skapa anpassade effekter med hjälp av menyn för effekter. I det här exemplet ser vi hur du enkelt skapar texteffekter utan kunskap om After Effect och exporterar dessa effekter till Flash-banner-animationen.
Öppna Adobe After Effects. Högerklicka på projektpanelen (Om den inte finns kan du avslöja den från fönstermenyn) och välj Ny sammansättning
Ställ in kompositionens dimension och fps som samma som den ursprungliga Flash-storleken vi skapade i början av denna handledning
Använd textverktyget för att skriva texten på scenen och välj den med hjälp av pilverktyget. Välj Effekter och förinställningspanelen till höger, om det inte finns, kan du avslöja det från fönstermenyn.
I fönstret Effekter och förinställningar navigerar du efter animationsinställningar> Text> 3D Text och väljer 3D Fall Back Scramble & Blur
Tryck på mellanslagstangenten för att förhandsgranska animationen på tidslinjen. Du kan se animeringsinformationen genom att klicka på pilen bredvid textlagret i tidslinjen. Du kan också visa animeringsnyckelramarna.
Innan du exporterar animationen till Flash måste vi beskära det område som ska exporteras från tidslinjen för att bara ha textanimering. Om du vill beskära animationens tidslinje drar du fönstret Work Area End bracket längst till höger om tidslinjen under ramnummer och placerar det efter animeringen slutar.
Välj Exportera> Adobe Flash Player (SWF) på Arkiv-menyn. I alternativmenyn ställer du in JPG-kvaliteten på Maximal och Otillräcklig funktion för att Rasterize.
Animationen After Effects är inte begränsad till textanimering, eftersom du kan använda den för att skapa andra animeringseffekter och exportera dem för att använda i Flash-projekt.
Efter att ha exporterat After Effect som SWF, är nästa steg att importera animationen till Flash som animerade ramar. After Effects kan stödja exporterande innehåll som en vektor, men i vissa fall kan den inte läsa vektorinformationen (t.ex. vid import av 3D-innehåll). För att undvika problem rasterar After Effects det exporterade innehållet som en bitmappsekvens. I de kommande stegen kommer vi att importera animationen After Effect till Flash.
I Flash-animationen väljer du Arkiv> Importera> Importera till steg och väljer textanimation SWF som vi tidigare skapat i After Effects.
SWF importeras till Flash som en sekvens av bilder; flytta sekvensbilderna så att de börjar visas efter att man har avslutat manskiktets animering.
Vi har sett att du kan importera After Effect-resurserna till Flash, men du kan också importera Flash-animationen till After Effects som en SWF och tillämpa effekter direkt på Flash-animationen. Du kan sedan exportera det som en SWF eller Flash FLV-video från After Effects. I det här fallet kan du använda animeringseffekterna After Effects till hela Flash SWF-animationen.
Syftet med denna handledning är att förstå integrationsarbetet mellan Flash och andra Adobe Creative Suite-produkter som Photoshop, Illustrator och After Effects. Vid slutet av denna handledning borde du vara bekant med det korsade arbetsflödet mellan program i Adobe Creative Suite.
Jag hoppas att du gillade den här handledningen, tack för att du läste!
Accentsconagua