Develop en OOP Drop Down Menu Bruke Actionscript 3.0 Dokumenter

Del
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I dette, min første tutorial for Flashtuts +, jeg vil raskt forklare hvordan du oppretter et objektorientert nedtrekksmenyen. Vi vil bruke Actionscript 3.0 og trekke alle nødvendige data fra en XML-fil.

Den resulterende menyen kan brukes i alle flash-fil uten omkoding.

< .no>
Trinn 1 - Innstilling av CLASSPATH

Først, vil vi sette opp en klassebane. Hvis du ikke ennå har en, er det et nyttig sted for å sette Actionscript-filer som du bruker i hvert prosjekt. På denne måten trenger du ikke å kopiere Actionscript-filer til en mappe på fla dokumentet hver gang du oppretter et nytt nettsted eller applikasjon.

Lag en mappe for Action filer i c :. Jeg vil opprette mappen c: /myActionScripts, men du kan lage en katalog hvor du vil med det navnet du ønsker

For flash CS3, gå til Rediger >. Preferanser. I kategorien menyen i valgpanelet, velg "Action". På høyre side av panelet, klikker du på knappen "ActionsScript 3,0 settings ...".

Dette vil åpne et annet panel (Actionscript 3.0 innstillingspanelet). Klikk på plussknappen (+) og skriv "c: /myActionScripts", eller hva ditt katalogplassering er. Deretter klikker du bare OK på alle åpne paneler, nå har vi en klassebane

For flash CS4, gå til Rediger >.; Preferanser. I kategorien menyen i valgpanelet, velg "Action". På høyre side av panelet, klikker du på knappen "ActionsScript 3,0 settings ...".

Dette vil åpne et panel som heter "Actionscript 3.0 Avanserte innstillinger". I "kildebanen", klikk på pluss-knappen (+) og type c: /myActionScripts, eller hva din katalogplassering er. Deretter klikker du bare OK på alle åpne paneler, nå har vi en klassebane

Trinn 2 -. Nedlasting Klasser og Opprette mapper

Gå til http://blog.greensock.com/tweenliteas3/og laste ned TweenLite Actionscript 3.0 klasse, courtesy of Jack Doyle. Denne klassen er mye bedre enn den Tween klassen innebygd blits CS3 og flash CS4

Når nedlastingen er ferdig, bare pakke ut innholdet i "GS" inne i .zip filen til c:. /MyActionScripts /gs til gjøre TweenLite klassen tilgjengelig for bruk når du vil, uten å måtte kopiere gs-mappen til en tilsvarende mappe på prosjektet

Også opprette mappen c:. /myActionScripts /dropdownmenu. Vi vil sette Actionscript-filer fra denne opplæringen her. Vi vil da kunne bruke vår DropDownMenu Object når vi vil, uten å måtte kopiere dropdownmenu mappen til hvert prosjekt. Dette er fordelen med å bruke en klassebane

Trinn 3 -. Opprette XML-dokumenter

Jeg skal bruke 5 xml-filer, en xml for hoved nedtrekksmenyen og andre til å fylle data i den andre rullegardinmenyen. Lagre alle XML-filer i C: /dropdownexample /xml

Lagre første xml dokument som "menu.xml" i mappen "xml".. Fyll den med data som:?
≪ xml version = "1.0" encoding = "utf-8" > < menyen > < element caption = "Selskaps kontakter" value = "xml /contactlist1.xml" /> < element caption = "Home kontakter" value = "xml /contactlist2.xml" /> < element caption = "Friends" value = "xml /contactlist3.xml" /> < element caption = "School kontakter" value = "xml /contactlist4.xml" /> < /meny >

Lagre en andre xml dokument som "contactlist1.xml" i xml-mappen, data som følger:
<? xml version = "1.0" encoding = "utf-8" >? < menyen > < element caption = "Director området" value = "[email protected]" /> < element caption = "Finans" value = "[email protected]" /> < element caption = "Designing området" value = "[email protected]" /> < element caption = "Care området" value = "[email protected]" /> < element caption = "Print området" value = "[email protected]" /> < element caption = "Internet området" value = "[email protected]" /> < element caption = "Lege området" value = "[email protected]" /> < /meny >

