享受視覺,

享受音樂,

泡杯咖啡,

再來細細品嘗每一篇文章不是很棒的一件事嗎 ?

請移到新部落格喔~ zzz

2009年9月28日 星期一

[閒聊] 視覺設計師 V.S. 程式設計師

以下是 moka 的看法。

以網頁設計而言,

視覺設計師與程式設計師哪裡不同 ? 哪裡相同 ?



視覺設計師的工作

板形切割、使用者介面、配色、字級調整與字型選擇、對每一 pixel 的錙銖必較,

甚至是如何將視覺張力、情感表達、故事性、想法靈感、文化、生活融入在網頁設計中,

因此平日就必須多培養觀察能力,多腦力激盪,

一杯咖啡、一片葉子,還有身邊發生的林林總總或許就是靈感來源。



程式設計師的工作

程式撰寫、資料庫、效能最佳化、跨平台、培養邏輯思考、自我時間規劃、

探討軟體限制與極限、最佳產能、模組化、資訊架構規劃、學不完的 API 與軟體,

尤其面對新資訊新科技不斷的創新,要隨時吸收與掌握。



設計師的素養

不管是程式設計師或是視覺設計師,有些時候會面臨重新設計的問題,

自我意識較高的設計師會沒辦法接受他人意見,但是這樣並沒有辦法解決問題。

是否要放棄自己的想法,抑或是完全採納別人的意見,而到底要如何做抉擇呢?


首先得先了解何謂設計師。

設計師即發現與分析問題並找出解決辦法的人。

因此當接受他人批判時,

設計師應該先提出自己的觀點,包含為什麼、優勢在哪邊?

同樣的設計師也要引導批判者提出自己的觀點,

並了解批判者的想法,

像是如何讓對方完整表達清楚為何要修改、設計缺陷在哪邊,是否有更好的解決辦法。

在問與答之間,設計師需要依靠的是智慧與經驗來解決問題,而不是感情用事,

雙贏才是最終目標。


根據 test 網友所述,moka的想法是:

對有程式概念的視覺設計師來說,
在建構畫面時可以更有邏輯性與設計原則。
而對有視覺概念的程式設計師來說,
可以設計有創意且符合人機互動原則的程式設計。
尤其專案中可以很快搭起程式互動與視覺的橋梁,
並且迅速掌握整體設計概念。
兩個方向都接觸可以讓設計有更宏觀的看法且容易作專案整合。

2009年9月27日 星期日

[作品] 台北的夕陽



攝影自政大附中附近 (點圖放大)
Canon G9
f/3.2
1/40 sec
ISO-80
焦距13mm
photoshop curve 加亮

2009年9月22日 星期二

[閒聊] Adobe Director 12 快出吧 ~

目前 flash pv3d 的三維呈現是採用軟體模擬方式處理所以比較慢,
各位真的想做 3d 遊戲的話需要使用 directX 或 openGL , 因為這兩套 API 才是主流
Adobe 有出一套多媒體應用程式叫作 Director, 其可以說是 flash 開發的雛形
所以 Director 基本上跟 flash 的操作方式大同小異,
但是 Director 有 3d 的函式能支援 directX 與 openGL, 所以能做出專業的 3d 遊戲.
如果真的想要開發 3d 遊戲可以選擇 Director.

Director 也支援線上播放, 但需安裝 shockwave player
就像 flash 必須安裝 flash player 一樣的道理.
Director 可以說是 flash + AIR,
因此可以做動畫, 作遊戲, 作網頁, 也可以與作業系統互動. 甚至可以開發外掛 ( Xtra ).
雖然現在 flash 發展的比較好,
但是 Director 在 3d 的表現和各種檔案的整合能力還是比較強,
所以還是有它的的價值.

moka 是從 Director 先學再學 flash. 所以很清楚了解兩者特性.
有關 Director 的問題這邊也可以做個交流 : ) ~

