Eva, King, Soki, Tsz Ling, Janis, KK, Felix, Heilly, Victor Ip, Johnny,
Joe Chan, Andy Li, Kay Li, King Cheung, Deathboy, Patrick Chan, Henry Chan, Jimmy Lee, Priscilla, Ka Wai,
Boris, Quill, Denis, Way, Danny, KS, Patrick Lam, May Chan, Helen Yeung, Ahmad,
Rainbow, Carmen, Shirley, Ivan Kwan, Eden, Alethea, Matthew, Vincent, Kenix, Olivia, Chester…

另外要多謝以下各機構o既 promotional greetings XD
HSBC, AMEX, Experts Exchange, Gamer.com.tw, Xbox360Achievements.org, MegaGames, CityU 等等…

我諗每一個人細個o個陣都會許願
人大左知道呢 d 野其實無乜意思
所以與其話有乜生日願望 不如話有乜野生日目標

家: 努力為爸媽爭取一個更舒適o既生活
另一個家: 繼續學習兩個人之間相處的技巧
健康: 終於肥到少少 係時候做返多 d gym XD
工作: 或者係時候尋找一 d 新既衝擊
學業: 第二個 HKICTA 我黎喇~!!
遊戲: 要盡快砌晒 d 舊模型 XD  仲有新多 game 要打…

人生已經過左三份之一
要快 d defrag 好個人向住下一個 point 進發~!

No related posts.

首先我呢一篇文並唔係想再起爐灶引起另一場罵戰
只係純粹以一個 web developer o既角度去講下自己o既諗法
我唔係想借呢篇文章去教大家點樣揀 technology
只係將我自己所遇到o既一 d 經驗同大家分享

識得我o既人都知道 Vicker o係 Flash / Flex o既死硬派
(其實我只係唔鍾意寫 Java 者… 但係唔代表我唔會寫… 而且 UI 黎講我都好鍾意寫 XHTML 同 CSS. W3C standards 簡直係我覺得最有滿足感o既野)
同時間 Vicker 亦都係 Apple o既 Fans… 屋企用 Mac Pro… 出街用 Macbook… 電話用 iPhone…
講真… 如果你硬係要我o係 Apple 同 Adobe 之間二選一… 只會同兩個女人跌落海o既問題一樣咁困難…

至於 Apple 單方面 reject Flash 同其他 technologies (e.g. Unity3D) 係唔係唔o岩~ 我都唔想講太多
但係如果講到工作上究竟應該點揀 technologies 呢… 下面係我自己呢一排o既見解

點解以前要用 Flash?

Web o既 content 大致上可以分兩種… Web page 同 Web application

Web page 裡面出現得最多o既 Flash 不外乎係 interactive banners, video ads 又或者 widgets
原因簡單不過… Banners 黎講 Flash file size 夠細而且 animation 同 interactivity 都好易寫
Video 用左 Flash 就可以解決 cross platform o既問題 (wmv 要倚靠 Windows Media Player / mov 要倚靠 Quicktime)
呢兩點正正就係 HTML5 足以 replace Flash o既原因~ 下面會再詳細講

至於 web applications (或者 RIA) AJAX 絕對係大哥
基本上好多常用o既 RIA 都係靠 XMLHttpRequest 走天下
(GMail, Google Doc, Facebook, Twitter, etc…)

但係 AJAX 無論點強勁都好… UI 始終係靠 HTML + CSS render
只要用上 CSS 就會出現 cross browser issue
那怕只係簡單一條 border… 一個 padding… 都夠你玩幾個鐘
IE, Firefox, Safari, Chrome, Opera, Camino, etc…
你寫一次就要 test 幾十次…

就係因為要解決 cross browser o既問題先會有 browser plug in 呢一層 layer o既出現 (無論係 Java 定 Flash 定 SilverLight)
講到尾我地做 developers / dezelopers 其實只係想寫 d 好野出黎者…
Cross browser 呢 d 野難得有 plug in 幫我地解決… 何樂而不為

