网管联盟 | 网管论坛 | 网管u家 | 网管博客 | 网管软件 | 网管求职 | 小游戏 | 网管搜索 | 网管原创 | 网管聚合 | 网管读摘 | 网管焦点 | 世界素材 | 会员投稿 | 会员中心 
中国网管联盟
Windows Linux Cisco 网络技术 数据库 黑客攻防 DotNet Java PHP 认证 新闻资讯 服务器 存储资讯 网络设备 网管学堂 技术专题 焦点 网吧频道
 当前位置: > bitsCN.com > 网管学堂 > 网页设计 > Flash > 制作实例 > Flash制作神奇的互动橡皮刷实例  

Flash制作神奇的互动橡皮刷实例

2007-11-27  作者:bitsCN整理  来源:中国网管联盟  点评 投稿 收藏

 以前用Flash做橡皮刷的时候通常都是通过绘制底图实现的,最近在发现其实还有一种更好的实现方法就是用bitmapdata的alpha通道。

  只要在一张图片上用draw画一个透明度为零的图片,就可以实现在draw的区域图片透明了。

  完成效果如下:

网管网www.bitscn.com


  点击选择右边的橡皮刷或者画笔图标,再用鼠标在画面上拖动,看看会出现什么情况?

网管论坛bbs_bitsCN_com

  AS代码如下:


//导入所需要的类
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
//初始点(0,0)
var base_point:Point = new Point(0, 0);
//初始区域(0,0,25,25)
var base_rectangle:Rectangle = new Rectangle(0, 0, 25, 25);
//导入库中图片
var bit1:BitmapData = BitmapData.loadBitmap("img1");
//定义org_bit:BitmapData用于恢复图片
var org_bit:BitmapData = new BitmapData(mc._width, bit1.height, true, 0);
org_bit.draw(bit1);
//draw_bit拷贝org_bit用于涂鸦操作
var draw_bit:BitmapData = org_bit.clone();
//导入到舞台中
_root.createEmptyMovieClip("draw_mc", 1);
draw_mc.attachBitmap(draw_bit, 1);
//定义橡皮刷erase_bit和笔刷redraw_bit argb为0(透明)

网管u家u.bitsCN.com


var erase_bit:BitmapData = new BitmapData(mc1._width, mc1._height, true, 0);
var redraw_bit:BitmapData = erase_bit.clone();
//橡皮刷erase_bit填充为白色,这里注意a必须不为0 rbg为FFFFFF
erase_bit.fillRect(erase_bit.rectangle, 0xFFFFFFFF);
//定义橡皮刷erase_bit和笔刷redraw_bit形状 注意mc1必须为黑色 你也可以尝试用别的颜色看看效果慢慢体会吧
erase_bit.draw(mc1);
redraw_bit.draw(mc1);
//交换erase_bit r通道和a通道数值 所以a通道数值为00
erase_bit.copyChannel(erase_bit, erase_bit.rectangle, new Point(0, 0), 1, 8);
//保存当前使用的工具
var tools:String;
//点击笔刷工具
mc_bursh.onRelease = function()
{
        this.gotoAndStop(2);
        mc_earse.gotoAndStop(1);
        tools = "bursh";
};
//点击橡皮刷工具
中国网管论坛bbs.bitsCN.com

mc_earse.onRelease = function()
{
        this.gotoAndStop(2);
        mc_bursh.gotoAndStop(1);
        tools = "easre";
};
//在draw_bit上涂鸦
draw_mc.onPress = function()
{
        trace(tools);
        if (tools == "bursh")
        {
                this.onMouseMove = bursh_pic;
        }
        if (tools == "easre")
        {
                this.onMouseMove = earse_pic; 网管u家u.bitsCN.com
        }
};
//停止涂鸦
draw_mc.onRelease = function()
{
        delete this.onMouseMove;
};
//橡皮刷工具
function earse_pic()
{
        var now_rect:Rectangle = new Rectangle(_xmouse, _ymouse, _xmouse+base_rectangle.width, _ymouse+base_rectangle.height);
        trace(now_rect);
        //在draw_bit上使用copyPixels alpha为false 透明区域透明 不透明区域保持原色
        draw_bit.copyPixels(draw_bit, now_rect, new Point(_xmouse, _ymouse), erase_bit, new Point(0, 0), false);
        updateAfterEvent();
}
//笔刷工具
function bursh_pic()
{
        var now_rect:Rectangle = new Rectangle(_xmouse, _ymouse, _xmouse+base_rectangle.width, _ymouse+base_rectangle.height);

网管u家u.bitscn@com


        trace(now_rect);
        //在org_bit上使用copyPixels alpha为true 则笔刷工具只有不透明的地方起作用
        draw_bit.copyPixels(org_bit, now_rect, new Point(_xmouse, _ymouse), redraw_bit, new Point(0, 0), true);
        updateAfterEvent();
}
//移动背景图观察效果
mc.onPress = function()
{
        this.startDrag();
};
mc.onRelease = function()
{
        this.stopDrag();
};

TAGs
 上一篇:在Flash CS3中制作Fla形式的组件   下一篇:用Flash引导线制作爱心图案动画
Flash制作神奇的互动橡皮刷实例 评论:
loading.. 评论加载中…
评论:请自觉遵守互联网相关政策法规,评论不得超过250字。

验证码: 注册用户
本类热门排行:
最新推荐文章:
网管论坛交流: