post | sidebar | footer

2012/4/6

Away3D 4.0 Beta + IN2AR

這幾天測試了一些 AR 的功能和各家廠商的 lib

這次要來介紹的是 Away3D4 + IN2AR



IN2AR 是使用圖形來當作辨識標籤
先看 IN2AR 幾個例子







現在大部分的3D 引擎都使用Stage3D 的模式

但在使用AR應用就會有一點點的小問題
Camera 顯示的影像要貼在哪?!!? , 直接 addChild 上去!?
但這是不行的,因為Stage3D Layer 低於一般我們在使用Stage ,所以3D 畫面會被 Camera 擋住


目前大部分的作法會採用以下兩種
  1. 貼到 StageVideo (stagevideo.attachcamera 方法)
  2. 貼到 3D引擎內的背景


Note
StageVideo 比Stage3D View 層級更低 要使用 stagevideo.attachcamera 要設定以下步驟
使用 11.2 globleplayer.swc  -target-platform=11.2
發佈參數 -swf-version=15
且這個功能是隱藏的,所以在文件中找不到該方法





且在Player  11.2 會遇到另外一個BUG   Webcam is not working with Flash player 11.2

所以目前我還沒有可以用的WebCam可以測試 attachcamera  這功能
IN2AR 使用的範例是將Camera 貼到3D引擎背景上

上面廢話講完了要來進入這篇的正題 IN2AR



[How to Work]

下載官方 SDK 

解壓縮後可以看到他的配置方式 assets 有需要感應的Marke 圖形


接下來就可以自己Run 起來玩看看

圖形辨識的部分需要引用 .ass 檔案,都必須經過官方評估,然後才會寄給你

若是測試也可使用官方提供的圖形

另外裡面使用的 Away3D4  並不是使用目前最新的 4.0 Beta 版

所以若是要自己改用 4.0 Beta 版本的朋友需要自行更換 Away3D SWF 還有改寫中間介接運算

還有最後 Camera 貼到 Stage3D 上的部分


[DEMO]


測試網址


辨識圖像





2012/4/5

Webcam is not working with Flash player 11.2


WebCam 在 Flash Player 11.2 無法運作

測試結果
11.1 正常
11.2 不正常

獨立撥放程式跟瀏覽器上plugin 結果皆相同

搜尋了一下Adobe 有人回報了這個bug
https://bugbase.adobe.com/index.cfm?event=bug&id=3157088
https://bugbase.adobe.com/index.cfm?event=bug&id=3156320

相關討論
http://forums.adobe.com/message/4305472

看起來是不是所有的 webcam 都會受影響
但目前我測試的webcam 在11.2 都無法使用

換句話說使用者瀏覽器FLASH PLAYER 只要更新到11.2 後
有使用Webcam 的功能大部分的機率會看到黑色畫面


目前尚無解決方法;只能等ADBOE 修復

2012/3/2

[HTML5] Hello Scroll Wheel

大家好我是羊小咩

最近使用 Wheel 來一直往下瀏覽網頁逐漸變多

Nick AJ2012 諸如此類的HTML5 網站

就目前我已知的可行方式

配合設計師要做這種網站,切圖跟寫動畫的code 要非常非常的多而且必須要客製化

簡單來說就是 很麻煩阿!!!!

今天突發奇想,想到一個簡易方式,使用 swiffy 轉換,就馬上來實作

就 .... 做出來了,需要加強的部分還是很多,舉如說滿版  其實是我偷懶,右方 scroll bar 顯示狀態的百分比等等

講這麼多還是來看一下 DEMO


後記:
當我在測試 swiffy 時候有發現有個問題

Mouse 對 onMouseWheel 不起作用,找不到可以解決的方法

但mouseMove 是可以work的

後來想起 Ticore 大有寫過一篇  Hack Swiffy Runtime

所以就在外部捕抓 wheel 事件再傳入進去,就成了


2012/2/22

讓 FLASH CS5 or CS5.5 支援發佈 FlashPlayer 11

大家好我是羊小咩

今天遇到一個特殊的情況
需要使用 FLASH IDE 並發佈成 FP 11 格式的 SWF

所以簡單紀錄一下如何讓 FLASH IDE 可以發布 FP 11 的版本
(預設只能到 10)

有以下兩種方式

安裝 FP11Publish MXP

 下載適合的MPX 解壓縮後安裝mxp 並一直下一步

  CS 5.5 MXP - FP11Publish_cs55.mxp
  CS 5    MXP - FP11Publish_cs5.mxp

這方式比較簡易安裝完後,重新開啟FLASH 即可


手動配置
這要設定很多東西,SWC 、XML 等配置;這邊就不多說 ....(其實是我懶得寫)






wmode=direct Express Install 沒有作用

大家好我是羊小咩


現在越來越多 Stage3D 應用
使用Stage3D 在wmode 的屬性必須要設定為 direct
注意最低Player 版本

收工下班
.....

這時候你的老闆/客戶就會告訴你說有一個Bug,無法自動安裝新版 Player 


問題探討

由於 Stage3D 必須要 player 11 以上才能 run

當然內嵌的Player 安裝程式(Express Install) 設定非常重要

但只要設定wmode=direct

內嵌的Player 安裝程式就會失效 

畫面看起那個SWF 只會閃一下就不見了然後就只看的到HTML 背景

不見的原因是他會把 expressInstall.swf 屬性設定跟你當初是一樣的設定上去;包含 wmode

但 expressInstall.swf 通常版本是FLASH 7 的產物;當然也沒有wmode=direct 這種東西

所以當wmode=direct 內部安裝PLAYER程式,可能會閃一下不見,或者只看到灰色的那個背景!!

但我也是查了很久才知道這是Swfobject 問題 SwfObject ISSUE 


解決方式

來必須對SWFObject 使用 Express Install 那邊的code 做調整


1. 打開 swfobject.js 


2. 找到function showExpressInstall 並在最底下增加修正 code 

function showExpressInstall(att, par, replaceElemIdStr, callbackFn) {
 //.....
 if (String(par.wmode).toLowerCase() == "direct") {
  par.wmode = "transparent";
 }
 createSWF(att, par, replaceElemIdStr);
}

這樣就可以修正 swfObject 這個issue
以上,打完收工 .....

之前遇到的時候;忙到沒時間記錄下來;
今天跟友人有討論到,才想起來這個問題...



2012/2/9

AS3 ENTER 輸入法選字混淆問題

大家好我是羊小咩

今天在寫一個判斷按下 ENTER 時需要把文字框的文字發送出去
在打字使用英文或是拼字的輸入法都不會有這問題,但若是使用新注音的方式會有直接發送出去的問題

有問題的程式碼
var _message : TextField

_message.addEventListener(KeyboardEvent.KEY_UP,keyUpOnMessageField)

function keyUpOnMessageField(e:KeyboardEvent):void {
      
  if (e.keyCode == Keyboard.ENTER && _message.text.length > 0 ) {
   
   trace("send")

  }
}

找了許久才發現不能使用 KEY_UP 要使用 KEY_DOWN 做判斷

修正後程式碼
_message.addEventListener(KeyboardEvent.KEY_DOWN,keyUpOnMessageField)


原因
使用IME (輸入法) 選字按下ENTER,輸入框不會接到 KEY_DOWN 的事件,因為 focus 那時候在輸入法上,但KEY_UP 時 focus 已經由輸入法回到輸入框


由於測試的方式錯誤,這個bug就花了我一下午時間 ....

2012/1/17

[Html5] Mutton Hot Pot - 羊肉爐

我是羊小咩

由於 HTML5 話題被炒得火熱,然後再加上,羊肉爐(Mutton Hot Pot) 已經有 iOS Android 的版本

所以用HTML5 做的一款 WEB版 HTML5 的羊肉爐



主要是使用FlashJS 來當主要的html5 JS Framework ,剛開始使用的時候發現有好幾套FlashJS,而且還是不同人製作的

當然這種沒有很成熟的東西有 BUG 也是理所當然的,所以在製作的時候很多時間都是在DEBUG ,還有加上些缺少的function 和 Getter / Setter

尤其是在計算物件 偏移跟旋轉後的邊界  x、y 快搞死我了,還好好心的 Etrex  幫我解決了這個問題

尤其是我檢測碰撞的方式是利用 Pixel 在檢測碰撞的,無論如何一開始的邊界碰撞必須先運算出來

忙裡偷閒,斷斷續續花了一個月才完成,目前的版本

希望大家會喜歡。


----------------------------------我是分隔線--------------------------------------

以下是我對 HTML5 的看法

其實我一直覺得HTML5 是一個非常非常喇賽的東西,到現在也是!!

且很多人都誤會HTML5 都會覺得他是一款新技術之類的

但實際上並不是這樣說的

HTML5是利用HTML新標籤,配合CSS3 跟JS 的控制來達到頁面效果

所以 HTML5 = CSS3 + HTML + JAVASCRIPT

但是很多人還沒去了解HTML5是甚麼,就開始說他網站也要用HTML5 甚麼的

HMLT5 看起來是很炫,而且行動裝置也可以看,但是HTML5 當然有很多問題

