Flash在线签名小程序，可回放，动态导出gif图片

需求：

公司为了使得和客户领导签字的时候记录下来，签字过程，可以以后动态回放演示，最好是gif图片，在网页上也容易展示，文件也小。

解决过程：

    始我们去寻找各种app，最终也没有找到合适的，后来我在flash8上看到有个在线的手绘板，很适合我们的需求，但是我尝试了很多次

绘画完成后，导出的是swf文件，我想从这个swf文件中抽出图片，最终发现这个导出的swf里面根本不存在我绘画的记录过程。

网上确实有手绘板的代码，但是没有动态回放的功能及到处gif图片的功能，还是不满足我们需求，

     索性自己写了一个flash小程序实现手绘画板及动态回放功能。我把具体的思路及详细代码都贴出来，

希望能给有用到的人带来方便。

整体思路：

1. 编写一个flash程序，实现基本手绘板功能
2. 在基础上实现回放功能（这里是难点）
3. 创建一个asp.ne站点，写个一般处理程序GetSignImg.ashx，用于存储flash发布时候动态创建的jpg图片
4. 当swf程序发布后点击下载的时候，后台程序将所有的jpg图片拼成gif图片导出(使用了Gif.Components.dll)。

截图：

具体过程

 一、实现手绘板功能，在网上能找到很多代码，这块也简单。

 二、在基础上实现回放功能，我重点讲下这里的实现，起初我是这么判断的，当鼠标MOUSE_DOWN时候开始记录画笔当前位置信息存入一个数组中（包含X，Y坐标值），

     鼠标MOUSE_UP的时候，这个数组存储结束，开启一个新的数组用于点的信息。当回放的时候，将这些所有数组中的点的信息重新绘制一遍，包括flash8.net的实现都是这么干的

     如果一笔绘制很长，当它回放的时候一下子全显示出来，没有一个绘制的过程。后来领导说这样不行，因为领导签字的时候很多都是一笔走完，最后我想了一个解决的办法，

     就是在回放的时候设置一个阀值，比如50个点，够50个点就回放一次，这样一来，即使领导签字是一笔，回放的时候效果也会很好。

    下面是所有ActinScipt源码

   

import flash.ui.Mouse;
import flash.display.BitmapData;
import com.adobe.images.JPGEncoder;
import flash.events.MouseEvent;

var linesize:uint = 2;//画笔大小
var isDown:Boolean = false;
var oldX:Number;
var oldY:Number;
var arrayBig:Array=new Array();//存放笔画的数组，外层数组
var num:uint = 0;//当前数组个数
var playNum:uint = 0;//当前回放的数字(代表当前回放到第几个数组了)
var intervalDuration:Number = 500;// 回放延时时间间隔
var relaseDuration:Number = 1000;//发布时时间间隔
var intervalId:uint;//回放循环的ID 
var relaseId:uint;//发布的ID
var url = "http://www.wispdawn.com/";//暂用我的网站做服务器
var serviceFile = "GetSignImg.ashx";//服务文件

mc_canvas.addEventListener(MouseEvent.MOUSE_DOWN ,onDown);
mc_canvas.addEventListener(MouseEvent.MOUSE_UP ,onUp);
mc_canvas.addEventListener(MouseEvent.MOUSE_MOVE ,onMove);
mc_canvas.addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
mc_canvas.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);



function onDown(event:MouseEvent):void
{
    arrayBig[num]=new Array();//这里设置为数组
    isDown = true;
    oldX = mouseX;
    oldY = mouseY;
}
function onMove(event:MouseEvent):void
{
    if (isDown)
    {
        mc_canvas.graphics.lineStyle(linesize);
        mc_canvas.graphics.moveTo(oldX,oldY);
        mc_canvas.graphics.lineTo(mouseX,mouseY);
        oldX = mouseX;
        oldY = mouseY;
        arrayBig[num].push([oldX,oldY]);
        if (arrayBig[num].length > 80)
        {
            //isDown = false;
            trace(num);
            num++;//数组个数+1
            arrayBig[num]=new Array();
            arrayBig[num].push([oldX,oldY]);
        }
    }
}

function onUp(event:MouseEvent):void
{
    isDown = false;
    trace(num);
    num++;//数组个数+1
}

function onMouseOver(event:MouseEvent):void
{
    mc_canvas.addEventListener(Event.ENTER_FRAME, onEnter);
}


function onMouseOut(event:MouseEvent):void
{
    mc_canvas.removeEventListener(Event.ENTER_FRAME, onEnter);
    Mouse.show();
    mc_pen.visible = false;
}

