Create en Custom Radio Button fra grunnen av ved hjelp av Flash
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Ved hjelp av Flash tegneverktøy vi vil skape en hyggelig ser knappen som vil benytte seg av tidslinjen og mus hendelser i Actionscript 3 for å utføre en bruker erklært handling.
< p>
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Klikk på den øverste radio boksen for å se hvordan det ser ut i aksjon
Trinn 1:. Oversikt
Fra Wikipedia:
En radioknapp eller alternativ knappen er en type grafisk brukergrensesnitt element som gjør det mulig for brukeren å velge bare en av et forhåndsdefinert sett med alternativer
I denne opplæringen, vil vi lage en egendefinert Radio Button fra grunnen av ved hjelp av Flash og Actionscript 3. Les
Trinn 2.!: Sett opp Flash
Launch Flash og opprette et nytt dokument. Satt scenen størrelse 320x190px, # 181818 for fargen, og bildefrekvensen til 24fps.
(Du kan se noen eksempler på Flash radioknapper i "Match" boksen ovenfor.)
< hr>
Trinn 3: Interface
Dette er grensesnittet vi vil bruke: en enkel bakgrunn med en tittel, noen statiske textfields brukes som tilbakemelding fra brukerne, en fungerende radio knapp og to statiske demoer. Dette vil vise deg hvordan du kan aktivere eller deaktivere radioen knappen.
Det er også et dynamisk tekstfeltet (som sier [Deaktivert] Nå må vi noe å skille. . seksjonene Med det samme verktøyet, opprette en 300x1 px rektangel og fyll den med en annen gradient fill: # 737173 til # 181818. Kopiere denne form og plassere dem i sentrum Velg Text Tool (T) og sette dette format i Properties Panel: Helvetica Bold, 20 pkt, #FFFFFF. (Hvis du er på Windows, har du sannsynligvis ikke vil ha Helvetica font;. Bruke Arial i stedet) Skriv en tittel og plassere tekstfeltet i øverste venstre hjørne av skjermen For å få boktrykk. effekt, bare kopiere (Cmd + D) tekstfeltet, endre farge til # 8C2D00, flytte den 1px opp og gå til Endre > Ordne > Flytt bakover Du bør slutte med følgende effekt Vi skal lage en serie av statiske textfields som vil fortelle den bruker hva hver radio knappen representerer. Det finnes to typer av textfields; en tittel og en beskrivelse. Dette er formatet for tittelen. Myriad Pro Regular, 20 pkt, #DDDDDD For de beskrivelsene vi bruker:. Myriad Pro Regular, 14 pkt, #BBBBBB Aktiv Radio Button vil gjøre noe når den er aktivert, for eksempel, vil et dynamisk tekstfeltet endres viser gjeldende status for knappen Ved hjelp Text Tool (T), skape et dynamisk tekstfeltet og angi statusField Som knappen vil bli deaktivert som standard Du kan skrive [Deaktivert] Deretter vil vi skape Radio Button Den har tre tilstander: Velg Oval Tool (O) og opprette et 128x128px sirkel (det spiller egentlig ingen rolle størrelsen du opprette den siden du vil være i stand til å skalere det, bare for referanse) med en 1px stroke farge #AAAAAA og en # F7F3F7 å #BDBEBD gradient fyll. Nå skal vi lage det området som vil endre seg når radioknappen er aktivert Duplicate (Cmd + D) bakgrunnen form og endre størrelsen til 64x64px Endre slag farge til en #EEEEEE, #AAAAAA lineær gradient og fyllet til # C3C6C3, # B5B2B5. Konverter figurene til MovieClip og dobbeltklikk på den for å angi redigeringsmodus. Opprett en ny Frame (F6) og endre mindre sirkel fylle til # D45C10, # B43B02 Dette vil være rammen vises når aktivert Denne grafikken vil bli vist når radioknappen er deaktivert. Opprett en ny Frame (F6) og slette sentrum form. Endre bakgrunns gradient til # D4D2D4, # A2A3A2 Dette vil gjøre bakgrunnen mørkere og uten den delen som endrer seg når aktivert Sett forekomstnavn som sine Overskriftene foreslår, med unntak av aktivert Vi vil gjøre bruk av dokument klasse i denne opplæringen, hvis du ikke vet hvordan du bruker det eller er litt forvirret kan du lese dette QuickTip Opprett en ny Actionscript 3.0 Class og lagre den som Hoved .as Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts. Det anbefales å navngi dem som begynner med en liten bokstav ved hjelp intercaps for påfølgende ord for eksempel: myClasses I dette eksempelet bruker vi en enkelt klasse, så det er ikke egentlig en. må opprette et klasser mappe Dette er de klassene vi trenger å importere for klassen vår til å fungere, import strekker Konstruktøren er en . funksjon som kjøres når et objekt er opprettet fra en klasse, er denne koden den første til å kjøre når du gjør en forekomst av et objekt eller kjører ved hjelp av Document Class Her kan vi kontrollere statene de tre radioknappene i scenen Den første vil fungere som normalt. Den andre vil være inaktiv, og den siste vil vise så aktivert Denne koden forteller Active radioknappen for å lytte etter mus hendelser, og hver gang den oppdager en MOUSE_UP MouseEvent (dette er når museknapp slippes), starte changeState () -funksjonen. Anmeldelser active.addEventListener (MouseEvent.MOUSE_UP, changeState); Denne funksjonen vil kjøre hver gang brukeren klikker på alternativknappen Den sjekker hvis knappen er aktivert eller deaktivert, og utfører en bestemt handling i hvert av tilfellene. I dette eksemplet, endrer det verdien av den dynamiske tekstfeltet Hvis du har problemer under noen av disse trinnene, husk at du kan få tilgang til kildefilene på toppen av denne opplæringen. Du kan også ta en titt på den fullstendige Actionscript-kode for å sammenligne med ditt: Du har opprettet en fullt tilpassbar Radio Button bruke disse enkle trinn, kan du bruke dem til å lage dine egne Radio Knapper Neste trinn: hvorfor ikke kombinere dette med ? André Cavallari tutorial om å skape Flash-komponenter for å snu dette til et objekt du kan bruke i ethvert prosjekt Og en utfordring for deg: du har tilpasset utseende og gjort veksle arbeid; prøve å sette fem radioknapper på scenen og skrive kode for å bare tillate en å være aktivert til enhver tid. Jeg håper du likte denne opplæringen, takk for lesing!
i bildet) som vil bli modifisert av arbeidsalternativknappen
Trinn 4.: Bakgrunn
Velg rektangel Tool (R) og lage en 320x40 px rektangel, legg det på toppen av scenen og fyll med dette radial gradient: # D45C10 til # B43B02
Trinn 5: Tittel.
Trinn 6:.. User Feedback
Trinn 7:. Radio Knapp Handling
som sitt eksempel navn, deretter plassere tekstfeltet som vist på neste bilde:
i tekstfeltet
Trinn 8:.. Radio Button
Normal: I denne tilstanden fungerer knappen normalt
Aktivert. Denne statusen vises når brukeren klikker på knappen
< li> Deaktivert: I denne tilstanden knappen kan ikke aktiveres
Trinn 9:. Bakgrunn
< h2> Trinn 10:. Enabled området
Trinn 11:.. Disabled
Trinn 12:.. Forekomstnavn
< p> Tre Radio Knapper er plassert i scenen, én for hver stat.
delen, som det er en eksklusiv Action søkeord . Nevne at knappen enabledBox
Trinn 13:. Dokument Class
Trinn 14:. New Actionscript 3 Klasse
i klassen din mappe
Trinn 15:. Package
. Det er også vanlig å nevne dem ved hjelp av selskapets hjemmeside: com.mycompany.classesType.myClass
pakken {
Trinn 16:. Import direktiv
direktivet gjør eksternt definerte klasser og pakker tilgjengelig i koden
import flash.display.Sprite, import flash.events.MouseEvent;
Trinn 17:. Erklærer og Forleng Class
< p> Her erklærer vi klassen med klasse
definisjon søkeord fulgt av navn som vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår
public class Hoved strekker Sprite {
Trinn 18:. Constructor
offentlig funksjon main (): void {
Trinn 19:. Set Radio Button State
active.stop (); inactive.gotoAndStop (3), enabledBox.gotoAndStop (2);
Trinn 20:. Håndtak Mouse Interaksjon
Trinn 21:. utføre en handling
privat funksjon changeState (e: MouseEvent):. Void {if (e.target.currentFrame == 1) {e.target.gotoAndStop (2); statusField.text = "[Aktivert]"; //Dette er handlingen til å utføre} else {e.target.gotoAndStop (1); statusField.text = "[Deaktivert]"; //Dette er handlingen til å utføre}}
Trinn 22: Full Kode
pakke {import flash.display.Sprite; import flash.events.MouseEvent; public class Hoved strekker Sprite {offentlig funksjon main (): void {active.stop (); inactive.gotoAndStop (3); enabledBox.gotoAndStop (2); active.addEventListener (MouseEvent.MOUSE_UP, changeState); } Private funksjon changeState (e: MouseEvent): void {if (e.target.currentFrame == 1) {e.target.gotoAndStop (2); statusField.text = "[Aktivert]"; } Else {e.target.gotoAndStop (1); statusField.text = "[Deaktivert]"; }}}}
Konklusjon