Be a Supporter!

AS:BitmapData - basic

  • 7,411 Views
  • 39 Replies
New Topic Respond to this Topic
liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
AS:BitmapData - basic Oct. 31st, 2005 @ 10:48 AM Reply

AS:Main

BitmapData?

BitmapData is the new (to Flash 8) class that allows us to modify Bitmaps at runtime using ActionScript. It's easy to use once you get the hang of it, and can be incredibly useful. The best example I can think of is to make a colour picker using a Bitmap image containing millions of colours, then allowing the user to click the image and get the colour value at the _xmouse and _ymouse locations. BitmapData is also incredibly cool [fact].

Starting off

The first thing you need to do to use BitmapData is to import the class, you do so as you do other classes (geom, filters, etc):

import flash.display.BitmapData

Now you can start using it, the next thing you must do is make a new BitmapData object. You can do so like this:

var myBitmapData:BitmapData = new BitmapData(width, height, transparent?, colour)

EG

var myBitmapData:BitmapData = new BitmapData(550, 400, true, 0xFF000000)

That will create a new BitmapData the size of the default stage coloured black. The first thing you may notice is that the colour value has 8 (count 'em) numbers rather than the usual 6, this is because I set the transparent boolean to true so I must define the amount of alpha in the pixels. In this case it is full alpha and no colour (plain black), the way this works is ARGB - alpha, red, green, blue. Just set transparent variable to false and stick with the six digits for now if you don't think you'll need to use alpha in your Bitmaps yet.

BitmapData is an API just like the MovieClip API, and one main difference that you may dislike is that BitmapData doesn't come with a lineTo command (actually this may piss you off). See the examples section for my own BitmapData lineTo function =)

Commands

There are many commands for manipulating BitmapData in Flash, but I'm only going to explain the basic ones because the more advanced commands use other classes such as Rectangle, Point, etc. which haven't been explained yet, so I'll leave them for later.

myBitmapData.draw(source, matrix, colour transform, blend mode, rectangle) - For now you can just ignore all of the parameters except the source one, which is where you put the instance name of whatever you want to draw onto the Bitmap (text, video, movie clips, etc).

myBitmapData.loadBitmap(id) - Loads an object from the library onto the BitmapData

myBitmapData.attachBitmap(bitmap, depth, pixel snap ("always"/"never"/"auto"), smoothing (true/false)) - This attaches the Bitmap to a timeline (i.e. _root), at the depth you put.

myBitmapData.setPixel(_x, _y, colour) - Use this for drawing onto your Bitmap, it will set the (individual) pixel at the co-ordinate you put to the chosen colour (RGB).

myBitmapData.setPixel32(_x, _y, colour - Same as setPixel, but you use this if you're passing ARGB rather than RGB.

myBitmapData.getPixel(_x, _y) - Returns the colour value (RGB) at the chosen co-ordinate.

myBitmapData.setPixel32(_x, _y, colour - Returns the colour value (ARGB) at the chosen co-ordinate.

myBitmapData.clone() - Returns an exact copy of the Bitmap, you can use this to make something such as a webcam recorder.

myBitmapData.noise(random seed, low, high, channels, grayscale (true/false)) - Creates noise (the same as TV static)

myBitmapData.scroll(_x, _y) - Moves the Bitmap in itself, you'll have to play with this yourself to understand.

myBitmapData.dispose() - Delete your BitmapData, useful because BitmapData takes up a lot of RAM

myBitmapData.perlinNoise(baseX, baseY, octaves, random seed, stitch, fractal, channels, greyscale, offsets) - Generates a pattern onto the BitmapData. Set your baseX to the width of the BitmapData, baseY to the height, octaves is the number of octaves, random seed to a random number, stitch to true, fractal to true, channels to any number, greyscale to false and offsets to null. Try playing with the values, you can have real fun with this :)

Examples

Perlin Noise

lineTo

function bitmapLine(startx:Number, starty:Number, endx:Number, endy:Number):Void {
myX=Array(), myY=Array();
x3 = (endx-startx)/1000;
y3 = (endy-starty)/1000;
for (a=1; a<1001; a++) {
startx += (x3), starty += (y3);
myX.push(startx), myY.push(starty);
}
for (a=1; a<1001; a++) {
bmp.setPixel(myX[a-1], myY[a-1], 0);
}
}

BitmapData converter

------

BitmapData Google results

------

Any questions?


Sup, bitches :)

BBS Signature
fwe
fwe
  • Member since: Jul. 24, 2003
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS:BitmapData - basic Oct. 31st, 2005 @ 11:00 AM Reply

At 10/31/05 10:48 AM, -liam- wrote: function bitmapLine(startx:Number, starty:Number, endx:Number, endy:Number):Void {
myX=Array(), myY=Array();
x3 = (endx-startx)/1000;
y3 = (endy-starty)/1000;
for (a=1; a<1001; a++) {
startx += (x3), starty += (y3);
myX.push(startx), myY.push(starty);
}
for (a=1; a<1001; a++) {
bmp.setPixel(myX[a-1], myY[a-1], 0);
}
}

Wouldn't that lag like fuck?

function bitmapLine(startx:Number, starty:Number, endx:Number, endy:Number):Void {
var l = createEmptyMovieClip('line"+getNextHighest
Depth(),getNextHighestDepth())
l.moveTo(startx,starty)
l.lineTo(endx,endy)
bmp.draw(l)
delete l
}

That's faster, although it might clear everything else as it draws it, i'm not sure.


wtfbbqhax

IWantSomeCookies
IWantSomeCookies
  • Member since: Aug. 20, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to AS:BitmapData - basic Oct. 31st, 2005 @ 11:05 AM Reply

Wow liam, this is seriously an amazing tutorial.

I really understood it, even though im a actionscript newbie at the moment. It was just so clear. :)

