2011年1月18日 星期二

Chuk-Portfolio_網頁程式B- vimeo置入Flash

雖然說用AS3.0 延長成了不少製作時間
不過最後有個功能也多虧了AS3.0 才讓我順利達成
那就是把vimeo的影片可以放入

為什麼要用vimeo而不用使用者較多的youtube
因為youtube的介面太醜了 就這樣而已
所以我的動態作品 比較完整的才會放在vimeo
其它的才放在youtube

至於怎麼寫在Flash中放入vimeo影片的程式 我也不會~
我是在vimeo上 找到別人分享的檔案 再拿來改的

它的程式如下:

////////////////////////////////////////////////////////////////////////

import flash.system.Security;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;

var moogaloop:Sprite = new Sprite(); // the video player
var player_width:int=650;
var player_height:int=486;
var clip_id:int = 3257040;

function startLoad():void
{
Security.allowDomain("bitcast.vimeo.com");
var v_loader:Loader = new Loader();
var v_request = new URLRequest("http://bitcast.vimeo.com/vimeo/swf/moogaloop.swf?clip_id=" + clip_id + "&server=vimeo.com" + "&width=" + player_width + "&height=" + player_height + "&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1");
v_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
v_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressHandler);
v_loader.load(v_request);
}

function onCompleteHandler(e:Event):void
{
// Position the player where you want it
moogaloop.x = 5;
moogaloop.y = 10;
moogaloop.addChild(e.currentTarget.content);

// Create the mask for moogaloop
var v_mask:Sprite = new Sprite();
with( v_mask.graphics ) {
beginFill(0x000000, 1);
drawRect(moogaloop.x, moogaloop.y, player_width, player_height);
endFill();
}

addChild(v_mask);
moogaloop.mask = v_mask;

addChild(moogaloop);
}

function onProgressHandler(e:ProgressEvent):void
{
var percent:Number = e.bytesLoaded / e.bytesTotal;
trace(percent);
}

startLoad();

////////////////////////////////////////////////////////////////////////

至於要怎麼改成自己的影片
是我自己矇到的
只要把編碼改成自己影片的編碼就可以了

vimeo程式

這裡分享一下當初找到的檔案 vimeo
可以試試看 這樣直接在線上看真的很方便



網頁製作流程記錄完了
再回顧一次吧 Chuk-Portfolio

2011年1月8日 星期六

Chuk-Portfolio_網頁程式A

網頁程式部分 是用AS3.0製作
想說沒啥基礎 要用就直接從AS3.0開始吧
這個決定 使得製作時間更長了
因為大部分的教學 都還是在AS2.0
所以碰到一點問題就會卡半天
而起初碰到的大關卡
就是網頁過場 需要 LOADING SWF的問題

比如我想要 在A.swf時 按下B鈕時 會先LOADING Z.swf 跑完後 再 LOADING B.swf 進來
在B.swf時 按下A鈕時 會先LOADING Z.swf 跑完後 再 LOADING A.swf 進來

這後來請教大師 說要寫陣列的程式 程式大約如下(現在看已經有給他忘光了):

////////////////////////////////////////////////////////////////////////

var HOME:Loader = new Loader();
var swfArray : Array = new Array('Z.swf', 'B.swf');
var swfIndex : int = 0;
HOME.contentLoaderInfo.addEventListener(Event.COMPLETE,loadSWFListener);
LOADER_mc.addChild(HOME);

home_btn.addEventListener(MouseEvent.CLICK,LOADHOME);

function LOADHOME (e : MouseEvent):void{
loadSWF();
}
function loadSWF():void {
HOME.load(new URLRequest(swfArray[swfIndex]));
swfIndex += 1;
}
function loadSWFListener (e:Event):void{
var _mc : Loader = e.target as Loader;
addEventListener(Event.ENTER_FRAME, myEnterFrame);
}

function myEnterFrame (e:Event):void{
trace(HOME.contentLoaderInfo.url);
var _mc : MovieClip = HOME.content as MovieClip;
if (_mc.movie_mc.currentFrame == _mc.movie_mc.totalFrames){
if (swfIndex == swfArray.length){
swfIndex = 0;
} else {
loadSWF();
}
removeEventListener(Event.ENTER_FRAME, myEnterFrame);
}
}

///////////////////////////////////////////////////////////////////

但實驗的結果 發現當 LOADING Z.swf 跑完後要接上 LOADING B.swf 進來的中間
會閃出原來 A.swf 這底圖出來 才會 LOADING B.swf
這效果無法解決

而且後來發現 工具書教你用 new Loader 這指令
在硬碟中 你的網頁可以跑得很順
但放到網路上 由於需要下載 所以會有讀取時間
這點我翻了不少工具書都沒提到

