Forum Topic: AS:BitmapData - basic

(4,603 views • 39 replies)

This topic is 2 pages long. [ 1 | 2 ]

<< < > >>
Thinking

liaaaam

Reply To Post Reply & Quote

Posted at: 10/31/05 10:48 AM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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?


None

fwe

Reply To Post Reply & Quote

Posted at: 10/31/05 11:00 AM

fwe DARK LEVEL 08

Sign-Up: 07/24/03

Posts: 3,361

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


None

IWantSomeCookies

Reply To Post Reply & Quote

Posted at: 10/31/05 11:05 AM

IWantSomeCookies LIGHT LEVEL 13

Sign-Up: 08/20/04

Posts: 3,295

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


None

T-H

Reply To Post Reply & Quote

Posted at: 10/31/05 11:17 AM

T-H LIGHT LEVEL 39

Sign-Up: 01/07/04

Posts: 4,893

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


None

liaaaam

Reply To Post Reply & Quote

Posted at: 10/31/05 12:05 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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.


None

liaaaam

Reply To Post Reply & Quote

Posted at: 11/3/05 12:24 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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


None

authorblues

Reply To Post Reply & Quote

Posted at: 1/1/06 03:24 PM

authorblues FAB LEVEL 12

Sign-Up: 06/21/05

Posts: 6,360

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

GENERATION 1-i: The first time you see this, copy it into your sig on any forum. Square it, and then add i to the generation.

BBS Signature

None

liaaaam

Reply To Post Reply & Quote

Posted at: 1/1/06 03:26 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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


None

UnknownFury

Reply To Post Reply & Quote

Posted at: 1/1/06 03:27 PM

UnknownFury EVIL LEVEL 26

Sign-Up: 08/10/05

Posts: 6,031

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

Portfolio(Under construction): UnknownFury.com |
Msn: giant_ak_47@msn.com | Contact: me@unknownfury.com
Follow me on twitter!


None

dELtaluca

Reply To Post Reply & Quote

Posted at: 1/1/06 03:28 PM

dELtaluca LIGHT LEVEL 20

Sign-Up: 04/16/04

Posts: 5,548

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

My social worker says im special!

BBS Signature

None

liaaaam

Reply To Post Reply & Quote

Posted at: 1/1/06 03:35 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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


None

dELtaluca

Reply To Post Reply & Quote

Posted at: 1/1/06 03:37 PM

dELtaluca LIGHT LEVEL 20

Sign-Up: 04/16/04

Posts: 5,548

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

My social worker says im special!

BBS Signature

None

Vengeance

Reply To Post Reply & Quote

Posted at: 1/1/06 03:42 PM

Vengeance EVIL LEVEL 28

Sign-Up: 03/18/05

Posts: 5,035

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

None

dELtaluca

Reply To Post Reply & Quote

Posted at: 1/1/06 03:58 PM

dELtaluca LIGHT LEVEL 20

Sign-Up: 04/16/04

Posts: 5,548

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

My social worker says im special!

BBS Signature

None

T-H

Reply To Post Reply & Quote

Posted at: 2/9/06 06:10 PM

T-H LIGHT LEVEL 39

Sign-Up: 01/07/04

Posts: 4,893

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


None

Newsdee

Reply To Post Reply & Quote

Posted at: 2/10/06 03:01 AM

Newsdee LIGHT LEVEL 18

Sign-Up: 01/21/05

Posts: 650

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


None

Rammer

Reply To Post Reply & Quote

Posted at: 3/19/06 12:52 PM

Rammer DARK LEVEL 32

Sign-Up: 06/08/03

Posts: 4,331

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


None

liaaaam

Reply To Post Reply & Quote

Posted at: 3/19/06 01:07 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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

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


Happy

slowz

Reply To Post Reply & Quote

Posted at: 3/19/06 01:08 PM

slowz FAB LEVEL 16

Sign-Up: 08/27/05

Posts: 1,775

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

Hi.

BBS Signature

None

mofongo9

Reply To Post Reply & Quote

Posted at: 3/19/06 01:11 PM

mofongo9 EVIL LEVEL 17

Sign-Up: 03/06/05

Posts: 635

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


None

liaaaam

Reply To Post Reply & Quote

Posted at: 3/19/06 01:14 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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.


None

mofongo9

Reply To Post Reply & Quote

Posted at: 3/19/06 01:27 PM

mofongo9 EVIL LEVEL 17

Sign-Up: 03/06/05

Posts: 635

it doesnt?

well how would i do it anyway?


None

Rammer

Reply To Post Reply & Quote

Posted at: 3/19/06 01:30 PM

Rammer DARK LEVEL 32

Sign-Up: 06/08/03

Posts: 4,331

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


None

liaaaam

Reply To Post Reply & Quote

Posted at: 3/19/06 01:30 PM

liaaaam NEUTRAL LEVEL 22

Sign-Up: 12/11/04

Posts: 14,536

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.


None

mofongo9

Reply To Post Reply & Quote

Posted at: 3/19/06 01:36 PM

mofongo9 EVIL LEVEL 17

Sign-Up: 03/06/05

Posts: 635

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


None

Rammer

Reply To Post Reply & Quote

Posted at: 3/19/06 02:17 PM

Rammer DARK LEVEL 32

Sign-Up: 06/08/03

Posts: 4,331

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


None

mofongo9

Reply To Post Reply & Quote

Posted at: 3/19/06 03:27 PM

mofongo9 EVIL LEVEL 17

Sign-Up: 03/06/05

Posts: 635

woah cool.

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


None

Newsdee

Reply To Post Reply & Quote

Posted at: 3/19/06 04:59 PM

Newsdee LIGHT LEVEL 18

Sign-Up: 01/21/05

Posts: 650

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" ).


Questioning

stickman-638

Reply To Post Reply & Quote

Posted at: 8/3/06 03:30 PM

stickman-638 FAB LEVEL 10

Sign-Up: 03/04/06

Posts: 444

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


None

thecoshman

Reply To Post Reply & Quote

Posted at: 8/15/06 11:26 AM

thecoshman DARK LEVEL 11

Sign-Up: 06/11/06

Posts: 812

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


All times are Eastern Standard Time (GMT -5) | Current Time: 06:47 AM

<< Back

This topic is 2 pages long. [ 1 | 2 ]

<< < > >>
You need a Grounds Gold Account to post on the NG BBS! If you don't have one, click here to sign up now! It's fast, free, and easy — and opens up tons of great NG features!