Build en Actionscript 3.0 HTML Box med XML og CSS Support
Del
Del
Del
Del < .no> Denne Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen, vil vi skape en HTML-Box som analyserer innholdet som blir lastet fra XML og CSS. Vi vil bygge den ved hjelp av Actionscript 3.0, slik at vi kan kompilere den i FlashDevelop. Jeg vil også vise hvordan å kompilere den i Flash IDE. Vi vil fokusere på å lage eksterne skriptfiler (klasser), lasting og ved hjelp av XML og CSS-filer, som alle vil anta en viss forståelse av Actionscript. La oss komme i gang!

Innledning

I løpet av de neste trinnene skal vi lage en HTML-Box hjelp Actionscript 3.0. Underveis får vi se:

Opprette eksterne skript (klasser)

Laster, tolking og bruk av XML og CSS-filer

Opprette nye hendelser med.. "dispatchEvent".

Bruk "TextEvent".

Bruk htmlText tags.

Du kan lage filene som vi skal se nedenfor i en texteditor som notepad etc., jeg skal bruke FlashDevelop som et utviklingsmiljø. Våre filer vil be:


"styles.css"

"source.xml"

"CSS.as"

"XMLLoader.as"

"Main.as"

and for de som ønsker å kompilere i Flash IDE:

"htmlBox.fla"

Trinn 1 - Starte HTML BOX

I FlashDevelop, start et nytt prosjekt. Velg "AS3 prosjekt" og gi den navnet "htmlBox".

Når du har opprettet prosjektet, "Main.as" vil bli opprettet automatisk. Du må opprette andre filer manuelt. Legg til en mappe som heter "keremk" for å src mappe

I denne mappen, vil vi skape "XMLLoader.as" og "CSS.as" ved å høyreklikke "keremk" og kommer til å legge til >.; Ny klasse ... Vi vil også legge til vår "source.xml" og "Styles.css" filer til bin mappen ved å høyreklikke "bin" og kommer til å Legg til > Ny XML File ... og Legg til > New CSS fil.

For Flash IDE, opprette en mappe kalt "htmlBox" i explorer. Lag "Main.as" ved å høyreklikke og gå til New > Flash Actionscript-fil, og deretter opprette "htmlBox.fla" ved å høyreklikke og gå til New > Flash dokument. Deretter oppretter du en mappe som heter "keremk" deretter i denne mappen
skape "XMLLoader.as" og "CSS.as". Du må opprette "styles.css" og "source.xml" i "htmlBox" -mappen (samme mappe som "Main.as" og "htmlBox.fla" filer). Du kan lage dem ved å høyreklikke og gå til New > Tekstdokument da døpe utvidelser. Du kan bruke en hvilken som helst editor for å skrive "som", "xml" og "css" filer. Du kan også skrive "som" filer i Flash IDE ved å dobbeltklikke på dem

Trinn 2 -. Opprette CSS File

Jeg skal bruke font-family, font-size, tekst- justere, font-weight, farge og Selge text-decoration egenskaper i min CSS-fil. Jeg skal også lage en "HW" tag for overskrifter og "activeL", "passiveL", "side" og "para" klasser for andre tekster
HW. Overskrift stylesactiveL: Aktiv lenke stylespassiveL: Passiv lenke stylespage: Side antall stylespara: Paragrafstilene

