仿 actionscript 语法编写 HTML5 系列开发：图片效果预览与代码解析

说起图片和粒子效果，那可真是个大话题呀。以前我看到别人做的那些炫酷网页特效，每次都会被吸引住。现在，我也开始学着做这些东西，真的很有意思！今天，我就跟大家分享一下我的经验，让我们一起来体验一下图片处理和粒子效果带来的乐趣。

图片处理的基础

先说一下，美图无非就是换个新装，让照片更有味道。比如调亮、调暗，甚至变色，都能让图片大变样。当然，这不只是为了好看，有时为了让图片更好地表达意思，也得稍微改动一下。

学到点东西后，咱们就来试试高级的，比如模糊效果这招。你可能不知道，要是把背景弄模糊些，那图片里的主角就能更抢眼，这种方法在拍照时挺普通的，但是用于网页设计也是很好用的！对于用户来说，他们更容易抓住重点。

粒子效果的魔法

咱来聊聊粒子效果！这个超炫的玩意儿就是让无数小点在屏幕上跳动。这些小点可以是任意形状和颜色，组合起来就能产生各种神奇的效果。

比如，你能让这些小点点模拟下雨的感觉，慢慢地从屏幕顶上落下来。或者，你还能想象这样一幅画面——它们就像美丽的火花一样四处飞溅，碰在一起就变得更加闪亮了。总而言之，只要你有想象力，这些小小的粒子还能模仿各种大自然的现象，甚至是那些我们平时见不到的奇妙场景！

Lufylegend.js引擎的奥秘

要说起这个事儿，就得说说Lufylegend.js引擎了。别看它名字绕口，实际上它可是个神奇的粒子特效工具。把那些复杂又难懂的东西都搞定了，让我们这些小白也能做出炫酷的粒子特效。可惜的是，新版本改动了一些代码和属性，给咱们带来了点儿小困扰。

放心，跟着引擎指示慢慢摸索，就能做出那些炫酷的特效了。记住，每个好作品都离不开反复试错与调整！所以做粒子特效可得有耐心和细致呀。

实战演练：从零到英雄

咱们把理论学得差不多，现在该轮到实际操作！这不就在打游戏？刚开始只是个小菜鸟，得慢慢升级，最后才能变成真正的高手！这个过程中肯定会遇到各种难题，比如怎么让粒子动起来更自然，还有怎么让图片和粒子效果搭配得天衣无缝。

每次试错就当学新东西，别怕失败，那可是接近成功的门槛。慢慢地，你就能解决更多问题，做出更棒的成果！

技术的边界与创意的无限

这就像咱们经常看到的那样，技术的互补总是越来越宽广，但我们大脑里的创意却没有极限。只要技术上有突破，那些之前看起来遥不可及的事情，其实都变得触手可及。所以，咱们要做的是挖掘这些可能性，用我们无穷无尽的创意，挑战并拓展技术的界限。

这个问题不仅涉及到专业技能，也牵涉到审美观念。我们可不只是面对着代码敲打键盘这么简单，其实是在创造美感！每一次点击，每一个画面跳动，都像是我们在和全世界对话交流。

社区的力量：共享与学习

社区参与很重要！大家可以互相发作品，学新招，讨论问题，一起进步。这就是互帮互助，共同成长。每次遇到麻烦，我就上社区找答案，总能找到办法。

  
  
  
  
  
  
  
loading......
  
   
  
init(40,"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;  
    //加入一个LSprite对象  
    backLayer = new LSprite();  
    addChild(backLayer);  
    //加入一个LBitmap对象来显示一张大图片，将图片加载到backLayer对象上  
    mainBitmap = new LBitmap(new LBitmapData(imglist["img"]));  
    backLayer.addChild(mainBitmap);  
    //将LBitmap对象初始的高度保存起来  
    mainBitmapHeight = mainBitmap.getHeight();  
    //给LSprite对象加载一个贞事件，即时间轴  
    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
}  
function onframe(){  
    var bitmapdata;  
    var bitmap;  
    var addY,addX;  
  
    if(mainBitmap){  
        //通过LBitmapData对象的setProperties函数，来修改LBitmapData对象显示图片的范围，每运行一次，显示范围在y轴方向上的起始位置向下移动addY个单位  
        addY = 3;  
        mainBitmap.y += addY;  
        if(mainBitmap.y >= mainBitmapHeight){  
            addY += mainBitmapHeight - mainBitmap.y;  
            mainBitmap.y = mainBitmapHeight;  
            //当LBitmapData对象显示图片的范围变为0之后，将其从backLayer上移除  
            backLayer.removeChild(mainBitmap);  
        }else{  
            mainBitmap.bitmapData.setProperties(0,mainBitmap.y,mainBitmap.getWidth(),(mainBitmapHeight - mainBitmap.y));  
        }  
        //下面是将图片一行一行的分解，每运行一次分解一行  
        var arr = [];  
        for(i=0;i mainBitmap.getWidth()){  
                addX = mainBitmap.getWidth() - i;  
            }  
            //通过设定LBitmapData对象的显示范围，来得到分解后的小图片，并且将分解后的小图片压入到arr数组  
            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;  
        //将分解后的一行小图片压入windList数组  
        windList.push(arr);  
    }  
    windrun();  
}  
function windrun(){  
    var i,j,flag,ml=1;  
    //循环windList数组中的每一张小图片，随机向左上右等方向进行移动  
    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  LGlobal.width || windList[i][j].y > LGlobal.height){  
                backLayer.removeChild(windList[i][j]);  
                windList[i].splice(j,1);  
                j--;  
            }  
        }  
    }  
}  
   
  

大胆分享你的作品，尽管它们可能不怎么样。不过每次分享就是一次学习。最关键的是咱这个社群离不开大家的互动和交流，这样才能越来越有趣。

未来的展望：技术的飞跃与艺术的发展

最后，让我们聊聊未来。科技在飞速发展，所以不难想到，图片处理&粒子效果肯定会变得更炫酷！工具越来越牛，咱的大脑也能畅游无阻。

以后，咱们网站可能就变成了那种互动的艺术品！用户不只是能看，还能玩儿，体验超棒！这不光是科技的成功，也是艺术的突破~

总结与互动

好，今天的聊天就先告一段落。希望通过这个话题，大家能更深地理解图片处理和粒子效果这块儿知识。那讲完了，我想知道你们有人试过做粒子效果吗？如果有的话，都遇到过什么困难？快来评论区分享下你的经历，咱们一起学习进步！别忘了给这篇文章点个赞，分享出去，让更多的朋友参与进来哈。