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 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 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 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. 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 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: 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: 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. Her vil vi kode hendelses lyttere vi lagt til knappene og deretter lukke ut klassen og pakke 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) Legg merke til at på slutten vi lukke ut klasse og pakke. Du vil merke i Komponenter Parametere Bildet over er for UILoader komponent. 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 Button husk å sjekke ut Quick Introduksjon til knappen og Merk komponenter. Takk for lesing!
eller trykke CTRL + F7.
eller trykk CTRL + F3.
eller trykk CTRL + F2.
Forklare komponenter
Trinn 3:. Klar AS File
.
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
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
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
< 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.
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
Konklusjon
panel av komponentene som du kan sjekke og velger visse egenskaper.
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
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