Lagre en tredje xml dokument som "contactlist2.xml" i xml-mappen, data som følger:
<? xml version = "1.0" encoding = "utf-8" >? < menyen > < element caption = "Mamma" value = "[email protected]" /> < element caption = "Daddy" value = "[email protected]" /> < element caption = "Brother" value = "[email protected]" /> < element caption = "Syster" value = "[email protected]" /> < /meny >

Lagre annen xml dokument som "contactlist3.xml" i xml-mappen, data som følger:?
< xml version = "1.0" encoding = "utf-8" > < menyen > < element caption = "Tim" value = "[email protected]" /> < element caption = "Sam" value = "[email protected]" /> < element caption = "David" value = "[email protected]" /> < element caption = "Julio" value = "[email protected]" /> < element caption = "Lucas" value = "[email protected]" /> < /meny >

Til slutt lage den siste xml dokument som "contactlist4.xml", igjen i xml mappe med følgende data:?
< xml version = "1.0" encoding = "utf-8" > < menyen > < element caption = "mattelærer" value = "[email protected]" /> < element caption = "engelsklærer" value = "[email protected]" /> < element caption = "Geografi lærer" value = "[email protected]" /> < element caption = "History lærer" value = "[email protected]" /> < element caption = "fisic lærer" value = "[email protected]" /> < /meny >
Trinn 4 - Coding menyvalget Object

Nå skal vi starte koding menyvalget Gjenstand. Dette er nødvendig for vår nedtrekksmenyen og vil bygge elementene i listen

