Flash Tips og Best Practices for Designers: Symboler &Tekst
Del
Del
to
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
For de fleste nybegynnere, begrepet symboler i Flash kan være ganske forvirrende. Jeg har kjent nok designere som - selv etter å ha jobbet med Flash i år - er ganske clueless om den beste måten å bruke symboler i sitt arbeid. La oss ta en nærmere titt på symboler og tekst.
Velkommen til den andre delen av vår Flash Tips og Best Practices serien for designere. I den første delen har vi sett på tegningen, som vanligvis er den første man ville takle når du starter med Flash. Når du har mestret opprettelse verktøy selv, tar det ikke for lang tid å innse at formene av seg selv er ganske ubrukelig. Jada, kan du bruke farger og slag og manipulere dem slik du vil, men du er sannsynligvis i det å gjøre ting flytte. Og den beste måten å starte med det er å konvertere figurene til symboler.
Et annet viktig aspekt av design i Flash som vi vil dekke i dag, er tekst. Gjennom årene har Flash evne til å skape og gjengi teksten tatt noen ganske store sprang. Jeg husker de dagene da det var ingen "anti-alias for animasjon 'Stille og tanken på å ha blokker med tekst var intet mindre enn et mareritt. Det er alt borte nå, og med muligheten til å bruke filtre direkte på teksten, det er en mye mindre smertefull rutine nå. Likevel, det er mye man kan gjøre med teksten verktøy i Flash i dag. Vi skal se på noen slike triks.
Selv om dette innlegget ble skrevet for Flash Professional CS5, de fleste av tipsene skal fungere helt fint i eldre versjoner. Jeg vil prøve og gjøre det til en vane å markere hvor noe er svært spesifikke for den nyeste versjonen av Flash.
Velg dine Symboler
For det første, er det tre typer av symboler du kan lage i Flash: grafisk, knapp, og filmklipp. Selv om navnene bør være ganske selvforklarende, er det ikke alltid opplagt hva forskjellen er mellom de tre. Kan du bære med meg hvis dette høres for grunnleggende, men jeg vet at mange av Flash-designere som er ikke helt sikker på hva som er hva. Så her går:
Grafikk: Den mest grunnleggende type symbol i Flash, og sannsynligvis den mest ubrukelige. Du kan ikke ha en animasjon i en grafisk (vel, teknisk sett kan du, men Flash vil rett og slett ignorere det), og du kan virkelig ikke overdra mye i navnet til funksjonalitet til grafikk ved hjelp Actionscript. For meg er det bare ett trinn over bare gruppering elementer
Button. Som navnet antyder, er dette et interaktivt element. En knapp blir automatisk konvertert til et aktivt element - på at du kan klikke, som en kobling i en HTML-side. Hver knapp har tre stater - opp (eller normal), overand ned. Du kan tildele Action til-knappen for å gjøre det starte animasjonen, for eksempel
Movie Clip. Dette er uten tvil den mest brukte symbolet type i Flash, og med god grunn. Til å begynne med, kan du ha en animasjon i et filmklipp. Et eksempel på et filmklipp plassert på scenen vil animere uavhengig av hovedtidslinjen. Det er også den eneste symbol typen som du kan bruke overgangsmodi og filtre (mer om de i ett minutt)
. Merk: Du kan stille oppførselen til en forekomst av et symbol individuelt. Plasseres et filmklipp på scenen, men ikke ønsker det å animere? Bare velg forekomst og endre atferd i "Egenskaper" panel.
Blending Modes
overgangsmodi bringe en av de mest elskede funksjoner fra bilderedigeringsprogrammer til Flash er vektor arbeidsområde . Som Photoshop, Fireworks, Illustrator og andre, kan du endre hvordan elementer ser ved å overlappe dem og velge ulike åpenhet moduser. For eksempel kan det være lurt å mørkne en del av et objekt basert på hva som er på toppen av det, eller kanskje lysne det. En vanlig måte å bruke dette er når du har en importert raster logo image med en hvit bakgrunn som ønsker å vise gjennom. Bare endre blending mode til "Multipliser" i "Display" delen av panelet Egenskaper.
Merk at blandingsmodi kan bare brukes på filmklipp og knappe symboler. For mer om Blend Modes i Flash kassa dette screen
Case study:. Påfør lyseffekter til kjedelig flate teksturer
La oss si at du trenger en realistisk tre bakgrunn for design. Det er tonnevis av gratis teksturer tilgjengelig der ute, men en vanlig problem er at de alle har en tendens til å se flat. Nå hvis du prøver å gjenskape en tabletop, det må være noen skinn av en lyskilde fra en av sidene, ikke sant? La oss prøve og gjenskape den effekten i Flash bruker overgangsmodi.
- Tegn et rektangel på toppen av bildet, samsvarer med sin størrelse og x & y-koordinater. Bruk Primitive rektangelverktøyet her; en normal rektangel form vil alltid dukke opp bak bildet med mindre du tegner det på et nytt lag.
Fjern eventuelle slag fra rektangel og legge til en standard hvit-til-svart radial gradient fyll. Juster fyllet slik at det hvite sentrum er nær hjørnet du trenger lyskilden å være i, og de sorte kantene er nær diagonalt motsatt hjørne.
- Nå konvertere dette rektangel til et Movie Clip symbol og endre blending mode til "Overlay". Du må kanskje justere 'Alpha' litt for å få effekt akkurat.
Fargeeffekter
En av de første tingene man lærer om animasjon i Flash er hvordan å fade ting inn og ut. Og standard teknikk for å gjøre det på er å endre "Alpha" verdien av et symbol. Men det er mye mer til de andre elementene i denne rullegardinlisten, sammen kjent som fargeeffekter.
Selv om Alpha høres ut som den beste måten å falme ting inn og ut, er det ikke alltid det mest hensiktsmessige alternativet. For eksempel, hvis symbol er en tegning med en haug med overlappende former, reduserer Alpha gjennomsiktigheten av hver figur individuelt som bringer opp gjenstander i de halvgjennomsiktige stater. I slike tilfeller, hvis kunstverket er på en hvit bakgrunn, endre lysstyrken verdier fungerer mye bedre å få fade effekt. Hvis bakgrunnen er en annen flat farge, kan du også bruke Tint og fylle kunstverk med bakgrunnsfargen. Dessverre, hvis bakgrunnen er en gradient, mønster eller noe annet, er det eneste alternativet for å gå inn i symbolet, bryte fra hverandre alle former og grupper, og bringe dem på et enkelt lag å gjøre et objekt.
Merk at i motsetning Blending Modes, kan fargeeffekter brukes på alle symbol - filmklipp, knapper og grafikk
Case Study:. Opprett flere fargede knappene fra ett symbol
Når utforme grensesnitt i Photoshop eller Fireworks, en teknikk jeg bruker veldig ofte er å opprette en base grensesnitt element - som en knapp - og lage fargevarianter av det ved hjelp av Hue-metning filtre. Nylig har jeg funnet ut en måte å gjøre noe lignende i Flash. Ideen er å skape en eneste nøytral symbol og deretter bruke Avanserte fargeeffekter for å lage varianter av det.
Til å begynne med, skape et symbol med uansett gradienter, høydepunkter, skygger og overlegg du ønsker. Du kan gjøre det i hvilken som helst farge, men jeg har en tendens til å foretrekke å bruke bare gråtoner. Så resultatet er en knapp som er like matt, plast eller stilen du ønsker, men i grått. Deretter plasserer et par tilfeller av symbolet på scenen. Deretter velger du bare et eksempel, gjelder "Avansert" fargeeffekt og begynne å spille rundt med RGB fargeverdier. Hvis du sliter med å få det riktig, er en måte å velge Fargetone, velge den fargen du trenger, og deretter gå til Avansert-panelet for å justere den til din tilfredshet. Skyll og gjenta for de andre symbolene.
Filter
For en veldig lang tid, ble Flash designere stuck med strengt vektor etableringen verktøy i Flash. Myke skygger og bevegelsesuskarpheter var ting du hacket sammen ved hjelp av vanskelige stigninger eller rasterbilder importert fra Photoshop. Så kom de Filters i Flash 8 og alt forandret. I dag er nesten alle snerten effekt mulig rett på innsiden Flash med en anstendig mengde kontroll over alle aspekter av filteret. La oss se på noen måter du kan bruke filtre for å legge til noen jazz til din design.
Sving boks skygger
Jada, det er skygger for når du ønsker et element for å skille seg ut fra bakgrunnen eller bare skille den fra alt annet rundt det. Men for anledninger når en enkel skygge er bare ikke nok, kan du leke deg med fallet-off litt å legge litt ekstra stil. En måte å gjøre dette på, er å lage en kopi av form og justere den rundt for å få krumn du trenger. Deretter konvertere den til et symbol, legge til en 100% svart fargetone fargeeffekt og en Gaussian Blur. Så bare justere alfa verdi for å få intensiteten du trenger fra skyggen. Sjekk ut et par eksempler nedenfor.
Husk å sette kvaliteten til "High" når du bruker et filter. Effekten er mye bedre. Det slår meg helt hvorfor 'Low' er satt som standard kvalitetsinnstilling. Jeg har brukt filtre i alvorlig komplekse animasjoner og innvirkningen på ytelsen er knapt merkbar.
Høytrykk
Når det gjelder store teksten, er den letter effekten ganske populær. Med muligheten til å legge til flere filtre av samme type (noe enda Photoshop ikke har ennå), er ganske enkelt å oppnå i Flash den letter effekt. Alt du trenger å gjøre er å legge til to drop-shadow filtre - en med en hvit 1px skygge på 90 grader og en svart på 270 grader. Sjekk ut bildet nedenfor for alle detaljer
9-Slice Skalering
En annen funksjon som ble innført i Flash 8 er 9-slice skalering -. Evnen til å skalere et objekt uten at det påvirker visse deler av det. Det beste eksemplet hvor dette fungerer er avrundede rektangler. Hvis du har alle prøvd å lage avrundede rektangler og deretter skalere dem, vet du hvordan hjørnene tendens til å gå ut av formen hvis skaleringen ikke er forholdsmessig. 9-slice skalering løser det problemet. La oss se hvordan
- Hvis du vil konvertere et avsnitt til en enkelt linje, klikker du hvor som helst i tekstblokken og dobbeltklikk på hul firkantet håndtak øverst til høyre i utvalget.
< li> Hvis du vil konvertere en eneste linje i et avsnitt, bare dra noen av de fire markeringshåndtakene.
En hul firkant øverst til høyre indikerer at den valgte blokken er et avsnitt, mens en tom sirkel representerer en enkelt . linje
En tekstblokk kan være av tre typer:
Statisk:. En statisk blokk med tekst som er hardkodet i FLA og ingenting mer
< li> Dynamisk: Hvis du trenger å erstatte innholdet i en tekstblokk på fly under kjøring, er dette en vei å gå
Input. Navnet sier alt, egentlig. Bruk denne for når du trenger at brukeren taster inn tekst - som i skjemaer, etc.
Hvis du trenger å legge ned en skrift i Flash-filen og teksten skal være enkle alfabeter , tall og hverdags punctuations, velg 'Basic latinske "i dialogboksen Bygg. Det er en god sjanse du ikke trenger noe annet fra denne skriften.
- Filtre kan brukes direkte på en blokk med tekst i Flash. Du trenger ikke å konvertere den til et filmklipp som med alt annet. Gå videre og gå gale med disse 1 pixel tekstskygge, allerede!
Konklusjon
Og det er hvordan du gjør symboler og tekst i Flash. Selvfølgelig, det er et tonn mer til disse enn vi har dekket, men forsøket var å prøve og samle noen av de beste tips og beste praksis når du arbeider med symboler og tekst. Ta gjerne legge til dine egne tips og snarveier i kommentarfeltet. Eller utfordre noe jeg har sagt. Jeg skal være den første til å erkjenne at jeg ikke vet alt som er å vite om Flash, så noe nytt eller annerledes er alltid velkommen.
Neste gang vil vi komme inn på kjernefunksjonalitet og unique selling point av Flash: animasjon. Følg med! Anmeldelser
Next Page:Industry News: Uke 24 2011
Tegn formen du ønsker og åpne ". Konvertere til symbol " dialog.
Velg filmklipp i Type-rullegardinlisten. 9-slice skalering kan kun brukes på et filmklipp symbol
Klikk på "Avansert" linken nederst til venstre i dialogboksen og sjekk ". Aktiver guider for 9-slice skalering ".
Nå dobbeltklikker på symbolet for å redigere den.
Du skal se to vertikale og to horisontale stiplede linjer på toppen av formen. Flytte disse utover slik at de er rett innenfor kurvene på alle fire hjørner.
Slik fungerer det. Jeg har merket hver av de 9 seksjoner vi nå har, fordelt på de stiplede linjene. Når du går tilbake til scenen og skalere objektet - forholdsmessig eller på annen måte - A, C, E & G vil ikke skalere det hele tatt. De vil beholde sin form og størrelse. B & F vil bare skalere horisontalt, mens D &H vil bare skalere vertikalt. På denne måten, uansett hva du gjør, beholder avrundet rektangel kjernen personlighet. Denne teknikken kan gjøre underverker når du trenger en haug med lignende elementer på ulike størrelser -. Som knapper, popups eller snakkebobler
Legg merke til at 9-slice skalering ikke vil fungere i alle sammenhenger. Hvis grafikken har komplekse former eller svært runde hjørner med buede refleksjoner, eller til og med mønster fyller kan skalering ikke være konsekvent.
Tekst
Hvis det var en klage om Flash som overmannet alt annet i det siste, det var måten Flash håndtert tekst. I eldre versjoner, spesielt før Adobe overtakelsen, tekst rendering i Flash sugd, for å si det pent. Så mye at det hadde avvist en hel hytte industrien piksel skrifter som ble designet for å omgå Flash manglende evne til å gjengi liten tekst jevnt. Heldigvis, med tillegg av 'anti-alias for lesbarhet' ting ble mye mye mer utholdelig. Den ene tipset jeg gi noen jeg som har hatt noe å gjøre med Flash er å unngå alt annet enn 'anti-alias for lesbarhet "som pesten. Faktisk vet jeg ikke engang vet hvorfor de har den muligheten noe mer siden tekst-gjengivelse i spilleren er nå optimalisert nok til jevnt gjengi 'lesbar' tekst i enhver situasjon.
En veldig ny og potensielt bakken -breaking fenomen er Text Layout Framework (eller TLF), Adobes høyt nivå API for den nye Flash Tekst Engine som ble innført i Flash Player 10. Fra og med CS5-versjonen, har du valget mellom å lage noen tekstblokk være "Classic tekst eller TLF tekst '. Jeg vet, som om det allerede var ikke for mange valg å gjøre, ikke sant !? Vel, selv om TLF er helt klart fremtiden for tekst i Flash, er det ikke kompatibel med eldre versjoner av Flash Player eller med AS2 og under. Så hvis du ønsker bakoverkompatibilitet, er Classic Text det beste alternativet.
TLF legger i utgangspunktet en båtlast med funksjoner til gode gamle tekst i Flash. Ønsker å opprettholde stram kontroll over de ledende og sporing i teksten din? Trenger vertikal orientering for teksten? Hva med flere kolonner? Pokker, du trenger bare teksten skal vises pent i en indisk språk (eller de fleste ikke-latinske skript, for den saks skyld)? TLF er svaret. Det er altfor mange alternativer for å finpusse hvordan en blokk med TLF teksten gjengir, langt mer enn hva vi kan dekke her. Jeg vil si gå videre og spille rundt med den litt. Bare husk at dette ikke har vært rundt lenge - verken i forfatterverktøy eller spilleren -. Og det er bundet til å være noen problemer med slik det fungerer i øyeblikket
Nyttige tips
< p> Her er noen raske tips og foreslåtte beste praksis for å gjøre det beste bruk av tekst verktøyene i Flash:
De hurtigtaster for fet og kursiv i Flash er annerledes enn de fleste andre programmer - Ctrl + Shift + B er for fet, og Ctrl + Shift + jeg er for kursiv.
Med tekstverktøyet er valgt, klikk en gang på scenen for å skape en eneste linje tekstfeltet. Klikk og dra for å opprette et avsnitt.
- Hvis du vil konvertere et avsnitt til en enkelt linje, klikker du hvor som helst i tekstblokken og dobbeltklikk på hul firkantet håndtak øverst til høyre i utvalget.
Importer tekstur på scenen og plassere den ved behov.