Create a Camera Application in Flash Using ActionScript 3

In this tutorial, I will show you how to create a camera application that captures the user webcam image and saves it as a JPG file. Let’s see how!

Final Result, does not work previewed in Dreamweaver, please open in browser

Step 1: Set Up Your Flash File

Launch Flash and create a new document. Set the stage size to 600x350px, #F6F6F6 for the color, and the frame rate to 24fps.

Set Up Your Flash File

Step 2: Interface

This is the interface we’ll use, a simple background with 3 interactive elements, Save, Discard and a Capture button. The dashed rectangle is a guide to show where the webcam image will appear.

Continue to the next steps to see how to create it.

Step 3: Webcam Guides

Select the Rectangle Tool (R), set the stroke size to 2, color to #CCCCCC and change the style to dashed.

Webcam Guides

Create a 318x238px rectangle and set its position to x: 141 y: 41.

Webcam Guides

Step 4: Action Buttons

Use the Rectangle Tool to create a 46x22px #BABABA rounded rectangle with a corner radius of 1.

Action Buttons

Duplicate the shape and reduce its size to 44x20px. Fill it with a gradient background #ECECEC to #FFFFFF.

Action Buttons

Lastly, we’ll add a label to each button, select the Text Tool (T) and label the buttons Save and Discard. This is the format I used: Avenir 85 Heavy, 13pt, #555555.

Action Buttons

Step 5: Capture Button

Create a 600x30px #DDDDDD rectangle and place it in the bottom of the stage.

Capture Button
Using the Rectangle Primitive Tool, create a 20x20px #7BBBF9 rounded rectangle with a corner radius of 3, and center it in the bottom.

Capture Button

I’ve added a minimalistic icon created from simple shapes.

minimalistic icon

Step 6: ActionScript

Create a new ActionScript Class and save it as in your class folder.


Step 7: Package


The package keyword allows you to organize your code into groups that can be imported by other scripts, its recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: myClasses.

Step 8: Necesary Classes

These are the classes we’ll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

import flash.display.Sprite;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.utils.ByteArray;
import com.adobe.images.JPGEncoder;

Step 9: JPGEncoder


In order to save the captured image, we’ll use a class which is part of the as3corelib. Follow the link and download the library.

Step 10: Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

public class Main extends Sprite

In this example, the Main class inherits all the methods and properties of the Sprite Class.

Step 11: Variables

Next, we’ll declare some variables. Add this below the class declaration, read the comments in the code to know more about what they are and do.

private var camera:Camera = Camera.getCamera(); //An instance of the camera object, necesary to use the webcam
private var video:Video = new Video(); //Used to display the live video from the webcam
private var bmd:BitmapData = new BitmapData(320,240);//Creates a new BitmapData with the parameters as size
private var bmp:Bitmap; //This bitmap will hold the bitmap data, which is the captured data from the webcam
private var fileReference:FileReference = new FileReference(); //A file reference instance used to access the save to disk function
private var byteArray:ByteArray; //This byte array instance will hold the data created from the jpg encoder and use it to save the image
private var jpg:JPGEncoder = new JPGEncoder(); //An instance of the jpg encoder class

Step 12: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first in execute when you make an instance of an object or runs using the Document Class.

public function Main():void

Step 13: Hide Action Buttons

At start, the buttons will have no use, so let’s hide them.

saveButton.visible = false;
discardButton.visible = false;

Step 14: Button Listeners

A Listener registers a function to be called when a specific event occurs. This code adds the listeners to the buttons, the first parameter is the event type and the second one is the function that will be called when the event occurs.

saveButton.addEventListener(MouseEvent.MOUSE_UP, saveImage);
discardButton.addEventListener(MouseEvent.MOUSE_UP, discard);
capture.addEventListener(MouseEvent.MOUSE_UP, captureImage);

Step 15: Detect Camera

The next lines of code are used to detect if the device running the application has a camera, if a camera is detected the code will run, if not, a trace message will appear.

if(camera != null)
//Code goes here
trace("No Camera Detected"); //Add your own action
<h3>Step 16: Add Camera Image to Stage</h3>
If a camera is detected, the following code will execute:
<pre class="javascript">if(camera != null)
video.smoothing = true; //Removes pixelated image from the webcam video
video.attachCamera(camera); //Adds the webcam input to the video object
video.x = 140; //Video position
video.y = 40;
addChild(video); //Add video to stage
	trace("No Camera Detected");

Step 17: Capture Image

This function is called when the save button is pressed.

It passes the current image in the video to the bitmap data object, creates a bitmap using that data and adds that bitmap on top of the video. After that, the capture button is hidden and the action buttons shown.

private function captureImage(e:MouseEvent):void
	bmp = new Bitmap(bmd);
	bmp.x = 140;
	bmp.y = 40;

	capture.visible = false;
	saveButton.visible = true;
	discardButton.visible = true;

Step 18: Save Function

The next function is used to save the image to disk.

First, it uses the jpg.encode() method and saves the resulting data to the byte array, then the fileReference object is used to display a save dialog where the user can rename the file created (although a default name is set).

Once the dialog is shown the bitmap on top of the video is removed to reveal the webcam video, and lastly, the action buttons are hidden and the capture button becomes visible again.

private function saveImage(e:MouseEvent):void
	byteArray = jpg.encode(bmd);, "Image.jpg");
	saveButton.visible = false;
	discardButton.visible = false;
	capture.visible = true;

Step 19: Discard

The captured image is shown when the capture button is pressed, but what if we don’t want to save that image?

That’s where the discard button comes to action. The following function removes the bitmap on top of the video and sets the buttons to its original state.

private function discard(e:MouseEvent):void
	saveButton.visible = false;
	discardButton.visible = false;
	capture.visible = true;

Step 20: Document Class

We’re done writing code.

Go back to the Fla and in the Properties Panel, Class textfield add Main as value. This will link this class as the Document Class.


You’ve created a great application to take pictures using the user webcam, it’s your job to perfect it adding new functionality, like adding some effects to the captured bitmap data for example.

I hope you liked this tutorial, thank you for reading!

For beginners and professionals, test king offers free resources including Testking 640-802 study guide and Testking 642-813 live domes so you will learn about cool web applications.

This entry was posted on Wednesday, May 19th, 2010 at 09:02 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Carlos Yanez is a freelance Web Designer and Flash Developer with passion for great designs and cool applications.

About the author Published by Carlos

10 Responses »

  1. Hallo…, how to make camera application for video conference or video chatting ?
    face to face meeting using flash and webcam. can u show me ?

  2. Can I ask where does the images being saved by the function? Thanks

    • Oh I’m sorry.. what I mean is, is there a way to automatically save a file to a directory instead of asking it? Thanks.

  3. it would be nice to see video tutorial, or make this articl more detailed

  4. some truly great articles on this site, appreciate it for contribution.

  5. Definatly need a video tutorial. This would be VERY useful if I understood any of it.