Begynne å lage pakken, vil vi lagre filen i c:. /MyActionScripts /dropdownmenu slik at pakken kalles "dropdownmenu", så får vi importere klasser som vi ønsker å bruke i dette objektet
pakken dropdownmenu {import flash.display.Sprite.; import flash.text.TextField; import flash.text.TextFormat; import flash.events. *; import gs.TweenLite;

Nå opprette klassen MENUITEM. Som vi utvide Sprite klasse, vil vi ha alle metoder og egenskaper i den klassen, men vi vil likevel legge til flere.

Merk at vi skal lagre denne Actionscript-fil som "MenuItem.as "i dropdownmenu mappen. Pakken har derfor samme navn som mappen og klassen har samme navn som den .as filen.
Public class MENUITEM strekker Sprite {

Erklærer og sett variablene her, slik at du kan bruke dem med en funksjon i klassen. Vi setter som dem privat slik at bare denne klassen har tilgang til dem. Hvis du deklarere variabler inne i en funksjon, bare at funksjonen vil ha tilgang til variabelen. I vårt tilfelle ønsker vi hele klassen å ha tilgang til variablene
private Var _value. String; privat Var txt: Textfield = new Textfield (); privat Var txtFormat: tekstformat = new tekstformat ();

Vi vil erklære følgende funksjon som offentlig, slik at du får tilgang til den fra hvor som helst. Denne funksjonen har samme navn som klassen Det er konstruktøren funksjon og vil bli kalt når vi instantiate dette objektet. Det vil være den første funksjonen som skal utføres, og vil bli utført hver gang du oppretter et nytt objekt av MENUITEM. Konstruktøren Funksjonen er alltid offentlig

Vi vil passere bildetekst, verdi, bredde og høyde verdier gjennom konstruktøren.
Offentlig funksjon MENUITEM (bildetekst: String, verdi: String, _width: int = 200 , _height: int = 20): void {

Nå skal vi sette denne klassen til "buttonMode", så det vil oppføre seg som en knapp og håndpekeren vises hver gang du passerer musen over det. Vi setter alfa til 0,8 (dette vil være musen ut state) vi har erklært _value variabel før, utenfor funksjonen, så her vi gjøre verdien synlig for noen annen funksjon av klassen og _width vi redusere med 10 , så menypunktet vil være litt mindre
this.buttonMode = true;. this.alpha = 0,8; _value = verdi; _width- = 10

Tegn et svart rektangel for bakgrunnen (dette kan være alle farger, bare endre 0x000000 til hva du vil)
this.graphics.beginFill (0x000000);. this.graphics.drawRect (0,0, _width, _height);

Nå skal vi sette teksten format objekt. Det er opprettet utenfor funksjon og vil være tilgjengelig for enhver funksjon i denne klassen. Dette vil være vår element bildetekst (et dynamisk tekstfeltet)
txtFormat.color = 0xFFFFFF;. TxtFormat.size = 10; txtFormat.font = "Verdana";

Nå skal vi sette standard tekstfeltet format til tekst format objekt. Vi vil deaktivere muse interaktivitet i tekstfeltet, slik at teksten ikke vil være klikkbare (dette fungerer med alle vises objekt). Vi vil sette teksten i txt dynamisk tekstfelt som variabelen "caption" gått gjennom konstruktøren parameter. Da er det et spørsmål om den aktuelle posisjonen x og y av tekstfeltet og dens bredde og høyde. Deretter legger vi teksten til menyvalget Object's visningslisten
txt.defaultTextFormat = txtFormat.; txt.mouseEnabled=false;txt.text=caption;txt.x=5;txt.y=2;txt.width=_width-10;txt.height=_height-4;addChild(txt);

Now la oss legge til hendelsene. Når vi legger dette objektet på scenen, vil addedToStage funksjonen kalles. Når vi passerer musen over objektet, vil mouse funksjonen kalles. Når vi tar musen ut av dette objektet den mouseout funksjonen vil bli kalt. Vi stenger også konstruktøren funksjon med en "}" på end.
addEventListener(Event.ADDED_TO_STAGE,addedToStage);addEventListener(MouseEvent.MOUSE_OVER,mouseOver);addEventListener(MouseEvent.MOUSE_OUT,mouseOut);}

Insert en ny funksjon her. Når musen er over objektet vil det jevnt satt alfa til 1, så dette objektet vises annerledes enn de andre (musen over state)
privat funksjon mouse. (E: MouseEvent): void {nytt TweenLite (dette, en {alpha: 1}); .}

Når vi tar musen ut av objektet, alfa vil jevnt bli satt tilbake til 0,8 (musa ut state)
privat funksjon mouseout (e: MouseEvent): void {nytt TweenLite (dette, 1, {alpha: 0,8}); }

Når dette formål tilsettes til scenen, setter vi objektets posisjon ved å få dens indeks i displaylist og å multiplisere dette med sin høyde. . Vi har en sekvens av indekser (0, 1, 2, 3) vil og plassere ett objekt på hverandre, ikke over hverandre
privat funksjon addedToStage (e: Hendelses): void {this.y = this.parent .getChildIndex (denne) * this.height; }

Funksjonen "få" er en egenskap, det fungerer som en variabel, men det er skrivebeskyttet. Du kan ikke stille disse verdiene utenfor denne klassen, men du kan lese dem. De kommer tilbake verdien av variabler eller textfields som er utilgjengelige utenfor klassen
offentlig funksjon får bildetekst (). String {return txt.text; } offentlig funksjon får valuta (): String {return _value; }

Nå lukker klasse og pakken vi ble åpnet i begynnelsen av filen. Lagre det som "MenuItem.as" på C: /myActionScripts /dropdownmenu, bør filen være plassert på c: /myActionScripts/dropdownmenu/MenuItem.as
}}
Trinn 5 - Lag Custom Hendelses

Nå skal vi lage en ny tilpasset hendelser denne klassen. Når vi endrer menypunktet vil vi få verdien gjennom denne hendelsen.

Start pakken, importere Event og skape klassen strekker Event klassen. Nå har vi en ny hendelse klasse som vi kaller "DropDownMenuEvent"
pakke dropdownmenu {import flash.events.Event;. Public class DropDownMenuEvent strekker tilstelninger {

Statiske variabler, funksjoner eller konstanter kan nås uten å måtte instantiate objektet. Du trenger ikke å bruke den nye erklæringen, kan du bare tilgang til den ved hjelp av: DropDownMenuEvent.CHANGE

konst er konstanter. Når du har satt en verdi til const, kan ikke verdien endres. Du kan bruke små bokstaver for å nevne konstanter, men som standard nesten alle sammen bruker store bokstaver for konstanter, og vi vil ikke gjøre noe annerledes
public static konst ENDRING:. String = "change";

instantiate disse String objekter her å sikre tilgang fra hvor som helst i denne klassen
private Var _caption. String; privat Var _value: String;

Nå opprette konstruktøren funksjon. Den super (type) er å sette denne klassen som en super
offentlig funksjon DropDownMenuEvent (type: String, bildetekst: String, verdi: String):. Void {super (type); _caption = bildetekst; _value = verdi;}

Nå gjør de getter funksjoner i klassen, for å få verdiene som skrivebeskyttet. Jeg har forklart før hvordan getter funksjonen fungerer
offentlig funksjon får bildetekst (). String {return _caption; } offentlig funksjon får valuta (): String {return _value; }

Lukk pakken og klassen ved hjelp av "}" og lagre som c: /myActionScripts/dropdownmenu/DropDownMenuEvent.as
}}
Trinn 6 - Opprett DropDownMenu Object