I thought it was for AS3 for a moment, its so advanced for me.

Great tute, really great.


"Actually, the server timed out trying to remove all your posts..."
-TomFulp

T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to AS:BitmapData - basic Oct. 31st, 2005 @ 11:17 AM Reply

I discovered perlinNoise yesterday by accident, thought it was pretty cool, and was playing around with it for a while, got an idea of how to mess the shape around to get the woodgrain i wanted, but couldnt figure out how to set the colour exactly.

Nice tut ; )

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Oct. 31st, 2005 @ 12:05 PM Reply

At 10/31/05 11:00 AM, fwe wrote: Wouldn't that lag like fuck?

Not really, and I did do it your way before I made my own.


Sup, bitches :)

BBS Signature
liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Nov. 3rd, 2005 @ 12:24 PM Reply

To get a hexidecimal colour value from a Bitmap, you use this:

colourValue.toString(16);

So for example:

import flash.display.BitmapData;
import flash.filters.GlowFilter;
var glow:GlowFilter = new GlowFilter(0, 100, 5, 5, 5, 5)
_root.createTextField("colVal", 2, 10, 10, 200, 50);
colVal.filters = [glow];
var txtFormat:TextFormat = new TextFormat();
txtFormat.font = "Verdana";
txtFormat.color = 0xFFFFFF;
txtFormat.bold = true;
colVal.setNewTextFormat(txtFormat);
colVal.selectable = false;
var bmp:BitmapData = new BitmapData(550, 400);
bmp.noise(100, 0, 1337, 7, false);
_root.attachBitmap(bmp, 1);
onMouseMove = function () {
var col:Number = bmp.getPixel(_xmouse, _ymouse);
colVal.text = "0x"+(col.toString(16)).toUpperCase();
}; //might seem complicated =)

Also if you want to convert to binary, it would be

colourValue.toString(2);

To base 10 (normal, what we use everyday)

colourValue.toString(10);


Sup, bitches :)

BBS Signature
authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:24 PM Reply

At 10/31/05 10:48 AM, -liam- wrote: Any questions?

yeah. how did you get to be so adorable.
but no, really, thanks for writing this. i wanted to learn this.

i did see a tutorial on the use of this with video to create a certain thing
perhaps ill rewrite the tutorial for AS: MAIN. it was a great idea...


BBS Signature
liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:26 PM Reply

At 1/1/06 03:24 PM, authorblues wrote: yeah. how did you get to be so adorable.

It's the name, hythens are cute.

i did see a tutorial on the use of this with video to create a certain thing

What certain thing? :P


