Share
I den här snabba introduktionen till Flash Professional-komponenterna ska vi titta på UILoader och UIScrollbar.
Ta en titt på förhandsvisningen. I SWF, på vänster sida finns en UILoader-komponent som är osynlig vid första anblicken (eftersom det inte finns något i det); Vi laddar en bild i det här.
Under UILoader finns en etikett med texten "Bild ej laddad"; När vi har laddat in bilden så ändrar vi etikettens text för att läsa "Bildbelastad".
Knappen under etiketten används för att starta laddningen av bilden. På höger sida finns ett textfält och UIScrollbar som initialt är osynliga (textfältet är osynligt eftersom det inte finns något i det); När du trycker på knappen med etiketten "Ladda text" laddar vi texten från en provtextfil och ställer in UIScrollbar för att vara synlig.
Ö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 en UILoader, en etikett, två knappar och en UIScrollbar till scenen.
På UILoader-panelen Egenskaper ger instansnamnet "imageLoader". Om Egenskaper panelen inte visas gå till Meny> Fönster> Egenskaper eller tryck CTRL + F3.
Ställ in UILoaderens X-position till 37 och dess Y till 20
Ge etiketten förekomstnamnet "loadedLabel". Ange etiketten X till 37 och dess Y till 182.
Ge den första knappen förekomstnamnet "loadImageButton" och ställ in etiketten X till 37, dess Y till 213.
På verktygspanelen välj textverktyget och dra ut en TextField på scenen. Om panelen Verktyg inte visas går du till Meny> Fönster> Verktyg eller tryck CTRL + F2.
Ge TextField förekomstnamnet "loremText". Ställ in TextFields X till 272 och dess Y till 15, sätt sedan dess bredd till 243, dess höjd till 101.
Ge UIScrollbar förekomstnamnet "textScroller". Ställ in UIScrollbarens X till 525.00 och dess Y till 15
Ge den andra knappen Instansnamnet "loadTextButton" och ställ dess X till 272, dess Y till 213.
UILoader-komponenten är en behållare som kan visa SWF-, JPEG-, progressiv JPEG-, PNG- och GIF-filer. Du kan ladda in dessa tillgångar vid körning och eventuellt övervaka laddningsförloppet. För att se hur detta kan göras, kolla in min handledning i ProgressBar-komponenten (koncepten är desamma) och tillämpa på UILoader som jag gjorde med Loader i den handledningen.
UIScrollbar kan du lägga till en rullningsrad i en textfält. När du har ett långt block av text kan UIScrollbar-komponenten du bläddra igenom utan att ha en mycket stor TextField för att rymma all din text. Denna komponent är väldigt lätt att använda, eftersom du bara kan släppa den på en TextField och det "slår automatiskt upp" till den TextField. Här ska jag visa hur du gör det i ActionScript.
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 sceninstanser"; Fördelen med att göra detta är att du får koden hinting för instansen när du använder Flash kodredigerare. För att göra detta gå till Meny> Arkiv> Publicera inställningar och klicka på Inställningar bredvid Skript [Actionscript 3.0].
Avmarkera "Automatisk deklarera sceninstanser".
I Main.as öppnar du paketdeklarationen och importerar de klasser vi ska använda. Lägg till följande i Main.as:
paket // Vi kommer att förlänga klassen MovieClip import flash.display.MovieClip; // Importera komponenterna vi ska använda import fl.containers.UILoader; importera fl.controls.Button; importera fl.controls.Label; importera fl.controls.UIScrollbar; // Behövs för våra händelsehanterare importera flash.events.MouseEvent; importera flash.events.Event; // Behövs att laddade bilder och text importera flash.net.URLLoader; importera flash.net.URLRequest; importera flash.text.TextField;
Lägg till klassen, gör det förlänga filmklippet och sätt in vår Constructor-funktion.
Här förklarar vi våra variabler och ringer våra funktioner i Main () konstruktör. Lägg till följande i Main.as:
public class Main utökar MovieClip // Våra on-stage komponenter offentliga var loadImageButton: Button; public var loadTextButton: Knapp; public var loadedLabel: Etikett; public var loremText: TextField; public var imageLoader: UILoader; public var textScroller: UIScrollbar; // Används för att ladda texten i TextField public var textLoader: URLLoader; allmän funktion Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Här definierar vi de funktioner som används i vår konstruktör. I setupButtonAndLabels () funktion vi ställer in vår knapp märka egendom och lägg till händelse lyssnare som utlöses när användaren klickar på knappen.
I setupTextField () funktion vi ställer in textfältet wordwrap egendom till Sann så texten kommer att vikas till nästa rad när den når den högra kanten av TextField.
I setupScrollBar () vi ställer in UIScrollbarens riktning till "vertikal" (det här kan vara "vertikalt" eller "horisontellt") och eftersom vi inte vill synas när filmen börjar först sätter vi dess synlig egendom till falsk.
Lägg till följande i Main.as:
privat funktion setupButtonsAndLabels (): void // Ställer in knapparna Etikett (Text som visas på knappen) loadImageButton.label = "Ladda bild"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Ställer in knapparna Etikett (Text som visas på knappen) loadTextButton.label = "Ladda text"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Sätter etiketttexten loadedLabel.text = "Bild ej laddad"; privat funktion setupTextField (): void // Linjerna kommer att vikas när de når slutet (höger sida) av textfältet loremText.wordWrap = true; privat funktion setupScrollBar (): void // Ställer in vår scrollBars-riktning; kan vara "vertikal" eller "horisontell" textScroller.direction = "vertical"; textScroller.visible = false;
Här kodar vi händelselyttarna som vi lagt till i knapparna och stänger sedan klassen och paketet.
I loadImage () funktion vi ställer in scaleContent av imageLoader till falsk (om det vore Sann bilden skulle skala ner till storleken på UILoader), eftersom vi vill att bilden ska vara sin normala storlek. Vi laddar sedan bilden och lägger till en händelseloggare som utlöses när bilden har fyllts i.
I loadText () funktion vi satt upp vår URLLoader och ladda textfilen. Här ställer vi också upp en lyssnare som utlöses när texten är klar.
I imageLoaded () funktion vi ställer etikettens text till "Image Loaded" - ett enkelt exempel, men du kan göra något mindre trivialt i en "riktig" applikation.
I textLoaded () funktion vi sätter textfältets text till evenemangets (e.target.data), som kommer att vara texten från textfilen. Vi ställer sedan in UIScrollBar att vara synlig och sätta sin scroll (det textfält vi önskar att kontrollera).
Accentsconagua
privat funktion loadImage (e: MouseEvent): void // Om sätts till true skulle bilden skala ner till storleken på UILoader // Här ställs vi till fel så att UILoader respekterar den faktiska bildstorleken imageLoader.scaleContent = false; // Laddar bilden och avfyrar en funktion när laddningen är klar imageLoader.load (ny URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); Private Function loadText (e: MouseEvent): void // Laddar vår textfil och avfyrar en funktion när laddningen är klar textLoader = ny URLLoader (); textLoader.load (ny URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); privat funktion imageLoaded (e: Event): void // Ställer in texten på etiketten loadedLabel.text = "Image loaded"; privat funktion textLoaded (e: Event): void // Ställer in TextField till lastarens data (texten i textfilen) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // stäng ut klassen stäng ut paketet Observera att vi i slutändan stänger ut klassen och paketet.
Du kommer att märka i Komponenter Parametrar panelen av komponenterna som du kan kontrollera och välj vissa egenskaper.
Ovanstående bild är för UILoader-komponenten.
Egenskaperna för UILoader-komponenten är följande:
Egenskaperna för UIScrollbar är
Hjälpfilerna är ett bra ställe att lära dig mer om dessa egenskaper.
Om du vill lära dig mer om egenskaperna för etiketter och knappar ska du kolla in Snabbinledning till knapparna och etikettkomponenterna.
Tack för att du läser!
