Vicker's Coding Kitchen » Flash

Flex FAQ #8: Font Embedding 全集

Vicker — Tue, 07 Apr 2009 16:40:15 +0000

尋日要幫一個 application 做 font embedding
主要係想 embed 楷書
其實 font embedding 本身並唔係一件難事
因為 Flex 本身已經 support~
但係 embed 得黎又要控制好 file size 就唔簡單~!
至於楷書o既問題就更加多…
應該 specific d 講… 係 Microsoft o既標楷體o既問題更加多…

由淺入深~

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… =.=

Adobe MAX SF day 1

Vicker — Tue, 09 Dec 2008 00:37:39 +0000

MAX 終於開始~
去到 Moscone 就見到 Kai~
佢同佢太太一齊去 MAX~ 真係開心

之後即刻上二樓食早餐
同之前一樣… 硬飽… 果汁… 咖啡… 奶…
Somehow 我總係覺得唔會夠飽…

食飽見未夠鐘就去左 community lounge
一入到去就見到熟識既面孔~
John, Sumi, Craig 同 JD 都o係到
總係覺得見到佢地就 = 見到 Adobe community~ 哈哈

打完招呼傾左一陣就要趕去聽野
第一場係 Flex testing~ 都 ok~
之後就係精采o既 general session~!

一如以往~ 未入到門就聽到好激昂o既音樂~!
一入到去真係好震撼~ 3 個 main screen 加兩組 side screen
main screen 係山峰藍天白雲~ 一堆 Adobe product logos o係天度飛~ 好型~
跟住所有 screen 會好似老虎機咁轉 d product logos
然後中間加插 30onMAX o既 video~
好彩無拍者… 唔係比人 post 出黎好攪笑~

開場~ 有 DJ Mike Relm 用 30onMAX 既 video 表演捽碟~
(事後睇返 wikipedia 知道 Mike 係 VJ – video performance artists~ 曾經同 blue man group 合作 LOL)

跟住係 MAX explorer o既一段 animation~
MAX explorer 攀山登上 Adobe AIR blimp~
然後飛越冰海~ 到達沙漠~ 啟動 Adobe 火箭~ 最後… 失敗 XD
感覺好似 Indianna Jones~ 主要係想帶出主題 – Connect, Discover 同 Inspire
有機會希望可以 get 到 source distribute 比大家睇
絕對值得珍藏~~!!

之後係 president Shantanu Narayen o既開埸白~
今次 MAX 主力都係 Adobe Flash Platform~
大家以後要多 d 用呢個 term~
可以唔駛一大堆名同人解釋~

Adobe Flash Platform 包括:
Tools: Flash / Flash Catalyst / Flex
Clients: Flash Player / Adobe AIR
Servers: Flash Media Server / Blaze DS

Shantanu 亦特別提到 Thermo 已經正式命名為 Flash Catalyst
呢個名改得好定唔好真係見仁見智…
本身 Flash 同 Flex 兩個字都已經經常讀錯…
再加埋 Flash Catalyst 真係亂到傻… 成日聽人講錯 Flex Catalyst…
以後都係讀 abbreviation 穩陣 d,,, Fl Fc Fx…

之後提到 (RED)WIRE 利用 Adobe AIR 開發左新o既 application
將 music, subscription 同 charity 帶去另一個 level

http://www.redwire.com/

(已經正式 launched… 大家可以自行 download 體驗下~)

跟住 CTO Kevin Lynch 出場~
佢以 3 個 main title 黎講解 Adobe 黎緊o既方向
- Client + Cloud
- Social Computing
- Devices + Desktop

Client 當然係講 Flash player 同 Adobe AIR 啦
Kevin 簡單示範左 Flash player 10 o既 native 3d performance
然後就宣佈 Adobe AIR 1.5 已經正式 release
(大家有裝 AIR 的話應該已經 auto updated)

為左示範 AIR~ Kevin 請左 New York Times 上台介紹佢地最 latest o既 AIR based news reader
一入 application 睇落其實無乜特別~
但係當佢 resize window o既時候就會發覺 d columns 會自動加或者減黎 fill up spaces
呢個應該係利用到最新o既 Flash player 10 text engine 做的~
感覺非常 smooth 而且 readability 好高~
最得意o既係佢地連一份報紙最重要o既 crossword puzzle 都 implement 左 XDDD
Innovation 同 amazing 有時真係唔一定要 complex~

