Hurtig Innledning: Flash UILoader og UIScrollbar Components

Quick Innledning: Flash UILoader og UIScrollbar Components
Del
Del
Del
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne rask innføring i Flash Professional Components, vi kommer til å se på UILoader og UIScrollbar.




Brief Oversikt

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 er ingenting i det); vi skal laste inn et bilde i dette.

Under UILoader er det en etikett med teksten "Image Not Loaded"; på hell lasting av bildet vi vil endre denne etiketten tekst å lese "Image Loaded".

Knappen under etiketten brukes til å starte lastingen av bildet. På høyre side er det et tekstfelt og UIScrollbar som er utgangspunktet usynlig (tekstfeltet er usynlig fordi det er ingenting i det); Ved å trykke på knappen med etiketten "Load Text" vi laster teksten fra en prøve tekstfil og sette UIScrollbar å være synlig



Trinn 1:. Sette opp Document

Åpne en ny Flash dokument og angi følgende egenskaper:

Dokumentstørrelse: 550x260px

Bakgrunnsfarge: #FFFFFF



Trinn 2: Legg Komponenter til Stage

Åpne komponenter vinduet ved å gå til Meny > Vindu > Komponenter
eller trykke CTRL + F7.

Dra en UILoader, en etikett, to knapper, og en UIScrollbar til scenen.

I panelet Egenskaper gi UILoader forekomstnavnet " imageLoader ". Hvis Properties panelet ikke vises gå til Meny > Vindu > Egenskaper
eller trykk CTRL + F3.

Sett UILoader sin X stilling til 37 og dens Y til 20

Gi etiketten forekomstnavnet "loadedLabel". Sett etikettens X til 37 og dens Y til 182.

Gi den første knappen forekomstnavnet "loadImageButton" og sette etikettens X til 37, sin Y til 213.

I Verktøy panel velg tekstverktøyet, og dra ut en Textfield på scenen. Hvis verktøypanelet ikke vises gå til Meny > Vindu > Verktøy
eller trykk CTRL + F2.

Gi Textfield forekomstnavnet "loremText". Sett Textfield sin X til 272 og dens Y til 15, deretter sette bredden til 243, høyden til 101.

Gi UIScrollbar forekomstnavnet "textScroller". Sett UIScrollbar sin X til 525,00 og dens Y til 15

Gi andre Button forekomstnavnet "loadTextButton" og sette X til 272, dens Y til 213.



Forklare komponenter

UILoader komponenten er en beholder som kan vise SWF, JPEG, progressive JPEG, PNG og GIF files.You kan legge i disse eiendelene under kjøring og eventuelt overvåke innlastingen. For å se hvordan dette kan gjøres, sjekk ut min tutorial på ProgressBar komponent (begrepene er de samme) og gjelder for det UILoader som jeg gjorde med Loader i at opplæringen.

UIScrollbar lar deg legge til en scrollbar til en tekstfeltet. Når du har en lang tekstblokk på UIScrollbar komponenten kan du bla gjennom uten å ha en veldig stor Textfield å imøtekomme all teksten. Denne komponenten er svært enkel å bruke at du kan bare slippe den på et Textfield og den automatisk "ledninger opp" til at Textfield. Her vil jeg vise deg hvordan du gjør det i Action



Trinn 3:. Klar AS File

Opprett en ny Actionscript-fil og gi den navnet Main.as.

Vi vil erklære våre komponenter i Main.as så vi må slå av "auto erklære scene forekomster"; Fordelen med å gjøre dette er at du får koden hinting for eksempel ved bruk av Flash kode editor. For å gjøre dette gå til Meny > Fil > Publish Settings Hotell og klikk på Innstillinger, ved siden av Script [Actionscript 3.0]
.

Fjern haken ved «erklære automatisk scene forekomster".

