Share
In deze snelle inleiding tot de professionele Flash-componenten gaan we kijken naar de UILoader en UIScrollbar.
Bekijk het voorbeeld. In de SWF bevindt zich aan de linkerkant een UILoader-component die op het eerste gezicht onzichtbaar is (omdat er niets in zit); we zullen hier een afbeelding in laden.
Onder de UILoader bevindt zich een label met de tekst "Image Not Loaded"; na het succesvol laden van de afbeelding zullen we de tekst van dit label veranderen in "Afbeelding geladen".
De knop onder het label wordt gebruikt om het laden van de afbeelding te starten. Aan de rechterkant is er een tekstveld en UIScrollbar die aanvankelijk onzichtbaar zijn (het tekstveld is onzichtbaar omdat er niets in zit); na het drukken op de knop met het label "Load Text" laden we de tekst uit een voorbeeldtekstbestand en stellen we de UIScrollbar zichtbaar in.
Open een nieuw Flash-document en stel de volgende eigenschappen in:
Open het componentenvenster door naar te gaan Menu> Venster> Componenten of druk op CTRL + F7.
Sleep een UILoader, een label, twee knoppen en een UIScrollbar naar het werkgebied.
In het venster Properties geeft u de UILoader de instantienaam "imageLoader". Als Ga naar in het paneel Eigenschappen niet wordt weergegeven Menu> Venster> Eigenschappen of druk op CTRL + F3.
Stel de X-positie van de UILoader in op 37 en zijn Y op 20
Geef het label de instantienaam "loadedLabel". Stel de X van het label in op 37 en de Y op 182.
Geef de eerste knop de instantienaam "loadImageButton" en stel de X van het label in op 37, zijn Y op 213.
Selecteer in het deelvenster Gereedschappen het gereedschap Tekst en sleep een tekstveld naar het werkgebied. Als het deelvenster Gereedschappen niet wordt weergegeven, gaat u naar Menu> Venster> Tools of druk op CTRL + F2.
Geef het TextField de instantienaam "loremText". Stel de X van de TextField in op 272 en de Y op 15 en stel de breedte in op 243, de hoogte op 101.
Geef de UIScrollbar de instantienaam "textScroller". Stel de X van de UIScrollbar in op 525,00 en de Y op 15
Geef de tweede Button de instantienaam "loadTextButton" en stel de X in op 272, zijn Y op 213.
De UILoader-component is een container die SWF-, JPEG-, progressieve JPEG-, PNG- en GIF-bestanden kan weergeven. U kunt tijdens runtime deze assets laden en optioneel de voortgang van het laden volgen. Om te zien hoe dit kan worden gedaan, bekijk mijn tutorial over de ProgressBar component (de concepten zijn hetzelfde) en van toepassing op de UILoader zoals ik deed met de Loader in die tutorial.
Met de UIScrollbar kunt u een schuifbalk aan een tekstveld toevoegen. Als u een lang tekstblok hebt, kunt u met de UIScrollbar-component scrollen zonder een zeer groot TextField te hebben dat geschikt is voor al uw tekst. Dit onderdeel is zeer eenvoudig in gebruik, omdat u het eenvoudig op een TextField kunt laten vallen en het automatisch "aansluit" op dat TextField. Hier laat ik u zien hoe u dit in ActionScript doet.
Maak een nieuw ActionScript-bestand en geef het de naam Main.as.
We zullen onze componenten in Main.as aangeven, dus we moeten "auto declare stage instances" uitschakelen; het voordeel hiervan is dat je code-hinting krijgt voor de instantie wanneer je de code-editor van Flash gebruikt. Ga hiervoor naar Menu> Bestand> Publicatie-instellingen en klik op Instellingen, naast Script [Actionscript 3.0].
Verwijder het vinkje bij "Stadium-instanties automatisch declareren".
Open in Main.as de pakketverklaring en importeer de klassen die we gaan gebruiken. Voeg het volgende toe aan Main.as:
package // We breiden de klasse van MovieClip import flash.display.MovieClip uit; // Importeer de componenten die we zullen gebruiken import fl.containers.UILoader; import fl.controls.Button; import fl.controls.Label; import fl.controls.UIScrollbar; // Nodig voor onze Event Handlers import flash.events.MouseEvent; import flash.events.Event; // Nodig voor geladen afbeeldingen en tekstimport flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField;
Voeg de klasse toe, zorg dat deze filmclip wordt uitgebreid en stel onze constructorfunctie in.
Hier verklaren we onze variabelen en noemen we onze functies in de Hoofd() constructeur. Voeg het volgende toe aan Main.as:
public class Main breidt MovieClip uit // Onze on-stage componenten public var loadImageButton: Button; public var loadTextButton: Button; public var loadedLabel: Label; public var loremText: TextField; public var imageLoader: UILoader; public var textScroller: UIScrollbar; // Gebruikt om de tekst in het TextField te laden public var textLoader: URLLoader; public function Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Hier zullen we de functies definiëren die in onze constructor worden gebruikt. In de setupButtonAndLabels () functie plaatsen we onze knoppen label eigenschap en voeg gebeurtenislisteners toe die worden geactiveerd wanneer de gebruiker op de knop klikt.
In de setupTextField () functie stellen we de tekstvelden in wordWrap eigendom aan waar dus de tekst zal naar de volgende regel worden omgeslagen wanneer deze de rechterrand van het TextField bereikt.
In setupScrollBar () we stellen de richting van de UIScrollbar in op "verticaal" (dit kan "verticaal" of "horizontaal" zijn) en omdat we niet willen dat het zichtbaar is wanneer de film voor het eerst start, stellen we zijn zichtbaar eigendom aan vals.
Voeg het volgende toe aan Main.as:
private function setupButtonsAndLabels (): void // Stelt de knoppen in Label (tekst getoond op knop) loadImageButton.label = "Afbeelding laden"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Stelt de knoppen in Label (Tekst op knop) loadTextButton.label = "Tekst laden"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Stelt de labeltekst in loadedLabel.text = "Afbeelding niet geladen"; private function setupTextField (): void // Lijnen worden ingepakt wanneer ze het einde (rechterkant) van textfield loremText.wordWrap = true bereiken; private function setupScrollBar (): void // Stelt onze richting van de scrollbar in; kan "verticaal" of "horizontaal" zijn textScroller.direction = "vertical"; textScroller.visible = false;
Hier coderen we de gebeurtenislisteners die we aan de knoppen hebben toegevoegd en sluiten we de klas en het pakket af.
In de loadImage () functie stellen we de scaleContent van de imageLoader naar vals (als het was waar de afbeelding zou verkleinen tot de grootte van de UILoader), omdat we willen dat de afbeelding de normale grootte heeft. Vervolgens laden we de afbeelding en voegen we een gebeurtenislistener toe die wordt geactiveerd wanneer de afbeelding is geladen.
In de loadText () functie die we hebben opgezet URLLoader en laad het tekstbestand. Hier stellen we ook een listener in die moet worden geactiveerd wanneer de tekst is geladen.
In de imageLoaded () functie zetten we de tekst van het label op "Image Loaded" - een eenvoudig voorbeeld, maar je zou iets minder triviaals kunnen doen in een "echte" applicatie.
In de textLoaded () functie stellen we de tekst van het tekstveld in op de gebeurtenissen (e.target.data), wat de tekst uit het tekstbestand zal zijn. We hebben vervolgens de UIScrollBar zichtbaar zijn en instellen scrollTarget (het tekstveld dat we willen beheersen).
Accentsconagua
privéfunctie loadImage (e: MouseEvent): void // Indien ingesteld op waar zou het beeld verkleinen tot de grootte van de UILoader // Hier stellen we in op false zodat de UILoader de werkelijke afbeeldingsgrootte respecteert imageLoader.scaleContent = false; // Laadt de afbeelding en vuurt een functie af wanneer het laden voltooid is imageLoader.load (nieuwe URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); private functie loadText (e: MouseEvent): void // laadt ons tekstbestand en vuurt een functie af wanneer het laden voltooid is textLoader = new URLLoader (); textLoader.load (nieuwe URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); private function imageLoaded (e: Event): void // Plaatst de tekst op het label loadedLabel.text = "Afbeelding geladen"; private function textLoaded (e: Event): void // Zet het TextField op de loaders-gegevens (de tekst in het tekstbestand) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // sluit de klas af sluit het pakket Merk op dat we aan het eind de les en het pakket afsluiten.
Je zult het opmerken in de Componenten Parameters paneel van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren.
De bovenstaande afbeelding is voor de component UILoader.
De eigenschappen voor de UILoader-component zijn als volgt:
De eigenschappen voor de UIScrollbar zijn
De helpbestanden zijn een geweldige plek om meer over deze eigenschappen te leren.
Lees voor meer informatie over de eigenschappen voor labels en knoppen de snelle introductie van de componenten Button en Label.
Bedankt voor het lezen!