Sup, bitches :)

BBS Signature
UnknownFury
UnknownFury
  • Member since: Aug. 10, 2005
  • Offline.
Forum Stats
Member
Level 26
Programmer
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:27 PM Reply

This code looks quite good to me i wouldnt be able to test it out yet though because i havn't got flash 8 only mx 2004, i hope to those who can use ti find this helpful!!!

dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:28 PM Reply

At 10/31/05 12:05 PM, -liam- wrote: the line function

other person

the one with movielcip

-liam-

no not really

yes but yours is incredibly silly, its far far faster and more accurate using drawing to a movieclip and drawing the movieclip to bitmap, and try drawing 40 lines at once, and youll see how much slower it is


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:35 PM Reply

At 1/1/06 03:28 PM, -dELta- wrote: yes but yours is incredibly silly, its far far faster and more accurate using drawing to a movieclip and drawing the movieclip to bitmap, and try drawing 40 lines at once, and youll see how much slower it is

I use drawing to a MovieClip if I'm actually drawing in the IDE (in the ActionScript editor), but I wrote that lineTo function just as a test really - I wouldn't use it for many lines at once. I just think it's easier to draw a line straight onto the Bitmap rather than creating a MovieClip then drawing a vector line then drawing onto the Bitmap then clearing the MovieClip just for one line

=P


Sup, bitches :)

BBS Signature
dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:37 PM Reply

At 1/1/06 03:35 PM, -liam- wrote: I use drawing to a MovieClip if I'm actually drawing in the IDE (in the ActionScript editor), but I wrote that lineTo function just as a test really - I wouldn't use it for many lines at once. I just think it's easier to draw a line straight onto the Bitmap rather than creating a MovieClip then drawing a vector line then drawing onto the Bitmap then clearing the MovieClip just for one line

its alot less silly, with movieclip, set movieclip visible to false, so it doesnt waste resources on drawing the line, you create the vector, and flash draws it to bitmap.

or you could use youre own loop which wastes resources since it loops through coordinates that would be the same pixel using flash

flash player doing a loop = alot faster than the AS you write being read by flash player and doing the loop


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
Vengeance
Vengeance
  • Member since: Mar. 18, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:42 PM Reply

wow, that was so easy to understand. everything was explained well, great work -liam- you deserve a cookie *hands -liam- a cookie*


========|| WWWWWWWW>[-[Blog] - [Audio] - [Userpage] - [Flash] - [Last.fm]-]<WWWWWWWW ||========

BBS Signature
dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS:BitmapData - basic Jan. 1st, 2006 @ 03:58 PM Reply

At 1/1/06 03:42 PM, Flash_kid wrote: wow, that was so easy to understand. everything was explained well, great work -liam- you deserve a cookie *hands -liam- a cookie*

delta steals cookie and gives liam a bigger (yet slightly smelly) double choc chip cookie. mwahahahaha


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to AS:BitmapData - basic Feb. 9th, 2006 @ 06:10 PM Reply

import flash.display.BitmapData
var bmp1:BitmapData = new BitmapData(300,200,true,0xFFFFFF)
bmp1.attachBitmap("Bitmap 1",1,true,true)

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: There is no method with the name 'attachBitmap'.
bmp1.attachBitmap("Bitmap 1",1,true,true)

I hate it when shit packages don't load properly...

var bmp1:BitmapData = new flash.display.BitmapData(300,200,true,0xFF

FFFF)

bmp1.attachBitmap("Bitmap 1",1,true,true)
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: The class or interface 'BitmapData' could not be loaded.

You just can't fucking win....

Newsdee
Newsdee
  • Member since: Jan. 21, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS:BitmapData - basic Feb. 10th, 2006 @ 03:01 AM Reply

import flash.display.BitmapData
var bmp1:BitmapData = new BitmapData(300,200,true,0xFFFFFF)
bmp1.attachBitmap("Bitmap 1",1,true,true)

