Integrating Adobe Flash med andre CS5 Applications - Basix
Del
Del
en
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Siden tidlig løslatelse av Adobe Creative Suite, har integrasjon mellom våre produkter vært en av de viktigste funksjonene. Etter Adobes fusjonen med Macromedia, utvidet Creative Suite integrering å omfatte produkter som Flash, Dreamweaver og Fireworks. Denne opplæringen viser hvordan vi kan bruke Flash, Photoshop, Illustrator og After Effects sammen for å bygge et enkelt prosjekt.
Integrasjon mellom Adobe Creative Suite-produkter forbedrer arbeidsflyten gjennom disse programmene ved å gi deg evne til å bevege seg mellom hver av dem enkelt og effektivt. Dette er ned til kompatibilitet mellom dem og CS produktenes evne til å lese vanlige formater og objekter. Den felles grensesnitt er en annen side av integrasjon mellom produktene; når du lære hvordan du arbeider med ett produkt, vil du bli kjent med resten av familien.
Integrering tar mange former i Adobe Creative Suite. Muligheten til å ta arbeidet til mobile enheter og test ved hjelp av Adobe Device Central er en annen form for integrering som du kan bruke det samme programmet du kjører på datamaskiner på ulike typer enheter. Den tredje formen for integrering er integrasjonen mellom designere og utviklere som jobber i samme miljø, bli kjent med arbeidsflyten av en annen, og de verktøyene de begge bruker.
Denne artikkelen vil dekke integrasjonen mellom Flash og annet Adobe Creative Suite-produkter som Photoshop, Illustrator og After Effects for å gi et inntrykk av hvordan disse produktene effektivt integrere mellom hverandre. Vi vil simulere et prosjekt for å lage en animert banner i Flash som bruker ressurser fra Photoshop og Illustrator. Dessuten vil vi bruke After Effects for å forbedre Flash animasjon ved hjelp av After Effects forhåndsinnstillinger.
Selv om denne artikkelen hopper mellom Adobe Creative Suite 5 programmer, du trenger ikke å ha mye erfaring med disse programmene som vi vil bare dekke hvordan å integrere arbeidsflyten mellom hvert av disse programmene gjennom vårt eksempel
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot.
Trinn 1:. Opprett ny FLA
Det første trinnet er å lage basen Flash-banner-fil 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 sette bakgrunnsfargen til svart fra dokument Stille dialogboksen.
Dette dokumentet størrelse vil være standardstørrelsen for alle dokumenter som vi vil skape i Photoshop og After Effects, bare for å holde ting ryddig.
Når du har opprettet flash dokument, vil vi produsere den første animasjonen i banneret med Deco-verktøyet. Før du går gjennom følgende trinn, kan du se i en tidligere artikkel som dekker Deco verktøy Bruke den nye Deco tegneverktøy i Flash CS5. Nå, la oss se de første trinnene av animasjonen:
Trinn 2: Velg Grid Fyll med Deco Tool
Velg Deco verktøy og fra Deco verktøy alternativene i Properties panelet Velg Grid Fyll
Trinn 3:. Set Grid Valg
I Grid alternativer, angi egenskapene som følgende:
Kontroller de fire fliser alternativer og sette sin farge med forskjellige hvite og grå farger
I Advanced Option, fjerner male over kanten og merker av for tilfeldig rekkefølge
Sett Horisontal og vertikal avstand til 5px
Sett Pattern skala til 10%
Trinn 4: Lag Rister
Velg den første rammen i tidslinjepanelet og klikk med musen på fasen for å skape en tilfeldig gitter. I ramme nummer tre, trykker F7 opprette en tom ramme og gjentar trinnet ovenfor for å opprette en annen tilfeldig grid
Trinn 5:. Lag Grid Animasjoner
Gjenta trinnet ovenfor hver to rammer for 20 rammer for å skape en animasjon for tilfeldig grid animasjon.
På dette punktet, vil vi flytte til Photoshop for å forberede de ressursene som vi vil bruke i den videre banner animasjon.
Importere Photoshop Resources
I tidligere versjoner av Flash, det var bare en metode for å importere bitmap ressurser til Flash, var det gjennom import bildeformater som JPG for beste bildekomprimering og PNG for gjennomsiktige bilder. Men å importere flere lagdelte Photoshop-filer tok mye tid å spare hvert lag som et eget bilde og importere den til Flash separat. Den nye PSD importør i Flash lar deg importere PSD-filer direkte i Flash med en rekke alternativer som vi vil se senere.
I de følgende trinnene, vil vi importere Photoshop-filen Banner.psd til Flash bruke Flash PSD dialog import boks:
Trinn 6: Import PSD fil
I Fil-menyen, velg Import > Import til scenen og velge PSD fil. Vi vil bruke psd_banner.psd fil fra Source nedlasting (link på toppen av opplæringen).
La oss ta en titt over PSD dialog import boksen og dets tilgjengelige eiendommer. Dialogboksen består av følgende deler:
lag delen, kan du forhåndsvise i denne delen PSD lag i dokumentet og merke eller fjerne merkingen lagene som du ønsker å importere til Flash. Dessuten gir den en forhåndsvisning til den type av laget. For eksempel har redigerbar tekst laget en T bokstav på lag for å identifisere at laget er redigerbar.
På den annen side, bitmap lag inkluderer en bitmap-ikonet for å vise at laget er ikke redigeres. Og du kan slå sammen mellom to lag ved å velge dem ved hjelp av Shift-tasten og trykke på Slå sammen lagene knappen.
Under lag-delen, kan du konvertere lagene til enten Flash lag eller nøkkelbilder. Og, kan du velge å plassere lagene i sin opprinnelige posisjon og endre Flash scenen for å være så det samme som Photoshop-filen.
I den høyre delen kan du angi egenskapene til hver av de utvalgte lagene i lag "-delen. Øverst området, kan du velge hvordan du importerer lagene. For eksempel i tekstlaget, kan du velge å importere lag som enten redigerbar tekst, vektorbaner eller flatet bitmap bilde. I tillegg kan du velge å importere bitmap lagene slått sammen med sine stiler eller separert fra den.
Du kan dekke den importerte lag til filmklipp og gi det en forekomst navn direkte fra PSD dialog import boksen uten behov å konvertere den etter import det. På slutten av dette avsnittet, kan du sette innstillingene publisering for importert lag som komprimeringstype og kvalitet.
Nå, la oss komme tilbake til vårt eksempel og angi importvalg.
Trinn 7: Avslutt Import
Sett PSD Import dialogboksen for å importere alle PSD lagene som Flash lag og konvertere de importerte lag til filmklipp. Legg merke til at de importerte lagene vises over Flash lag som vi tidligere har opprettet. Flytt bakgrunnslaget til å vises på ramme nummer 10 i tidslinjen og mannen laget for å vises på ramme 15
Trinn 8: Utvide Animation
Utvid alle lag av animasjon til å ramme 50, høyreklikk det første laget og velge Motion tweening
Trinn 9: Lag Alpha Tween
Velg bakgrunnsbilde i den første rammen av bevegelse og satt sin alfa til 0%, så gå til rammen 15 og sette bakgrunns alfa til 100%. Gjenta ovenfor alfa animasjon til mannen laget filmklipp å vises etter full utseendet på bakgrunnen.
På dette stadiet, har vi integrert ressurser Photoshop med en Flash prosjekt ved hjelp av PSD Import dialogboksen. I den neste fasen, vil vi importere ressurser fra Adobe Illustrator.
Importere Adobe Illustrator Resources
Mens Photoshop er mer spesialisert i bitmap og bilderedigering, er Adobe Illustrator det beste valget å bygge vektor og illustrasjon ressurser for prosjektet. I denne delen vil vi importere vektor ressurser til Flash bruke AI dialog import boks som vil importere Adobe Illustrator filinnholdet som en redigerbar vektor lag.
I de følgende trinnene, vil vi importere Illustrator fil Flora. ai fra Illustrator til Flash og bruke den i banneret animasjon
Trinn 10:. Import File
Fra Fil-menyen velger du Import > Import Stage og velg Flora.ai filen. AI dialog import vises. Selv om det ligner på PSD dialog import boksen, den har noen ekstra funksjoner for å gi flere alternativer som jobber med Illustrator-filer for eksempel muligheten til å velge spesifikke Artboard og velger å importere de ubrukte symboler eller importere lagene som enkeltpunktgrafikkbilde.
Trinn 11: Lag et filmklipp fra AI
I AI dialogboksen import boksen, sørg for at AI lag er valgt og sjekke filmklipp boksen for å opprette en filmklipp basert på importert lag
Trinn 12:. omorganisere Layers
Den importerte vektoren er plassert på et nytt lag, flytter det nye laget bak mannen lag Lag en ny maske laget og satt vektoren lag som det maskerte laget. I maske laget, lage en liten filmklipp for en syklus som vil fungere som masken for vektoren floral og vil bli animert å avsløre det Høyreklikk på maske laget og velge motion tweening. I den første rammen i bevegelse redusere syklus filmklipp i midten av floral. I den siste rammen endre størrelsen på den til å dekke hele floral og avsløre den under masken. Her så vi hvordan Flash kan enkelt integreres med Illustrator for å bringe vektor ressurser til Flash scenen. Vi brukte AI import dialogboksen som tilbyr skreddersydde alternativer basert på Illustrator importert filstrukturen. Etter denne fasen vil vi skape teksten i Adobe After Effects og legge den til banneret som det siste trinnet i vår integrasjon eksempel. Mens du kan lage tekst animasjon og effekter i Flash, Adobe After Effects gir utvidet evne til å skape flere effekter bruker virkningene presets eller opprette egendefinerte effekter ved hjelp av effekter menyen. I dette eksempelet vil vi se hvordan du kan lage teksteffekter enkelt uten kjennskap Etter Effect og eksportere disse effekter til Flash banner animasjon Åpne Adobe After Effects. Høyreklikk på prosjektet panelet (Hvis det ikke er det, kan du avsløre det på Vindu-menyen), og velg Ny sammensetning Set sammensetningen dimensjon og fps som det samme som den opprinnelige Flash størrelsen vi opprettet i begynnelsen av denne opplæringen Bruk tekstverktøyet for å skrive teksten på scenen og velge det med Arrow verktøyet. Velg effekter og presets panel på høyre side, hvis den ikke er der, kan du avsløre det på Vindu-menyen I effekter og presets panel, navigere for Animasjon presets >.; Tekst > 3D Tekst og velge 3D Fall Back Scramble & Blur Trykk space for å forhåndsvise animasjonen på tidslinjen. Du kan vise animasjons detaljer ved å klikke på pilen ved siden av teksten laget i tidslinjen. Du kan vise animasjon keyframes samt Før eksportere animasjonen til Flash, trenger vi å beskjære området som skal eksporteres fra tidslinje for å bare ha tekst animasjon. Å beskjære animasjonen tidslinjen, drar arbeidsområdet End braketten helt til høyre på tidslinjen under rammenummer og posisjon det etter animasjons endene Fra Fil-menyen velger Export > Adobe Flash Player (SWF). I alternativmenyen, sett JPG kvalitet til Maksimum og Funksjoner som ikke støttes for å rastrere. After Effects animasjon er ikke begrenset til tekst animasjon, som du kan bruke den til å lage andre animasjonseffekter og eksportere dem til å bruke i Flash prosjekter. Etter å eksportere Etter Effekt til SWF, er neste trinn å importere animasjonen til Flash som animerte rammer. After Effects kan støtte eksportere innhold som en vektor, men i noen tilfeller kan det ikke lese vektorinformasjon (for eksempel når du importerer 3D-innhold). For å unngå problemer, After Effects rastrerer det eksporterte innholdet som punktgrafikk sekvens. I de kommende trinnene, vil vi importere Etter Effect animasjon til Flash I Flash-animasjon, velge Fil > Import > Import til scenen og velge tekst animasjon SWF at vi laget tidligere i After Effects SWF importeres til Flash som en sekvens av bilder; flytte sekvensbilder til å begynne å vises etter at mannen laget animasjonen er ferdig. Vi har sett at du kan importere etter effekt ressurser til Flash, men du kan også import Formålet med denne opplæringen er å forstå integreringen 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 korset arbeidsflyten mellom programmer i Adobe Creative Suite. Jeg håper du likte denne opplæringen, takk for lesing!
Trinn 13: Lag en maske
Trinn 14:. Lag en Motion Tween
Opprette Text Effects i After Effects
Trinn 15:. Opprett ny AE Sammensetning
Trinn 16: Sett opp Sammensetning
Trinn 17: Legg Tekst og Text Effect
Trinn 18: Forhåndsvisning animasjons
Trinn 19:. Beskjær Tidslinje
Trinn 20:. Eksporten AE som SWF
Importere After Effects ressurser i Flash
Trinn 21:. Import AE SWF
Trinn 22:. Omstrukturer Animation
Flash-animasjon til After Effects som SWF og bruke effekter til Flash-animasjon direkte. Deretter kan du eksportere det som en SWF eller Flash FLV video fra After Effects. I dette tilfellet kan du bruke After Effects animasjonseffekter til hele Flash SWF-animasjon.
Konklusjon