之後 Kevin 更進一步將同一個 New York Times application 放o係 aigo
(一部裝左 windows o既 mobile internet device)
control 上面雖然無咁方便~ 不過 UI 完全 support 到~
呢個就正正係 Adobe AIR o既優勢~!
(New York Times reader 未正式 release~ 稍後再補上)

跟住開始講 cloud~
cloud 其實即係 services
clients + cloud CM 應該會好有同感
不過 CM 會 focus on 個 cloud 一定要係 XML format~ 哈哈

其實網上面o既 cloud 已經好多~ 多到有 d 散同亂~
於是就帶出左 Adobe 一個新o既 tool~ Tour de Flex~
Tour de Flex 係 AIR application~
佢其實係一個 library~ 裡面有好多常用o既 services
每一個 service 都有相對應o既 sample codes 教你點樣用 Flex 去 connect d services
而且仲有 executable o既 sample application 比你去試~
絕對係 cloud development o既入門 references

Tour de Flex 已經 release~ 可以於 Flex.org download

http://flex.org/tour

進入 Social Computing~
Social Computing 裡面最常出現o既就係 notifications
每一日大家都會收到好多各式各樣o既 notifications… OS… Facebook… Twitter… etc…
問題係當 notifications 愈黎愈多~ 你就會開始亂~
你可能會為左 Twitter 裝 twitterific… 又可能為左 facebook 裝其他 plugin… etc
所以 Adobe 就開發左另一個 Adobe AIR based tool~ Adobe Wave
Adobe Wave 簡單講就係 collection of notifications
你只需要入返每種 service o既 account 就可以 1 stop 收到所有 note
而且仲 support custom applications~

Adobe Wave prerelease program 已經接受 registration~

http://labs.adobe.com/wiki/index.php/Adobe_Wave

(invitation code 稍後於 user group gathering 提供)

最後到 Devices + Desktop
Desktop 已經有 AIR~ Device 亦都有 Flash Lite~
下一步可以點呢…
之前好多人都認為應該係將 AIR 裝入 mobile devices
但 Adobe 似乎有一個更加好o既答案… Adobe Flash Player 10… natively on mobile devices…

Kevin o係一盤 mobile devices 裡面逐步拎出黎做 demo
佢地全部都係行緊 FP10~
(咁樣唔知係唔係意味住 Flash Lite 要講 bye bye…)
包括… Nokia Symbian… Windows Mobile… Google Phone… 最後係… Apple iPhone…
正當大家都起哄o既時候… sorry… 無…
Kevin 聲稱同 Apple 交涉緊~ 咁係唔係者係話其實已經 run 到呢?!?!?

最後 Kevin 為大家示範 Adobe o既一個 future device prototype~
佢拎住一部 Samsung o既 MID~ 然後對住個 stage screen~
等左幾秒就 connect 左~ 然後 Kevin 手指一 fling 就將佢 device o既相 transfer 左去 stage screen~
而且仲要好靚咁 display 出黎~!!!

同樣o既 transfer 仲可以 between MID~
甚至係一部電視機~! (當然要 compatible la)
感覺幾得意~ 不過有幾多人 afford 得起~ 哈哈~

第一個 general session 到此結束~!

完左 session 食 lunch…
Again… 唔會飽…
於是返去食麵~! 哈哈

下晝繼續聽野~
Design XD… 竟然係講 Adobe CS4 product line design concept… 有 d 失望…
之後好多堂都係早走 or skip…
今年大家都 complain d sessions 無 screening… 質素比較差…

多數時間都係o係 community lounge~
見到 Bing~ 估唔到佢同我地一樣咁遠都黎~
之後識左 Singapore UGM Shunjie~!
大家o既話題竟然係研究下點樣用 d Adobe stickers XDDD
似乎我地亞洲人都係鍾意自己部 laptop 多過 d stickers~ 哈哈

夜晚有雞翼食~ 唔錯唔錯~

之後有 Birds of a Feather 同 Meet the Team~
同阿 Way 去左 Meet the FX / FB / FC Team~
不過佢地變左 open chatting… d 人一堆一堆咁~ 好難埋堆…

大覺訓~ 第二日繼續~

Yahoo! 立法會選舉 interactive Flash banner

Vicker — Mon, 24 Nov 2008 01:32:12 +0000

幾個月之前透過 blog 識到一位 designer Bryan
(哈哈~ blog 的確有佢 networking 既用途~
就算你幾個月唔 update 都好 =.=||)

Bryan 想我幫佢手為 Yahoo! 香港既立法會選舉網頁寫一個 Flash 既 interactive banner
一聽到 Yahoo! 就二話不說即刻應承~
相信一定係好好既 experience~
(結果… 唔… 原來係咁… 真係估唔到…)

