Detecteer indringers met behulp van het Camera-object in Flash CS4

De opkomst van Flash Video en Web 2.0 in de afgelopen jaren heeft ook geleid tot een toename van het gebruik van video als een communicatiemiddel. Naast dit toegenomen bewustzijn is er ook een overeenkomstige toename in het gebruik van webcams die ofwel vast verbonden zijn met de computer of verkocht worden als afzonderlijke add-ons.

In deze tutorial laat ik je eerst zien hoe je een webcam-signaal in Flash kunt voeren en ten tweede hoe je in contact kunt komen met je innerlijke spion en je webcam kunt gebruiken om indringers te detecteren.




Inbreker pictogram door Kyle Carrozza. No-Good Nicky verschijnt af en toe in "Frog Raccoon Strawberry" -weekenden op dummcomics.com.

Voordat ik begin

Er is een waarschuwing: deze tutorial wordt lokaal of op een webpagina afgespeeld. Het heeft geen betrekking op het uitzenden van de inhoud die u op het internet ziet voor anderen. Om je feed feitelijk uit te zenden - jij en tante Phoebe zwaaien met elkaar over oceanen - moet je een Flash Media Server 3.5 gebruiken en dat, mijn vrienden, is ver buiten de reikwijdte van dit stuk.

Stap 1: Open Flash CS4 Professional

Maak een nieuw document. Wanneer het document wordt geopend, wijzigt u de naam van laag 1 in "Camera" en voegt u een nieuwe laag toe met de naam "acties". Vergrendel de actieslaag.

Stap 2: voeg een video-object toe

Klik op het tabblad Bibliotheek en selecteer Nieuwe video… van de Library-opties verschijnen. Wanneer het dialoogvenster Video-eigenschappen wordt geopend, moet u dat zeker weten Video (Actionscript - gecontroleerd) is geselecteerd en klik op OK. Je ziet een kleine videocamera in je bibliotheek verschijnen. Dit is het video-object.

Stap 3: Sleep het video-object naar het werkgebied

Selecteer het video-object, klik op het tabblad Eigenschappen en wijzig de eigenschappen Breedte en Hoogte in 320 en 240. Geef het geselecteerde object de instantie naam van vidObj.

Stap 4: Acties

Klik één keer op het eerste frame van de actielaag en open de Scripteditor door Venster> Acties te selecteren of op F9 (pc) of Option-F9 (Mac) te drukken.

Stap 5: Code

 var myCam: Camera = Camera.getCamera (); vidObj.attachCamera (myCam);

Als je dit nog nooit eerder hebt gedaan, laten we de code eens doorlopen.

De eerste regel geeft uw webcam een ​​variabele naam en vertelt met behulp van de klasse Camera aan Flash dat hij moet zoeken naar de camera die op uw computer is aangesloten. Ik heb alleen de iSight-camera in mijn MacBook Pro aan het werk, daarom is er geen waarde in de getCamera () methode parameter. Als ik een twee camera's zou hebben, laten we zeggen een Logitech-webcam, aangesloten op de computer en ik wilde deze gebruiken in plaats van de iSight die ik zou invoeren getCamera ( "1"). Merk op dat camera's strings en geen namen zijn. Ze worden toegevoegd in indexvolgorde in plaats van in alfanumerieke volgorde.

De tweede regel koppelt eenvoudigweg de videofeed van de webcam aan het video-object op het podium. Het is ook belangrijk dat u weet wanneer het attachCamera () methode wordt gebruikt tijdens runtime, de gebruiker zal door de Flash Player worden gevraagd om het gebruik van de camera toe te staan.

Stap 6: Test de film.

Daar ga je, slechts twee regels Actionscript en je bent nu een filmster.

Als u niets ziet, zijn de kansen praktisch 100% dat er meerdere camera's op uw computer zijn aangesloten en dat Flash de verkeerde heeft gekozen. U kunt dit als volgt oplossen:

Stap 7: Instellingen

