Oct 30, 2008

[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 畫面:

Oct 28, 2008

[Flex] Resizable Window Layout

最近研究起『使用者經驗』特別對非固定式 layout 有濃厚的興趣,雖然這類的教學已經被大家寫到爛了,在這邊還是與大家分享一下在 Flex 中實作網頁上 Resizable Swf Window Layout 的 很簡單作法...



<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
frameRate="30" horizontalScrollPolicy="off"
verticalScrollPolicy="off"
layout="absolute" width="400" height="430">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
private function updateStageSize() : void
{
width = testWin.width;
height = testWin.height;
//Call 網頁上的 javascript 做 resize
ExternalInterface.call("doResize", width, height);
}
]]>
</mx:Script>
<mx:Resize id="stageResize" duration="600"/>
<mx:TabNavigator id="testWin" resizeToContent="true"
resizeEffect ="stageResize"
resize="callLater(updateStageSize)" >
<!-- 測試用 container-->
<mx:VBox label="Tag1"
width="400"
height="400">
</mx:VBox>

<mx:VBox label="Tag2"
width="300"
height="300">
</mx:VBox>

<mx:VBox label="Tag3"
width="200"
height="200">
</mx:VBox>
</mx:TabNavigator>
</mx:Application>

callLater(function) 的使用在這邊很重要...你可以試著將這個 Function 拿掉重新輸出就會知道有啥咪狀況了...=P

網頁上的 Java Script:
請愛用 swfObject 來 崁入 Swf,真情推薦!!

function doResize(w, h){
document.getElementById( 放置SWF的DIV id ).style.height=h+"px";
document.getElementById( 放置SWF的DIV id ).style.width=w+"px";
}


因為 google page 已經開始停止服務,雖然舊用戶還是可以使用,但是不知道哪天會掛掉,所以再找到下一個好用又可以放置 javascript 的網站空間前,範例原始檔先暫停提供囉!

Oct 21, 2008

[AIR] Using Badger for Adobe AIR applications


The application was created by Grant Skinner for Adobe Systems, Inc.

剛開始一般開發者要分享 AIR app 都是直接留個連結提供下載,對使用者而言無形中增加許多麻煩... 如 Adobe® AIR™ runtime 沒有安裝... air 程式安裝檔被 Mac OSX rename 成 .air.zip 等等...

在AIR beta版時 Adobe Lab推出由 Grant Skinner 製作的 AIR install badge 提供一個 AIR app 共同介面的線上安裝接口。當使用者點選網頁上客制的 AIR install badge, 程式自動判斷使用者電腦有無缺少 Adobe® AIR™ runtime 或是直接出現程式安裝畫面,聽起來是很完美...不過客製化部分完全是手工製作...對開發者無形中也增加許多麻煩(本人就懶得使用了...ORZ )

直到 AIR 正式版現身,Grant Skinner 又推出了 AIR install badges application "Badger" ,此程式當然是由 Flex 製作的 AIR app,原文連結 : Using Badger for Adobe AIR applications

Badger 將一切客製 AIR install badge 流程圖像化了,對超級懶人的我簡直是大愛~~
以下的範例就是由 Badger 製作:( 真的是很簡單喔!反而是多花了一些時間搞懂如何放到 Blogger 上...)

Jam's Mp3 Player v1- AIR1.0

Please upgrade your Flash Player
This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.

[App] 國道計程收費速算器 2.0

之前的版本跟目前 國道計程官網 所列資料誤差很大,這支 App 也一直有人在使用,所以為了答謝愛用者只好做了一次大更新,因為對 CoronaSDK scrollView widget 有點怨言,所以 iOS 版本採用 Swift3 重寫了一遍,不過 Android 版本還是維...