其次 AJAX 的確有好多 libraries… 好多 UI components…
但係有幾多個 libraries 可以 combine 得好呢?
YUI 有自己一套… jQuery 又有自己一套… MooTools 又有一套… 獨立用又唔夠用… 夾埋用又唔o岩啞..
就好似你食雪糕想食兩隻味… 去 Godiva 買一個球… 去 Papagalo 買另一個球… 放埋同一隻杯度…
係… 你食到兩隻味… 只係佢地中間融埋 d 味好唔夾者…

Flash d components 就算係 third part develop o既都夾得埋~ 仲 mash 得好好 tim~

點解要用 HTML5 + CSS3?

相信有好多人都係因為 iPhone 唔 support Flash 先認識 HTML5
點解要用 HTML5 相信已經有好多 article / blogs 提過
呢度唔詳細講~ 只講幾點重點

- HTML5 唔係由一間公司操控. 唔需要驚會消失
講真… 如果有一日 Apple 買起 Adobe 然後 cut 左 Flash 條 product line… 的確會好大件事

- HTML5 唔需要 plug in
- HTML5 canvas 可以畫野
- HTML5 有 video control
- HTML5 有好多新 controls (Datagrid, sliders etc…)
- HTML5 o係 mobile device 食少 d resources
- CSS3 可以做 animation
- iPhone support HTML5

Video + Canvas 的確可以完全蓋過 Flash 部份o既優勢
而首當其衝o既相信係 Ads
至於 suffer o既又會再一次係 end users…
今時今日大家仲可以 disable Flash 黎 remove Ads
將來全部變晒 HTML5… 除非 HTML5 硬性規定要 declare 個 tag 係唔係 Ad o既者
否則將來你只可以硬食…

有 HTML5 + CSS3 仲要 Flash 黎做乜?

HTML5 + CSS3 的確做到部份 Flash 可以做到o既野
如果 H+C 做得到的話~ 其實真係唔需要加多一層 layer 去寫 Flash 咁笨

但係我地都要明白一 d H+C o既問題

- Cross browser compatibility 始終係 CSS o既死穴
比個例子大家睇… CSS3 o既 animation 的確好型~ 但係寫落仲型~ 要 cross browser 就要 1 為 3 體…

Safari / Chrome
-webkit-transition: opacity 1s linear;

Firefox
-moz-transition: opacity 1s linear;

Opera
-o-transition: opacity 1s linear;

無錯… 你每一個 transition 都要寫 3 次… 攪乜鬼呢…
仲有… 就算 Safari on MacOS 同 Safari on iPhone 都會有 transition alpha o既 compatibility 問題
基本上你寫得 CSS styled content 就要有通頂做 browser check o既心理準備
你用 CSS 愈勁就 OT 得愈勁…

