Share
Det er en altfor kjent tvang blant digitale designere å identifisere med deres valgfrie verktøy. Dette er uheldig fordi, når det gjelder Flash, er et verktøy som alltid overses, Fireworks CS4.
I denne opplæringen vil du oppdage hvordan Fireworks CS4 kan brukes til å øke hastigheten på arbeidsflyten din i Flash, samtidig som du hjelper et neonskilt som befinner seg på veggen til et nedslått teater i Los Angeles, som fortløper på en ganske opptatt gate.
Åpne MusicHall.jpg filen i Fireworks CS4. Planen er å tegne ut hvert brev i ordene "Musikk" og "Hall" ved hjelp av vektorer produsert av fyrverkeri.
Velg Zoomverktøyet og zoome inn på ordene i tegnet. Alternativt kan du velge 150% fra forstørrelsesvinduet i nederste høyre hjørne av lærredet.
Klikk på Stroke-fargebrikken i Verktøy-panelet for å åpne Color Picker. Å velge FF3300 (en oransje), og trykk deretter Enter / Return for å godta ditt valg. Sett fyllfarge til Ingen. Dette vil sette fargen på bokstavene når vi tegner dem. Selv om slangen ser ut til å være en grå farge, mistenker jeg at det faktiske lyset var en gang rødt.
Klikk og hold på pennverktøyet. Velg Vector Path Tool fra popuplisten. Ved å velge dette verktøyet kan du behandle pennen som en pensel. Selv om dette verktøyet er mer egnet for de som bruker penner og tabletter, lar dette prosjektet de som av oss trekker med mus, også ha det gøy.
I eiendomsinspektøren stiller du børstebredden til 4 piksler og velger Myk rundet børste fra grunnleggende kategori i Pensel Type pop-up menyen. Sett Presisjon verdi til 2. Presisjon er hvor tett vektorene er tegnet. Jo høyere tallet (maksimumverdien er 10) desto flere vektornoder vil det være i linjen
Velg bokstavlaget, og bruk verktøyet ved å merke bokstaven "M". Når du er ferdig vil det bli et nytt underlag som heter Sti. Dobbeltklikk "Lag" lagnavnet og endre det til "M".
Hvis banen ser ut som den kan bruke en "Tweak", bytt til underseleksjonsverktøyet, Hollow-pilen i Verktøy-panelet, og klikk på formen. Du ser vektorer. Klikk på et ankerpunkt for å avsløre håndtakene og foreta "tweaks". For å fjerne et punkt, velg det med undervalgsverktøyet og trykk på Delete-tasten. For å bytte et hjørnepunkt til et avrundet punkt, bytt til Pen-verktøyet og klikk på punktet for å legge til det manglende håndtaket.
Hvis du kommer opp med punkter som ikke har håndtak, velger du Pen Tool og klikker / drar punktet. Fyrverkeri har en stygg vane som alltid vil lukke veien for deg. Dobbeltklikk sluttpunktet på banen for å fjerne linjen. Hvis du vil slette et punkt på banen, velger du det med Subselect-verktøyet og trykker på slettasten.
Gjenta trinn 4 til 7 for de resterende bokstavene i tegnet.
Når du er ferdig, velg Fil> Lagre som. Dialogboksen Lagre åpnes. Navngi filen - jeg brukte "MusicHall" - og velg FireworksPNG (*. Png) fra pop ned. Dette gir deg et flerlags-dokument med gjennomsiktighet for hvert lag. Klikk på Lagre-knappen og avslutt fyrverkeri.
Som jeg påpekte i begynnelsen av denne opplæringen, har Fireworks CS4 en tendens til å bli betraktet av designere som Photoshops "familiemedlem vi foretrekker å ikke diskutere". Som du er i ferd med å oppdage, kan det hende du kanskje trenger litt mer snakk om Fireworks CS4. La oss komme i gang.
Start Flash CS4 og opprett et nytt Flash ActionScript 3.0-dokument.
Velg Fil> Importer> Importer til bibliotek og naviger til mappen der du lagret .png-bildet. Velg bildet og klikk på knappen Importer til bibliotek. Dette åpner dialogboksen Import Fireworks Document. Hvorfor biblioteket? Det er allment vurdert å være en god praksis for å importere alt til biblioteket. Faktisk blir alt importert til scenen fast i biblioteket uansett, så spar deg selv et skritt.
Når dialogboksen Import Fireworks Document åpnes, klikker du OK. Hvis du aldri har sett denne dialogboksen før, la oss gå gjennom den.
Åpne Flash-biblioteket og åpne Fireworks Objects> MusicHall.png> Side 1. Dobbeltklikk på Page 1 movieclip for å åpne den i Symbol Editor.
Når du ser på filmklippet, vil du oppdage hvorfor Fireworks CS4 kan gjøre livet ditt lettere. Hver bokstav er på sitt eget lag i filmklippet. De MusicHall.png Grafisk symbol i biblioteket er strengt en plassholder, og vi vil ikke bruke det. Hvis du klikker på hvert brev med Flash's Subselection-verktøyet, ser du at hver er et vektorbasert tegneobjekt, noe som betyr at du kan gjøre ytterligere "tweaks" hvis nødvendig. Det du ikke vil gjøre er å slette Bitmap 3 bilde i Fyrverkeriobjekter mappe. Det er den som inneholder bakgrunnsbildet.
Bokstavene er viktige, og de må ha en rekke filtre påført dem for å skape effekten. Også den flimrende vil bli styrt av ActionScript 3.0. Dette forteller deg at bokstavene, i deres nåværende form, ikke vil fungere. De må være inneholdt i en filmklipp fordi filtre kun kan brukes på tekst eller filmklipp. Dette er hvordan:
Velg bokstavslagene, ikke mappen, i Lettering-mappen på tidslinjen, og klipp dem.
Lim inn bokstavene på utklippstavlen inn i en ny filmklip med navnet Letters.
Gå tilbake til Page 1 filmklipp, slett Lettering-laget, legg til et nytt lag og dra Brevfilmen til det nye laget.
Klikk en gang på movieclip på scenen og dra den på plass. Bruk piltastene for finere kontroll. (Bilde 13)
Lagre filen i mappen der du lagret det importerte bildet.
Én ting jeg prøver å slå inn i elevene til studentene mine er at "kunsten i Flash er kunsten til subtilitet". Vær oppmerksom på hvordan ting fungerer i den virkelige verden, og du vil se dette i aksjon. Å lage en neon-effekt innebærer mye mer enn å bare slappe en glød på bokstavene. Det er litt mer enn det når det gjelder å skape en realistisk effekt. La oss komme i gang.
Bruk verdiene som vises i figuren for å legge til en kommandofilter i filmklippet. Dette skaper grunnlaget for effekten ved å gi bokstavene et 3D-utseende og legge til et lite høydepunkt langs kantene.
Bruk verdiene som vises i figuren for å legge til et Gradient Glow-filter til filmklippet ... Ved å sette inn Glow X og Glød Y verdier til 0, blir neonrøret mer definert.
Bruk nå verdiene som vises i figuren for å legge til et glødfilter til filmklippet ... De to foregående trinnene opprettet slangen, dette trinnet legger til lyset. Pass på at fargen på gløden - FFCC00 - match fargen på bokstavene lagt til i fyrverkeri.
Et annet filter; bruk verdiene som vises i figuren for å legge til et Drop Shadow-filter til filmklippet ... Fargen for drop Shadow er ikke svart, men #CCCCCC. Dette gir en illusjon av litt belysning - noe som forklarer 2-pixel Blur-verdiene - bak lyset.
Med filmklippet valgt på scenen, gi det instansnavnet "skilt" i eiendomsinspektøren. Dette setter opp filmklippet for ActionScript som styrer blinkingen av neonrørene.
Å lage den typiske flimmer av et neonskilt er ikke noe som kan gjøres på tidslinjen. I dette tilfellet vil glødet flimre på en måte som simulerer et neonskilt som er på sine siste ben. Følg disse trinnene for å legge til flimmereffekten.
Legg til et nytt lag som heter handlinger til filmklippets tidslinje. Låse laget.
Velg den første rammen i handlingslaget og velg Vindu> Handlinger, eller trykk på F9 (PC) eller Option-F9 (Mac) -tastene for å åpne skriptpanelet..
Skriv inn følgende kode:
importer flash.filters. *; addEventListener (Event.ENTER_FRAME, flickerIt); funksjon flickerIt (evt: Event): void var filtre: Array = sign.filters; var glød: GlowFilter = filtre [2]; glow.strength = Math.random () *. 5 + .35; sign.filters = filtre; ;
Hvis du er ny i ActionScript, la oss gå gjennom denne kodeblokken.
Vi vet at Glow-filteret er det som pleide å gi flimmeren. For å gjøre dette må du først laste inn filterklassen. Det * kalles et vill kort og forteller at Flash skal lastes inn i hele filterklassen. Hvis du bare ønsket å bruke ett filter, ville du bruke filterets navn i stedet. I dette tilfellet har vi fire filtre i filmklippet, så et wildcard er den beste måten å gå.
Neste linje er hvordan flimmer skjer. La oss forstå klart noe: ActionScript er ganske dumt. Det vil ikke gjøre noe med mindre det hører noe. I dette tilfellet forteller vi ActionScript å lytte etter en ENTER_FRAME-hendelse, og når den hører den hendelsen for å utføre noe som heter flickerIt. Du kan utlede fra dette Flash-filmen er en ramme-sløyfe, og når avspillingshodet kommer inn i rammen etter å ha gjort det som må gjøres, gjør det alt igjen.
Funksjonen er hvor magien skjer og flimringen er opprettet.
Den første linjen tar navn på alle filtre som er brukt på tegnefilmklippet og legger dem inn i en liste. Når ActionScript oppretter en liste - kalt et array - det bruker ikke filtre. I stedet setter de dem i numerisk rekkefølge, ordet er indeksert rekkefølge, Følg rekkefølgen der de ble lagt til. Hvis du kunne se listen, ville de fire filtrene se slik ut: 0,1,2,3 ikke Bevel, GradientGlow, Glow, Dropshadow.
Neste linje gir GlowFilter variabelenavnet "glød" ved å fortelle ActionScript å gå inn i listen og bruke indeksen merket 2 i den listen.
Nå som ActionScript vet hvilket filter som skal brukes, lager vi flimmeren ved å "spille" med styrke egenskapen til GlowFilter.
Verdien for styrkeegenskapen - Math.random () *. 5 + .35- kan slå deg som en smule mystisk. Det er det egentlig ikke. De tilfeldig() metode av Matte klassen plukker et tall mellom 0 og 1. Når dette nummeret er plukket, er det delt inn i halvparten og deretter økt med .35. Dette betyr at hver gang spilleleddet går inn i den første rammen, vil den oransje fargen ha en annen styrke. La oss anta at antallet tilfeldig plukket er .95. Beregningen ville være:
Den resulterende gløden ville ha en styrkeverdi på 83% hvis vi skulle skrive inn verdien direkte inn i filteret. Hver gang stykkhodet kommer inn i rammen vil lysstyrken på lyset øke eller redusere avhengig av det tilfeldige tallet.
Lukk skriptruten og klikk på Scene 1-knappen for å gå tilbake til hoved tidslinjen.
Dra Page 1 movielcip til scenen og velg Endre> Dokument. Når dialogboksen Dokumentegenskaper åpnes, klikker du på Innhold-knappen. Lagre og test filmen nå.
La oss gjøre denne hele tingen litt mer realistisk og legge hummen til et neonskilt i bakgrunnen.
Kopier Buzz.mp3-filen fra nedlastingen til samme mappe som .fla.
Åpne siden 1 filmklipp, velg den første rammen i handlingslaget og åpne manuskriptfeltet.
Klikk en gang etter den første linjen med kode, trykk på Return / Enter-tasten og legg til følgende kodeblokk:
Accentsconagua
var lyd: lyd = nytt lyd (); var req: URLRequest = ny URLRequest ("Buzz.mp3"); audio.load (req); audio.play (); Igjen, hvis du er ny i ActionScript, la oss gå gjennom denne kodeblokken sammen.
Det er en gitt i Flash-fellesskapet at det å legge lyd til tidslinjen er en "ond praksis". Dette betyr at vi må ringe lydfilen i filmen ved hjelp av ActionScript. Den første koden starter denne prosessen ved å opprette et lydobjekt som heter lyd. Dette objektet blir brukt senere til å faktisk spille lydfilen.
Igjen, vi vet at Flash er dumt, så vi må fortelle det hvilken lydfil som skal brukes. Dette oppnås gjennom URLRequest objekt som heter req. Parameteren er navnet på filen vi skal bruke. Pass på at sitatene er der, og at navnet samsvarer med filnavnet nøyaktig. Hvis du drar noe annet sted på nettstedet ditt for å ta tak i lydfilen, vil du legge inn en absolutt adresse for filen.
Nå som Flash vet hvilken fil som skal spilles, vil den bare stå der og se på deg med et dumt grin på ansiktet med mindre du forteller det å mate den lydfilen inn i Flash-spilleren ved å bruke laste() metode for lydklassen. Til slutt må du fortelle at Flash faktisk spiller lyden.
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øyene i fyrverkeri, samt hvordan legging utføres i fyrverkeri. Du har også importert et Fireworks .png-dokument til Flash og lært at Fireworks .png-dokumenter legger til en filmklipp i Flash-biblioteket. Du åpnet Fireworks-filmklippet, og med noen få filtre og et dash av ActionScript, opprettet et blinkende neonskilt med en tilhørende neon buzz-lyd.
Takk for at du leser sammen, vær så snill å legge igjen kommentarer og spørsmål nedenfor :)
