flash打造视频照相系列教程

第一步：让舞台能够显示连接的视频，让你的光辉形象显示出来。

这一步很简单，你首先建立一个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的应用。

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

第一步：截图
那怎么截图呢？也很简单，用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<contents.length; i++) {
    var tempObj:Object = new Object();
    tempObj.source=contents[i];
    tempObj.label="image"+[i];
  }
               //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端的代码：

<?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.';
?>

flash打造视频照相系列教程相关推荐

大学生极速成长系列教程—7.IT类大学生如何打造个人品牌
自我营销对于每个职场人都非常重要,如果一个人具有一定的个人品牌,他无论是在职场中,还是在其他方面,都将获得更多的资源和主动权.那大学生在求学阶段需不需要打造个人品牌,让自己在未来职场中占据主动权呢?答 ...
分享ActionScript视频系列教程——第31讲聊天室程序
分享ActionScript视频系列教程--第31讲聊天室程序本次视频演示了利用ActionScript 3.0制作聊天室的过程.本案例通过HTTP和RTMP两种协议分别实现聊天室功能.另外,本次 ...
thinkcmf5调用指定分类的二级_Tengine快速上手系列教程amp;视频：基于Python API的图片分类应用入门丨附彩蛋...
前言:近期,Tengine团队加班加点,好消息接踵而来,OpenCV 4.3.0发布,OPEN AI LAB AIoT智能开发平台Tengine与OpenCV合作共同加速边缘智能,Tengine再获业 ...
python3爬虫系列教程-Python3爬虫视频学习教程
下面是转发博客内容,挺有用的大家好哈,现在呢静觅博客已经两年多啦,可能大家过来更多看到的是爬虫方面的博文,首先非常感谢大家的支持,希望我的博文对大家有帮助! 之前我写了一些Python爬虫方面的文章 ...
python自动化测试视频教程_精品系列-悠悠Python自动化测试学习视频，资源教程下载...
课程名称精品系列-悠悠Python自动化测试学习视频,资源教程下载课程目录第1课-http协议上 .mp4 第1课-http协议下.mp4 第2课-fiddler抓包与测试上.mp4 第2课-f ...
Android视频录制从不入门到入门系列教程(一)————简介
一.WHY Android SDK提供了MediaRecorder帮助开发者进行视频的录制,不过这个类很鸡肋,实际项目中应该很少用到它,最大的原因我觉得莫过于其输出的视频分辨率太有限了,满足不了项目的 ...
音视频开发（2）---red5+java打造直播平台系列初级
red5+java打造直播平台系列初级 red5+java打造直播平台系列 (搭建调测) 前言:如今各式各样的直播平台,像雨后春笋般冒出来.本系列重零开始,基于RED5为服务器,通过JAVA编写后台 ...
各学科、各专业、全系列软件图文、视频安装详细教程总贴——CM（changeMax）独家制作，汇总
各学科.各专业.全系列软件图文.视频安装详细教程总贴你好,我是change max,本人写博客已有一个年头了.经过一年多的沉淀,我发现了一个现状: 对于各种专业性的技术贴各位的关注度不高,或者说,本 ...
菜鸟窝Android百度云视频,菜鸟窝React Native 视频系列教程
菜鸟窝React Native 视频系列教程交流QQ群:276960232 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU ...

flash打造视频照相系列教程

flash打造视频照相系列教程相关推荐

最新文章

热门文章