AS3视频照相截图（转载）

这是我去年做的一个小作品，现在我把他写成一个系列教程，给大家练练手。其中包含了截图的用法，时间事件，TileList组件的应用等

等，综合起来还算不错。

第一步：让舞台能够显示连接的视频，让你的光辉形象显示出来。
这一步很简单，你首先建立一个FLA文档后，按F11，让库面版显示出来，然后在面版的下部，右键-新建VIDEO，命名随意，完成后，把

这个视频从库拖到舞台上，由于初始大小为:160*120,你可以按照你的喜欢，设置为任何大小，我这里就设置为:320*240。并且命名此VIDEO的

实例名为：cameraVideo
接着在时间面版上，新建一个时间轴，并且命名为:action，按F9，开始写代码(后面的代码全都写在里面)。
//这是定义个新的相机视频，然后从当前的视频头取得内容。
var myCamera:Camera =Camera.getCamera();
//这个就比较简单了，把定义的相机视频绑定到放置的VIDEO上就可以了
cameraVideo.attachCamera(myCamera);
测试下，看看，是否你的光辉形象出现了。注意：在测试的时候，跳出的设置，你应该选择：允许
第二步：事情没那么简单，我们需要填坑。
ok，视频是出来了，但是事情还没那么简单，因为你需要考虑万一没装视频头怎么办？总需要来个提示吧。所以我们要把刚才的代码进

行完善，弄个辨别语句。
var myCamera:Camera=Camera.getCamera();
if (myCamera==null) {
//意思就是，未检测到视频头，然后该干嘛，当然你想干嘛就干嘛。
trace(“你还没安装视频头,或者视频头未连接“);
} else {
//这是检测成功了
cameraVideo.attachCamera(myCamera);
trace(“视频头检测成功“);
}
上面的测试是有一点小问题的，因为刚才已经测试成功过有视频头了，现在虽然拔掉视频头，但是他还是会显示连接正确，为啥呢，因为

刚才的连接数据他还是存在 了本地上。你可以关掉FLASH，然后再重新测试下看看。这个没关系，因为，一般而言在网页上这个错误倒不会出

现了。
第三步：换种做法。
其实，我写这部分，还是有原因的，因为如果按照刚才的从库里拉VIDEO，后面截图会有点小问题，为了方便讲解，再来另一种方法，首先

把舞台上的VIDEO删除掉，然后代码如下：

var cameraVideo:Video = new Video();
addChild(cameraVideo);
cameraVideo.width =320;
cameraVideo.height =240;

var myCamera:Camera=Camera.getCamera();
if (myCamera==null) {
//意思就是，未检测到视频头，然后该干嘛，当然你想干嘛就干嘛。
//trace(“你还没安装视频头,或者视频头未连接“);
} else {
//这是检测成功了
cameraVideo.attachCamera(myCamera);
//trace(“视频头检测成功“);
}

可以注意到，这里是用代码去直接召唤VIDEO了，这样更符合代码写作。

很简单吧，非常简单。第一部分算完成了，下一部分就是专门讲tileList这个组件，和截图。

下面让我们讲讲截图和TileList的应用。

拍照，拍照，当然要拍很多张，然后放在一起，让自己去挑一些好的，然后再保存到电脑上。
所以，我们需要想个办法，把当前的样子拍下来，这就是截图。

第一步：截图
那怎么截图呢？也很简单，用BitmapData就可以搞定。首先在舞台上加个Button，实例命名为：btn，作为截图触发按钮。代码如下：
var cameraVideo:Video = new Video();
addChild(cameraVideo);
cameraVideo.width =320;
cameraVideo.height =240;

var myCamera:Camera=Camera.getCamera();
if (myCamera==null) {
//trace(“你还没安装视频头,或者视频头未连接“);
} else {
cameraVideo.attachCamera(myCamera);
btn.addEventListener(MouseEvent.CLICK,beginSnap);
}
//main做为测试截图容器，只是测试用，下一步就不需要这个了。
var main:Sprite = new Sprite();
main.y=260;
addChild(main);