- HTML5 canvas 同 video H.264 o既 IP 係 Apple o既
(Reference: http://en.wikipedia.org/wiki/Canvas_element)

如其擔心 Adobe 會執笠… 不如擔心 Apple 會收你 license fee… 又或者只有 Safari 可以用 canvas
到時你辛苦寫落o既 HTML5 恐怕要 revamp…

- HTML5 control 有排等…
其實 HTML5 好多 controls 都未 fully implement… e.g. Datagrid.
究竟要等幾耐呢? Who can tell?
到 HTML5 有齊o既一刻… Flex 又已經去到另一個層次…

- HTML5 無 web camera
呢一點比較少人提到…
如果無左 web cam 就會無晒近黎最 hit o既 AR (Augmented Reality)

- HTML5 未有 3D 同 filters
當然 3D 同 filters 只係 d 可有可無o既野
但係唔可以忘記呢 d o野正正影響住 user experience
如果無左 motion blur 好多 animation 都會變得好假

咁究竟應該點樣揀用乜呢?

記得 4 年前我寫左我o既 FYP – FLABER
當年我一買左 Nokia N73 之後第一件事就係裝 Flash Lite 然後放 FLABER 入去玩
一放就 work o個一種興奮感覺正正就係 Flash cross device o既好處

但係呢幾日反覆思量… 其實就算 Flash export 得點好都無用…
要比最好o既 user experience 比 users~ 始終都係要 ground up design 過

Desktop 同 mobile 始終係兩個完全唔同o既 environment
如果將 desktop Flash 放入 mobile device 又太 heavy
如果將 mobile HTML 放入 desktop browser 又太 plain

所以我都係得o個句…
You have to pick the right tool for the right task.

呢個世界好難話一種 technology 玩晒.
所以唔好再話乜野 kill 乜野喇~ IE6 到今日都未死啦…

如果只係以 desktop 同 mobile 做為分界線
相信要揀邊種 technology 做 development 就非常簡單

考慮到 CSS o既問題~ 同埋要犧牲 user experience~
再加上 desktop browser 9 乘 9 都有 Flash player
我會繼續用 Flash platform 做 development

至於 mobile… 不得不否認 mobile device 已經係 iPhone o既天下
就算 Android support Flash 都好… Flash 暫時都仲係太 heavy…
所以 mobile development 就一定會揀 HTML + CSS
當然啦如果再 specific d 只係 target iPhone 就一定係寫 Objective C.

黎緊o既 trend 會係點?

正如我 Dad 成日同我講
“都唔知比你學電腦係唔係害左你… IT 始終係變化得好快o既世界”
其實我地做得 developers 就預左日日咁學 日日咁變

Trend 呢 d 野真係無得估…
今日 Apple 唔比你 deploy Flash
幾個鐘之後 Google Chrome preinstall Flash
食完飯之後 Adobe 有 Flash to HTML5 exporter
聽日 Opera on iPhone embed 左 Flash player
聽晚 Google 出部手機有粒 i7
後日又點… 大後日係點…
如其去估… 不如寫好 d applications

“條條大路通羅馬”
最緊要你有個心去寫 d 好野
只要你有心~ 就算只係得 HTML 都會寫到 amazing apps~!!

至於要用乜野 technology 寫野
其實冥冥中你老細或者你上司又或者你 client 自會主宰~ 哈哈
我地努力執行就可以~ XDD

Apple 輸? Adobe 輸?

其實最後咪又係 end user 輸…
iPhone 無得玩 restaurant city
Flash developer 要比錢 join iPhone development program

點解就係唔可以 mash 埋一齊呢?
Mashup… 明明就係 Web 2.0 o既根本

No related posts.

無論係 Application layout, custom item renderer, form layout, padding…
好多地方都要用 VBox 同 HBox
所以第一個 Spark 要學o既o野就係 VBox 同 HBox o既 alternatives – Group 同 LayoutBase

顧名思意 Group 係用黎將唔同o既 components group 埋一齊
呢 d components 可以係 control 亦可以係 containers
可以係 Spark component 亦可以係 Halo component
Group 基本上係取代左 Halo o既 Box container
同 Box 一樣~ Group 本身 by default 係 absolute layout
Absolute layout 者係所有 child component 都係 position o係 x 0 y 0
所以下面o既 example 所有 component 都會重疊左

<?xml version="1.0" encoding="utf-8"?>

<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">

	<s:Group>

		<!-- Spark and Halo Button -->
		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Nested Group -->
		<s:Group>

			<!-- Spark DropDownList and Halo ComboBox -->
			<s:DropDownList />
			<mx:ComboBox />

		</s:Group>

	</s:Group>

</s:Application>

Box 有兩種 subclass~ HBox 同 VBox
HBox 會將所有 child 跟據每一個 child o既 width 打橫放而且唔會重疊
VBox 同 HBox 一樣~ 不過係打直放

Group 同 Box 都有 similar o既 subclass HGroup 同 VGroup
原理一樣~ HGroup 打橫~ VGroup 打直~

下面呢個 example 將 Spark Group 同 Halo Box 放埋一齊做對比
Compile 完之後睇落其實係無分別

<?xml version="1.0" encoding="utf-8"?>

<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">

	<!-- Spark vertical group -->
	<s:VGroup left="0">

		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Spark horizontal group -->
		<s:HGroup>

			<s:DropDownList />
			<mx:ComboBox />

		</s:HGroup>

	</s:VGroup>

	<!-- Halo veritcal box -->
	<mx:VBox right="0">

		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Halo horizontal box -->
		<mx:HBox>

			<s:DropDownList />
			<mx:ComboBox />

		</mx:HBox>

	</mx:VBox>

</s:Application>

Spark Group 比 Halo Box 厲害o既地方就係除左 absolute, horizontal 同 vertical 之外
仲可以 custom define 其他o既 layout
就算係圓形都可以… 只要你識計數~ 哈哈

但係要用 custom layout 就唔可以再用 HGroup 同 VGroup
要用另一種方法可以 set layout…
就係用 Group o既 layout properties 同埋 layoutBase class
layoutBase class 係 Group 用黎將 child components 排位o既一個 class
事實上 HGroup 只係一個 Group layout 上面 apply 左 Spark predefine o既 HorizontalLayout~
者係 HGroup 某程度上只係一種 shortcut~ VGroup 都係一樣~ 用左 predefine o既 VerticalLayout~

如果將上面o既 example Spark Group 部份用 layout 再寫一次的話就會係下面咁樣…

<?xml version="1.0" encoding="utf-8"?>

<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">

	<!-- Spark group with vertical layout -->
	<s:Group>

		<s:layout>
			<s:VerticalLayout />
		</s:layout>

		<s:Button label="Spark Button" />
		<mx:Button label="Halo Button" />

		<!-- Spark group with horizontal layout -->
		<s:Group>

			<s:layout>
				<s:HorizontalLayout />
			</s:layout>

			<s:DropDownList />
			<mx:ComboBox />

		</s:Group>

	</s:Group>

</s:Application>

我 personally 比較喜歡用 layout 多過 HGroup VGroup
主要係考慮到 flexibility~
好多時我地都會轉 layout design
如果用 HGroup VGroup 寫法的話~ 如果想轉 layout 就要一次過改晒 open 同 close tag
如果 Group 裡面無乜 child components 都還可以
如果多起上黎~ 你改左個 open tag 之後要搵返個 close tag 都幾麻煩…

<s:HGroup>
	...
</s:HGroup>

而且用 layout 仲可以 runtime 隨時轉 layout class
可以做到更加多變化o既 UI
例如你有一堆 tag 想 show 比 user 睇
想 elegant 一 d可以用 custom made o既 tag cloud layout
想清楚 d 咁 list out 又可以轉左 VerticalLayout
想玩花臣的又可以用 circular layout

下面o既 example 就示範左點樣 runtime 轉 layout
而裡面o既 CircularLayout o係 Andrew Trice 寫o既 custom layout
http://www.insideria.com/2009/05/flex-4-custom-layouts.html

Click here to view the embedded video.

English title: Spark Layout Basics

Related posts:

1. Flex FAQ #10: Flex 4 有幾多個 namespace
2. Flex FAQ #9: 點解要 Spark

<?xml version="1.0" encoding="utf-8"?>

<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">

	<s:Label text="Hello Spark!" />

</s:Application>

唔太複雜吧~ 不過都幾多野唔同~ 首先當然係 namespace 啦

Flex Builder 3 (FB3) 寫 Flex 3 app 時o既 namespace 真係簡單到不得了

xmlns:mx="http://www.adobe.com/2006/mxml"

一個 mx 走天涯~
一個已經包括左:
- language (Array, uint, Number, Object etc…) 同埋
- Halo components (Button, VBox, DataGrid etc…)

FB4 寫 Flex 3 namespace 基本上無變架~ 大家唔駛咁擔心

xmlns:mx="http://www.adobe.com/2006/mxml"

但係 FB4 寫 Flex 4 就複雜喇~
首先 Flex 4 namespace 唔再係一個 namespace 玩晒~
而係好 clear cut 咁分開左 language 同 component namespaces

Flex 4 o既 language namespace 係

xmlns:fx="http://ns.adobe.com/mxml/2009"

至於 Flex 4 o既 component namespace 分為 Halo 同 Spark

Flex 4 Halo namespace

xmlns:mx="library://ns.adobe.com/flex/mx"

!!!! 大家要留意 FB4 Beta 2 o既 Halo namespace 係 library://ns.adobe.com/flex/halo !!!!
!!!! 不過最新o既 internal build 用左 library://ns.adobe.com/flex/mx 暫時未知原因係乜 !!!!

Flex 4 Spark namespace

xmlns:s="library://ns.adobe.com/flex/spark"

所以如果大家用 FB4 寫 Flex 4 o既時候需要同時用 Halo 同 Spark 就要一次過用晒 fx, s 同 mx 3 個 namespaces
當然啦~ 將來當 Spark 有齊 Halo d component o既時候~ 應該可以一個 s namespace 攪掂晒~!

呢個 Hello Spark app 除左 namespace declaration 之外
比較特別o既就係 Spark Application 同 Spark Label
好明顯佢地係用黎 replace Halo Application 同 Halo Label ga la
至於有乜 improvement 就容後再講喇~

Related posts:

1. Flex FAQ #9: 點解要 Spark
2. Flex FAQ #1: 點樣令 Flex 程式開始時將 cursor 指定係某一個 TextInput 裡面
3. Flex FAQ #2: 點樣清除亂左既 subclipse .svn 資料

Halo 係 Flex 3 o既主要骨格
由最 base o既 application (mx:Application)
去到 layout properties (horizontalAlign, padding)
再去到 UI control (mx:Button, mx:TextInput) 都係 Halo o既範圍
而 Spark 就係 Flex 4 o既主要骨格

好地地用緊 Halo 點解又要 Spark 呢?

用得 Flex 比較深入o既 developer 或者 designer… 又或者 dezeloper 都會發現 Halo 有幾個比較大o既問題

1) Skinning Skinning and Skinning

