AS3 101: OOP Introduksjon - Basix

AS3 101: OOP Introduksjon - Basix
7
Del
6
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter AS3 101.AS3 101: XML - BasixAS3 101:. Fem grunner til å bruke settere og Getters

To ganger i måneden, vi besøker noen av våre lesernes favoritt Innlegg fra hele historien Activetuts +. Denne ukens retro-Active tutorial, første gang utgitt i oktober 2010, er en innføring i objektorientert programmering i AS3. Ikke glem å sjekke ut de andre AS3 101 tutorials!

Objektorientert programmering er litt av et hett tema. Flere og flere programmeringsspråk er beskjæring opp som støtter det (Ruby, for eksempel), og flere og flere språk som tidligere ikke støtter objektorientert programmering (OOP for kort) har blitt utgitt med versjoner som gjør det, som PHP og Actionscript . Noen språk bare
arbeid hvis du bruker hele OOP ting til å begynne med, som Java og Objective-C.

Det har faktisk vært rundt i lang tid, men kom inn i rampelyset i 1990 er først og fremst på grunn av dens fordeler med programmering GUI og fremveksten av C ++ og Objective-C. Wikipedia har en interessant avsnitt om historien til OOP, som er et flott sted å begynne å lære.




Innledning

Hvis du er ny på objekt Orientert programmering, har du litt av en læringskurve foran deg. Men omfavne denne teknikken er ikke bare "in" ting å gjøre; det kan redusere utviklingstiden og samtidig redusere antall feil i koden. Det holder deg organisert og hindrer unødvendig dobbeltarbeid. Men kanskje mer overbevisende enn de høye løftene er at Adobe har sikkert sette all sin tyngde bak begrepet OOP når det kommer til Actionscript. Action 1 ble ikke objektorientert i det hele tatt, og AS 2 ble bare objektorientert som utvikler bekvemmelighet. I kontrast AS 3 støtter full Boret Objektorientert funksjoner, og hvis noe, bare vil gjøre mer i årene som kommer. Så, hvis du liker programmering Flash og ikke ønsker å få igjen, ville det gjøre deg godt å vedta OOP som en livsstil.

I denne opplæringen vil vi gradvis introdusere noen av de sentrale begreper involvert i objektorientert programmering. Det endelige produktet kommer ut av Flash vil bli litt tamt, men dette er bare del 1. Du vil se noen praktiske utforskningen av OOP teknikker, selv om denne opplæringen er egentlig ikke om å bygge et konkret prosjekt.

Du vil imidlertid lære å lage en gjenbrukbar knapp som kan brukes i tilfeller der en quick-and-dirty-knappen er nødvendig, eller til og med, med endring, som et sentralt element i ditt neste prosjekt.


< h2> Trinn 1: Det store spørsmålet

Så hva er dette Objektorientert programmering handler om

Først, la meg forklare hva det ikke?. Objektorientert programmering (eller OOP for kort) er ikke den eneste eller nødvendigvis den beste måten å programmere i Actionscript 3. Det synes å være en myte flytende rundt helt siden Actionscript 3 debuterte som, for å bruke AS3, må du bruke OOP.

Selv om det er sant at AS3 er mye bedre egnet til å oop enn AS2 var, og at du blir oppfordret til å gå i den retningen, det er ikke sant at du må lære deg å skrive klasser og instantiate gjenstander for å bygge reelle søknader i Flash. Hvis du har fulgt AS3 101-serien til nå, har du kanskje lagt merke til at hver linje av Actionscript 3 som vi skrev i prosessen var i skriptet panel, ikke en klasse fil. Dette bør bidra til å illustrere at det er helt akseptabelt å ikke bruke OOP som du arbeider i Flash.

Når det er sagt, Actionscript 3 virkelig skinne når du begynner å omfavne OOP. Og ikke bare AS3, men alle språk som støtter OOP kan utnyttes mer effektivt når OOP teknikker er engasjert. Dette er fordi OOP er egentlig bare en teknikk - en stor, kompleks teknikk med mange alternativer å vurdere, men likevel, bare en teknikk - og ikke et mandat. Og det er en flott teknikk, en som du bør starte mestring. Og det er derfor du er her, rett