function beginSnap(event:MouseEvent):void {
//trace(cameraVideo.width);
var bitmapdata:BitmapData=new BitmapData(320,240);
bitmapdata.draw(cameraVideo);
var bitmap:Bitmap=new Bitmap(bitmapdata);
main.addChild(bitmap);
}

如果你测试成功的话，应该就是可以看到点击按钮后，截图自然会出现在下方，当然目前只是在测试，只是让你明白每一步的做法。

完成截图后，我们需要停下来想一下。想象一下：我们拍了很多照片，然后把拍的无论是好的坏的，都扔到一个篮子里，然后我们再从

里面挑选出好的，去打印成大照片。思路很清晰，那么我们需要做的，就是这个篮子问题。FLASH的魅力就是在这个篮子上的表现上，我们可以

把照片横着排，竖着排，甚至是：一会儿排成人字形，一会儿排成大字形。我想这就是FLASH的乐趣，当然，这里我只说其中一种，最工业化的

一种，直接放到FLASH自带的TileList组件上。

第二步：感受下TileList组件

如何使用TileList组件呢，其实帮助里说的很清楚，而且这里也非常详细的说明了使用方法，如果你愿意认真的看下，后面的教程就很

简单了。不过我这里还是放一个比较贴近的小教程，这样下一步，我就不用解释的那么费劲了。

新建一个FLA文件，然后在舞台上，随意画一个圆形，或者方形，然后选择按F8转化为实例，命名:mc，然后选择:Export for

Actionscript，在Class里也命名为:mc，这样就方便在代码里调用这个图。

好，接着从组件里把TileList组件拉到舞台，长度设置为400，其他暂时默认，命名为：lists。
开始在新的时间轴上加代码：

var i:uint;
for(i=0;i<10;i++){
var tempMc:Object= new Object();
tempMc.label = “PIC“+i;
tempMc.source = new mc();
lists.addItem(tempMc);
}

运行下看看，你所画的小图，有10张出现在这个组件上，而且有标签名字，别忘了Object我还可以加很多乱七八糟的自定义属性，比如

toolTip这种，意思就是移动到图片上自动出现提示标签，这个都是题外话，你感觉一下上面的代码，应该对titleList组件有点感觉了吧。

那么好，我们回到视频照相程序上，我们要做的就是把每次截图都放到这个LIST上，但是我们目前截图是320*240的，好象太大了吧，

不过你不要担心，放在LIST上的话，一切都会以LIST定义的高宽为主，意思就是：你想让截图以多大的大小放在tileList上，是要在tileList

组件上设置的。
那么怎么设置tileList呢，这个就简单了，点击下这个组件，然后按SHIFT+F7，就会出现组件检查器，随便你怎么设置。

第三步：组装
这步就是把说过的东西给组装起来，拍照，截图，把图放到tileList上。代码如下：

//只要加一句，然后修改beginSnap构造函数就可以
//先建立一个数组，用来放截图数据
var contents:Array = new Array();
function beginSnap(event:MouseEvent):void {
var bitmapdata:BitmapData=new BitmapData(320,240);
bitmapdata.draw(cameraVideo);
var bitmap:Bitmap=new Bitmap(bitmapdata);
addChild(bitmap);

contents.push(bitmap);
var i:uint;
for (i=0; i var tempObj:Object = new Object();
tempObj.source=contents;
tempObj.label=“image“+;
}
//lists就是tileList的实例名,我把里面的columnWidth设置为120;rowHeight设置为90
lists.addItemAt(tempObj,0);
}

运行下看看，基本没什么大的问题，当然那个标签比较麻烦，这个没关系，你要也好，不要也好，做法有很多。这只是基础。

到了这一步，基本上算是差不多了，在大体的框架上，就剩下预览与保存的做法了。

第一步：预览

在我们已经把视频，TileList组装完成后，就需要实现一个功能，就是我们需要重新预览下以前拍的照片，那么由此所引申出来的动作

