Share
Welkom bij een reeks Quick Tip-lessen waarin we meer te weten komen over componenten in Flash Professional CS5. In de tutorial van deze week leren we over de componenten Button en Label.
In de SWF ziet u twee knoppen en twee labels. Wanneer u op de bovenste knop klikt, wordt het label bijgewerkt met hoe vaak u op de knop hebt geklikt. De onderste knop fungeert als een schakelaar met een aan- en uit-status. Wanneer u op de onderste knop klikt, verandert het label om aan te geven of de knop is in- of uitgeschakeld.
Het onderste label staat verschillende kleuren in dezelfde tekst toe. Dit wordt bereikt door HTML in de tekst in te voegen (die we in deze tutorial ook behandelen).
Open een nieuw Flash-document en stel de volgende eigenschappen in:
Open het componentenvenster door naar Menu> Venster> Componenten te gaan of druk op CTRL + F7
Sleep twee knoppen en twee labels naar het werkgebied.
Geef in het paneel Properties de eerste knop de instantienaam "basicButton". Als het eigenschappenvenster niet wordt weergegeven, gaat u naar Menu> Venster> Componenten of drukt u op CTRL + F3
Stel de knop X in op 86,00 en de Y op 107,00.
Geef in het paneel Properties het eerste label de instantienaam "basicLabel".
Zet de X van het label op 239.00 en de Y op 107.00
Geef in het paneel Properties de tweede knop de instantienaam "toggleButton".
Stel de knop in op X tot 86.00 en de Y op 234.00
Geef in het paneel Properties het tweede label de instantienaam 'htmlLabel'.
Zet de X van het label op 239.00 en de Y op 234.00
Maak een nieuw actionscript-bestand en geef het de naam Main.as. We zullen onze componenten in Main.as declareren, dus we moeten "auto declare stage instances" uitschakelen, het voordeel hiervan is dat je codehints krijgt voor de instantie.
Ga naar Menu> Bestand> Publicatie-instellingen. Klik op instellingen naast Script [Actionscript 3.0]
Verwijder het vinkje bij "Stadium-instanties automatisch declareren".
In de Main.as Open de pakketverklaring en importeer de klassen die we zullen gebruiken.
Voeg het volgende toe aan Main.as:
pakket import flash.display.MovieClip; import fl.controls.Button; import fl.controls.Label; // nodig om automatisch de grootte van de labels te wijzigen import flash.text.TextFieldAutoSize; import flash.events.MouseEvent; import flash.events.Event;
Voeg de klassenverklaring toe, verleng deze Filmclip en stel onze constructorfunctie in. Voeg het volgende toe aan Main.as:
public class Main breidt MovieClip uit // Dit is onze basicButton-component op het podium public var basicButton: Button; // Dit is onze toggleButton component op het podium public var toggleButton: Button; // Dit is onze basicLabel component op het podium public var basicLabel: Label; // Dit is onze htmlLabel-component op het podium public var htmlLabel: Label; // Gebruikt om bij te houden hoe vaak de gebruiker op de knop heeft gedrukt var numClicks: Number = 0; public function Main () // Gebruikt om de knoppen in te stellen en eventListeners setup Knoppen () toe te voegen; // Gebruikt om onze labels setupLabels () in te stellen;
Hier zullen we het definiëren setupButton () en setupLabels () functies.
In de onderstaande code gebruiken we de htmlText eigendom van het label; Hiermee kunnen we HTML in de tekststring invoegen. Opgemerkt moet worden dat Flash slechts een beperkte set HTML-tags ondersteunt; bekijk de livedocs voor een lijst met ondersteunde HTML-tags. We zullen de gebruiken label om de kleur van de tekst aan te passen.
Voeg het volgende toe aan Main.as
public function setup Button (): void // stelt het label in op de knop basicButton.label = "Click Me"; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "Aan"; // We gebruiken hier de geselecteerde knoppen om de knop in de status "Aan" te zetten. KnopButton.selected = true; // Gebruikt om de knop om te schakelen ... elke keer dat u op de knop klikt die is geselecteerd voor waar / onwaar toggleButton.toggle = true; // De eigenschap toggle verwacht een wijziging, dus hier gebruiken we Event.CHANGE niet MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick); private function setupLabels (): void // Dit stelt het label in op waar het automatisch de grootte invoert om de doorgegeven tekst te behouden basicLabel.autoSize = TextFieldAutoSize.LEFT; // Stelt de initiële tekst van het label in basicLabel.text = "U hebt 0 keer op de knop gedrukt"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; // Om flash-ondersteunde html-tags te kunnen gebruiken, gebruiken we de htmlText van het label htmlLabel.htmlText = "De knop is Op";
Hier coderen we onze Event Luisteraars die we aan de Knoppen hebben toegevoegd. Voeg het volgende toe aan Main.as:
private function basicButtonClick (e: Event): void // Verhoogt het aantal keren dat de gebruiker op de knop numClicks ++ heeft geklikt; // Hier casten we numClicks naar een tekenreeks omdat tekst een string verwacht basicLabel.text = "U hebt op de knop geklikt" + String (numClicks) + "times"; privéfunctie toggleButtonClick (e: Event): void // Als de knop is geselecteerd, stellen we de htmlText van het label in met een groene "Aan"; // En verander het knopenetiket in "AAN"; // Bij voorkeur zou je hier iets nuttigs doen, zoals een filmclip laten zien als (e.target.selected == true) htmlLabel.htmlText = "De knop is Op"; e.target.label =" AAN "; // Doe iets nuttigs anders // Als de knop niet is geselecteerd, stellen we de htmlText van het label rood in Uit // En veranderen de knoppen Label in" UIT " ; // Je zou hier bij voorkeur iets nuttigs doen, zoals een filmclip verbergen htmlLabel.htmlText = "De knop is Uit"; e.target.label =" UIT "; // Doe iets nuttigs
Sluit vervolgens de klas en pak de declaraties in met twee gesloten accolades.
Knop- en labelcomponenten gebruiken is een eenvoudige en snelle manier om volledig functionele knoppen en labels te hebben zonder ze zelf te hoeven bouwen.
U zult opmerken in het paneel Componentparameters van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren.
Eigenschappen van knopcomponenten.
Accentsconagua
benadrukte: een Booleaanse waarde die aangeeft of een rand rond het component Button wordt getekend wanneer de knop in de op-status staatingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepterenlabel: het tekstlabel voor het onderdeellabelPlacement: positie van het label in relatie tot een gespecificeerd pictogramgekozen: een Booleaanse waarde die aangeeft of een schakelknop in de aan- of uit-positie is geschakeldtoggle: een Booleaanse waarde die aangeeft of een knop kan worden omgeschakeldzichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar isautomatische grootte: geeft aan hoe een label wordt bemeten en uitgelijnd om te passen bij de waarde van de teksteigenschapcondenseWhite: een Booleaanse waarde die aangeeft of extra witte spaties zoals spaties en regeleinden moeten worden verwijderd uit een labelonderdeel dat HTML-tekst bevatingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepterenhtmlText: de tekst die wordt weergegeven door het labelonderdeel, inclusief HTML-markering die de stijlen van die tekst uitdruktselecteerbaar: een Booleaanse waarde die aangeeft of de tekst kan worden geselecteerdtekst: de platte tekst die wordt weergegeven door het labelonderdeel.zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar iswordWrap: een Booleaanse waarde die aangeeft of het label woordterugloop ondersteuntDe helpbestanden zijn een geweldige plaats om meer te weten te komen over de componenteigenschappen die u kunt instellen in het paneel Componentparameters. Hier zijn de livedocs-pagina's voor de Button en voor het label.
Bedankt voor het lezen en pas op voor meer snel opduikende componenttips!