Her er koden. Jeg vil ikke forklare det linje for linje fordi jeg tror det er ganske forståelig, En: link {text-decoration: underline;. } A: hover {text-decoration: none; } HW {font-family: "Courier New", Courier, monospace; font-size: 20px; text-align: center; font-weight: bold; farge: #CCCCCC;} activeL {font-family:. "Comic Sans MS", kursiv; font-size: 12px; text-align: center; font-weight: normal; farge: #EEEEEE;} passiveL {font-family: "Comic Sans MS", kursiv,. font-size: 12px; text-align: center; font-weight: normal; farge:. # 666666;} para {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: rettferdiggjøre; font-weight: normal; farge:. #CCCCCC;} side {font-family: Verdana, Arial, Helvetica, sans-serif; farge: #CCCCCC; font-size: 12px; text-align: right; font-weight: normal;}
Trinn 3 - Opprette XML-filen

Når du oppretter XML-fil, vil vi bruke Flash-htmlText koder som vises nedenfor. For mer informasjon, kan du besøke Adobe for TextField.htmlText.
Anchor tag (link tag): < a > Fet tag: < b > Break tag: < br > Bilde tag: < img > Kursiv tag: < i > List element tag: < li > Paragraf tag: < p > Span tag: < span > Understrek tag: < u >

Vi vil begynne å lage vår "source.xml" ved å definere firstchild som < data > < /data >. Mellom < side > < /page > koder, vil vi skrive vår html kode
. <? xml version = "1.0" encoding = "UTF-8" >? < data > ≪ side > ≪? Inngangspunkt for side 1 > ≪ /page > ≪ side > ≪? Inngangspunkt for side 2 > ≪ /page > < /data >
Trinn 4 - Skrive HtmlBox Sider i XML File

Vi begynner med en pause "< br />" for å forbedre presentasjonen. Merk at vi måtte lukke hver kode som vi bruker i XML, ellers XML-filen kan ikke analyseres. "≪ br />" . Er en lukket tag
Etter "pause" tag, vil vi skrive en overskrift innenfor "hw" tag og starte avsnitt i "< span class = 'para' > < /span >". For listene vil vi bruke en "< li > < /li >" . Tag
< side > < br /> ≪ HW > KURS < /hw > ≪ br /> ≪ span class = 'para' > ≪? Paragraf tekst > ≪ /span > ≪ li > ≪? Listeelement > ≪? Listeelement > ≪ /li > < /page >
Trinn 5 - Legge "Neste" og "Forrige" linker til sider

For å legge til neste og forrige koblinger, vil vi bruke "event: neste" og "event: prev" som "href". Disse vil bli fanget av flashplayer som en hendelse. Når koblingene er klikket, "event: neste" sender en "link" hendelse med en "neste" tekst i flash.
< side > ..... < span class = 'passiveL' > ≪ a href = "" > & lt; FORRIGE | < /a > < /span > < span class = 'activeL' > ≪ a href = "event: neste" > | NESTE & gt; < /a > < /span > < /page >

I denne siden (for første side) vil det ikke være en tidligere side. Så forrige koblingen bør være passiv og dens "href" må være tom.

Forresten, å se "<", "&" osv symboler i htmlbox vi bør bruke sine koder vises nedenfor
&. lt; : ≪ (Mindre enn) & gt; : ≫ (Større enn) & amp; : &Amp; (Tegnet) & quot; : "(Anførselstegn) & N': '(apostrof, single quote)
Trinn 6 - Legge til sidetall i Pages

Når du legger til sidetall, vi trenger bare å bruke" side "class .. for "span" mønsteret sidetall er opp til deg jeg skrev dem slik: "(side 1/3)»
< side > ..... < span class = "side". > (side 1/3) < /span > < /page >

og her er min XML-fil med en side
. <? xml version = "1.0" encoding = "utf-8" ? > < data > < side > < br /> < HW > AS3 HTML BOX med XML og CSS-støtte < /hw > < br /> < span class = 'para' > Hi . everybody < br /> < br /> Denne HTML Box har blitt opprettet med bare AS3 og alle koder har blitt skrevet i ytre "som" filer. <. br /> < br /> med opplæringen nedenfor, vil du lære:.. < br /> < li > Hvordan skape eksterne klasser < br /> Slik legger, analysere og bruke XML og CSS-filer i en htmlText < br />. Hvordan lage nye arrangementer med "dispatchEvent" og bruke disse hendelsene < br /> Hvordan bruke "TextEvent" i htmlText. ≪ br /> Hvordan bruke htmlText koder. ≪ /li > ≪ /span > ≪ br /> < br /> < br /> < br /> < br /> < br /> ≪ span class = 'passiveL' > < a href = "" > & lt; FORRIGE | < /a > < /span > ≪ span class = 'activeL' > < a href = "event: neste" > | NESTE & gt; < /a > < /span > ≪ br /> < br /> < span class = 'side' > (side 1/3) < /span > < /page >

Forresten, kan du legge til bilder til sidene som vist nedenfor:
<? med link >? < a href = "your_link" > < img src = "your_image_source" /> < /a > <? uten kobling > < img src = "your_image_source" />
Trinn 7 - Action Script filer (Ekstern Classes)

Vi har opprettet "keremk" -mappen, og vi vil bruke dette? mappe for våre "XMLLoader" og "CSS" klasser.

Vi må derfor begynne våre klasser med:
pakke keremk {}
Trinn 8 - Opprette CSS Class

Vi starter vår CSS-klasse med "pakken keremk { } ". Sin klasse navnet vil være det samme som navnet filen "CSS". Merk: Actionscript er case sensitive
Siden vi skal sende hendelser med denne klassen, vil det forlenge "EventDispatcher"
pakke keremk {//CSS er i keremk mappen public class CSS strekker EventDispatcher {/.. /CSS vil sende hendelser offentlig funksjon CSS (): void {loader = ny URLLoader; //når en CSS er opprettet, vil nye laster defineres}}}
Trinn 9 - CSS: import av flash Classes
import flash .net.URLLoader; //Vi skal laste css fil med urlloaderimport flash.net.URLRequest; //og det bør være en forespørsel til load.import flash.text.StyleSheet; //Vi skal analysere css filen som et stilark .import flash.events.SecurityErrorEvent; //Vi vil sende hendelser, så vi trenger å importere relaterte klasser too.import flash.events.IOErrorEvent, importere flash.events.Event, import flash.events.EventDispatcher;

kan også importere disse klasser innen 3 linjer ved å bruke "*" for å importere alle "hendelser" og "netto" klasser, men jeg foretrekker å importere dem én etter én. Vi trenger ikke alle "hendelser" og "netto" klasser. Hvis du foretrekker å skrive mindre kode, her er forkortet tilsvarende.
import flash.events *, importere flash.net *, import flash.text.StyleSheet;
Trinn 10 - CSS:.. Variabler

Vi trenger bare to variabler i denne klassen, en URLLoader og et stilark
privat Var loader: URLLoader, offentlige Var ark. Stylesheet;

Forresten, private variabler er ikke nås fra ut av sine klasser. Jeg skal bruke "loader" bare i CSS-klasse, så jeg kan lage den som privat. Jeg skal bruke "ark" fra hovedklassen, så jeg trenger for å lage det som "public" (nås)

Trinn 11 - CSS. Load Funksjon

Vi vil bruke dette load funksjon fra våre viktigste klassen, så vi trenger for å lage det som offentlig. Det vil kreve en streng å laste, som vil være "_req: String"
offentlig funksjon belastning (_req: String): void {//funksjon vil laste ned filen som den er banen gitt. loader.load (ny URLRequest (_req)); //Banen bør bli forvandlet til en URLRequest å laste ned filen. loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); //Vi vil lytte til 3 arrangementer for å overføre til hovedklassen. loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, lastet);}
Trinn 12 - CSS: Hendelses Handlers og Dispatchers

I trinn 11, lagt vi 3 hendelsen lyttere til Loader, sikkerhetsfeil IO Feil og Komplett. En av dem vil bli sendt ut til slutt. Når det har skjedd må vi overføre det til den viktigste klassen ved å lytte og utsending. Vi bør også sjekke om det er noe problem når parsing CSS fil etter "Complete" hendelse. Vi skal sjekke det ved å bruke "prøve fange"
privat funksjon ioError (e: IOErrorEvent): void {//Når IO feil oppstår, dispatchEvent (ny hendelse ( "CSS_IOError")); //denne linjen sender den. "CSS_IOError"} private funksjon secError (e: SecurityErrorEvent): void {//Når det er et sikkerhetsproblem, dispatchEvent (ny hendelse ( "CSS_SecurityError")); //denne linjen sender den "CSS_SecurityError"} privat funksjon lastet.. (e: Hendelses): void {//Hvis du legger filen er ferdig, try {//prøve å analysere den. ark = ny Stylesheet (); sheet.parseCSS (loader.data); dispatchEvent (ny hendelse ( "CSS_Loaded")); //Hvis parsing er OK, sender denne linjen "CSS_Loaded". } Catch (e: Feil) {dispatchEvent (ny hendelse ( "CSS_ParseError")); //Hvis parsing er IKKE OK, sender denne linjen "CSS_ParseError"}}

Med hendelseshåndterere og dispatchers, er vårt CSS-klasse gjort. Her er den fullstendige CSS.as filen:
pakke keremk {import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.events.SecurityErrorEvent; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; public class CSS strekker EventDispatcher {private Var loader: URLLoader; offentlig Var sheet: Stylesheet; offentlig funksjon CSS (): void {loader = new URLLoader; } Offentlig funksjon belastning (_req: String): void {loader.load (ny URLRequest (_req)); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, lastet); } Private funksjon ioError (e: IOErrorEvent): void {dispatchEvent (ny hendelse ( "CSS_IOError")); } Private funksjon secError (e: SecurityErrorEvent): void {dispatchEvent (ny hendelse ( "CSS_SecurityError")); } Private funksjon lastet (e: Hendelses): void {try {ark = ny Stylesheet (); sheet.parseCSS (loader.data); dispatchEvent (ny hendelse ( "CSS_Loaded")); } Catch (e: Feil) {dispatchEvent (ny hendelse ( "CSS_ParseError")); }}}}
Trinn 13 - Opprette XMLLoader

Vi starter vår XMLLoader klasse med "pakken keremk {}", og det vil utvide "EventDispatcher", også
pakke keremk {/. /XMLLoader er i keremk mappe. public class XMLLoader strekker EventDispatcher {offentlig funksjon XMLLoader () {loader = new URLLoader; //når en XMLLoader er opprettet, vil nye laster defineres. }}}
Trinn 14 - XMLLoader: Importere Flash Classes

Vi trenger de samme klassene som vi gjorde for vår CSS uten "stylesheet" klasse. De er som følger:
import flash.events.SecurityErrorEvent; //tilstelninger klasser for å lytte og dispatch.import flash.events.IOErrorEvent, import flash.events.Event, import flash.events.EventDispatcher, import flash.net .URLLoader; //netto klasser for å laste xml files.import flash.net.URLRequest;
Trinn 15 - XMLLoader: variabler

Vi skal nå trenger 5 variabler:
privat Var loader: URLLoader; //å laste XML fileprivate Var data: XML; //å holde XML-data til å analysere it.private Var jeg: uint; //teller for å bruke i parsing.private Var lenXML: uint; //for å sjekke hvor mange sider det er i XML. offentlig Var sider: Array = []; //å holde sider etter analyse av XML
Trinn 16 - XMLLoader: Load Funksjon

"load" funksjonen vil være den samme som med "CSS.. laste". Vi vil bruke den fra hovedklassen og det bør være offentlig for
offentlig funksjon belastning. (_req: String): void {//funksjon vil laste ned filen for hvilken vei er gitt. loader.load (ny URLRequest (_req)); //Banen bør bli forvandlet til en URLRequest å laste ned filen. loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); //Vi vil lytte til 3 arrangementer for å overføre til hovedklassen. loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, lastet);}
Trinn 17 - XMLLoader: hendelseshåndterere og Dispatchers

Vi har lagt til 3 hendelsen lyttere til Loader, sikkerhetsfeil IO Feil og Komplett. En av dem vil bli sendt ut til slutt. Når det har skjedd må vi overføre det til den viktigste klassen ved å lytte og utsending. Vi bør også sjekke om det er noe problem når parsing XML-filen etter "Complete" hendelse. Det kan være to forskjellige arrangementer for å sende: "XML_Loaded" eller "XML_ParseError". Vi skal sjekke det ved å bruke "prøve fange"
privat funksjon ioError (e: IOErrorEvent): void {//Når IO feil oppstår, dispatchEvent (ny hendelse ( "XML_IOError")); //denne linjen sender den. "XML_IOError"} private funksjon secError (e: SecurityErrorEvent): void {//Når det er et sikkerhetsproblem, dispatchEvent (ny hendelse ( "XML_SecurityError")); //denne linjen sender den "XML_SecurityError"} privat funksjon lastet.. (e: Hendelses): void {//Hvis du legger filen er ferdig, try {//prøve å analysere den. data = ny XML (loader.data); //tar XML-data til "data" lenXML = data.children () lengde ();. //sjekker antall sidene for (i = 0; i < lenXML; i ++) {//analyserer XML-data til å rekke pages.push (data.children () [i]); } DispatchEvent (ny hendelse ( "XML_Loaded")); //hvis analyse av XML er OK, forsendelse "XML_Loaded". } Catch (e: Feil) {dispatchEvent (ny hendelse ( "XML_ParseError")); //hvis noe er galt med XML-data, sender denne linjen "XML_ParseError". }}

Med handlere og dispatchers, er vårt XMLLoader klasse gjort. Her er det ferdige XMLLoader:
pakke keremk {import flash.events.SecurityErrorEvent; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; import flash.net.URLLoader; import flash.net.URLRequest; public class XMLLoader strekker EventDispatcher {private Var loader: URLLoader; privat Var data: XML; privat Var i: UINT; privat Var lenXML: UINT; offentlig Var sider: Array = []; offentlig funksjon XMLLoader () {loader = new URLLoader; } Offentlig funksjon belastning (_req: String): void {loader.load (ny URLRequest (_req)); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, lastet); } Private funksjon ioError (e: Hendelses): void {dispatchEvent (ny hendelse ( "XML_IOError")); } Private funksjon secError (e: Hendelses): void {dispatchEvent (ny hendelse ( "XML_SecurityError")); } Private funksjon lastet (e: Hendelses): void {try {data = new XML (loader.data); . LenXML = data.children () lengde (); for (i = 0; i < lenXML; i ++) {pages.push (data.children () [i]); } DispatchEvent (ny hendelse ( "XML_Loaded")); } Catch (e: Feil) {dispatchEvent (ny hendelse ( "XML_ParseError")); }}}}
Trinn 18 - Lage Den største klassen

Siden hoved klassen vil være i vårt prosjekt rotmappen, vil vi begynne å skrive det med "pakken {}". Det vil forlenge "sprite", og vi starter vår kode i "Main" funksjon:
pakke {//inngangspunkt for import. public class Hoved strekker Sprite {//inngangspunkt for Vars. offentlig funksjon main (): void {//inngangspunkt for koder. } //Inngangspunkt for tilleggsfunksjoner. }}
Trinn 19 - Hovedbilde: Importere Flash Classes
import flash.display.Sprite; //Hoved klassen vil forlenge "Sprite" .Så, vi trenger "Sprite" class.import flash.display.StageAlign; //Vi trenger "StageAlign" for å justere stage.import flash.display.StageScaleMode; //Vi trenger "StageScaleMode" for å administrere skala måte stage.import flash.events.Event; //Vi trenger "Event" class å bruke hendelser som vi har skapt i "XMLLoader" og "CSS" classes.import flash.events.TextEvent; //Vi trenger "TextEvent" for å bruke siden koblinger i "htmlText" .import flash.text .TextField; //Vi oppretter en "Textfield" for å vise html-sider og legge til vår css til den med "tekstformat" import flash.text.TextFormat, import keremk.CSS; //og at "Main" klassen, vi vil bruke vår "CSS" og "XMLloader" klasser som vi har opprettet earlier.import keremk.XMLLoader;
Trinn 20 - Hovedbilde: variabler
privat Var xml: XMLLoader; //dette vil holde vår XML dataprivate Div css: CSS; //dette vil holde vår Stylesheet dataprivate Var feltet: Textfield; //vi vil bruke dette til å vise vår html pagesprivate Var cssBool: Boolean = false; //disse to booleans vil fortelle oss om våre CSS og XML-filer er loadedprivate Var xmlBool: Boolean = false; privat Var stgW: Number = stage.stageWidth; //disse to vil sjekke høyden og bredden på stage.private Var stgH: Number = stage.stageHeight; //denne måten kan vi endre vår HtmlBox bredde og høyde fra html file.private Var pageNum. int = 0; //dette vil definere siden som vi viser i HtmlBox (siden tabellindekser starter fra 0, er pageNum 0) private Var boxBorder: Sprite; //dette vil være grensen av vår HtmlBox. Vi kan aktivere grensen av Textfield, men på denne måten vi kan klare marginer
Trinn 21 - Hovedbilde:. Main Funksjon

Hovedfunksjonen vil bli utført automatisk når vi starter HtmlBox. Vi trenger derfor å skrive vår startkoder i denne funksjonen
offentlig funksjon main (): void {stage.align = StageAlign.TOP_LEFT; //Disse to linjene er valgfritt.. Jeg vil heller beholde scenen justert til øvre venstre og nonscaled. stage.scaleMode = StageScaleMode.NO_SCALE; boxBorder = new Sprite (); //Dette er vår grense htmlbox. I utgangspunktet er det en fylling rektangel. Og vi vil opprette en ny Sprite å tegne det. boxBorder.graphics.lineStyle (2, 0xC0C0C0, 1); //thicknes = 2 piksler, color = 0xC0C0C0 (grå), alfa = 1 (100%). Du kan endre disse verdiene som du ønsker. boxBorder.graphics.drawRect (5, 5, stgW - 10, stgH - 10); //margin = 5. Det er avstanden fra grensen til scenen grense. addChild (boxBorder); //etter at vi opprette og trekke våre grensen, må vi legge det til scenen. felt = new Textfield (); //Vi vil opprette en ny Textfield vise html-sider. addChild (felt); //siden det er mange egenskaper for å definere, vil vi legge til feltet til scenen først. med (felt) {//etter at vi legger til "feltet" til scenen, kan vi bruke "med" å definere sine egenskaper. x = 10; //Jeg har definert x og y som 10 for å lage en 5PX plass mellom felt og grensen. y = 10; width = stgW-20; //Og bredden bør være stgW-20. Fordi, hvis vi ønsker å gjøre en 10px avstand mellom felt og scene, må bredden av feltet være 20px (10px fra venstre + 10px fra høyre) kortere enn bredden på scenen. height = stgH-20; //Og vi bør beregne høyden som bredden. Multi = true; //Feltet må være flere linjer. Fordi våre html tekster er flere linjer. valgbar = false; //Hvis du ønsker å gjøre din tekst valgbar, kan du endre dette til "true". wordwrap = true; //Uten "wordwrap" våre avsnitt vil være enkle linjer. condenseWhite = true; //Dette er en viktig egenskap som gjør vår tekst ser bedre. Uten dette, vil det bli flere plasser i overalt på htmltext. } //Etter at vi skaper vår grense og tekstfeltet, kan vi laste filene våre. xml = new XMLLoader (); //Vi vil opprette en ny XMLLoader xml.load ( "source.xml"); //og laste vår XML-fil. //Vi må lytte til arrangementer for å vite hva de skal gjøre videre. xml.addEventListener ( "XML_Loaded", xmlDone); //Hvis vi fange "XML_Loaded", vil vi fortsette å skape HtmlBox. xml.addEventListener ( "XML_IOError", feil); //Jeg skal bare lage en funksjon for alle feil. xml.addEventListener ( "XML_SecurityError", feil); //Så vil alle feilhendelser gå til denne "feilen" -funksjonen xml.addEventListener ( "XML_ParseError", feil); css = nye CSS (); //Vi vil opprette en ny CSS css.load ( "styles.css"); //og laste våre CSS-fil. //css hendelser er ganske det samme med xml hendelser. css.addEventListener ( "CSS_Loaded", cssDone); //Hvis vi fange "CSS_Loaded", vil vi fortsette å skape HtmlBox. css.addEventListener ( "CSS_IOError", feil); //Og alle feilhendelser gå til "feil" -funksjonen, også. css.addEventListener ( "CSS_SecurityError", feil); css.addEventListener ( "CSS_ParseError", feil);}
Trinn 22 - Hovedbilde: "error" Function

Siden alle feilene gå til "feil" -funksjonen, må vi ordne dem med "switch saken ". Vi skal sjekke hvor feilen oppstod og skrive den nødvendige teksten til "feltet". I dette trinnet, vil jeg vise bare to feil. Du vil se alle feil i det ferdige Hoved klasse på Step 25
privat funksjon feilen (e: Hendelses): void {switch (e.type) {//Vi skal sjekke hvilken type feil som oppstod case " XML_IOError ": //Hvis feilen er" XML_IOError ", vil vi skrive den nødvendige teksten om" XML_IOError "til" feltet ". field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > XML IO FEIL < br > kontrollere XML banen <! /Font > < /b > < /p > ' break; //Hvis feilen er "XML_IOError", vil vi bryte drift og stoppe "bryteren case". case "XML_SecurityError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > XML sikkerhetsfeil < br > kontrollere policyfiler <! /Font > < /b > < /p > ' gå i stykker; }}
Trinn 23 - Hovedbilde: "Ferdig" Funksjoner

Vi vil opprette tre "Done" funksjoner. "XmlDone", "cssDone" og "allDone". "XmlDone" og "cssDone" vil bli utført etter våre filene er lastet inn og de vil informere "allDone". Når begge css og xml-filer er lastet inn, vil "allDone" legg stilarket til "felt" og skrive den første siden
privat funksjon cssDone (e: Hendelses). Void {cssBool = true; //Vi vil gjøre cssBool "true". Fordi CSS-filen er lastet med hell. allDone (); //Og utføre allDone} private funksjon xmlDone (e: Hendelses). void {xmlBool = true; //Vi vil gjøre xmlBool "true". Fordi XML-filen er lastet inn. allDone (); //Og utføre allDone} private funksjon allDone (): void {if (cssBool & & xmlBool) {//hvis både CSS og XML-filer er lastet med hell, field.styleSheet = css.sheet; /. /vi satt våre stiler til "feltet". field.htmlText = xml.pages [pageNum]; //vi skal skrive den første siden til felt. addEventListener (TextEvent.LINK, textEvent); //Og vi vil legge til hendelsen lytteren for kobling hendelser som vil bli sendt ut av htmlText. }}
Trinn 24 - Hovedbilde: "textEvent" Funksjons

I denne funksjonen, vil vi se etter "neste" og "prev" event tekster.
privat funksjon textEvent (e: TextEvent): void {if (e.text == "neste") {//Hvis "neste" koblingen er klikket, ++ pageNum; //vi vil øke pageNum feltet. htmlText = xml.pages [pageNum]; //og skrive den nye siden til "feltet". } If (e.text == "forrige") {//Hvis "forrige" koblingen er klikket, --pageNum; //vi vil redusere pageNum field.htmlText = xml.pages [pageNum]; //og skrive den nye siden til "feltet". }}
Trinn 25 - Hovedbilde: Ferdige

Her er det ferdige Hovedklasse:
pakke {import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.TextEvent; import flash.text.TextField; import flash.text.TextFormat; import keremk.CSS; import keremk.XMLLoader; public class Hoved strekker Sprite {private Var xml: XMLLoader; privat Var css: CSS; privat Var felt: Textfield; privat Var cssBool: Boolean = false; privat Var xmlBool: Boolean = false; privat Var stgW: Number = stage.stageWidth; privat Var stgH: Number = stage.stageHeight; privat Var pageNum: int = 0; privat Var boxBorder: Sprite; offentlig funksjon main (): void {stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; boxBorder = new Sprite (); boxBorder.graphics.lineStyle (2, 0xC0C0C0, 1); boxBorder.graphics.drawRect (5, 5, stgW - 10, stgH - 10); addChild (boxBorder); felt = new Textfield (); addChild (felt); med (felt) {x = 10; y = 10; width = stgW-20; height = stgH-20; Multi = true; valgbar = false; wordwrap = true; condenseWhite = true; } Xml = new XMLLoader (); xml.load ( «source.xml"); xml.addEventListener ( "XML_Loaded", xmlDone); xml.addEventListener ( "XML_IOError", feil); xml.addEventListener ( "XML_SecurityError", feil); xml.addEventListener ( "XML_ParseError", feil); css = nye CSS (); css.load ( «styles.css"); css.addEventListener ( "CSS_Loaded", cssDone); css.addEventListener ( "CSS_IOError", feil); css.addEventListener ( "CSS_SecurityError", feil); css.addEventListener ( "CSS_ParseError", feil); } Private funksjon feilen (e: Hendelses): void {switch (e.type) {case "XML_IOError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > XML IO FEIL < br > kontrollere XML banen <! /Font > < /b > < /p > ' gå i stykker; case "XML_SecurityError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > XML sikkerhetsfeil < br > kontrollere policyfiler <! /Font > < /b > < /p > ' gå i stykker; case "XML_ParseError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > XML Tolkefeil < br > feilsøke XML-fil <! /Font > < /b > < /p > ' gå i stykker; case "CSS_IOError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > CSS IO FEIL < br > kontrollere CSS banen <! /Font > < /b > < /p > ' gå i stykker; case "CSS_SecurityError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > CSS sikkerhetsfeil < br > kontrollere policyfiler <! /Font > < /b > < /p > ' gå i stykker; case "CSS_ParseError": field.htmlText = "< p align =" center "> < b > < font color =" # FF0000 "size =" 12 "face =" Verdana, Arial, Helvetica, sans-serif "> < br > CSS Tolkefeil < br > feilsøke CSS-fil <! /Font > < /b > < /p > ' gå i stykker; }} Private funksjon cssDone (e: Hendelses): void {cssBool = true; ferdig(); } Private funksjon xmlDone (e: Hendelses): void {xmlBool = true; ferdig(); } Private funksjon allDone (): void {if (cssBool & & xmlBool) {field.styleSheet = css.sheet; field.htmlText = xml.pages [pageNum]; addEventListener (TextEvent.LINK, textEvent); }} Private funksjon textEvent (e: TextEvent): void {if (e.text == "neste") {++ pageNum; field.htmlText = xml.pages [pageNum]; } If (e.text == "forrige") {--pageNum; field.htmlText = xml.pages [pageNum]; }}}}
Trinn 26 - Kompilering i FlashDevelop

Vi er ferdig med å skrive koden vår, nå er det tid for å kompilere den. Hvis du har opprettet prosjektet i FlashDevelop, du trenger bare å trykke "F5" for å sjekke det og "F8" for å bygge prosjektet. Før det, kan det være lurt å endre utgangsinnstillingene. For å gjøre det, gå til Project > Egenskaper ...

I egenskapsvinduet, kan du endre:

"Target" - > Flash Player versjon

"Output file" - > Utgang filnavnet og banen (Vår produksjon filbanen er «bin /")

"Mål" - > Bredde og høyde på utdatafilen

"Bakgrunnsfarge" - > Bakgrunnsfargen på output file (jeg har brukt svart "# 000000")

"Framerate" - > Framerate på utdatafilen (Siden det er ingen ramme i vårt prosjekt, har jeg brukt 30fps som standard.)