Easily Lag Souped-Up Flash tekstfelt Tekstfelt
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil jeg lede deg gjennom trinnene som kreves for å installere og bruke textarea komponent som et alternativ til Flash innfødte Textfield klassen, og viser deg hvordan du kan oppdage musen rulle over /out hendelser på hyperkoblinger. Jeg vil også snakke om hvordan du kan kalle egendefinerte funksjoner og passere ulike datatyper som argumenter.
Bakgrunn
De innfødte Textfield klassen var den første til å støtte tekst skript i Flash prosjekter. Med Textfield, kan du støtte dynamisk og statisk tekst, samt inngangstype for å tillate brukeren interaktivitet. Det støttes også en (meget begrenset) utvalg av HTML-koder for styling skript - men når man sammenligner denne smale tilgjengeligheten av HTML-støtte i Textfield til hva som er mulig med vanlige HTML-filer som brukes innen nettlesere, Flash-utviklere følte ekstrem mangel på fleksibilitet når arbeider med tekst
i 2009 da TLFTextField ble innført, utviklere var håper å se noen løsninger -., men disse ikke vises. I dag, med tekstfeltet klasse, kan du gjøre det du alltid har ønsket med tekstblokker. Funksjonalitet som påvise rulle over /ut href lenker, ringer egendefinerte funksjoner fra tekstblokker, skaper anker koblinger, lasting tilpassede opprettet tagger som videospillere, lysbildefremvisning, og knapper. Disse er alle nå mulig med Tekstfelt
< h2> Endelig resultat Forhåndsvisning
følgende enkle grei demo vil presentere hvordan definerte funksjoner kalles på hyperkoblinger. Dette er hva du vil bygge i de neste 30 minuttene:
Trinn 1: Sette opp Miljøvern
Tekstfelt kan brukes i alle IDE som samler AS3 - som Flash Builder, CS pro-versjoner og FlashDevelop - som betyr at det vil fungere på tvers av Flash-plattformen (i Flex, AIR og AS3-bare webprosjekter). Ulike IDE hver har en eller annen måte ligner, men unik tilnærming til hvordan du kompilere prosjektet, og på grunn av dette mangfoldet er det noen ganger frustrerende, spesielt for nybegynnere, for å jobbe med AS3 tutorials fordi forfatteren foretrekker Flash Builder mens eleven er vant til å jobbe med CS IDE.
For å løse dette problemet, vil jeg prøve å forklare bruk av Tekstfelt uavhengig av IDE. Så, er det første skrittet for å sette opp miljøet. Uansett hvilken IDE du bruker, bare åpne den og opprette en ny AS3 prosjekt, og deretter lagre den et sted på datamaskinen.
Opprett et dokument klasse, navn det Main.as Tekstfeltegenskaper er gratis å laste ned og bruke, men sørg for å lese lisensavtaler her Pakk ut zip-filen du lastet ned, TextArea.zip ved å kopiere com Etter nedlasting og installasjon tekstfeltet, er det på tide å initialisere den. Først må du importere de nødvendige klassene til hovedklassen. Ta deretter hello world Test din film, og denne gangen i stedet for å gi ut hello world som du kan se, tekst~~POS=TRUNC felt~~POS=TRUNC fungerer akkurat som de innfødte Textfield klassen. Alle de forskjellige innstillingene som du kan gjelde Textfield er sant for Tekstfelt også; det er i utgangspunktet en utvidelse til Textfield så det vil gjøre alt Textfield gjør, pluss mer. Jeg skal snakke om disse ekstra funksjonene i de neste avsnittene For å gjøre denne opplæringen så informativ som mulig og å gjøre den brukbar for virkelige verden praksis, la oss prøve å mate textarea eksempel med data fra en ekstern XML-fil. Dette procress vil igjen være lik hvordan du laster XML-data inn i Textfield. Først oppretter XML-filen og plassere den hvor du har publisert SWF-fil fra forrige trinn. Gjør XML se ut som nedenfor, og lagre det som "data.xml":?! (. Slik at XML inneholder HTML i en CDATA seksjon) Nå komme tilbake til Main. som Legg de nødvendige import for xml less Deretter erstatte hele Hoved () De ovenkoden lastes data.xml - det er ingen forskjell fra hvordan du ville ha gjort det med en Textfield så langt den første og viktigste å huske om bruk Tekstfeltegenskaper er at du bør bruke fmlText metode for sending tekst skript i forekomsten i stedet for å bruke den klassiske htmlText. Den fmlText metoden vil analysere skript ved hjelp av en annen tilnærming enn htmlText; det står for Flash Markup Language Tekst Så, i testprosjektet, erstatte htmlText med fmlText som nedenfor det neste du må gjøre er å lage to egendefinerte funksjoner i dokumentet klassen, Main.as, som vil bli kalt når du roll eller rulle ut en hyperlenke (som vi vil bygge senere i data.xml). For å få til denne opplæringen, vil disse to funksjonene bare spore noen utganger, men i den virkelige verden, kan du gjøre hva du vil med disse funksjonene - som for eksempel å åpne et verktøytips vindu Du bør også sette noen innstillinger under initialisering textarea eksempel. Legg disse linjene like etter at du initialTekstFelt Også legge til følgende linje i begynnelsen av Main () -funksjonen Det er ganske mye alt du trenger å gjøre i din .as fil; og resten vil bli gjort i XML men før vi går til XML og opprette en hyperkobling, la oss snakke litt om innstillingene ovenfor. Først vi har holder Da har vi klient Vi har også den mouseRollOverEnabled Da har vi to sikkerhetsegenskaper. allowedFunctions Hotell og funcSecurity Ok, for å se det magiske, komme tilbake til data.xml og og legg til følgende linje et sted inne i CDATA seksjonen: . som du ser du har laget to funksjonskall (en på musen roll, en på musen utrulling), og du kan gjøre hva du vil med disse funksjonene inni AS3 prosjekt. Men dette er ikke alt! I neste avsnitt vil jeg snakke om hvordan du kan kalle egendefinerte funksjoner og passerer ulike typer data som argumenter Opp til nå, du har lært hvordan du setter textarea eksempel klar for å akseptere funksjonskall fra HTML-innhold som kan plasseres i eksterne kilder som XML. Nå skal vi sende ulike typer argumenter sammen med samtalene. Vi kan sende array, objekt og enkle strengtypene. Prøv å legge følgende hyperkobling et sted inne i CDATA tag i XML-filen: Dette vil skape fem funksjonskall i. din AS3 prosjekt; hver funksjon viser hvordan du kan sende ulike typer argumenter. Men husk at dette ikke vil fungere før du faktisk lage disse funksjonene inni AS3 prosjekt. For å gjøre det, er å legge disse funksjonene sammen med funcOnOver () og funcOnOut () funksjoner som du hadde tidligere: Nå har du samtaler i XML og funksjonene er også tilgjengelige i AS3 prosjekt; alt som gjenstår er å gi bruken tillatelse til textarea eksempel. Endre allowedFunctions Nå publisere og teste prosjektet og prøve å klikke på hyperkoblinger du har laget. Gratulerer, du har nå lært hvordan du aktiverer mus roll og utrulling i tekstfelt, og du vet hvordan du oppretter egendefinerte funksjoner og kaller dem innenfra tekstblokker. Tekstfelt strekker Textfield, bare legger 6KB til prosjektet, og kan brukes som et alternativ til Textfield. I denne opplæringen har lært deg hvordan å initialTekstFelt å lage enkle hyperkoblinger som kan ringe til egendefinerte funksjoner inni AS3 prosjekt, og du har også lært hvordan du aktiverer mus roll og utrulling deteksjon på hyperkoblinger som kan ringe til egendefinerte funksjoner. Det er mange ting du kan gjøre med disse funksjonene, som åpner et verktøytips når rulle over en viss hyperkobling eller lage koblinger som kaller en egendefinert funksjon i prosjektet for å navigere gjennom programsider enklere. jeg håper du finner denne opplæringen (og Tekstfelt selv) nyttig!
, og legge et spor kall til utgang Hello World
pakke {import flash.display.MovieClip public class Hoved strekker MovieClip {offentlig funksjon main (). void {trace ( "Hello World")}} }
Trinn 2: Last ned Tekstfelt
. Hodet til doitflash.com og finne nedlastingsknappen nederst på hjemmesiden for å laste ned textarea klasser.
, til datamaskinen, kan du gå til mappen Tekstfelt /Src
, og kopiere com
mappe deretter til samme katalog som dokumentet klassen, Main.as
.
mappen hvor du har din prosjektdokument klasse, er du la IDE finne textarea klasser bare i dette konkrete prosjektet. Alternativt kan du kopiere klassene til global klassebanen slik at det alltid vil være tilgjengelig for alle dine prosjekter - for å finne ut mer, kan du lese hvordan du bruker en ekstern Biblioteket i flash Prosjekter
. Trinn 3: initial~~POS=TRUNC
import com.doitflash.text.TextArea;
spor funksjon og skriv inn følgende i stedet
Var _textArea. Tekstfelt = new Tekstfeltegenskaper (); _textArea.wordWrap = true; _textArea.multiline = true; _textArea.htmlText = "Initialtekstfelt akkurat som du brukte til å initialTextField."; this.addChild (_textArea);
, vil du se et tekstfelt (men ikke en Textfield!) opprettet for deg:
Trinn 4:. Fôring Tekstfeltegenskaper Med en XML-fil
≪ xml version = "1.0" encoding = "UTF-8" > < data > < [CDATA [< p align = "left" > < font face = "Tahoma" size = "13" color = "# 333333" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi utca mi. Klasserom enim leo, egestas id, condimentum på, laoreet Mattis, massa. ≪ /font > < /p >]] > < /data >
, som skal se ut som følgende:
pakke {import flash.display.MovieClip import com.doitflash.text.TextArea; public class Hoved strekker MovieClip {offentlig funksjon main (): void {var _textArea: Tekstfelt = new Tekstfeltegenskaper (); _textArea.wordWrap = true; _textArea.multiline = true; _textArea.htmlText = "Initialtekstfelt akkurat som du brukte til å initialTextField."; this.addChild (_textArea); }}}
import flash.events.Event,. Import flash.net.URLLoader, import flash.net.URLRequest;
funksjon med denne
offentlig funksjon main (): void {var loader. URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onXmlLoaded); loader.load (ny URLRequest ( "data.xml")); funksjon onXmlLoaded (e: Hendelses): void {var xml: XML = ny XML (e.currentTarget.data); Var _textArea: Tekstfelt = new Tekstfeltegenskaper (); _textArea.wordWrap = true; _textArea.multiline = true; _textArea.width = 400; _textArea.height = 200; _textArea.condenseWhite = true; _textArea.htmlText = xml.text (); addChild (_textArea); }}
Trinn 5: Oppdager Mouse Roll /Utrulling
<. p> for å bruke bestemte funksjoner i Tekstfeltegenskaper, må du angi noen ekstra innstillinger når initialisere den.
_textArea.fmlText = xml.text ();..
offentlig funksjon funcOnOver ().: void {trace ( "rollover");} offentlig funksjon funcOnOut (): void {trace ( "utrullingen");}
_textArea.holder = refToThis.; //Angir stedet der du legger Tekstfelt å stage_textArea.client = refToThis; //Må være det stedet der du har din "allowedFunctions" saved_textArea.mouseRollOverEnabled = true; //Lar musen roll detection_textArea.funcSecurity = true; //Gjør at kun funksjonsnavn i "allowedFunctions" er accessible_textArea.allowedFunctions (funcOnOver, funcOnOut);
Var refToThis. Objekt = dette; < p> for å sikre at du har skrevet inn koden i Main.as
riktig, nedenfor er hvordan filen skal se opp til nå.
pakke {import flash.display.MovieClip import com.doitflash.text .TextArea; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; public class Hoved strekker MovieClip {offentlig funksjon main (): void {var refToThis: Object = dette; Var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, onXmlLoaded); loader.load (ny URLRequest ( "data.xml")); funksjon onXmlLoaded (e: Hendelses): void {var xml: XML = ny XML (e.currentTarget.data); Var _textArea: Tekstfelt = new Tekstfeltegenskaper (); _textArea.holder = refToThis; //Angir stedet der du legger Tekstfelt å iscenesette _textArea.client = refToThis; //Må være det stedet der du har din "allowedFunctions" frelst _textArea.mouseRollOverEnabled = true; //Lar musen roll deteksjon _textArea.funcSecurity = true; //Gjør at kun funksjonsnavn i "allowedFunctions" er tilgjengelige _textArea.allowedFunctions (funcOnOver, funcOnOut); _textArea.wordWrap = true; _textArea.multiline = true; _textArea.width = 400; _textArea.height = 200; _textArea.condenseWhite = true; _textArea.fmlText = xml.text (); addChild (_textArea); }} Offentlig funksjon funcOnOver (): void {trace ( "rollover"); } Offentlig funksjon funcOnOut (): void {trace ( "utrullingen"); }}}
eiendom som er noe som du ikke vil bruke i denne artikkelen, men når du går dypere inn i Tekstfelt å opprette egendefinerte html-koder du trenger dette mye; på grunn av denne opplæringen, er det nok for deg å vite at denne eiendommen lagrer posisjonen der du skal legge textarea eksempel i scenen.
eiendom. Dette er plasseringen av - eller bedre å si, dette er en referanse til - en klasse hvor du lagrer alle dine tillatte funksjoner. I dette eksempelet bruker vi Main.as som klient, men hvis du har en lang liste med funksjoner som vil gi dem tillatelse til å bli kalt fra tekst skript, kan du foretrekker å lage en egen klasse for det formålet.
eiendom som er satt til false som standard for ytelse grunner. Hvis du ønsker å oppdage musen rulle over /ut hyperkoblinger, må du sørge for at du aktiverer denne egenskapen
. Disse egenskapene vil la deg begrense kalt funksjoner til de spesifikke de som er nevnt i allowedFunctions
metode.
Her er en < u > < a href = 'onMouseOver: funcOnOver (); onmouseout: funcOnOut ()' > PRØVE LINK < /a > < /u >
Trinn 6:. Pass Argumenter til funksjoner
< u > < a href = 'event: func1 ()' > ENKEL CALL < /a > < /u > <. br /> < u > < a href =. 'event: func2 (noen streng)' > SEND STRING < /a > < /u > < br /> < u > < a href = 'event: func3 ([0,1,2,3,4])' > SEND ARRAY < /a > < /u > < br /> < u > < a href = 'event. : func4 ({var1: VAL1; var2: VAL2}) '> SEND OBJECT < /a > < /u > < br /> < u > < a href =.' event: func5 (streng, [0,1,2], {var1: VAL1; var2: VAL2}) '> SEND BLANDET ARGUMENTER < /a > < /u > < br />
offentlig funksjon func1 (): void {trace ( "ingen argumenter sendt"); } Offentlig funksjon func2 ($ str: String): void {trace ( "argumenter > >" + $ str); } Offentlig funksjon func3 ($ arr: Array): void {trace ( "argumenter > >" + $ arr); } Offentlig funksjon func4 ($ obj: Object): void {trace ( "argumenter > >" + $ obj); } Offentlig funksjon func5 ($ str: String, $ arr: Array, $ obj: Object): void {trace ( "argumenter > >" + $ str); trace ( "argumenter > >" + $ arr); trace ( "argumenter > >" + $ obj); }
metode for Tekstfeltegenskaper som så:
_textArea.allowedFunctions (funcOnOver, funcOnOut, funk1, func2, func3, func4, func5);
Konklusjon