Flex 4の最近のブログ記事
FxUG 全国ツアー 2010 で発表した資料をアップしました。
熊本、沖縄 ( スライドとデモ )
http://labs.taiga.jp/presentationMaterial/FxUG/FxUG11520100703Slide.pdf
http://labs.taiga.jp/presentationMaterial/FxUG/FxUG11520100703Demo.zip
東京 ( スライド )
http://labs.taiga.jp/presentationMaterial/FxUG/FxUG11920100728Slide.pdf
フォントのライセンスや大人の事情により、公開しているデモは Ajax 版のソースのみです。ご了承ください。
@IT さんに寄稿した記事が本日公開されました。
http://www.atmarkit.co.jp/fwcr/rensai2/flex4_04/01.html
「 Flex アプリケーション開発で実際に使用されているライブラリを紹介してください」というお題をいただいて書いています。
自分の携わる仕事は、大抵自前で車輪づくりから始めたり、「非公式なライブラリの使用は禁止」などといった制約が設けられたりしている関係で、あまり人さまが公開しているライブラリを使うことがありません。
そんな中、実用的なものを選んだ結果が記事の内容…と解釈していただければと思います。

Flash CS5 の TLF テキストでは、クラシックテキストでは実現できなかったサロゲートペア文字の入力が可能になりました。
Flex 4 に置き換えて表現すると、MX のテキストコンポーネントでは実現できなかったサロゲートペア文字の入力が SPARK のテキストコンポーネントでは可能…ということになります。
さらに TLF には CharacterUtil というクラスが用意されており、任意の文字コードが上位サロゲートか下位サロゲートかを調べることができます。この機能を組み合わせることによって、任意の文字列がサロゲートペア文字かどうかを調べることもできます。
サンプル ( 画面とソース : Flex 4.1.0.16076 でビルド )
http://labs.taiga.jp/flex4/TLFSample09/
http://labs.taiga.jp/flex4/TLFSample09/srcview/参考
JIS X 0213:2000/2004 surrogate pairs
http://w3.kcua.ac.jp/~fujiwara/jis2000/jis2004/jisx0213-2004-surro.html[JavaScript] サロゲート・ペアに対応した文字列操作関数を書いてみた / LiosK-free Blog
http://liosk.blog103.fc2.com/blog-entry-162.htmlFlash Player 10.1でFlex Sparkの日本語インライン入力とサロゲートペア - kenichis::TechNotes
http://d.hatena.ne.jp/kenichis/20100625/1277475909
昨日行われた おしゃれ Flex User Group で発表した資料をアップしました。
QCon Tokyo 2010 で公開した資料のバージョンアップ版です。
http://labs.taiga.jp/presentationMaterial/FxUG/FxUG10820100520Slide.pdf
TransitionEffect デモ ( 画面とソース )
http://labs.taiga.jp/flex4/TransitionEffectSample/
http://labs.taiga.jp/flex4/TransitionEffectSample/srcview/
ViewStackEffect デモ ( 画面とソース )
http://labs.taiga.jp/flex4/ViewStackEffectSample/
http://labs.taiga.jp/flex4/ViewStackEffectSample/srcview/
自作 Pixel Shader Effect デモ ( 画面とソース )
http://labs.taiga.jp/flex4/QCon2010Sample/
http://labs.taiga.jp/flex4/QCon2010Sample/srcview/
2010 年 5 月 24 日追記 : 勉強会の動画 (USTREAM)
http://www.ustream.tv/recorded/7061609
約 1 ヵ月ぶりになりましたが、前回のエントリーに引き続き、寄稿した Flex 4 関連記事が Adobe Developer Connection に掲載されたので紹介します。
Flex 4 マスターシリーズ #09 Flex 4 エフェクト
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no9.htmlFlex 4 のエフェクトに関するチュートリアルです。
Flex 3 以前のころと記法は変わらないのですが、機能的には強化されています。これらの点も含めて、サンプルファイルを交えて具体的に解説しています。Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no10.htmlFlex 4 の レイアウトに関するチュートリアルです。
Flex 4 からロジックが分離されてできることが増えた分、覚えることが少し増えました。これらの点を細かく解説しています。
先日のエントリーに引き続き、寄稿した Flex 4 関連記事が Adobe Developer Connection に掲載されたので紹介します。
Flex 4 マスターシリーズ #03 Flex 4 ステート
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no4.htmlFlex 4 のステートに関するチュートリアルです。
MXML 上での記法が変更されたので、サンプルファイルを交えて具体的に解説しています。Flex 4 マスターシリーズ #04 Flex 4 CSS
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no5.htmlFlex 4 の CSS に関するチュートリアルです。
Flex 3 以前のバージョンの頃よりも、記法のパターンが拡張されたので、追加点を重点的に解説しています。
Flash Builder 4 が正式に発表されて、無償体験版も公開されました。
この機会に併せて、自分が携わった記事が 2 本公開されましたので紹介します。
Adobe Flex Community Evangelist Files
http://www.adobe.com/jp/joc/flex/evangelists/インタビューを受けました。
国内 Flex コミュニティエバンジェリスト…という大層な名前で紹介していただいています。
若干不機嫌そうな顔に見えるかもしれませんが、決してそんなことはありませんのであしからず。Flex 4 マスターシリーズ #02 Flash Builder 4 新機能
http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no2.htmlタイトルから想像できるかと思いますが、初心者向けの Flex 4 チュートリアル連載記事の第一弾です。
今回、#01, #02 と公開されましたが、#01 は arkw 先生、#02 は私が担当しています。今後も、何本か記事が公開される予定です。
気になったので戯れました。
IInterpolator インターフェイスを実装したクラスは、Animate または Animation クラスに定義したプロパティ値の推移 ( 加算または減算 ) を補間する役割を持っているようです。
![IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) のサンプル [1] IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) のサンプル [1]](http://blog.taiga.jp/images/img2010031001.jpg)
![IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) のサンプル [2] IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) のサンプル [2]](http://blog.taiga.jp/images/img2010031002.jpg)
Animate のサブクラスである AnimateColor クラスの interpolator プロパティに、IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) をそれぞれ定義したサンプルを作ってみました。
サンプル ( 画面とソース : Flex 4.1.0.14570 でビルド )
http://labs.taiga.jp/flex4/InterpolatorSample/
http://labs.taiga.jp/flex4/InterpolatorSample/srcview/
AnimateColor クラスの interpolator プロパティのデフォルト値 ( インスタンス ) は RGBInterpolator ですが、他のクラスを定義することによって変色具合が異なることが確認できるはずです。