Trinn 2: Klasser og objekter

Objektorientert programmering virkelig koker ned til to grunnleggende enheter: klasser og objekter. De to er egentlig related: en klasse avler et objekt

Tenk på en klasse som en blåkopi av et hus, og et objekt som en faktisk huset.. Blåkopi er mer av en skjematisk for hva huset vil være like, ikke en faktisk huset. Når du skriver objektorientert kode, skriver du skissene, klassene. Koden deretter oppretter objektene fra disse klassene når den kjører.

En blåkopi kan også gjenbrukes til å skape mer enn ett hus. I enkelte boligfelt, kan du se dette i aksjon; en kostnadsbesparende teknikk som betaler arkitekten for en blåkopi, men genererer flere hus fra det blåkopi. Disse husene er alle unike enheter, og hva som foregår i ett hus er isolert fra det som skjer i et annet hus. Men de deler en rekke fellestrekk, som for eksempel utformingen av VVS og elektriske ledninger, eller hvor trappen er plassert. Husene kan alle ha en inngangsdør på samme sted, men ett hus kan ha en metall dør malt rød, og et annet hus kan ha en umalt tredør med en dørhammer.

En klasse, på samme måte, kan skape mer enn ett objekt. Disse objektene er alle av samme skriv
, men er alle unike enheter, som husene. Igjen, er det mange fellestrekk, men opprettholde separate identiteter. Et objekt som laster data fra en ekstern kilde ville ha, som en vanlig funksjon, muligheten til å laste inn data og sende ut en komplett hendelse når den er klar. Men en eksempel
av denne lasteren ville ha en unik egenskap som lastet data fra en URL, mens en annen eksempel
ville laste data fra en annen nettadresse.

Begrepet eksempel
er et ord som beskriver et objekt. Når et objekt er opprettet fra en klasse, det sies å være instansiert
, og dermed en forekomst av klassen
er født. Ordet objekt
er vanligvis synonymt med eksempel
.

Hvis terminologien er problematisk deg, må du huske på biblioteket symbol /Instance forholdet som har eksistert siden Flash 1. En symbol
er et enkelt element i biblioteket. En eksempel
er en bestemt manifestasjon av det symbolet. Det kan være mer enn én forekomst av et gitt symbol, og endringer i en enkelt symbol kunstverk vil endre alle forekomster av det symbolet. Likevel hvert enkelt tilfelle kan opprettholde noen unike egenskaper, som posisjon, rotasjon, farge transformasjon, filtre og skala (for å nevne noen). Dette er direkte analogt til klassen og objekter (instanser). Faktisk er det mer enn bare analogt, så vi får se i neste utgaven av denne serien



Trinn 3:. Møt Document Class

Vel, la oss hoppe i, skal vi? Jeg tror den beste måten å få føttene våt i OOP AS3 er å bli kjent med dokumentet klassen. Dokumentet klassen er en klasse som alle andre i AS3, bortsett fra at den har et veldig spesielt forhold med en Flash-fil. Det er den
klasse som representerer SWF at du publiserer. Dokumentet klasse blir instansiert når SWF starter opp. Dette er analogt til ideen om en "main" funksjonen hvis du har en bakgrunn i C, eller "main" metode for den største klassen i Java



Trinn 4:. Lag en prosjektmappe

La oss lage et dokument klasse, som vil fungere som et grunnlag for skritt senere i denne opplæringen. For å gjøre dette, må du først opprette en mappe på filsystemet som skal huse dette prosjektet.

Nå gjør en Flash-fil (Actionscript 3.0), og lagre det i denne mappen. Navnet er ikke veldig viktig, men jeg skal navngi min MeetTheDocumentClass.fla



Trinn 5: Dokument Class tekstfil