由於中間有停頓 就不是我要的效果
所以後來還是用最土法煉鋼的方式
把所有的主頁面 次頁面 都放在同一個場景
再下指令來切換的方式作完成
為什麼一開始不用這個方式
是因為怕檔案太大 會讀取太久
不過作下來4.2MB 也還好
作品部分 再用new Loader 就好

這裡記錄一下 讀取的寫法

///////////////////////////////////////////////////////////////////

new_btn.addEventListener(MouseEvent.CLICK,LOAD_new);
function LOAD_new(event:MouseEvent)
{var request:URLRequest = new URLRequest("NEW_mc.swf");
var loader_new:Loader = new Loader();
var loadText_new:TextField=new TextField();
loader_new.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress_new);
loader_new.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete_new);
function loadProgress_new(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
trace("Loading: "+percentLoaded+"%");
loadText_new.textColor=0xFFFFFF
loadText_new.x=480;
loadText_new.y=320;
loadText_new.text="Loading: "+percentLoaded+"%"
}

function loadComplete_new(event:Event):void {

trace("Complete");
removeChild(loadText_new);
}

addChild(loadText_new);

loader_new.load(request);

LOADER_mc.addChild(loader_new);}

///////////////////////////////////////////////////////////////////

這些程式都不是我寫的 都是網路上找來的
所以 大致上都忘光光了~~

2011年1月3日 星期一

獵命師_毛冉 製作過程012_texture

接下來進行材質與貼圖部分了

毛冉貼圖A_

運用高模算出來的AO與LIGHT MAP
再加上顏色與材質圖片
先大致繪製整體出來看看效果

毛冉貼圖B_紋路位置

對紋路的位置有些質疑
紋路的意義應該是要強化原本強壯的右手
還是應該祈禱對萎縮的左手可以有所盼望
最後還是決定跟設定一樣位於右手
比較強悍 也比較順眼

毛冉貼圖C_頭髮與材質

再來貼上Normal map 與調整材質
再用HAIR來製作髮冠
這樣頭髮怪怪的 不像粗曠的人


毛冉貼圖D_頭髮與材質修改

調整Normal強度與手臂的金屬質感
頭髮給它密度少一點 粗一點 捲一點
讓他更符合角色設定

毛冉貼圖E_表情

將燈光強度更強烈 加了憤怒的表情 但發現一件事
我忘了做舌頭 之後有必要在加好了 先偷懶一下
毛冉的texture就是這樣

2010年12月27日 星期一

獵命師_毛冉 製作過程011_Normal map以xNormal運算

再來進行毛冉的 Normal map 與 AO 的運算
這裡用xNormal 運算 因為比MAX算的快多了
讓自己複習一下 也順便給自己作記一下筆記

001

選取低模後到Render To Texture
將Projection指定給對應高模


002

到Projection下調整藍框的範圍
不可範圍過大要適中
可用數值調整後
試跑小張圖
圖紅色部分表示包覆不完全
可手動點作調整

003

匯出SBM格式
安裝好xNormal後
MAX會多出此格式

004

到xNormal
按右鍵Add meshes
匯入高模的OBJ檔

005

按右鍵Add meshes
匯入低模的SBM檔
並將Use cage打勾

006

選取需要的NR與AO格式
即可輸出

007

可以直接手繪修改掉一些小缺陷
但是不要修掉UV的接縫
修了反而會有接縫~~

008

將Normal map 貼回給低模跑圖
效果跟之前高模跑得差不多ㄝ

2010年12月20日 星期一

Chuk-Portfolio_作品編排過程B

這裡貼一下有整理但最後沒有收入在網站的作品

版_舊童話2100527
有點太久所以沒收入

版_萬王2_pc100525
也是太久又特色不足所以沒收入

版_萬王2_男pc100525
覺得臉型有點破壞到所以沒收入
順道一提這是第一次接服裝設定
另外加上3d製作

版_81_KEY2006_pc_瓦塔女100523
81key收入太多
而造型與瓦塔男有重複所以沒收入

版_81_KEY2006_pc_詠夜女100523
81key收入太多
而體型太纖細編排起來怪怪的所以沒收入

版_81_KEY2006_pc_人類男100523
81key收入太多
而人類特色不大所以沒收入

版_81_KEY2006_pc_人類女100523
81key收入太多
與人類男一樣特色不足所以沒收入

版_81_KEY2006_pc_露露男100523
81key收入太多
而造型與露露女雷同所以沒收入

版_彩虹氣泡npc100531
偏排起來怪怪的所以沒收入



這些也花費不少時間
最後沒用有點浪費
所以這裡鞭屍一下

2010年12月12日 星期日

Chuk-Portfolio_作品編排過程A