Halo control 要做 skin 係非常痛苦架
一係就只係用 CSS 做 d 好似無做過咁o既 styling
一係就用 Flash 畫好晒 d 野~ 之後 export SWF~ Flex embed SWF~ 再 CSS map class…
要改野咩? 開返個 Flash source 由頭做過啦

而且 Halo control o既 internal object 係 fixed 架
舉個例~ 一個 Halo button 裡面有一個 icon 同一個 text field~ 唔可以多亦唔可以少
如果想做一個有兩個 icon o既 button 就只可以由一個 Box container 開始砌~ 之後再自己加返 custom events…

2) 雞肋 States

Flex o既 States 本身係一樣好方便o既 function
只要 define 一個 base state~ 然後 further define 其他 state 多左或者少左o既野~ 就可以好易做到 transition
但係只要 state o既數量稍為多 d~ 又或者 state 同 state 之間變化比較多~ 就會開始 lost control…
究竟 B 呢個 state 有 d 乜呢… 睇返 state A 先~ 哦~ 原來乜都無…

3) Heavy

其實 Flex Application 本身係 SWF file 已經唔係太大 file size
不過如果你寫既 application 比較 large scale~ 又或者對於 memory consumption 好緊張~
就會好想幫 Flex 3 大瘦身~

Flex 3 為左將所有野簡單化~ 有時會將一 d 你未必需要用o既 item 都放左入去
舉個例~ Box container by default 係有 scroll bar 架~ 只係平時唔用o既時候無 display
但係無 display 代唔代表佢完全唔用 resources 呢?
大家只要睇下 super class Container 就會發現一大堆比 scroll 用o既 variables… 都幾多下…

