跳到主要內容

發表文章

目前顯示的是 二月, 2009的文章

PerlinNoise火焰效果

最近在研究以前沒有認真看的perlinNoise
上一篇是水波, 那這一篇就來個火焰吧
一樣使用BitmapData的perlinNoise產生雜點
再配合DisplacementMapFilter來使用即可產生效果




SourceCodeDown

水波倒影效果

在Flash7之前的作法, 是使用mask來模擬
但效果有限
Flash8之後, 提供了一個新的類別DisplacementMapFilter
可以依顏色來做扭曲變型效果,
先用BitMapData的perlinNoise產生雜點
再配合該類別即可完成





SourceCodeDown

PV3D_方塊加速與減速

這次使用PV3D Cube來製作簡單的加速與減速效果。
還是要來聊一下簡單的物理
一個靜止的物件, 不斷加上一個等加速度
這個物件就會以直線的方式運動。
EX:
var vx:int = 2
enterFrame運算 {
球.x += vx;
}
這樣球物件隨著時間的增加, 就一直往x軸的方向每次移動2個值
如果要快一點, 就把vx速率調高
那如果要減速呢?
只要在速率乘上一個衰竭值
EX:
var vx:int = 100
vx *= 0.98
enterFrame運算 {
球.x += vx;
}
隨著時間的增加, 速率就會越來越小, 直到靜止
好,那我們把這樣的公式丟到PV3D裡的Cube裡



完整程式碼