Anyway… 講返個 banner

Banner 裡面其中一個 function 係要將一 d avatars randomly placed in 一個 specified area
起初我只係用簡單既切餅方法將一個長方形切成等份
然後 randomly place d avatar 入 d 餅入面…

好明顯… 結果好生硬…

之後嘗試唔用餅~ 直接做 random placement
然後每一次 place 既時候都 check hit area~ if hit 就 replace
結果好好多~ 而且速度完全 acceptable

跟住o既問題就係點樣可以只從o係一個 specific area 裡面 random place 呢?
由於要就返立法會大樓o既 shape~ 所以個 specific area 會係 irregular shape
當然啦~ 要準確的話一定係靠計數
但係計數o既問題係唔 flexible 同埋唔容易 maintain
最後我用左好多長方形去 approximate placeable area
然後每次 random place 都 check hit area

咁樣做有兩個好處
1. 易寫
2. 易改

對於 designer 黎講~ 要改 specific area 的話只需要 resize d 長方形~

之後比較特別o既就係要令每一個 random generate 的人
都會o係 mouse over o既時候用一個 talking bubble 講野
因為 talking bubble o既 content 會有唔同長度
而且有機會 multi line~ 所以就要利用到 Flash o既 9-slice scaling

最後就係要令 talking bubble o既 tip 對正講野的人的頭~
哈哈~ 雖然係好 minor o既 feature
但係絕對影響整體o既感覺~

Final product 可以去 Yahoo! 度睇下~
As long as 佢地唔 shut down 個 web :p

立法會選舉 2008 Yahoo!

http://hk.news.yahoo.com/legco08/fc.html?path=/fc/20080814/legco08.html

Google 同 Yahoo! improve Flash indexing

Vicker — Tue, 01 Jul 2008 23:07:16 +0000

今日 Google o係 webmaster central blog 公布左佢地已經 improve 左 Flash content 既 indexing power
所有 version 既 Flash content o係唔需要改動既情況底下都可以得到更好既 indexing result

同一時間 Adobe 亦o係 Adobe Developer Center 發表左 SWF searchability FAQ
裡面除左有耳熟能詳既 marketing slogan 之外

The openly published SWF specification describes the file format used to deliver rich applications and interactive content via Adobe Flash Player, which is installed on more than 98 percent of Internet-connected computers

亦有提及到背後既原理
以及 Yahoo! 都會於稍後 update search engine

的確~ 咁多年以黎 Flash 都比人彈 SEO
每一次我幫人做 project analysis 既時候
第一句都係問 “application base” 定 “content base”
今次呢個 news 的確幾吸引~
但係問題係唔係就咁就解決呢?!?!
我地係唔係唔再需要寫特登寫 XHTML version / XSL / 一大堆 supportive AS?!?!
言之尚早~!

At least… Munsang Biology web d content 仲未 index 到~ 哈哈

Anyway~ should be a great start!

詳情:

Improved Flash indexing by Google Webmaster Central Blog
http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html

SWF searchability FAQ by Adobe Developer Center
http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html?devcon=f1

Apple MultiTouch? Microsoft MultiTouch? now ActionScript~!

Vicker — Fri, 21 Sep 2007 00:56:48 +0000

呢期興 Touch~
首先係 Apple iPhone~
跟住係 Microsoft MultiTouch Table~
然後係 HTC Touch~
仲有 Apple iPod Touch~

但係估都估唔到… ActionScript 3 都可以 MultiTouch…

Click here to view the embedded video.

然有 d 窒下窒下~ 但係都叫做 work~!
有時真係好想可以參與下呢種唔係用錢字行頭既 development

Flex FAQ #4: 利用 Adobe Flex 做 Video Player

Vicker — Wed, 12 Sep 2007 22:12:35 +0000

又係一個好簡單既問題~ 但係絕對可以玩死人~
用 Flex 想播 video 基本上只可以用 VideoDisplay component + FLV movie format
FLV movie format 可以點整呢? 當然係 Flash Video Encoder CS3~

但係 Flash Video Encoder 其實好多野未必 convert 到~
WMV? bye bye~ MOV? bye bye~ 就算 MPG 都有可能無啦啦無晒聲~
AVI 暫時算係一定可以 import 到既 format~
如果你用 Windows 的話~ 可以試下用 erightsoft 既 SUPER

http://www.erightsoft.com/SUPER.html

可以將 WMV, MOV 等等轉左 DIVX AVI~
(見到可以直接 convert 做 FLV 既朋友唔需要興奮… 係唔 compatible 架 =.=||)

