Thinking and method of forming water in flash

Source: Internet
Author: User
Tags empty range

Many friends have a unique effect on the water, the formation of water is actually because the light in the wave surface refraction, so that the place where the waves appear to be offset, here is a good tutorial on How to achieve wave and refraction, but it may be difficult, because there are many mathematical, physical and computer graphics knowledge.

And the above tutorial really want to implement in the flash inside, it is also impossible, we all know the efficiency of the implementation of Flash, ^^, but flash8 inside the support of filters and bitmaps, so you can put aside mathematical modeling, directly using filters to simulate.

Use Flash to realize the effect of water, a lot of methods, I provide a relatively simple way and ideas, because I am lazy, both the text and graphics are free, code + comments, we look carefully, do not understand the place to discuss together, I am also a new contact Flash8, there are wrong places, master a lot point out, OK. Go

Import Flash.display.BitmapData;
Import Flash.geom.Point;
Import Flash.geom.Rectangle;
Import Flash.filters.DisplacementMapFilter;
//
Load bitmap elements
var image:bitmapdata = Bitmapdata.loadbitmap ("image");
Gets the width and height of the bitmap element
var w:number = image.width;
var h:number = image.height;
Set origin as (0,0)
var origin:point = new Point ();
Set range is a range from (0,0) starting to (W,H)
var bound:rectangle = new Rectangle (0,0,w,h);
The above parameters are used in the parameters of some effect actions, such as filters, etc.
The aim is to fix the range of effects.
// ------------------------------------------------
Create an empty diagram element to simulate the ' water '
var water:bitmapdata = new BitmapData (w,h);
Creates an empty MC, which is used to load bitmap elements on the screen
var output:movieclip = _root.createemptymovieclip ("Output", 0);
Set the offset of MC, why?
output._x = output._y=-50;
Load Bitmap element image
Output.attachbitmap (image, 0);
Above is the creation of some necessary bitmap elements and display bitmaps of the MC
// ------------------------------------------------------
This is for the test, the interested can enlarge the picture can be
See the look of ' water '
var display:movieclip = _root.createemptymovieclip ("display", 1);
Display.attachbitmap (water,0);
display._x = W;
// --------------------------------------------
Create a Displacementmapfilter
About this filter, you can actually pass a fixed formula
Let the pixel on a bitmap offset, this formula helps there, everybody look at help as much as possible
var dmf:displacementmapfilter = new Displacementmapfilter ();
The following is the setting that affects the bitmap that is defined above water
The starting point is the previously defined Origin origin
There are also some formulas used in the parameters (see more help, see Help more)
Dmf.mapbitmap = water;
Dmf.mappoint = origin;
Dmf.componentx = 1;
Dmf.componenty = 1;
Dmf.scalex = 45;
Dmf.scaley = 45;
Dmf.mode = "Color";
This is to save a path to the array, and so on for the MC to use
var myfilters:array = [DMF];
Some of the filters above, which are used to filter the data in the water bitmap elements to
Image bitmap element, so that the image produces the same feeling water, we also see that
The quality of the water directly affects the effect of the last image of the water
// ----------------------------------------------------
Some of the following parameters will be used
var rndseed:number = new Date (). GetTime ();
var offsets:point = new Point (0,0);
var speed:number = 1;
var inc:number = 5;
// ----------------------------------------------------
Onenterframe = function ()
{
Some of the following are the effects of acceleration movement, which can be used directly
Just move at a uniform speed.
inc = Speed;
if (inc > 12)
{
inc = 12;
Speed =-speed;
}
else if (inc < 5)
{
inc = 5;
Speed =-speed;
}
The speed above is the impact, x,y offset, in the end XY is where it, look down
Offsets.x + + Inc;
OFFSETS.Y + + Inc;
Here is the key to forming water, which is the Perlinnoise method inside BitmapData.
This method, in fact, is a similar to the "cloud" in Photoshop Filter (do not know is called the name-_-)
Some of the parameters inside, we look at the help, said very carefully.
The above offsets is to let this "cloud" Move up!
Water.perlinnoise (300,300,1, Rndseed, False, False, 1, true, offsets);
Finally, the output filter is finished.
Output.filters = myfilters;
Here, I haven't introduced why output has an offset
Actually, it was displacementmapfilter.
The reason is that after using this filter, the entire filtered bitmap element will be offset
The number of offsets is determined by the parameters within him, so it's roughly up to the offset.
So casually set a number, hehe
}

The following are effects and source files that may not look much like the water wave ~_~!... I think so, it's more like a flag floating. But in fact, the general idea is still clear.

It's mainly Displacementmapfilter and Perlinnosie methods.

The former allows a bitmap element to be offset so that it can simulate the refraction of the light in the wave surface.

The latter is a blank bitmap, creating a "cloud" of the lines to simulate the texture of water.

But to be completely realistic, or the tutorial on the Flash8, and then use the filters provided in the simulation of mathematical modeling, this is still more complex, here is a master to do ... HoHo, strong.

(You need to see the effect under Flash8 player)



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.