第一點 瀏覽器相容的問題
並不是所有的瀏覽器都可以使用;舉例IE來說 非 IE9 的瀏覽器都無法使用,意味著IE8 IE7 IE6 都會有問題

第二點 開發實在是非常麻煩
簡單的動畫效果 FLASH只要用 10 分鐘 HTML5 說要用10小時也不為過 (當然10小時有點誇張) 

第三點 設計師跟後端程式設計師配合
倒底是誰要去做HTML5 的製作,美術又能切出合用的原件來使用,看起來又很像應該是前端工程師應該要會去做的,但是大部分的公司並沒有所謂前端工程師這個職務,那當然美術跟後端工程師一定都不熟悉要怎麼寫,何況配合

第四點 成本問題
鑒於上面幾點的關係,所以成本其實並不會像很多 很傻很天真的人   普通人想的會成本降低,反而相對的會變貴很多

好啦以上就是我對HMLT5的想法
廢話講完了

2011/12/2

Away3D 4.0 詭異問題 Error #3691 超過此資源類型的資源限制

Demo Link


使用 Away3D4



若是使用不斷產生物件並移除掉的方式時

移除並不會清除記憶體;會一直堆疊上去
到一定程度的時候會出現  Error #3691


Main Thread (Suspended: Error: Error #3691: 超過此資源類型的資源限制。)
flash.display3D::Context3D/createVertexBuffer [no source]
away3d.core.base::SubGeometry/getVertexBuffer
away3d.core.base::SubMesh/getVertexBuffer
away3d.materials.passes::MaterialPassBase/render
away3d.materials.passes::DefaultScreenPass/render
away3d.materials::MaterialBase/renderPass
away3d.core.render::DefaultRenderer/drawRenderables
away3d.core.render::DefaultRenderer/draw
away3d.core.render::RendererBase/executeRender
away3d.core.render::RendererBase/render
away3d.containers::View3D/render
TestCreateObject/renderHandler



以這個 範例 測試RAM 大約跑到 22X 左右就掛了

有的程式碼環境比較複雜一點約 6X 就會掛了


程式碼
package
{
 import away3d.cameras.Camera3D;
 import away3d.containers.Scene3D;
 import away3d.containers.View3D;
 import away3d.controllers.HoverController;
 import away3d.debug.AwayStats;
 import away3d.debug.Trident;
 import away3d.materials.ColorMaterial;
 import away3d.primitives.Sphere;
 
 import com.bit101.components.CheckBox;
 import com.darcey.ui.SliderList;
 import com.greensock.TweenLite;
 import com.greensock.easing.Bounce;
 
 import flash.display.*;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.events.TimerEvent;
 import flash.utils.Timer;
 
 [SWF(backgroundColor="#ffffff", frameRate="60", quality="LOW", width="800", height="600")]
 public class TestCreateObject extends Sprite
 {
  
  // Away3D4 Vars
  private var scene:Scene3D;
  private var camera:Camera3D;
  private var view:View3D;
  private var cameraController:HoverController;
  
  // Away3D4 Camera handling variables (Hover Camera)
  private var move:Boolean = false;
  private var lastPanAngle:Number;
  private var lastTiltAngle:Number;
  private var lastMouseX:Number;
  private var lastMouseY:Number;
  
  // Away3D Helpers
  private var stats:AwayStats;
  private var trident:Trident;
  
  // Away3D Config
  private var cameraViewDistance:Number = 100000;
  private var antiAlias:Number = 2;
  
  private var primitiveMaterial:ColorMaterial;
  
  public function TestCreateObject()
  {
   this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler, false, 0, true);
  }
  private function addedToStageHandler(e:Event):void
  {
   
   this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
   
   // Setup the stage
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   
   // Init
   init();
  }
  
  private var timer:Timer
  private function init():void
  {
   timer = new Timer(50)
   timer.addEventListener(TimerEvent.TIMER, createPrimitivesAndModels); 
   
   setupAway3D4();
   setupMaterials()
   setupUI()
   setupEventListeners();
   
    
   // Attach Debug Box at the top of the display list
  }
  
  private function setupMaterials():void
  {
   primitiveMaterial = new ColorMaterial(Math.random() * 0xFFFFFF);
  }
  private function createPrimitivesAndModels(event:TimerEvent):void
  {
   var sphere:Sphere = new Sphere(primitiveMaterial,50+Math.random()*200,16,16);
   sphere.x = -1500 + Math.random() * 3500;
   sphere.z = -1500 + Math.random() * 3500;
   scene.addChild(sphere);
   
   
   TweenLite.from(sphere,2,{y:4000,ease:Bounce.easeOut,onComplete:onAnimComplete,onCompleteParams:[sphere]});
  }
  private  function onAnimComplete(sphere:Sphere):void{
   sphere.dispose(false)
   scene.removeChild(sphere);
   sphere = null
  } 
   
   
  /*** Setup the Away3D 4 Engine */
  private function setupAway3D4():void
  {
   
   // Setup scene
   scene = new Scene3D();
   
   // Setup camera
   camera = new Camera3D();
   camera.lens.far = cameraViewDistance;
   
   // Setup view
   view = new View3D();
   view.scene = scene;
   view.camera = camera;
   view.antiAlias = antiAlias;
   addChild(view);
   cameraController = new HoverController(camera, null, 150, 10, 2000);
   
   // Show Away3D stats
   stats = new AwayStats(view,true);
   stats.x = 5;
   stats.y = 5;
   this.addChild(stats);
   
   // Show a Trident
   trident = new Trident();
   trident.scale(1);
   scene.addChild(trident);
  }
  private function setupEventListeners():void
  {
   
   // Setup event listeners
   stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
   stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
   
   // Setup resize handler
   stage.addEventListener(Event.RESIZE, resizeHandler);
   resizeHandler(); // Good to run the resizeHandler to ensure everything is in its place
   
   // Setup render enter frame event listener
   stage.addEventListener(Event.ENTER_FRAME,renderHandler);
  }
  private function setupUI():void
  {
   var s:SliderList = new SliderList();
   s.x = 10;
   s.y = 90;
   
   s.addSlider("Timer - delay",100,1,100,50,timer,"delay",false);
   var _c:CheckBox = new CheckBox(s,0, 20, "autoCreate", changCheckBox);
   
   
   
   this.addChild(s);
  }
  private function changCheckBox(evt:Event):void {
   if (evt.currentTarget.selected) {
    timer.start()
   }else {
    timer.stop()
   }
  }
  private function renderHandler(e:Event):void
  {   
   
   if (move) {
    cameraController.panAngle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
    cameraController.tiltAngle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
   }
   
   view.render();
  }
  /*** Mouse down handler */
  private function mouseDownHandler(e:MouseEvent):void
  {
   lastPanAngle = cameraController.panAngle;
   lastTiltAngle = cameraController.tiltAngle;
   lastMouseX = stage.mouseX;
   lastMouseY = stage.mouseY;
   move = true;
   stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
  }
  /*** Mouse up handler */
  private function mouseUpHandler(e:MouseEvent):void
  {
   move = false;
   stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
  }
  
  /*** Mouse stage leave handler */
  private function onStageMouseLeave(e:Event):void
  {
   move = false;
   stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
  }
  
  /*** Resize handler */
  private function resizeHandler(e:Event=null):void
  {
   view.width = stage.stageWidth;
   view.height = stage.stageHeight;
   
   
  }
 }
}

由於多寫了一些控制項,真正在產生的程式碼只有五六行


測試環境
Flash Builder 4.5.1
Flex SDK 4.5.1
PlayerGlobal.swc  PF 11
wmode= "Direct"
-swf-version=14

Flash Player 11.1 Plugin content debugger
Flash Player 11.1 Projector content debugger


若是有人有解決方式,煩請也跟我說

2011/11/24

Away3D 4.0 設定 bothsides 的問題

以往 (Away 3D v3.6) 以前 bothsides 兩面貼圖 設定方式
是在 primitives 物件上直接設定

[primitives].bothsides = Boolean (true or false)

但 Away 3D v4.0 後 改變繼承方式由 MaterialBase 上的 bothSides 來設定

[primitives].material.bothsides = Boolean (true or false)

找了一下 Help 才知道變了,記錄一下




2011/11/17

【Flash Builder】java heap space 問題

在編譯的時候遇到 FlashBuilder 出現 java heap space


這個問題是由於專案太大參考資源很多,或引用了很多SWC

造成記憶體不足無法編譯

以下有兩種處理方式;以下數值都可以自行調整到所需的值

1. 調整FlashBuilder  FlexBuilder.ini
編輯 {FlashBuilder 安裝路徑}/FlexBuilder.ini
-Xms128m
-Xmx512m
-XX:MaxPermSize=256m
 有使用過 Eclipse 朋友就知道可以設定ini 來調整 Heap space 的起始值跟最大值

2. 設定 SDK的 JVM 使用記憶體参数 
編輯 {Flex SDK安裝路徑}/bin/jvm.config
java.args=-Xmx512m -Dsun.io.useCanonCaches=false
 聽說  Flash Builder compiler shell 有 memory leak 的問題

且SDK 預設的 JVM heap size 只有312M





這次要 builde 的 project 最大值要設定到 2048M 才夠 Orz..