Full Browser SWF in Flash Gaia Framework

Basic swfobject setting:
100% width
100% height

in as3 code:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

監聽 Event.RESIZE 事件
stage.addEventListener(Event.RESIZE, onResize);
onResize();

原始文件大小
Gaia.api.getWidth(): The fixed width of document size(1000)
Gaia.api.getHeight(): The fixed height of document size(600)

瀏覽器大小(dynamic)
stage.stageWidth: The width of browser stage(1920)
stage.stageHeight: The height of browser stage(1080)

FlashDevelop: getDefinitionByName ReferenceError: Error #1065: Variable ... is not defined.

When I was using getDefinitionByName to create dynamic class.
var myClass:Class = getDefinitionByName('Item1') as Class;

I usually got this error:
[Fault] exception, information=ReferenceError: Error #1065: Variable Item1 is not defined.

Fixed: just including complete library
assets.swf -> Add To Library -> Options -> Included library(include completely)

[ref]
http://www.flashdevelop.org/community/viewtopic.php?p=27575

Stage3D: 2D Particle Random Motion [optimized]

I just updated some code of my last demo and optimized it by reducing draw calls.
Now it can render over large number of particle(500,000+).

Here are some optimization:

• reduce draw call
• upload minimum of constants

Try it!!

[Optimized] 2D Particle Random Motion for Stage3D - wonderfl build flash online

Stage3D Limitation and Optimization

Stage3D AGAL Limitation:

• The VertexBuffer is limited to 65535 vertex.
• The IndexBuffer is limited to 983040 index.
• In theory, you could have up to 983040/3 = 327680 triangle in one draw call.
• In particle(using quads), you could have up to 65535/4 = 16383 particle max per draw call.
• Shaders length can only contain a maximum of 200 opcodes.
• The drawTriangles limited to 32768 calls per present call.

Optimization:

• reduce draw call.
• reuse material and batch rendering.
• upload minimum number of constants.

Stage3D: 2D Particle Random Motion

2D particle random motion for Stage3D,
Here is a demo with 5000 particles.

2D Particle Random Motion for Stage3D - wonderfl build flash online

How to play Away3D on mobile phone

Last week I played Away3D on my old iphone 3GS for fun(see my previous post).
Now, you can download the full source from here,
or get ipa and apk file to test on your mobile.

Here is the web demo.

Away3D on mobile phone demo - wonderfl build flash online

Away3D on mobile phones (Android/iOS)

Away3D Gold v4.0.9 + AIR 3.2

Screenshots
iPad2 iOS 5.1.1:

How to deploy adobe air to iOS: Part1

如何發佈 Adobe AIR 到 iOS 裝置(ipad/iphone)教學

Part1: How to get your *.mobileprovision and *.p12 files.

Member Center
goto https://developer.apple.com

Away3D + Flint 3D Particles Demo: Cloud Effect

Away3D + Flint 3D Particles Demo: Cloud(Fog) Effect

版本:
Away3D v4.0.9
Flint v4.0.1

先來看 demo 圖

重點如下:

建立: view = new View3D();

設定背景: view.backgroundColor = 0x222233;

設定 antiAlias(ie: 2,4,16): view.antiAlias = 4; 

Away3D 4.0.X Gold basics

Away3D 4.0.X Gold 基本教學

之前有寫過幾篇 Away3D 的教學與應用，
新版 4.0.X 後 API 有些許的調整，重新翻了一下文件。

Away3D 基本流程如下：

• scene
• camera
• view
• light
• add 3D Object(3D Object -> Mesh -> 面 ->頂點)
• render

cloud effect with perlinNoise

雲霧效果教學
scrolling BitmapData +  perlinNoise

首先產生可以連續捲動的雲(BitmapData)，
先回憶一下 perlinNoise 語法：
perlinNoise(periodX, periodY, numOctaves, seed, stitch, fractalNoise, channelOptions, grayScale);
stitch：true 平滑影像邊緣，以建立無接縫的拼貼紋理，適用於水波。
fractalNoise：true 平滑化該效果的邊緣，適用於雲霧，false 明顯不連續的漸層，
適用於火焰和海浪。

AGAL quick reference guide

AGAL 教學 備忘

Vertex Shader：
va0-va7：vertex attribute registers, set with context3D.setVertexBufferAt(...)
vc0-vc127：vertex constant registers, set with context3D.setProgramConstantsFromMatrix/Vector(Context3DProgramType.VERTEX, ...)
vt0-vt7：vertex temporary registers with xyzw component (ex: add vt0, va0, vc0)
v0-v7：varying registers, pass values to the fragment shader (ex: mov v0, va0)
op：output point (ex: mov op, va0)

Fragment Shader：
fc0-fc127：fragment constants set with context3D.setProgramConstantsFromMatrix/Vector(Context3DProgramType.FRAGMENT,...)
fs0-fs7：fragment(texture) sampler, set with context3D.setTextureAt(__sampler, __textureBmpd)
v0-v7：varying registers, values passed from the vertex shader (ex: mov oc, v0)
ft0-ft7：fragment temporary registers with xyzw component (ex: tex ft0, v0, fs0<2d,linear,nomip,repeat>)
oc：output color (ex: mov oc, ft0)

Introduction to Stage3D: Part 7

Introduction to Stage3D: Part 7
fire effect for stage3d tutorial
火/火球/火焰 效果教學

本篇是 Stage3D 的應用，
如果對 Stage3D 運作還不是很清楚，可以先看前幾篇入門文章。

在前一篇火焰效果教學，
是用 CPU Render 的方式處理效果，
接下來會用到 Stage3D GPU Render 運算功能來呈現火焰效果，

fire effect performance tuning

火及火焰效果調校教學

一直以來都會需要用到火/火焰特效，
筆記一下調校心得，
順便試用 wonderfl online coding，

幾個重點如下：
filter：加強效果
this.filters = [new BlurFilter(4, 16, 1)];

blendMode：加強效果
this.blendMode = "add";

javascript html5 flash on union socket server

javascript/html5 flash on union socket server 教學
nodejs 這陣子相當熱門，
加上 Socket.IO 的應用，
開始有不少活動朝這個方向發展。

其實 flash(player 6?) 很早就支援 xmlsocket，
早期玩過的幾個 socket server，
印象最深的就是 Colin Moock 所開發的 unity server，
目前已改名為 union platform，

ActionScript IDE for mac osx

ActionScript IDE 編輯器比較 for mac osx

monodevelop
與 haxe nme 整合最好
auto code completion
缺少 auto import class

sublime text 2
最近相當熱門的 IDE 編輯器，擁有相當強大的擴充功能
Ctrl+Shift+B：auto create hxml(內容還是要自己編..XD)
Ctrl+B：build
Ctrl+i：auto import class
缺少 auto code completion

flint particle system：Part4

本篇文章算是前兩篇的應用，
模擬音符從空中落下，
當滑鼠觸控到音符，會發出聲響，並產生小火花，
另外，當音符掉落至底部時也會有同樣的效果。

flint particle system：Part3

flint sparkler effect

火花效果
煙火效果
與前一篇雪花效果不同的地方在於，
emitter Counter 這次是一次性的，也就是 Blast
renderer 採用 BitmapRenderer，
並監聽滑鼠事件，當 click 時產生火花。

flint particle system：Part2

flint 粒子系統教學：Part2
前一篇已大致說明 flint 粒子系統原理，
emitter -> particle -> renderer

TimelineLite/TimelineMax memo

TimelineLite/TimelineMax
append
appendMultiple
加在時間軸的後面

prepend
prependMultiple
加在時間軸的前面

insert
insertMultiple
加在特定的時間軸中