Create en dynamisk dyplenking Flash nettsted med SWFAddress
Del
Del
3
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne tut, vi skal utforske det rart det er SWFAddress, diskuterer hvorfor nettstedet ditt bør ha dyplenking, og prosessene som er involvert i gjennomføringen dyplenking i Flash prosjekter.
Dette nettstedet er XML drevet. Også skal vi se på SWFAddress innebygde funksjoner og hvordan de blir brukt til å lage det endelige resultatet. Nyt!
Sjekk ut demoen ovenfor i et nytt vindu. Legg merke til hvordan dine nettadresseendringer som du navigerer gjennom mini-site
Trinn 1:. Hvorfor bruke dyplenking
Dyplenking er en fin måte å strukturere et nettsted og også? er fin måte å strukturere koden.
Dyplenking er i utgangspunktet å gi brukeren en mulighet til å koble til et bestemt område av en Flash-film gjennom en enkel nettadresse.
For eksempel hvis du ønsket å vise en portefølje til en klient, og du ga dem linken til en Flash nettsted uten dyplenking. Vel sin gjetning er så god som deg hvor du finner at innholdet i SWF. Men med dyplenking kan du koble til alt innhold i en Flash-film - for eksempel: website.com/#/portfolio/section_3. Dette kan virke komplisert oppgave, men det er ikke med SWFAddress dyplenking.
Dyplenking har andre fordeler (for eksempel SEO) og det i utgangspunktet blir en kjedelig Flash-film i et utvidbart program.
< hr>
Trinn 2: Komme Forberedt
Du trenger for denne tut: Caurina Tweener, SWFAddress for AS3, SWFObject
Caurina Tweener - http:. //kode. google.com/p/tweener/- Sørg for at du laste ned AS3 versjonen ikke AS2 :)
SWFAddress - http://www.asual.com/swfaddress/
SWFObject er inkludert i . den swfaddress pakken
Du må også main.html fra Kilde nedlasting
Trinn 3:. Import, # include, hva ??
< p> Hvis du har tidligere erfaring med swfaddress, du kan ha kommet i kontakt med dette problemet. Du har forsøkt å bruke import direktivet å bruke swfaddress eller hvis det mislyktes du prøvd # include 'SWFAddress.as'. Vel sannheten er at du ikke trenger å gjøre noe i det hele tatt.
Alt du trenger å gjøre er å sette de SWFAddress.as filen der swf er og swfaddress er automatisk tilgjengelig for Actionscript.
Trinn 4: filstruktur
Opprett en tom main.fla. (Jeg ville normalt skrive kode i ytre som filer, men jeg tror all koden på ett sted er bedre forstått).
Fra SWFaddress nedlastingen få SWFObject og swfaddress mapper og plassere dem i hovedmappen. Hvis du har problemer med å finne disse bare laste dem ned fra kilden på toppen av siden.
Og selvfølgelig få SWFAddress.as og SWFAddressEvent.as og plassere dem i hovedmappen. De er også i kilde nedlasting hvis du har problemer med å finne dem.
Last ned kilde og kopiere main.html til hovedmappen.
Trinn 5: Lag Fire SWF
Lag 4 dummy SWF; for eksempel SWF med noen tilfeldig tekst i dem, hver med en annen tittel og farge på skriften. Det er fire tilfeldige som inngår i kilde nedlasting
Trinn 6:.? Opprett XML File
< xml version = "1.0" encoding = "UTF-8" > < xml > < menyen > < element ITEM_NAME = "Home" item_module = "home.swf" /> < element ITEM_NAME = "Om" item_module = "about.swf" /> < element ITEM_NAME = "Portfolio" item_module = "portfolio.swf" /> < element ITEM_NAME = "Kontakt" item_module = "contact.swf" /> < /meny > < /xml >
Kall det main.xml. Vi vil bruke xml til å lagre våre data. Nå har vi laget den xml filen vi vil starte godsakene, koding ...
Trinn 7: Lag Meny Array
Nedenfor er koden kreves for å laste xml-menyen i Flash. Kommentarene i koden guide deg gjennom prosessen.
Gå til ramme 1, Layer 1 i hoved FLA-filen du opprettet tidligere.
Legg denne koden. Det er godt kommen å hjelpe deg å forstå hva det gjør
//satt scenen settingsvar fileStage. Stage = this.stage; fileStage.scaleMode = StageScaleMode.NO_SCALE; fileStage.align = StageAlign.TOP_LEFT; //import caurina tweenerimport caurina .transitions.Tweener; //hovedtidslinjen objectvar Indeks: Object = dette; //New Xml Objectvar fileXml: XML; //sjekke hvor mange menyelementer vi have.var totalMenuItems: Antall; //New URL Request - Legg en COMPLETE hendelse lytteren å laste siden når XML belastningen har vært completed.var xmlLoader: URLLoader = new URLLoader (ny URLRequest ("main.xml")); xmlLoader.addEventListener (Event.COMPLETE, createSite), funksjon createSite (e: Hendelses) : void {//lagre xml filen i vår xml variabel fileXml = new XML (e.target.data); //Bruker en konstruktør funksjon å bruke xml index.createMainMenu (fileXml.menu); } Funksjon createMainMenu (xmlData: XMLList):.. Void {//oppretter lengden på vår meny index.totalMenuItems = xmlData * lengde (); //Oppretter et filmklipp med forekomstnavnet menu_clip og legge den til på scenen. //Deretter bruke en < code > for < /code > sløyfe for å skape vår meny for (var i: uint = 0; i < index.totalMenuItems; i ++) {/* lage en MovieClip og eksport for action med klassenavnet: menyvalget det bør inneholde en dynamisk tekstboks med navnet på forekomsten av menu_item_text. * ///Lage vår nye menypunktet Var menu_item: MENUITEM = new menyvalget (); //Satt identifisering menu_item.id = i; menu_item.name = "id" + i; //Stilling våre menyelementer dynamisk menu_item.x = (i * menu_item.width); //Legger til xml verdiene til tekstboksen inne i nytt element. menu_item.menu_item_text.text = xmlData.item @ ITEM_NAME [i].; //Legger modulen adresse til menyen variable /Det vil komme til nytte senere. menu_item.item_module = xmlData.item @ item_module [i].; /* Opprette et nytt lag, og plasser menu_clip MovieClip på det laget. Gi den en forekomst navn menu_clip * ///legger hvert menyelement til menu_clip MovieClip hjelp addChild () index.menu_clip.addChild (menu_item); }}
Trinn 8: Lag Knappehandlinger
Dette er hva vår side skal se ut nå:
Så la oss fortsette med å gi knappen hendelser. Koden nedenfor skal plasseres på linje 78 på ramme en handlinger lag like over addchild metoden vi brukte.
//Tildele hendelser til menyknapper. //Roll & utrulling effekter menu_item.addEventListener (MouseEvent.MOUSE_OVER, menuRollOver); menu_item.addEventListener (MouseEvent.MOUSE_OUT, menuRollOut); menu_item.addEventListener (MouseEvent.MOUSE_DOWN, menuPress);
Legg funksjonene under for å håndtere disse hendelsene under createMainMenu funksjon:
funksjon menuRollOver (e: MouseEvent) {//menyknappen variabel - Vi bruker getChildByName å sikte på riktig menypunktet //e.target.id henviser til menu_item.id vi definerte tidligere. Var knapp: MovieClip = index.menu_clip.getChildByName ("id" + e.target.id) som MovieClip; //Satt animasjonen usign caurina tweener Tweener.addTween (knapp, {alfa: 0,5, tid: to, overgang: "easeOutExpo"});} funksjon menuRollOut (e: MouseEvent) {//menyknappen variabel - Vi bruker getChildByName til sikte på riktig menypunktet //e.target.id henviser til menu_item.id vi definerte tidligere. Var knapp: MovieClip = index.menu_clip.getChildByName ("id" + e.target.id) som MovieClip; //Setter animasjon ved hjelp caurina tweener Tweener.addTween (knapp, {alfa: 1, tid: to, overgang: "easeOutExpo"});} funksjon menuPress (e: MouseEvent) {//SWFAddress sett verdifunksjon SWFAddress.setValue ( e.target.deep_link);}
Trinn 9: SWFAddress på Change Function
Dette er den viktigste hendelsen som håndterer alle swfaddress endringer. Det er der vi vil bruke vår søknad logikk for at nettstedet vårt skal fungere. La oss ta en titt på den viktigste funksjonen i detalj
funksjon handleSWFAddress (e: SWFAddressEvent) {/* sett html tittelnavn * /var Title:. String = "XML dyplenking Tutorial"; for (var i: Antall = 0; I < e.pathNames.length; i ++) {Title + = '/' + String (e.pathNames [i] .substr (0,1) .toUpperCase () + e.pathNames [i] .substr (1)) split ("_") bli ("")..; } /* For å formatere HTML tittel vi bruker split og bli med teknikker. Disse erstatter _ med et mellomrom. Vi gjør det en streng for å sikre at det er brukbar, slik:. String (e.pathNames [i] .substr (0,1) .toUpperCase () + e.pathNames [i] .substr (1)) split (" _").bli med(" "); * ///Denne funksjonen gjør hele jobben og tildeler HTML-tittelen SWFAddress.setTitle (Title);} //når SWFAddress.setValue () er avfyrt denne hendelsen lytter etter det og inits funksjonen above.SWFAddress.addEventListener (SWFAddressEvent .CHANGE, handleSWFAddress);
Trinn 10: SetValue () Forklaring
SWFAddress.setValue ("somevalue");
Når denne hendelsen er avfyrt - for eksempel når noen trykker på knappen - swfaddress verdi er satt, og utløser onChange () lytteren. Derfor for å lage våre moduler for å laste vi trenger for å lage noen kode inne i swfAddress onChange () lytteren
Trinn 11:. Hendelser Funksjon
Nå skal vi tilbake til vår meny for loop. Vi må legge en ytterligere variabel som inneholder en funksjon:
//Place denne koden i vår < code > for < /code > sløyfe under addEventListeners /* denne variabelen inneholder en funksjon som skal inneholde hendelsene når swfaddress i endret. * /Menu_item.init = function () {/* lage en ny MovieClip og kaller det module_clip, deretter plassere den på et nytt lag og deretter gi den forekomsten navnet module_clip * ///ny variabel som har inneholder banen til swf vi legger i var modul: String = this.item_module;. //Fade ut vår nåværende modul om noen, deretter begynne belastningen av vår nye modulen bruker tweener sin onComplete funksjon Tweener.addTween (index.module_clip, {alfa: 0, tid: to, overgang: "easeOutExpo", onComplete: function ( ) {index.createModule (modul); //fjerne den forrige modulen bare hvis det ikke er den første lasten if (index.firstLoad == false) {index.module_clip.removeChildAt (0);}}}); }
Trinn 12:. Opprette Modul Function
Før vi ser på de swfaddress hendelser, vil vi skape modulen for å laste modulen i Den er komplett med I /O feilhåndtering. Det er god praksis å håndtere feil når du kan
//På toppen av action sted: var firstLoad.: Boolean = true; //Hindrer null feil
Dette er modulen funksjon. Kommentarene veilede deg gjennom prosessen
funksjon createModule (url: String) {//vi lage en ny loader Var loader: Loader = new Loader ();. //Vi opprette en ny url forespørsel om vår loader Var moduleURL: URLRequest = new URLRequest (url); //Vi legge hendelsen lyttere til lasteren. noen er ikke nødvendig, men jeg følger dem for enkelhets loader.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, loadProgress); //Når modulen er lastet vi utløse loadComplete () med en hendelse lytteren. loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, loadError); loader.load (moduleURL); funksjon loadProgress (e: ProgressEvent) {} //utløses når modulen er lastet funksjon loadComplete (e: Hendelses) {//fade i modulen Tweener.addTween (index.module_clip, {alfa: 1, tid: to, overgang: " easeOutExpo "}); //Legge til gjeldende modulen til module_clip MovieClip ved hjelp addChild index.module_clip.addChild (e.currentTarget.content); //Nå har vi den første lasten vi satt firstLoad til false. Det gjenstår da falsk for hele økten. index.firstLoad = false; } Funksjon loadError (e: Hendelses) {trace ("feil"); }}
Trinn 13: Sammendrag
For å oppsummere: Vi har laget menyen, skapte den funksjonen som vil skje når SWFAddress.setValue () er utløst, men vi trenger fortsatt å lage vår applikasjonslogikk . Hva jeg mener med programmet logikken er hvordan vi skal bruke swfAddress å laste i visse deler av vår søknad
Trinn 14:. Opprette Deep Link
La oss gå tilbake til vår menyen for loop og definere dyplenken der. Nedenfor der vi setter menu_item.name sted denne koden. Denne koden skaper dyplenken verdi:
//satt menypunktet dyplenken pluss formatering med split og bli med. toLowerCase () gjør hver karakter små bokstaver. menu_item.deep_link = xmlData.item @ ITEM_NAME [i] .split ("") .join ("_") split. ("/") bli med. ("_") toLowerCase ();..
Bruken vil bli klart veldig snart
Trinn 15:. Søknad Logic
Nå la oss gå tilbake til vår funksjon som håndterer swfaddress hendelser: handleSWFAddress
Vi trenger nå en viss del av kode som vil laste den riktige modulen. Koden nedenfor viser deg hvordan du bruker den riktig logikk for at programmet laste den riktige modulen. Kommentarene veilede deg gjennom prosessen. Den nye delen av denne funksjonen starter ved å lage den for loop
//funksjon for å håndtere swfaddress events.function handleSWFAddress (e: SWFAddressEvent). {/* Sett html tittelnavn * /var Title: String = "XML Dyplenking Tutorial "; for (var i: Antall = 0; I < e.pathNames.length; i ++) {Title + = '/' + String (e.pathNames [i] .substr (0,1) .toUpperCase () + e.pathNames [i] .substr (1)) split ("_") bli ("")..; } /* For å formatere HTML tittel vi bruker split () og bli med () teknikker. Disse erstatter _ med et mellomrom. Vi gjør det en streng for å sikre at det er brukbar, slik:. String (e.pathNames [i] .substr (0,1) .toUpperCase () + e.pathNames [i] .substr (1)) split (" _").bli med(" "); * ///Denne funksjonen gjør hele jobben og tildeler HTML-tittelen SWFAddress.setTitle (Title); //Oppretter et < code > for < /code > løkke for å iterere gjennom det totale antall menyelementer. bruke index.totalMenuitems å gjøre det. /* Du lurer kanskje på hvorfor jeg bruker n istedenfor jeg i < code > for < /code > loop. Vel, hvis det er to < code > for < /code > looper i samme funksjon og begge løkkene gjentakelse gjennom en variabelen i det kaster en feil. Ved hjelp av n eller annen Div løser denne feilen. * /For (var n: uint = 0; n < index.totalMenuItems; n ++) {//denne VaR benyttes for å iterere gjennom hele vår meny elementer Var knapp: MovieClip = index.menu_clip.getChildByName ("id" + n ) som MovieClip; //Hvis setningen nedenfor er den viktigste delen av koden vår. //SWFAddress.getValue () blir forklart i neste trinn //vi trenger å kvitte seg med "/" på forsiden for at det skal være lik den knappen dype link hvis (button.deep_link == SWFAddress.getValue () .split ("/") [1]) {//hvis noen av knappen dyplenker lik URL satt da det initierer menu_item.init funksjon vi satt tidligere button.init (); //For å stoppe koden vi bruker avkastningen. komme tilbake; }}} SWFAddress.addEventListener (SWFAddressEvent.CHANGE, handleSWFAddress);
Trinn 16: SWFAddress.getValue ()
SWFAddress.getValue () er en fin måte å teste din dyplenking nettstedet uten web-server. Den beste måten å teste dyplenking hjelp SWFAddress.getValue () er å bruke sporingsfunksjonen. For eksempel:
spore (SWFAddress.getValue ());
Dette vil spore dagens swfAddress verdien i produksjonen
Trinn 17:. Legge i den første menyelementet
< p> Hvorfor i all verden skulle du ikke ønsker å laste den første menypunktet? Det finnes ingen god grunn, derfor vil jeg vise deg hvordan du gjør det. Gå til handleSWFAddress () funksjon og dra den inn i createMainMenu () -funksjonen under hele forrige koden. Legg inn denne koden under andre for loop (den vi nettopp opprettet):
//dette Var er referert til den første menyen itemvar firstButton: MovieClip = index.menu_clip.getChildByName ("id" + 0) som MovieClip; //bruke utsendelse hendelsen til brann pressen hendelsen på den første knappen. Dette setter så dype link. Den swfAddress på endring lytteren funksjon inits .//Derfor < code > for < /code > sløyfe ovenfor vil laste den første module.firstButton.dispatchEvent (ny MouseEvent (MouseEvent.MOUSE_DOWN));
Trinn 18: Ekstra Forbedringer
Vi skal nå bruke validering til menyen som gave for å lese denne tut. :)
Gå opp til menu_item.init funksjon i menyen for loop
for. (var i: uint = 0; i < index.totalMenuItems; i ++) {var knapp: MovieClip = index .menu_clip.getChildByName ("id" + i) som MovieClip; if (! knapp = dette) {button.enabled = true; button.addEventListener (MouseEvent.MOUSE_OUT, menuRollOut); button.dispatchEvent (ny MouseEvent (MouseEvent.MOUSE_OUT)); } Else {button.enabled = false; button.dispatchEvent (ny MouseEvent (MouseEvent.MOUSE_OVER)); button.removeEventListener (MouseEvent.MOUSE_OUT, menuRollOut); }}
Trinn 19: Feilsøking
OK! Nå skal vi ha en fungerende prosjekt. Men ikke kaste en fest ennå. Sjekk følgende ting:
Du har fullført alle trinn
Ikke publiser SWF, bare eksportere filmen ellers vil du overstyre main.html dokumentet du har fått fra kilden. laste ned.
Kontroller at du har importert alle nødvendige import. Vel alle import er nødvendig uten bare ett hele greia ikke ville fungere.
? Trinn 20: Hva gjør main.html gjøre
La oss ta en titt på main.html:
< html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "no" lang = "no" > < head > < title > < /title > < meta http-equiv = "Content-Type" content = "text /html; charset = utf-8" /> < style type = "text /css" > ! /* < [CDATA [* /html, body, #website {høyde: 100%; flow: hidden; } Body {background: # f7f7f7; font: 86% Arial, "Helvetica Neue", sans-serif; margin: 0; } /*]] ≫ * /< /style > < script type = "text /javascript" src = "SWFObject /swfobject.js" > < /script > < script type = "text /javascript" src = "swfaddress /swfaddress.js" > < /script > < script type = "text /javascript" > ! /* < [CDATA [* /swfobject.embedSWF ('main.swf', 'hjemmeside', '100%', '100%', '9', 'SWFObject /expressinstall.swf', {domene: ' * '}, {AllowScriptAccess: "alltid", allowfullscreen: "true", bgcolor:' # f7f7f7 ', menu:' falske ', wmode: "opaque"}, {id:' nettside '}); /*]] > * /< /script > < /head > < body > < div id = "hjemmeside" > < p > For å vise denne siden trenger du Flash Player 9 + support <! /p > < p > < a href = "http://www.adobe.com/go/getflashplayer" > < img src = "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt = "Get Adobe Flash player" /> < /a > < /p > < /div > < /body > < /html >
Mange som bare styling filen, endre bakgrunnsfargen, posisjonering SWF, ting som det. Her er de viktigste linjene:
< html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "no" lang = "no" > < head > < script type = "text /javascript" src = "SWFObject /swfobject.js" > < /script > < script type = "text /javascript" src = "swfaddress /swfaddress.js" > < /script > < script type = "text /javascript" > ! /* < [CDATA [* /swfobject.embedSWF ('main.swf', 'hjemmeside', '100%', '100%', '9', 'SWFObject /expressinstall.swf', {domene: ' * '}, {AllowScriptAccess: "alltid", allowfullscreen: "true", bgcolor:' # f7f7f7 ', menu:' falske ', wmode: "opaque"}, {id:' nettside '}); /*]] > * /< /script > < /head > < body > < div id = "hjemmeside" > < /div > < /body > < /html >
Dette inkluderer SWFObject og SWFAddress Javascript-filer, og bruker SWFObject å laste main.swf i div element som heter "hjemmeside". Det er alt som skal til! Sjekk ut denne screencast for en intro til SWFObject
Trinn 20:.. Hele koden Kommen
Nedenfor er hele koden kommen og arbeider
//satt scenen settingsvar fileStage:Stage=this.stage;fileStage.scaleMode=StageScaleMode.NO_SCALE;fileStage.align=StageAlign.TOP_LEFT;//import caurina tweenerimport caurina.transitions.Tweener; //hovedtidslinjen objectvar Indeks: Object = dette; //New Xml Objectvar fileXml: XML; //sjekke hvor mange menyelementer vi have.var totalMenuItems: Antall; //hindrer null errorsvar firstLoad : Boolean = true; //New URL Request - Legg en komplett hendelse lytteren å laste siden når belastningen har vært completed.var xmlLoader: URLLoader = new URLLoader (); xmlLoader.load (ny URLRequest ("main.xml") ); xmlLoader.addEventListener (Event.COMPLETE, createSite), funksjon createSite (e: Hendelses) {//lagre xml filen i vår xml variabel fileXml = new XML (e.target.data); //Bruker en konstruktør funksjon å bruke xml index.createMainMenu (fileXml.menu); } funksjon createMainMenu (xmlData: XMLList).. {//oppretter lengden på vår meny index.totalMenuItems = xmlData * lengde (); //Oppretter et filmklipp med forekomstnavnet menu_clip og legge den til på scenen. //Deretter bruke en < code > for < /code > sløyfe for å skape vår meny for (var i: uint = 0; i < index.totalMenuItems; i ++) {/* lage en MovieClip og eksport for action med klassenavnet: menyvalget det bør inneholde en dynamisk tekstboks med navnet på forekomsten av menu_item_text. * ///Lage vår nye menypunktet Var menu_item: MENUITEM = new menyvalget (); //Satt identifisering menu_item.name = "id" + i; menu_item.id = i; //Satt menypunktet dyplenken pluss formatering med split og bli med. toLowerCase () gjør hver karakter små bokstaver menu_item.deep_link = xmlData.item. @ ITEM_NAME [i] .split ("") .join ("_"). split ("/"). delta ("_"). toLowerCase ( ); //Gi det en knapp markør & gjøre målet på knappen og ikke sine barn menu_item.buttonMode = true; menu_item.mouseChildren = false; //Stilling våre menyelementer dynamisk menu_item.x = (i * menu_item.width); //Legger til xml verdiene til tekstboksen inne i nytt element. menu_item.menu_item_text.text = xmlData.item @ ITEM_NAME [i].; //Legger modulen adresse til menyen variable /Det vil komme til nytte senere. menu_item.item_module = xmlData.item @ item_module [i].; /* Opprette et nytt lag, og plasser menu_clip MovieClip på det laget. Gi den en forekomst navn menu_clip * ///tildele hendelser til menyknapper. plassere funksjoner for å håndtere disse hendelsene under createMainMenu funksjonen //roll & utrulling effekter menu_item.addEventListener (MouseEvent.MOUSE_OVER, menuRollOver); menu_item.addEventListener (MouseEvent.MOUSE_OUT, menuRollOut); menu_item.addEventListener (MouseEvent.MOUSE_DOWN, menuPress); /* Denne variabelen inneholder en funksjon som skal inneholde hendelsene når swfaddress i endret. * /Menu_item.init = function () {/* lage en ny MovieClip og kaller det module_clip, deretter plassere den på et nytt lag og deretter gi den forekomsten navnet module_clip * ///ny variabel som har inneholder banen til swf vi legger i var modul: String = this.item_module;. //Fade ut vår nåværende modul om noen, deretter begynne belastningen av vår nye modulen bruker tweener sin onComplete funksjon Tweener.addTween (index.module_clip, {alfa: 0, tid: to, overgang: "easeOutExpo", onComplete: function ( ) {index.createModule (modul); if (index.firstLoad == false) {index.module_clip.removeChildAt (0);}}}); for (var i: uint = 0; i < index.totalMenuItems; i ++) {var knapp: MovieClip = index.menu_clip.getChildByName ("id" + i) som MovieClip; if (! knapp = dette) {button.enabled = true; button.addEventListener (MouseEvent.MOUSE_OUT, menuRollOut); button.dispatchEvent (ny MouseEvent (MouseEvent.MOUSE_OUT)); } Else {button.enabled = false; button.dispatchEvent (ny MouseEvent (MouseEvent.MOUSE_OVER)); button.removeEventListener (MouseEvent.MOUSE_OUT, menuRollOut); }}} //Legger hvert menyelement til menu_clip MovieClip hjelp addChild () index.menu_clip.addChild (menu_item); } //Funksjon for å håndtere swfaddress hendelser. funksjon handleSWFAddress (e: SWFAddressEvent) {/* sett html tittelnavn * /var Title: String = "XML dyplenking Tutorial"; for (var i: Antall = 0; I < e.pathNames.length; i ++) {Title + = '/' + String (e.pathNames [i] .substr (0,1) .toUpperCase () + e.pathNames [i] .substr (1)) split ("_") bli ("")..; } /* Formatere html tittel vi bruker split og bli med teknikken. Den erstatter _ med et mellomrom. Vi gjør det en streng for å sikre at det er brukbar. .. String (e.pathNames [i] .substr (0,1) .toUpperCase () + e.pathNames [i] .substr (1)) split ("_") bli (""); * ///Denne funksjonen gjør hele jobben og tildeler html tittelen SWFAddress.setTitle (Title); //Oppretter et < code > for < /code > løkke for å iterere gjennom det totale antall fo menyelementer. derfor vi bruker index.totalMenuitems å gjøre det. /* Du lurer kanskje på hvorfor jeg bruker n istedenfor jeg i < code > for < /code > loop. Vel Adobe klarte ikke å innse at hvis det er to < code > for < /code > looper i samme funksjon og begge løkkene gjentakelse gjennom en variabelen i det kaster en feil. Ved hjelp av n eller annen Div løser denne feilen. * /For (var n: uint = 0; n < index.totalMenuItems; n ++) {//denne VaR benyttes for å iterere gjennom alle våre menyelementer //dette Var er referert til den første menypunktet Var knapp: MovieClip = index.menu_clip.getChildByName ("id" + n) som MovieClip; //Hvis setningen nedenfor er den viktigste delen av koden vår. //SWFAddress.getValue () blir forklart i neste trinn //vi trenger å kvitte seg med "/" på forsiden for at det skal være lik den knappen dype link hvis (button.deep_link == SWFAddress.getValue () .split ("/") [1]) {//hvis noen av knappen dyplenker lik URL satt da det initierer menu_item.init funksjon vi satt tidligere button.init (); //For å stoppe koden vi bruker avkastningen. komme tilbake; }} Var firstButton: MovieClip = index.menu_clip.getChildByName ("id" + 0) som MovieClip; //Bruker utsendelse hendelsen til brann pressen hendelsen på den første knappen. Dette setter så dype link. //Derfor < code > for < /code > sløyfe ovenfor vil laste den første modulen. firstButton.dispatchEvent (ny MouseEvent (MouseEvent.MOUSE_DOWN)); } SWFAddress.addEventListener (SWFAddressEvent.CHANGE, handleSWFAddress); } funksjon menuRollOver (e: MouseEvent) {//menyknappen variabel - Vi bruker getChildByName å sikte på riktig menypunktet //e.target.id henviser til menu_item.id vi definerte tidligere. Var knapp: MovieClip = index.menu_clip.getChildByName ("id" + e.target.id) som MovieClip; //Setter animasjon ved hjelp caurina tweener Tweener.addTween (knapp, {alfa: 0,5, tid: to, overgang: "easeOutExpo"}); } funksjon menuRollOut (e: MouseEvent) {//menyknappen variabel - Vi bruker getChildByName å sikte på riktig menypunktet //e.target.id henviser til menu_item.id vi definerte tidligere. Var knapp: MovieClip = index.menu_clip.getChildByName ("id" + e.target.id) som MovieClip; //Setter animasjon ved hjelp caurina tweener Tweener.addTween (knapp, {alfa: 1, tid: to, overgang: "easeOutExpo"}); } funksjon menuPress (e: MouseEvent) {//SWFAddress sett verdifunksjon SWFAddress.setValue (e.target.deep_link); } /* dette er den funksjonen som laster den valgte modulen * /funksjon createModule (url: String) {//vi lage en ny loader Var loader: Loader = new Loader (); //Vi opprette en ny url forespørsel om vår loader Var moduleURL: URLRequest = new URLRequest (url); //Vi legge hendelsen lyttere til lasteren. noen er ikke nødvendig, men jeg følger dem for enkelhets loader.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, loadProgress); //Når modulen er lastet vi utløse komplett med en hendelse lytteren. loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadComplete); loader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, loadError); loader.load (moduleURL); funksjon loadProgress (e: ProgressEvent) {} //utløses når modulen er lastet funksjon loadComplete (e: Hendelses) {//fade i modulen Tweener.addTween (index.module_clip, {alfa: 1, tid: to, overgang: " easeOutExpo "}); //Legge til gjeldende modulen til module_clip MovieClip ved hjelp addChild index.module_clip.addChild (e.currentTarget.content); //Nå har vi den første lasten vi satt firstLoad til false index.firstLoad = false; } Funksjon loadError (e: Hendelses) {trace ("feil"); }}
Konklusjon
Takk for at du leser denne tut. Hvis du har spørsmål eller problemer forlate dem nedenfor. Nå skal du forstå hvordan å bygge en dyplenking nettside uten å forstå hvordan en dynamisk nettside skal kodes. Anmeldelser