Find your next home with Luxist's "Estate of the Day"

Taking still photos with Flash

flash settingsWhen I was still in school as an art major I discovered an undocumented feature (or bug) in the Camera() class that allows Flash to take a still photo of a user and then manipulate that photo. This class is normally used in connection with a Flash Communication Server to create a teleconferencing application with integrated streaming video. A video feed is grabbed from a user’s computer, with their permission, and streamed to an external server. At the same time the feed can be displayed in for the user in the Flash project they have opened. When the feed is disconnected it leaves a residual image that can be manipulated within a movieclip and possibly printed via the user’s computer.

Check out the complete tutorial after the jump.

This tutorial creates a simple Flash based still photographer using a little ActionScript, but can be easily modified to become an almost pure ActionScript project.

layersFirst create a new FLA in Flash MX or higher. Rename the only layer in the new file to ‘actions.’ Add two blank keyframes to the layer via the F7 key or Insert menu > Timeline > Blank Keyframe. You should now have three Blank Keyframes. Select the middle one (Frame 2) and name it ‘loopStart.’ We will be adding ActionScript to this layer later.

Add a second layer below the ‘actions’ layer and name it ‘video.’ We will be adding an empty embedded video clip to this layer for our viewfinder later.

Add a third layer below the ‘video’ layer and name it ‘shutter button.’ We will be placing the camera control button here later.

new video objectOpen the library via ctrl+L (cmd+L on Mac) or Window menu > Library. Add an empty Embedded Video object to the Library by clicking the options Menu on the top right of the Library’s title bar and selecting New Video. Drag a copy of the new Embedded Video object to the ‘video’ layer on the stage. Give this an instance name of ‘viewFinder.’ Feel free to change the size and position of this object via the properties box or by dragging and skewing it with your mouse.

Create a new button symbol named shutter_btn and add it to the ‘shutter button’ layer of the stage. Give this an instance name of ‘shutter_btn.’ On the ‘actions’ layer select the first frame and open the Actions window via the F9 key or Window menu > Development Panels > Actions. Now the coding (or fun) begins.

First we need to create a video feed to connect to via the Camera class.

var theVideoFeed:Camera = new Camera();
//this creates an instance of the Camera class for our feed
theVideoFeed = Camera.get();
//this grabs a direct feed to any camera
//connected to the computer the Flash SWF is running on

camera settingsYour camera feed will not work if no camera is connect to the system (of course) or if the user hasn’t given the Flash file permission to access their camera via the Flash Settings menu in Flash Player.

Next, the video feed is displayed in the Embedded Video object on the stage.

viewFinder.attachVideo(theVideoFeed);
//this attaches the video to the Embedded Video object

Then the act of taking a picture is enabled via a function that can be called from anywhere in the Flash project

var noPictureTaken:Boolean = true;
//this keeps track of whether a still has already been snapped
var takePicture = function(){
   if (_root.noPictureTaken){
      _root.viewFinder.attachVideo(null); 
      //by connecting a null feed to the Embedded Video
      //object you disconnect the current 
      //feed but leave a residue image of the 
      //last frame of the last feed
   } else { 
      _root.viewFinder.attachVideo(_root.theVideoFeed); 
      //this re-attaches the video feed to the Embedded Video 
      //object on the stage and restarts 
      //the view finder in the process
   }
_root.noPictureTaken = !(_root.noPictureTaken);
//this allows the function to keep track of
//the state of the view finder
};

After that, enable the shutter button the snap the still photo.camera face

shutter_btn.onRelease = function() = 
   _root.takePicture(); 
   //this calls the takePicture() 
   //function to snap the still photo 
   _root.pause = !(_root.pause); 
   //this pauses the movie so the 
   //
feed doesn’t restart, 
   //testing may show this line is unneeded
};

Lastly we create a loop after the initialization scripts. Click on the last frame of the ‘actions’ layer and open the Actions window. Inside the window add the looping code.

gotoAndPlay(“loopStart”);

In order to test your new Flash Photographer, you need to attach a camera to your system via USB, Firewire or regular AV cables.

This tutorial is adapted from my original work for my personal site: http://www.schleifstein.net.

News
Macromedia (141)
Innovation (164)
Merger (41)
Releases (65)
WIN Business (24)
Events
MAX (26)
FlashForward (8)
MMUGs (16)
Webinars (4)
Learning
ActionScript (49)
Designer Certification (5)
Developer Certification (6)
Ideas (163)
Links (83)
Samples (57)
Tips and Tricks (98)
Tutorials (45)
Design & Development
Accessibility (14)
Ad Design (27)
Art (94)
Components (6)
Extensions (17)
Games (65)
Rich Internet Applications (99)
Sound (38)
Video (65)
Web Standards (33)
Software
Flash 8 (103)
Flash MX2004 (92)
Flash Paper 2 (3)
Flash Player 8 (55)
Flash MX2004 Professional (44)
Flash Lite (24)
Flash Platform (91)
Flash Remoting (3)
Flash Communications Server MX (8)
Flash Video (24)
Flash Paper (3)
Macromedia Contribute (2)
Macromedia Flex (8)
8Ball (15)
Maelstrom (19)
Software Updates (34)
Beta (22)
Bugs (14)
Studio 8 (25)

RESOURCES

RSS NEWSFEEDS

Powered by Blogsmith

Other Weblogs Inc. Network blogs you might be interested in: