Automatically Tag bilder med AS3 Face Recognition Library
3
Del
6
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
The Face Recognition Bibliotek kan være en utrolig bibliotek hvis den brukes riktig. Det har evnen til ikke bare å gjenkjenne ansikter i et bilde, men også til å gjenkjenne som ansiktet tilhører i et bilde. Bibliotekets ansikt detektoren objektet beskjærer et enkelt ansikt i et bilde, men i denne opplæringen vil du lære en rask løsning som vil tillate deg å beskjære flere ansikter i et bilde. Vi vil opprette redigerbare koder som en bruker kan justere etter lasting et bilde inn i applikasjonen.
Endelig resultat Forhåndsvisning
La oss ta en titt på den endelige Resultatet vi skal jobbe mot:
Klikk her for å se demo
Last opp et bilde, og demoen vil vise deg hvilke områder Face Recognition Library gjenkjenner som ansikter. (Det er ikke alltid perfekt!)
Siden dette er bare en demo, det er noen restriksjoner: må du velge et landskap orientert bilde, og ikke plukke en med en stor filstørrelse. Selvfølgelig, når du bruker dette biblioteket i dine egne prosjekter, kan du omgå disse restriksjonene.
Trenger bilder for å teste dette på? Prøv Flickr!
Forutsetninger
Last ned FaceRecognitionLib.swc fra bibliotekets prosjektsiden. Du vil også trenge face.zip Du trenger Flex SDK (versjon 3.5 eller nyere) Hotell og må ha Flash Professional CS5 konfigurert til å målrette samling for Flash Player 10 eller nyere. Det siste du trenger er den nyeste versjonen av TweenLite, som vi skal bruke til å legge enkle animasjoner til vår søknad Åpne Flash CS5 Professional og opprette en ny Actionscript 3.0 fil. Still dokumentet klassenavnet til FaceTagger Klikk på Action Innstillinger Klikk på scenen. Endre Stage farge til en farge du velger Åpne Komponenter Sett forekomsten navnet på knappen for å browseBtn i Egenskaper Legg til en annen knapp til scenen direkte til venstre for browseBtn. Lag Fjern-knappen Når vår søknad oppdager en: endre etiketten på knappen til Bruke ovale verktøy ( trykk på O-tasten til switch til oval verktøy Opprett en ny variabel under klassen erklæringen heter detektor. Detektoren objektet skal være av typen FaceDetector. Begynnelsen av FaceTagger klassen skal nå se slik Legg til følgende linjer med kode til detectFaces metoden Først vi legge hendelsen lyttere til FaceDetector. Det er to hendelser som vi trenger for å lytte etter. Den FACE_CROPED hendelsen og NO_FACES_DETECTED hendelsen . ( Merk:.. FACE_CROPED er ikke en skrivefeil Det er sannsynlig en stavefeil av forfatteren av biblioteket ønsker å ringe onFacesDetected metoden når et ansikt har blitt oppdaget og onNoFaces metode når ingen ansikter ble oppdaget på bildet. Den siste linjen med kode laster ansiktet bildet fra vår bitmap objekt som inneholder den innlastede bildet. Vi kaller FaceDetector objektets loadFaceImageFromBitmap metode bruker bitmap objekt som parameter Bitmap at metoden krever Når FaceDetector objektets objectDetector ansikter i et bilde, det FaceDetector selv bare dukker en av disse ansiktene. Hvis vi vil ha tilgang til alle de oppdagede ansikter må vi få direkte tilgang til objectDetector. Opprett onFacesDetected metoden og onNoFaces metode som inneholder følgende kodelinjer La oss ta en titt på onFacesDetected metoden. Den FaceDetector objektets objectDetector inneholder en rekke objekter som oppdages. Disse objektene er rektangulært objekter som hver representerer plasseringen og størrelsen på hver beskårede ansikt som var vellykket Vi tilordne den til ansiktene variable som er en Array. Hvis bildet objektet ikke finnes ennå må vi på å bruke den. Hvis den finnes, må vi avslutte funksjonen fordi koden har allerede utført en gang. Vi utfører den samme koden den vi gjorde i detectFaces metode for å vise bildet med en fade i animasjon. Deretter fjerner vi tekstfeltet. for hver sløyfe brukes til å iterere gjennom hvert rektangel i ansiktene array. Når spores tilbake til utgangspanelet, vil en oppdaget ansiktet ser omtrent slik ut: product: (x = 30, y = 30 w = 123, h = 123) newTag metoden genererer en ny Bildemerke objekt som skal vises på bildet basert på parameter rektangulært objekt som følger med. Før vi kan legge til en kode til skjermen, må vi først opprette vår tag klasse. Vi oppretter denne klassen i neste trinn. I onNoFaces metode gjentar vi prosessen, men denne gangen etter vi vise bildet, varsle vi brukeren om at ingen ansikter ble oppdaget i den belastede bildet. Opprett en ny klasse som heter Bildemerke som strekker Sprite Importer følgende klasser til Bildemerke klassen Lag følgende variabler og konstanter Legg til følgende kode i klassen contructor. {_rectangle = rektangel; _image = image; removeBtn = new RemoveButton (); graphics.lineStyle (LINE_THICKNESS, LINE_COLOR); graphics.beginFill (FILL_COLOR, 0,5); graphics.drawRoundRect (0, 0, rectangle.width, rectangle.height, ELLIPSE_WIDTH, ELLIPSE_HEIGHT); filtre = [ny DropShadowFilter (5, 45, 0, 1, 5, 5, 1, 3)]; alpha = INIT_ALPHA; _editMode = false; . addEventListener (Event.ADDED, onAdded);} Klassen contructor godtar to parametere: Vi tildele disse til variabler, slik at vi kan referere til dem i hele vår kode. På neste linje en ny forekomst av RemoveButton klassen er opprettet. Bruk arvet grafikkobjekter å tegne et avrundet rektangel som er på størrelse med rektangel objektets bredde og høyde. Rektangelet ellipse bredde og høyde kommer fra klassen konstanter samt rektangelet linje attributter. Vi bruker en skygge filter som gir dybde til objektet og angi alfa til konstant INIT_ALPHA (den første alpha) Den siste linjen i contructor lytter etter den ekstra hendelsen da kaller onAdded metode når koden er blitt lagt til listen skjerm . Vi gjør dette fordi vi må ha tilgang på scenen objekt som for tiden er null. . Når er lagt objektet kan vi trygt tilgang scenen onAdded metoden kalles når objektet er lagt til listen displayet. Arrangementet lytteren ikke lenger er nødvendig slik at det blir fjernet og init metoden kalles Opprett init-metoden i Bildemerke klassen Den første linjen med kode i init metoden sjekker for å se om koden ble faktisk lagt til bildet objektet. Hvis det ikke var, vil tag legge seg til bildet. Neste merkelappen sin x og y er satt til rektangelet er x og y. Dette posisjonerer bare merkelappen over beskårede ansiktet. Som standard er den removeBtn alpha eiendom satt til 0 fordi vi ikke vil at det skal være synlig ennå. Senere vil vi trenger å høre for en DOUBLE_CLICK hendelsen og brikkens doubleClickEnabled må være satt til true for at denne hendelsen til å bli sendt ut. De siste fem linjer med kode add hendelsen lyttere til taggen, til scenen og til removeBtn. Når removeBtn klikkes vi ønsker å fjerne merket fra listen displayet. Lag Fjern-metoden Metoden fjerner tag fra sin overordnede objektet, hvis den har en. Vi setter _removed eiendom til sant siden objektet blir fjernet. _removed Eiendommen er en privat Nå kode utenfor denne klassen får tilgang til disse stedene gjennom getter metoder. Metodene kan behandles som egenskaper, slik at hver eiendom er effektivt beskyttet Hvis vi ønsker at våre Bildemerke objekter å ha litt liv i dem vi må legge til noen interaksjon og animasjon. Legg følgende metoder til Bildemerke klassen Det kan se ut som mye kode, men hva det faktisk oppnår er ganske enkel; alle metodene i utgangspunktet utføre den samme koden. Tidligere har vi lagt til en hendelse lytteren for ROLL_OVER hendelsen. Vi passerte en hendelseshåndterer funksjon til Event parameter kalt overdrive. Denne metoden gir en enkel skala effekt når musen svever over tag. Den nye bredden og høyden på objektet er basert på hvor mye vi ønsker å øke størrelsen på objektet ved. I dette tilfellet ønsker vi å øke størrelsen på objektet med 40 prosent. Vi kunne ha stoppet akkurat her og bare brukt TweenLite å animere objektet som blir endret størrelse, men dette ville ikke ser veldig attraktivt fordi objektet registrering er i øverst i venstre hjørne. Det vi virkelig ønsker å gjøre er å transformere objektet fra midten i stedet. Hvis du er en klubb Greensock medlem så kan du bare bruke transformAroundCenter Vi beregne ny x posisjon basert på den nye bredden og vi beregne ny y posisjon basert på den nye høyden. Så vi tween x, y, bredde og høyde egenskaper til sine nye verdier. Vi visne også i removeBtn og gjøre koden helt ugjennomsiktig. Vi gjør det stikk motsatte i outState metode som kalles hver gang musen svever ut av koden. Koden er tweened tilbake til sin opprinnelige tilstand. resize metoden oppnår hva state metoden oppnår uten å påvirke alfa eiendom og uten tweening. Resize metoden kalles hver gang vi ønsker å endre størrelsen på tag dynamisk. Metoden tar en parameter som er prosentandelen for å øke eller redusere størrelsen av merkelappen. Metoden gir en minimumsstørrelse grense for tag slik at det ikke blir for lite. onMouseWheel metoden kalles når en bruker samhandler med hjulet på musen. Den onKeyDownE metoden kalles hver gang en tast trykkes. Hver metode kun eksekverer koden hvis koden er for tiden i rediger Deres er en siste ting vi trenger for å løse for å gjøre vår tag animere riktig. TweenLite endrer verdien av bredde- og høydeegenskapene på hver ramme inntil animasjonen er fullført. Når du endrer størrelsen objekter i Flash, kan det bli forvrengt. Vi ønsker ikke at våre koder leter forvrengt. For å løse dette problemet må vi overstyre sett bredden og satt høyde metoder fra den overordnede klassen Når bredden eller høyden på lappen er satt, vi ønsker å tegne brikkenes grafikk. . Opprett trekningen metoden Trekningen metoden bør akseptere to parametere: den nye bredden på tag og den nye høyden på tag. Grafikken er ryddet deretter tegnes på nytt igjen basert på newWidth og newHeight parametere. Nå vår tag vil animere vakkert Vi ønsker at våre brukere skal kunne redigere hver tag individuelt. Når en kode er i redigeringsmodus, kan brukeren manipulere tag størrelse og flytte tag på bildet. Flere ting må gjøres for å oppnå dette. Først, la oss lage enterEditMode og exitEditMode metoder. Begge disse metodene vil være offentlige metoder som vi må ringe dem fra dokumentet klassen enterEditMode metoden utfører kodeblokken innenfor hvis setningen hvis lappen er for øyeblikket ikke i rediger exitEditMode metoden setter merkelappen tilbake til opprinnelig tilstand mens posisjonere tag på _rectangle nye x og y posisjon. Vi kaller det stopdrag metoden bare i tilfelle tag ble dratt av brukeren når rediger Nå la oss gå tilbake til vår Document klasse, FaceTagger. Endelig kan vi skape den newTag metode nå som vi har en Bildemerke klasse. Opprett newTag metoden Den metoden skaper en ny Bildemerke objekt passerer rektangelet parameter og dagens bilde i Bildemerke contructor metoden. Koden legges til det aktuelle bildet. Vi lytter til flere hendelser som merkelappen vil utsendelse. Den første hendelsen er ROLL_OVER hendelsen. En metode som kalles onTagRollOver kalles når arrangementet er sendt. Vi lytter til DOUBLE_CLICK arrangementet, slik at vi kan ringe enterEditMode metode, som vil være forskjellig fra enterEditMode metoden fra Bildemerke klassen, og til slutt vi lytte etter den fjernede hendelse som kaller onTagRemoved metode når koden er fjernet fra sin overordnede objektet . Opprett en hendelseshåndterer metode kalt onTagRollOver Den metoden er svært enkel, som du kan se. Metoden viser en melding til brukeren dersom tag at musen er hovering over er ikke i rediger Vi trenger nå å gi brukeren tilgang til å redigere hver tag. Opprett en ny variabel under klassen delclaration av FaceTagger klassen og gi den navnet currentTag. Det bør være en Bildemerke gjenstand. Begynnelsen av dokumentet klassen skal nå se ut slik: Lag enterEditMode metode innenfor FaceTagger klassen. Denne metoden er den hendelseshåndterer metode som vi påkalte i newTag metoden Metoden ovenfor varsler brukeren om at de er for tiden i rediger Til slutt kaller vi de tag objektene menn enterEditMode metode, tildele en referanse til merkelappen objektet til currentTag variable og plasser innholdet på skjermen (spesielt statusTxt tekstfeltet) Etter at brukeren har ferdig med å redigere currentTag, må koden til å bli lagt tilbake til bildeobjektet og riktig plassert. Opprett exitEditMode metode innenfor FaceTagger klassen Legg merke til hvordan MouseEvent parameter er satt til null som standard. Vi kommer til å kalle denne metoden fra onTagRemoved hendelseshåndterer metode senere, og vi vil ikke ha en MouseEvent objekt å passere som metodens parameter så vi gir parameter en nullstandardverdi. Dette gjør metoden mer tilgjengelig. Den første oppgaven metoden utfører skjuler darkBox objekt for å gi brukeren en følelse av spennende rediger Neste, currentTag er rektangelet objekt blir gitt nye x og y eiendomsverdier. Disse verdiene er basert på tag nåværende posisjon på scenen i forhold til bildets posisjon på scenen. Når currentTag sin exitEditMode metoden kalles currentTag legges tilbake til bildet objektet og posisjonert til rektangel nye x og y posisjon. Sist, setter vi referansen til currentTag til null og posisjonere innholdet på .. skjermen Lag onTagRemoved metoden Denne metoden går ut redigere Gå tilbake til den Bildemerke klassen og legge følgende metoder til klassen Begge metodene krever at merkelappen være i rediger Nå er du antakelig lurer på hva som skjedde med addBtn. Når denne knappen klikkes en ny Bildemerke objektet er lagt til det aktuelle bildet. La oss skape addTag metoden i dokumentet klassen. Merk: Du bør huske denne metoden fra trinn 6. Det er den metoden som ble vedtatt som Event parameter når vi lagt til en hendelse lytteren som lytter for et klikk begivenhet å bli sendt fra addBtn objekt . Hvis bildet finnes, kaller vi den newTag metode som før. Vi skaper en ny består rektangulært objekt slik at brukeren kan tilpasse koden på egenhånd. Koden er rett og slett lagt til bildet i øverste venstre hjørne Som vi har sett, du kan dramatisk forbedre et objekt utseende med noen få linjer med kode. La oss forbedre utseendet på RemoveButton objektet. Opprett en ny klasse og name it RemoveButton. Klassen blir nødt til å forlenge MovieClip klasse siden den er knyttet til et bibliotek symbol på den typen. Lagre klassen til rotmappen. Importere følgende innen RemoveButton: Alt vi skal gjøre nå er å legge en enkel linje med kode i RemoveButton objektets klasse konstruktør metode. Vi har nettopp lagt en DropShadowFilter og en BevelFilter til RemoveButton objektet. Dette vil legge mye av dybde til vår knappen På dette punktet, hvis vi teste vår søknad, alt skal fungere smertefritt. Men vi vil møte et problem når vi laster opp et bilde og ansiktsgjenkjenning prosessen begynner. Hvis du ikke setter den face.zip Vennligst ta hensyn til at Face Recognition Library er ikke perfekt. Det vil være ganger der det ikke vil oppdage noen ansikter, selv om det er ansikter i bildet som ble lastet opp. Det vil også være tider der bare noen ansikter i et bilde er oppdaget og tider hvor mønstre som ser ut som ansikter (f.eks En sky formet som et ansikt) vil bli detektert som ansikter. Dette er grunnen til at vi tillater for våre brukere å redigere tags. Vanligvis jeg fant på biblioteket ganske utrolig, og jeg håper du vil også. Dette avslutter min opplæringen. Takk for at du leser.
fil fra prosjektets tilsyn. Naviger til http://code.google.com/p/face-recognition-library-as3/source/browse/trunk/FaceRecognitionLib/src/face.zip. Klikk på Se raw fil
å laste den ned.
Trinn 1:. Klar Flash
.
i Egenskaper
panel. Klikk på Bibliotek banen
fanen i vinduet Action Innstillinger
. Bla til FaceRecognitionLib.swc
å legge den til prosjektet. Gjenta denne prosessen for greensock.swc
fil
Trinn 2:. Legg farge til Stage
Trinn 3:. Lag hovedknappene
panel. Dra en knapp på toppen høyre hjørne av scenen.
panel. Innenfor Komponent Parametere
panel, endre knappens etikett til Bla
.
Trinn 4 Legg Tag Hotell og satt sitt eksempel navn til addBtn. ansikt, en kode som vises over beskårede ansiktet vil bli generert. Den vil inneholde en knapp som vil fjerne merket når det klikkes. Brikken i seg selv vil bli trukket helt med kode, men vi trenger å trekke på knappen som vil fjerne merket innen manuelt.
), legge til en oval til scenen som er 36 piksler høy og 36 piksler bredt (du kan bruke alt-klikk på scenen for å få opp en dialogboks for dette). Den ovale bør ha en slaglengde på 2.0 og har en hvit linje farge og Dark Grey fylle farge som vist nedenfor
import com.oskarwicha.images.FaceDetection.FaceDetector;. Import com.oskarwicha.images.FaceDetection.Events.FaceDetectorEvent;
pakke {import flash.display.Sprite.; import flash.events.Event; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.net.FileReference; import flash.net.FileFilter; import flash.geom.Rectangle; import flash.display.Loader; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.MovieClip; import flash.text.TextFormat; import flash.filters.DropShadowFilter; import com.greensock.TweenLite; import com.oskarwicha.images.FaceDetection.FaceDetector; import com.oskarwicha.images.FaceDetection.Events.FaceDetectorEvent; public class FaceTagger strekker Sprite {private Var statusTxt: Textfield; private Var fileRef: FileReference; private Var Filefilter: Filefilter; private Var loader: Loader; private Var bitmap: Bitmap; private Var bilde: MovieClip; private Var darkBox: Sprite; private Var detektor: FaceDetector; public static konst MIN_WIDTH: Number = 50; public static konst MIN_HEIGHT: Number = 50; public static konst MAX_WIDTH: Antall = 1000; public static konst MAX_HEIGHT: Antall = 1000; public static konst FILE_TYPES: String = "* .jpg, * .jpeg, * .bmp, * .png"; offentlig funksjon FaceTagger () {
statusTxt.text = "detektere ansikter ... vent litt."; detector.addEventListener (FaceDetectorEvent.FACE_CROPED, onFacesDetected); detektor. addEventListener (FaceDetectorEvent.NO_FACES_DETECTED, onNoFaces); detector.loadFaceImageFromBitmap (bitmap);
)
Trinn 10:. Oppdager flere Faces
privat funksjon onFacesDetected (e: Hendelses): void {var ansikter. Array = detector.objectDetector.detected; hvis image = ny MovieClip () else avkastning (bilde!); image.addChild (bitmap); addChildAt (image, 0); positionContents (); image.alpha = 0; TweenLite.to (image, 1, {alpha: 1}); statusTxt.text = ""; for hver (var ansikt: rektangel i ansikter) {trace (ansiktet); Var rect: rektangel = ansikt; newTag (rect); } PositionContents ();} private funksjons onNoFaces (e: Hendelses): void {statusTxt.text = "ingen ansikter ble oppdaget"; (! image) hvis image = ny MovieClip (); image.addChild (bitmap); addChildAt (image, 0); positionContents (); image.alpha = 0; TweenLite.to (image, 1, {alpha: 1});}
funnet i bildet.
Trinn 11:.. Begynn Bildemerke Klasse
import flash .display.Sprite, import flash.geom.Rectangle, import flash.events.Event, import flash.display.MovieClip, import flash.filters.DropShadowFilter, import flash.events.MouseEvent, import flash.events.KeyboardEvent; import flash. ui.Keyboard, import com.greensock.TweenLite;
private Var _rectangle: rektangel, private Var _image:. MovieClip; privat Var _editMode: boolske; private Var _removed: boolske; privat Div removeBtn: RemoveButton; public static konst LINE_THICKNESS: Number = 6; public static konst LINE_COLOR: uint = 0x00CCFF; public static konst FILL_COLOR: uint = 0xFFFFFF; public static konst ELLIPSE_WIDTH: Number = 10; public static konst ELLIPSE_HEIGHT: Number = 10; offentlig statisk konst INIT_ALPHA: Number = 0,6;
offentlig funksjon Bildemerke (rektangel: rektangel, bilde: MovieClip)
Den første parameteren er rektangelet objekt som inneholder data om det beskårede ansiktet
Den andre parameteren er MovieClip som inneholder lastet opp punktgrafikkbilde.
. _editMode er en egenskap som forteller oss hvorvidt taggen er i en redigerbar tilstand.
privat funksjon onAdded (e: Hendelses): void {removeEventListener (Event.ADDED, onAdded); init ();}
Trinn 12:.. Initial Photo Tag
privat funksjon init (): void {if (! this.parent = image) _image.addChild (denne); x = _rectangle.x; y = _rectangle.y; addChild (removeBtn); removeBtn.alpha = 0; doubleClickEnabled = true; addEventListener (MouseEvent.ROLL_OVER, overdrive); addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener (MouseEvent.MOUSE_WHEEL, onMouseWheel); stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyDownE); removeBtn.addEventListener (MouseEvent.CLICK, fjern);}
privat funksjon remove (e: MouseEvent):. Void {if (this.parent) {_removed = true; this.parent.removeChild (denne); }}
eiendommen, men det må åpnes utenfor rammen av denne klassen. Vi ønsker bare å gi kode, utenfor klassen, tilgang til lese
egenskapsdata. Vi ønsker også å gi den samme begrenset tilgang til _rectangle objektet, _image objekt, og _editMode eiendommen. Lag følgende getter metoder
offentlig funksjon får rektangel (): rektangulært {return _rectangle;} offentlig funksjon får bilde ():. MovieClip {return _image;} offentlig funksjon får editMode (): Boolean {return _editMode;} offentlig funksjon får fjernet (): Boolean {return _removed;}
Trinn 13:. Legge Livet til Bildemerke Object
privat funksjon resize (prosent: Number): void {var newWidth. Number = (prosent * _rectangle.width) /100 + _rectangle.width; Var newHeight: Number = (prosent * _rectangle.height) /100 + _rectangle.height; if (newWidth < 60) {newWidth = 60; } If (newHeight < 60) {newHeight = 60; } Var newX: Number = (x - image.x) - (newWidth - _rectangle.width) /2; Var newy: Number = (y - image.y) - (newHeight - _rectangle.height) /2; _rectangle.x = newX; _rectangle.y = newy; _rectangle.width = newWidth; _rectangle.height = newHeight; tegne (newWidth, newHeight); x = newX + image.x; y = newy + image.y;} private funksjon state (e: MouseEvent): void {if (_editMode) tilbake; removeEventListener (MouseEvent.ROLL_OVER, outState); removeBtn.visible = true; removeBtn.alpha = 0; Var prosent: Number = 40; Var newWidth: Number = (prosent * _rectangle.width) /100 + _rectangle.width; Var newHeight: Number = (prosent * _rectangle.height) /100 + _rectangle.height; Var newX: Number = _rectangle.x - (newWidth - _rectangle.width) /2; Var newy: Number = _rectangle.y - (newHeight - _rectangle.height) /2; TweenLite.to (dette, 0,1, {alfa: 1, x: newX, y: newy, bredde: newWidth, høyde: newHeight}); TweenLite.to (removeBtn, 0,1, {alfa: 1}); addEventListener (MouseEvent.ROLL_OUT, outState);} private funksjon outState (e: MouseEvent): void {if (_editMode) tilbake; removeEventListener (MouseEvent.ROLL_OUT, outState); TweenLite.to (dette, 0,1, {alfa: INIT_ALPHA, x: _rectangle.x, y: _rectangle.y, bredde: _rectangle.width, høyde: _rectangle.height}); TweenLite.to (removeBtn, 0,1, {alfa: 1}); addEventListener (MouseEvent.ROLL_OVER, overdrive);} private funksjon onMouseWheel (e: MouseEvent): void {if tilbake; (_editMode!) Var prosent: Number = e.delta * 10; endre størrelse (prosent);} private funksjon onKeyDownE (e: KeyboardEvent): void {if tilbake; (_editMode!) Var prosent: Number; if (e.keyCode == Keyboard.UP) {prosent = 10; } Else if (e.keyCode == Keyboard.DOWN) {prosent = -10; } Else {return; } Endre størrelsen (prosent);}
plugin for å oppnå dette med bare en linje med kode og uten å måtte gjøre beregningene selv, men for resten av oss trenger vi en rask løsning.
modus. Og hver metode skalerer tag basert på spesifikke egenskaper. Den onMouseWheel metoden skalerer tag basert på MouseEvent delta boligens verdi. Den onKeyDownE øker tag størrelse når Up-tasten trykkes og reduserer tags størrelse når ned-tasten trykkes.
offentlige styringsfunksjon sett bredden (verdi: Number):. Void {tegne (verdi, høyde);} public styringsfunksjon sett høyde (verdi: Number): void {uavgjort (bredde, verdi);}
privat funksjon uavgjort (newWidth: Antall, newHeight: Number): void {graphics.clear (); graphics.lineStyle (LINE_THICKNESS, LINE_COLOR); graphics.beginFill (FILL_COLOR, 0,5); graphics.drawRoundRect (0, 0, newWidth, newHeight, ELLIPSE_WIDTH, ELLIPSE_HEIGHT);}
Trinn 14:. Inn og ut Edit Mode
offentlig funksjon enterEditMode (). Void {if (! _editMode) {_editMode = True; removeEventListener (MouseEvent.ROLL_OUT, outState); tegne (_rectangle.width, _rectangle.height); }} offentlig funksjon exitEditMode (): void {if (! _editMode & & fjernet) {_editMode = false; image.addChild (denne); x = _rectangle.x; y = _rectangle.y; stopdrag (); alpha = INIT_ALPHA; TweenLite.to (removeBtn, 0,1, {alpha: 0}); addEventListener (MouseEvent.ROLL_OVER, overdrive); }}
modus. Hvis koden er ikke i rediger
modus merkelappen vil gå inn rediger
modus, sette _editMode å true å tillate brukeren å endre brikkenes egenskaper. Den ROLL_OUT hendelsen lytteren fjernes som vi ikke kontaktskjemaet metoden til uhell kjøre om musen svever ut av koden. Til slutt blir uavgjort metode som kalles for å vise den opprinnelige størrelsen på brikken.
modus er avsluttet
Trinn 15:. Lage en ny Tag
privat funksjon newTag (rektangel: rektangel): void {var tag:. Bildemerke = new Bildemerke (rektangel, bilde); image.addChild (tag); tag.addEventListener (MouseEvent.ROLL_OVER, onTagRollOver); tag.addEventListener (MouseEvent.DOUBLE_CLICK, enterEditMode); tag.addEventListener (Event.REMOVED, onTagRemoved);}
privat funksjon onTagRollOver (e: MouseEvent):. (! e.target.editMode) void {if statusTxt.text = "dobbeltklikk for å redigere"; }
modus. Meldingen varsler brukeren om at hvis de dobbeltklikk på den aktuelle koden, så den koden vil gå inn rediger
modus
Trinn 16:. Utdeling brukeren tilgang til Rediger
public class FaceTagger strekker Sprite {private Var statusTxt: Textfield; private Var fileRef: FileReference; private Var Filefilter: Filefilter; private Var loader: Loader; private Var bitmap: Bitmap; private Var bilde: MovieClip; private Var darkBox: Sprite; private Var detektor: FaceDetector; private Var currentTag: Bildemerke; public static konst MIN_WIDTH: Number = 50; public static konst MIN_HEIGHT: Number = 50; public static konst MAX_WIDTH: Antall = 1000; public static konst MAX_HEIGHT: Antall = 1000; public static konst FILE_TYPES: String = "* .jpg, * .jpeg, * .bmp, * .png"; offentlig funksjon FaceTagger () {
privat funksjon enterEditMode (e: MouseEvent):. Void {statusTxt.text = "klikk bakgrunnen for å avslutte" rediger "modus \\ n"; statusTxt.appendText ("bruker musehjulet eller opp og ned \\ n"); statusTxt.appendText ("piltastene for å endre størrelsen på tag"); Var tag: Bildemerke = e.target som Bildemerke; darkBox.visible = true; addChild (darkBox); addChild (tag); addChild (statusTxt); tag.x = image.x + tag.rectangle.x; tag.y = image.y + tag.rectangle.y; tag.enterEditMode (); currentTag = tag; positionContents ();}
modus. Skjermen er formørket og merket er fjernet fra bildet objekt og plassert på scenen. Brikkenes x og y egenskaper må settes til verdier som er relevante for bildets posisjon på scenen. Hvis vi ikke gjør dette merkelappen ville bare sitte i øverste venstre hjørne av skjermen. Når denne metoden kalles, vil det ikke engang synes som om kodene posisjon har endret seg i det hele tatt, men i virkeligheten har det endret seg mye.
Trinn 17:. Lagre State of the Current Tag
privat funksjon exitEditMode (e: MouseEvent = null): void {darkBox.visible = false;. if (currentTag) {statusTxt.text = ""; currentTag.rectangle.x = currentTag.x - image.x; currentTag.rectangle.y = currentTag.y - image.y; currentTag.exitEditMode (); currentTag = null; positionContents (); }}
modus. Blokken av kode i hvis setningen utfører hvis currentTag eksisterer. Tekstfeltet er satt til et enkelt mellomrom (""). Husk at tekstfeltet har sin autoSize eiendommen satt til å endre størrelsen fra sentrum. For å få tekstfeltet for å posisjonere seg riktig, må vi sørge for at det er noen form for tekst til stede slik at tekstfeltet ikke endre størrelsen i seg selv ned til ingenting. Dette kan føre til et potensielt problem hvis brukeren avslutter rediger
modus så svever over en tag. Effekten skyldes er at tekstfeltet kan vises av skjermen.
privat funksjon onTagRemoved (e: Hendelses): void {if (e.target.removed) {exitEditMode (); }}
modus hvis remove metode for målrettet tag (e.target) har blitt kalt. Dermed hvis brukeren har klikket på fjerne
knappen på målrettet tag, vi avslutter editMode
. Uten denne metoden, hvis brukeren fjernet en tag mens i rediger
modus, skjermen vil forbli mørk
Trinn 18:. Flytte en Tag
privat funksjon onMouseDown (e: MouseEvent):. (! _editMode) void {if tilbake; removeEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); Var thisRect: rektangel = image.getRect (denne); startdrag (falsk, nytt rektangel (image.x, image.y, thisRect.width - _rectangle.width, thisRect.height - _rectangle.height)); addEventListener (MouseEvent.MOUSE_UP, onMouseUp);} private funksjon onMouseUp (e: MouseEvent): void {if tilbake; (_editMode!) removeEventListener (MouseEvent.MOUSE_UP, onMouseUp); stopdrag (); addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown);}
modus for å utføre helt. Den onMouseUp metoden begynner å dra tag og begrenser tag å bare dra i _image objektet. Den onMouseUp metoden stopper å dra prosessen
Trinn 19:. Legge til flere tagger
privat funksjon addTag (e: MouseEvent): void {if (image) {var rect: rektangel = new rektangel (0, 0, 75, 75); newTag (rect); }}
Trinn 20:. Forbedre opptreden av RemoveButton Object
import flash.display.MovieClip, import flash.filters.DropShadowFilter, import flash.filters.BevelFilter;
filtre = [ny DropShadowFilter (5, 45, 0, 1, 5, 5, 1, 3), ny BevelFilter (10, 90, 0xF5E1AF, 0,6, 0, 1, 15, 15, 1, 3)];
Trinn 21:. Testing vår søknad
fil i samme katalog som SWF
, ansiktsgjenkjenning prosessen kan ikke forekomme. Det er veldig viktig å huske å gjøre dette. Når du har plassert face.zip
inn i samme katalog som SWF
, du kan da kjøre programmet.
Konklusjon