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.
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.
Create a 318x238px rectangle and set its position to x: 141 y: 41.
Step 4: Action Buttons
Use the Rectangle Tool to create a 46x22px #BABABA rounded rectangle with a corner radius of 1.
Duplicate the shape and reduce its size to 44x20px. Fill it with a gradient background #ECECEC to #FFFFFF.
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.
Step 5: Capture Button
Create a 600x30px #DDDDDD rectangle and place it in the bottom of the stage.
Using the Rectangle Primitive Tool, create a 20x20px #7BBBF9 rounded rectangle with a corner radius of 3, and center it in the bottom.
I’ve added a minimalistic icon created from simple shapes.
Step 6: ActionScript
Create a new ActionScript Class and save it as Main.as in your class folder.
Step 7: Package
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.media.Camera; import flash.media.Video; import flash.display.BitmapData; import flash.display.Bitmap; import flash.events.MouseEvent; import flash.net.FileReference; 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
}
else
{
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
}
else
{
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
{
bmd.draw(video);
bmp = new Bitmap(bmd);
bmp.x = 140;
bmp.y = 40;
addChild(bmp);
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);
fileReference.save(byteArray, "Image.jpg");
removeChild(bmp);
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
{
removeChild(bmp);
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.
Conclusion
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.
Nice, Thanks!
Hallo…, how to make camera application for video conference or video chatting ?
face to face meeting using flash and webcam. can u show me ?
Can I ask where does the images being saved by the FileReference.save 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.
it would be nice to see video tutorial, or make this articl more detailed
some truly great articles on this site, appreciate it for contribution.
THANX MANNNN!!!!
Definatly need a video tutorial. This would be VERY useful if I understood any of it.