幾個 Box 可能影響唔大
但係如果你用 data grid 再加埋 custom item renderer 仲要用 Box 做 layout… 咁就大件事喇…
你就會問… 明明我個 Box 唔駛 scroll… 點解要屈我 d resources

上面提到只係比較大o既問題
當然仲有好多其他野啦~ 例如 CSS 唔 standard 呀~ Animate color 會傻左呀~ 等等等等…
而 Spark o既開發就係為左解決上面呢堆問題~

呢度就暫時粗略講一講
之後我會詳細咁講每一 part~

1) Spark o既 control 大致上可以細分為 HostComponent 同 SkinClass
HostComponent 主要負責 event / state declaration 同埋 contain data
SkinClass 就負責控制所有 graphic elements, state content 同 data binding

好處在於 HostComponent 只係負責最 base o既 feature
而 SkinClass 就可以比你點玩都得~ 就算你想個 Button 係星形再加兩個 icon 都無問題

2) States o既 format 完全唔同晒~
State 裡面o既野唔再o係 state o既層面處理~ 而係o係 control o既層面處理
配合埋 Flash Builder o既 State editor 要知道 current state 有乜簡直易如反掌

3) Scroll bar 再唔o係 default component 會有o既野
要用就要自己 declare~ 唔用就當然慳好多 resources 啦~

