Quick Innledning: Flash Button og Merk Components
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Velkommen til en serie med rask spiss leksjoner der vi lærer om komponentene i Flash Professional CS5. I denne ukens opplæringen vil vi lære om Button og Merk komponenter.
kort oversikt
I SWF ser du to knapper og to etiketter. Når du klikker på den øverste knappen Label vil oppdatere med hvor mange ganger du har klikket på knappen. Den nederste knappen fungerer som en vippebryter med en av og på staten. Når du klikker den nederste knappen etiketten endres for å vise om knappen er på eller av.
Den nederste etiketten gjør forskjellige farger i samme tekst. Dette oppnås ved å sette inn HTML i teksten (som vi også vil dekke i denne opplæringen)
Trinn 1:. Sette opp Document
Åpne en ny Flash dokument og sett følgende egenskaper:
Dokumentstørrelse: 550x400px
Bakgrunnsfarge: #FFFFFF
Trinn 2: Legg Komponenter til Stage
Åpne komponenter vinduet ved å gå til Meny > Vindu > Komponenter eller trykk CTRL + F7
Drag to knapper og to etiketter til scenen.
I Egenskaper-panelet gir den første knappen forekomstnavnet "basicButton". Hvis Properties panelet viser ikke gå til Meny > Vindu > Komponenter eller trykk CTRL + F3
Sett knappens X til 86,00 og dens Y til 107,00.
I Egenskaper-panelet gir den første etiketten forekomstnavnet "basicLabel".
Sett etikettens X til 239,00 og dens Y til 107,00
I panelet Egenskaper gi den andre knappen forekomstnavnet "toggleButton".
Sett knappens X til 86,00 og dens Y til 234,00
I panelet Egenskaper gi andre etiketten forekomstnavnet "Htmllabel"
Sett etikettens X til 239,00 og dens Y til 234,00
Trinn 3.: importere Classes
Opprett en ny Actionscript-fil og gi den navnet Main.as. Vi skal erklære våre komponenter i Main.as så vi må slå av "auto erklære scenen forekomster", til fordel for å gjøre dette er at du får kode antydet for eksempel
Gå til Meny >.; Fil > Publish Settings. Klikk på Innstillinger ved siden av Script [Actionscript 3.0]
Fjern haken ved «erklære automatisk scene forekomster".
I Main.as Åpne pakken erklæringen og importere klassene vi skal bruke.
Legg følgende til Main.as:
pakke {import flash.display.MovieClip; import fl.controls.Button; import fl.controls.Label; //trengte å automatisk størrelsen på etikettene importere flash.text.TextFieldAutoSize; import flash.events.MouseEvent; import flash.events.Event;
Trinn 4: Oppsett Den største klassen
Legg klassen erklæringen, utvide MovieClip og sette opp vår konstruktør funksjon. Legg til følgende Main.as:
public class Hoved strekker MovieClip {//Dette er vår basicButton komponent på scenen offentlig Var basicButton: Button; //Dette er vår toggleButton komponent på scenen offentlig Var toggleButton: Button; //Dette er vår basicLabel komponent på scenen offentlig Var basicLabel: Etikett; //Dette er vår Htmllabel komponent på scenen offentlig Var Htmllabel: Etikett; //Brukes til å holde styr på hvor mange ganger brukeren har klikket på knappen Var numClicks: Antall = 0; offentlig funksjon main () {//Brukes til oppsett av knappene og legge eventListeners setupButtons (); //Brukes til å sette våre etiketter setupLabels (); }
Trinn 5: Hoved Constructor Funksjoner
Her skal vi definere setupButton () og setupLabels () funksjoner
I koden under bruker vi htmlText eiendom. Label; Dette gir oss mulighet til å sette inn HTML inn tekststrengen. Det bør bemerkes at Flash støtter bare et begrenset sett med HTML-koder; sjekk ut LiveDocs for en liste over støttede HTML-koder. Vi vil bruke < font > tag å endre fargen på teksten
Legg følgende til Main.as
offentlig funksjon setupButtons ():. void {//setter opp etiketten på knappen basicButton.label = "Klikk Me "; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "On"; //Vi bruker valgte her å sette på knappen i det "On" state toggleButton.selected = true; //Brukes til å veksle button..each gang du klikker på knappen for det svinger valgt å true /false toggleButton.toggle = true; //Vippe Eiendommen forventer en endring så her bruker vi Event.CHANGE ikke MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick);} private funksjons setupLabels (): void {//Dette stiller etiketten til der det automatisk størrelser å holde teksten sendes til det basicLabel.autoSize = TextFieldAutoSize.LEFT; //Setter den første teksten på etiketten basicLabel.text = "Du har klikket på knappen 0 ganger"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; //For å kunne bruke blinker støttede html koder vi bruker htmlText av etiketten htmlLabel.htmlText = "Knappen er < font color = '# 00FF00' > < /font >"; }
Trinn 6: Hendelse Lyttere
Her vil vi kode vårt arrangement Lyttere vi lagt til knappene. Legg til følgende til Main.as:
privat funksjon basicButtonClick (e: Hendelses): void {//Øker antall ganger brukeren har klikket på knappen numClicks ++; //Her har vi kastet numClicks til en streng siden tekst forventer en streng basicLabel.text = "Du har klikket på knappen" + String (numClicks) + "tider";} private funksjon toggleButtonClick (e: Hendelses): void {//Hvis knappen er valgt vi setter htmlText av etiketten med en grønn "On"; //Og endre knappene etiketten til "ON"; //Helst ville gjøre noe nyttig her som viser et filmklipp if (e.target.selected == true) {htmlLabel.htmlText = "Knappen er < font color = '# 00FF00' > < /font > "; e.target.label = "ON"; //Gjør noe nyttig} else {//Hvis knappen ikke er valgt vi setter htmlText av merket med en rød Off //Og endre knappene etikett til "OFF"; //Helst ville gjøre noe nyttig her som skjuler et filmklipp htmlLabel.htmlText = "Knappen er < font color = '# FF0000' > Av < /font >"; e.target.label = "OFF"; //Gjør noe nyttig}}
Deretter lukker ut klasse og pakke erklæringer med to avsluttende klammeparentes.
Ved hjelp av Button og Merk komponenter er Konklusjon
en enkel og rask måte å ha fullt funksjonelle knapper og etiketter uten å måtte bygge dem selv.
Du vil merke i Component Parametere panel av komponentene som du kan sjekke og velger visse egenskaper.
Button komponentegenskaper
Egenskaper for knapp Component
streket. en boolsk verdi som angir om en ramme trekkes rundt Button komponent når knappen er i sin opp tilstand Anmeldelser
aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
etikett: teksten label for komponenten
labelPlacement: posisjon av etiketten i forhold til en spesifisert ikon
valgt: en boolsk verdi som angir om en vippeknappen slås på på eller av stilling
veksle: en boolsk verdi som angir om en knapp kan slås
synlig : en boolsk verdi som angir om komponentforekomst er synlig
Egenskaper for etiketten Component
autoSize: indikerer hvordan en etikett er dimensjonert og justert for å passe verdien av sin tekst eiendom
condenseWhite: en boolsk verdi som angir om ekstra tomrom for eksempel mellomrom og linjeskift bør fjernes fra en etikett komponent som inneholder HTML tekst
aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
htmlText: teksten som skal vises av etikett komponent, inkludert HTML markup som uttrykker stiler av at tekst
velges: en boolsk verdi som angir om Teksten kan velges
tekst. ren tekst som skal vises av etikett komponent
synlig: en boolsk verdi som angir om komponentforekomst er synlig
wordwrap: en boolsk verdi som angir om Etikett støtter tekstbryting
Hjelpefilene er et flott sted å lære mer om komponentegenskaper du kan stille inn i Component Parametere panel. Her er LiveDocs sider for Button og for etiketten.
Takk for lesing og se opp for flere kommende komponent Tips! Anmeldelser