必然就是我们需要点击在TileList里的小图，这一步很简单，我们先来玩一个TileList点击的小代码，后面就套一下，就很容易了。
按照第二部分，认识TileList刚开始的那段小代码，新的代码如下：
import fl.events.ListEvent;
var i:uint;
for(i=0;i<10;i++){
var tempMc:Object= new Object();
tempMc.label = “PIC“+i;
tempMc.source = new mc();
lists.addItem(tempMc);

}
lists.addEventListener(ListEvent.ITEM_CLICK,thumbClick);
function thumbClick(event:ListEvent):void{
trace(event.item.label);
}

从上面简单的代码，就能知道在TileList里单击其中的图标，该怎么去实现。

好，那么重新我们回到原来的例子上，我们已经知道TileList点击怎么实现，那么我们需要在舞台上放一个空的实例，用于加载点击图

标后，传输过来的具体内容，我们这里只需要图，别的不需要。当然你可以同样传送其他信息。

我的打算是新的预览实例放在X轴为340，Y轴为0，同时在舞台上再放一个BUTTON，实例名:down_btn，用于保存事件的触发
预览的做法也是跟截图的做法一样，用Bitmap,和BitmapData，在前面的教程代码上继续加代码：
import fl.events.ListEvent;
var review:Sprite;
function thumbClick(event:ListEvent):void {
var bmd:BitmapData=new BitmapData(320,240);
bmd.draw(event.item.source);
var bit:Bitmap=new Bitmap(bmd);
review = new Sprite();
addChild(review);
review.x = 340;
review.addChild(bit);
//用于下载当前的图片
//down_btn.addEventListener(MouseEvent.CLICK,downJpg);
}

这样，这部分的功能算是完成了，也不难。下一部分的内容在于把当前的图保存到本地上，这个有很多方法，我说的是其中一种，但是

大体的思路都是一样的。我先说下我的思路。
还记得我以前写的Flash简易聊天室教程里的三板斧教程吗？这个主要讲的是FLASH里的数据传输到外部服务器的，这里我要保存图片，

那么也是把当前的图片数据传输出去，那么我们就需要CORDLIB里的一个类: JPGEncoder类，把当前的图片数据转化成ByteArray，传输出去，

如果你像我用的是PHP的话，就可以用PHP把ByteArray写到本地上，变回原来的图片。

第二步：保存
首先我们要去http://code.google.com/p/as3corelib/把JPGEncoder类下下来。

然后下一步就是继续完成down_btn按钮触发的下载事件构造函数：downJpg

import flash.utils.ByteArray;
import com.adobe.encoding.JPEGEncoder;
function downJpg(event:MouseEvent):void {
//?name=@@@@@@就是设置下载下来的图片名字，这个可以根据你自己想要的来修改。
var url:String=“http://localhost/downjpg.php?name=testJpg.jpg“;

var bmd:BitmapData = new BitmapData(320,240);
bmd.draw(review);
//下载截图质量设置
var jpgEncoder:JPEGEncoder=new JPEGEncoder(100);
var myByteArray:ByteArray=jpgEncoder.encode(bmd);

//发送数据到PHP服务器端，然后自动弹出，我下面会提供一个PHP文件，供你测试，反正
//根据我以前的做的很多东西来看，方法有N多。这是其中之一
var header:URLRequestHeader = new URLRequestHeader (“Content-type“, “application/octet-stream“);
var request:URLRequest=new URLRequest(url);
request.requestHeaders.push(header);
request.method=URLRequestMethod.POST;
request.data=myByteArray;

var loader:URLLoader = new URLLoader();
navigateToURL(request, “_blank“);
}

PHP端的代码：
if ( isset ( $GLOBALS[“HTTP_RAW_POST_DATA“] )) {
$im = $GLOBALS[“HTTP_RAW_POST_DATA“];
header(’Content-Type: image/jpeg’);
header(“Content-Disposition: attachment; filename=“.$_GET[’name’]);
echo $im;
} else echo ’An error occured.’;
?>

你能测试出来吗？如果在下载弹出有错误的时候，你可以按F12发布，在网页上直接来试试。基本上，我这里是测试成功了。