关于体感互动Airkinect研究-《案例篇2》

目录：

关于体感互动kinect研究-《基础篇》

关于体感互动Airkinect研究-《案例篇1》

关于体感互动Airkinect研究-《案例篇2》

 

 

Kinect 與Flash 的連接, 我們透過AIRKinect簡單地完成. 以下為大家介紹魔法帽子範例, 當一個人走進Kinect 範圍, 在螢幕為她蓋上一個魔法帽子.

 

在程序啟動時, 對AIRKinect 物件加入三個事件監聽器:
  CameraImageEvent.RGB_IMAGE_UPDATE - 影像每次更新產生的事件
  UserEvent.USERS_WITH_SKELETON_ADDED - 發現一個新骨架時事件
  UserEvent.USERS_WITH_SKELETON_ADDED - 骨架離開Kinect 事件

 

if (Kinect.isSupported()) {
  // <----- get Kinect instance
  _device = Kinect.getDevice();
  
  // <----- add listener for Kinect
  _device.addEventListener(CameraImageEvent.RGB_IMAGE_UPDATE, rgbImageUpdateHandler, false, 0, true);
  _device.addEventListener(UserEvent.USERS_WITH_SKELETON_ADDED, skeletonsAddedHandler, false, 0, true);
  _device.addEventListener(UserEvent.USERS_WITH_SKELETON_REMOVED, skeletonsRemovedHandler, false, 0, true);
  
  ...
  
  // <----- start the Kinect
  _device.start(settings);
}

2.當發現一個新骨架, 我們建立一個帽子MovieClip, 產生魔法效果:

 

帽子(_Hat1) 魔法效果是由Flash IDE 的時間軸製作

...
[Embed(source="assets/hat1.swf")]
private var _Hat1:Class;
...
private function skeletonsAddedHandler(event:UserEvent):void{
  for each(var addedUser:User in event.users){
    var sprite:Sprite = new Sprite();
    var head:SkeletonJoint = addedUser.getJointByName("head");
    var headRGB:Point = head.position.rgb;
    sprite.name = addedUser.trackingID.toString();
    sprite.x = headRGB.x;
    sprite.y = headRGB.y;
    
    // <----- add the MovieClip to stage
    sprite.addChild(new _Hat1() as MovieClip);
    _sprites.push(sprite);
    this.addChild(sprite);
  }
}

若骨架離開Kinect, 把相對於這個骨架的帽子刪除:

private function skeletonsRemovedHandler(event:UserEvent):void{
  for each(var removedUser:User in event.users){
    for(var i:int=0; i<_sprites.length; i++){
      var id:String = removedUser.trackingID.toString();
      if(_sprites[i].name==id){
        this.removeChild(_sprites[i]);
        _sprites.splice(i, 1);
      }
    }
  }
}

影像每次更新時, 追蹤每個骨架頭部(head) 和頸部(neck) 關節位置, 計算兩者距離來決定帽子大小, 並利用TweenLite 把帽子移至頭部:

private function rgbImageUpdateHandler(event:CameraImageEvent):void{
  // <----- get Kinect RGB Camera image to display
  _bitmapData.draw(event.imageData);
  
  for each(var user:User in _device.users) {
    if (user.hasSkeleton) {
      var head:SkeletonJoint = user.getJointByName("head");
      var neck:SkeletonJoint = user.getJointByName("neck");
      var headRGB:Point = head.position.rgb;
      var neckRGB:Point = neck.position.rgb;
      var diff:Number = Math.abs(neckRGB.y - headRGB.y);
      var diffBase:Number = 50;
      var scale:Number = diff/diffBase;
      var id:String = user.trackingID.toString();
      
      // <----- find the MovieClip
      for(var i:int=0; i<_sprites.length; i++){
        if(_sprites[i].name==id){
          // <----- change the MovieClip position
          TweenLite.to(_sprites[i], 0.1, {x:headRGB.x, y:headRGB.y, scaleX:scale, scaleY:scale});
          break;
        }
      }
    }
  }
}

大家可以 [下載] 範例試試看.