Apollo ウインドウスタイルの変更

MXML ファイル内にも直接スタイルを設定できますが、今回は別途 CSS ファイルを作成してみます。Ctrl-n キーを押すと下のようなウィザードが表示されます。ここでは Flex フォルダー下の CSS File を選択します。

Next キーを押すと下の画面に変わります。MyBrowser が選択されていることを確認して、File name に MyBrowser と入力したら画面下の Finish を押します。

これで MyBrowser.css が作成されてエディタに開かれた状態になったと思います。ここではウインドウの背景を透かしたいので Application のスタイル属性を下のように記述します。ファイルの保存をお忘れなく。

/* MyBrowser.css file */
Application {
  background-color:"";
  background-image:"";
  background-alpha:"0.4";
}
 

あとは、MXML ファイルから今作成した CSS ファイルを参照するように指定すれば完了です。以下のタグを MyBrowser.mxml ファイル内にルートタグの子として記述します。

<mx:Style source="MyBrowser.css"/>
 

下の図は背景の黒が少し分かる程度で分かりにくいですが、実際のデスクトップ上で見るとよく分かるかと思います。のちほどお確かめくださいませ。

Effect の適用

Flex には Effect という表現効果を定義したクラスがあります。これを使って、コンテンツが表示される際にだんだんくっきりしてくるような効果を追加してみたいと思います。

今回使用するのは Fade という Effect のサブクラスです。Fade は対象オブジェクトの透明度を指定された効果前の値 （alphaFrom） から効果後の値 （alphaTo） に変化させます。効果にかける時間は duration で指定します。

タグで定義すると以下のようになります。（もちろん ActionScript で定義することも可能です）

<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
　

上で定義した効果を HTML が表示されるタイミングで適用したいので、HTML コンポーネントの complete イベントに設定されている pushURL() 関数で呼び出すようにします。

  private function pushURL(e:Event):void {
    // 効果のターゲットを設定したら開始
    fadeIn.target = html;
    fadeIn.play();
    // 現在の location を配列に記録
    history.push(html.location);
    // あわせて入力テキストフィールドの表示も変更
    inputTF.text = html.location;
  }
 

ついでに、新しい URL が指定された時点で HTML コンポーネントを透明にしてしまいたいと思います。URL が変更されると HTML コンポーネントの locationChange イベントが発生しますので、そのタイミングで HTML コンポーネントのアルファを 0 に設定します。ここでは下のコードのように HTML タグの locationChagnge 属性に直接書いてみました。

<mx:HTML id="html" width="100%" height="100%" locationChange="html.alpha=0" complete="pushURL(event)"/>
 

最後に全体のコードです。ここまでで約40行になりました。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      // この配列に現在表示中の URL までが記録されている
      private var history:Array = new Array();
 
      private function back():void {
        if (history.length > 1) {
          history.pop();  // 現在の URL を廃棄
          var prevURL:String = history[history.length - 1]; // 最終エントリを取得
          html.location = prevURL;  // HTML コンポーネントに URL を設定
          inputTF.text = prevURL;   // 入力テキストフィールドの表示も変更
        }
      }
      private function loadURL():void {
        html.location = inputTF.text;
      }   
      private function pushURL(e:Event):void {
        // 効果のターゲットを設定したら開始
        fadeIn.target = html;
        fadeIn.play();
        // 現在の location を配列に記録
        history.push(html.location);
        // あわせて入力テキストフィールドの表示も変更
        inputTF.text = html.location;
      }
    ]]>
  </mx:Script>
  <mx:Style source="MyBrowser.css"/>
  <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
  <mx:HBox>
    <mx:TextInput id="inputTF" width="225" text="http://" enter="loadURL()"/>
    <mx:Button label="移動" click="loadURL()"/>
    <mx:Button label="戻る" click="back()"/>
  </mx:HBox>
  <mx:HTML id="html" width="100%" height="100%" locationChange="html.alpha=0" complete="pushURL(event)"/>
</mx:ApolloApplication>