Splitting my prototype onto MVC

After completing my prototype, it was now time to split whatever I had onto MVC.

So far I have created my folder structure, a few VIEWS, a MODEL and a CONTROLLER.

So to start with this process, I had to start designing my main and most important view: The booth itself.

For this I've imported all the images i needed and I have made its view class, this is called the CameraView.

CameraView basically contains the "video" coding, to allow the camera to start, as well as a capture button.

This capture button calls a model method, and this will dispatch an Event that a new view (called CountDownView) will listen for. This then triggers a time countdown (3 seconds). Once the countdown reaches 1, this tells the model to dispatch an Event. In order to capture the image, CameraView will listen for this and will send the BitmapData to CaptureView... phew!, such a long process for a single snapshot!.

This looks like the following:

Image Printing!

Once the image is encoded, the printing function should send the encoded data we are sending.

To make this happen i've made use of flash.printing.PrintJob.

For this i created a new function where i'm adding my print variable and a new PrintJob.

In order to get the "PrintJob" working we must let it know when to start, what to send to print and when to send it. So basically the data we are sending takes our previous effort of changing bitMaps to bitmapData to a new level, converting your data from bitmapData to bitmap and onto a Sprite... (phew!)

Once you have your Sprite ready (frame+the image+filter previously merged), the content of what we want to print has to make use of another PrintJob method, addPage().

addPage() sends the specified Sprite as a single page. Using this method involves adding the parameters required: a Sprite, and a rectangle (specifying the width and height of your Sprite).

toPrint.addPage(sprite, new Rectangle(0, 0, sprite.width, sprite.height), options)

So when clicking on the PRINT button, you'll get something like this:

In my case, I haven't got a printer plugged to my laptop, so i'll get a pdf version of it, in order to preview it.

This is the result!:

Saving an Image [and its process behind].

Hello,
during the last couple of days i've been trying to implement the 'download' option to my prototype app.

I've included a jpegEncoder plug-in in my root folder, so i could transform my bitmaps to ".jpg".

When applying a filter to a captured image, this is still a bitmap. I came up with some issues and had to do a research in order to fix issues.

The jpegEncoder doesn't take a bitmap for encoding, it takes a bitmapData object instead. My first issue was to encode my image and its filter. I discovered i was only encoding the image itself because the encoding was taking my bitmapData object (in this case the image from the video). So in order to add the filter to my image i had  to change my code slightly and use a property that i've never used before ".applyFilter".

So from using this:
                             bitMap.filters = [filter];
I've modified it to this:
                             bitMapData.applyFilter(bitMapData ,rect, point, filter);

This does exactly the same thing, it applies a filter, the only difference is that applies it to a bitmapData object and takes another 2 arguments in case you decide to move the filter from its position on the image.

Once the image (bitmapData) has got its filter, now can be encoded. Encoding a bitmap is pretty straight forward: it can be done in 2 lines of code!


                            jpegEnc =  new JPGEncoder(85);
                            jpegF = jpegEnc.encode(img);
Now that the image has been encoded and has its filter, there's one thing missing: the frame.

In this case my frame is a MovieClip. Then again i have to convert this MovieClip into bitmapData.
Once the frame has been converted there's no way to include it or concatenate it in the encoding process.

To make this happen and to add these three elements in one i had to make another function to merge them.

The copy pixels property copies a rectangular area of an image to a rectangular area at the destination point of the bitmapData object. So let's say i'm copying the bitMapData var (my image) to the Frame, this means i'm copying it and placing it on top of the frame using this point (28, 26).

The three elements have been merged and encoded, now my next step would be to download or save the picture on my computer.

This was done by adding fileReference.save() to my class.

fileReference.save() takes two arguments, the data & the file's name (concatenating the file extension, in this case .jpg). This procedure works just fine when clicking on the 'download' button.

The way it works is quite familiar, you will get a box where you can assign a name for your file, choose the location where you want to save your picture and click "save" or "cancel".  By clicking on save,  you get the picture on your location (i.e. on your desktop).

                   myFileReference.save(myEncodedPhoto,  fileName + 'extension .jpg');

My project has the ability to save a picture now!.

here's the result!

Pixel Bender [my very first innocent filter] & AS3 classes.

Hello,