Director 較新資訊
The Director Mile High Table O' Products 所有xtra
閑闪互动多媒体-Director director 相關新聞
shockwave 官方部落格
Director 產品資訊

[作品] CG - Android MK II



Android 機器人真可愛,幫它改裝成黑色板 : )
photoshop + 3dmax 製作

2009年9月20日 星期日

[教學] AS3 函式類別 package 表示方法

// 將 Classes 作 A, B 函式類別的 package

var Classes:Object = {

 A:function (){trace("A call")},

 B:function(){trace("B call")}

}


var myObject:Object = new Classes.A;

var myObject2:Object = new Classes.B;

2009年9月19日 星期六

[教學] AS3 命名空間類似介面用法

如果 public、private、protected 權限沒有辦法滿足你,另外可以自訂命名空間

下方有三個類別分別為:

myAccess.as - 定義空間名稱為 myAccess

DO1.as - DO1 的 draw 函式只給命名空間為 myAccess 所使用

DO2.as - DO2 的 draw 函式只給命名空間為 myAccess 所使用

//myAccess.as

package { public namespace myAccess;}

//DO1.as

package { public class DO1{ myAccess function draw():void{ trace("draw DO1"); } }}

//DO2.as

package { public class DO2{ myAccess function draw():void{ trace("draw DO2"); } }}


// 客戶端程式,這邊 DO1 與 DO2 之間並沒有繼承關係,
// 但是利用 myAccess 命名空間可以建立兩者關係
// 下方跟介面(接口)用法很類似,但是存取權限方式可以有更有彈性的設計


var do1:DO1 = new DO1();
var do2:DO2 = new DO2();

//do1.draw(); // error , can't directly access , user不能直接存取
//do2.draw(); // error , can't directly access , user不能直接存取

function drawProxy(Ob:Object):void{

 // use 指令為使用某空間
 // 本設計為在此函數內才能存取 ,或許將此函式封裝在其他類別內更好 : )

 use namespace myAccess;
 Ob.draw();
}

drawProxy(do1);
drawProxy(do2);

[教學] flash as3 enum 結構設計方法

public final class Color{
 public static const BLACK : String = "black";
 public static const WHITE: String = "white";
 public static const RED: String = "red";
 public static const BLUE: String = "blue";
 public static const GREEN: String = "green";
}

[教學] communication between C# and flash

不想用 AIR 的話也可以用 flash ExternalInterface 與 C# 溝通來做出更多樣化的程式。

flash 與 C# 雙方利用傳字串方式來呼叫相應函式。

Flash 端:

// 被 C# 呼叫的函式

ExternalInterface.addCallback("cstoas", function cstoas(s:String):String{

  test.text = s; //會傳'酷耶'字串進來

  return "cstoas return msg"; //回傳字串到C#

});


// 呼叫 C# 函式

functionExternalInterface.call("axShockwaveFlash1_FlashCall");

C# 端:

private void axShockwaveFlash1_Enter(object sender, EventArgs e) {

  axShockwaveFlash1.LoadMovie(0, Application.StartupPath + "//csharp.swf");

  // 呼叫 flash cstoas 函式,可丟字串參數與接收字串回傳參數
  Debug.WriteLine(
    axShockwaveFlash1.CallFunction(
    "<invoke name='cstoas' returntype='xml'>" +
    "<arguments><string>酷耶</string></arguments></invoke>"
    )
  );
}

private void axShockwaveFlash1_FlashCall(object sender, AxShockwaveFlashObjects._IShockwaveFlashEvents_FlashCallEvent e) {

  // 被 flash 呼叫的函式
  Debug.WriteLine("astocs");
}

[教學] 3 行作 AIR alert

