なんとなくサンプルに出てきていたから使っていた「Embed」ですが、なんだか使い方は様々だったようです。
実際使う時絶対忘れそうなので覚書。
1. ActionScript ファイルまたは MXML ファイルの ブロック内にアセットを埋め込む場合に使用する時
[Embed(parameter1, paramater2, ...)] メタデータタグ
2. MXML タグ定義で使用する時
@Embed(parameter1, paramater2, ...) ディレクティブ
3. MXML ファイルの <mx:Style> ブロック内で使用する時
Embed(parameter1, paramater2, ...) ディレクティブ
ちょっとずつEmbedの書き方が違いますよね。
例えば 1. の書き方で画像を読み込んだ場合
<mx:Script>
<![CDATA[
[Embed(source="assets/logo.png")]
[Bindable]
public var Logo:Class;
]]>
</mx:Script>
<mx:Image id="myLogo" source="{Logo}"/>
<mx:Image id="myLogo2" source="{Logo}"/>
とidを別の名前でふってあげると画像をコピー出来るんですが、
2. のやり方で書くと
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
直接書いてしまうので、もちろん画像を１つだけしか使えません。
1. の使い方でもう一つ。
上記の
[Embed(source="assets/logo.png")]
の部分をswfにするともちろんswfファイルが読めるのですが、もうひとつ加える事によって、そのswfファイルの中にあるButton および MovieClip シンボルだけを読み込む事が出来るようなのです。
ただし、Graphic シンボルは ActionScript 用にエクスポートできないので、埋め込むことはできません。
となっていました。
回避方法は探すとみつかるとは思いますが、基本の方法では無理なようです。
<mx:Script>
<![CDATA[
[Embed(source="assets/library.swf", symbol="BadApple")]
[Bindable]
public var BadApple:Class;
[Embed(source="assets/library.swf", symbol="Pumpkin")]
[Bindable]
public var Pumpkin:Class;
]]>
</mx:Script>
<mx:Image id="badApple" source="{BadApple}" width="150" height="151.8"/>
<mx:Image id="pumpkin" source="{Pumpkin}" width="150" height="131.7"/>
symbol プロパティにシンボルのリンケージ名を書いてやる事で、それだけを使用する事が出来るようです。
これ、どうするんだろうとちょっと思っていたので、すっきりです。
mxmlコンポーネントButtonに対して画像を当てはめる場合。
<mx:Style>
Button
{
upSkin: Embed("assets/box_closed.png");
overSkin: Embed("assets/box.png");
downSkin: Embed("assets/box_new.png");
}
</mx:Style>
<mx:Button/>
と書けばButtonをデフォルトからグラフィカルに変化！！です。
これもすっきり。
あと、フォントの読み込み。
これも疑問に思っていた内容なので、覚書です。
1. の書き方なのですが、
[Embed(source='myfont.ttf', fontName='foo', mimeType='application/x-font')]
var myfont:Class;
MainTextField.defaultTextFormat=new TextFormat("font", 12, 0x000000);
MainTextField.embedFonts = true;
source にハードディスク上のフォントファイルにあるTrueTypeのフォントを指定します。
読み込めるフォントタイプはTTFだけです。これも要注意！！
で、TextFormatに読み込んだファイルのClass名をしていてあげて、embedFontsを”true”にしてやればOK。
フォントもMXML ファイルの での読み込みも出来ます。
<mx:Style>
@font-face
{
font-family: Copacetix;
src: url("assets/copacetix.ttf");
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
}
.MyTextStyle
{
font-family: Copacetix;
font-size: 24pt;
}
</mx:Style>
<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>
ううん〜〜
色々方法がありますねぇ。
使い方、使いどころ、考える事が多いですなぁ。
最後に
MIME タイプについて
指定しなければFlex側でファイルの拡張子に基づいて、読み込むファイルのタイプを推測してくれるようです。
指定した場合はオーバーライドで書き換えてくれるみたいです。
- application/octet-stream
- application/x-font
- application/x-font-truetype
- application/x-shockwave-flash
- audio/mpeg
- image/gif
- image/jpeg
- image/png
- image/svg
- image/svg-xml
コメントはまだありません。