Be a Supporter!

AS: Bitmap Screenshots

  • 1,916 Views
  • 18 Replies
New Topic Respond to this Topic
Paranoia
Paranoia
  • Member since: Apr. 22, 2005
  • Offline.
Forum Stats
Member
Level 35
Game Developer
AS: Bitmap Screenshots 2007-01-13 11:10:46 Reply

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
trig1
trig1
  • Member since: Oct. 4, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-13 17:44:10 Reply

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

good tutorial! keep up the good work!

what game is that screenshot from?
Paranoia
Paranoia
  • Member since: Apr. 22, 2005
  • Offline.
Forum Stats
Member
Level 35
Game Developer
Response to AS: Bitmap Screenshots 2007-01-13 17:45:22 Reply

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

Top secret ;)


BBS Signature
trig1
trig1
  • Member since: Oct. 4, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 04:27:47 Reply

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) !

fuzz
fuzz
  • Member since: Jun. 2, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 05:41:23 Reply

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?

trig1
trig1
  • Member since: Oct. 4, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 09:26:50 Reply

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

i know!

Spectacle
Spectacle
  • Member since: Apr. 10, 2006
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 09:35:14 Reply

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


f

BBS Signature
fuzz
fuzz
  • Member since: Jun. 2, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 09:37:08 Reply

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.

GustTheASGuy
GustTheASGuy
  • Member since: Nov. 2, 2005
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 09:47:14 Reply

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

*Corrects Fuzzrecord*


BBS Signature
Depredation
Depredation
  • Member since: Sep. 5, 2005
  • Offline.
Forum Stats
Member
Level 17
Game Developer
Response to AS: Bitmap Screenshots 2007-01-14 09:54:10 Reply

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
fuzz
fuzz
  • Member since: Jun. 2, 2004
  • Offline.
Forum Stats
Member
Level 21
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 10:03:53 Reply

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 :(.

Paranoia
Paranoia
  • Member since: Apr. 22, 2005
  • Offline.
Forum Stats
Member
Level 35
Game Developer
Response to AS: Bitmap Screenshots 2007-01-14 10:06:28 Reply

Fuzz, stop whoring out our game :)


BBS Signature
TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 11:47:30 Reply

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!

GustTheASGuy
GustTheASGuy
  • Member since: Nov. 2, 2005
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 11:59:27 Reply

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
TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-14 12:03:47 Reply

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.

Paranoia
Paranoia
  • Member since: Apr. 22, 2005
  • Offline.
Forum Stats
Member
Level 35
Game Developer
Response to AS: Bitmap Screenshots 2007-01-14 12:15:09 Reply

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
trig1
trig1
  • Member since: Oct. 4, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Bitmap Screenshots 2007-01-15 14:52:47 Reply

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
glomph
glomph
  • Member since: Jun. 16, 2005
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS: Bitmap Screenshots 2007-09-07 13:15:45 Reply

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
KaynSlamdyke
KaynSlamdyke
  • Member since: Jun. 25, 2004
  • Offline.
Forum Stats
Member
Level 16
Melancholy
Response to AS: Bitmap Screenshots 2007-09-07 14:06:48 Reply

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