00:00
00:00

AS: Bitmap Screenshots

2,711 Views | 18 Replies
New Topic Respond to this Topic

AS: Bitmap Screenshots 2007-01-13 11:10:46


New and Improved AS:Main

Sorry if this has been covered, but I felt like doing a tutorial. As you may be aware, AS:Main is no longer updated, so this is just here for a direct link kinda thing.

Requirements:

- Flash 8 or later
- Basic understanding of MovieClips and stuff (creating MCs at runtime - its less complicated than it sounds :) )

Usage

This is basically a script to save a screen from your movie to a bitmapData variable. It doesn't have to be the whole screen - you can change the identifier to certain MCs or whatever.

It's usefull for stuff like game-over screenshots, user-taken screenshots, icons for saved games, and all kinds of things.

It can be a heavy bit of code, so it's best for rare events like game-over or certain key presses where the user isn't likely to notice one frame taking a few fractions of a second longer than it should.

The code

First, we import the necessary class and define the piece of bitmapData in which we will be holding the screenshot:

import flash.display.BitmapData;
var bmp1:BitmapData = new BitmapData(Stage.width, Stage.height);

The required parameters of the constructor are the width and height of the bitmap - for more imformation and the additional parameters, see the documentation for the BitmapData class.

Now, the easy part! Taking the screenshot itself. Once you have the bitmap object, you can tell it to draw everything in a certain instance (in this case, the main timeline) with one method:

bmp1.draw(_root);

A little explaination - the draw() method tells the BitmapData to convert all of the vector imformation in the target (the first parameters) into a bitmap in the target BitmapData.

The target isn't the only parameter. In full, they are:

BitmapData.draw(target, transform matrix, color transform, blend mode, clipping rectangle, smoothing (boolean));

I don't tend to use all of them. The color transform is nice, since it lets you play with the colors of the bitmap when you draw it. For example, to take a partially inverted screenshot, you could use:

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.ColorTransform;

var inver:ColorTransform = new ColorTransform(-0.6, -0.6, -0.6, 1, 200, 200, 200, 0);
var bitm:BitmapData = new BitmapData(Stage.width, Stage.height);
bitm.draw(_root, new Matrix(), inver);

Remember to import all of the classes you need. Also remember that to skip a parameter like Matrix, use its default constructor.

To display the bitmap, all you need to do is place it in a MovieClip and stick it where you want. So, assuming you already have your variable in place, you would use:

createEmptyMovieClip("bmp1hold", 1000);
bmp1hold.attachBitmap(bmp1, 1001);
bmp1hold._x = bmp1hold._y = 0;

This creates an empty clip at a depth of 1000, then attaches to it the bitmap we previously saved at a depth inside the clip of 1001. It then moves the clip to the origin.

Remember that you can scale and the MovieClip to position your Bitmap, if you don't want to mess around with Matrices. It probaly takes up more space to do it this way, so bear that in mind for large transformations.

Also remember that the clip's default depth will be above the rest of the stage. If you have any objects to display above the screenshot, such as custom cursors or frames, you must swap its depth to one greater than you have given your empty movie clip (in this case, above 1000):

cursor.swapDepths(15000);
bmpframe.swapDepths(9000);

Also remember that clips set to a positive depth will not be removed as the player needs their initial frames. If you want to remove your objects, you will have to use:

bmp1hold.removeMovieClip();
bmpframe.removeMovieClip();

Alternatively, if you need to remove a lot:

for(i in this){
if(typeof(this[i]) == "movieclip" && i != "cursor"){
this[i].removeMovieClip();
}
}

This will remove all movieclips of positive depth, other than "cursor".

That should be pretty much all you need to know. For any confusion, see documentation on the classes involved, or check back to AS:Main ;)

- Paranoia

example below

AS: Bitmap Screenshots


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-13 17:44:10


At 1/13/07 11:10 AM, Paranoia wrote: the tutorial

good tutorial! keep up the good work!

what game is that screenshot from?

Response to AS: Bitmap Screenshots 2007-01-13 17:45:22


At 1/13/07 05:44 PM, trig1 wrote:
what game is that screenshot from?

Top secret ;)


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-14 04:27:47


At 1/13/07 05:45 PM, Paranoia wrote:
Top secret ;)

