Save a jpeg from flash 8, help with source code

[ryando]

This could potentially be useful to a lot of people out there.

I have been deconstructing the save bitmap script from, http://www.flash-db.com/Tutorials/snapshot/. Trying to turn it into a really simple application a lot of people could use.

Here is where I am at, (FLASH 8 player required).
(I had to take this link down, in fear of blowing out my bandwidth on my site, source code is below...)

It is simply duplicating a movie clip as bitmap data and then passing it to a php script that then turns it into a jpeg. Pretty cool and potentially useful.

The problem, as you probably have seen is that the color shifts a lot on conversion. I am guessing the problem is in the php script...

I am not a php guru, any of you?

THE PHP CODE:

PHP Code:

<?php
    //If GD library is not installed, say sorry
    if(!function_exists("imagecreate")) die("Sorry, you need GD library to run this example");
    //Capture Post data
    $data = explode(",", $_POST['img']);
    $width = $_POST['width'];
    $height = $_POST['height'];
    //Allocate image
    $image=(function_exists("imagecreatetruecolor"))?imagecreatetruecolor( $width ,$height ):imagecreate( $width ,$height );
    $background = imagecolorallocate( $image ,0 , 0 , 0 );
    //Copy pixels
    $i = 0;
    for($x=0; $x<=$width; $x++){
        for($y=0; $y<=$height; $y++){
            $r = 255-hexdec("0X".substr( $data[$i] , 0 , 2 )); 
            $g = 255-hexdec("0x".substr( $data[$i] , 2 , 2 )); 
            $b = 255-hexdec("0x".substr( $data[$i++] , 4 , 2 ));
            $color =  ($r << 16) | ($g << 8) | $b; 
            imagesetpixel ( $image , $x , $y , $color );
        }
    }
    //Output image and clean
    header( "Content-type: image/jpeg" );
    ImageJPEG( $image );
    imagedestroy( $image );    
?>

THE FLASH CODE:

/**
Screenshot and jpg output
**/
import flash.display.BitmapData;
import flash.geom.Matrix;

//Buttons handlers. Should add an extra function because delegate doesn't allow to pass parameters
shaF.onPress = mx.utils.Delegate.create(this,makeShadow);

//Helper functions to pass parameters
function makeShadow() { capture(0) }

/*
create a function that takes a snapshot of the Video object whenever it is called
and shows in different clips
*/
function capture(nr){
    this["snapshot"+nr] = new BitmapData(output_vid._width,output_vid._height); 

    //the bitmap object with no transformations applied
    this["snapshot"+nr].draw(output_vid,new Matrix());
    var t:MovieClip = createEmptyMovieClip("bitmap_mc"+nr,nr);
    
    //positions clip in correct place
    //t._x = 350; t._y = 10+(nr*130); t._xscale = t._yscale = 50
    
    //display the specified bitmap object inside the movie clip
    t.attachBitmap(this["snapshot"+nr],1);
output(nr);
    //attachMovie("print_but", "bot"+nr, 100+nr, {_x:t._x+t._width+50, _y:t._y+t._height/2})    
}
//Create a new bitmapdata, resize it 50 %, pass image data to a server script
// using a LoadVars object (large packet)
function output(nr){
        //Here we will copy pixels data
        var pixels:Array = new Array()
        //Create a new BitmapData
        var snap = new BitmapData(this["snapshot"+nr].width, this["snapshot"+nr].height);   
        //Matrix to scale the new image
        myMatrix = new Matrix();
        myMatrix.scale(1, 1)
        
        //Copy image
        snap.draw(this["snapshot"+nr],  myMatrix);

        var w:Number = snap.width, tmp
        var h:Number = snap.height
        //Build pixels array
        for(var a=0; a<=w; a++){
            for(var b=0; b<=h; b++){
                tmp = snap.getPixel32(a, b).toString(16)
                pixels.push(tmp.substr(1))
            }
        }
        //Create the LoadVars object and pass data to PHP script
        var output:LoadVars = new LoadVars()
        output.img = pixels.toString()
        output.height = h
        output.width = w
        //The page (and this movie itself) should be in a server to work
        output.send("show.php", "output", "POST")            
}
stop()

[Xeef]

1.
tmp = snap.getPixel32(a, b).toString(16)
pixels.push(tmp.substr(1))
if you don't use the Alpha why do you get it ?
use snap.getPixel(a, b)

2.

snap.getPixel32(a, b).toString(16)
0x0AFFFFFF --> toString will give AFFFFFF so the "0" is missing !

3.

hexdec don't need "0x" infront !
also there is no need at all for it
echo 255-("0x"."ff"); will do the job


Hmmmm i just test your link and it asking me the 4 time to cancel the script because it causing flashplayer to run slow and it already took 550Mb and i have just 768

[ryando]

Yeah it forces flash to pass a huge string, not sure if there is a good way around this.

What do you mean by 550mb, how are you measuring this.

Thanks for the reply, I am going to implement these and put up updated source code.

[Xeef]

i was opening your link

the flash player was warning me the the script is runing slow ....
i pressed 4 times no (to not to stop it) and was looking to taskmanager and the instance IE in wich it was runing was took around 550Mb memory

[ryando]

Here is the updated code:
Stillnot working, anybody?!!!!
I made the file smaller so it would not crash computers.

http://www.rdlstudio.com/save_bitmap/

As you can see the colors are not correct yet.

I attached the source code as a .zip and here is the code:

FLASH:
/**
Screenshot and jpg output
**/

//setup filter
import flash.display.BitmapData;


//function that takes a snapshot of the movie clip

