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就是這樣