Nå må du lage en tekstfil. Du kan bruke Flash CS3 + for dette, eller du kan bruke Flex /Flash Builder, eller du kan bruke en hvilken som helst annen stand tekstredigeringsprogram, egentlig. FlashDevelop er en stor (og gratis) valg, hvis du er på Windows. Det er mange valg i tekstredigeringsprogrammer, og det er ingen riktige svar (selv om, som jeg sier til mine studenter, det er en
galt svar. Teksten editor er innebygd i Flash CS3 /4 er faktisk ganske elendig, og jo raskere du omfavne det faktum jo raskere vil du nyte koding i et real
editor). Personlig er jeg glad i Textmate, men husk at det som teller er teksten i filen.

Alt som blir sagt, opprette en ny fil i editoren som du velger (hvis du bruker Flash CS3 +, gå til Fil-menyen, velg Ny, og velg deretter Actionscript-fil fra listen. Hvis du ikke er, så jeg antar at du er kjent nok med editor for å være i stand til å gjøre dette uten retning fra meg).

Lagre denne filen som DocumentClass.as i samme mappe som Flash-fil
. Dette er viktig: plasseringen og navnet saken veldig mye. Navnet trenger ikke å faktisk være "DocumentClass.as", men det er hva jeg skal bruke, og for å unngå forvirring, anbefaler jeg at du bare gjør det jeg gjør. Navnet kan være alt du vil (mer eller mindre), men mitt poeng er at navnet spiller en viktig rolle i AS3 OOP, så vær oppmerksom. Samme avtale med plasseringen av filen; teknisk sett kan være hvor som helst, men for enkelhets skyld bare følge min bly. Flere alternativer vil bli avslørt ved slutten av denne serien

For å oppsummere, her er mitt prosjekt mappe som det står:.



Trinn 6: Skriv dokument Class

Du står nå overfor en tom fil. Hvis du noen gang har lidd skrivevegring (Jeg har, som faste lesere kanskje har gjettet ...), kan du bli trøstet seg med at det første du trenger å skrive er faktisk standardtekst. Du må skrive følgende:
pakke {import flash.display.MovieClip; public class document strekker MovieClip {offentlig funksjon document () {}}}

Wow, hva er alt dette? Vel, det er litt mer enn vi trenger å forklare akkurat nå. Jeg vil bare peke ut noen steder av interesse.

Først oppmerksom på at pakken brytes opp hele greia. Ikke bry deg om hva dette er akkurat nå, bare husk at det trenger å være der, og klassen må finnes i den.

For det andre har vi en import uttalelse. Du kan ikke ha sett en linje med kode som dette før; hvis du har fast til koding i Script panelet frem til nå, og har ikke gjort bruk av tredjeparts Actionscript-biblioteker, du har aldri trengte å skrive en import uttalelse. I OOP-verden, hver klasse må importere de ulike klassene det er behov for å gjøre sine ting. Mer på import senere.

For det tredje, den neste "wrapper" er den klassen selv. Du kan se søkeordet "klasse" i den tredje linjen. Anatomi av denne linjen er mer enn vi trenger akkurat nå, bare oppmerksom på at ordet etter ordet "klasse" er navnet på klassen. Du har kanskje lagt merke til at navnet jeg brukte er den samme som navnet på filen, sans forlengelse. Dette er ikke en tilfeldighet. For klasser til å jobbe i AS3, må navnet på klassen matche navnet på filen. Ikke glem det.

Vi vil komme tilbake til "strekker MovieClip" bit i neste opplæringen. For nå, bare vet at denne biten er nødvendig for et dokument klasse (du kan også forlenge Sprite, a la
"strekker Sprite", hvis du ikke trenger den tidslinjen, og hvis du endrer import linjen til "import flash.display.Sprite;")

Endelig har vi konstruktøren



Trinn 7:. The Constructor

