Create en Flimring Neon Light Effect bruker Flash og Fireworks CS4
Del
Del
Del
Share < .no> Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Det er en altfor velkjent tvang blant digitale designere til å identifisere seg med sine verktøy av valget. Dette er uheldig fordi, når det kommer til Flash, ett verktøy som alltid oversett er Fireworks CS4.
I denne opplæringen, vil du oppdage hvordan Fireworks CS4 kan brukes til å få fart på arbeidsflyten i Flash og, på samme tid, hjelpe et neonskilt plassert på veggen av en løpe ned teater i Los Angeles flimmer fortapt på en ganske travel gate.
Trinn 1: Åpne Fireworks CS4
Åpne MusicHall.jpg Velg Zoom Tool og zoome inn på ordene i skiltet. Alternativt kan du velge 150% fra forstørrelse pop up vindu nederst i høyre hjørne av lerretet. Klikk på Stroke farge chip i Verktøy-panelet for å åpne fargevelgeren. Velg FF3300 plakater (en oransje), og trykk deretter Enter /Return for å godta valget. Sett fyllfarge til Ingen. Dette vil sette farge på bokstavene som vi trekker dem. Selv om røret synes å være en grå farge, mistenker selve lyset var, på en gang, red. Klikk og hold på Pen Tool. Velg Vector Baneverktøyet fra lokalgardinlisten. Hvis du velger dette verktøyet kan du behandle pennen som et brush.Though dette verktøyet er mer egnet for de av dere som bruker penner og tabletter, lar dette prosjektet de av oss som tegner med mus har det litt gøy også. I Eiendom Inspector sette Brush Width til 4 piksler og velger Soft Avrundet Velg lette lag, og ved hjelp av verktøyet, spore bokstaven "M". Når du er ferdig vil det være et nytt underlag som heter Bane Hvis banen ser ut som det kunne bruke en "Tweak", bytte over til den subselection verktøyet, Hollow pilen i verktøypanelet, og klikk på formen. Du vil se vektorene. Klikk på et ankerpunkt for å avsløre håndtakene og gjøre "tweaks". For å fjerne et punkt velge den med subselection verktøyet og trykker på slettetasten. Hvis du vil endre et hjørnepunkt til et avrundet spiss, bytte over til pennverktøyet, og klikk på punktet for å legge den savnede håndtaket. Hvis du ender opp med poeng som ikke har håndtak, velger du Pen Tool og klikk /dra punktet. Fyrverkeri har en stygg vane å alltid ønsker å stenge veien for deg. Bare dobbeltklikk på endepunktet av banen for å fjerne linjen. Hvis du vil slette et punkt på banen, velg den med subselect verktøyet og trykker på slettetasten Gjenta trinn 4 til 7 for de resterende bokstavene i skilt. Når du er ferdig, velger du Fil > Lagre som. Dialogboksen Lagre åpnes. Gi filen navnet - jeg brukte "Musichall" - og velger FireworksPNG Som jeg påpekte i starten av denne opplæringen, har en tendens Fireworks CS4 å anse av designere som Photoshop er "familiemedlem Vi foretrekker ikke å diskutere ". Som du er i ferd med å oppdage, kan kanskje litt mer prat om Fireworks CS4 bli kalt for. La oss komme i gang Launch Flash CS4 og opprette et nytt, Flash Actionscript 3.0 dokument Velg Fil > Import > Importer til bibliotek og naviger til mappen der du lagret .png bilde. Velg bilde og klikk på Importer til bibliotek Button. Dette vil åpne Import Fyrverkeri dialogboksen Dokument. Hvorfor Library? Det er allment ansett for å være en beste praksis for å importere alt til biblioteket. Faktisk blir noe importeres til Stage fast i biblioteket uansett, så spar deg selv et skritt Når Importer Fyrverkeri Document dialogboksen åpnes klikk på OK . Hvis du aldri har sett denne dialogboksen før, la oss gå gjennom den. Åpne Flash Bibliotek og åpne Fyrverkeri Objects > MusicHall.png > Page 1. Dobbeltklikk på side 1 MovieClip å åpne den i Symbol Editor. Når du ser på MovieClip du vil oppdage hvorfor Fireworks CS4 kan gjøre livet ditt enklere. Hver av bokstavene er på den eget lag i MovieClip. MusicHall.png Bokstavene er viktig, og de må ha en rekke filtre som brukes på dem for å skape den effekt. Dessuten vil den bli kontrollert av flimring Action 3,0. Dette forteller deg at bokstavene, i sin nåværende form, vil ikke fungere. De må ligge i en MovieClip fordi filtre kan bare brukes på tekst eller movieclips. Slik gjør du: Velg den lette lag, ikke mappen, i Lette mappe på tidslinjen og skjær dem Lim bokstavene på utklippstavlen inn i en ny MovieClip heter Letters Tilbake Side 1 MovieClip, slette Lette lag, legge et nytt lag, og dra Lette MovieClip til det nye laget. Klikk en gang på MovieClip på scenen og dra den på plass. Bruk piltastene for bedre kontroll. (Bilde 13) Lagre filen til mappen der du lagret importerte bildet Bruk verdiene som er vist i figuren for å legge en Bevel Filter til MovieClip. Dette skaper grunnlaget for effekten ved å gi bokstavene et 3D-utseende og legge litt av et høydepunkt langs kantene Bruk verdiene som er vist i figur å legge til en Gradient Glow filter til MovieClip .. Ved å sette Glow X Hotell og Glow Y Nå bruker de verdiene som er vist i figuren for å legge en Glow Filter til MovieClip .. De forrige to trinn skapte slangen, legger dette trinnet lyset. Pass på at fargen på skinnet - FFCC00 Anmeldelser - matche fargen på bokstavene lagt i Fyrverkeri En mer filter; bruke verdiene vist i figuren for å legge en Drop Shadow filter til MovieClip .. Fargen for drop Shadow er ikke svart, men #CCCCCC Med MovieClip valgt på scenen, gir det den Instance navnet "sign" i Property Inspector. Dette setter nå opp MovieClip for Actionscript som vil styre flimring av neon-rør. Opprette den typiske flimmer av et neonskilt er ikke noe som kan gjøres på tidslinjen. I dette tilfellet vil den gløden flimrer på en måte som simulerer et neonskilt som er på sitt siste bein. For å legge til flimmer, gjør du følgende Legg et nytt lag som heter handlinger Velg den første rammen i handlinger lag og velg Window >. Handlinger eller trykk på F9 (PC) eller Tilvalg F9 (Mac) til å åpne Script ruten Fyll inn følgende kode: Hvis du er ny på Action la oss gå gjennom denne kodeblokken Vi vet at Glow filter er den som brukes til å gi flimmer.. For å gjøre dette må du først laste i filtre klassen. At * kalles et wild card og forteller Flash for å laste på hele filtre klassen. Hvis du bare ønsket å bruke ett filter du vil bruke hverken filter navn i stedet. I dette tilfellet har vi fire filtre i MovieClip så et wildcard er den beste veien å gå. Den neste linjen er hvor flimringen er som skjer. La oss forstå noe: Action er ganske dum. Det vil ikke gjøre noe med mindre det hører noe. I dette tilfellet er vi fortelle Actionscript for å lytte etter en ENTER_FRAME hendelse, og når den hører at hendelsen til å utføre noe som kalles flickerIt. Du kan utlede fra dette Flash-filmen er en ramme sløyfe, og når avspillingshodet kommer inn i rammen etter å gjøre det som må gjøres, det gjør det hele igjen. Funksjonen er der magien skjer og flimring er opprettet. Den første linjen griper navnene på alle filtrene som har blitt brukt på skiltet MovieClip og setter dem i en liste. Når Action oppretter en liste - som kalles en Array - den ikke bruker navnene på filtrene. I stedet setter dem i numerisk rekkefølge, begrepet er indeksert orden neste linje gir GlowFilter variabelen navnet "glow" ved å fortelle Actionscript for å gå inn i listen og bruke indeksen elementet merket 2 Nå som Action vet hva filter til bruk, skaper vi flimringen ved å "spille" med styrke Verdien for styrken eiendom -.. Math.random () * 5 + .35- kan slå deg som å være litt mystisk. Det er virkelig ikke. tilfeldig () Den resulterende gløden ville ha en styrke verdi 83% hvis vi skulle angi verdien direkte inn i filteret. Hver gang spillehodet kommer inn i rammen lysstyrken på lyset vil øke eller reduseres avhengig av at tilfeldig nummer Lukk Script ruten og klikk på Scene 1-knappen for å gå tilbake til hovedtidslinjen Dra Side 1 movielcip til scenen og velg Modify > Dokument. Når dialogboksen Dokumentegenskaper åpnes, klikker du på Innhold radioknappen. Nå lagre og teste filmen La oss gjøre dette hele greia litt mer realistisk og legge summingen av et neonskilt i bakgrunnen. Kopier Buzz.mp3 filen fra nedlasting til samme mappe som FLA Klikk én gang etter første linje med kode, trykker du på retur /Enter-tasten og legge til følgende kode blokken: Igjen, hvis du er ny på Action la oss gå gjennom denne kodeblokken sammen Det er en gitt innenfor Flash samfunnet at å legge lyd til tidslinjen er en "Evil Practice. ". Dette betyr at vi trenger å ringe lydfil i filmen ved hjelp av Actionscript. Den første linjen med kode starter denne prosessen ved å lage en lyd Object navnet lyd Igjen, vi vet Flash er dum, så vi trenger å fortelle det som lydfil vil bli brukt. Dette oppnås gjennom URLRequest Nå som Flash vet hvilken fil å spille, vil det bare stå der og ser på deg med en dum glise på ansiktet sitt med mindre du ber den om å mate som lydfil i Flash-spilleren ved hjelp av load () Du kan nå lagre og teste filmen I denne opplæringen har du utforsket arbeidsflyten mellom Fireworks CS4 og Flash CS4. Du har oppdaget hvordan du bruker noen av tegneverktøy i Fireworks samt hvordan lagdeling gjøres i Fireworks. Du har også importert en Fyrverkeri .png dokument i Flash og lært at Fyrverkeri .png dokumenter legge en MovieClip inn i Flash Biblioteket. Du åpnet Fyrverkeri MovieClip, og med et par filtre og en dash av Actionscript, skapte en blinkende neonskilt med en medfølgende neon buzz lyd. Takk for å lese sammen, gjerne legge inn kommentarer og spørsmål nedenfor :)
fil i Fireworks CS4. Planen er å trekke ut hver bokstav i ordene "Music" og "Hall" ved hjelp av vektorer produsert av fyrverkeri
Trinn 2:. Zoom inn på Letters
Trinn 3: Velg en Stroke Color
Trinn 4: Velg Vector Sti Tool
Trinn 5: bane Innstillinger
børsten fra Basic kategori i Brush Skriv
pop gardinmenyen. Sett Precision
verdien til 2
. Presisjon er hvor tett vektorene er trukket. Jo høyere tall (maksimumsverdien være 10) jo mer vektor noder vil det være i tråd
Trinn 6: Begynn Tracing
. Dobbeltklikk på "Path" lagnavn og endre den til "M"
Trinn 7:. Tweak Bane
Tips:
Trinn 8:. Fullfør opp ordene
Trinn 9: Lagre filen
fra lokal ned (* png.). Dette vil gi deg et flerlags dokument med åpenhet for hvert lag. Klikk på Lagre-knappen og avslutte fyrverkeri.
Fra Fireworks CS4 til Flash CS4
Trinn 10:. Nytt dokument
Trinn 11:. Import fyrverkeri CS4 Document
Trinn 12:. Dialogboksen Importer
Sjekk Box, glatter du bildet og mister lag som inneholder bokstavene du nøye trakk i Fireworks. Tydeligvis ... ikke en god beslutning.
Objekter området kan du bestemme hvor objektene i bildet -. I dette tilfellet bokstavene - vil bli brakt inn i Flash. Bokstavene er vektorer, og uavhengig av ditt valg, vil de komme i Flash som fullt redigerbare vektorer.
så hvis det er noen skrivefeil, jeg kan fikse dem i Flash
Trinn 13:. Dine Fyrverkeri Objekt
grafisk symbol i biblioteket er strengt en plassholder, og vi vil ikke bruke det. Hvis du klikker på hver bokstav med Flash er Subselection verktøyet vil du se at hver og en er et vektorbasert tegning Object betyr at du kan gjøre videre "tweaks" hvis det er nødvendig. Hva du ikke ønsker å gjøre er å slette Bitmap 3
bilde i Fyrverkeri Objekter
mappe. Det er den som inneholder bakgrunnsbildet.
Klarlette for Neon Effect
Trinn 14:. Skjær Bokstaver Layers
Trinn 15 : Lim
Trinn 16:. Nytt lag
Trinn 17. Spar
Legge til Neon Effect til MovieClip
< p> En ting jeg prøver å slå inn i hodene til elevene mine er at "kunsten Flash er kunsten subtilitet". Vær oppmerksom på hvordan ting fungerer i den virkelige verden, og du vil se dette i aksjon. Opprette en neon effekt innebærer mye mer enn bare slapping en glød på bokstavene. Det er litt mer enn når det gjelder å skape en realistisk virkning. La oss komme i gang
Trinn 18:. Bevel Filter
Trinn 19:. Gradient Glow Filter
verdier til 0, neon tube blir mer definert.
Trinn 20 : Glow Filter
Trinn 21:. Drop Shadow Filter
. Dette gir en illusjon av en bit av belysning - som forklarer de to-piksel Blur verdier - bak lyset
Trinn 22:. Instance Name
Legge Action å lage en tilfeldig Flimring Effect.
Trinn 23:. Nytt lag
til MovieClip tidslinje. Lås laget
Trinn 24: Handlinger
Trinn 25:. Action
import flash.filters . *; addEventListener (Event.ENTER_FRAME, flickerIt), funksjon flickerIt (evt: Hendelses): void {var filtre: Array = sign.filters; Var glød: GlowFilter = filtre [2]; glow.strength = Math.random () * 5 + 0,35.; sign.filters = filtre; };
, etter den rekkefølgen de ble lagt. Hvis du kunne se en liste, ville de fire filtre se slik ut:. 0,1,2,3
ikke Bevel, GradientGlow, Glow, Dropshadow
i denne listen.
eiendommen av GlowFilter
metoden i Math
klasse plukker et tall mellom 0 og 1. Når det tallet er plukket, er det delt i to og deretter økte med 0,35. Dette betyr at hver gang hodet kommer inn i første rammen den oransje fargen vil være en annen styrke. La oss anta at antall tilfeldig plukket er 0,95. Beregningen vil være:
0,95 x 0,5 = 0,475
0,475 + 0,35 = 0,825
Trinn 26:. Gå tilbake til hovedtidslinjen
Trinn 27:. Place on Stage
Bonus Round. Seal the Deal med Audio
Trinn 28: Buzz.mp3
Trinn 29:. Handlinger
< p> Åpne siden en MovieClip, velg det første bildet i handlingene laget og åpne skriptet ruten
Trinn 30:. Action
Var lyd: Sound = new Sound (); Var req: URLRequest = new URLRequest ("Buzz.mp3"); audio.load (req); audio.play ();
. Dette objektet vil bli brukt senere for å faktisk spille lydfilen.
objekt som heter req
. Parameteren er navnet på filen vi skal bruke. Sørg for at sitatene er der og at navnet tilsvarer filnavnet presist. Hvis du skal somwhere annet på nettstedet ditt for å ta tak i lydfilen du vil angi en absolutt adresse for filen.
metoden i Sound klassen. Til slutt må du fortelle Flash for å faktisk spille av lyden
Konklusjon:.!