前回のエントリに引き続き、今回は MXML で TLF に埋め込みフォントを適応させるサンプルをアップします。
TLF が使用されている Spark コンポーネントは、RichText と RichEditableText の 2 つで、AS で使用するのと比べてかなり楽に使えます。その代わり、Linked Containers 機能のみ使用できない仕様になっているため、注意が必要です。
サンプル ( 画面とソース : Flex 4.0.0.10485 でビルド )
http://labs.taiga.jp/flex4/TLFSample08/
http://labs.taiga.jp/flex4/TLFSample08/srcview/
アップしたサンプルでは、埋め込み許可リストに記載されている内容に基づき、小塚ゴシックを SWF に埋め込んでいます。
http://www.adobe.com/jp/type/browser/legal/embeddingeula.html-
参考
Adobe Open Source : Spark Text Primitives - Flex SDK
http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives

TLF に埋め込みフォントを適応させるための手段について書きます。
FTE の仕様上、TLF の埋め込みフォントフォーマットは DefineFont4(CFF) フォーマットである必要があります。( 従来の TextField に使用されているフォントフォーマットは DefineFont3 フォーマットです )
フォント埋め込み方法
AS, MXML のどちらを使用しても CFF 形式でフォントを埋め込むことは可能ですが、Flash Builder 4 β 2 付属の SDK(4.0.0.10485) で確認したところ、フォント埋め込み時の Embed メタデータタグの引数 cff が、embedAsCFF と名称変更されていたので注意が必要です。
AS での埋め込み例
package {
import flash.display.Sprite;
public class TaigaFont extends Sprite {
[Embed(
source = "asset/font/KozMinPro-Bold.otf",
fontName = "testFont",
mimeType = "application/x-font",
embedAsCFF = "true",
advancedAntiAliasing = "true",
unicodeRange = "U+5927, U+96c5" //大雅
)]
public static const FONT:Class;
}
}
上記コードは、フォントを埋め込んだクラスを SWF に書き出して、Loader クラスから外部読み込みして使用することを想定したものですが、この場合、基底クラスは Sprite または MovieClip クラスである必要があります。( Font クラスを基底クラスにしても mxmlc は SWF を書き出せますが、Loader が読み込んでくれません )
読み込み完了後、作成した TextFlow インスタンスの fontLookup プロパティの値を "embeddedCFF" (FontLookup.EMBEDDED_CFF) に定義して、TextLayoutFormat の fontFamily に取得したフォント名を定義します。
サンプル ( 画面とソース : Flex 4.0.0.10485 でビルド )
http://labs.taiga.jp/flex4/TLFSample07/
http://labs.taiga.jp/flex4/TLFSample07/srcview/
アップしたサンプルでは、埋め込み許可リストに記載されている内容に基づき、小塚明朝を SWF に埋め込んでいます。
http://www.adobe.com/jp/type/browser/legal/embeddingeula.html-
参考
Adobe Open Source : Font Embedding Reprise - Flex SDK
http://opensource.adobe.com/wiki/display/flexsdk/Font+Embedding+RepriseAdobe Open Source : FontTranscoder.java
http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/media/FontTranscoder.javazenoplex : UNICODE RANGE GENERATOR
http://www.zenoplex.jp/tools/unicoderange_generator.html高橋文樹.com : TextlayoutFrameworkやFlash.text.engineで埋め込みOpenTypeフォントを使う方法
http://takahashifumiki.com/web/programing/710/
