milkmidi Blog

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

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

這次使用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

翻書效果第一看到時, 還真是讓我驚呀 怎麼會那麼的酷, 但現在這效果好像有些用到爛了 那就來舊瓶新裝, 結合PV3D 就有了3D版的翻書效果啦 剛好前一陣陣子參加了歐拔藍的春酒, 認識了不少朋友 就借了幾張照片來Demo, 剛好第一張就是奶小茶我啦。

在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 _d

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當二個物件重疊時 會產生破圖的問題 下方的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

http://ajarproductions.com/blog/ 又有好用的工具發表了喔。 這次的工具名稱是 MotionSketch 簡單來說, 就是可以直接使用畫筆, 繪製一段路徑後, 物件就可以跟著他跑了 Video Demo 下載mxp,並使用Adobe Extension Manager CS4安裝即可

還是來整理一下這個問題 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.

這個效果在許多的活動網站還滿常見的 類似Photoshop的變型工具, 只是要在Flash裡實作。 奶老師我之前有寫過AS2版, 現在有現成的AS3類別檔, 該作者寫的真是完善呀 Demo： 下載類別 如果是Flex的使用者，可以參考另一位作者修改的版本。 http://www.sephiroth.it/weblog/archives/2007/07/transformtool_modification.php

在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 />

參考網址： 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 簡單來說, 就是透過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點擊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);

這一陣子學生問到的問題 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

不管Flash再強大, JavaScript永遠是不會被打敗的 這兒有很不錯的網站可以參考 http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript

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 =

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

借一下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"); }

什麼是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; 或是