仲有好多其他 changes~ 包括 improved CSS class~ custom layout~ PopUpAnchor~ TLF~
可以咁講… 要學o既野多過 Flex 2 上 Flex 3 好多好多倍~ 哈哈

Related posts:

1. Flex FAQ #10: Flex 4 有幾多個 namespace
2. Flex FAQ #1: 點樣令 Flex 程式開始時將 cursor 指定係某一個 TextInput 裡面
3. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案

大家亦唔需要太擔心 Flex 4 o既 syntax 會再變
因為 Flex 4 o既 SDK 已經 freeze 左
除左 bug fix 同埋 font embedding 之外~ 其他都應該唔會再變
大家可以放心去用喇~!

首先大家要 Flex 4 app 當然要用最新o既 compiler 啦
大家可以用 Flex 4 o既 SDK 又或者 Adobe Flash Builder 4 beta 2

Adobe Flex 4 SDK (Free)
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Adobe Flash Builder 4 beta 2 (Trial)
http://labs.adobe.com/technologies/flashbuilder4/

有一點要提一提大家
雖然 FB4 可以同時 compile Flex 3 同 Flex 4 o既 applications
但係 FB4 o既 plugin support 唔係咁 work
如果你本身會用一大堆 eclipse plugin 的話
我強烈建議你 keep 返 FB3~!!

裝 SubClipse 還是可以的不過要 manual install…
Aptana 就暫時唔得喇…

Related posts:

1. Flex FAQ #9: 點解要 Spark
2. Flex FAQ #2: 點樣清除亂左既 subclipse .svn 資料
3. 時光倒流第一集 – Adobe Flex Workshop

由淺入深~

1) Flex 直接 Embed font

方法主要有兩種

1A) Flex CSS refer local font

@font-face
{
	src: local("標楷體");
	font-family: "KaiShu";
}

o係 CSS 裡面 declare font-face
然後 source 利用 local 指住個字體名
最後 declare 一個 font family 名~ (呢個隨意就得)
呢度最 tricky 係個字體名… 特別係 Mac 機再加埋中文字…
經常攪到 Flex Builder compile o既時候會出現 local build error…

好: 快
壞: 唔穩定, File Size 大

1B) Flex CSS refer font file

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
}

想解決 1A 出現o既問題就要利用 source 指 url 直接指住 font file
font file 大家可以o係唔同地方買或者 download 到
如果o係 system font 的話

Windows 可以o係控制台 > 字型 裡面抄走
Mac 可以o係 System/Library/Fonts 裡面抄走
(Mac 特別要留意副檔名 dfont 的係 embed 唔到架)

好: 穩定~ 準
壞: File Size 大

備註: Embed Microsoft Windows 內置標楷體o既爆字問題

如果大家要 embed 標楷體~ 就千祈唔好用 Windows 裡面o既標楷體
因為 embed 之後o係 Mac 機睇係會出現爆字問題

關於爆字 (字形破碎) o既問題請參考 – 破碎的細明體研究院
http://bbs.bnw.com.tw/conference/viewtopic.php?t=2856

簡單黎講o係 MS 的標楷體 version 太舊 (3.0)
解決方法係去華康科技買返新 d o既 version (latest 5.0) (我試過 2005 年o既 3.10 無問題)

不過用華康標楷體 3.10 最大o既問題係 file size…
MS (4.9Mb) 華康 (27.9Mb)
一個 Flex application 用之前要 download 4.9Mb 已經唔容易… 更何況 27.9Mb…

另外更要特別提一提
Embed 27.9Mb o既字形係好耐同好唔 stable 架
我曾經多次出現 out of memory o既問題…
10 次 compile 得 2 – 3 次成功…
(Mac Pro 都頂唔順… 好難相信… 應該又係 Flex Builder 問題…)

2) Flex 利用 unicode-range 抽出要 embed o既字

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011,U+6211;
}

