Create en interaktiv Galaxy med Flash Catalyst: Animasjon, Video &Sound
Del
Del
to
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I løpet av denne Basix opplæringen vil vi lære hvordan du legger den endelige funksjonene til vår eksisterende Flash Catalyst prosjekt. Vi skal se på glatt samspill mellom sider, ekstra hover handlinger, lyder og video. Som med den forrige tutorial ingen kode kreves
Merk: du kan lagre Flash Catalyst Prosjekt til enhver tid, og deretter fortsette når det er behagelig for deg. For å gjøre dette gå til Fil > Lagre som ... gi prosjektet et navn og lagre den til en passende katalog.
Endelig resultat Forhåndsvisning
Sjekk ut det endelige resultatet vi tar sikte på å oppnå. Ved å dekke Catalyst grunnleggende vil vi lære å lage glatte sideoverganger, gjelder 3D-animasjon, legge til lyd til våre knapper og også legge til noen video
Trinn 1:. Kildefil
Åpne Adobe Flash katalysator. På startvinduet velg Åpne Prosjekt > Nedlastede filen. Velg Galaxy2.fxp, som du kan få fra Source nedlasting på toppen av siden
Trinn 2:. Se Tidslinjer Panel Søk
Åpne opp tidslinjer Panel ved å dobbeltklikke på navn. Vi er presentert med alle mulige interaksjoner mellom sidene:
Hvis du ønsker å se interaksjoner som omhandler en bestemt side, skrive navnet sitt i søkevinduet:
Du kan også gjøre dette med rullegardinmenyen:
Trinn 3: Se tidslinjer Panel Tidslinje
Nå la oss dekke noen ting angående tidslinjen selv. Her har vi 5 viktige punkter:
- tillater oss å legge til animasjon til våre gjenstander og justere noen nødvendige parametere, der vil vi ta en titt senere.
- En scrollbar Prøv å rulle det og gjør oppmerksom på tidslinjen - den lar oss gjøre tidslinjen mer presis eller omvendt, lenger. (f.eks hvis vi drar den til høyre, vi får se flere segmenter i tidslinjen). Det er nyttig hvis vi ønsker å gjøre en lang animasjon eller ønsker å ha bedre kontroll når animasjonen er for kort.
- Target objekter Her det avhenger av forskjellen mellom sidene. Siden vi har rektangler skjult på hoved og avslørt på de tilsvarende sidene, Flash Catalyst se disse endringene, og tilbyr oss interaktivitet for objektene
Trinn 4:. Legg interaksjon Fade In Effect
Ok, nå du er kjent med tidslinjen så vi kan legge litt animasjon til våre sider. La oss starte med overgangen mellom hovedsiden og Photoshop siden. I Tidslinjer Panel med Photoshop Layer valgt (hvis du har valgt, vil du se den blå fill), klikker du på pilen nær Smooth Transition knapp:
Her ser vi på menyen som tillater oss å sette visse parametre . "Varighet" er varigheten av animasjon; Jeg har bestemt meg for å sette den til 1 sek og for timing Jeg har brukt "Smart Smoothing" alternativet. Vi trenger ikke "Samtidig" som vi bare bruke animasjon til ett lag. Og selvfølgelig trenger vi ikke skal overskrives noe så la haken feltet stå tomt
Trinn 5:. Legg Interaksjon Preview Effect
Vi har brukt en myk overgang til en av sidene. La oss se på bildet og se hva som er endret:
Først av alt du kan forhåndsvise effekten vi har satt ved hjelp Play-knappen. Her kan du se at vi nå har en blå heltrukken linje med ordene "Fade In" inne. Dette betyr at vi har brukt animasjon til vår Photoshop Layer. Klikk på den blå heltrukken linje og undersøke Properties Panel:
Vi ser at det står Fade på toppen; Dette indikerer påførte effekt navn. Vi har noen flere alternativer: Opacity er satt til Auto, men hvis du ønsker å justere det selv rett og slett fjern haken avkrysningen og sette dine egne parametre i "Fra" og "Til". Du kan også se at vi kan endre Varighet og selv sette Forsinkelse for effekten. Lettelser er et annet viktig alternativ, spesielt hvis du er kjent med Flash Professional. Jeg overlater det til standard, men gjerne eksperimentere med det
Trinn 6:. Exit Button Påfør Animation
Det neste vi skal gjøre er å bruke animasjon til Exit-knappen . Velg "Button" lag på Tidslinjer Panel (husk - Main > Photoshop overgang må velges i venstre nederste vinduet på Tidslinjer Panel) og igjen klikk på pilen i nærheten Smooth Transition knappen. I dialogboksen angi varigheten til 0,5 sek:
Trinn 7: Exit Button Sett Delay
La oss skille tidspunktet for animasjon. Velg "Exit knappen" lag. Vi har to metoder for å gjøre dette
Gå til Properties Panel og sette Delay for Exit-knappen for laget til 1 sek.
Alternativt kan du velge den grønne linjen på Exit-knappen lag så det blir blått, og klikk og dra det til segmentet på tidslinjen som passer oss (i vårt tilfelle dette er 1 sek):
Trinn 8: En Other Way
Det er en måte å justere lengden på animasjon. Det er veldig viktig og veldig enkel å bruke. For å endre animasjon varighet bare med laget valgt, musen over den lille pilen på slutten av animasjonen segmentet, hold venstre museknapp og dra i den retningen du vil (høyre - forlenge, venstre - forkorte):
Trinn 9: Fl Page Animation
La oss gå til en annen side; Flash Page. I "Tidslinjer" Panel velge Main > Flash overgang. Igjen satt opp samme Fade In effekt for begge lag som vi hadde i trinn 5-7:
Trinn 10: Fl Page Mer Interaktivitet
La oss legge litt mer samhandling. I "Tidslinjer" Panel med "Flash" Layer valgt, klikker du på midt-bunn på "+ Legg til handling" -knappen. Fra rullegardinmenyen velger du Roter:
Trinn 11: Fl Page Juster Rotation
Nå har vi tre elementer fra vår Flash Layer valgt, og du kan se at alle av dem har Rotate effekten:
Ok, velg et av roterings effekter (Roter effekten at du har klikket på blir blått) på Tidslinjer Panel og gå til vinduet Egenskaper. Når du er der satt det første alternativet til en spesiell vinkel og vinkel selv satt til 360-graders - Dette vil fullføre rotasjonen. Varighet 0,5 sek bør være OK, men du står fritt til å eksperimentere - målet mitt er bare å vise deg hva du kan gjøre :)
Etter at du har brukt den til et av elementene , satt de samme innstillingene til de to gjenværende, slik at alle tre vil ha 360-graders rotasjon og samme varighet. Etterpå kan du forhåndsvise animasjonen. Vi har nå Rotasjon og Fade In effekter for Flash Page
Trinn 12:. DW Page Mer Interaktivitet
La oss gå videre og legge effekter til Dreamweaver Page. I Tidslinjer Panel velge Main > Dreamweaver overgang. Igjen gjenta trinn 5-7 til siden slik at det blir Fade In Effect:
Trinn 13: DW Page Roter 3D Effect
Med Dreamweaver Layer valgt, klikk på "+ Legg til handling" -knappen og velg "Roter 3D" fra rullegardinmenyen
Trinn 14:. DW Page Juster Roter 3D Effect
Du skal nå være å se på noe som ligner på dette (Roter 3D-effekten brukes på alle tre elementene på tidslinjen):
La oss tilpasse dem. Velg ett av Roter 3D-animasjoner og gå til Properties Panel. Der har vi et par alternativer. Foruten Varighet, Delay og lettelser har vi tre typer rotasjon. Så fra venstre til høyre: Først - roterer objektet rundt X-aksen, Second - roterer objektet rundt Y-aksen, og den tredje - det er en enkel rotasjon som vi hadde i Flash Page. Og for hver type rotasjon kan vi sette opp starte opp Vinkel og den endelige verdien
For DreamweaverRect bruker jeg rotasjons 0-360 &grader.; rundt Y-aksen:
For DreamweaverIcon og tekst bruker jeg rotasjonen 0-360-graders rundt X-aksen med 0,5 Pause:
Så bør du ha følgende bilde og kan teste din animasjon med på Start-knappen:
Trinn 15: Video Import
neste ting vi bør gjøre er å sette video. Vi vil legge video til Flash Page som selve videoen handler om Flash Catalyst og Flash Player. For å gjøre dette velger vårt Flash Page. Så gå til Fil > Import > Video /lyd-fil. Velg den nedla Adobe.flv filen fra Source zip knyttet på toppen av opplæringen
Trinn 16:. Video Move File
Det neste vi trenger er å tilordne filen til Flash gruppe. Bare velg Video Player fra lagpanelet, hold venstre museknapp og dra at Video Player til Flash gruppe lag til det utvider seg og sette det inn i den. Etter å ha gjort dette bør du se følgende:
Trinn 17: Video skjule lag og Set Size
Nå skal skjule Flash ikon og tekst, slik at det vil være bare video. For å gjøre dette, klikker du øyeikonene på disse lagene, slik at de vil forsvinne (du kan også slette disse lagene, det er opp til deg - bare velg disse lagene, og klikk på Trash ikonet nederst til høyre på Layers Panel) <. br>
Det neste du må gjøre er å endre størrelsen på videoen vår, så det vil passe inn i rektangelet. Velg "Video Player" lag og musen over øverste venstre hjørne på video, slik at du kan se to pilene vendt forskjellige retninger (musen skal være over den hvite firkanten). Hold venstre museknapp og begynner å dra. Du vil også legge merke til at det er andre hvite firkanter og den blå firkanten i midten. På samme måte dra dem slik at du posisjon video sentralt (hvis du ønsker å dra video seg selv, ikke hjørnene, peke musen i midten av Video og dra)
Trinn 18:. Video Player Egenskaper
La oss gå til Properties Panel og utforske hva som er på tilbud.
Først av alt vi ser Video posisjon på scenen, sin bredde og høyde. Hvis du ønsker å justere dem som jeg gjorde angi følgende alternativer: X - 179, Y - 89, Bredde (W) - 281, Høyde (H) - 154. Da vil du se at vi allerede har videokontrollene - den Egenskaper Panel gir oss to pre-laget videokontrollene (Rammeverk og Standard), men vi vil legge våre egne knapper for å styre video, så sett den til Ingen.
For skala modus Jeg har også valgt å sette " Ingen ". Foruten None vi kan sette Scale-modus for å strekke, Postkasse eller Zoom - her kan du eksperimentere og sette det beste som passer deg. Hvis du ønsker å se hvordan det vil se sjekke "Auto Play" alternativet (husk at når du er ferdig med å eksperimentere, fjerner Auto Play alternativet).
I tillegg til Auto spiller vi har "Loop" og "Dempet". Vi trenger ikke å Loop Video så la det være tomt, og vi ønsker også å høre lyden så Dempet alternativet må også være merket.
Nå la oss gå til Component og utseende undermenyer. Vær sikker på at "Godtar Mouse hendelse" alternativet er valgt (hvis det ikke er merket av, vil vi ikke være i stand til å sette våre egne knapper til Video). Den "Tooltip" alternativet tillater oss å skrive beskrivelsen av videoen og når brukeren mus enn det, vil han eller hun se beskrivelsen.
"Volume", tror jeg, er klart., /
I Utseende kan du angi en viss "Blend Mode", og du kan også sjekke "Hand Cursor" alternativet, slik at når brukeren svever over videoen musepekeren vil slå inn håndpekeren.
< h2> Trinn 19: Video Import, posisjon & Knapper
Nå er det på tide å sette på kontrollknappene til vår video. Med Flash laggruppe valgt å gå til Fil > Import > Bilde og import Play.png. Gjør det samme for Stop.png. Konvertere dem til knapper og sted under videoen (det alltid en god praksis å endre navn på dem). Du kan også bruke noen effekter til dem, men det er ikke nødvendig - Jeg har satt Opacity i Up staten for dem til 75 (hvis du ikke vet hvordan du gjør dette må du se min første tutorial på Flash Catalyst hvor vi diskutere slike ting)
.. og situasjonen i Lag-panelet skal være som dette.
Trinn 20: Video Play og Stop
Nå for den enkleste delen så langt - gå til Interaksjoner Panel, velg Play-knappen og i Interaksjoner Panel velge følgende alternativer: Først - Ved klikk, andre - Spill Video, tredje - velg vår "Adobe1.flv" Video, fjerde - kun Når i Flash Page:
Gjør det samme for stopp-knappen, men i stedet for "Play Video" sette den til "Stop Video".
Nå som vi har satt kontrollene til vår Video la oss teste det - trykk Ctrl + Enter eller gå til File> Kjør Prosjekt
Trinn 21: Sound Import
Det siste vi trenger å gjøre er å bruke lyd til våre knapper. Først av alt la oss importere lyden. Gå til Fil > Import > Video /lyd-fil og navigere til installert Flash Catalyst rotmappen. Der velger du "Lydeffekter /Flash Beep.mp3". Selvfølgelig kan vi bruke våre egne lyder, men jeg ønsket å vise deg at Flash Catalyst har en forhåndsinstallert pakke av lyder. Velge noen som passer deg. Når det er importert du kan forhåndsvise det - gå til biblioteket Panel og der i bunnen navigere til Media mappen og velg "Flash Beep.mp3" - vil du legge merke til at i det øverste vinduet på Play-knappen har dukket opp. Hvis du klikker på det du vil høre knappens lyd:
Merk: Her vil du også finne alle våre grafiske filer, media og komponenter
Trinn 22:. Høres siste trinnet
La oss fullføre prosjektet vårt og legge til lyd på knappene i løpet av sine mer enn stater. For å gjøre dette velger du en av knappene i "Layers" Panel, gå til sin over staten. I "Tidslinjer" Panel med ikonet på Stage valgt, klikker du på "+ Legg til handling" -knappen og velg Sound Effect:
Fra dialogboksen velger du "Flash Beep" og klikk OK:
Situasjonen på tidslinjen bør være som følger:
Gjenta dette trinnet til Flash og Photoshop ikoner og du er ferdig. Kjør prosjektet!
Gratulerer!
Nå vet du ikke bare hvordan å konvertere dine kunstverk i komponenter, men hvordan du legger glatt samspill mellom Pages, bruke forskjellige varianter av animasjon, bruke video og lyd i prosjekter og kontrollere dem. Flash Catalyst er et fantastisk program, og nå kan du enkelt uten å skrive en eneste linje med kode bringe dine kunstverk til liv.
Jeg håper du har hatt glede av å følge dette prosjektet, og lære å bruke Flash Catalyst. Øv og du vil oppnå gode resultater! Takk også for at du leser min tutorial :) Anmeldelser
" Spill " knappen Dette er nødvendig for å forhåndsvise animasjonen som vi har brukt til objekt (er)
Tidslinjen selv her vi kan se slike ting som 0s, 1s, 2s (null sekunder, ett sekund, to sekunder) . Det vil hjelpe oss til å justere varigheten av animasjonen.