Over the last weekend I spent hours reading and researching about Pixel Bender. I'm contradicting myself a bit from my last post, since i didn't touch anything that is MVC related.
I wanted to give it a go and create my first Pixel Bender Filter, so that I could implement it in my AS3 class (the one shown below).

Pixel Bender syntax is a bit different from AS3, and has some limitations.

The ideas i've got for the filters i'd like to apply on my application are pretty simple, nothing pretentious or extreme: a polaroid-like filter, a nostalgic vintage filter and a double exposure filter, to name a few.

To start with Pixel Bender I had to look at existing filters and tweak them a bit, to see what results are taking effect when modifying the code. Pixel Bender samples and modifies a single pixel from an input image, then applies the 'pixel effect' to the rest of the pixels in a photo. The bad news is PB does not allow any loops when exporting files to Flash, however you can create interesting filters which you can apply to your flash movies or images.

There's an amazing feature within PB which allows you to create parameters. One can develop these and then modify whatever effect you've created by making use of slide bars!

          

I've created a very "innocent" filter, that i haven't applied to my AS3 class (yet).

hours later.....

I've finally managed to implement a filter onto my AS3 class. The process was just a tiny bit complicated as I had never worked with 'Shaders' before.


Shader belongs to the flash.display package, a Shader represents a shader Kernel from Pixel Bender. ShaderFilter belongs to the flash.filters package. This class applies a filter by executing a Shader and affects the object being filtered.

To make the filtering happen, I had to load the filter file (from PB), using the URLLoader (flash.net package). Pixel bender filters are BINARY data, so this has to be specified too.

Once the filter has been loaded, it listens for an Event and here is where the magic happens...

The 'shaderVar'  variable is my Shader (the PB Kernel),  i needed to pass the binary data the loader has imported (previously assigned within the load function). Then I made a new filter and assigned the shaderVar (that already contains the binary data).
The  new 'filter' is the one i'm going to assign to my image.

The 'bitMap' variable is the image the video captures when a user clicks on the "capture" button (this one already contains the video data), so by adding the property "filters" we can assign the filter we have created (it's like adding any other built in filter).

One of problems I had was to actually understand why I had to use squared brackets for [filter], this is because it's expecting an array.

The final result of applying a filter is the following:

The right image is the one the camera shows.
The left image is the result, with a filter added automatically after the capture.

Final Project

Hello Everybody, this last trimester i've decided to create a photo application, it's called Photorama.

I'll be developing Photorama, using as3, pixel bender (mainly). 

This week I've done some research about how to activate a computer's camera using as3. I have also gone over pixel bender,  on how to create filters and to understand how the syntax works. 

So far i've created a prototype of a very simple photo booth application, using as3.

The way I have approached the camera activation is by instantiating a camera & video in my as3 document. 

Then I had to make an "if" statement: "if the camera exists in the device, this creates (addChild) my video (attaching the camera to it), if not, trace that a camera has not been found". 

The camera allowance is part of adobe flash, which can be done by importing the following:

        import flash.media.Camera;

import flash.media.Video;

 To this point, I have not added any plug-ins or extra folders to make the camera access.

The result of the mentioned is the following:

By clicking on "Allow", you are allowing flash to make use of your device's camera. This activates it and displays the live video of what the camera is pointing at. (It does not record whatever it is displaying). 

The next step was a bit confusing to me: to capture an image by clicking a button.

I had to play around using Bitmap & BitmapData (you can work with pixels of a bitmap object).

So I went over the same thing again, instantiating both (Bitmap & BitmapData) and giving them a variable name to each one of them. In my "capture" function, I added both variables and parsed the video (child) variable to the BitmapData variable I had previously instantiated (setting widths & heights for the video itself and the "final" product, being the actual photo taken). 

bitmapData.draw(video);

After a bit of time playing around I came up with a positive result (please don't laugh at my appearance):

The 'photograph' on the left hand side is the video, the real time display. The one on the right hand side is the photograph taken by clicking on the little camera icon. 

Now the next step is to add a 'flash' looking light and then capture the photo, this way the photos can look brighter.. 

There is a lot to do, as this is only a prototype, "simple game" style app. I will be looking into MVC this weekend and starting to implement at least one filter to analise how the coding is going to be distributed in the as3 classes.