attachBitmap is a MovieClip method... I think of it as the opposite of BitmapData.draw() :-)
Other than that, try placing a semicolon after the import, or try checking that your default classpath is still defined (check my tutorial on it for what it should be, I don't have Flash open atm).

Rammer
Rammer
  • Member since: Jun. 8, 2003
  • Offline.
Forum Stats
Member
Level 33
Programmer
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 12:52 PM Reply

At 10/31/05 10:48 AM, -liam- wrote:
import flash.display.BitmapData
var myBitmapData:BitmapData = new BitmapData(width, height, transparent?, colour)

yeah, for some reason, that isn't working for me. i wrote it myself, didn't work, then copied and pasted from this, still didn't work.

i'm not sure what i'm doing wrong. there's no actionscript errors, or anything.

O_o


snyggys

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:07 PM Reply

At 3/19/06 12:52 PM, 2k_rammerizkool wrote: stuff

Have you attached the bitmap to a movieclip? (MovieClip.attachBitmap(BitmapData, depth)) ?


Sup, bitches :)

BBS Signature
slowz
slowz
  • Member since: Aug. 27, 2005
  • Offline.
Forum Stats
Member
Level 16
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:08 PM Reply

awsome tutorial man... hope to see a lot more!


Hi.

BBS Signature
mofongo9
mofongo9
  • Member since: Mar. 6, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:11 PM Reply

how do you get a picture from an external URL and then set it as the fill for a movieclip drawn in API?

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:14 PM Reply

At 3/19/06 01:11 PM, mofongo9 wrote: how do you get a picture from an external URL and then set it as the fill for a movieclip drawn in API?

That has nothing to do with BitmapData.


Sup, bitches :)

BBS Signature
mofongo9
mofongo9
  • Member since: Mar. 6, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:27 PM Reply

it doesnt?

well how would i do it anyway?

Rammer
Rammer
  • Member since: Jun. 8, 2003
  • Offline.
Forum Stats
Member
Level 33
Programmer
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:30 PM Reply

At 3/19/06 01:07 PM, -liam- wrote:
At 3/19/06 12:52 PM, 2k_rammerizkool wrote: stuff
Have you attached the bitmap to a movieclip? (MovieClip.attachBitmap(BitmapData, depth)) ?

oh. i guess that might help >_>

yeah, it works now. thanks :P


snyggys

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:30 PM Reply

At 3/19/06 01:27 PM, mofongo9 wrote: it doesnt?

well how would i do it anyway?

MovieClip.beginBitmapFill, but that just loads the picture from the library.


Sup, bitches :)

BBS Signature
mofongo9
mofongo9
  • Member since: Mar. 6, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 01:36 PM Reply

how do i load an image to the library at runtime?

Rammer
Rammer
  • Member since: Jun. 8, 2003
  • Offline.
Forum Stats
Member
Level 33
Programmer
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 02:17 PM Reply

i was messing with the perlin noise function. i put in random numbers and booleans and i got this nifty-looking grass thing!

import flash.display.BitmapData;
bmp = new BitmapData(550, 400);
bmp.perlinNoise(4, 5, 10, 50, false, true, 2, false);
_root.createEmptyMovieClip("blargh", 1);
blargh.attachBitmap(bmp, 1);


snyggys

mofongo9
mofongo9
  • Member since: Mar. 6, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 03:27 PM Reply

woah cool.

the thing i dont understand is how does it figure out the color? you didnt input the color anywhere in that code?

Newsdee
Newsdee
  • Member since: Jan. 21, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to AS:BitmapData - basic Mar. 19th, 2006 @ 04:59 PM Reply

At 3/19/06 03:27 PM, mofongo9 wrote: the thing i dont understand is how does it figure out the color? you didnt input the color anywhere in that code?

The last "2" given to the perlinNoise function specifies the RGB channel, in this case, Green.
Check the documentation for details. You can use 1, 2, 4 or a combination of the three using | to tie them together (e.g. "1 | 2 | 4" ).

stickman-638
stickman-638
  • Member since: Mar. 4, 2006
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to AS:BitmapData - basic Aug. 3rd, 2006 @ 03:30 PM Reply

Yes, im sure this is a good tut but what exactly does BitmapData do?

thecoshman
thecoshman
  • Member since: Jun. 11, 2006
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS:BitmapData - basic Aug. 15th, 2006 @ 11:26 AM Reply

how would you use a bmp that you have imported to stage as a bit map data with the action script, basicaly for use as a colour pallete picking thing