Jeg sparte dette objektet for siste fordi den mer kompleks. Dessuten vil det ikke fungere uten de 2 klassene laget ovenfor

Denne delen er allerede godt forklart.; vi vil definere pakken, importere alle klasser som vi skal bruke, skape klassen utvide Sprite, satt variablene utenfor funksjonene for å bruke med hvilken som helst annen funksjon i denne klassen, og deretter starte konstruktøren funksjon. Ikke noe nytt her.

Jeg skal heller ikke trenger å si igjen at klassen, konstruktør og filnavnet er det samme.

Konstruktøren funksjonen har alle parametrene forhåndsdefinerte, slik at vi kan velge om du vil sende parametre. Vi kunne passere bare den første parameteren, eller den første og den andre, eller den første, den andre og den tredje. Vi kunne også passere den første parameteren som null, så det vil være den samme verdien som den forhåndsdefinerte verdien i konstruktøren
pakken dropdownmenu {import flash.display.Sprite.; import flash.display.Shape; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField; import flash.text.TextFormat; importere flash.xml. *; import flash.events. *; import flash.display.Graphics; import flash.display.GradientType; import flash.geom.Matrix; import flash.display.SimpleButton; import gs.TweenLite; public class DropDownMenu strekker Sprite {private Var container: Sprite = new Sprite (); private Var req: URLRequest = new URLRequest (); private Var loader: URLLoader = new URLLoader (); private Var txt: Textfield = new Textfield (); private Var txtFormat: tekstformat = new tekstformat (); private Var knapp: Simple = new Simple (); private Var _value: String; offentlig funksjon DropDownMenu (url: String = null, _width: int = 200, _height: int = 30): void {

Beholderen er en sprite, opprettet ovenfor utenfor noen funksjon for hele klassen har tilgang. Vi setter alle menyelementer inne i containeren de; sette y eiendom til _height param. Containeren vil være usynlig til å begynne med (alfa = 0), så det kan ikke klikkes. Selv om det var synlige, er alfa fortsatt 0, så det vil ikke vises ennå container.y = _height;. Container.alpha = 0; container.visible = false; addChild (container);

Opprett en bakgrunn og legge til objektet. Den drawobject er en funksjon som returnerer en Shape, vi får se dette litt senere
Var BG:. Shape = drawobject (_width, _height); addChild (bg);

Igjen, setter vi de tekstformat objektegenskapene og sette defaultTextFormat eiendommen av txt objekt som tekstformat objekt. Vi deaktivere interaktivitet med musen, satt en standard tekst mens xml ikke er lastet ennå, og legge til txt tekstfeltet til dette objektet visningslisten. Alle disse tiltakene har vært sett før, så de trenger ikke altfor mye explanation.
txtFormat.bold=true;txtFormat.size=15;txtFormat.font="Verdana";txt.defaultTextFormat=txtFormat;txt.x=5;txt.y=3;txt.width=_width-10;txt.height=_height-6;txt.mouseEnabled=false;txt.text="XML ikke lastet "; addChild (txt);.

Knappen, skapt utenfor funksjonen, kan acessed fra hvor som helst i denne klassen Vi setter en ny form for hitTestState, deretter legge til en hendelse Når klikket det vil kreve funksjon. "åpen". Deretter legger du på knappen til dette object's skjerm list.
button.hitTestState=drawObject(_width,_height);button.addEventListener(MouseEvent.CLICK,open);addChild(button);

Now legge hendelsen lyttere. En for loader når lasteren har fullstendig utfylt lasting av XML-dokument. Dette vil kalle funksjonen loaderComplete, eller hvis den loader ikke finner den xml dokumentet det vil kaller funksjonen loaderIOError

Denne klassen når det legges til scenen vil kalle funksjonen addedToStage. Når fjernet fra scenen det vil kaller funksjonen removedFromStage.
loader.addEventListener(Event.COMPLETE,loaderComplete);loader.addEventListener(IOErrorEvent.IO_ERROR,loaderIOError);addEventListener(Event.ADDED_TO_STAGE,addedToStage);addEventListener(Event.REMOVED_FROM_STAGE,removedFromStage);

Here vi sjekke om noe annet enn null verdi ble sendt til url param av konstruktøren I så fall vil vi sette url (privat Var url: URLRequest = new URLRequest ()).. og kaller funksjonen belastning Lukk konstruktør funksjon med en "}"
if (url) belastning (url);}

Som belastningen funksjonen er offentlig, det kan du laste xml hvor som helst utenfor eller inne i denne klassen Først denne funksjonen vil fjerne alle menyelementer inne i de. . container Hvis noen eksisterer, så vil det begynne å laste xml dokumentet
offentlig load funksjon (url: String):. void {txt.text = "Loading"; _value = null; Var total: int = container.numChildren; for (var i: int = 0; i < totalt; i ++) {container.removeChildAt (0);} req.url = url; loader.load (req);}

Denne funksjonen vil bli kalt når knappen er trykket. Det vil sjekke om alfa-av beholderen er lik null. I så fall vil det sette synligheten av beholderen til sann, alfa til 0, og vil jevnt sette alfa av beholderen 1. Hvis alfa av beholderen er allerede mer enn 0, vil det ringe for tett funksjon
privat funksjon åpen (e: MouseEvent):. void {if (container.alpha == 0) {container.visible = true; container.alpha = 0; ny TweenLite (container, 0,5, {alfa: 1}); } Else {close (); }}

Den nære funksjonen vil bli kalt når du klikker hvor som helst, fordi vi vil legge et arrangement til scenen for når musen er nede. Denne funksjonen vil undersøke om en container's alpha er mer enn 0. Hvis det er tilfelle vil det jevnt sette container's alfa til 0. Når du er ferdig vil det kaller funksjonen hideContainer () som setter container's synlighet til false (usynlig og klikkes)

Vi skal legge et arrangement til scenen, den MouseEvent.MOUSE_DOWN, så funksjonen stageMouseDown
privat funksjon close ():.. void {if (container.alpha > 0 ) ny TweenLite (container, 0,5, {alfa: 0, onComplete: hideContainer}); } private funksjon hideContainer (): void {container.visible = false; } private funksjon stageMouseDown (e: MouseEvent): void {this.close (); } private funksjon stageMouseLeave (e: Hendelses): void {this.close (); }

loaderIOError vil bli kalt hvis lasten funksjon av lasteren ikke finner den xml dokumentet og vil sette bildeteksten til "XML ikke funnet".

addedToStage vil bli kalt når dette objektet er lagt til listen trinnet displayet. Det vil legge et arrangement for når du klikker hvor som helst på scenen for å ringe stageMouseDow funksjonen.

removedFromStage vil bli kalt når dette objektet er fjernet fra scenen. Det fjerner hendelsen fra scenen slik at klikkene på scenen vil ikke lenger kalle for stageMouseDown funksjonen.

Når musen forlater scenen, vi vil også lukke rullegardinmenyen.
Privat funksjon loaderIOError ( e: IOErrorEvent): void {txt.text = "XML ikke funnet"; } private funksjon addedToStage (e: Hendelses): void {stage.addEventListener (MouseEvent.MOUSE_DOWN, stageMouseDown); stage.addEventListener (Event.MOUSE_LEAVE, stageMouseLeave);} private funksjon removedFromStage (e: Hendelses): void {stage.removeEventListener (MouseEvent.MOUSE_DOWN, stageMouseDown); stage.removeEventListener (Event.MOUSE_LEAVE, stageMouseLeave);}

Funksjonen loaderComplete kalles når xml er fullastet, det vil fungere slik:

Angi standardteksten fra txt objekt til "Velg" og verdien til null, slik at vi ikke har en verdi og standardteksten er bare "Velg"

Opprett en ny XML eksempel

Sjekk det totale antall noder som ha en < element > tag i xml dokumentet og sett inn i "total" variable.

Loop verdiene i xml dokument, får sine bildetekst og verdiegenskaper. Eiendommene i xml er fått vedproperty og nodeverdien bare .node uten @.