Open het contextmenu van de swf en selecteer Instellingen. Klik met de rechtermuisknop (pc) of houd Ctrl ingedrukt (Mac) op het object in de swf om het contextmenu van de swf te openen. Selecteer instellingen om het dialoogvenster Instellingen Flash Player te openen.

Stap 8: Camerapictogram

Klik op het camerapictogram in de instellingen van Flash Player. U krijgt een lijst met camera's te zien die op uw computer zijn aangesloten. Selecteer de camera en klik op de knop Sluiten.

Stap 9: Beweging vastleggen met behulp van het camera-object

In dit voorbeeld, geleend van mijn boek Stichting Flash Video CS3 door friendsofEd, zijn we, zoals ik al zei, "in contact met onze innerlijke spion". Hoewel webcams normaal worden gebruikt voor "uitzend" doeleinden, is er een methode in de klasse Camera - setMotionLevel - die kan worden gebruikt om de camera aan te zetten wanneer deze een bepaalde mate van beweging "detecteert" en om vervolgens een foto van die opname te maken en weer te geven. Dit is een soort van hoe die beruchte "Nanny Cams" werken.

Als extra bonus gebruiken we geen video-object, maar laten we ActionScript het opheffen daarvan besturen. Hier is hoe:

Stap 10: Nieuw document

Open een nieuw Flash-document en stel de stage-dimensie in op 665 pixels breed en 450 pixels hoog.

Stap 11: Eerste frame

Selecteer het eerste frame van de film en open het deelvenster Handelingen.

Stap 12: Bitmap en BitmapData

Voer de volgende ActionScript-code in:

 import flash.display.Bitmap; import flash.display.BitmapData;

Om dit project te starten, hebben we een manier nodig om de beelden te tonen die zijn vastgelegd door de webcamera aan het einde van het werkgebied. Deze twee klassen - Bitmap en BitmapData - maken dit mogelijk.

Stap 13: Huishouden

Druk twee keer op de Return / Enter-toets en voeg de volgende code toe:

 var myBitmaps: Array = new Array (); var myBitmapData: Array = new Array (); for (var i: Number = 0; i < 4; i++) myBitmapData[i] = new BitmapData(320,240,false,0x00333333) myBitmaps[i] = new Bitmap(myBitmapData[i]); myBitmaps[i].x = 5 + 165 * i; myBitmaps[i].y = 315; myBitmaps[i].scaleX = 0.5; myBitmaps[i].scaleY = 0.5; addChild(myBitmaps[i]); 

Na het aanroepen van de Bitmap- en BitmapData-klassen, zet je ze nu aan het werk.

Dit "housekeeping" -codeblok maakt de vier Bitmap- en BitmapData-objecten die worden gebruikt om de vastgelegde afbeeldingen onderaan het werkvlak weer te geven. Het blok begint met het creëren van een lijst die zal worden gebruikt om de afbeeldingen en hun achtergrondkleuren op te slaan.

Dat proces is de taak van de voor loop in de derde regel. In gewoon Engels stelt het eenvoudig het aantal afbeeldingen in dat kan worden weergegeven onder de camerafeed tot 4.

De volgende regel maakt de vakken met die 4 afbeeldingen en zorgt ervoor dat ze 320x240 pixels groot zijn, dat ze niet transparant zijn - vals - en dat elke doos is gevuld met een donkergrijze kleur.

De overige zes regels plaatsen de vastgelegde afbeeldingen over de grijze achtergrond en schalen ze elk aan elkaar. De laatste regel - addChild (myBitmaps [i]); - is hoe de beelden vast komen te zitten op het podium.

Stap 14: Teller

Druk twee keer op de Return / Enter-toets en voeg de volgende regel ActionScript toe:

 var bitmapCounter: int = 0;

Als er veel beweging is, maakt de camera veel foto's die moeten worden weergegeven. Deze teller zorgt ervoor dat er op elk moment slechts vier afbeeldingen zichtbaar zijn.

Stap 15: Laat het werken