I Main.as, åpen pakken erklæringen og importere klassene vi skal bruke. Legg til følgende Main.as:
pakken {//Vi vil utvide klassen av MovieClip import flash.display.MovieClip; //Import komponentene vi skal bruke import fl.containers.UILoader; import fl.controls.Button; import fl.controls.Label; import fl.controls.UIScrollbar; //Trengs for vårt arrangement Handlers importere flash.events.MouseEvent; import flash.events.Event; //Nødvendig å Loaded bilder og tekst import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField;



Trinn 4:. Sett opp hoved Class

Legg til klassen, gjør det utvide filmklipp, og sette opp vår Constructor Funksjon

Her erklærer vi våre variabler og ringe våre funksjoner i main () konstruktør. Legg til følgende Main.as:
public class Hoved strekker MovieClip {//Våre på scenen komponenter offentlig Var loadImageButton: Button; offentlig Var loadTextButton: Button; offentlig Var loadedLabel: Etikett; offentlig Var loremText: Textfield; offentlig Var imageLoader: UILoader; offentlig Var textScroller: UIScrollbar; //Brukes til å laste inn tekst i tekstfeltet offentlig Var textLoader: URLLoader; offentlig funksjon main () {setupButtonsAndLabels (); setupTextField (); setupScrollBar (); }



Trinn 5: Hoved Constructor Funksjoner

Her vil vi definere funksjonene som brukes i vår konstruktør. I setupButtonAndLabels () -funksjonen vi satt knappen vår etikett eiendom og legge hendelsen lyttere til å bli utløst når brukeren klikker på knappen.

I setupTextField () -funksjonen vi setter teksten feltets wordwrap eiendom til sann så teksten vil vikle til neste linje når det kommer til den høyre kanten av Textfield.

I setupScrollBar () vi setter UIScrollbar retning til "vertikal" (dette kan være "vertikal" eller "horisontal"), og siden vi vil ikke ha det synlig når filmen først starter, vi setter sin synlig eiendom til false

Legg til følgende Main.as.
private funksjons setupButtonsAndLabels (): void {//Setter knapper Etikett (Tekst vist på Button) loadImageButton.label = "Load Image"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); //Setter knapper Etikett (Tekst vist på Button) loadTextButton.label = "Load Text"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); //Setter etikettene tekst loadedLabel.text = "Image Not Loaded";} private funksjon setupTextField (): void {//Lines vil bryte når de når slutten (høyre side) av tekstfeltet loremText.wordWrap = true;} private funksjon setupScrollBar (): void {//Setter vår scrollbars retning; kan være "vertikal" eller "horisontal" textScroller.direction = "vertikal"; textScroller.visible = false;}



Trinn 6:. tilstelninger Lyttere

Her vil vi kode hendelses lyttere vi lagt til knappene og deretter lukke ut klassen og pakke
< p> I loadImage () -funksjonen vi setter scaleContent av imageLoader til false (hvis det var sant bildet vil skalere ned til størrelsen på UILoader), som vi vil at bildet skal være normal størrelse. Vi deretter laste bildet og legge til en hendelse lytteren skal utløses når bildet er ferdig lastet.

I loadText () -funksjonen setter vi opp vår URLLoader og laste tekstfil. Her har vi også satt opp en lytter som skal utløses når teksten er ferdig lastet

I imageLoaded () -funksjonen vi setter etikettens teksten til "Image Loaded." - Et enkelt eksempel, men du kan gjøre noe mindre triviell i en "ekte" program.

I textLoaded () -funksjonen vi satt tekstfeltet tekst til Event (e.target.data), som vil være teksten fra tekstfilen. Vi setter UIScrollbar å være synlig og sette scrollTarget (tekstfeltet vi ønsker den skal styre)
privat funksjon loadImage. (E: MouseEvent): void {//Dersom ble satt til true bildet vil skalere ned til størrelsen på UILoader //Her har vi satt til false så UILoader respekterer den faktiske bildestørrelsen imageLoader.scaleContent = false; //Laster bildet og fyrer av en funksjon ved lasting er ferdig imageLoader.load (ny URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); } Private funksjon loadText (e: MouseEvent): void {//Laster vår tekstfil og fyrer av en funksjon når lastingen er fullført textLoader = new URLLoader (); textLoader.load (ny URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); } Private funksjon imageLoaded (e: Hendelses): void {//Setter teksten på etiketten loadedLabel.text = "Image Loaded"; } Private funksjon textLoaded (e: Hendelses): void {//Setter Textfield til lastere data (tekst i tekstfil) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; }} //Lukke ut klassen} lukke ut pakken

Legg merke til at på slutten vi lukke ut klasse og pakke.



Konklusjon

Du vil merke i Komponenter Parametere
panel av komponentene som du kan sjekke og velger visse egenskaper.

Bildet over er for UILoader komponent.

Egenskapene for UILoader komponenten er som følger:

Autostart: en boolsk verdi som angir å automatisk laste spesifisert innhold

aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
< li> maintainAspectRatio: en boolsk verdi en verdi som angir om å opprettholde størrelsesforholdet som ble brukt i det opprinnelige bildet, eller for bedriften endre størrelsen på bildet til gjeldende bredden og høyden på UILoader komponent

scaleContent: en boolsk verdi som angir om du vil automatisk skalere bildet til størrelsen på UILoader eksempel

kilde: en absolutt eller relativ URL-adresse som identifiserer plasseringen av innholdet for å laste

synlig: en boolsk verdi som angir hvorvidt komponenten er synlig på scenen

Egenskapene for UIScrollbar er

retning: angir retning av rullefeltet (kan være "vertikal "eller" horisontal ")

scrollTargetName: målet Textfield til hvilken UIScrollbar er registrert

synlig: en boolsk verdi som angir hvorvidt komponenten er synlig på scenen

Hjelpefilene er et flott sted å lære mer om disse egenskapene.

Hvis du vil vite mer om egenskapene for etiketter og Button husk å sjekke ut Quick Introduksjon til knappen og Merk komponenter.

Takk for lesing!