/* Copyright (c) 2009 milkmidi All rights reserved. http://milkmidi.com http://milkmidi.blogspot.com */ package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import org.papervision3d.cameras.CameraType; import org.papervision3d.lights.PointLight3D; import org.papervision3d.materials.shadematerials.PhongMaterial; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.view.BasicView; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.objects.primitives.Cube; import org.papervision3d.events.InteractiveScene3DEvent; [SWF(width = "950", height = "500…

PV3D_flipPage_翻書效果

翻書效果第一看到時, 還真是讓我驚呀
怎麼會那麼的酷, 但現在這效果好像有些用到爛了
那就來舊瓶新裝, 結合PV3D
就有了3D版的翻書效果啦



剛好前一陣陣子參加了歐拔藍的春酒, 認識了不少朋友
就借了幾張照片來Demo, 剛好第一張就是奶小茶我啦。

flight framework Flash Binding Class

在Flex可以使用Binding來挷定數值
當來源的值有更改時, 有挷定的物件變數也會同步更新
現在Flash也可以有類似的效果了
官網:http://www.flightxd.com/flightframework/
Code下載
透過該類別
即可使用
Bind.addBinding(目標物件, 挷定的屬性, 來源物件, 來源常件的屬性);
當來源的屬性值有更動時, 目標物件的屬性值也會同部更新
但該類別需要在Flex或是FlashCS4下才能發怖
完整程式碼:

<br />package { <br /> <br /> import flash.display.Sprite;<br /> import flash.events.Event;<br /> import flash.events.TimerEvent;<br /> import flash.text.TextField;<br /> import flash.text.TextFormat;<br /> import flash.utils.Timer;<br /> import flight.binding.Bind;<br /> import flight.events.PropertyEvent;<br /> <br /> [SWF(width = "950", height = "500", frameRate = "41", backgroundColor = "#000000", pageTitle = "milkmidi.com")] <br /> public class BindDemo extends Sprite{<br /> <br /> private var _source :Number = 0;<br /> private var _targetText :TextField = new TextField();<br /> private var _displayText:T…

Flash載入外部格式與Embed

FlashAS3開始後
在不跨網域的前提下,能夠任意的把可視物件丟到指定的容器下
也就是可以有一個.swf裡面就只放常用的素材,要用的時候再加入即可
那要怎麼製作呢
先開啟一個fla,並把相關的物件設定好類別名稱


接著使用Loader把該.swf載入,並在載入成功後使用
var _RefClass:Class = _ldr.contentLoaderInfo.applicationDomain.getDefinition("MilkmidiCubeMC") as Class; var _milkmidiCubeMC:MovieClip = new _RefClass() as MovieClip; this.addChild(_milkmidiCubeMC);
這樣就可以載入該物件
方法2, 使用Flex的Embed功能, 把外部的格式崁入到swf裡
當然這是Flex的限定方法, 但可以在FlashCS4使用, 因為FlashCS4也是有使用FlexSDK
[Embed(source = "assets/milkmidiDemo.jpg")] private var JpgTexture:Class;//把該元件變成指定的類別 //要使用的時候只要用new物件即可 var _mc:Bitmap = new JpgTexture() as Bitmap; this.addChild(_mc);//那可不可以Embed PV3D的DAE格式呢? //當然是ok的呀, 基本上可以Embed任何格式 [Embed(source = "assets/xml_data.xml", mimeType = "application/octet-stream")] private var XMLTexture:Class;//Embed一個XML檔。 var _xml:XML = new XML( new XMLTexture() );//這樣即可

SourceCodeDown

PV3D_決解破圖的二個方法

PV3D當二個物件重疊時
會產生破圖的問題

下方的Plane蓋住了方塊的一角,那怎麼辦呢
有二個方法可以決解
1.使用新版的QuadrantRenderEngine類別
當重件重疊時, 會重新分割物件的切面

使用方法很簡單, 只要把本來的
renderer = new BasicRenderEngine();
換成
renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);
即可



但缺點就是比較吃效能。
第二個方法是用深度排序來決解。
PV3D可以指定物件的index深度, 然後使用index來決定,而不是使用z軸來排序
這樣讓方塊永遠在Plane的上方即可
viewport.containerSprite.sortMode = ViewportLayerSortMode.INDEX_SORT; var planeViewportLayer:ViewportLayer = new ViewportLayer(viewport, plane); planeViewportLayer.layerIndex = 1; viewport.containerSprite.addLayer(planeViewportLayer); var carViewportLayer:ViewportLayer = new ViewportLayer(viewport, cube); carViewportLayer.layerIndex = 2; viewport.containerSprite.addLayer(carViewportLayer); SourceCodeDown

好用動畫工具_MotionSketch

http://ajarproductions.com/blog/又有好用的工具發表了喔。
這次的工具名稱是MotionSketch
簡單來說, 就是可以直接使用畫筆, 繪製一段路徑後, 物件就可以跟著他跑了

Video Demo
下載mxp,並使用Adobe Extension Manager CS4安裝即可

Flash產生實體圖檔的幾個方法

還是來整理一下這個問題
Flash端要如何產生一張實體的圖檔呢?
Flash8+AS2
Flash端使用BitmapData類別, 再用回圈把所有的相素值, 用POST的方法傳給伺服器端
然後伺服器端再依色碼重組。
缺點, 效能很差, 傳輸過程要用久。
Flash9+AS3
Flash端使用BitmapData類別, 繪置Flash畫面, 再使用adobe JPGEncoder將BitmapData編碼成
ByteArray格式, 使用POST,upload,或是remoting的方式, 將ByteArray格式傳給伺服器端
Flash10+AS3
Flash端使用BitmapData類別, 繪置Flash畫面, 再使用adobe JPGEncoder將BitmapData編碼成
ByteArray格式, 使用FileReference新增的功能, 直接下載一張圖檔。
分享一下奶小茶我製做的程式碼。

使用Flash9+AS3+upload的方式, 產生圖片檔。
伺服器端我用的是asp.net
程式碼爛掉了, 請下載SourceCode吧, Sorry

<br />package { <br /> <br /> import flash.display.BitmapData;<br /> import flash.display.Shape;<br /> import flash.display.Sprite;<br /> import flash.events.Event;<br /> import flash.events.IOErrorEvent;<br /> import flash.events.MouseEvent;<br /> import flash.media.Camera;<br /> import flash.events.NetStatusEvent;<br /> import flash.display.MovieClip;<br /> import flash.net.URLLoader<br /> import com.adobe.images.*<br /> impor…

AS3_TransformTool

這個效果在許多的活動網站還滿常見的
類似Photoshop的變型工具, 只是要在Flash裡實作。
奶老師我之前有寫過AS2版,
現在有現成的AS3類別檔, 該作者寫的真是完善呀
Demo:


下載類別
如果是Flex的使用者,可以參考另一位作者修改的版本。
http://www.sephiroth.it/weblog/archives/2007/07/transformtool_modification.php

AS3_attachMovie

在AS2裡,可以使用attachMovie函式, 配合for回圈, 一次取出許多的物件
<br />//AS2<br />for(var i:Number = 0 ; i<4 ; i++){<br />var _mc:MovieClip = this.attachMovie("item"+i,"item"+i,1);<br />}<br />
那AS3呢, 因為在AS3都是使用new 物件的方式,
所以我們可以使用getDefinitionByName這個函式。
<br />for(var i:int = 0 ; i<4 ; i++){<br /> var ClassReference:Class = getDefinitionByName("item" + i) as Class;<br /> var _mc:MovieClip = new ClassReference() as MovieClip;<br />}<br />

PV3D_方塊轉場特效

參考網址:
http://www.hyundaigenesis.com/sedan/#
當切換單元時, 會有個方塊轉場效果,
現在我們就使用PV3D來製作。

最主要的公式如何讓3D物件能100%百出現在Flash裡
可以透過以下的公式:
object3D.z = camera.focus * camera.zoom - Math.abs(camera.z);
這樣即可達成。
當轉場完後, 再讓指定的物件出現



SourceCodeDown

Flex的相關使用,可以參考這一篇教學:
http://www.dgrigg.com/post.cfm/04/19/2007/Source-code-for-3d-flex-form
但因為該作者是使用PV3D1.5版, 奶小綠我將期修改成PV3D2.0版
按這兒下載

FLARToolKit

什麼是FLARToolKit
簡單來說, 就是透過Webcam, 將虛擬的物件與真實的世界結合, 呈現在使用者的畫面
Demo影片:
http://www.youtube.com/watch?v=TW6_X9qBeds&feature=related
Youtube有許多相關的影片。
一開始的版本並不是Flash, 後來日本的程式設計師Saqoosha將其改寫成Flash版
並搭配PV3D。
你可以下載其原始碼來研究, 程式碼都是公開的。
http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
http://saqoosha.net/flartoolkit/start-up-guide/
要玩這個技術, 需要具備幾個點:
1.熟悉FlashActionScript3.0 , 特別是類別的部份。
2.略懂PV3D的架構, 因為裡面是用到PV3D的核心Engine。
3.需要有一台Webcam,
4.開始玩樂吧。

即然跟Flash有關, 而且也是PV3D, 奶小茶我當然是不會錯過
使用的是官網的Focus 3D模型車和FlarToolKit製作的Demo, 原始碼官網都有提供喔。

PV3D的相關課程, 可以參考飛肯學苑奶老師所開設的PV3D班。

奶小茶Demo的原始碼按我下載

PV3D_DAE偵聽事件

PV3D點擊3D物件要能有滑鼠事件的話有機個要素。
1. Viewport3D在建構時, 第四個參數 互動模式要開啟
2. 材質的互動模式要開啟
3. 偵聽事件。
例:
var _colorMat:ColorMaterial = new ColorMaterial(); _colorMat.interactive= true; var _plane:Plane = new Plane(_colorMat,400,400); _plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler); 這樣即可完成 Plane的偵聽事件。
那DAE模型呢??
我們以官方的牛牛來練習。



一般在var dae:DAE = new DAE();
_dae.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler);
都會這樣做, 但會發現不論怎麼樣就是不會有事件發生。
原因是這樣的, 當模型被載入後, DAE的結構是被包了很多層
所以是要對其子物件偵聽, 而不是對DAE偵聽。
同時其材質要開啟互動模式。
1.先對DAE物件偵聽載入成功事件。
2.使用dae.materials,先得到dae的材質名稱, 得到 mat0 , 這個值會因載入不同的模型而不同 ;
dae.getMaterialByName("mat0").interactive = true;
//開啟其互動模式。
3.使用下方法來得到子物件並偵聽。
trace(dae.childrenList()); //會得到COLLADA_Scene trace(dae.getChildByName("COLLADA_Scene").childrenList()); //會得到 vsn-mats; dae.getChildByName("COLLADA_Scene").getChildByName("vsn-mats").addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler); dae.getChildByName(&…

AS2_AS3_attachMovie一問

這一陣子學生問到的問題
AS2
使用attachMovie或是createEmptyMovieClip物件時
for(var i:Number = 0;i<2; i++){
this.attachMovie("xxx_mc","name"+i,i)
}

之後可以使用name0.gotoAndPlay(2)
來呼叫name0元件。

AS3
使用new 物件
for(var i:Number = 0;i<2; i++){
var _mc:MovieClip = new ItemMC();
_mc.name = "name" + i;
this.addChild(_mc);
}

為什麼不能使用name0.gotoAndPlay(2)呢
原理是這樣的

AS2
MovieClip的實體名稱, 會被視為是指定容器下的一個變數
以上方為例, 現在的時間軸就多了二個變數, name0和name1,
所以可以直接使用其實體名稱來呼叫

AS3 MovieClip的name是該物件的屬性
不屬於容器物件的變數
所以當然無法使用名稱來呼叫
以上方為例,現在的時間軸就多了二個MovieClip物件, 其name屬性為name0和name1
要呼叫該物件的話, 必需使用
var _myMC:MovieClip = this.getChildByName("name0") as MovieClip;
//抓取子系物件依名稱, 再將其轉換型別成MovieClip
_myMC.gotoAndPlay(2);
//之後就可以使用gotoAndPlay的方法。

<br />
SourceCodeDown

PV3D_向量3D文字

PV3D加入了新功能, 其實加了好一陣子了啦
這次來學習如何製作向量的3D文字
之前只能使用MovieMaterial來製作, 但出來的字就是很點陣, 不滿意
使用的類別為:
Text3D
new Text3D(文字:String , 字型 , 材質 )
文字:任意的英文字母或字元, 中文的話比較麻煩。
字型:目前內建了四種字型,分別是:
HelveticaBold
HelveticaLight
HelveticaMedium
HelveticaRoman
如果想要另外的字型, 也是有解決的辦法。
Text3D是繼承DisplayObject3D, 所以擁有其全的的屬性和方法。

材質的部份需要用使Letter3DMaterial
new Letter3DMaterial(色碼:uint, alpha值:Number );
這樣就可以


完整程式碼:

package { import caurina.transitions.Tweener; import caurina.transitions.properties.CurveModifiers; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; //import milkmidi.papervision3d.view.BasicViewX; import milkmidi.utils.NumberUtil; import org.papervision3d.cameras.CameraType; import org.papervision3d.materials.special.Letter3DMaterial; import org.papervision3d.typography.fonts.HelveticaMedium; import org.papervision3d.typography.Text3D; import org.papervision3d.view.BasicView; [SWF(width = "950", height = "500", frameRate = "41", backg…

Loading水波特效

之前在一個日系的彩粧網站看到的效果
覺得還滿有趣的, 自已來實作一個
主要用到的類別是BitmapData的perlinNoise
來產生雜點
再使用DisplacementMapFilter來結合出效果



SourceCodeDown

Tweener載入圖片特效

借一下Albert的網站來做個教學
http://www.albertlan.com/client/mocafusion/
點選網站WORKS選項
小圖被點下後, 開始載入圖片,
後方的背景會跟著縮放, 載入完成後, 會有一個亮度的效果
製作方法如下:

1.按下按鈕後, 開始載入指定的圖片
2.讓背景的黑色框縮小成280x22
讓進度bar縮小成2x20, 當縮小完成後, 開始指入圖片
3.載入進度同時, 讓進度bar縮放。
4.載入成功後, 讓進度bar縮放跟圖片一樣的寬高。
讓背景縮放比圖片的寬高都多出20。
同時讓圖片至中。
5.圖片由亮至沒有效果。
import caurina.transitions.Tweener; //匯入Tweener import caurina.transitions.properties.ColorShortcuts; //匯入ColorShortcuts ColorShortcuts.init(); //啟動ColorShortcuts.init函式 //這樣即可在Tweener裡來調整亮度。 var ldr:Loader = new Loader(); this.addChild(ldr); //Loader物件, 載入圖片。 ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressHandler); //偵聽載入進度。 ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler); //偵聽完成進度 b0.addEventListener(MouseEvent.CLICK,clickHandler); b1.addEventListener(MouseEvent.CLICK,clickHandler); //偵聽場景上的按鈕。 function clickHandler (e:MouseEvent):void { if(e.currentTarget == b0){ loadImage("1.jpg"); }else{ loadImage("2.jpg"); } } function loadI…

Tweener快速上手1

什麼是Tweener?可以用來做什麼?
Tweener是架構在Flash ActionScript2/3的開源類別檔,
可以方便快速的修改數值的移動。
好比希望某個變數能由0到100且是在一秒鍾內完成
或是可以套用許多的移動公式。
要使用時, 先到官網下載。
http://code.google.com/p/tweener/
右手邊有個Featured Downloads:。
下載tweener_1_31_74_as3.zip
或是可以下載AS2版的tweener_1_31_74_as2.zip
下載完成解壓縮, 會有個caurina的資料夾

安裝該Class有二個方法
1.把caurina資料夾和要發怖的fla放在同一層資料夾下
這樣該fla即可以使用Tweener類別
2.在本機新增一個資料夾, 筆者設定的路徑為:D:\Classes
把caurina拷貝過去。
開啟Flash, 上方工具的偏好設定

在選擇左邊的ActionScript
按下右邊的ActionScript3.0設定

新增一組路徑, 記得別把本來的預設路徑移掉, 不然Flash會不能用。

現在場景上有一個名為clip_mc的物件, 我們希望他能由現在的座標, 移動到200,200的位置,
且是在1秒鍾內完成。
可以使用以下的程式碼。
import caurina.transitions.Tweener; //要使用Tweener時, 必需要先import。 //Tweener.addTween(目標物件:Object,參數:Object) Tweener.addTween(clip_mc, { x :200,//clip_mc物件的x屬性。 y :200,//clip_mc物件的y屬性。 time :1 //在幾秒鍾內完成該Tweener的動作。 }); /*或是 var obj:Object = new Object(); obj.x = 200; obj.y = 200; obj.time = 1; Tweener.addTween(clip_mc, obj ); */ /* 物件的宣告方式有二種。 var obj:Object = new Object(); obj.x = 200; obj.y = 200; 或是 var obj:Object = {x:200 , …