Advertisement
  1. Code
  2. ActionScript
Code

Create a Snappy Snapshot App with Flash Builder 4

by
Difficulty:IntermediateLength:LongLanguages:

There are many sites where you can choose your profile image by taking a picture with your webcam, instead of uploading one. This tutorial will teach you how to take a picture and do whatever you want with it, using Flash Builder 4 with Ruby on Rails or PHP.


Final Result Preview

Click on the demo link above, but bear in mind that you won't be able to use the 'Save' function unless you run it yourself on a server which supports PHP. You can "Right click > View source" to see the application source.


Step 1: Flash Builder 4 Considerations

In order to take full advantage of this tutorial, it's recommended that you already know some of the new features of Flash Builder 4, like the new namespaces and components. Also, you'll need Flash Builder 4 to run the source code without having to change anything.

Flex 3 users: don't worry, you can still follow this tutorial. You'll need to change all the "fx" and "s" namespaces to "mx", example: "<s:Button>" becomes "<mx:Button>". The "Declaration" tag does not exist (write what's inside it, outside). "Group" and "BorderContainer" will be "Canvas". "VGroup" will be "VBox". "HGroup" will be "HBox". And there is no "chromeColor" (you will need to style the button differently).


Step 2: Create a New Flex Project

First of all, we need to create a new Flex Project. Open Flash Builder 4 and click "File > New > Flex Project".

Run the application

The following dialog will open:

Run the application

Choose a "Project Name": in our case it will be "CameraSnapshot" but you can use whatever you want. You can also set the "Project location" to anywhere you want. As it will run in the browser, we will leave "Web" checked. We will use the default SDK version and we won't choose any server technology.

Hit Next.

Run the application

We won't change anything here, hit Next.

In this following step we will also use the default settings, so click Finish:

Run the application

Our project has been created. This is a fresh new Flash Builder 4 app!

Run the application

Step 3: Create an ActionScript File

We will have an external ActionScript file that will perform all the logic for us.

Create a new ActionScript file: File > New > ActionScript File

Run the application

Give it a name, we'll choose: "cam" but again, it can be whatever you want:

Run the application

You can leave the "Package" blank. Hit Finish. Now let's start coding!


Step 4: Camera Placeholder

Now that our project has been created, we'll need a place to display our camera. Lets add a VideoDisplay to our CameraSnapshot.mxml file, after the "Declarations" tag:

The id is important because that's how we refer to this specific VideoDisplay.

You may change the width and height of the VideoDisplay to anything you want, but remember to keep a 4:3 aspect ratio to avoid image distortion. Unless you are dealing with a specific case.

Also, notice that we've used the "mx" namespace prefix instead of "s". If we use the "s" namespace prefix here, Flash Builder will throw an error when we try to use the method "attachCamera". We will see this method in the next step.


Step 5: Getting the Camera

Now that we have place to display the user's camera, let's get it! Create a new function inside the file cam.as:

Notice that we have a conditional: we will only move on if we can get at least one camera from the user. Next, we called it "camera" for convenient purposes and configured it in the next few lines.

In camera.setMode, you should understand "theCam.width" as "the width of our VideoDisplay". In Flex, this is called Data Binding. In plain english: "the width and height of the 'camera' will always and automatically be the same width and height of the 'theCam'". So, if you decide to change the size of the VideoDisplay later, the camera's size will change automatically.

After getting and configuring our camera, we attach it to our "theCam". It tells our VideoDisplay what to display.


Step 6: Displaying the Camera

Lets import our cam.as to our CameraSnapshot.mxml file, otherwise we won't have access to the function we just made:

If you saved your "cam.as" in a different folder, just add the folder name before "cam.as", for instance: "different_folder/cam.as"

Now we need to tell our application to actually run this function. We'll add a "creationComplete" method calling "getCam();" inside the opening "Application" tag. It means that our camera will be displayed as soon as the application is completely created:


Step 7: First Run

So far, so good. Now, run the application and see yourself inside it before we move to the next step :)

Run the application

Notice: a few users, specially on a Mac, may have to change the default camera that Flash Player is getting. Inside the running app: Right click (or cmd + click) > Configurations ... > Click the "webcam icon" tab below > Change it to your "real" cam.


Step 8: Layout and Positioning

In this step we'll wrap our "VideoDisplay" tag with a "VGroup" to layout the elements that we'll add, vertically. You'll see it yourself later.

Notice the "horizontalCenter" and "verticalCenter" properties set to "0". This means that the "VGroup" will be 0 pixels away from the center of the parent container, in our case, the whole application.

You can run the application again: resize your browser's window and notice that you are always in the middle.


Step 9: Capture Button

In order to add our "Take a picture" button, we'll need to wrap our "VideoDisplay" with a "Group" tag where the layout is absolute and everything is placed on top of each other (unless you position them with X and Y or place them some pixels away from the top, right, bottom or left).

