Share
Under denne Basix-opplæringen lærer vi hvordan du legger til de endelige funksjonene i vårt eksisterende Flash Catalyst-prosjekt. Vi ser på jevn interaksjon mellom sider, ekstra hoverhandlinger, lyder og video. Som med den forrige opplæringen er det ikke nødvendig med kode!
Merk: Du kan lagre Flash Catalyst Project når som helst og deretter fortsette når det er behagelig for deg. For å gjøre dette, gå til Arkiv> Lagre som ... gi prosjektet et navn og lagre det i en passende katalog.
Sjekk ut det endelige resultatet vi sikter på å oppnå. Ved å dekke Catalyst-grunnleggende, lærer vi hvordan du oppretter glatte sidetransisjoner, bruker 3D-animasjon, legger til lyd på knappene våre og legger til litt video.
Åpne Adobe Flash Catalyst. I startvinduet velger du Åpne prosjekt> Nedlastet fil. Velg Galaxy2.fxp, som du kan få fra Kilde nedlastingen øverst på siden.
Åpne Timelines Panel ved å dobbeltklikke på navnet. Vi presenteres med alle mulige interaksjoner mellom sidene:
Hvis du vil se interaksjoner som omhandler en bestemt side, skriver du navnet i søkevinduet:
Du kan også gjøre dette med rullegardinmenyen:
La oss nå dekke noen ting om selve tidslinjen. Her har vi 5 viktige punkter:
Ok, nå er du kjent med tidslinjen, så vi kan legge til litt animasjon på våre sider. La oss starte med overgangen mellom hovedsiden og Photoshop-siden. I tidslinjepanelet med det valgte Photoshop-laget (hvis det er valgt, ser du den blå fyllingen), klikker du pilen i nærheten av smidig overgangsknappen:
Her ser vi menyen som lar oss sette bestemte parametere. "Varighet" er varigheten av animasjonen; Jeg har bestemt meg for å sette den til 1 sek og for Timing har jeg brukt "Smart Smoothing" -alternativet. Vi trenger ikke "Samtidig" da vi bare bruker animasjon til ett lag. Og selvfølgelig trenger vi ikke å overskrive noe, så la avmerkingsfeltet være tomt.
Vi har brukt en glatt overgang til en av sidene. La oss se på bildet og se hva som er endret:
Først og fremst kan du forhåndsvise effekten vi har satt ved å bruke Play-knappen. Her kan du se at vi nå har en blå, solid linje med ordene "Fade In" inni. Dette betyr at vi har brukt animasjonen til vårt Photoshop Layer. Klikk på den blå faste linjen og undersøk Egenskaper Panel:
Vi ser at det står Fade øverst; Dette indikerer navnet på den påførte effekten. Vi har noen ekstra alternativer: Opacity er satt til Auto, men hvis du vil justere det selv, fjerner du avmerkingen og angir dine egne parametre i "Fra" og "Til". Du kan også se at vi kan endre varigheten og til og med angi forsinkelsestiden for effekten. Easing er et annet viktig alternativ, spesielt hvis du er kjent med Flash Professional. Jeg lar det gå til standard, men gjerne eksperimentere med det.
Den neste tingen vi bør gjøre er å bruke animasjonen til Avslutt-knappen. Velg "Knapp" -lag på tidslinjepanelet (husk - hovedmenyen> Photoshop-overgangen må velges i venstre bunnvindu i tidslinjepanelet) og igjen klikker du pilen i nærheten av glatt overgangsknapp. I dialogboksen angis varigheten til 0,5 sek:
La oss skille animasjonstidspunktet. Velg "Avslutt-knappen" -laget. Vi har to metoder for å gjøre dette.
Gå til Egenskaper panelet og angi forsinkelsen for utgangsknappen til 1 sek:
Alternativt kan du velge den grønne linjen på Avslutt-knappelaget slik at den blir solid blå, deretter klikker du og drar den til segmentet på tidslinjen som passer oss (i vårt tilfelle er dette 1 sekund):
Det er enda en måte å justere lengden på animasjonen. Det er veldig viktig og veldig lett å bruke. For å endre animasjonsvarigheten rett og slett med laget valgt, mus over den lille pilen på slutten av animasjonssegmentet, hold venstre museknapp og dra i ønsket retning (høyre strekk, venstreforkortelse):
La oss flytte til en annen side; Flash-siden. I "Timelines" -panelet velger du Hoved> Flashovergang. Igjen, sett opp samme Fade In effect for begge lagene som vi hadde i trinn 5-7:
La oss legge til litt mer interaksjon. I "Timelines" -panelet med "Flash" -laget valgt, klikker du på midtbunnen på "+ Add Action" -knappen. Fra rullegardinmenyen velger du Rotate:
Nå har vi tre elementer fra vårt valgte Flash Layer, og du kan se at alle har Rotate-effekten påført:
OK, velg en av Rotate-effektene (Rotate-effekten du klikket på blir solid blå) på Timelines Panel og gå til Egenskaper-vinduet. Når det er satt det første alternativet til en bestemt vinkel og vinkelen selv settes til 360 ° - dette vil fullføre rotasjonen. Varighet 0,5 sek skal være OK, men du er fri til å eksperimentere - mitt mål er bare å vise deg hva du kan gjøre :)
Når du har brukt det til et av elementene, sett de samme innstillingene til de to gjenværende, så alle tre vil ha 360 ° rotasjon og samme varighet. Etterpå kan du forhåndsvise animasjonen. Vi har nå Rotasjon og Fade In-effekter for denne Flash-siden.
La oss gå videre og legge til effekter på Dreamweaver-siden. I Timelines-panelet velger du Hoved> Dreamweaver-overgang. Gjenta igjen trinn 5-7 på siden, så det vil bli fade in effect:
Med Dreamweaver Layer valgt, klikk på "+ Add Action" -knappen og velg "Rotate 3D" fra rullegardinmenyen.
Du bør nå se på noe som ligner på dette (Rotate 3D-effekten blir brukt på alle tre elementene på tidslinjen):
La oss tilpasse dem. Velg en av Rotate 3D-animasjonene og gå til Egenskaper-panelet. Der har vi et par alternativer. I tillegg til varighet, forsinkelse og utjevning 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 vi hadde på Flash-siden. Og for hver type rotasjon kan vi sette opp startvinkelen og dens endelige verdi.
For DreamweaverRect bruker jeg rotasjonen fra 0 til 360 ° rundt Y-aksen:
For DreamweaverIcon og Text bruker jeg rotasjonen fra 0 til 360 ° rundt X-aksen med 0,5 Forsinkelse:
Så, bør du ha følgende bilde og kan teste animasjonen din med Play-knappen:
Den neste tingen vi bør oppnå, er å sette video. Vi vil legge til video på Flash-siden som selve videoen handler om Flash Catalyst og Flash Player. For å gjøre dette, velg vår Flash-side. Deretter går du til Arkiv> Import> Video / lydfil. Velg den nedlastede Adobe.flv-filen fra kilde-zip-koblingen øverst i opplæringen.
Den neste tingen vi trenger er å tilordne filen til Flash-gruppen. Bare velg Video Player fra Layout Panel, hold venstre museknapp og dra den Video Player til Flash gruppelaget til den ekspanderer og sett den inn i den. Etter å ha gjort dette bør du se følgende:
La oss gjemme Flash-ikonet og -teksten, så det blir bare video. For å gjøre dette, klikk på øyekikonene på disse lagene, slik at de vil forsvinne (du kan også slette disse lagene, det er opp til deg - velg bare disse lagene og klikk på Papirkurv-ikonet nederst til høyre i lagpanelet).
Den neste tingen å gjøre er å endre størrelsen på videoen slik at den passer inn i rektangelet. Velg "Video Player" -laget og musen over det øverste venstre hjørnet av videoen, slik at du kan se to piler i forskjellige retninger (musen skal være over det hvite torget). Hold venstre museknapp og begynn å dra. Du vil også merke at det er andre hvite firkanter og det blå firkanten i midten. På samme måte dra dem slik at du plasserer videoen sentralt (hvis du vil dra videoen selv, ikke hjørnene sine, pek musen i midten av videoen og dra).
La oss gå til Egenskapspanelet og utforske hva som tilbys.
Først og fremst ser vi videoens posisjon på scenen, dens bredde og høyde. Hvis du vil justere dem som jeg har satt inn følgende alternativer: X - 179, Y - 89, Bredde (W) - 281, Høyde (H) - 154. Da vil du legge merke til at vi allerede har videokontrollene Egenskaper Panel tilbyr oss to forhåndsdefinerte Video Controls (Wireframe og Standard), men vi vil legge til våre egne knapper for å kontrollere videoen, så sett den til None.
For skala modus har jeg også valgt å sette "None". Foruten Ingen kan vi angi Skalemodus til Stretch, Letterbox eller Zoom - her kan du eksperimentere og sette det beste som passer deg. Hvis du vil forhåndsvise hvordan det ser ut, sjekk "Auto Play" -alternativet (husk at når du er ferdig med å eksperimentere, fjern avmerkingen for alternativet Auto Play).
Foruten Auto Play har vi alternativet "Loop" og "Muted". Vi trenger ikke å Loop Video, så la den være ukontrollert, og vi vil også høre lyd, så det Muted-alternativet må også være ukontrollert..
La oss nå gå til undermenyen Komponent og Utseende. Pass på at alternativet "Godtar Mus Event" er merket (hvis det ikke er merket, kan vi ikke sette våre egne knapper til Videoen). Alternativet "Tooltip" lar oss skrive beskrivelsen av videoen og når brukeren mister over den, vil han eller hun se beskrivelsen.
"Volume", tror jeg, er klart., /
I utseende-alternativet kan du angi en bestemt "Blend Mode", og du kan også sjekke "Hand cursor" -alternativet slik at når brukeren svinger over videoen, vil musepilen bli til håndpekeren.
Nå er det på tide å sette kontrollknappene til videoen vår. Når du har valgt Flash-laggruppen, går du til Filen> Importer> Bilde og import Play.png. Gjør det samme for Stop.png. Konverter dem til knapper og legg under videoen (det er alltid en god praksis å endre navn på dem). Du kan også bruke noen effekter på dem, men det er ikke nødvendig. Jeg har satt Opacity in Up-tilstanden for dem til 75 (hvis du ikke vet hvordan du gjør dette, må du se min første opplæring på Flash Catalyst hvor vi diskutere slike ting).
... og situasjonen i lagspanelet bør være slik:
Nå for den enkleste delen så langt - gå til Interaksjonspanel, velg Play-knappen og i Interaksjonspanelet velger du følgende alternativer: First - On Klikk, Second - Play Video, tredje - velg vår "Adobe1.flv" Video, fjerde - bare når i flash side:
Gjør det samme for Stop-knappen, men i stedet for "Play Video", sett det til "Stopp video".
Nå som vi har satt kontrollene til videoen vår, la oss teste den - trykk Ctrl + Enter eller gå til filen> Kjør prosjekt.
Det siste vi må gjøre er å bruke lyd på knappene våre. Først og fremst, la oss importere lyden. Gå til Arkiv> Importer> Video / lydfil og naviger til din installerte Flash Catalyst-rotasjonsmappe. Der velger du "Lydeffekter / Flash Beep.mp3". Selvfølgelig kan vi bruke våre egne lyder, men jeg ville vise deg at Flash Catalyst har en forhåndsinstallert lydpakke. Velg noe som passer deg. Når det er importert, kan du forhåndsvise det - gå til Bibliotekspanelet og der i bunnen naviger til undermappen Media og velg "Flash Beep.mp3" - du vil legge merke til at i toppvinduet har Play-knappen vist. Hvis du klikker på det, hører du knappens lyd:
Merk: Her finner du også alle våre grafiske filer, media og komponenter.
La oss ferdigstille prosjektet vårt og legge til lyd på knappene under deres over-stater. For å gjøre dette, velg en av knappene i "Lag" -panelet, gå til over-tilstanden. I "Timelines" -panelet med ikonet på scenen som er valgt, klikker du på "+ Add Action" -knappen og velger Sound Effect:
Fra dialogboksen velg "Flash Beep" og klikk OK:
Situasjonen på tidslinjen bør være som følger:
Gjenta dette trinnet til Flash- og Photoshop-ikonene, og du er ferdig. Kjør prosjektet!
Nå vet du ikke bare hvordan du konverterer kunstverket til komponenter, men hvordan du legger til jevn interaksjon mellom sider, bruker forskjellige varianter av animasjon, bruker video og lyd i prosjektene dine og kontroller dem. Flash Catalyst er et fantastisk program, og nå kan du enkelt uten å skrive en enkelt kodekode få kunstverket ditt til liv.
Jeg håper du har likt å følge dette prosjektet og lære å bruke Flash Catalyst. Øv og du vil oppnå gode resultater! Takk også for å lese opplæringen min :)
Accentsconagua