HOME | DD

psykopath — BitmapData tutorial by-nc-sa

Published: 2007-02-02 13:00:48 +0000 UTC; Views: 1255; Favourites: 5; Downloads: 24
Redirect to original
Description EDITL I've edited the swf so now pressing any key should swap the filter between blur, highlight, and fade. I havent added this script into the description.

Was helping ~awesty with this, so here it is for everybody.Its not fancy, and cheaply commented, but hopefully someone can learn something from it.

//START COPYING HERE
//Import to let you use the classes
import flash.display.*
import flash.filters.*
import flash.geom.*
//Create and show the bitmap
var bmp:BitmapData = new BitmapData(550, 400, true, 0xFF000000)
var bmpholder:MovieClip = createEmptyMovieClip("bmpholder", 1)
bmpholder.attachBitmap(bmp, 1)

//Convolution Filter is kind of like blur
//The numbers 3 are the dimensions of the matrix, then there is
//a matrix with 9 bits. See the matrix has 9 bits, and the dimentsions are 3 by 3.
//Im not quite sure how to make other numbers work, but this basic
//setup works really well.
//The last number (9) is the divisior. if it is the same as ur matrix
//length then u get a blur effect. Lower number make it get brighter
//and higher number make it fade out
//So, 8.9 makes it get brighter, 9 is blur, and 9.2 is fade
var convo:ConvolutionFilter = new ConvolutionFilter(3, 3, [1,1,1,1,1,1,1,1,1], 8.9)

//Now makew the holder and two squares
var clipholder:MovieClip = createEmptyMovieClip("clipholder", 2)
var square:MovieClip = clipholder.createEmptyMovieClip("square", 1)
//draw the square
square.beginFill(0xFF0000, 50)
square.moveTo(-12, -12)
square.lineTo(12, -12)
square.lineTo(12, 12)
square.lineTo(-12, 12)
square.endFill()
square.xv = 4
square.yv = 2
square.onEnterFrame = function() {
    this._x += this.xv
    this._y += this.yv
    if (this._x>550 || this._x<0) {
        this.xv *= -1
    }
    if (this._y>400 || this._y<0) {
        this.yv *= -1
    }
    bmp.draw(clipholder)
    //this next line applies the filter.
    bmp.applyFilter(bmp, bmp.rectangle, new Point(0,0), convo)
}
var square2:MovieClip = clipholder.createEmptyMovieClip("square2", 2)
//draw the square
square2._x = 500
square2.beginFill(0x0066DD, 50)
square2.moveTo(-12, -12)
square2.lineTo(12, -12)
square2.lineTo(12, 12)
square2.lineTo(-12, 12)
square2.endFill()
square2.xv = -4
square2.yv = 2
square2.onEnterFrame = function() {
    this._x += this.xv
    this._y += this.yv
    //Bounce off the edges
    if (this._x>550 || this._x<0) {
        this.xv *= -1
    }
    if (this._y>400 || this._y<0) {
        this.yv *= -1
    }
    bmp.draw(clipholder)
    //this next line applies the filter.
    bmp.applyFilter(bmp, bmp.rectangle, new Point(0,0), convo)
}

//What is happening here actually isnt good.

//See how the onEnterFrame for both squares is applying the filter,
//this means the filter is applied twice. A better way to di it is just make the
//last object drawn call the filter.
//STOP COPYING NOW

That all works prefectly fine, if it doesnt then youve done something wrong. Note: The bitmapData class is only for Flash 8 and up.
Related content
Comments: 15

stephenchong318 [2007-05-01 15:56:27 +0000 UTC]

fantastic and nice hehe

👍: 0 ⏩: 0

Shaddownet [2007-02-03 00:48:59 +0000 UTC]

OMG lightsabers

👍: 0 ⏩: 1

psykopath In reply to Shaddownet [2007-02-03 04:16:34 +0000 UTC]

*schwing*

👍: 0 ⏩: 0

awesty [2007-02-03 00:46:57 +0000 UTC]

THANKYOU!

👍: 0 ⏩: 1

psykopath In reply to awesty [2007-02-03 04:16:45 +0000 UTC]

Glad I could help

👍: 0 ⏩: 0

FlameReaper [2007-02-02 18:30:50 +0000 UTC]

very nice effect, great use of the flash bitmapdata.

however its not interactive, although made wholey of codew this deviation belongs in the animations catagory. Iteractive gallery is for those flash files that users can interact with and in some way effect.

please move to the correct gallery.

👍: 0 ⏩: 2

clangersrock In reply to FlameReaper [2007-02-03 17:47:12 +0000 UTC]

It is interactive! press any key and it changes between blur, fade and highlight! read the creators comments you stupid @$$

👍: 0 ⏩: 2

psykopath In reply to clangersrock [2007-02-04 06:15:14 +0000 UTC]

Yeh it was his comment that got me to put in the interactivity. Thanks for defending me, but theres no need to be that profane about it.

👍: 0 ⏩: 0

FlameReaper In reply to clangersrock [2007-02-03 19:04:49 +0000 UTC]

yeah dude im aware of this. i actualy commented before there w3as an edit. it was my comment that prompted the edit. so next time you fell like opening your mouth and spitting out some profanity. you might wanna get your timeline and facts in check. It usualy helps you not look so stupid.

👍: 0 ⏩: 0

psykopath In reply to FlameReaper [2007-02-03 03:59:32 +0000 UTC]

I'll edit it to make it interactive, then leave it.

👍: 0 ⏩: 1

FlameReaper In reply to psykopath [2007-02-03 14:23:20 +0000 UTC]

ok thats fine.

👍: 0 ⏩: 0

wonderwhy-ER [2007-02-02 13:29:02 +0000 UTC]

Good job. It would be good to find good tutorial on displacmentFilter. I know more or less waht it is and how it works but not enough to make some things i'd liek to make

👍: 0 ⏩: 1

psykopath In reply to wonderwhy-ER [2007-02-03 04:15:20 +0000 UTC]

Well I'll make one for that too. The problem is, describing the filter is easy, but the script to make it work (drawing into the bitmap, etc) is actually the more complicated part. But I'll make one, and hopefully it will be easy to understand. I already have one deviation in my gallery showing it: [link]

👍: 0 ⏩: 0

Nion-Won99 [2007-02-02 13:13:50 +0000 UTC]

I don't even know what this is for but idid this at the squares for quite some time

👍: 0 ⏩: 0

Supa-Monky [2007-02-02 13:07:27 +0000 UTC]

Hmm... i never tried using the filters on bitMaps good job with the tut

👍: 0 ⏩: 0