//画布监听事件
function onEnter(event:Event):void
{
    Mouse.hide();
    mc_pen.visible = true;
    mc_pen.x = mouseX + 22;
    mc_pen.y = mouseY + 22;
}



//清空
btn_clear.addEventListener(MouseEvent.CLICK,onClear);
function onClear(event:MouseEvent):void
{
    arrayBig = [];
    playNum = 0;
    num = 0;
    mc_canvas.graphics.clear();
}
//保存;
btn_save.addEventListener(MouseEvent.CLICK,onSave);
function onSave(event:MouseEvent):void
{
    var imager:BitmapData = new BitmapData(mc_canvas.width,mc_canvas.height);
    imager.draw(mc_canvas);
    var jpg:JPGEncoder = new JPGEncoder(100);
    var file:FileReference = new FileReference();
    file.save(jpg.encode(imager),"sign.jpg");

}

//回放按钮
btn_replay.addEventListener(MouseEvent.CLICK,onReplay);
function onReplay(event:MouseEvent):void
{
    if (arrayBig.length > 0)
    {
        mc_canvas.graphics.clear();
        //清除画面;
        playNum = 0;//初始为0
        intervalId = setInterval(onReplayDelay,intervalDuration);
    }
}

//用于设置循环的回放
function onReplayDelay():void
{
    //当前笔画
    var arr:Array = arrayBig[playNum];
    //当前笔画下面所有的点
    for (var i:uint=0; i<arr.length-1; i++)
    {
        var curPoint = arr[i];
        var nexPoint = arr[i + 1];
        mc_canvas.graphics.lineStyle(linesize);
        mc_canvas.graphics.moveTo(curPoint[0],curPoint[1]);
        mc_canvas.graphics.lineTo(nexPoint[0],nexPoint[1]);
    }

    playNum++;
    if (playNum==num)
    {
        clearInterval(intervalId);
    }
}

//上传图片
function UpImg(seq:uint):void
{
    var imager:BitmapData = new BitmapData(mc_canvas.width,mc_canvas.height);
    imager.draw(mc_canvas);
    var jpg:JPGEncoder = new JPGEncoder(100);
    var bytes:ByteArray = jpg.encode(imager);

    var signName:String = mc_mask.txt_name.text;
    var req:URLRequest = new URLRequest(url+serviceFile+"?name="+signName+"&seq="+seq+"&total="+arrayBig.length);
    req.data = bytes;
    req.method = URLRequestMethod.POST;
    req.contentType = "application/octet-stream";

    var loader:URLLoader = new URLLoader();
    loader.dataFormat = URLLoaderDataFormat.BINARY;
    loader.load(req);
}
//loader.addEventListener(Event.COMPLETE, completeHandler);

//function completeHandler(evt:Event):void
//{
//trace(evt.target.data);
//}

//发布
btn_release.addEventListener(MouseEvent.CLICK,onReleas);
function onReleas(event:MouseEvent):void
{
    if (arrayBig.length > 0)
    {
        mc_mask.x = mc_mask.y = 0;
        mc_mask.mc_mask_bg.alpha = 0.8;
        mc_mask.btn_complete.visible = false;//隐藏完成
        mc_mask.btn_down.visible = false;//隐藏下载
    }
}
//真正发布事件执行
function Release():void
{
    //当前笔画
    var arr:Array = arrayBig[playNum];
    //当前笔画下面所有的点
    for (var i:uint=0; i<arr.length-1; i++)
    {
        var curPoint = arr[i];
        var nexPoint = arr[i + 1];
        mc_canvas.graphics.lineStyle(linesize);
        mc_canvas.graphics.moveTo(curPoint[0],curPoint[1]);
        mc_canvas.graphics.lineTo(nexPoint[0],nexPoint[1]);
    }
    //上传图片;;
    UpImg(playNum);
    playNum++;
    if (playNum==num)
    {
        clearInterval(relaseId);
        AfterRelease();
    }
}
//取消发布
mc_mask.btn_cancel.addEventListener(MouseEvent.CLICK,onCancel);
function onCancel(event:MouseEvent):void
{
    mc_mask.x = 10000;
    mc_mask.mc_mask_bg.alpha = 0;
}
//真正发布按钮
mc_mask.btn_release.addEventListener(MouseEvent.CLICK,onTrueRelease);
function onTrueRelease(event:MouseEvent):void
{
    var name1 = mc_mask.txt_name.text;
    if (name1!="")
    {
        BeginRelease();
        mc_canvas.graphics.clear();
        playNum = 0;
        relaseId = setInterval(Release,relaseDuration);
    }
    else
    {
        mc_mask.txt_state.text = "请输入姓名";
    }
}
//发布前设置
function BeginRelease():void
{
    mc_mask.btn_release.visible = false;
    mc_mask.btn_cancel.visible = false;
    mc_mask.txt_name.visible = false;
    mc_mask.txt_nameTile.visible = false;
    mc_mask.txt_state.text = "正在发布...";
}
//发布后设置
function AfterRelease():void
{
    mc_mask.btn_complete.visible = true;
    mc_mask.btn_down.visible = true;
    mc_mask.btn_complete.addEventListener(MouseEvent.CLICK,onComplete);
    mc_mask.txt_state.text = "发布完成";

}
//发布完成
function onComplete(event:MouseEvent):void
{
    mc_mask.x = 10000;
    mc_mask.mc_mask_bg.alpha = 0;
    mc_mask.btn_down.visible = true;
    mc_mask.btn_release.visible = true;
    mc_mask.btn_cancel.visible = true;
    mc_mask.txt_name.visible = true;
    mc_mask.txt_nameTile.visible = true;
    mc_mask.txt_state.text = "";
    mc_mask.txt_name.text = "";
}

