Skip to main content

[AS3] Embedding font's glyphs from SWF files

進入到 AS3 世界後,越來越多畫面是由 Script、Components、XML Model 與 CSS stylesheet 組成,embeded fonts 變成動態文字應用很重要的一環。

要在Flash or Flex 中 Embed fonts 有相當多的作法,光官方的 Help 就有幾種寫法:
Flex 3 live doc:
Embedding fonts from SWF files
Using embedded fonts
Flash :
Embedding fonts
google 上還有一堆...

embed 英文字型檔是很簡單的,但是遇到中文字就會是一場惡夢...要使畫面好看,撇除 embed 整包中文字型,轉而打包特定使用到的中文字來供全部畫面使用,作法是由 Embedding fonts from SWF files 參考而來。
以下方法不管 Flex or Flash CS3都適用,至少可以省下相當的檔案大小...
  1. 打開 Flash CS3,開新 AS3 檔案, 使用工具箱建立一個動態文字框到畫面上。選擇需要 embed 的中文字型,點選 文字物件的屬性面板上的 『embed』:

  2. 跟 Flash 8 作法一樣將要 embed 的中文字打在『Include these characters』的輸入框內:

  3. 到這邊跟官方的作法都一樣,唯一輸出的差別是如果要供ActionScript project 使用的話需要將做好的動態文字框按滑鼠右鍵『covert to Symbol』:

如果是用 Flash CS3 製作專案,留在 Library 就可以了。而 Flex的ActionScript Project 需要發佈 SWF 到你所在的路徑然後:
[Embed(source='customedFonts.swf', symbol='customedFonts')]
public static const myFonts:Class; //其實修飾子看個人使用


Flex MXML project: (如同官方說明)

<mx:Style>
@font-face {
/*將文字崁入*/
src:url("customedFonts.swf");
fontFamily: "華康儷細黑";
}
.testStyle{
color: #FFFFFF;
font-size: 22px;
font-family:華康儷細黑;
}
</mx:Style>


上面字型檔只 embed "今天氣很好"
測試:Flash CS3 customedFonts 留在 Library
var format:TextFormat= new TextFormat();
format.font= "華康儷細黑";
format.size=30;
format.letterSpacing=3;
var myTextField:TextField= new TextField();
myTextField.embedFonts= true;
myTextField.autoSize="left";
myTextField.defaultTextFormat = format;
myTextField.text="*這些都不會出現*今天天氣很好";
addChild(myTextField);


output 畫面:

Comments

  1. 請問可以寄這個[AS3] Embedding font's glyphs from SWF files 的範例給我嗎,因為我在用 flash檔時, src:url("style/font1.swf");這個地方都會錯試了很多次都沒成功。如果可以的話寄到uiokllk@ms53.hinet.net謝謝

    ReplyDelete
  2. 那個用法只能用在 Flex MXML project (By Flex Builder )喔! Flash 的用法請看 1-3點....

    ReplyDelete
  3. 沒錯啊我是要用在flex 裡面,我flash檔的製做是造1~3點,但我在flex裡面
    mx:Style
    @font-face {
    src:url("customedFonts.swf"); <---這一直出錯 fontFamily: "華康儷細黑";
    }

    ReplyDelete
  4. 錯誤訊息是什麼?我原始檔早就不知道到哪去了...- -

    ReplyDelete
  5. 出現
    Multiple markers at this line:
    Unable to transcode style/font1.swf
    font 新細明体 with normal weight and regular style not found

    ReplyDelete
  6. 你要 embed 的新細明體注意一下是不是按到 B 了... 就是輸出到粗體...他錯誤訊息寫的很清楚捏...他找不到正常版的字體...

    ReplyDelete
  7. 恩,已經不會錯了,但我要用在button上面的文字很向不會出來。請問是要另外用嗎

    ReplyDelete
  8. 原來是我自己用錯了,已經搞定了,謝謝 *_*

    ReplyDelete
  9. Erin妳好,想問一下嵌字體的問題 :D

    我在嵌入中文字的時後,遇到先前uiokllk所提到的問題,我嵌的是"微軟正黑體", 照著上述的步驟製作,最後還是出錯,我也沒設定到粗體字之類的東西

    後來我以相同操作步驟以英文字體來嵌入英文字,卻是成功嵌入沒錯誤

    請問一下,是不是嵌中文字型的話,還需要多加什麼設定嗎? 一直找不出來哪裡錯,好煩丫~~~ >"<

    麻煩高手出手相救一下,謝謝~~~~ Orz

    ReplyDelete
  10. 你的原始檔寄給我吧...不然我也沒辦法

    ReplyDelete

Post a Comment

Popular posts from this blog

[Unity] erinylin.lazylib - Cookie for PlayerPrefs

有鑑於 PlayerPrefs 測試與版本更新問題,將大家都愛用的 PreviewLabs.PlayerPrefs 打包起來,製作重點還是以懶人為主,基本上 PlayerPrefs 資料更新與數量並不可能會有強烈衝擊效能的狀況產生,所以為了方便開發,就弄了一個視覺化工具,方便除錯用。

雖然 PreviewLabs.PlayerPrefs 作者都宣告放棄他們的版權,不過為了尊重程式,僅僅加入了兩個公用函式,其他並無更改。

內有:
Cookie ManagerCookie 用 DataObject 混合編輯 ScriptableObject執行階段除錯視窗工具當然還是有懶人常數檔案輸出資料版本控制,方便更新版後儲存資料更新功能其實很多,有興趣的請自行到 Github 下載並參考範例吧!

[AIR] JoSiResize - Mobile 開發小工具

JoSiResizev0.6.0,Adobe AIR 3 runtime之前開發 tool app 的時候並沒有很深刻的體認到圖片素材的 resize 是一個很麻煩的事情...畢竟圖片使用量並不大,等到開發遊戲類的 app 才發現光處理不同螢幕尺寸的圖片素材是一個相當折磨人的工作。
因此 JoSiResize app 誕生了~~~原理是採用最小 scale 長寬比例不變的方式進行放大縮小。使用方法非常簡單,設定好變更的尺寸,接下來,將需要處理的圖片檔案全選直接拖曳到視窗內,畫面即會跳出預備儲存的檔案夾選擇畫面,確認後即開始轉檔。

[Mac app] 開啟 Mac OSX 中自帶的 Color Picker 並加上 HexColorPicker 功能

參考出處:Mac — Adding Hex Color Picker to Color Picker

Mac app store 上有很多 Color Picker app,差不多 98% 都是需要付費,而這個小工具恰恰是開發中不可缺少一個東西。其實 Mac OSX 中就有自帶一個 ColorPicker,秉持著 DIY 的精神,用幾個小步驟就可以組合出顯示 Hex 色碼的 ColorPicker.app。

Mac 系統需求:10.4 and up