I forrige eksempel, der er en (nesten) normal funksjon som er definert innenfor klassen. Nesten normal, bortsett fra at "public" i front, og den manglende datatype. Igjen, ikke bekymre deg om "public" for nå, som vil komme i gang. Men merk deg navnet på funksjonen. Det er riktig, det er det samme som filen og som klassenavnet. Forhåpentligvis du ikke er altfor paranoid, fordi dette ikke er en konspirasjon. Det er bare slik ting fungerer. Ved å navngi funksjonen med samme navn som klassen, skaper vi en spesiell funksjon som kalles konstruktør
. Konstruktøren blir henrettet under oppretting. Forhåpentligvis du holde opp med ny terminologi, fordi vi bare brukt to nye vilkårene i samme setning. nerdCred ++;

Et objekt vil kunne ha andre funksjoner i det, som du er velkommen til å definere, men konstruktøren er den eneste funksjonen som blir kalt automatisk under oppretting. Konstruktøren, derfor er der du ønsker å sette kode som skal utføre for å få et objekt klar for første gangs bruk. For eksempel, hvis du skriver en klasse for et objekt som har som jobb vil være å laste noen XML, analysere den, deretter laste miniatyrbilder basert på disse dataene, kan det være lurt å lage en URLLoader, sette opp sin hendelse lytteren, og kanskje til og med begynne lasting, alt når du oppretter objektet. At logikken kan deretter gå inn i konstruktør



Trinn 8:.! Hello, World

Som et praktisk eksempel, vil vi gjøre en liten "Hello World" program. Vi vil ikke bare spore ordene til utdatapanelet, nei, det er litt mamsy og definitivt for pamsy. Vi vil opprette en Textfield, legge den til scenen, og sette noen tekst i det. Utvid dine DocumentClass.as fil å se slik ut (endringene er i fet skrift):
pakke {import flash.display. MovieClip; import flash.text.TextField; public class document strekker MovieClip {offentlig funksjon document () {var tf: Textfield = new Textfield (); addChild (tf); tf.text = "Hello World"; }}}

Merk at i tillegg til de tre linjene tilsatt til konstruktøren, er det nå en ekstra import linje i påvente av Textfield.

Vi kunne selvsagt ta det videre, posisjonering og styling teksten , og du er velkommen til å gjøre det på egen hånd, men for nå dette tjener formålet. Denne koden skaper en tekstboks med ordene "Hello Word" i det, og viser det på scenen. Med unntak av én ting: Flash-fil ikke vet at det er ment å ha et dokument klasse. Hvis du prøver å kjøre Flash-filen nå, vil du få et tomt vindu. La oss fikse det neste



Trinn 9:. Tildele et dokument Class

Som nevnt på slutten av det siste trinnet, Flash-filen (MeetTheDocumentClass.fla i mitt tilfelle) doesn ' t ennå vet at den har et bestemt dokument klasse knyttet til den. Teknisk sett det gjør
ha et dokument klasse, bare dokumentet klassen er bare ren gamle MovieClip, så det ikke kommer til å gjøre mye.

Det er godt å vite det, men hva vi virkelig ønsker akkurat nå er å la denne Flash-fil vet hvor DocumentClass.as filen vi nettopp skrev er. For å gjøre det, må du først sørge for at ingenting er valgt (du kan klikke hvor som helst på det stadiet der det ikke er en visuell ressurs, eller du kan velge Rediger > Fjern alt, eller trykk Kommando-Skift-A eller Kontroll-Skift-A ).

Deretter åpner opp Properties panelet. Hvis du har lastet valgt bort alt, bør Properties panel si "dokument" på toppen

Nå, hvor det står "Klasse:" under "Publiser" i Properties panelet, skriv inn "document" (eller det navnet du brukte for din versjon av klassen, hvis du insisterer på å smi din egen vei). Merk at dette er uten ".as" - det er bare
klassenavnet, ikke filnavnet

Hvis du har fulgt med de retninger så langt, bør du kunne. trykke Return /Enter og alt vil bli bra. Hvis måte du fikk klassenavnet feil, eller ikke lagre filene i samme mappe, vil du ikke får en feilmelding når du publiserer. Du burde ha fått denne feilen når du skriver i klassenavnet:

