• home
  • forum
  • my
  • kt
  • download
  • Basic Flash MX Web Cam

    Author: 2007-06-13 15:05:19 From:

    Introduction

    This tutorial will show you how to use dynamic image loading in Flash MX to create a simple web cam type inline image updater.

    1. Setup the Movie

    Size a Flash MX movie to fit the target height and width of the web cam jpg you will be dynamically displaying ( 320 x 240 pixels in this case) and set the frame rate to 1 fps.
    Figure 1 

    2. Import a Sample Image

    In the default layer (layer 1), import a sample of the web cam jpg (place it at x:0.0 y:0.0 for this example).
    Figure 2 

    3. Convert the Image to a Movie Clip Symbol

    Select the image and convert it to a symbol (F8 or Insert> Convert to Symbol). The behavior should be set to Movie Clip (name it JPG for this example).
    Figure 3
    Name the instance of the movie JPG.
     

    4. Create a Seperate Action Layer

    Insert a new layer, and create 3 blank key frames in that layer for actions.
    Figure 4 

    5. Frame 1 Actions

    In the first key frame insert the following code:

    Figure 5
    url = "webcam.jpg";
    counter = 2;
    function update() {
     newmovie = "JPG" + counter++;
     duplicateMovieClip("JPG", newmovie, counter);
     loadMovie(url, newmovie);
    }

    6. Frame 2 Action

    In the second key frame insert the following code:

    Figure 6
    update.call();

    7. Frame 3 Action

    In the third key frame insert the following code:

    Figure 7
    gotoAndPlay(2);

    8. Mind your domains!

    As long as the domain hosting the swf and the image are the same, that's all you have to do (or if you run the flash file from your desktop, you can grab images from any domain).

    However, if the domain of the jpg is different from domain where the flash file is located

    (for example url=http://earthcam.com/webcam.jpg and the swf is located at http://yourwebsite.com/webcam.swf),

    you will have to bounce the image through a cgi script at your domain

    (for example http://yourwebsite.com/getjpg.cgi).

    Change the script on the first frame as follows:

    Figure 8
    url = "http://earthcam.com/webcam.jpg";
    cgiscript = "http://yourwebsite.com/getjpg.cgi";
    counter = 2;
    function update() {
     newmovie = "JPG" + counter++;
     duplicateMovieClip("JPG", newmovie, counter);
     loadMovie(cgiscript, newmovie, "GET");
    }
    Then use a script like this to grab the image (this is http://yourwebsite.com/getjpg.cgi)
    #!/usr/bin/perl
    ##########################################################################
    #               Get JPG from non local domain Script v1.00
    #------------------------------------------------------------------------#
    # Last Updated: 3/18/2002                         written by: Jeff Hughes
    # Use this script however you want ...
    #                         just don't blame me for anything that goes wrong.
    ##########################################################################
    ## Get Input From Form  ##################################################
     read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
     $buffer = $ENV{'CONTENT_LENGTH'} || $ENV{'QUERY_STRING'};
     @pairs = split(/&/, $buffer);
     foreach $pair (@pairs) {
     ($name, $value) = split(/=/, $pair);
     $value =~ tr/+/ /;
     $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
     if ($INPUT{$name}) { $INPUT{$name} = $INPUT{$name}.",".$value; }
     else { $INPUT{$name} = $value; }}
    ##### $INPUT{'name'} #####################################################
    use HTTP::Request;
    use LWP::UserAgent;
    my $ua = LWP::UserAgent->new;
    my $request = HTTP::Request->new(GET => $INPUT{'url'});
    my $response = $ua->request($request);
    my %hash = %{$response};
    $content = $hash{_content};
    $msg = $hash{_msg};
    print "Content-type: image/jpeg; name=\"webcam.jpg\"\n";
    print "Content-Disposition: inline; filename=\"webcam.jpg\"\n\n";
    binmode STDOUT;
    print $content;
    #------------------------------------------------------------------------#
    #		     End of Script         ###      First Created: 3/18/2002
    ##########################################################################

    » Level Basic

    Added: : 2002-03-19
    Rating: 6.44 Votes: 82
    Hits: 77
    » Author
    Jeff Hughes is a Senior Web Application and a User Interface Design Consultant
    » Download
    Download the files used in this tutorial.
    Download (118 kb)

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (66)
      Utilities (19)
      Getting Started (71)
      Video (10)
      Interactivity (21)
      Web Design (22)

    New

    Hot