Create en iPhone Inspirert Switch avmerkingsbokser bruke Flash og Actionscript 3.0
Del
Del
Del
Share
Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

en avkrysningsboks er et grafisk brukergrensesnitt element som tillater brukeren å lage en eller flere utvalg fra en rekke alternativer.

I denne opplæringen, vil vi lage en Switch avkrysnings inspirert av iPhone Graphical User Interface. Les videre for å finne ut hvordan

Trinn 1: Kort oversikt

Ved hjelp av Flash-tegneverktøy vi vil lage en vektor bryter som vil bli kontrollert av klasser. En klasse vil ta seg av alle de Switch atferd og en annen klasse vil bare sjekke verdien av Switch. La oss gå

Trinn 2:!. Starter

Åpne Flash og opprette en ny Flash-fil (Actionscript 3)

Sett scenen størrelsen til 600x300 og sette farge til # . EFEFF0

Vi skal nå lage Switch grafikk

Trinn 3:. Border

Velg Primitive rektangelverktøyet (R) og lage en 280x80 px rektangel, fylle det med denne lineær gradient:. # 505052, # ACADB1

Bruk Gradient Transform Tool til å rotere gradient horisontalt og endre hjrneradius (Properties Panel) til 10 år

Trinn 4: OFF Bakgrunn

Vi vil trekke to bakgrunner for Switch, OFF bakgrunnen og ON bakgrunnen.

Duplicate forrige form og endre størrelse på 276x76 px. Endre lineær grandient til # 9A9A9A, # F4F3F6 og flytte den siste fargevelger (fargepanel) til halvveis langs baren.

Velg Text Tool (T) og lage en statisk Textfield. . Skriv "OFF" og plassere den på høyre side av bakgrunnen

Jeg brukte Helvetica Neue Fet, 48 pt, # 8C8C8C

Trinn 5:. Drabare området

Nå vil vi legge til en knapp som kan dras til å endre Switch verdi.

Bruk rektangelverktøyet for å lage en 120x80 px rektangel og fyll den med # A19FA0, satt hjørnet radius til 10 år Anmeldelser

Duplicate form og endre størrelsen til 116x76 px, fyll den med #FCFCFE.

For å gi den siste finpussen til knappen, gjenta prosessen og fylle formen med en # D7D7D7, #FCFCFE lineær gradient . Bruk Gradient Transform Tool til å rotere fill

Trinn 6:. ON Bakgrunn

Duplicate grensen og AV-bakgrunn, slette teksten og endre grensen gradient til # 0D4372, # 6193D2.

Deretter endre bakgrunns gradient til # 0C68B5, # 479FF9, # 6DB0F6.

Legg knappen grensen form i høyre side.

Break Apart (Cmd + B ) figurer til å kutte dem

Bruk samme tekstformat for å legge til "ON" tekst til bakgrunnen

Trinn 7:.. Stille movieclips

Konverter Drabare knappen for å MovieClip og gi den navnet "område". Som du kan forestille deg dette vil være det området som vil bli dratt for å endre Switch verdi.

Sørg registreringspunktet er plassert som den i bildene.

Velg alle fasonger inkludert MovieClip og konvertere dem igjen, navnet resultatet "slider".

Bruk en av grense former for å skape en annen MovieClip, vil dette være den Mask som vil skjule en del av grafikken. Name it "msk".

Konverter alt å MovieClip igjen og dobbeltklikk på den.

Lag et nytt lag og deretter klippe og lime masken klippet på den. Høyreklikk på maske laget og velg "Mask" alternativet.

Dette vil fullføre alle grafikk. Nå din Switch skal se slik ut (merk registreringspunkt):

Trinn 8: Heis

Åpne Bibliotek og høyreklikk din Switch symbol. Velg Egenskaper, marker "Export for Action" boksen og skriv "Switch" som klassenavnet

Trinn 9:. Switch.as

Opprett en ny Actionscript dokument og lagre det som "Switch .as "

Trinn 10:. Nødvendig Classes

Importer de nødvendige klassene. Hvis du trenger spesifikk hjelp for noen av disse, kan du se Flash Hjelp (F1)
pakke {import fl.transitions.Tween.; import fl.transitions.easing.Strong; import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle;
Trinn 11: Variabler

Dette er de variablene vi vil bruke, forklarte i koden kommentaren
public class Switch strekker Sprite {private Var tween. Tween; //En Tween gjenstand for animasjon offentlig Var stat: Boolean = false; //Dette er en offentlig variabel, det brukes til å kjenne Switch verdi utenfor denne klassen
Trinn 12: Constructor Funksjon

Constructor funksjon. Denne funksjonen legger lytterne
offentlig funksjon Switch (). Void {slider.area.addEventListener (MouseEvent.MOUSE_DOWN, switchDrag); slider.area.addEventListener (MouseEvent.MOUSE_UP, checkPosition);}
Trinn 13: Dra funksjon

Denne funksjonen håndterer knappen dregging, basert på sin posisjon
privat funksjon switchDrag (e: MouseEvent. ): void {if (stat) //Hvis bryteren er av, kan vi dra til høyre {e.target.parent.startDrag (sant, nytt rektangel (0, 0, e.target.parent.parent.msk!. bredde /1,75, 0)); } Else {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)); }}
Trinn 14: Sjekk Funksjon

Denne koden kontrollerer posisjonen til flyttbare knappen. Avhengig av sin verdi den går tilbake til den opprinnelige posisjon eller forblir i den nye
privat funksjon checkPosition (e: MouseEvent):. Void {e.target.parent.stopDrag (); if (e.target.parent.x > = 140) {e.target.parent.x = 160; stat = true; } Else if (stat &! &Amp; e.target.parent.x < 140) {tween = new Tween (e.target.parent, "x", Strong.easeOut, e.target.parent.x, 0 , 1, true); stat = false; } //OFF til ON if (e.target.parent.x < = 20) {e.target.parent.x = 0; stat = false; } Else if (stat & & e.target.parent.x > 20) {tween = new Tween (e.target.parent, "x", Strong.easeOut, e.target.parent.x, 160, 1, true); stat = true; }}
Trinn 15: Main Class

Dette er et eksempel på hvordan du bruker din nye Switch

Opprett en ny Actionscript dokument og lagre det som "Main.as" <.. br> pakke {import Switch; //Import klassen import flash.display.Sprite; import flash.events.MouseEvent; public class Hoved strekker Sprite {offentlig funksjon main (): void {iSwitch.addEventListener (MouseEvent.MOUSE_UP, check); //iSwitch er en forekomst i den fasen av Switch klassen} privat funksjon check (e: MouseEvent): void { if (iSwitch.stat) {trace ("Switch er ON!"); } Else {trace ("Switch er OFF!"); }}}}
Trinn 16:. Dokument Class

Gå tilbake til FLA filen og i Properties Panel legge til "Main" i klassen feltet for å gjøre dette til dokument Class

Konklusjon

Du har opprettet en fullt tilpassbar Bytt til bruk i programmene! Husk at du kan lage dine egne skins og legge mye mer funksjonalitet til PÅ og stater.

Takk for lesing!