Flash Tips og Best Practices for Designers: Tegning
to
Del
11
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Den første gangen jeg brukte Flash var rundt 13 år siden. Det var versjon 3 og Flash ble hyllet som den fancy nye vektorbasert animasjon verktøy som snart ville ta webdesign verden med storm. Gjennom årene har Flash vokst til en fullverdig rik applikasjonsutvikling verktøy, pakket til randen med Action godhet.
Hva mange mennesker synes å være glemt om, er hvor mye Flash er fortsatt en designer verktøy, la oss lage illustrasjoner og animasjoner gammeldags draw-and-move around måte.
publiseres Tutorial
Hver noen uker, vi besøker noen av våre lesernes favoritt innlegg fra hele stedets historie. Denne opplæringen ble først publisert i mai 2011.
La oss starte med hva stort sett alle ville starte med i Flash (eller noen design program for den saks skyld) - tegning. Det være seg tegning regelmessige former eller tracing linjene, er tegning en av de mest fundamentale handlinger i Flash. Hva gjør Flash unik skjønt, er måten den håndterer former. Den oppfører seg helt ulikt noe annet vektortegneverktøy der ute, og er enten elsket eller hatet av mange for det. Selvfølgelig, det er fordeler og ulemper med å segregere hver del av et objekt for uavhengige redaksjoner. La oss ta en titt på noen sære småting som Flash gjør og hvordan du bruker dem til vår fordel.
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.
Vanlig vs. Primitive Shapes
Vanligvis når du tegner en vanlig form (et rektangel eller en ellipse) i Flash, skaper det en lapp med de valgte fyll- og strek egenskaper. Du kan deretter velge fyll og /eller hjerneslag indidually og redigere sine eiendommer. I Flash CS3, Adobe innført det de kaller 'primitive' formverktøy. I motsetning til standard form verktøy, som skiller slag fra fyllingen, skaper disse en form som er valgbare og redigerbare som helhet.
Selv for veteran Flash designere dette kan være en irriterende endring, bringer den med seg en kontrollnivå var usett i Flash før denne versjonen. Du kan plutselig endre egenskapene til objektet numerisk gjennom eiendommene panel, legge avrundede hjørner, og konvertere sirkler til pies med desimaltegn nøyaktighet. Det er svært liten grunn til å gå tilbake til den tradisjonelle formen verktøyene når du har brukt de primitive, men mange designere jeg kjenner fortsette å jobbe på den gammeldagse måten. En del av problemet kan være Adobes hoderystende beslutning om å beholde de enkle figurer som standardverktøy, begrave de primitive inne i en dropdown i verktøylinjen
Case study:. Lag en nøyaktig kakediagram ved hjelp av primitive former
< p> La oss prøve å bruke de primitive former i et virkelig scenario der bruker de tradisjonelle formen verktøyene ville ha vist seg å være en øvelse i hår-trekking. Si at du ønsker å lage en nøyaktig kakediagram ved hjelp av reelle tall -. Markedsandeler for mobile operativsystemer i 2010, for eksempel
Når vi har prosenter (som legger opp til 100), vil vi multipliserer hver med 3,6 å sidestille dem med de totale 360 grader i en sirkel. Deretter er det en enkel sak å lime seks sirkler oppå hverandre og tildele den aktuelle start- og sluttvinkler for hver enkelt basert på våre beregninger. Se regnestykket i tabellen nedenfor, samt egenskaper for en av paier, for en bedre idé.
Fritt Transform figurer med mus
I sin natur, objekter i Flash er fritt redigeres i alle slags måter. Du kan velge en figurens fyll eller skissere, dra den rundt, og det vil påvirke alle andre figurer i dette området, så lenge de er på samme plan. Hva skjer når du velger og /eller dra et element selv, avhenger av hva du klikker på og hvor. La oss se på de ulike mulighetene:
Ved å klikke og dra en form som allerede er valgt vil bare flytte den dit du la muse gå
Ved å klikke og dra inne en figurens fyll. - selv om det ikke er valgt - vil merke og flytte den. Merk at dette bare vil flytte fyll og ikke slaget. Hvis du slipper fyll på toppen av hjerneslag, vil noen del av hjerneslag som kommer under fyllingen
Ved å klikke og dra på en rett linje vil gjøre det til en kurve bli slettet.. Hvor lang unna du drar linjen definerer hvor bratt kurven er.
er på, poenget vil knipse til noen andre hjørnet nærheten
Case Study:. Gjør bølger på den enkle måten
La oss prøve og bruke denne kunnskapen for å gjøre komplekse bølgete linjer den enkle måten - ved hjelp av rette sikksakk linjer. Start ved ganske enkelt å trekke rette linjer for å angi den omtrentlige størrelse og form av bølgen. Sørg for at linjen ikke er valgt. Deretter klikker og drar hver linje segment å lage en kurve for bølgen. Til slutt velger hjørnepunktene og flytte dem opp eller ned til de klikker for å gjøre kurven sømløs på begge sider.
Glatte avrundede hjørner
For noen grunn best kjent for Adobe, de har aldri adressert et iboende problem med rende avrundede hjørner i Flash. Hvis omrisset av et avrundet rektangel er et oddetall (1, 3, 5, etc.), hjørnene pleier å ha disse stygge artefakter som gjør bildet ser uskarpt. En typisk hack jeg har brukt og har sett blir brukt er å sørge for at konturene på avrundede rektangler er alltid 2, 4, 6 eller partall. Det fortsatt ikke fungere hvis formen er på en sub-pixel koordinere - enten x eller y koordinat er i desimaler (2.6, 4.12, 98,57, etc.) - men det er en enklere problem å løse Men hva hvis jeg trenger omrisset å være et enkelt piksel? En løsning jeg har nylig funnet og har blitt omfattende hjelp siden er dette: Selv om denne teknikken skal fungere i de fleste tilfeller, er det ikke uten sine fallgruver. Det er ingen bruk, for eksempel i situasjoner der du trenger et objekt til å bli gjennomsiktig. Redusere alpha av fyllingen rektangelet viser bare mer av kantfarge fra rektangel bak. En hack for å komme seg rundt det ville være å bryte begge rektangler (konvertere dem til vanlige figurer). Du kan også vurdere å bruke slag hinting til å veilede deg når du tegner streker på scenen. Hvem liker ikke gradienter? Design i disse dager er ganske ufullstendig uten minst et subtilt hint av en gradient for å gi den en realistisk og ofte moderne preg. Problemet med hvordan Flash håndterer figurer skjønt, er at hver selvstendige verk er en form og har sine egne eiendommer. Du kan ikke bruke gradient fyller til grupper av objekter og det er ingen måte å "koble" to ulike former. Hva skjer da, når du trenger en gradient å gå over flere objekter -? Si alle ord i en skreddersydd logo Vel, "Lock Fill" til unnsetning. Når du bruker 'Paint Bucket "verktøyet, vil du se et ikon nederst på verktøypaletten med en gradient og en lås på den. Velg de figurene du trenger for å fylle, slå den "Lock Fill-ikonet, velge en gradient fra fyllfargepaletten på og klikk inne noen av de valgte former. Ikke bekymre deg hvis du ikke ser hele gradienten anvendt. Oftere enn ikke låst fill spenner langt utover de utvalgte figurer og du må bruke den "Gradient Transform Tool" for å endre størrelsen på gradienten slik du trenger det. Denne teknikken er ikke uten sine problemer selv. Her er noen ting å huske på når du bruker låste fills: Flash kommer med et sett av slag stiler som standard -. Solid, stiplede, prikkete, Ragged, Stipples og Klekket - som fungerer fint for det meste. For situasjoner der du trenger mer kontroll over streken selv, det er en ganske utrolig kraftig slag editor som følger med Flash. For å virkelig begynne å spille rundt med slagene dine, klikker du på redigeringsikonet ved siden av 'Style' liste i 'Egenskaper' panel av en valgt hjerneslag. La oss si at du trengte en stiplet linje, men strekene er for tiden altfor tett i standard 'Stiplet' stil. I "Rediger Stroke 'panel, bare øke antallet i andre input-feltet ved siden av" Dash "til du får den effekten du trenger. Og mens du er det, sjekk den '' Skarpe hjørner "boksen. Hvis du noen gang har blitt avlyttet av de rare hjørner du får med standard stiplet linje i Flash, dette fikser det. Her er noen flere nyttige tips for å hjelpe optimalisere arbeidsflyten når du arbeider med figurer i Flash. 1. Tegn en linje der du trenger divisjonen. 2. Juster tykkelsen på linjen avhengig av hvor mye plass du trenger mellom divisjonene. 3. Kontroller at linjen er valgt; deretter gå til "Endre> Shapes" i menylinjen og velg "Konverter Lines til Fyller '. 4. Slett linjen. Og det er en wrap for den første delen av denne serien på Flash beste praksis for designere. Jeg håper disse tipsene vil hjelpe deg med å forbedre og optimalisere arbeidsflyten i Flash på lang sikt. Ta gjerne dele dine egne tips og beste praksis i kommentarfeltet. Jeg vil være tilbake med neste del av denne serien med tips om hvordan å administrere din tekst og symboler i Flash.
Tegn rektangelet ved hjelp av primitive rektangel verktøyet og sett den til den størrelsen du trenger. Pass på at X og Y koordinater av rektangelet er hver hele tall uten desimaler i dem.
Kopier og lim rektangelet på plass, deretter dytte det én piksel til høyre og ned.
Reduser høyden og bredden på den nye rektangelet til 2 piksler mindre enn opprinnelige, og endre fyllet til den fargen du trenger for formen.
Vi er ikke ferdig ennå. Reduser rundhet av nye rektangelet til én mindre enn omrisset. Fordi Flash tildeler rundhet av piksler og ikke prosentvis, har samme rundhet verdi for begge rektangler forårsaker mindre uoverensstemmelser mot midten av hver kurvatur.
Fordel gradienter Across Objekter
Låst fyller bare jobbe med regelmessige former. Hvis du brukte primitive former, må du bryte dem fra hverandre for å kunne bruke en gradient over flere objekter.
Som jeg nevnte tidligere, grensene for en gradient i et låst fill tendens til å være mye større enn arealet av figurene. Bare bruk "Gradient Transform Tool", velge ett av de former og justere grensene for graderingen. Du må kanskje zoome ut litt for å kunne se den graderte kontrollene
Lek litt med Custom Strokes
Nyttige tips
På grunn av måten Flash håndterer former, klikke en skisse bare velger en del av linjen, ikke hele greia. Dobbeltklikk på en del av hjerneslag for å velge alle tilkoblede deler på en gang.
Konklusjon