Hvis du ignorerte det, eller ikke se det fordi du hadde tidligere sjekket at "Ikke vis igjen" alternativet, og deretter SWF vil publisere uten feil, men du får en vanlig hvit skjerm. Hvis dette skjer, dobbeltsjekke klassenavnet som du har skrevet inn i panelet Egenskaper.

Når dokumentet klassen er riktig koblet opp, kan du bekrefte det ved å klikke det lille blyantikonet ved siden av dokumentet klassen tekstfeltet i eiendommen panel. Dette vil åpne opp filen i Flash CS3 + for redigering. Ikke at jeg vil anbefale å holde det der, men bekrefter at du har fått riktig fil kan være et nyttig feilsøking tips.

Når alt stemmer, gå videre og teste filmen. Du bør se en vanlig vindu med ordene Hello World i det:



Trinn 10: Egenskaper

På dette punktet, du er satt opp for å sette din søknad logikk inn i dokumentet klassen og begynne å lage en mer interessant SWF. Men, vil du sannsynligvis trenger mer enn bare konstruktøren funksjon for å gjøre sa interessant SWF. Vanligvis må du opprette andre objekter, stikke dem i variabler, bruke funksjoner for å lytte til arrangementer og har disse tingene samhandle på en meningsfull måte. Of course, i OOP du har slike ting som variabler og funksjoner, bare de skikkelig går under forskjellige navn:. Egenskaper og metoder (vi skal takle metoder i neste trinn)

Egenskaper er, i sin essens, bare variabler. Det er en liten forskjell mellom en eiendom og en variabel, skjønt. Det er subtile, og vi må illustrere det med et eksempel, men vi har noen grunn til å dekke før vi kommer dit.

Først en eiendom er skrevet identisk til en variabel, med to advarsler. Her er et eksempel:
private Var tf: Textfield;

Den første forbeholdet bør være opplagt: det er en stor gammel "privat" foran Var søkeord. "privat" ligner på "offentlig" Jeg ba deg om å ignorere noen skritt siden. Jeg kommer til å be deg om å fortsette å ignorere det. Vi vil ikke komme til dem før neste tutorial.