//下载gif
mc_mask.btn_down.addEventListener(MouseEvent.CLICK,onDownGif);
function onDownGif(event:MouseEvent):void
{
    var today:Date =new Date();
    var todayStr = getDateFormat(today);//获取当天日期例如 20131130
    var signName:String = mc_mask.txt_name.text;

    var gifUrl:URLRequest = new URLRequest(url+"/Img/"+signName+"_"+todayStr+"/"+signName+".gif");
    var fileRef:FileReference=new FileReference();
    //fileRef.addEventListener(ProgressEvent.PROGRESS,onProgress);
    fileRef.download(gifUrl,"sign.gif");
}
function onProgress(event:ProgressEvent):void
{
    var loaded:uint = event.bytesLoaded;
    var total:uint = event.bytesTotal;
}

//获取当天日期
function getDateFormat( date:Date):String
{
    var dYear:String = String(date.getFullYear());
    var dMonth:String = String((date.getMonth() + 1 < 10) ? "0" : "") + (date.getMonth() + 1);
    var dDate:String = String(date.getDate() < 10 ? "0":"") + date.getDate();
    return dYear+dMonth+dDate;
}

 三、创建一个asp.ne站点，写个一般处理程序GetSignImg.ashx

       这里就是用于的获取flash传递过来的图片，获取后导出jpg图片序列，然后将这些序列图片用程序生成一个gif图片存放在目录下，当flash点击到处gif图片时候，执行下载

       源文件如下

      

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using Gif.Components;

namespace Web
{
    /// <summary>
    /// GetSignImg1 的摘要说明
    /// </summary>
    public class GetSignImg1 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string name = context.Request["name"];
            int seq = Convert.ToInt32(context.Request["seq"]);
            int total =Convert.ToInt32(context.Request["total"]);
            int length = context.Request.TotalBytes;
            byte[] buffer = context.Request.BinaryRead(length);
            string newPath=HttpContext.Current.Server.MapPath("Img/" + name + "_"+DateTime.Now.ToString("yyyyMMdd"));
            if (!Directory.Exists(newPath))
            {
                Directory.CreateDirectory(newPath);
            };
            string path = string.Format("{0}/{1}.jpg", newPath, seq);
            FileStream fs = new FileStream(path, FileMode.Create, FileAccess.Write);
            BinaryWriter bw = new BinaryWriter(fs);
            bw.Write(buffer);
            bw.Close();
            fs.Close();

            //下载gif
            if (seq + 1 == total)
            {
                //生成gif图片               
                List<string> fileList = new List<string>();
                for (int i = 0; i < total; i++)
                {
                    fileList.Add(newPath + "/" + i + ".jpg");
                }
                string[] imageFilePaths = fileList.ToArray();
                string outputFilePath = newPath + "/" + name + ".gif";
                AnimatedGifEncoder e = new AnimatedGifEncoder();
                e.Start(outputFilePath);
                //图片转换时间
                e.SetDelay(50);
                //1表示只动一次，0：表示循环，n：表示循环n次
                e.SetRepeat(1);
                for (int i = 0, count = imageFilePaths.Length; i < count; i++)
                {
                    e.AddFrame(System.Drawing.Image.FromFile(imageFilePaths[i]));
                }
                e.Finish();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 四、所有程序打包下载 Download