BitmapData dynamic effect

1. The graphics displayed in the computer can be divided into two categories: vector graph and bitmap.


Vector: uses straight lines and curves to describe graphs. The elements of these graphs are points, lines, rectangles, Polygon, circles, and arcs. They are all calculated using mathematical formulas. As we all know, Flash is a vector animation production software. The beginFill and lineTo commands used in AS are based on the operations on vector graphs.


Bitmap: it is generally used for photo quality image processing and is composed of many pixels like small blocks. In short, bitmap is a pattern composed of countless color points. Bitmap is what we will introduce today.


Comparison:

1. Vector images can be infinitely enlarged without distortion, while bitmaps are distorted.

2. Bitmap consists of pixels, while a vector graph consists of vector lines.

3. Bitmap can present more colors, while vector images have fewer colors.

4. Vector images are small in size, but consume computing resources. Bitmaps consume more memory resources, but less computing resources.

II. Concepts of BitmapData

The BitmapData class can be used to create transparent or opaque bitmap images that can be adjusted as needed in the document, and can be processed in various ways at runtime. You can set
The BitmapData object is a special array used to store bitmap pixel dot matrix information. If the bitmap size is 100*100, BitmapData is equal
Stored in a two-dimensional array of 100*100, corresponding to the color value of 10000 pixels.

III. Use of the BitmapData class

Import flash. display. BitmapData;

// Import BitmapData class

Var bm = new
BitmapData (width, height, transparent, fillcolor );

// Instantiate

IV. BitmapData constructor

Public BitmapData (width, height, [transparent], [fillColor])

Width (width): the width (pixels) of the bitmap data );

Height (height): the height (pixel) of the bitmap data );

[Transparent (transparency)]:
Whether the transparency of each pixel is supported;

[Fillcolor (add color)]:
Used to fill the bitmap image area. The default value is 0 xFFFFFFFF (white)

* [Brackets] indicate optional parameters

For example (create a 100*100 bitmap data ):

Import flash. display. BitmapData;

Var bm: BitmapData = new
BitmapData (100,100, false, 0xffff00)

5. BitmapData. draw () method

The Draw () method is simply interpreted as copying a pixel to a BitmapData object.

For example, in the main scenario, there is a video clip named "pic"

Import flash. display. BitmapData;

Var bm: BitmapData = new BitmapData (100,100 );

Bm. draw (pic );
// Bm copies the pic pixels

_ Root. createEmptyMovieClip ("mc", 10 );

Mc. _ x = mc. _ y = 150;

Mc. attachBitmap (bm,
1 );
// Use mc to load the bitmap data bm. The depth is 1.

* Note: the position of a bitmap in a video clip (pic:



When the draw () method is used to copy pixels, it is always obtained from the (0, 0) point of mc.
Therefore, pixels smaller than (0, 0) are not retrieved.



Place the bitmap in the video clip correctly (the registration point is on the top left (0, 0 ))

VI. Rectangle
Class
So we will introduce Rectangle.
Class because it is often used with the BitmapData class.

1. Role: the rectangle used in the BitmapData class to define the size and position of the bitmap image.


2. Use of the Rectangle class
Import
Flash. geom. Rectangle;

Public Rectangle (x, y, width, height)

X-the x coordinate in the upper left corner of the rectangle.

Y-y coordinate in the upper left corner of the rectangle.

Width-the width of the rectangle, in pixels.

Height-the height of the rectangle, in pixels.


For example (a 100*100 rectangle ):

Import flash. geom. Rectangle;

MyRect = new Rectangle (0, 0, 100,100 );

Well, with so many theoretical knowledge, we have all paved the way for our instances. Let's start working on it.


Example 1: magnifier effect [BitmapData.
CopyPixels ()]


Idea: 1. Click an image and copy a (100*80) pixel from the click;


   
2. Add the copied pixel (bm2) to mc and enlarge mc.
Step 1:


Put a bitmap in the home scene and save it as a video clip. The instance name is "pic" and put it on the stage;



Note: the registration point of this bitmap in the pic should be upper left (0, 0) to ensure correct display.

Step 2:
Add the AS code:

Import
Flash. display. BitmapData;

Import flash. geom. Rectangle;

Var bm1: BitmapData = new BitmapData (pic. _ width, pic. _ height );

Bm1.draw (pic );
// Create a bitmap data class that is the same as the image size, and copy all the pixels of the image.


Pic. onMouseDown =
Function (){

Var bm2: BitmapData = new BitmapData (100, 80, true, 0 );

Bm2.copyPixels (bm1, new Rectangle (_ xmouse,
_ Ymouse, 100, 80), new Point (0,
0 ));
// Copy a pixel from bm1 to bm2. The starting point of the pixel is the place where the mouse clicks, and the size is 100*80.


_ Root. createEmptyMovieClip ("mc", 10 );

Mc. attachBitmap (bm2,
1 );
// Display bitmap in bm2

Mc. _ x = _ xmouse;

Mc. _ y = _ ymouse;

Mc. _ xscale =
Mc. _ yscale = 150;
// Enlarge mc

};
_ Root. onMouseUp = function ()
{

Mc. removeMovieClip ();

};


Example 2: scroll graph effect [BitmapData.
CopyPixels ()]


Train of Thought: 1. Vertically split the image into num and retrieve pixels for each;

   
2. Create num video clips to store each pixel;

   
3. Set the X coordinates of each video clip. The Y coordinate is higher than the Y coordinate;

   
4. Combine the Tween class to make every entry fall from the sky.
Step 1:



Put a bitmap in the home scene and save it as a video clip. The instance name is "pic" and put it on the stage;



Note: the registration point of this bitmap in the pic should be upper left (0, 0) to ensure correct display.

Step 2:

Add the AS code:

Import
Flash. display. BitmapData;

Import flash. geom. Rectangle;

Import mx. transitions. Tween;

Import mx. transitions. easing .*;

Var num = 80;
// Divide the image into 80 parts
Var pW =
Pic. _ width/num;
// Determine the width of each part
Var
PH =
Pic. _ height;
// The height remains unchanged because it is cut into vertical bars.
Var
Bm1: BitmapData = new BitmapData (pic. _ width, pic. _ height );

Bm1.draw (pic );

Pic. _ visible = false;
For (I = 0; I

Var bm2: BitmapData = new BitmapData (pW,
PH );

Bm2.copyPixels (bm1, new
Rectangle (I * pW, 0, pW, pH), new Point (0,
0 ));
// Use the I variable * to determine the position of each pixel.

Var
P: MovieClip = _ root. createEmptyMovieClip ("mc" + I, I );

P. attachBitmap (bm2,
This. getNextHighestDepth ());

P. _ x =
I * pW;
// Arrange the X coordinates
P. _ y
=
-I * pH/5;
// Place the Y coordinate on the stage. One part is higher than the other.

New Tween (p,
"_ Y", Bounce. easeOut, p. _ y, 0, (I/10 + 1 ),
True );
// ------------------ Try to replace the code to see the effect -------------------


// New Tween (p, "_ y", Back. easeInOut, p. _ y, 0,
(I/10 + 1), true );

// New Tween (p, "_ y", Strong. easeIn, p. _ y, 0,
(I/10 + 1), true );

// New Tween (p, "_ y", Elastic. easeOut, p. _ y, 0,
(I/10 + 1), true)

}


Example 3: bitmap filling [BitmapData.
BeginBitmapFill ()]


Ideas:
1. Use loadBitmap ("id") to load bitmap. Note: This is a static method;
     
2. Create a MC, plot a rectangle of the same size as the stage, and fill it in.


Step 1:
   

   
Import a bitmap at will, right-click the bitmap in the library-> link-> the identifier is "pic"

Step 2:

Add the AS code:

Import
Flash. display. BitmapData;

Var bm: BitmapData = BitmapData. loadBitmap ("pic ");
// Draw the painting area based on the screen size to add the beginBitmapFill

_ Root. createEmptyMovieClip ("MC ",
10 );

With (MC ){

BeginBitmapFill (bm );
MoveTo (0,
0 );

LineTo (Stage. width, 0 );

LineTo (Stage. width, Stage. height );

LineTo (0, Stage. height );

LineTo (0, 0 );

EndFill ();

}


Example 4: bitmap slicing [BitmapData.
BeginBitmapFill ()]


Ideas:
1. Click on the source image to draw a circle and fill the bitmap in the circle;

2. Click on the slice and drag it.


Step 1:


Put a bitmap in the home scene and save it as a video clip. The instance name is "pic" and put it on the stage;



Note: the registration point of this bitmap in the pic should be upper left (0, 0) to ensure correct display.

Step 2:
Add the AS code:

Import
Flash. display. BitmapData;

Var bm: BitmapData = new BitmapData (pic. _ width, pic. _ height );

Bm. draw (pic );

Var draw: Boolean = false;
Pic. onPress = function (){

If (mc. hitTest (_ xmouse, _ ymouse, true )){

Mc. startDrag ();
// If you move the mouse over mc, start dragging it.

} Else {

Draw = true;

Mc =
_ Root. createEmptyMovieClip ("mc", 1 );
Mc. lineStyle (2,
0xFF0000 );

Mc. beginBitmapFill (bm );

Mc. moveTo (_ xmouse-this. _ x,
_ Ymouse-this. _ y );
// Move the start point here

}

};
Pic. onMouseMove = function (){

If (draw ){

Mc. lineTo (_ xmouse-this. _ x,
_ Ymouse-this. _ y );
// If the draw status is true, move the mouse to draw.

}

};
Pic. onMouseUp = function (){

If (draw ){

Draw = false;

Mc. endFill ();
// Fill end

} Else {

Mc. stopDrag ();

}

};

There are still many applications of the BitmapData class. I will introduce them in the future.
Finally, share some related information on the network:
(Flash ):

Flash 8 BitmapData applications

Flash8 tiled webpage background

Webstudio ):

Flash8 BitmapData