Det andre forbeholdet vil ikke være opplagt, fordi biten er ute av kontekst. Dette er mer hensiktsmessig:
public class document strekker MovieClip {private Var tf: Textfield; offentlig funksjon document () {//...}}

merke til plasseringen av egenskapen i forhold til strukturen av klassen. Konstruktøren funksjon og eiendommen er begge på samme "nivå" og "hører" direkte til klassen (de er begge nestet inn i klassen direkte). Denne egenskapen gjør variabelen en eiendom (til tross for at erklært ved å bruke VAR nøkkelord)

I motsetning til den variabelen som heter "foo" i tekstutdraget nedenfor er bare en variabel.
Public class document strekker MovieClip {private Var tf: Textfield; offentlig funksjon document () {var foo: String = "bar"; }}

Hvorfor? Fordi det er "eid" av funksjonen, ikke av klassen. Når en variabel eller funksjon blir erklært innenfor rammen av klammeparentes (som er teknisk hver gang), det finnes for bare så lenge tingen representert ved klammeparentes eksisterer. Så - og her er den subtile skillet - eiendommen "tf" eksisterer så lenge objektet "document" er rundt, og "tilhører" en document objekt, men variabelen "foo" eksisterer bare så lenge funksjonen som inneholder det går
, og opphører å eksistere når funksjonen er ferdig utførende

Samtidig, det må være ting som er unike for hver knapp.

Teksten i etiketten

klikk handling

Posisjonen knappen

Vi skal se på hva som kreves for å opprette en ny klasse som er involvert i prosjektet og innlemme disse kravene som vi går



Trinn 14:. Lag en knapp Class

Vi vil opprette en klasse som, når instansiert, tegner et rektangel, setter teksten inn i en etikett håndterer roll overs og outs, og kan svare på klikk. Start med å lage en ny tekstfil i en teksteditor. Lagre det som "Button101.as" i samme mappe som Flash-fil. Dette er viktig. Ikke rotet det opp! Jeg er alvorlig



Trinn 15: Skriv Boilerplate

I den nye filen, starter knuste i klassen teksten.
Pakke {import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFormat; public class Button101 strekker Sprite {offentlig funksjon Button101 () {}}}



Trinn 16: Legg Noen Properties

Neste vil vi legge til noen egenskaper for å holde bakgrunnen form og etiketten:
//... public class Button101 strekker Sprite {private Var BGD: Shape; private Var labelField: Textfield; offentlig funksjon Button101 () {//...

BGD Eiendommen vil holde en referanse til en form som vi vil trekke programmatisk å være fylt rektangel, og legge til som et barn av Sprite.

Den labelField Eiendommen vil holde en referanse til en Textfield som vi skal lage med kode, også, og bruke for å vise en tekst på toppen av bakgrunnen



Trinn 17:. Tilsett Logic

Og nå skal vi innom selve logikken. For konstruktøren:
offentlig funksjon Button101 () {BGD = new Shape (); bgd.graphics.beginFill (0x999999, 1); bgd.graphics.drawRect (0, 0, 200, 50); addChild (BGD); labelField = new Textfield (); labelField.width = 200; labelField.height = 30; labelField.y = 15; Var format: tekstformat = new tekstformat (); format.align = "center"; format.size = 14; format.font = "Verdana"; labelField.defaultTextFormat = format; addChild (labelField); addEventListener (MouseEvent.ROLL_OVER, onOver); addEventListener (MouseEvent.ROLL_OUT, onOut); mouseChildren = false; buttonMode = true;}

Det er mye kode, men det er ikke noe overraskende for det meste. Vi skaper en ny form og tegne et rektangel til inn i den. Deretter oppretter vi en Textfield, sette den opp med noen grunnleggende formatering. Neste opp, vi legge til noen rollover og utrulling hendelser (lytte som vi legger i neste trinn). Til slutt satt vi noen egenskaper for å gjøre objektet oppfører seg mer som en knapp.

Den eneste delen som kan være årsaken til forvirringen er kallet til addChild (), og hvor mouseChildren og buttonMode egenskaper kom fra. Jeg vil be deg om å nok en gang vente på en mer fullstendig svar, som det vil komme i neste termin, men det har mye å gjøre med "strekker Sprite" vi skrev tidligere.



Trinn 18: Legg Noen Metoder

Nå kan vi jobbe videre med vår klasse. Etter konstruktøren, opprette en funksjon som heter setLabel:
offentlig funksjon setLabel (label: String): void {labelField.text = label;}

Og til slutt, skaper de to hendelsen lyttere:
privat funksjon onOver ( e: MouseEvent): void {bgd.alpha = 0,8;} private funksjon onOut (e: MouseEvent): void {bgd.alpha = 1;}

Den endelige koden skal se slik ut:
pakke {import flash .display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFormat; public class Button101 strekker Sprite {private Var BGD: Shape; private Var labelField: Textfield; offentlig funksjon Button101 () {BGD = new Shape (); bgd.graphics.beginFill (0x999999, 1); bgd.graphics.drawRect (0, 0, 200, 50); addChild (BGD); labelField = new Textfield (); labelField.width = 200; labelField.height = 30; labelField.y = 15; Var format: tekstformat = new tekstformat (); format.align = "center"; format.size = 14; format.font = "Verdana"; labelField.defaultTextFormat = format; addChild (labelField); addEventListener (MouseEvent.ROLL_OVER, onOver); addEventListener (MouseEvent.ROLL_OUT, onOut); mouseChildren = false; buttonMode = true; } Offentlig funksjon setLabel (label: String): void {labelField.text = label; } Private funksjon onOver (e: MouseEvent): void {bgd.alpha = 0,8; } Private funksjon onOut (e: MouseEvent): void {bgd.alpha = 1; }}}

En ting som er veldig viktig er å sørge for at dine metoder er deklarert på klassenivå
. Dette er en annen rookie feil: noen ganger folk ikke legger merke til hvor deres klammeparentes starte og stoppe, og ender opp med hekkende hva som bør være en metode (som erklærte på "rotnivå" av klassen) inne i en annen metode. Dette slår effektivt en metode (som skal vedvare livet av objekt
) inn i en lokal funksjon (som bare vedvarer for livet av kjører metoden
der det ble erklært).

Forhåpentligvis kompilatorfeil vil varsle deg om en slik feil, men feilen i seg selv kan være hemmelig. Det vil si "1 114: offentlig /privat /beskyttet /intern
attributt kan bare brukes inne i en pakke." Hvis du får det, sjekk hekke nivået på dine metoder. En annen ting å bidra til å forhindre disse feilene er å følge nøye med mellomrom og innrykk. En "ekte" tekst editor kan hjelpe deg med dette, men bare sørg for at alle dine metode erklæringer er på samme innrykksnivå (vanligvis to tabulatorstopp).

Det vi har nå er en klasse klar roll, som, når startes, vil skape en tilpasset visning objekt som har en grå firkant med en etikett. Etiketten kan stilles ved hjelp av en metode og knappen vil automatisk svare på muse roll overs og roll outs. Alt vi trenger å gjøre er faktisk instantiate det



Trinn 19:. Lag en knapp

Gå tilbake til dokumentet klassen, og vi vil legge til en knapp til filmen. Dette vil være ganske lett i forhold til forrige trinn.

Først vil vi legge til en ny egenskap å holde knappen. Stikke den under streken med din eksisterende eiendom
privat Var tf. Textfield, private Var knapp: Button101;

Det er ikke nødvendig å sette alle eiendommene sammen, men for organiseringen av filen, er det nyttig å holde ting i samsvar steder. Personlig har jeg alltid liste egenskaper på toppen av klassen, før konstruktøren. På denne måten jeg alltid vet hvor du skal gå for å finne en eiendom erklæring. Hvor de går i filen er ikke så viktig som å komme opp med din egen standard og holde seg til det

Flytte på, kan vi nå instantiate Button101 i dokumentet klassens konstruktør.
Offentlig funksjon document () {tf = new Textfield (); addChild (tf); tf.text = "Hello World"; knappen = new Button101 (); button.x = 10; button.y = 200; button.setLabel ("Button 1"); addChild (knapp); button.addEventListener (MouseEvent.CLICK, onButtonClick); //stage.addEventListener(MouseEvent.CLICK, onButtonClick); //vi har fjernet denne linjen}

Merk at vi endret linjen som setter opp en lytter for klikk på scenen. Vi er skiftende som interaktivitet til knappen.

Nå lurer du kanskje på hvordan det er at vi behandler denne Button101 objektet som om det var en Sprite eller MovieClip (se AS3 101 manuskriptet på skjerm liste hvis du ikke lurer på det). Dette har alt å gjøre med det utvider virksomheten som jeg har bedt om å glatte over for denne gang. Jeg lover, vi får til det snart (i neste del av denne serien).

På dette punktet, bør vi være i stand til å teste det ut. Det skal fungere på samme måte som før, bortsett fra at du vil se knappen vises, og i stedet for å klikke hvor som helst på scenen, må du klikke på knappen.

For referanse, her er den komplette dokumentet klasse på dette punktet, med tillegg og endringer i fet skrift:
pakke {import flash.display.MovieClip; import flash.text.TextField; import flash.events.MouseEvent; public class document strekker MovieClip {private Var tf: Textfield; private Var knapp: Button101; offentlig funksjon document () {tf = new Textfield (); addChild (tf); tf.text = "Hello World"; knappen = new Button101 (); button.x = 10; button.y = 200; button.setLabel ("Button 1"); addChild (knapp); button.addEventListener (MouseEvent.CLICK, onButtonClick); } Private funksjon onButtonClick (e: MouseEvent): void {tf.text = "Hei, du klikket!"; }}}

Så, hva gjorde at utrette oss? Den store tingen er at vi fikk en ganske kjekk liten knapp som vi kunne bruke med svært liten innsats (ikke medregnet innsatsen i å skrive Button101 klasse i første omgang).

For å oppnå samme funksjonalitet uten klasser og OOP, vi måtte skrive betydelig mer kode i vår hoved script. For å illustrere dette videre, la oss lage en ny knapp



Trinn 20:. Opprett en knapp

OK, nå la oss la OOP virkelig skinne. Vi vil opprette en ny forekomst av knappen, bare ved å legge noen flere linjer med kode til dokumentet klassen.

Endringene er involvert vil være svært lik den forrige trinn. Først legge en eiendom:
private Var tf: Textfield, private Var knapp: Button101; private Var knappen2: Button101;

Deretter sette den opp i konstruktøren:
offentlig funksjon document () {tf = new Textfield (); addChild (tf); tf.text = "Hello World"; knappen = new Button101 (); button.x = 10; button.y = 200; button.setLabel ("Button 1"); addChild (knapp); button.addEventListener (MouseEvent.CLICK, onButtonClick); knappen2 = new Button101 (); button2.x = 220; button2.y = 200; button2.setLabel ("Knapp 2"); addChild (knappen2); button2.addEventListener (MouseEvent.CLICK, onButtonClick);}

Du kan, faktisk, bare kopiere og lime den første knappens linjer med kode og bare endre knappen for å Button2, og også x posisjonen til den andre knappen (ellers knappen2 vil sitte rett på toppen av Button1).

Vi har doblet kompleksiteten i vår søknad i bare noen få korte linjer med kode, takket være gjenbruk av Button101 klassen. Vi har den klassen, som, hvis du husker, er oppskriften som de faktiske forekomstene er opprettet. Vi har nå to forskjellige knapper, men de deler som vanlig "arv". Selv om det er mange egenskaper som er det samme mellom disse to knapper, som rollover effekt og størrelse, er det fortsatt aspekter av individualitet, nemlig stillingen.

Forhåpentligvis begynner å illustrere nytten og kraft Objektorientert programmering, hvor lette vi gjenbruk av kode veldig lett

Gå videre og teste det ut.; du skal ha to knapper som gjør akkurat det samme.

Naturligvis, vil du sannsynligvis ønske å finjustere Button101 klassen slik at det ser mer avansert, eller har en stiligere rulle over effekt, eller hva- har du. For all del, ta Button101 klassen og gjøre det mer nyttig for dine egne behov. Vårt mål her var å demonstrere hvordan en knapp klasse kan gjøres, for ikke å gjøre det ultimate knappen klassen



Trinn 21:. Oppsummering

Det var to hovedtemaer i dagens tutorial. For å rekapitulere, disse er: ideen om skissene (klasser) og hus (instanser); og oppfatningen av omfanget.

Klassene er kodefiler som vi skriver, samt konseptet med en enhet som fungerer som blåkopi for objekter som vil bli opprettet fra dem. En klasse kan avle et ubegrenset antall forekomster. Objekter er forekomster av klasser, og har en tendens til å være de tingene som, da satt sammen, utgjør vår søknad. Forekomster av samme type aksje funksjonalitet til felles, men beholde unike identiteter og kan muligens inneholde variasjoner i dataene som finnes.

Scope er et viktig begrep gjennom alle programmering, og ikke mindre så i objektorientert programmering . Scope bestemmer "levetid" av en variabel eller funksjon, og også et "sted å leve." En variabel på objektet omfang har en annen levetid enn en variabel ved metoden omfang.



til neste gang

Dette er imidlertid bare toppen av isfjellet av tuppen av isfjellet. Det er alt vi har tid til akkurat nå, men i snart-å-være-publisert Del 2 av AS3101 OOP serien, vil vi dykke litt dypere og endelig få en forklaring på alle ting jeg ber om å sette til side, som strekker seg og publikum. Ting vil begynne å være mer fornuftig. Men når det kommer til et komplisert tema som objektorientert programmering, er det best å ta ting sakte. Anmeldelser



Previous: