カテゴリー別アーカイブ: Flex 4

@IT Flex 開発記事

@IT さんに寄稿した記事が本日公開されました。
http://www.atmarkit.co.jp/fwcr/rensai2/flex4_04/01.html

「 Flex アプリケーション開発で実際に使用されているライブラリを紹介してください」というお題をいただいて書いています。

自分の携わる仕事は、大抵自前で車輪づくりから始めたり、「非公式なライブラリの使用は禁止」などといった制約が設けられたりしている関係で、あまり人さまが公開しているライブラリを使うことがありません。

そんな中、実用的なものを選んだ結果が記事の内容…と解釈していただければと思います。

TLF (Text Layout Framework) と戯れる #11

サロゲートペア文字を入力した SPRAK と MX の TextArea コンポーネント比較

Flash CS5 の TLF テキストでは、クラシックテキストでは実現できなかったサロゲートペア文字の入力が可能になりました。

Flex 4 に置き換えて表現すると、MX のテキストコンポーネントでは実現できなかったサロゲートペア文字の入力が SPARK のテキストコンポーネントでは可能…ということになります。

さらに TLF には CharacterUtil というクラスが用意されており、任意の文字コードが上位サロゲートか下位サロゲートかを調べることができます。この機能を組み合わせることによって、任意の文字列がサロゲートペア文字かどうかを調べることもできます。

おしゃれ Flex User Group 発表資料

昨日行われた おしゃれ 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

Flex 4 マスターシリーズ #09, 10

約 1 ヵ月ぶりになりましたが、前回のエントリーに引き続き、寄稿した Flex 4 関連記事が Adobe Developer Connection に掲載されたので紹介します。

  • Flex 4 マスターシリーズ #09 Flex 4 エフェクト
    http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no9.html

    Flex 4 のエフェクトに関するチュートリアルです。
    Flex 3 以前のころと記法は変わらないのですが、機能的には強化されています。これらの点も含めて、サンプルファイルを交えて具体的に解説しています。

  • Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts
    http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials_no10.html

    Flex 4 の レイアウトに関するチュートリアルです。
    Flex 4 からロジックが分離されてできることが増えた分、覚えることが少し増えました。これらの点を細かく解説しています。

Flex 4 マスターシリーズ #03, 04

先日のエントリーに引き続き、寄稿した Flex 4 関連記事が Adobe Developer Connection に掲載されたので紹介します。

Flash Builder 4 リリース関連記事

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 と公開されましたが、#01arkw 先生、#02 は私が担当しています。

    今後も、何本か記事が公開される予定です。

Flex 4 の IInterpolator と戯れる

気になったので戯れました。

IInterpolator インターフェイスを実装したクラスは、Animate または Animation クラスに定義したプロパティ値の推移 ( 加算または減算 ) を補間する役割を持っているようです。

IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) のサンプル [1]

IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) のサンプル [2]

Animate のサブクラスである AnimateColor クラスの interpolator プロパティに、IInterpolator インターフェイスを実装した 3 つのクラス (RGBInterpolator, HSBInterpolator, NumberInterpolator) をそれぞれ定義したサンプルを作ってみました。

AnimateColor クラスの interpolator プロパティのデフォルト値 ( インスタンス ) は RGBInterpolator ですが、他のクラスを定義することによって変色具合が異なることが確認できるはずです。

TLF (Text Layout Framework) と戯れる #10

埋め込みフォント サンプル MXML 版

前回のエントリに引き続き、今回は MXML で TLF に埋め込みフォントを適応させるサンプルをアップします。

TLF が使用されている Spark コンポーネントは、RichText と RichEditableText の 2 つで、AS で使用するのと比べてかなり楽に使えます。その代わり、Linked Containers 機能のみ使用できない仕様になっているため、注意が必要です。

TLF (Text Layout Framework) と戯れる #09

埋め込みフォント サンプル

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 に取得したフォント名を定義します。

TLF (Text Layout Framework) と戯れる #08

Linked Containers サンプル

Linked Containers と呼ばれる機能のサンプルをアップしました。 TextFlow.flowComposer プロパティに、表示オブジェクト情報を持った複数の ContainerController インスタンスを登録することにより、柔軟なレイアウトを作ることができます。

これはなかなか面白いです。