so im guessing its one of your upcoming games. it looks cool (if it is your game) !

Response to AS: Bitmap Screenshots 2007-01-14 05:41:23


At 1/14/07 04:27 AM, trig1 wrote:
At 1/13/07 05:45 PM, Paranoia wrote:
Top secret ;)
so im guessing its one of your upcoming games. it looks cool (if it is your game) !

Yeah, the art looks friggin awsome, dont you agree?

Response to AS: Bitmap Screenshots 2007-01-14 09:26:50


At 1/14/07 05:41 AM, fuzz wrote: Yeah, the art looks friggin awsome, dont you agree?

i know!

Response to AS: Bitmap Screenshots 2007-01-14 09:35:14


this seems like it will be useful for games where you can take pictures of stuff


f

BBS Signature

Response to AS: Bitmap Screenshots 2007-01-14 09:37:08


At 1/14/07 09:26 AM, trig1 wrote:
At 1/14/07 05:41 AM, fuzz wrote: Yeah, the art looks friggin awsome, dont you agree?
i know!

lol, i hope you have realised its me doing the art.

Response to AS: Bitmap Screenshots 2007-01-14 09:47:14


At 1/14/07 09:37 AM, fuzz wrote: lol, i hope you have realised its me doing the art.

*Corrects Fuzzrecord*


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-14 09:54:10


At 1/14/07 05:41 AM, fuzz wrote: Yeah, the art looks friggin awsome, dont you agree?

Hehe, i thought it was your art, you use that font quite a lot in your games :D. Looks great so far. Also, nice tut Paranoia, i'll use this in my next game ;).


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-14 10:03:53


At 1/14/07 09:47 AM, OldGust wrote:
At 1/14/07 09:37 AM, fuzz wrote: lol, i hope you have realised its me doing the art.
*Corrects Fuzzrecord*

What does that mean? You thought i was a coder? Balh :(.

Response to AS: Bitmap Screenshots 2007-01-14 10:06:28


Fuzz, stop whoring out our game :)


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-14 11:47:30


Whoa. I'd never think to do it this way. So this is used to make things like Cameras and such I assume. Really awesome, thanks. Sweet tut!

Response to AS: Bitmap Screenshots 2007-01-14 11:59:27


No, the BitmapData class is used for manual (and thus laggy, atleast in AVM1) manipulation. There is a Camera class for webcams and a Video class for playback.


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-14 12:03:47


At 1/14/07 11:59 AM, OldGust wrote: No, the BitmapData class is used for manual (and thus laggy, atleast in AVM1) manipulation. There is a Camera class for webcams and a Video class for playback.

Oh nah, I don't mean webcams, obviously.. I'm talking about "game" cameras, like that of the one used in Climate Chaos and other various camera snapshot flash games. Otherwise also a screenshot tool can be made of this, at least one in flash.

Response to AS: Bitmap Screenshots 2007-01-14 12:15:09


At 1/14/07 12:03 PM, TrueDarkness wrote:
At 1/14/07 11:59 AM, OldGust wrote: No, the BitmapData class is used for manual (and thus laggy, atleast in AVM1) manipulation. There is a Camera class for webcams and a Video class for playback.
Oh nah, I don't mean webcams, obviously.. I'm talking about "game" cameras, like that of the one used in Climate Chaos and other various camera snapshot flash games.

That's the use I was thinking of for it. Obviously this is the sort of thing to use on rare events and user inputs, since it's too laggy to maintain over a number of frames. It would work quite well, I imagine, for saving shots in a CC type game.


BBS Signature

Response to AS: Bitmap Screenshots 2007-01-15 14:52:47


At 1/14/07 09:37 AM, fuzz wrote:
lol, i hope you have realised its me doing the art.

damn you, you little trickster!

cool art though :P

Response to AS: Bitmap Screenshots 2007-09-07 13:15:45


Is there some way to then export this to a png image file or similar (using php maby)?
Thanks


I have done the deed. Didst thou not hear a noise?

BBS Signature

Response to AS: Bitmap Screenshots 2007-09-07 14:06:48


At 9/7/07 01:15 PM, glomph wrote: Is there some way to then export this to a png image file or similar (using php maby)?
Thanks

Alessandro Crugnola (Sephiroth.it) has a tutorial on that kind of process here


...

BBS Signature