Your code should look like this:

Notice that we've just added the "Group" tag. It's inside our recently added "VGroup" and wraps our well known "VideoDisplay"

Now we add the "Take a picture" button. It will appear inside a nice semi-transparent "BorderContainer" that we'll write below our "VideoDisplay", take a look:

Notice that our button area is "0" pixels away from the bottom and it has a black semi-transparent (backgroundAlpha) background. We also added our capture button called "trigger". It is placed right in the middle of our "BorderContainer".


Step 10: Button Style

Add "chromeColor" and "color" to our "trigger" button and our code should look like this:

You can run the app again and see how we're doing.


Step 11: Picture Preview Placeholder

Now we'll add a placeholder where we can preview the picture that we'll take later. Write it below our "VideoDisplay" and above our "BorderContainer".

We've added a "Group" called "previewBox" that wraps an "Image" called "preview".


Step 12: Preparing for the Snapshot

Add the following code at the top of our "cam.as" file.

Here we've just imported everything that we'll need in order to take and send the picture to the server.


Step 13: Take a Picture!

Now it's time to take a picture. Let's add a function that will do it:

The comments above "// (...)" will tell you what's going on.

Now, add a "click" property inside our "trigger" button (CameraSnapshot.mxml) to call our recently created "takePicture" function:

Run the app and Take a picture!


Step 14: Adding Cool Effects

Now we add some cool effects: when we take a picture, we'll see a flash light. When we discard a picture, it will go away. Change the "Declarations" tag, by adding the following code:

The "Fade" tag will make the flash light disappear realistically. The "Parallel" tag will run the "Zoom" and "Fade" at the same time, discarding our photo with style.


Step 15: The Flash Effect

Let's add our flash light below the "preview" Image:

Notice the "hideEffect" set to "{flashFX}": when the "flashLight" becomes invisible, this effect will be triggered. Also, the "backgroundAlpha" is set to "0.8" so our flash light is not that bright. Our flash light is just a white BorderContainer that shows up and then quickly goes away, creating the "flash" effect.

Now we just need to set the "flashLight" visible property to "true" and "false" (activating the flash effect) inside our "takePicture" function that will now look like this:


Step 16: Discard Picture Effect

Change the "Group" called "previewBox" (CameraSnapshot.mxml) so it uses the "discardPhoto" effect:

Notice the "hideEffect" again. Run the app, take a picture, take another and see the effects!


Step 17: Save Button

Lets add a Save and Cancel button right below the closing tag of our "Group" called "videoArea" and above the "VGroup" closing tag:

We wrapped the "Cancel" and "Save a picture" buttons inside an "HGroup" tag (which will display them horizontally). We've set the "verticalAlign" property to "middle" so the "Cancel" button is placed in the middle of the "savePic" height. We also set the "width" to "100%" and "horizontalAlign" to "right".

Notice that the "Save picture" button is disabled. We will enable it when the user is previewing a picture and disable when not. You can make the Cancel button go to the previous page, close the pop-in that wraps the SWF, etc... It's your call.

Inside the "cam.as" file, after some changes, our "takePicture" function will now be looking like this:

Above, we've just added 2 lines of code to enable and disable the Save button.


Step 18: Saving the Picture

Now we'll look at one of the many things that you can do with your picture: sending it to the server. In doing so, you can assign it as a user's profile picture, a new album photo, etc...

Let's create a function that sends our picture to the server when we click "Save a picture":

In this function we do three things: change some labels and disable some buttons, encode our picture to JPEG and, finally, send the encoded data (Base64 string) to the server.

Again, the comments above "// (...)" can tell you how we did that.

Now our "Save picture" button needs to trigger the "savePicture" function. Add a "click" method:


Step 19: Server-side Handling

In the following steps, I wrote only the necessary code so you can do anything you want with the saved picture file. You'll have to write the code to make "example_name.jpg" the user's profile picture (for example). Unfortunately, I cannot cover how you can accomplish that as it changes a lot depending on your current solution. Room for another tutorial I guess..

The following example shows how to save the picture into your server using Ruby on Rails or PHP, it's pretty simple!


Step 20: Server-side Handling Ruby on Rails


Step 21: Server-side Handling PHP

These two examples above (Rails and PHP) are as simple and clear as possible. You can write them in just 1 line of code (Rails) and 2 lines (PHP) if you want.


Step 22: Exporting Release Build

Before uploading the SWF to your site, it's recommended that you export it as an optimized SWF (release build):

Export Release Build

After exporting, you will have to upload everything that's inside the "bin-release" folder (located inside your project folder).

Conclusion

I hope you've liked this tutorial! There are many things that you can do with this "real-time picture", I'm already using it in production so my users can quickly change their profile picture. Tell us what you think would be a creative or innovative use of this feature in the comments below. Thanks!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.