現在來說說 佔據製作時間3分之一的作品部分
除了整理作品外
編排也花了不少時間

作品_101212A

首先依照一般的編排法
總覺得背景空空的不是很舒服
所以在背景加點東西

作品_101212B

背景加入角色的背面作搭配
還是覺得不是很完整
於是開始找有關構圖的資料
其中用了三分構圖法與拜占庭構圖法試試

作品_101212D
三分法

作品_101212C
拜占庭構圖法

利用角色的姿勢來配合構圖法
覺得比較喜歡拜占庭的
於是將所有腳色都依此構圖法為原則
進行擺姿勢與輸出

等角色輸出都用得差不多了
才覺得這樣作品會太多了
點一次才看的到一件作品
連自己都懶得看完
更何況別人
於是想說一次能看到一系列的話會省事不少

作品_101212E

將一系列擺在一起似乎還蠻有氣勢的
但由於作品依彈跳視窗的方式呈現的話
無法擺脫會有個邊框的問題 所以不予採用

最後改用在網頁面板上直接呈現不跳出視窗
最大畫面只能以1024 X 580
跟網頁面板一樣大而已
所以要進行刪減
要選擇刪除對象 又是另一件心理上的挑戰

作品_101212F

這是最後依1024 X 580 來編排的
腳色排排站的看起來是還OK
但是有些作品是以直立的方式呈現的
如 毛冉的示意圖 就只能硬塞了

2010年12月5日 星期日

獵命師-毛冉 製作過程010_ 拓撲topology

接下來是進行拓撲(topology)
這裡選擇用max2010內建功能來使用
拓撲用到的功能大概就幾項
這裡簡單筆記一下相關的功能

101205A

起初也有想過為何不用一開始進去zbrush細雕的初模
但想說教學都是這樣教 應該不會沒有它的道理
況且自己也沒作過 第一支試試無妨

101205B

左邊是進去zbrush細雕的初模
右邊是重新拓撲的模型 自己作沒有面數限制 大約用了1萬面
心得為還是拓撲一次的好
因為一開始的初模已經跟zbrush細雕後的高模
有頗大的出入 比如肌肉的隆起或圓弧大的不足
且重新拓撲一隻也沒多久 紀錄是16個小時(好像也不少時間)

反正就是這樣

2010年11月27日 星期六

Chuk-Portfolio_美術設計過程E

美術設計過程最後講到動態LOGO



網站大概有個雛形後 就預想了一段
以點.線.面 為出發點來生成LOGO
但後來發現點.線.面的構成似乎不少人用
所以網站做得差不多後 決定再想新的動態LOGO



這次以三條線段交錯
形成logo中心的三角形播放鍵
再進而延伸出整個logo
但完成後總覺得有種拖拖拉拉的感覺

Chuk-logo from jomanwing on Vimeo.



於是再去觀察廣告中的logo
發現像汽車廣告 最後的logo
幾乎都是一道光閃一下
簡簡單單的帶過又不失質感
最後我也決定簡單的交代就好

就是這樣

2010年11月19日 星期五

獵命師-毛冉 製作過程009_ZBRUSH 減面

網站的文章還沒寫完 只是穿插點別的文章比較不會無聊
之前說過網站做好後 來繼續進行毛冉的製作
不過先不從士兵的高模進行(見前文)
而是進行毛冉的拓撲

據阿男說zbrush的拓撲不好用
故打算到max去進行拓撲
所以第一步 就是將zbrush製作的模型輸出到max去
但直接輸出的面數會太大 依我目前的電腦情形
可能還沒製作完 電腦就跟地板親熱去了吧

所以使用加欣推薦的zbrush plusin--Decimation Master 來進行減面
這plusin可以直接到zbrush官網去下載

101120A

裝好Decimation Master後
到zbrush來進行減面的動作
目前的面數是350多萬面

101120B

我們到Zpluins\Decimation Master欄
先按 2-Pre-process Current 作計算(這步驟我的電腦就跑不動了 只好換台電腦跑)
再來到 3-Decimate 將預設的20% 往下調 調到10%左右(可以自己測試看看)
最後就按下 Decimate Current

101120C

最後面數減到了70幾萬

101120D

接著就可以輸出到max去進行拓撲了

以上是zbrush減面功能

2010年11月13日 星期六

Chuk-Portfolio_美術設計過程D

其他子頁沒有太大不同
只有作品欄更動較大



原本是以跑馬燈的方式 偵側滑鼠的位置作移動
但當我lpading外部連結時 作品雖然蓋過了作品欄
而且我自己要找特定作品 還得移動滑鼠慢慢的等它出現
基於以上幾點而更改了方式



後來改為比較傳統的排排站方式 比較沒有操作上的問題
但不是很喜歡 之後有機會會給他再修改~

就這樣