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

運用Flash在2D畫面顯示3D效果 洪偉肯 Wicken，1985，p131 1.尺寸(size) 一般而言，物體在近處顯得較大，遠處顯的較小，可由此來表達遠近的感覺。 若有兩物體存在時，可比較其「相關尺寸」(relative size)，較大的物體一般會感覺是距離較近。 「熟悉的尺寸」(familiar size)，亦深深影響人對尺寸判斷的感覺。 2.重疊(interposition) 當兩個不透明的物體在同一視線上時，會感覺位於最上層(離視線最近)的距離較近，在下層的距離較遠。 3.光線與陰影(lights and shadow) 如凹陷的表面所造成的光亮與陰暗之層次，讓人產生凹陷的感覺，並知覺到深度。 4.高地與清晰度(elevation and clarity) 遠處地平線會位於照片的上方，且亦會因大氣粉塵作用，使遠處感覺較不清晰。 5.透視及紋理(perspective and texture) 此兩因素常是相輔相成的，道路在遠方看來似乎匯集成一點，左方之玉黍薯田較具規則的紋理，在遠的地方顯得較密集，近的地方則顯得鬆散，藉此可判斷遠近與深度。 如何在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效果(二) 在2D的Flash中模擬3D透視 將3D座標轉換為2D位置的轉換方式 無透視 // 初始值設定 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); } } //控制第2~5排圓球的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; // 產生圓球屬性