運用Flash在2D畫面顯示3D效果.pptVIP

,運用Flash在2D畫面顯示3D效果,洪偉肯,明志科技大學 工業設計系,1.尺寸(size),一般而言，物體在近處顯得較大，遠處顯的較小，可由此來表達遠近的感覺。 若有兩物體存在時，可比較其相關尺寸(relative size)，較大的物體一般會感覺是距離較近。 熟悉的尺寸(familiar size)，亦深深影響人對尺寸判斷的感覺。,scale,2.重疊(interposition),當兩個不透明的物體在同一視線上時，會感覺位於最上層(離視線最近)的距離較近，在下層的距離較遠。,layer,3.光線與陰影(lights and shadow),如凹陷的表面所造成的光亮與陰暗之層次，讓人產生凹陷的感覺，並知覺到深度。,layer,4.高地與清晰度(elevation and clarity),遠處地平線會位於照片的上方，且亦會因大氣粉塵作用，使遠處感覺較不清晰。,alpha,5.透視及紋理(perspective and texture),此兩因素常是相輔相成的，道路在遠方看來似乎匯集成一點，左方之玉黍薯田較具規則的紋理，在遠的地方顯得較密集，近的地方則顯得鬆散，藉此可判斷遠近與深度。,for() repeat,如何在Flash產生3D效果,1.Prerendered stream: 如以Quicktime或gif動畫先製作好3D影片後再置入flash 中作運用, 但一般而言可運用的互動性最低, 檔案亦極大。 2.2D Sprite animation: 個別物體預先繪圖成一MovieClip元件，並分別輸入至library中成為演員(symbol), 以設計者的技巧, 透過尺寸, 重疊, 光線與陰影, 高地與清晰度, 透視及紋理等方式的搭配來呈現, 再搭配如移動、縮放、旋轉, 產生3D的變化, 其互動性亦相當高。(亦可運用swish外掛軟體製作) 3.Realtime 3D rendering: 3D圖案與效果係透過Flash本身的Action Script程式電腦的即時運算呈現於畫面之中, 互動性最高, 如使用者可依其需求自行控制物件, 一般而言檔案極小, 但需較快的運算速度, 設計者亦需具備程式設計的能力。,偽裝(fake)的3D效果(一),作品來源: 網路範例,作品來源: 明志科大工設系,偽裝(fake)的3D效果(二),可運用Swish軟體製作文字3D特效(如爆炸, 旋轉, 波動等) Swish網站: /index.php?area=home,作品來源: 明志科大工設系,在2D的Flash中模擬3D透視,將3D座標轉換為2D位置的轉換方式,無透視,一點透視,二點透視,X,y,無透視,/ 初始值設定 origin_x= 175; origin_y= 350; ball_size =100; i_num=5; j_num=5; k_num=5; / 運用for迴圈產生125個圓球 n=0; for(var k=0;kk_num;k+) for(var i=0;ii_num;i+) for(var j=0;jj_num;j+) n+; duplicatemovieclip(“/ball“,“ball“+n,-n); /設定間距 x=i*50; y=j*50; /因無透視比可用, 故以div作為z,y共同的偏離值 div=20; / 產生圓球屬性 setproperty(“/ball“+n,_x,origin_x+x); setproperty(“/ball“+n,_y,origin_y-y); setproperty(“/ball“+n,_xscale,ball_size); setproperty(“/ball“+n,_yscale,ball_size); setproperty(“/ball“+n,_alpha,100-10*k); /控制第25排圓球的x及y方向的位移 origin_x=origin_x+div; origin_y= origin_y-div; setproperty(“/ball“,_visible,false);,一點透視,/初始值設定 origin_x = 175; origin_y = 350; ball_size =100; i_num=5; j_num=5; k_num=5; /運用for迴圈產生125個圓球 n=0; for(k=0;kk_num;k+) for(i=0;ii_num;i+) for(j=0;jj_num;j+) n+; duplicatemovieclip(“/ball“,“ball“+n,-n); / 透視值設定 d = 400; x=k*50+i*50; y=k*50+j*50; z=k*50; perspective_ratio = d/(d+z); perspective_x = x*perspective_ratio; perspective_y = y*perspective_ratio; / 產生圓球屬性 setproperty(“/ball“+n,_x,origin_x+perspective_x); setproperty(“/ball“+n,_y,origin_y-perspective_y); setproperty(“/ball“+n,_xscale,ball_size*perspective_ratio); setproperty(“/ball“+n,_yscale,ball_size*perspective_ratio); setproperty(“/ball“+n,_alpha,100*perspective_ratio); setproperty(“/ball“,_visible,false);,d=100,d=300,d=700,d=400,/初始值設定 origin_x = 175; origin_y = 350; ball_size =100; i_num=5; j_num=5; k_num=5; /運用for迴圈產生125個圓球 n=0; for(k=0;kk_num;k+) for(i=0;ii_num;i+) for(j=0;jj_num;j+) n+; duplicatemovieclip(“/ball“,“ball“+n,-n); /第一個透視值設定 d1 = 500; x1=k*50+i*50; y1=k*50+j*50; z1=k*50; perspective_ratio = d1/(d1+z1); perspective_x = x1*perspective_ratio; perspective_y = y1*perspective_ratio; /第二個透視值控制 d2 = 500; x2=x1+k*50; y2=y1-i*50; z2=k*50-i*50; perspective_ratio2 = d2/(d2+z2); perspective_x2 = x2*perspective_ratio2; perspective_y2= y2*perspective_ratio2; /產生圓球屬性 setproperty(“/ball“+n,_x,origin_x+(perspective_x+perspective_x2)/2); setproperty(“/ball“+n,_y,origin_y-(perspective_y+perspective_y2)/2); setproperty(“/ball“+n,_xscale,ball_size*(perspective_ratio+perspective_ratio2)/2); setproperty(“/ball“+n,_yscale,ball_size*(perspective_ratio+perspective_ratio2)/2); setproperty(“/ball“+n,_alpha,100*(perspective_ratio+perspective_ratio2)/2); setproperty(“/ball“,_visible,false);,二點透視,d1=500 d2=500,d1=500 d2=300,3D效果實作,用方向鍵控制3D效果,產生亂數球的3D爆炸效果,Realtime 3D效果的應用,在Flash中模擬旋轉,由於在電腦程式中之角度一般均以角座標系統標示, 角度與徑度間的轉換式如下:,在圓球（point）的MovieClip內, 設定以下的Action onClipEvent(load) trans=Math.PI/180; /設定起始位置 origin_x=275; origin_y=200; /圓球的起始點 x=150; y=0; inc=.1; rotation_angle=0; onClipEvent(enterframe) rotation_angle+=Key.isDown(Key.LEFT)*inc-key.isDown(Key.RIGHT)*inc; /將rotation angle的值轉換為旋轉角的sin與cos sin_angle=Math.sin(Number(rotation_angle)*trans); cos_angle=Math.cos(Number(rotation_angle)*trans); /計算旋轉後圓球的位置 rotated_x=x*cos_angle-y*sin_angle; rotated_y=y*cos_angle+x*sin_angle; /更新圓球旋轉後的位置 x=rotated_x; y=rotated_y; /繪製圓球 this._x=origin_x+x; this._y=origin_y-y; ,在Z軸上旋轉,按右鍵正時針旋轉加速, 左鍵逆時針旋轉(減速),結論與建議,以Flash為工具模擬透視的表現方法，可提供另類的思考模式，使設計者瞭解與感受2D與3D間轉換的圖學概念，並運用Action Script語法以強化媒體設計。 Flash為向量繪圖，能將複雜的互動媒體壓縮為極小的檔案，而其所能建構的互動性極佳，適合作為操作介面模擬的媒介。 而目前亦有越來越多的網站，應用Flash展現出其互動與3D效果(如或http:/ /nikelab/)。而相關議題與技術文件的探討亦逐漸豐富，可在Macromedia網站中(/devnet/topics/3d.html) 得到相關參考資料，進階使用者可進一步參考。,參考文獻,1. 技術資料來源: /support/flash/ts/documents/3d_approaches.htm 2. 技術資料來源: /devnet/mx/flash/articles/samurai_ch2.html 3.Aks Deborah J. & Enns James T., 1992, Visual search for direction of shading is influenced by apparent depth, Perception and Psychophysics, 52, pp.63-74. 4.Aks, Deborah J., 1993, Visual search for size is influenced by a background texture gradient, Journal of Experimental Psychology: Human Perception and Performance, Vol.22, No. 6,