Share
En kontrollboks er et grafisk brukergrensesnittelement som tillater brukeren å lage en eller flere valg fra en rekke alternativer.
I denne opplæringen lager vi en avkryssingsboksen Skift inspirert av iPhone Grafisk brukergrensesnitt. Les videre for å finne ut hvordan!
Ved hjelp av Flash tegning verktøyene vil vi opprette en vektor Switch som vil bli kontrollert etter klasser. En klasse vil ta vare på alle bryterens oppførsel og en annen klasse vil bare sjekke verdien til bryteren. La oss gå!
Åpne Flash og opprett en ny Flash-fil (ActionScript 3).
Still scenestørrelsen til 600x300 og sett fargen til # EFEFF0.
Vi lager nå Switch-grafikken.
Velg Primitiv rektangelverktøy (R) og opprett et 280x80 px rektangel, fyll det med denne lineære gradienten: # 505052, # ACADB1.
Bruk Gradient Transform Tool til å rotere graden horisontalt og endre hjørne radius (Egenskaper Panel) til 10.
Vi trekker to bakgrunner for bryteren, av bakgrunnen og på bakgrunnen.
Dupliser forrige form og endre størrelsen til 276x76 px. Endre den lineære grandienten til # 9A9A9A, # F4F3F6 og flytt den siste fargevalgeren (Color Panel) til halvveis langs linjen.
Velg tekstverktøyet (T) og opprett et statisk tekstfelt. Skriv "OFF" og plasser den på høyre side av bakgrunnen.
Jeg brukte Helvetica Neue Bold, 48 pt, # 8C8C8C.
Nå legger vi til en knapp som kan trekkes for å endre bryterverdien.
Bruk rektangulærverktøyet til å lage et 120x80 px rektangel og fyll det med # A19FA0, sett hjørneradiusen til 10.
Dupliser formen og resize den til 116x76 px, fyll den med #FCFCFE.
For å gi den endelige berøring til knappen, gjenta prosessen og fyll på formen med en # D7D7D7, #FCFCFE lineær gradient. Bruk Gradient Transform Tool til å rotere fyllingen.
Dupliser grensen og AV-bakgrunnen, slett teksten og endre grenseovergangen til # 0D4372, # 6193D2.
Deretter endrer du bakgrunnsgraden til # 0C68B5, # 479FF9, # 6DB0F6.
Plasser knappens kantlinje på høyre side.
Break Apart (Cmd + B) former for å kutte dem.
Bruk det samme tekstformatet til å legge til "ON" -teksten i bakgrunnen.
Konverter den Draggable Knappen til MovieClip og gi den navnet "område". Som du kan forestille deg, blir dette området som vil bli trukket for å endre bryterverdien.
Pass på at registreringspunktet er plassert som det i bildene.
Velg alle former inkludert MovieClip og konverter dem igjen, oppgi resultatet "skyvekontrollen".
Bruk noen av grenseformene til å lage en annen MovieClip, dette vil være masken som vil skjule en del av grafikken. Gi det navnet "msk".
Konverter alt til MovieClip igjen og dobbeltklikk på det.
Lag et nytt lag, og kutt og lim deretter inn maskeringsklippet på det. Høyreklikk maske laget og velg "Mask" alternativet.
Dette vil fullføre grafikken. Nå skal bryteren din se slik ut (noter registreringspunktet):
Åpne biblioteket og høyreklikk på Bytt-symbolet. Velg Egenskaper, merk av "Eksporter for ActionScript" -boksen og skriv "Bytt" som klassenavnet.
Opprett et nytt ActionScript-dokument og lagre det som "Switch.as".
Importer de nødvendige klassene. Hvis du trenger spesifikk hjelp for noen av disse, vennligst se Flash Help (F1).
pakke import fl.transitions.Tween; importere fl.transitions.easing.Strong; importer flash.display.Sprite; importer flash.events.MouseEvent; importer flash.geom.Rectangle;
Dette er variablene vi skal bruke, forklart i kodens kommentar.
offentlig klasse Bryter strekker seg Sprite private var tusen: Tween; // Et Tween-objekt for animasjon offentlig var stat: Boolean = false; // Dette er en offentlig variabel, det er kjent for bytteverdien utenfor denne klassen
Konstruksjonsfunksjonen. Denne funksjonen legger til lytterne.
offentlig funksjon Switch (): void slider.area.addEventListener (MouseEvent.MOUSE_DOWN, switchDrag); slider.area.addEventListener (MouseEvent.MOUSE_UP, checkPosition);
Denne funksjonen håndterer knappen som drar, basert på posisjonen.
privat funksjon switchDrag (e: MouseEvent): void if (! stat) // Hvis bryteren er AV, kan vi dra til høyre e.target.parent.startDrag (sann, ny rektangel (0, 0, e.target .parent.parent.msk.width / 1,75, 0)); annet e.target.parent.startDrag (sant, nytt rektangel (e.target.parent.parent.msk.width / 1,75, 0, -e.target.parent.parent.msk.width / 1,75, 0)) ;
Denne koden kontrollerer posisjonen til den drakkbare knappen. Avhengig av verdien, går den tilbake til den opprinnelige posisjonen eller forblir i den nye.
privat funksjon checkPosition (e: MouseEvent): void e.target.parent.stopDrag (); hvis (e.target.parent.x> = 140) e.target.parent.x = 160; stat = sant; annet hvis (! stat && e.target.parent.x < 140) tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,0,1,true); stat = false; // OFF to ON if (e.target.parent.x <= 20) e.target.parent.x = 0; stat = false; else if (stat && e.target.parent.x > 20) tween = ny Tween (e.target.parent, "x", Strong.easeOut, e.target.parent.x, 160,1, true); stat = sant;
Dette er et eksempel på hvordan du bruker den nye bryteren.
Opprett et nytt ActionScript-dokument og lagre det som "Main.as".
Accentsconagua
pakke Import Switch; // Importer klassen import flash.display.Sprite; importer flash.events.MouseEvent; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void iSwitch.addEventListener (MouseEvent.MOUSE_UP, checkState); // iSwitch er en forekomst i scenen av Switch-klassen private funksjon checkState (e: MouseEvent): void hvis (iSwitch.stat) trace ("Switch er PÅ!"); else trace ("Switch er AV!"); Gå tilbake til .Fla-filen og i Egenskapspanelet legg til "Hoved" i Klassefeltet for å gjøre dette til Dokumentklassen.
Du har opprettet en fullt tilpassbar bytt til bruk i dine applikasjoner! Husk at du kan lage dine egne skinn og legge til mye mer funksjonalitet til ON og OFF-tilstandene.
Takk for at du leste!
