アクセシビリティ

Flex クイックスタート： はじめに

目次

アプリケーションアセットの埋め込み

Adobe® Flex™ アプリケーションにさまざまなアセットを埋め込むことができます。 埋め込まれたアセットはコンパイルされて、Flex アプリケーションの SWF ファイルになります。 実行にロードされるのではないので、アプリケーションで元のアセットファイルを導入する必要はありません。

ヒント：アセットを埋め込む代わりに、実行時にロードすることもできます。 実行時にロードされるアセットはアプリケーション内にコンパイルされないので、アプリケーションで導入する必要があります。 この方法には、Flex アプリケーションのサイズを小さして初期ロード時間を短縮できるメリットがあります。

PNG、JPEG および GIF ファイル形式の画像、SWF ファイル、MP3 ファイル形式のサウンドファイル、SVG ファイル、フォントを埋め込むことができます。 以下のトピックで、これらのアセットを埋め込む方法について説明します。

画像の埋め込み（複数インスタンス）

PNG、JPEG または GIF ファイル形式の画像を Flex アプリケーションに埋め込んで、複数のインスタンスを作成することができます。

次の例では、 [Embed] メタデータタグを使用してアプリケーションに画像を埋め込み、バインディング可能な ActionScript クラスに関連付けます。 これによって、 source Image コントロールの source プロパティを Logo クラスにバインディングします。■タグのみの部分を開けません■ Logo クラスは、Button コントロールの icon プロパティなど、画像を取得するすべてのコンポーネントプロパティにバンディングすることができます。■訳をまとめました■ icon ■訳を前の文節にまとめました■

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImages/index.html"
    layout="horizontal" width="350" height="250"
>
    
    <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}"/>

</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

画像の埋め込み（単一インスタンス）

インライン @Embed 指示語を使用して、1 回だけ表示する画像を Flex アプリケーションに埋め込むことができます。

次の例では、アプリケーションに Image コンポーネントを追加して、 @Embed 指示語をその source 属性内で使用します。 これと同じ画像を別の Image コントロールで使用するには、画像をそのコンポーネントにも埋め込む必要があります。 埋め込んだ画像の複数インスタンスを表示する場合は、代わりに [Embed] メタデータタグを使用します。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingAnImage/index.html"
    width="200" height="240"
>
    <mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

スケール 9 で拡大／縮小する画像の埋め込み

画像ファイルを Flex アプリケーションに埋め込んで、コンポーネントと同様の方法で拡大／縮小することができます。 スケール 9 機能を使用すると、画像の 4 隅はまったく拡大／縮小されず、横のボーダーは横方向のみに、縦のボーダーは縦方向のみに拡大／縮小されます。 これは、たとえば角が丸いボックスを作成したり、コンポーネントと同様にボーダーのシャープさを維持してサイズ変更したりする場合に便利です。

次の例では、 scaleGridTop, scaleGridBottom, scaleGridLeft および scaleGridRight のグリッドライン位置のプロパティを Embed メタデータタグで使用して、スケール 9 グリッドを作成します。

ヒント：グリッドライン位置の値を簡単に取得するには、Adobe® Photoshop® の長方形選択ツールと情報パレットと共にガイドを使用します。

Photoshop のボーダー測定

ヒント：埋め込まれたスケール 9 画像のインスタンスを回転すると、その画像のサイズを後で変更するときにスケール 9 が無効になります。

例 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImagesScale9/index.html"
    layout="vertical" width="400" height="480"

>

    <mx:Script>
        <![CDATA[
            [Embed(
                source="assets/fancy_border.png", 
                scaleGridTop="55", scaleGridBottom="137", 
                scaleGridLeft="57", scaleGridRight="266"

            )]
            
            [Bindable]
            public var FancyBorderImage:Class;
        ]]>

    </mx:Script>

    <mx:Image source="{FancyBorderImage}" width="146" height="82"/>

    <mx:Image source="{FancyBorderImage}" width="266" height="150"/>
    <mx:Image source="{FancyBorderImage}" width="325" height="183"/>

</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

スキン用 CSS を使用した画像の埋め込み

画像を Flex アプリケーションに埋め込んで、コンポーネントのスキンとして使用することができます。

CSS 型セレクタを定義して、所定の型のすべてのコンポーネントのスキンを設定します。 次の例では、Button コントロールの型セレクタを作成します。 型セレクタは、Embed を使用してコンポーネントのスキンプロパティとして使用する画像を指定します。■タグのみの部分を開けません■ Embed. クラスセレクタを定義して、カスタムの CSS クラスを作成して特定のコンポーネントにスタイルとして適用することもできます。