Druk twee keer op de Return / Enter-toets en voer het volgende codeblok in:

 var myCam: Camera = Camera.getCamera (); myCam.setMotionLevel (70,50); var myVideo: Video = nieuwe video (); myVideo.attachCamera (MyCam); myVideo.x = 172; myVideo.y = 10; addChild (myVideo);

Dit codeblok zorgt ervoor dat de webcamera werkt. Het begint met het identificeren van welke camera wordt gebruikt door de getCamera () methode. De volgende regel code is waar de "magie" in deze oefening plaatsvindt.

De klasse Camera bevat een methode setMotionLevel waarvoor slechts twee parameters nodig zijn. De eerste parameter is hoeveel beweging moet worden gedetecteerd (Flash noemt dit een "Activiteit" -gebeurtenis) voordat de camera wordt geactiveerd. De waarden hier kunnen variëren van 0 tot 100. Zie dit nummer als een zeer gevoelige bewegingsdetector. Hoe hoger de toegevoegde waarde, hoe meer beweging gedetecteerd moet worden om de foto te maken. Als iemand appels steelt uit je appelboom, zou een waarde van 0 werken, omdat er echt niet veel gebeurt. Als je in een woonstraat woont en de buren in hun sportauto's op en neer scheuren, is een niveau van 80 of 90 voldoende om een ​​beeld vast te leggen dat je aan de politie kunt laten zien.

De tweede parameter, hoewel optioneel, geeft aan hoeveel milliseconden er van niets gebeurt voordat Flash zich verveelt en de camera vertelt dat hij moet ophouden. De standaardwaarde is 2000 milliseconden (2 seconden). In dit voorbeeld hebben we de gevoeligheid ingesteld door een waarde van 50 milliseconden te gebruiken.

De laatste vier regels creëren een "virtueel" video-object met de naam mijn video en sluit de camera daarin aan. Dat object wordt 172 pixels langs de x-as geplaatst en ligt gelijk met de bovenkant van het werkgebied. De laatste regel plaatst het object, een Sprite genaamd, op het podium. Voor degenen onder u die nieuw zijn bij 'Sprites', beschouw ze als filmclips zonder een tijdlijn.

Stap 16: Detectie

Druk twee keer op de Return / Enter-toets en voeg dit laatste codeblok toe:

 myCam.addEventListener (ActivityEvent.ACTIVITY, motionHandler); function motionHandler (evt: Object): void myBitmapData [bitmapCounter] .draw (myVideo); bitmapCounter ++; if (bitmapCounter == 4) bitmapCounter = 0; 

Dit codeblok zwart vertelt Flash wat te doen als het alarm afgaat en beweging wordt gedetecteerd. In dit geval heeft de Flash Player een gedetecteerd ActivityEvent gebaseerd op de setMotionLevel parameters. Na het detecteren van die gebeurtenis wordt de motionHandler functie.

De motionHandler functie vertelt Flash om een ​​frame grab te maken en deze onderin het werkvlak te plakken. De als verklaring zorgt ervoor dat er slechts 4 afbeeldingen tegelijk worden weergegeven.

Stap 17: Wikkel het in

Bewaar en test de film.

Conclusie:

In deze tutorial ontdek je dat de wereld van Flash Video niet beperkt is tot dingen die je fotografeert met een recorder of met YouTube. Je kunt er ook een webcam van maken.

Het eerste voorbeeld liet zien hoe je slechts twee regels code nodig hebt om "in het spel te komen".

In het tweede voorbeeld werd een webcam gebruikt om een ​​"Nanny Cam" te maken op basis van de beweging die door de webcam werd gedetecteerd. Zodra die beweging is gedetecteerd, wordt de beweging vastgelegd en wordt een afbeelding van die opname gemaakt en weergegeven aan de onderkant van het werkgebied. Het andere interessante aspect van dit voorbeeld was het feit dat het hele project werd aangedreven door ActionScript. Er was niets in de bibliotheek en de Flash-bestanden bestonden uit niet meer dan een paar regels standaardcode.

Ik hoop dat je het leuk vond om mee te volgen!