flash、flex、air 要學哪一個 ?
FLASH - 強項在動畫與視覺設計部分,as3之後將 UI 部分交給 Flex 主導,可發布 AIR。
FLEX - 強項在 UI,以 MXML 格式撰寫 UI,可快速建立應用程式並與伺服器整合,可發布 AIR。
AIR - 將 FLASH 與 FLEX 做延伸,可建立桌上型網路應用程式,像是 fileio、native window、SQL Database、DRM、PDF、Air.Net ... 等控制都可以做到。
對程式設計出身者可以選擇 FLEX - 以撰寫類似 html 方式快速建立使用者介面(超多UI元件可以選擇)
對視覺設計出身者可以選擇 FLASH - 不管是動畫、特效或遊戲都可以輕鬆建立
兩者都可以發布 swf 應用程式
兩者都可以發布 AIR 應用程式

回歸正題要怎麼在 AIR 中使用 alert >>>







Flash AIR 沒有 Alert 可以用,那借用 html 裡 javascript 的 alert 如何?


var html:HTMLLoader = new HTMLLoader(); // AIR 的功能 HTML container


this.addChild(html); // HTML container 也是 DisplayObject


html.loadString("<script>alert('DesignPlusPlus')</script> ");// show javascript MessageBox

[教學] PHP GD 32bit ARGB Color

flash 有 setPixel32 函式提供透明像素著色處理 , 以下是 PHP GD 模擬方式

function setPixel32( $x, $y, $color, $im ){
 $a = $color >> 24;
 $r = $color >> 16 & 0xFF;
 $g = $color >> 8 & 0xFF;
 $b = $color & 0xFF;
 $a = $a >= 0 ? $a : 256 + $a; //$color 超過 0x80FFFFFF 作溢位修正

 $color = imagecolorallocatealpha ($im, $r, $g, $b, (255-$a)>>1 ); //alpha : 0~127
 imagesetpixel($im, $x, $y, $color);
}

$image = @imagecreatetruecolor(640, 480) or die("Cannot Initialize BitmapData");
setPixel32( 20, 20, 0x33FFCC00, $image ); //半透明橘色

2009年9月16日 星期三

[閒聊] 簡單 jogl 入門

想深入了解 3d , 用C++ 開發 DirectX 跟 Opengl 看似很難上手.pv3d 製作上又沒頭緒
先來看看 jogl 吧 , 還記得 java 跟 opengl 兩套都是跨平台的程式吧.
jogl 整合 java 與 opengl. 透過 java 也可以撰寫 opengl 程式.
這對 as3 developer 是件好消息.
因為 java 跟 as3 撰寫起來根本一樣簡單.
學習 3d 可以從這邊開始 ~
而且 eclipse 編譯器 code hint 太強了 ( 跟 flex builder(flash builder) 同一個編譯器 )
可以爽爽寫程式碼 ~ :)

下載 eclipse java 編譯器 ( Eclipse IDE for Java Developers (92 MB) )
下載 api 說明書與函式庫 ( jogl-1.1.1a-docs.zip & jogl-1.1.1a-windows-i586.zip )
Opengl 教學說明 ( 關於此教學是以 C 作範例教學,不過基本上範例用的函式名稱跟 jogl一樣 )

安裝說明
1. 安裝 eclipse
2. 解壓縮 jogl-1.1.1a-windows-i586.zip ( 我的平台是windows )
3. 將解壓縮的所有 dll 放在 X:\Program Files\Java\jre6\bin
4. 將解壓縮的所有 jar 連到 eclipse 的外部函式連結中

moka 範例

除了 java 可以和 opengl 結合
也可以選擇類似 as3 的 C# ( 念 c sharp ) + opengl
XNA(directX) 或 darkGDK(directX) 都可以玩玩

2009年9月15日 星期二

[作品] flash 大玩 java midi

作品欣賞
JS API 帶回家

畫面中有兩條 Slider
上面是128個音符
下面是128種樂器

由 flash 的 ExternalInterface 呼叫 javascript 函式
再由 javascript 函式中呼叫 java 的 midi 函式

大致上是這樣啦 ~ 請多多指教
記得播放時要裝 JVM