Share
Välkommen till en serie Quick Tip-lektioner där vi lär oss om komponenter i Flash Professional CS5. I denna veckas handledning lär vi oss om knapparna och etikettkomponenterna.
I SWF ser du två knappar och två etiketter. När du klickar på den övre knappen uppdateras etiketten med hur många gånger du har klickat på knappen. Den nedersta knappen fungerar som en växel med ett på och av-tillstånd. När du klickar på den nedre knappen ändras etiketten för att visa om knappen är på eller av.
Den nedersta etiketten tillåter olika färger i samma text. Detta uppnås genom att infoga HTML i texten (som vi också kommer att täcka i denna handledning).
Öppna ett nytt Flash-dokument och ställ in följande egenskaper:
Öppna komponentfönstret genom att gå till Meny> Fönster> Komponenter eller tryck CTRL + F7
Dra två knappar och två etiketter till scenen.
På Egenskaper-panelen ger den första knappen förekomstnamnet "BasicButton". Om Egenskaper-panelen inte visas går du till Meny> Fönster> Komponenter eller trycker på CTRL + F3
Ställ in knappens X till 86.00 och dess Y till 107.00.
På Egenskaper-panelen ger den första etiketten förekomstnamnet "basicLabel".
Ange etiketten X till 239.00 och dess Y till 107.00
På Egenskaper-panelen ge den andra knappen förekomstnamnet "toggleButton".
Ställ in knappens X till 86.00 och dess Y till 234.00
På Egenskaper-panelen ger den andra etiketten förekomstnamnet "htmlLabel".
Ange etikettens X till 239.00 och dess Y till 234.00
Skapa en ny ActionScript-fil och ge den namnet Main.as. Vi kommer att förklara våra komponenter i Main.as så vi måste stänga av "auto deklarera scenen instanser", fördelen med att göra detta är att du får kod hinting för instansen.
Gå till Meny> Arkiv> Publicera inställningar. Klicka på inställningar bredvid Script [ActionScript 3.0]
Avmarkera "Automatisk deklarera sceninstanser".
I Main.as Öppna paketdeklarationen och importera de klasser vi ska använda.
Lägg till följande i Main.as:
paket import flash.display.MovieClip; importera fl.controls.Button; importera fl.controls.Label; // behövs för att automatiskt dimensionera etiketterna importera flash.text.TextFieldAutoSize; importera flash.events.MouseEvent; importera flash.events.Event;
Lägg till klassdeklarationen, förläng Filmklipp och ställa in vår konstruktör funktion. Lägg till följande i Main.as:
public class Main utökar MovieClip // Detta är vår basicButton-komponent på scenen public var basicButton: Button; // Detta är vår toggleButton-komponent på scenen public var toggleButton: Button; // Detta är vår basicLabel-komponent på scenen public var basicLabel: Etikett; // Detta är vår htmlLabel komponent på scenen public var htmlLabel: Etikett; // Används för att hålla reda på hur många gånger användaren har klickat på knappen var numClicks: Number = 0; allmän funktion Main () // Används för att konfigurera knapparna och lägga till eventListeners setupButtons (); // Används för att konfigurera våra etiketter setupLabels ();
Här definierar vi setupButton () och setupLabels () funktioner.
I koden nedan använder vi htmltext etikettens egendom Detta tillåter oss att infoga HTML i textsträngen. Det bör noteras att Flash endast stöder en begränsad uppsättning HTML-taggar. kolla in livedocs för en lista över HTML-taggar som stöds. Vi använder tagg för att ändra textens färg.
Lägg till följande på Main.as
public function setupButtons (): void // ställer in etiketten på knappen basicButton.label = "Click Me"; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "På"; // Vi använder valda här för att sätta knappen i den "On" state toggleButton.selected = true; // Används för att växla knappen ... varje gång du klickar på knappen vrider den vald till true / false toggleButton.toggle = true; // Växlingsegenskapen förväntar sig en förändring så här använder vi Event.CHANGE inte MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick); privat funktion setupLabels (): void // Detta ställer in etiketten till var den automatiskt storlekar för att hålla texten överlämnad till basicLabel.autoSize = TextFieldAutoSize.LEFT; // Ställer in den ursprungliga texten på etiketten basicLabel.text = "Du har klickat på knappen 0 gånger"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; // För att kunna använda flasher som stöds html-taggar använder vi htmlText på etiketten htmlLabel.htmlText = "Knappen är På";
Här kodar vi våra Event Listeners som vi lagt till i knapparna. Lägg till följande i Main.as:
privat funktion basicButtonClick (e: Event): void // Ökar antalet gånger användaren har klickat på knappen numClicks ++; // Här kastar vi numClicks till en sträng eftersom text förväntar oss en sträng basicLabel.text = "Du har klickat på knappen" + String (numClicks) + "times"; Private Function toggleButtonClick (e: Event): void // Om knappen väljs ställer vi in etikettens htmlText med en grön "På"; // Ändra knappens etikett till "ON"; // Du skulle helst göra något användbart här som att visa ett filmklipp om (e.target.selected == true) htmlLabel.htmlText = "Knappen är På"; e.target.label =" ON "; // Gör något användbart annat // Om knappen inte är vald ställer vi htmlText på etiketten med en röd Av // och ändrar knapparna Etikett till" AV " ; // Du skulle helst göra något användbart här som att gömma ett filmklipp htmlLabel.htmlText = "Knappen är Av"; e.target.label =" OFF "; // Gör något användbart
Därefter stänger du klass- och förpackningsdeklarationerna med två slutna lockade axlar.
Att använda knapparna och etikettkomponenterna är ett enkelt och snabbt sätt att ha fullt fungerande knappar och etiketter utan att behöva bygga dem själv.
Du kommer att märka i panelen Komponentparametrar av komponenterna som du kan kolla och välja vissa egenskaper.
Knappkomponentegenskaper.
Accentsconagua
betonade: ett booleskt värde som indikerar huruvida en kant ritar runt knappkomponenten när knappen är i uppåtlägeaktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatningmärka: textetiketten för komponentenlabelPlacement: Placering av etiketten i förhållande till en angiven ikonvald: ett booleskt värde som indikerar huruvida en växlingsknapp är växlad till eller fråntoggle: ett booleskt värde som anger om en knapp kan växlassynlig: ett booleskt värde som anger om komponentinstansen är synligautosize: Anger hur en etikett är dimensionerad och anpassad för att passa värdet på dess textegenskapcondenseWhite: ett booleskt värde som anger om extra blankt utrymme, t.ex. mellanslag och radbrytningar, ska tas bort från en etikettkomponent som innehåller HTML-textaktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatninghtmltext: texten som ska visas av etikettkomponenten, inklusive HTML-markup som uttrycker stilen på den textenvalbara: ett booleskt värde som anger om texten kan väljastext: den vanliga texten som ska visas av etikettkomponenten.synlig: ett booleskt värde som anger om komponentinstansen är synligwordwrap: ett booleskt värde som anger om etiketten stöder ordförpackningHjälpfilerna är en bra plats för att lära dig mer om de komponentegenskaper du kan ställa in i panelen Komponentparametrar. Här är livedocs sidor för knappen och för etiketten.
Tack för att du läste och se upp för mer kommande komponent Snabba tips!