ヒント：クラスセレクタは、個々のコンポーネントにスタイルを適用するために使用することができる名前付きのスタイルクラスを作成します。クラスセレクタは、 styleName プロパティを使用してコンポーネントに割り当てます。 型セレクタは、次の例に示すように所定の型のすべてのコンポーネントのスタイルを設定します。

例 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingImagesCSS/index.html"
    layout="horizontal" width="270" height="100"
    horizontalAlign="center" verticalAlign="middle" 

>

    <mx:Style>
        Button 
        {
            upSkin: Embed("assets/box_closed.png");

            overSkin: Embed("assets/box.png");
            downSkin: Embed("assets/box_new.png");

        }
    </mx:Style>
    
    <mx:Button/>
    
    <mx:Text text="Roll over and click the box!"/>

</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

SWF ファイルの埋め込み

SWF ファイルの埋め込みは画像の埋め込みとほぼ同様です。 違いは、埋め込んだ SWF ファイルのインスタンスを MovieClip クラスのインスタンスとして扱うことができる点です。 このインスタンスは、MovieClip クラスのサブクラスである MovieClipAsset クラスのサブクラスです。

注意：埋め込んだ SWF ファイルのプロパティまたはメソッドに直接アクセスすることはできません。 ただし、 LocalConnection を使用してアクセスすることはできます。