其實利用 Flex CSS Embed font o既時候係可以透過 unicode-range 抽出某 d 字架
以上面為例就會將 “們” 字同 “我” 字抽出黎啦~!
究竟點解係 5011 同 6211 呢?

其實 5011 同 6211 係 d 字o既 unicode value in HEX
想 get 一個中文字o既 unicode
大家可以用呢個 Chinese to Unicode converter
http://www.chinese-tools.com/tools/converter-unicode.html
記住要將個 result 轉返做 HEX value

如果大家用 Mac o既 Numbers 的話可以用下面呢個 equation

=CONCATENATE("U+",RIGHT(DEC2HEX(CODE("字")),4))

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011-U+6211;
}

至於呢個係另一種寫法~ 將 5011 至 6211 所有字都 embed~
當然大家可以 combine comma “,” 同 dash “-” 兩種寫法啦~!!

好: 要用o既字先 embed~ 有效控制 file size
壞: 煩… 要逐粒字加都幾浪費時間…
更壞: Flex Builder 應該有 bug… 當 unicode-range 後面太多野會出現 compilation error…

3) Flash + Flex Combo = 無敵~!

試左一整日… 放棄左一輪之後… 突然諗到o既絕技~!
Flash + Flex Combo

首先利用 Flash dynamic text field 寫低需要o既字

記住要揀埋你需要o既 font
跟住 set dynamic text field o既 font embedding

然後揀 Auto Fill~
一下就掂晒~!

然後 Export SWF file~
最後 Flex embed SWF file

@font-face
{
	src: url("/fonts/font.swf");
	font-family: "DFBiaoKaiShu-B5";
}

留意 font family 一欄今次唔可以隨便填
一定要同 Flash 裡面寫o既完全一樣
以我上面 example 為例就係 DFBiaoKaiShu-B5

之後就可以 compile 啦~!

好: 快 準 穩定
壞: 要開多一個 application… =.=

Related posts:

1. Flex FAQ #3: 點樣用 Flex FileReference 下載檔案
2. Adobe MAX SF day 1
3. NEW TECHNOLOGIES KEEP ON COMING…

首先要有 heart o既傻佬 一個
一個剛剛求婚 充滿鑽介知識既朋友 一名
珠寶首飾網頁 數個
討論區文章 數十頁
裝滿介指相o既 folder 一個
Preference list 一份
專業 Sales 一個
好好人經理 一名
鑽石 一粒
銀彈 數排
卡紙 一張
較剪 一把
蠟筆 一排
黑白豬 wallpaper 一張
信封 一個
花 一束
Bear Bear 熊 一隻
烏龜 一隻

以上材料因人而異
但最重要係要用心去安排~!
幸福的確係靠自己捉住的

===============================================

特餐備註

- Tasaki 介指由於係日本即時訂造~ 製作需時~ 有心理準備要等最少一個月
- 日本介指 size 同香港有出入架… 最好帶隻實物去度比較準
- 卡紙最緊要夠大… 方便錯左可以再整過…
- 唔好用粗身蠟筆… 準確度好低
- 寫字最好對住 dictionary 寫避免出錯
- 親身去鋪頭之前最好先打電話 confirm 佢地無執笠或者轉左地址

===============================================

特餐特別鳴謝

- Bryan 兄教我既野實在太多… 感激
- Tasaki o既 Wing 小姐幫我揀左粒好靚o既 IF 石
- Tasaki o既經理幫我安排趕工
- 花墟 櫻花店幫我準備o既花好得~! 好 Pro~!

No related posts.

今晚靜靜地諗呢個問題

發現自己的理由其實好簡單…

“想比最好的比另一半”

嗯~ 就係咁…

No related posts.

終於…

今日一個唔小心…
禁錯左 Drop database…
幾年的 blog entries 付諸流水…
唔知點解… 又無乜特別唔開心o既感覺…
唔知係唔係人大左… 大大小小既事都試過
呢 d 唔算係 d 乜野

Anyway…

盡過能力去補救~ 但係都無辦法挽回…
最後只可以靠 Google o既 cache result 盡量檢回 index 左o既 post~

嗯~!

係時候重新開始吧~!!!
努力~!!!

No related posts.