Share
Siden den tidlige utgivelsen av Adobe Creative Suite har integrasjonen mellom sine produkter vært en av hovedtrekkene. Etter at Adobe fusjonerte med Macromedia, utvidet Creative Suite-integrasjonen til å dekke produkter som Flash, Dreamweaver og Fireworks. Denne opplæringen demonstrerer hvordan vi kan bruke Flash, Photoshop, Illustrator og After Effects sammen for å bygge et enkelt prosjekt.
Integrering mellom Adobe Creative Suite-produkter forbedrer arbeidsflyten din gjennom disse programmene ved å gi deg muligheten til å flytte mellom hver enkelt av dem enkelt og effektivt. Dette er ned til kompatibilitet mellom dem og CS-produktens evne til å lese vanlige formater og objekter. Det enhetlige grensesnittet er en annen side av integrasjonen mellom produkter; Når du lærer å jobbe med ett produkt, vil du bli kjent med resten av familien.
Integrasjon tar mange former i Adobe Creative Suite. Evnen til å ta arbeidet ditt med mobile enheter og teste med Adobe Device Central er en annen form for integrasjon, da du kan bruke samme program du kjører på datamaskiner på ulike typer enheter. Den tredje form for integrasjon er integrasjonen mellom designere og utviklere som jobber i samme miljø, blir kjent med arbeidsflyten til den ene og de verktøyene de begge bruker.
Denne artikkelen vil dekke integrasjonen mellom Flash og andre Adobe Creative Suite-produkter, for eksempel Photoshop, Illustrator og After Effects, for å gi en ide om hvordan disse produktene effektivt integreres mellom hverandre. Vi vil simulere et prosjekt for å lage et animert banner i Flash som bruker ressurser fra Photoshop og Illustrator. Også, vi vil bruke After Effects for å forbedre Flash animasjonen ved hjelp av forhåndsinnstillinger for After Effects.
Mens denne artikkelen hopper mellom Adobe Creative Suite 5-applikasjoner, trenger du ikke å ha mye erfaring med disse programmene, da vi bare vil dekke hvordan å integrere arbeidsflyt mellom hver av disse applikasjonene gjennom vårt eksempel.
La oss se på det endelige resultatet vi vil jobbe for:
Det første trinnet er å lage basen Flash-bannerfil som vil være midtpunktet for å integrere med Flash og Photoshop, Illustrator og After Effects.
La oss lage et dokument for banneret med 336px x 280px og med 30 fps hastighet. Og sett bakgrunnsfargen til svart fra dialogboksen Dokumentinnstilling.
Denne dokumentstørrelsen vil være standardstørrelsen for alle dokumentene vi vil lage i Photoshop og After Effects, for bare å holde ting pent.
Etter å ha opprettet flash-dokumentet, vil vi produsere den første animasjonen i banneret ved hjelp av Deco-verktøyet. Før du går gjennom følgende trinn, kan du se gjennom en tidligere artikkel som dekker Deco-verktøyet ved hjelp av New Deco-tegneverktøyet i Flash CS5. Nå, la oss se de første trinnene i animasjonen:
Velg Deco-verktøyet og fra Deco-verktøyalternativene i Egenskaper-panelet, velg Grid Fill.
I Grid-alternativene angir du egenskapene som følger:
Velg den første rammen i tidslinjepanelet og klikk med musen på scenen for å lage et tilfeldig rutenett. I rammenummer 3 trykker du på F7 for å lage en tom ramme og gjenta trinnene ovenfor for å opprette et annet tilfeldig nett.
Gjenta ovennevnte trinn hver to bilder for 20 rammer for å lage en animasjon for tilfeldig grid animasjon.
På dette tidspunktet vil vi flytte til Photoshop for å forberede ressursene som vi vil bruke i den videre banner animasjonen.
I tidligere versjoner av Flash var det bare én metode for å importere bitmapressurser til Flash, det var gjennom import av bildeformater som JPG for beste bildekomprimering og PNG for gjennomsiktige bilder. Imidlertid tok det mye tid å importere flere lagrede Photoshop-filer for å lagre hvert lag som et eget bilde, og importere det til Flash separat. Den nye PSD-importøren i Flash gjør at du kan importere PSD-filer direkte til Flash med en rekke alternativer som vi vil se senere.
I de følgende trinnene importerer vi Photoshop-filen Banner.psd til Flash ved hjelp av Flash PSD-importdialogboksen:
I Fil-menyen velger du Importer> Importer til scene og velg PSD-fil. Vi vil bruke psd_banner.psd fil fra Kilde nedlasting (lenke øverst på opplæringen).
La oss ta en titt over PSD-importdialogen og de tilgjengelige egenskapene. Dialogboksen består av følgende deler:
Lagseksjonen, du kan forhåndsvise i denne delen PSD-lagene i dokumentet og merke av eller fjerne merkene fra lagene du vil importere til Flash. Dessuten gir det en forhåndsvisning til typen av laget. For eksempel har det redigerbare tekstlaget et T-brev på laget for å identifisere at laget er redigerbart.
På den annen side inneholder bitmap-laget et bitmap-ikon for å vise at laget ikke kan redigeres. Og du kan slå sammen mellom to lag ved å velge dem med Shift-tasten og trykke på knappen Merge layers.
Under lagseksjonen kan du konvertere lagene til enten Flash-lag eller nøkkelrammer. Og du kan velge å plassere lagene i sin opprinnelige posisjon og endre Flash-scenen til å være den samme som Photoshop-filen.
I den høyre delen kan du angi egenskapene til hvert av de valgte lagene i lagene. På øverste område kan du velge hvordan du importerer lagene. For eksempel i tekstlaget kan du velge å importere laget som enten redigerbar tekst, vektorbaner eller flatt bitmapbilde. I tillegg kan du velge å importere bitmap-lagene fusjonert med stilene eller atskilt fra det.
Du kan dekke det importerte laget til filmklipp og gi det et forekomstnavn direkte fra PSD-importdialogen uten at du må konvertere det etter at du har importert det. På slutten av denne delen kan du angi publiseringsinnstillingene for det importerte laget, for eksempel komprimeringstype og kvalitet.
La oss nå komme tilbake til vårt eksempel og angi importalternativene.
Angi PSD Import dialogboksen for å importere alle PSD lagene som Flash lag og konvertere de importerte lagene til filmklipp. Legg merke til at de importerte lagene vises over Flash-laget som vi tidligere opprettet. Flytt bakgrunnslaget til å vises ved rammenummer 10 i tidslinjen, og manlaget skal vises i ramme 15
Utvid alle lagene av animasjonen til ramme 50, høyreklikk det første laget og velg Motion tweening
Velg bakgrunnsbildet i den første rammen av bevegelsen, og sett alfaen til 0%, deretter gå til rammen 15 og sett bakgrunnen alfa til 100%. Gjenta ovennevnte alfa-animasjon til manlagets filmklipp som skal vises etter bakgrunnens fulle utseende.
På dette stadiet har vi integrerte Photoshop-ressurser med et Flash-prosjekt ved hjelp av dialogboksen PSD Import. I neste fase vil vi importere ressurser fra Adobe Illustrator.
Mens Photoshop er mer spesialisert i bitmap og bilderedigering, er Adobe Illustrator det beste valget for å bygge vektorer og illustrasjonsressurser for prosjektet. I denne delen importerer vi vektorressurser til Flash ved hjelp av AI-importdialogboksen som vil importere Adobe Illustrator-filinnholdet som et redigerbart vektorlag.
Under de følgende trinnene vil vi importere Illustrator-filen Flora.ai fra Illustrator til Flash, og bruk den i banner animasjonen.
Fra Fil-menyen velger du Importer> Importer til trinn og velger Flora.ai fil. AI-importdialogboksen vises. Selv om det ligner på PSD-importdialogboksen, har det noen ekstra funksjoner for å gi flere alternativer som virker sammen med Illustrator-filene, for eksempel muligheten til å velge spesifikk Artboard og velge å importere de ubrukte symbolene eller importere lagene som enkelt bitmap-bilde.
I AI-importdialogboksen må du kontrollere at AI-laget er valgt, og merk av for filmklippet for å lage et filmklipp basert på det importerte laget.
Den importerte vektoren er plassert på et nytt lag, flytt det nye laget bak manlaget.
Opprett et nytt maskelag og sett vektorglaget som det maskerte laget. I maskerlaget lager du et lite filmklipp for en syklus som vil fungere som masken for vektorblomsten og vil bli animert for å avsløre det.
Høyreklikk maskerlaget og velg bevegelsestweening. I den første rammen av bevegelsen reduserer du syklusfilmen i midten av blomsten. I den siste rammen skal du endre størrelsen på den for å dekke hele blomsten og avsløre den under masken.
Her så vi hvordan Flash integreres enkelt med Illustrator for å bringe vektorressurser til Flash-scenen. Vi brukte dialogboksen AI-import som gir tilpassede alternativer basert på Illustrators importerte filstruktur.
Etter dette scenen vil vi lage teksten i Adobe After Effects og legge den til banneret som den siste fasen i integrasjonseksemplet.
Mens du kan lage tekstanimasjoner og effekter i Flash, gir Adobe After Effects utvidet mulighet til å skape flere effekter, enten ved å bruke effektforhåndsinnstillingene eller opprette egendefinerte effekter ved hjelp av effektmenyen. I dette eksemplet ser vi hvordan du enkelt lager teksteffekter uten kjennskap til After Effect og eksporterer disse effektene til Flash-banner-animasjonen.
Åpne Adobe After Effects. Høyreklikk på prosjektpanelet (Hvis det ikke er der, kan du avsløre det fra Vindu-menyen), og velg Ny komposisjon
Sett komposisjonens dimensjon og fps som det samme som den opprinnelige Flash-størrelsen vi opprettet i begynnelsen av denne opplæringen
Bruk tekstverktøyet til å skrive teksten på scenen og velg den med pilverktøyet. Velg Effekter og forhåndsinnstillinger-panelet til høyre, hvis det ikke er der, kan du avsløre det fra Vindu-menyen.
I vinduet Effekter og forhåndsinnstillinger navigerer du til animasjonsforhåndsinnstillinger> Tekst> 3D Tekst og velger 3D Fallback Scramble & Blur
Trykk på mellomromstasten for å forhåndsvise animasjonen på tidslinjen. Du kan se animasjonsdetaljene ved å klikke på pilen ved siden av tekstlaget på tidslinjen. Du kan også se animasjonsnøkkelrammene også.
Før du eksporterer animasjonen til Flash, må vi beskjære området som skal eksporteres fra tidslinjen for å bare ha tekstanimasjonen. For å beskjære animasjonens tidslinje drar du sluttbraketten for arbeidsområdet til høyre til tidslinjen under rammenumrene og plasserer den etter at animasjonen er ferdig.
Fra Fil-menyen velger du Eksporter> Adobe Flash Player (SWF). I alternativmenyen, still inn JPG-kvaliteten til Maksimal og Ikke-støttet funksjoner for å Rasterize.
Animasjonen After Effects er ikke begrenset til tekstanimasjon, da du kan bruke den til å lage andre animasjonseffekter og eksportere dem til bruk i Flash-prosjekter.
Etter å ha eksportert After Effect som SWF, er neste trinn å importere animasjonen til Flash som animerte rammer. Ettervirkninger kan støtte eksport av innhold som en vektor, men i noen tilfeller kan den ikke lese vektorinformasjonen (for eksempel ved import av 3D-innhold). For å unngå problemer rasterer After Effects det eksporterte innholdet som en bitmap-sekvens. I de kommende trinnene vil vi importere animasjonen etter After Effect til Flash.
I Flash-animasjonen velger du Arkiv> Importer> Importer til trinn og velger tekst animasjon SWF som vi tidligere opprettet i After Effects.
SWF er importert til Flash som en sekvens av bilder; flytt sekvensbildene for å begynne å vises etter at manlagets animasjon er ferdig.
Vi har sett at du kan importere After Effect-ressursene til Flash, men du kan også importere Flash-animasjonen til After Effects som en SWF og bruke effekter direkte til Flash-animasjonen. Du kan deretter eksportere den som en SWF- eller Flash FLV-video fra After Effects. I dette tilfellet kan du bruke animasjonseffekter etter After Effects til hele Flash SWF-animasjonen.
Formålet med denne opplæringen er å forstå integrasjons arbeidsflyten mellom Flash og andre Adobe Creative Suite-produkter som Photoshop, Illustrator og After Effects. Ved slutten av denne opplæringen bør du være kjent med kryss arbeidsflyten mellom programmer i Adobe Creative Suite.
Jeg håper du likte denne opplæringen, takk for å lese!
Accentsconagua