例 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/EmbeddingSwfFiles/index.html"
    layout="horizontal" width="290" height="290"
    horizontalAlign="center" verticalAlign="middle"
 >

    <mx:Script>
    <![CDATA[
            [Embed(source="assets/hourglass.swf")]

            [Bindable]
            public var Hourglass:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="hourglass" source="{Hourglass}"/>
</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

SWF ライブラリアセットの埋め込み

既存の SWF のライブラリからシンボルをアプリケーションに埋め込むことができます。 Flash では、Button、MovieClip および Graphic の 3 種類のシンボルを定義することができます。 Button および MovieClip シンボルを Flex アプリケーションに埋め込むことができますが、Graphic シンボルは ActionScript 用にエクスポートできないので、埋め込むことはできません。

次の例では、 source ■訳文を後の文節にまとめました■ [Embed] メタデータタグの source プロパティを使用して、使用するライブラリを含む SWF ファイルを指定します。■タグのみの部分を開けません■ symbol ■訳文を後の文節にまとめました■ [Embed] さらに [Embed] メタデータタグの symbol プロパティを使用して、ライブラリにある埋め込みたいシンボルの Linkage ID を指定します。■タグのみの部分を開けません■

例 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/EmbeddingSwfLibraryAssets/index.html"
    layout="horizontal" width="450" height="240"
    horizontalAlign="center" verticalAlign="bottom"     

>
  
    <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"/>
    

</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

サウンドファイルの埋め込み

MP3 ファイルを Flex アプリケーションに埋め込むことができます。そのためには、 [Embed] メタデータタグを使用して MP3 ファイルを再生します。

注意：埋め込まれたサウンドファイルはアプリケーション（生成された SWF ファイル）内に含まれます。MP3 ファイルはサイズが非常に大きくなることがあり、アプリケーションのサイズも大きくなるので、ダウンロードに時間がかかることがあります。

次の例では、SoundAsset として MP3 ファイルの新規インスタンスを作成します。■タグのみの部分を開けません■ SoundAsset. ■訳をまとめました■ play() ■訳を後の文節にまとめました■ SoundAsset クラスの play() メソッドを使用して、MP3 ファイルのインスタンスを再生し、返された ■タグのみの部分を開けません■ SoundChannel オブジェクトを保存します。 stop() ■訳を後の文節にまとめました■ SoundChannel これによって、後で SoundChannel オブジェクトの stop() メソッドを呼び出して再生を終了することができます。■タグのみの部分を開けません■

例 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="center" viewSourceURL="srcEmbeddingSoundFiles/index.html">

    <mx:Script>
        <![CDATA[
            import mx.core.SoundAsset;
            import flash.media.*;

            [Embed(source="assets/pie-yan-knee.mp3")]

            [Bindable]
            public var Song:Class;

            public var mySong:SoundAsset = new Song() as SoundAsset;
            public var channel:SoundChannel;
            
            public function playSound():void 
            {

                // Make sure we don't get multiple songs playing at the same time
                stopSound();
                
                // Play the song on the channel
                channel = mySong.play();
            }
            
            public function stopSound():void 
            {

                // Stop the channel, but only if it exists
                if ( channel != null ) channel.stop();
            }

        ]]>
    </mx:Script>
    
    <mx:HBox>
        <mx:Button label="play" click="playSound();"/>

        <mx:Button label="stop" click="stopSound();"/>        
    </mx:HBox>
    
    <mx:Text width="348" textAlign="center" color="#ffffff">

        <mx:htmlText>
            <![CDATA[<a href="http://derekaudette.ottawaarts.com/music.php">Pie-Yan-Knee Written and Performed by: Derek R. Audette © 2004 (Creative Commons Attribution License)</a>]]>
        </mx:htmlText>
    </mx:Text> 
    
</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

SVG ファイルの埋め込み

SVG ファイルを Flex アプリケーションに埋め込むことができます。

SVG ファイルの埋め込みは画像の埋め込みとほぼ同様です。 違いは、埋め込んだ SVG ファイルのインスタンスを Sprite クラスのインスタンスとして扱うことができる点です。 このインスタンスは、Sprite クラスのサブクラスである SpriteAsset クラスのインスタンスです。 また、埋め込まれた SVG ファイルのベクトルプロパティは保持され、サイズ変更や変形によってピクセルに変換されることはありません。

注意：SVG ファイルを実行時にインポートすることはできません。Flex アプリケーションに埋め込めるのはコンパイル時のみです。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" 
    viewSourceURL="srcEmbeddingSvgFiles/index.html"
    width="600" height="470"

>
    <mx:Script>
    <![CDATA[
            [Embed(source="assets/frog.svg")]

            [Bindable]
            public var SvgFrog:Class;            
        ]]>
    </mx:Script>

    <mx:Image id="smallFrog" source="{SvgFrog}" width="128" height="130"/>

    <mx:Image id="largeFrog" source="{SvgFrog}"/>
</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

ヒント：SVG のカエルのグラフィックは Architetto Francesco Rollandin 氏提供。Public Domain*（Open Clip Art Library*）に公開してくれたことに感謝します。 ここには、ほかにも無料の SVG ファイルが用意されています。ぜひ、ご利用ください。

トップへ戻る

フォントの埋め込み

フォントを Flex アプリケーションに埋め込んで、テキストを使用したコンポーネントのスタイルとして適用することができます。

次の例では、クラスセレクタを作成して埋め込まれたフォントの font-family 名を参照します。 次に、Text コントロールを作成して、クラスセレクタに対してスタイルを設定します。

ヒント：ファイルサイズを小さくするために、フォントを埋め込む際に特定の文字だけを追加することができます。そのためには、 unicode-range ■訳文を後の文節にまとめました■ @font-face 宣言の unicode-range プロパティを指定します。■タグのみの部分を開けません■

詳細：フォントの使用について詳しくは、『Flex 2 Developer's Guide』の「Using Fonts」を参照してください。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal" 
    horizontalAlign="center" 
    verticalAlign="center" 
    viewSourceURL="src/EmbeddingFonts/index.html"

>

    <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%"/>
    

</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

Copacetix TrueType フォントは Copacetix.com* のご好意により提供されました。 Creative Commons Attribution-ShareAlike 2.0 ライセンス*に基づき使用が許可されます。

トップへ戻る

詳細情報

アセットの埋め込みについて詳しくは、『Flex 2 Developer's Guide』の「Embedding Assets」を参照してください。

著者について

Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。 設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。 常に強固な意見を持ち、活気にあふれ情熱的。 いつも笑顔を絶やさず、ガムをかみながら歩くこともある。

次のステップ

Flex デベロッパーセンター
ホーム
アーキテクチャ
テクノロジ
Flexの習得
はじめに
習得パス
ビデオトレーニング
Flexの統合
FlexとColdFusion
FlexとJava
Flexと.NET
FlexとPHP
デザインとコンポーネント
コンポーネント
セキュリティ、テスト、展開
UIデザインとRIAワークフロー
パートナー
FlexとILOG
FlexとIntuit*
FlexとSalesforce.com*
FlexとSAP*
サービスとツールキット
データサービス*
関連リソース
Flexヘルプとサポート
Flexバグベース*
Flex ドキュメンテーション*
Flex SDK（オープンソース）*
Adobe Labs*
Adobe TV*
記事アーカイブ*