|
Using Flash 8 BitmapData Class | Pixel Stretch Camera
The is a tutorial on the basic structure of the new Flash 8 BitmapData Class.
We are going to set up a BitmapData Object that draws from the camera. The end
result is a pixel stretch with a live camera feed.
The first step is to attach your camera to flash. This is very simple code that we will
put into a function.
//------------------------------------------------------------ Get Camera
var interval:Number;
function getCamera():Void {
//*** Create a camera object
var cam:Camera = Camera.get();
//*** Attach the camera to vid
vid.attachVideo(cam);
}
//------------------------------------------------------------ Initiate
getCamera()
Next we are going to start to build the function that draws from the camera. First we are
going to create a function and put it on a interval.
//------------------------------------------------------------ Draw Function
//*** Draw Function
function drawCamera():Void {
trace("Working")
}
//------------------------------------------------------------ Interval
var interval:Number = setInterval(this, "drawCamera", 100);
Now when we test the movie you will get a "Working" every 100 milliseconds
in the output panel. We need to create some variables that we will use in the
drawCamera() function.
//*** Create clip holder & clip
var clipHolder:MovieClip = _root.createEmptyMovieClip("clipHolder", 0);
var clip:MovieClip = new MovieClip();
//*** Variables to increment
var space:Number = new Number(0);
var i:Number = new Number(0);
//*** The width of copy
var copyWidth:Number = 4;
//*** Create a rectangle and point for bitmap
var point:Point = new Point(0, 0);
The first two variables are just movie clips that we are going to use to
attach the bitmapData to. The increment variables are used to change the
space and width of the rectangle over time. Point is a variable that the
bitmapData uses to define where the pixels should start from. You can
understand this as the registration points of the bitmapData.
Now we need to start to build the drawCamera() function. You need to import
the flash display and geometry classes.
//------------------------------------------------------------ Imports
import flash.display.*;
import flash.geom.*;
note: the * imports all parts of the class.
Now create the bitmapData and rectangle Objects. You need two bitmaps one
for copying the camera and another to store the copied pixels for the stretch effect.
//*** Create BitmapData Objects
//*** Create a rectangle
var rect:Rectangle = new Rectangle(0, 0, copyWidth, 120);
var drawVideo:BitmapData = new BitmapData(vid._width, vid._height, true, 0x00FFFFFF);
var drawStretch:BitmapData = new BitmapData(vid._width, vid._height, true, 0x00FFFFFF);
The rectangle object is the size of the area that we are going to copy pixels from
the bitmapData. The parameters are (x:Number, y:Number, width:Number, height:Number). We set
copyWidth to the width of the rectangle. We are only going to copy a few pixels for the width.
Now we draw and copy the pixels from the camera and store them in the bitmapData Object.
//*** Draw Vid
drawVideo.draw(vid);
//*** Copy only the set width pixels
drawStretch.copyPixels(drawVideo, rect, point);
The draw() method is used to draw a source image or a movieclip into the bitmapData. The data
is then put into a matrix with the abilities to scale and transform appropriately.
The copyPixels() method works similarly, it copies a source bitmap with the dimension
of a rectangle and point. We are using rect and point for the parameters.
The rest of the code is to create a new movieclip increment its x value and attach the
bitmapData to the clip.
//*** Create a movieclip to display the image
clip = clipHolder.createEmptyMovieClip("clip", space);
//*** Attach the bitmap to clip
clip.attachBitmap(drawStretch, 0);
clip._x = space;
clip._y = 300;
//*** Increment Variables
space>=Stage.width ? space=0 : space += copyWidth;
i>=160 ? i=0 : i++;
The finished code will look like this:
Stage.scaleMode = "noScale";
Stage.align = "TL";
//------------------------------------------------------------ Imports
import flash.display.*;
import flash.geom.*;
//------------------------------------------------------------Bitmap Data Object
var bitmapData:BitmapData = new BitmapData(vid._height, vid._height, true, 0x00FFFFFF);
//------------------------------------------------------------Get Camera
var cam:Camera = new Camera();
function getCamera():Void {
//*** Create a camera object
cam = Camera.get();
//cam.setMode(320, 240, 15);
//*** Attach the camera to vid
vid.attachVideo(cam);
}
//------------------------------------------------------------ Draw Function
//*** Create clip holder & clip
var clipHolder:MovieClip = _root.createEmptyMovieClip("clipHolder", 0);
var clip:MovieClip = new MovieClip();
//*** Variables to incremnt
var space:Number = new Number(0);
var i:Number = new Number(0);
//*** The width of copy
var copyWidth:Number = 4;
//*** Create a rectangle and point for bitmap
var point:Point = new Point(0, 0);
//*** Draw Function
function drawCamera():Void {
//*** Create a moving rectangle
var rect:Rectangle = new Rectangle(0, 0, copyWidth, cam.width);
//*** Create BitmapData Objects
var drawVideo:BitmapData = new BitmapData(cam.width, cam.height);
var drawStretch:BitmapData = new BitmapData(cam.width, cam.height);
//*** Draw Vid
drawVideo.draw(vid);
//*** Copy only the set width pixels
drawStretch.copyPixels(drawVideo, rect, point);
//*** Create a movieclip to display the image
clip = clipHolder.createEmptyMovieClip("clip", space);
//*** Attach the bitmap to clip
clip.attachBitmap(drawStretch, 0);
clip._x = space;
clip._y = 300;
//*** Increment Variables
space>=Stage.width ? space=0 : space += copyWidth;
i>=160 ? i=0 : i++;
}
//------------------------------------------------------------ Interval
var interval:Number = setInterval(this, "drawCamera", 100);
//------------------------------------------------------------ Int
getCamera();
|
