Share
I denne raske introduksjonen til Flash Professional-komponentene skal vi se på UILoader og UIScrollbar.
Ta en titt på forhåndsvisningen. I SWF, på venstre side er det en UILoader-komponent som er usynlig ved første øyekast (fordi det ikke er noe i det); Vi legger inn et bilde i dette.
Under UILoader er det en etikett med teksten "Bilde ikke lastet"; Når vi har lastet inn bildet, endrer vi denne etikettens tekst for å lese "Image Loaded".
Knappen under etiketten brukes til å starte lastingen av bildet. På høyre side er det et tekstfelt og UIScrollbar som i utgangspunktet er usynlig (tekstfeltet er usynlig fordi det ikke er noe i det); Ved å trykke på knappen med etiketten "Legg inn tekst" laster vi inn teksten fra en prøve tekstfil og stiller UIScrollbaren til syne.
Åpne et nytt Flash-dokument og angi følgende egenskaper:
Åpne komponentvinduet ved å gå til Meny> Vindu> Komponenter eller trykk CTRL + F7.
Dra en UILoader, en etikett, to knapper og en UIScrollbar til scenen.
I Egenskapspanelet gi UILoader forekomstnavnet "ImageLoader". Hvis Egenskaper-panelet ikke vises, gå til Meny> Vindu> Egenskaper eller trykk CTRL + F3.
Sett UILoaderens X-posisjon til 37 og dens Y til 20
Gi etiketten forekomstnavnet "loadedLabel". Sett etiketten X til 37 og dens Y til 182.
Gi den første knappen forekomstnavnet "loadImageButton" og sett etiketten X til 37, dens Y til 213.
På verktøylinjen velger du Tekstverktøyet og trekker ut en TextField på scenen. Hvis Verktøy-panelet ikke vises, gå til Meny> Vindu> Verktøy eller trykk CTRL + F2.
Gi TextField forekomstnavnet "loremText". Sett TextFields X til 272 og dets Y til 15, sett deretter bredden til 243, dens høyde til 101.
Gi UIScrollbar forekomstnavnet "textScroller". Sett UIScrollbarens X til 525.00 og dens Y til 15
Gi den andre knappen Instansnavnet "loadTextButton" og sett dets X til 272, dets Y til 213.
UILoader-komponenten er en beholder som kan vise SWF-, JPEG-, progressive JPEG-, PNG- og GIF-filer. Du kan laste inn disse eiendelene ved kjøring og eventuelt overvåke lasteproblemer. For å se hvordan dette kan gjøres, sjekk ut min veiledning på ProgressBar-komponenten (konseptene er de samme) og gjelder for UILoader som jeg gjorde med Loader i den opplæringen.
UIScrollbar lar deg legge til en rullefelt i en textfelt. Når du har en lang blokk med tekst, kan UIScrollbar-komponenten du bla gjennom uten å ha en veldig stor TextField for å imøtekomme all tekst. Denne komponenten er veldig enkel å bruke, fordi du bare kan slippe den på en TextField, og den "wires up" automatisk til den TextField. Her viser jeg deg hvordan du gjør det i ActionScript.
Opprett en ny ActionScript-fil og gi den navnet Main.as.
Vi vil erklære komponentene våre i Main.as, så vi må slå av "auto deklarere scenevaner"; Fordelen med å gjøre dette er at du får koden hinting for forekomsten når du bruker Flash kodeditor. For å gjøre dette, gå til Meny> Fil> Publiser innstillinger og klikk på Innstillinger ved siden av Skript [Actionscript 3.0].
Fjern merket for "Oppgi automatisk forekomst av forekomster".
I Main.as åpner du pakkedeklarasjonen og importerer klassene vi skal bruke. Legg til følgende til Main.as:
pakke // Vi vil forlenge klassen av MovieClip import flash.display.MovieClip; // Importer komponentene vi skal bruke import fl.containers.UILoader; importere fl.controls.Button; importere fl.controls.Label; importere fl.controls.UIScrollbar; // Trengs for våre Event Handlers importere flash.events.MouseEvent; importere flash.events.Event; // Trenger du å laste bilder og tekst importere flash.net.URLLoader; importere flash.net.URLRequest; importer flash.text.TextField;
Legg til klassen, gjør det utvide Filmklipp, og sett opp vår Constructor-funksjon.
Her erklærer vi våre variabler og ringer våre funksjoner i Hoved() konstruktør. Legg til følgende til Main.as:
offentlig klasse Main utvider MovieClip // Våre on-stage komponenter offentlige var loadImageButton: Button; offentlig var loadTextButton: Button; offentlig var loadedLabel: Etikett; offentlig var loremText: TextField; offentlig var imageLader: UILoader; offentlig var textScroller: UIScrollbar; // Brukes til å laste inn teksten i TextField-publikum var textLoader: URLLoader; offentlig funksjon Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Her definerer vi funksjonene som brukes i vår konstruktør. I setupButtonAndLabels () funksjon vi setter vår knapp merkelapp eiendom og legge til hendelseslyttere som utløses når brukeren klikker på knappen.
I setupTextField () funksjon vi setter inn tekstfeltet wordwrap eiendom til ekte slik at teksten vil vikle til neste linje når den når den høyre kanten av TextField.
I setupScrollBar () Vi stiller UIScrollbarens retning til "vertikal" (dette kan være "vertikal" eller "horisontal"), og siden vi ikke vil se den når filmen først starter, setter vi dens synlig eiendom til falsk.
Legg til følgende til Main.as:
private funksjon setupButtonsAndLabels (): void // Setter knappene Etikett (Tekst vist på knappen) loadImageButton.label = "Load Image"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Setter knappene Etikett (Tekst vist på knappen) loadTextButton.label = "Legg inn tekst"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Setter etiketttekst loadedLabel.text = "Bilde ikke lastet"; privat funksjon setupTextField (): void // Linjer vil vikle når de når slutten (høyre side) av textfield loremText.wordWrap = true; privat funksjon setupScrollBar (): void // Setter vår scrollBars retning; kan være "vertikal" eller "horisontal" textScroller.direction = "vertical"; textScroller.visible = false;
Her vil vi kode hendelseslytterne vi legger til knappene og deretter lukke klassen og pakken.
I loadImage () funksjonen vi setter scaleContent av imageLoader til falsk (hvis det var ekte bildet ville skalere ned til størrelsen på UILoader), da vi vil at bildet skal være sin normale størrelse. Vi laster deretter bildet og legger til en hendelseslytter som utløses når bildet er fullført.
I loadText () funksjon vi satt opp vår URLLoader og last inn tekstfilen. Her oppretter vi også en lytter som utløses når teksten er fullført.
I imageLoaded () funksjon vi setter etikettens tekst til "Image Loaded" - et enkelt eksempel, men du kan gjøre noe mindre trivielt i en "ekte" applikasjon.
I textLoaded () funksjon vi setter tekstfeltets tekst til hendelsen (e.target.data), som vil være teksten fra tekstfilen. Vi setter da UIScrollbar å være synlig og sette sin scrollTarget (tekstfeltet vi ønsker at det skal kontrolleres).
Accentsconagua
privat funksjon loadImage (e: MouseEvent): void // Hvis ble satt til true, ville bildet skalere ned til størrelsen på UILoader // Her satt vi til falske, slik at UILoader respekterer den faktiske bildestørrelsen imageLoader.scaleContent = false; // Laster bildet og brenner en funksjon når lastingen er fullført imageLoader.load (ny URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); private funksjon loadText (e: MouseEvent): void // Laster vår tekstfil og brenner en funksjon når lastingen er fullført textLoader = ny URLLoader (); textLoader.load (ny URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); privat funksjon imageLoaded (e: Event): void // Setter teksten på etiketten loadedLabel.text = "Bilde lastet"; privat funksjon textLoaded (e: Event): void // Setter TextField til lasterens data (teksten i tekstfilen) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // lukk ut klassen lukk pakken ut Legg merke til at på slutten lukker vi ut klassen og pakken.
Du vil legge merke til i Komponenter Parametre panel av komponentene som du kan sjekke og velge bestemte egenskaper.
Ovenstående bilde er for UILoader-komponenten.
Egenskapene for UILoader-komponenten er som følger:
Egenskapene for UIScrollbar er
Hjelpefilene er et flott sted å lære mer om disse egenskapene.
Hvis du vil vite mer om egenskapene for etiketter og knapper, må du sjekke ut Hurtig introduksjon til knappene og etikettkomponentene.
Takk for at du leste!