function capture(nr){
    this["snapshot"+nr] = new BitmapData(image_holder._width,image_holder._height); 

    //the bitmap object with no transformations applied
    this["snapshot"+nr].draw(image_holder);
    var t:MovieClip = createEmptyMovieClip("bitmap_mc");
    
    //display the specified bitmap object inside the movie clip
    t.attachBitmap(this["snapshot"+nr],1);
output(nr);
}


//Create a new bitmapdata, pass image data to a server script
function output(nr){
    
        //Here we will copy pixels data
        var pixels:Array = new Array()
        
        //Create a new BitmapData
        var snap = new BitmapData(this["snapshot"+nr].width, this["snapshot"+nr].height);   
        
        //Copy image
        snap.draw(this["snapshot"+nr]);

        var w:Number = snap.width
        var h:Number = snap.height
        //Build pixels array
        for(var a=0; a<=w; a++){
            for(var b=0; b<=h; b++){
                tmp = snap.getPixel32(a, b)
                pixels.push(tmp)
                
            
                
            }
        }
        
        

        
        //Create the LoadVars object and pass data to PHP script
        var output:LoadVars = new LoadVars()
        output.img = pixels.toString()
        output.height = h
        output.width = w
        //The page (and this movie itself) should be in a server to work
        output.send("show.php", "output", "POST")            
}

stop()

PHP:

PHP Code:

<?php
    //If GD library is not installed, say sorry
    if(!function_exists("imagecreate")) die("Sorry, you need GD library to run this example");
    //Capture Post data
    $data = explode(",", $_POST['img']);
    $width = $_POST['width'];
    $height = $_POST['height'];
    //Allocate image
    $image=(function_exists("imagecreatetruecolor"))?imagecreatetruecolor( $width ,$height ):imagecreate( $width ,$height );
    $background = imagecolorallocate( $image ,0 , 0 , 0 );
    //Copy pixels
    $i = 0;
    for($x=0; $x<=$width; $x++){
        for($y=0; $y<=$height; $y++){
            $r = 255-hexdec(substr( $data[$i] , 0 , 2 )); 
            $g = 255-hexdec(substr( $data[$i] , 2 , 2 )); 
            $b = 255-hexdec(substr( $data[$i++] , 4 , 2 ));
            $color =  ($r << 16) | ($g << 8) | $b; 
            imagesetpixel ( $image , $x , $y , $color );
        }
    }
    //Output image and clean
    header( "Content-type: image/jpeg" );
    ImageJPEG( $image );
    imagedestroy( $image );    
?>

[Xeef]

i still can't test your link !!!

[bensir]

This was two year's old Thread la.
but I really got some idea to make the flash to jpg here.
and I finally found the answer.

I have updated the php and actionscript and it work in IE!!

OLD PHP code:

PHP Code:

$r = 255-hexdec("0X".substr( $data[$i] , 0 , 2 ));
$g = 255-hexdec("0x".substr( $data[$i] , 2 , 2 ));
$b = 255-hexdec("0x".substr( $data[$i++] , 4 , 2 ));
$color = ($r << 16) | ($g << 8) | $b;
imagesetpixel ( $image , $x , $y , $color ); 


new PHP code:

PHP Code:

<?php
    $data = explode(",", $_POST['img']);
    $width = $_POST['width'];
    $height = $_POST['height'];
    $image=imagecreatetruecolor( $width ,$height );
    $background = imagecolorallocate( $image ,0 , 0 , 0 );
    //Copy pixels
    $i = 0;
    for($x=0; $x<=$width; $x++){
        for($y=0; $y<=$height; $y++){
            $int = hexdec($data[$i++]);
            $color = ImageColorAllocate ($image, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int);
            imagesetpixel ( $image , $x , $y , $color );
        }
    }
    //Output image and clean
    header( "Content-type: image/jpeg" );
    ImageJPEG( $image );
    imagedestroy( $image );    
?>

OLD actionscript:

tmp = snap.getPixel32(a, b).toString(16)
pixels.push(tmp.substr(1))

new actionscript:

import flash.display.BitmapData;
shaF.onPress = function() {
    output();
};
function output() {
    snap = new BitmapData(mc._width, mc._height);
    snap.draw(mc);
    var pixels:Array = new Array();
    var w:Number = snap.width;
    var h:Number = snap.height;
    for (var a = 0; a<=w; a++) {
        for (var b = 0; b<=h; b++) {
            var tmp = snap.getPixel(a, b).toString(16);
            pixels.push(tmp);
        }
    }
    var output:LoadVars = new LoadVars();
    output.img = pixels.toString();
    output.height = h;
    output.width = w;
    output.send("show.php", "output", "POST");
}
stop();

ben

[inhan]

I don't know the PC's but it only directs me to the php page when in FF and Safari..

[spikeuk22]

This looks like what I am looking for.... been out of flash for a while so bear with me....

Basically im trying to create a small flash based proggy to make signatures with kill details on...

e.g. for world of warcraft. For example :

Name Bob Last kill : Steve

on a background picture

I have a background jpg it looks like I can use the coding above to take the shot, question is will I be able to import the dynamic text onto the bitmap and will the screenshot take the picture including the dynamic text or will it just be the background picture?...

ignore importing the data, ill figure out that bit im just tryint to figure out if I can take the screenshot and it will include the dynamic text, as dynamic text is a pain from previous expierience... any suggestions most appreciated.

..........UPDATE... I just had a look at the script and it looks as if flash is used just to display the picture and pass on the width and height where the screenshot will be taken to the PHP ...soo basically the php will just take a snapshot of what is on screen at the co ords provided? in which case it should have no problem with dynamic text etc? is this correct?

[alan_bourne]

I have added this to my flash document but it keeps sending blank jpgs, is this because the movie clip thats being created is too low in depth. Im trying to capture dynamically created movieclips, text and images pulled into flash. However it doesnt even capture a background image that im using?

any ideas?