This paper is the official HTML5 training course for Brother Lian it educational institution, mainly introduces: writing html5--eighth, image processing + particle effect with the grammar of ActionScript
Eighth, image processing + particle effects
Using the syntax of ActionScript to write HTML5 series development to now, should be able to make something, the following first to study the various effects of the film
Preview various effects look
Effects and code see here, see the effect of the download support HTML5 browser
Http://fsanguo.comoj.com/html5/jstoas07/index.html
Added March 13, 2013
This series of articles is written early, and the methods summarized in this series are now encapsulated in the Lufylegend.js engine.
Download link for lufylegend.js engine http://lufylegend.com/lufylegend
Since the engine was encapsulated, some of the previous code was adjusted, some properties were deleted, and the following is the same particle effect I developed with the new engine
[HTML]View PlainCopy
- <! DOCTYPE HTML>
- <html>
- <head>
- <Meta charset="UTF-8">
- <title> Particle effects </title>
- </head>
- <body>
- <div id="mylegend">loading ... </div>
- <script type="Text/javascript" src="Http://lufylegend.com/js/lufylegend-1.6.1.min.js" ></script>
- <script type="Text/javascript">
- Init (max, "Mylegend", 300,300,main);
- var imgdata = [{name: ' img ', path: ' Http://lufylegend.com/images/face.jpg '}];
- var imglist;
- var mainbitmap,mainbitmapheight;
- var windlist = [];
- var Backlayer;
- function Main () {
- Lloadmanage.load (
- Imgdata,
- function (Progress) {},
- Loadover
- );
- }
- function Loadover (Result) {
- imglist = result;
- Add a Lsprite Object
- Backlayer = new Lsprite ();
- AddChild (Backlayer);
- Add a Lbitmap object to display a large picture and load the picture onto the Backlayer object
- Mainbitmap = new Lbitmap (New Lbitmapdata (imglist["img"));
- Backlayer.addchild (MAINBITMAP);
- Save the initial height of the Lbitmap object
- mainbitmapheight = mainbitmap.getheight ();
- Loads a Lsprite object, that is, the timeline
- Backlayer.addeventlistener (Levent.enter_frame,onframe);
- }
- function Onframe () {
- var bitmapdata;
- var bitmap;
- var addy,addx;
- if (Mainbitmap) {
- The SetProperties function of the Lbitmapdata object is modified to modify the range of the Lbitmapdata object to display the picture, each time it is run, the display range moves down addy units from the start position in the y-axis direction.
- AddY = 3;
- Mainbitmap.y + = AddY;
- if (mainbitmap.y >= mainbitmapheight) {
- AddY + = MAINBITMAPHEIGHT-MAINBITMAP.Y;
- mainbitmap.y = mainbitmapheight;
- Remove a Lbitmapdata object from Backlayer when it shows that the range of pictures has changed to 0
- Backlayer.removechild (MAINBITMAP);
- }else{
- MainBitmap.bitmapData.setProperties (0,mainbitmap.y,mainbitmap.getwidth (), (MAINBITMAPHEIGHT-MAINBITMAP.Y));
- }
- The following is the decomposition of a row of pictures, one row per run
- var arr = [];
- For (i=0;i<mainbitmap.getwidth (); i + = 3) {
- ADDX = 3;
- if (I+addx > Mainbitmap.getwidth ()) {
- ADDX = mainbitmap.getwidth ()-I;
- }
- By setting the display range of the Lbitmapdata object, the exploded small picture is obtained, and the exploded small image is pressed into the ARR array
- bitmapdata = new Lbitmapdata (imglist["img"],i,mainbitmap.y-addy,addx,addy);
- bitmap = new Lbitmap (BitmapData);
- bitmap.x = i;
- bitmap.y = Mainbitmap.y-addy;
- Backlayer.addchild (bitmap);
- Arr.push (bitmap);
- }
- if (mainbitmap.y >= mainbitmapheight)mainbitmap=null;
- Presses the exploded line of small pictures into the windlist array
- Windlist.push (arr);
- }
- Windrun ();
- }
- function Windrun () {
- var i,j,flag,ml=1;
- Loop windlist Each small picture in the array, randomly moving to the left, right, etc.
- For (i=0;i<windlist.length;i++) {
- if (Windlist[i]. length = = 0) {
- Windlist.splice (i,1);
- i--;
- Continue
- }
- For (j=0;j<windlist[i].length;j++) {
- if (Windlist[i][j]. i = = null) windlist[i][j]. i=1;
- flag = math.random ();
- if (flag < 0.3) {
- windlist[i][j].x + = ml*windlist[i][j].i;
- }else if (flag < 0.6) {
- windlist[i][j].x- = ml*windlist[i][j].i;
- }else{
- WINDLIST[I][J].Y- = ml*windlist[i][j].i;
- }
- Windlist[i][j].alpha- = 0.05;
- WINDLIST[I][J].I + = 2;
- if (Windlist[i][j].alpha <= 0 | | windlist[i][j].x > Lglobal.width | | windlist[i][j].y > Lglobal.height) {
- Backlayer.removechild (Windlist[i][j]);
- Windlist[i].splice (j,1);
- j--;
- }
- }
- }
- }
- </Script>
- </body>
- </html>
Test connection
Http://lufylegend.com/demo/astojs/8.html
Here is a friend to ask me the principle, this particle effect is actually a large picture from the top and down, a line of decomposition, and then the decomposition of the broken image, along the random direction to disperse, while reducing the transparency, when the transparency is reduced to 0, remove it.
The above code I added a simple comment, it should not be difficult to understand.
Write html5--eighth, image processing + particle effects using the syntax of ActionScript