好喇~ 睇黎好似問題已經解決左~ 不過唔好意思~
當你好開心咁 convert 晒 d video~ 翻睇一次~ 你會發覺…
所有 video 一 play 到大約 3 份之 1 就會 kick 住左~
之後如果你郁 slider~ 就會無左聲… what the…

究竟係 encoder 問題? codec 問題? OS 問題?
我試晒 Windows 同 Mac 都唔 work…
但係用 Flash 既 Video component 播又無問題… 似乎又係 Flex…

咁究竟最後可以點解決呢?

YouTube…

將任何 format video 放上 YouTube (within 100Mb)
然後等 YouTube 幫你 convert 做 FLV
最後用 VideoDownloader down 返個 FLV…
Quality 算 acceptable~ 但起碼係最 stable 既解決方法~
Please Adobe! 買多幾塊烏蠅拍唔該… 太多問題喇~ 仲要下下攞命…
有幾多問題? 聽日再 Blog…

English title: How to use Adobe Flex to make a video player

時光倒流第二集 – Thanks FLABER

Vicker — Wed, 24 Jan 2007 02:03:19 +0000

“點解會寫 FLABER 呢?”
呢個係每次比人訪問既必答題~

4 年 CS 既生活~ 有一樣野我自己唔係咁開心既~
就係唔可以寫自己鍾意寫既 language

C++, 68000, JSP, Servlet, etc… 就係無 Flash…
當然啦~ 我完全明白 CS 教 Flash 係無可能既事
所以呢 4 年我都不停咁自己爭取o係唔同地方用 Flash

Year 1 o個陣 take 既 Internet Communication 我寫左一個 pure Flash 既 web
Year 2 CCIV 我用 Flash 整 navigation menu
Year 2 SEP 我用 Flash 整左 testing progress bars
Year 3 Placement… 哈~ 每日都o係 Expert Exchange 流連~
Year 4 FYP…

FYP 絕對係我盡情發揮既地方~
但先決條件係要有 professor buy 我 idea 做我 supervisor
試問 Flash 做 project… 有幾多 professor 能夠接受呀~ Thanks Andy! 我諗你開頭信心都唔係咁大~

決定做 Flash 之後~ 真係花左好多工夫留意市場上無 d 乜~ 要 d 乜~
最後就做左 FLABER 出黎~

如果 FLABER 係一個人的話~
我諗我會同佢講… “多謝晒~ 你比我既野實在太多~”

事實上我放o係 FLABER 上面既時間真係唔多…
起碼比 Warcraft 少…
但係 FLABER 帶比我既野真係數唔清…

一堆獎項~ 一堆機會~ 一堆朋友~ 一堆回憶~ 唔… 有 d 誇 tim…
其實仲有一堆麻煩~ 一堆工作~ … =.=||

Anyway~ FLABER 2 不遠矣~

NEW TECHNOLOGIES KEEP ON COMING…

Vicker — Sun, 09 Oct 2005 03:53:55 +0000

In September, a new shock came to me – Macromedia Flash 8.

I have used Flash 8 Trial version for quite a while. The feeling is that there are much enhancement in graphic section. Let say one of it is the Bitmap class. This Bitmap class is capable to export the current Flash’s content pixel by pixel to other application~~!!

This morning I have read the Macromedia Edge Newsletter which announces another two great products – Macromedia Flex 2 and ActionScript 3.0.

Oh my god… Should I try them in my FYP when they release?? Arrr~~~!! Such a hard decision…

COMPLETION of MY FIRST OO FLASH APP

Vicker — Sun, 09 Oct 2005 03:37:42 +0000

HURRAH~~~!!!!!I finally finish my first object oriented Flash application – Fly’s Bookmark 1.0

It is a very very simple Flash application which draws data from a XML and generate the correponding links.

The objective of this small application is for me to practice OOP in Flash. As I have said… I am a newbie in this…The main point here is the class design using MovieClip class extension. It is hard to understand at first but ultimately powerful when equiped. The following are some articles that are worth to read about this ultimate technique.

Flash MX2004 Actionscript 2.0 class Tutorial. [Online]. Steve’s Tutes. Available: http://www.video-animation.com/flash_15.shtml
Simple design patterns in Macromedia Flash MX 2004. [Online]. Peter Parente. Available: http://www.cs.unc.edu/~parente/tech/tr03.shtml

The next step is to define my FYP’s requirement specification asap. As I have used too much time in this little application.

Will I further develope Fly’s Bookmark?? Maybe :p