Share
Velkommen til en serie Quick Tips-leksjoner der vi lærer om komponenter i Flash Professional CS5. I denne ukens veiledning lærer vi om knappene og etikettkomponentene.
I SWF ser du to knapper og to etiketter. Når du klikker på den øverste knappen, oppdateres etiketten med hvor mange ganger du har klikket på knappen. Bunnknappen virker som en veksle med en på og av-tilstand. Når du klikker på den nederste knappen, endres etiketten for å vise om knappen er på eller av.
Den nederste etiketten tillater forskjellige farger i samme tekst. Dette oppnås ved å sette inn HTML i teksten (som vi også vil dekke i denne opplæringen).
Åpne et nytt Flash-dokument og angi følgende egenskaper:
Åpne komponentvinduet ved å gå til Meny> Vindu> Komponenter eller trykk CTRL + F7
Dra to knapper og to etiketter til scenen.
I Egenskaper-panelet gir den første knappen forekomstnavnet "BasicButton". Hvis Egenskaper-panelet ikke vises, 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 dets Y til 107,00
I Egenskaper-panelet gir den andre knappen forekomstnavnet "toggleButton".
Sett knappens X til 86,00 og dens Y til 234,00
I Egenskaper-panelet gir den andre etiketten forekomstnavnet "htmlLabel".
Sett etikettets X til 239,00 og dets Y til 234,00
Opprett en ny actionscript-fil og gi den navnet Main.as. Vi vil deklarere komponentene våre i Main.as, så vi må slå av "auto deklarere scenevaner", fordelen med å gjøre dette er at du får kode som hinting for forekomsten.
Gå til Meny> Fil> Publiser innstillinger. Klikk på innstillinger ved siden av Script [Actionscript 3.0]
Fjern merket for "Oppgi automatisk forekomst av forekomster".
I Main.as Åpne pakkeerklæringen og importer klassene vi skal bruke.
Legg til følgende på Main.as:
pakke import flash.display.MovieClip; importere fl.controls.Button; importere fl.controls.Label; // nødvendig for å automatisk formatere etikettene importere flash.text.TextFieldAutoSize; importer flash.events.MouseEvent; importere flash.events.Event;
Legg til klassedeklarasjonen, utvide Filmklipp og sett opp vår konstruktør funksjon. Legg til følgende til Main.as:
offentlig klasse Main utvider MovieClip // Dette er vår basicButton komponent på scenen public var basicButton: Button; // Dette er vår toggleButton komponent på scenen offentlige var toggleButton: Button; // Dette er vår grunnleggendeLabel komponent på scenen public var basicLabel: Etikett; // Dette er vår htmlLabel komponent på scenen public var htmlLabel: Etikett; // Brukes til å holde oversikt over hvor mange ganger brukeren har klikket på knappen var numClicks: Number = 0; offentlig funksjon Main () // Brukes til å sette opp knappene og legge til eventListeners setupButtons (); // Brukes til å sette opp etikettene setupLabels ();
Her definerer vi setupButton () og setupLabels () funksjoner.
I koden under bruker vi htmlText egenskapen til etiketten; Dette tillater oss å sette inn HTML i tekststrengen. Det skal bemerkes at Flash kun støtter et begrenset sett med HTML-koder; sjekk ut livedocs for en liste over støttede HTML-koder. Vi bruker tag for å endre fargen på teksten.
Legg til følgende på Main.as
public function setupButtons (): void // setter opp etiketten på knappen basicButton.label = "Click Me"; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "På"; // Vi bruker valgt her for å sette knappen i det er "På" state toggleButton.selected = true; // Brukes til å veksle knappen ... hver gang du klikker på knappen blir den valgt til true / false toggleButton.toggle = true; // Byttegenskapen forventer en endring, slik at vi bruker Event.CHANGE ikke MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick); private funksjon setupLabels (): void // Dette setter etiketten til der den automatisk størrelser for å holde teksten passert til den basicLabel.autoSize = TextFieldAutoSize.LEFT; // Setter den opprinnelige teksten til etiketten basicLabel.text = "Du har klikket på knappen 0 ganger"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; // For å kunne bruke flashes støttede HTML-koder bruker vi htmlText av etiketten htmlLabel.htmlText = "Knappen er På";
Her kodes vi til våre Event Lyttere som vi legger til på knappene. Legg til følgende på Main.as:
privat funksjon basicButtonClick (e: Event): void // Øker antall ganger brukeren har klikket på knappen numClicks ++; // Her kastes numClicks til en streng siden tekst forventer en streng basicLabel.text = "Du har klikket på knappen" + String (numClicks) + "times"; Private funksjon toggleButtonClick (e: Event): void // Hvis knappen er valgt, setter vi htmlText av etiketten med en grønn "På"; // Og endre knappens etikett til "ON"; // Du vil helst gjøre noe nyttig her som å vise et filmklipp hvis (e.target.selected == true) htmlLabel.htmlText = "Knappen er På"; e.target.label =" ON "; // Gjør noe nyttig ellers // Hvis knappen ikke er valgt, setter vi htmlText av etiketten med en rød Av // og endrer knappene Etikett til" AV " ; // Du vil helst gjøre noe nyttig her som å skjule et filmklipp htmlLabel.htmlText = "Knappen er Av"; e.target.label =" OFF "; // Gjør noe nyttig
Deretter lukker du klassen og pakkeerklæringen med to lukkede krøller.
Bruk av knapp og etikettkomponenter er en enkel og rask måte å ha fullt funksjonelle knapper og etiketter uten å måtte bygge dem selv.
Du vil legge merke til i komponentparameterepanelet på komponentene som du kan sjekke og velge bestemte egenskaper.
Knappkomponentegenskaper.
Accentsconagua
understreket: En boolsk verdi som angir om en kantlinje trekkes rundt knappekomponenten når knappen er i opp-tilstandaktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngangmerkelapp: tekstetiketten for komponentenlabelPlacement: Plassering av etiketten i forhold til et spesifisert ikonvalgt: En boolsk verdi som angir om en veksleknapp er vekselt i på eller av-posisjonenveksle: en boolsk verdi som indikerer om en knapp kan vekslesynlig: en boolsk verdi som angir om komponenteksemplet er synligAuto størrelse: Indikerer hvordan en etikett er dimensjonert og justert for å passe til verdien av tekstegenskapencondenseWhite: en boolsk verdi som indikerer om ekstra hvitt mellomrom som mellomrom og linjeskift skal fjernes fra en etikettkomponent som inneholder HTML-tekstaktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinnganghtmlText: Teksten som skal vises av etikettkomponenten, inkludert HTML-merking som uttrykker stilen til tekstenvalgbar: en boolsk verdi som indikerer om teksten kan velgestekst: den rene teksten som skal vises av etikettkomponenten.synlig: en boolsk verdi som angir om komponenteksemplet er synligwordwrap: En boolsk verdi som indikerer om etiketten støtter ordinnpakningHjelpefilene er et flott sted å lære mer om komponentegenskapene du kan angi i panelet Parameterparametere. Her er livedocs sidene for knappen og for etiketten.
Takk for at du leser og se opp for mer kommende komponent Hurtige tips!
