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 畫面：
Labels:

Comments

  1. UnknownDecember 1, 2009 at 11:25 AM

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

    ReplyDelete
  2. Erin LinDecember 1, 2009 at 6:28 PM

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

    ReplyDelete
  3. UnknownDecember 1, 2009 at 6:52 PM

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

    ReplyDelete
  4. Erin LinDecember 1, 2009 at 7:49 PM

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

    ReplyDelete
  5. UnknownDecember 2, 2009 at 9:34 AM

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

    ReplyDelete
  6. Erin LinDecember 2, 2009 at 4:21 PM

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

    ReplyDelete
  7. UnknownDecember 2, 2009 at 6:07 PM

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

    ReplyDelete
  8. UnknownDecember 2, 2009 at 6:15 PM

    原來是我自己用錯了，已經搞定了，謝謝 *_*

    ReplyDelete
  9. AnonymousMay 19, 2010 at 5:14 PM

    Erin妳好，想問一下嵌字體的問題 :D

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

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

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

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

    ReplyDelete
  10. Erin LinMay 21, 2010 at 4:35 PM

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

    ReplyDelete

Post a Comment

Popular posts from this blog

[Swift3] weak 與 unowned 關鍵字

雖然在 Swift 中看起來"很像"是不需要煩惱內存管理的問題，不過實際上它還是遵循著自動引用計數 (ARC) 的規則，當一個物件沒有被其他對象引用時會自動被銷毀，如果三魂七魄沒有完全回位的話，就會有個靈體留在現世的空間裡，最經典的範例如下： 閉包(Closure)引用 classClassA { typealias Complete = ()->() var name : String var onComplete : Complete? init(_ name: String){ self.name = name print("Hello I am \(self.name)") onComplete = { print("\(self.name): onComplete!") // --> 閉包引用 self, 計數 + 1 } } deinit { print("deinit: \(self.name)") } } var a : ClassA? = ClassA("A") // --> 引用計數 + 1 a = nil // 2-1 = 1 還剩下 1 所以沒辦法銷毀 ---output------- Hello I am A 由於這邊的 onComplete 宣告為 Optional, 正確的做法要連同 onComplete 一起刪除才可以被回收，若不是 Optional 則會進入無法回收狀態： var b : ClassA? = ClassA("B") b?.onComplete = nil // --> 還好是 Optional 可以設成 nil 計數 - 1 b = nil // 計數 = 0 所以被回收 ---output------- Hello I am B deinit: B 但是做人不需要煩惱太多，這時候就出動 unowned 關鍵字讓物件可以順利被回收： onComplete = { [unowned self] in print...
4 comments
Read more

[作品]Flex 3.4 + PureMVC 的企業級 RIA 應用

認識 Erin 的人都知道， Erin 最懶得寫作品集相關的文章，但是這個案子比較有趣，所以特別提出來聊一下囉！ 廚櫃業某公司內部軟體，目前系統尚在 Beta 階段，所以下面圖片皆有模糊化處理。 [可擴充功能面板首頁，後台皆包含在管理系統內（有 iPhone 的 fu）] 這個案子是幫一家傳統公司做的專用軟體線上化，想要開發企業級 RIA 想當然爾就是使用 Flex 來處理囉！ 整個案子前端是以 Flex SDK 3.4 + Flex Builder3, PureMVC MultiCore for AS3 , Utility - AS3 StateMachine 以及先前 Erin 所發表的 WidgetsConsole 來處理整個系統的轉換。 整個系統包含前後台共七大系統，分別是：估價，客戶，店面管理，貨品上架，會員管理，分店系統以及權限系統。超級管理員可以利用權限系統分別開出不同職級的權限，然後使用者透過同一入口，依照權限區分，畫面會顯示不同的功能。整個系統最複雜的部份當然是估價系統，由於櫥櫃的建立是透過選擇資料即時演算出來，更何況櫥櫃類的 BOM 表階層是怪物般的可怕...所以在 DB 的建置與前端資料整合的部分著實費了我們一番苦心。 [櫥櫃 BOM 表編輯視窗及櫥櫃 BOM 單物件材質指定] 此外，在 UI 設計上也特別花了一些心思。本案子 Target User 是管理者、店長與公司旗下的業務群，此公司成員年齡約 30-60 歲，皆為一般電腦使用者，所以 UI 設計及操作 Flow 必須比一般線上 RIA 更加友善，才能幫助縮減公司的人事教育花費。如放大整個系統的標準字 size；新增資料時不能碰的快速鍵會鎖定；產品類縮圖雙點擊即可觀看放大圖；操作 flow 皆以左上至右下結束以及利用畫面引導使用者操作都是一些設計上的巧思。 [新增估價單] [簡單易用的業務員用客戶系統] 此外這個專案在實作 PureMVC 過程當然是相當的快樂，因為它的彈性與權職切分實在太令人滿意了！不管是擴充性，Rich Data 管理又或者除錯都非常的容易。當然本人早就已經是 PureMVC 的忠實粉絲了...=P 快來加入 Flex + PureMVC 的行列吧~~ 結果這篇到最後變成 PureMVC 的勸進文...XD
10 comments
Read more

Robotlegs AS3 MVC framework in Flex project (I)

由於今天在 奶綠茶的 Robotlegs FlashAS3 MVC framework 看到他讚賞 Robotlegs AS3 MVC framework 的好用，不禁好奇的來研究一番... 其實這個 AS3 MVC framework 出現有些時日，但是一直都沒有特別的關注它。簡單看完 Robotlegs 最佳實踐 ，其實就可以大部分的了解 Robotlegs 運作的邏輯。不如其他的 MVC framework 有很多語言版本， Robotlegs 完全是專注在 AS3 上。也由於僅有一個版本，所以訊息傳遞是利用 AS3 Event 機制來完成，對於一些想要入門實作 MVC 的 Flash 工程師來說絕對是比 pureMVC 好入門很多...=) Robotlegs 的重點就是搭著「 依賴注入（ Dependency Injection） 」達成 MVCS 的架構,  擷取用最佳實踐的中文翻譯解釋： Quote: 最簡單地, 依賴注入是為對象提供實例變量或屬性的行為. 當你傳遞一個變量到一個類的構造函數, 你在使用依賴注入. 當你設置一個類的屬性, 你在使用依賴注入. 如果你不是使用嚴格的過程或線性方式編寫AS3, 很可能你現在就在使用依賴注入。 呃...依賴注入? ？簡單來講一台霜淇林機，你要賣什麼口味的霜淇林就是依賴不同的原料放置到左右兩個攪拌桶內，而每一個口味可以透過介面實作來達成依賴注入。 以下是簡單的 Dependency Injection 的 Setter injection 範例： public interface 霜淇淋介面 { function 擠():void; } 然後實作： public class 巧克力 implements 霜淇淋介面{ public function 擠():void{ trace("巧克力口味的霜淇淋"); } } public class 草莓 implements 霜淇淋介面{ public function 擠():void{ trace("草莓口味的霜淇淋"); } } public class 香草 implements 霜淇淋介面{ public function 擠():void{ ...
6 comments
Read more