2008年9月アーカイブ

easycasting.xmlのcast要素・index属性で、Castの重なり順を設定できる。

シーンエディターで設定してみる。

index属性を設定

「シーンにキャストを挿入」でクラス名が「Orange」と「Skyblue」の正方形を配置する。

Orangeのindex属性値を1に、Skyblueのindex属性値を2として保存し、

パブリッシュすると、「Skyblue」が前面にくる。

Orangeのindex属性値を11に、Skyblueのindex属性値を2として保存し、

パブリッシュすると、今度は「Orange」が前面にくる。

つまり、index属性の値の大きい方が前面に配置される。

index属性値について

index属性には、1以上の整数（自然数）を設定する。0以下の整数を入れても、easycasting.xmlにindex属性が設定されない。

小数を設定した場合、小数点以下を切り捨てた整数値が設定される。

おまけ

※下記の問題はver.3.0.4で修正されました。

シーンエディターで「保存」して、同一ファイルを「開く」と、Cast要素の並びが上下入れ替わる。知らないととまどうかもしれない。上は再現ビデオ。

シーンエディターからeasycasting.xmlを生成する際、cast要素の並び順が逆になるので、それが原因？

ver.3.0.3で確認。

Progression ver.3からの新機能「シーンエディター」を使ってみた。

「ウィンドウ」＞「その他のパネル」＞「Progression シーンエディター」を選ぶと、

シーンエディターが出る。

ここから、 「1-5 ボタンをクリックして画面遷移する」で作成した（のと似た）easycasting.xmlをシーンエディターで編集してみた。

保存されるeasycasting.xmlは以下のようになる。

<?xml version="1.0" encoding="utf-8"?>
<prml version="2.0.0" type="text/easycasting">
  <scene name="index" cls="jp.progression.scenes.EasyCastingScene" title="トップページ">
    <cast cls="ContentIndex" x="125"/>
    <cast cls="Nav"/>
    <scene name="content_a" cls="jp.progression.scenes.EasyCastingScene" title="コンテンツA">
      <cast cls="ContentA" x="125"/>
      <cast cls="Nav"/>
    </scene>
    <scene name="content_b" cls="jp.progression.scenes.EasyCastingScene" title="コンテンツB"/>
      <cast cls="ContentB" x="125"/>
      <cast cls="Nav"/>
  </scene>
</prml>

編集中の様子をビデオキャプった。キャプった後に気付いたこと。キャストはコピペできる。これを使えばもっと効率的に編集できる。

保存の様子もビデオキャプった。

編集中のプロジェクトのdeployフォルダの中のeasycasting.xmlを見つけて上書き保存してやる。

使ってみた感想

• シーンのアイコンは「フィルム」でキャストのアイコンは「人」。これはわかりやすい。
• xmlの編集が苦手な人にはすごくうれしい（短大の授業ではシーンエディターなしには無理。ありがたや！）。
• マークアップエンジニアのスキルがあれば、これまで通り使い慣れたエディタを使った方が速い。

さて、easycasting.xmlの構成を知らない人に対して、このエディタの使い方をどうやって解説しようか。ToDoにしておく。

参考

• progression.jp | ドキュメント | コンポーネント制作ガイド
• blog.progression.jp» ブログアーカイブ » [小ネタ] シーンエディターの便利な使い方

新しくプロジェクトを作ろうとしたら、「新しいバージョンのプログレッションがあります。今すぐアップデートしたい？」と聞いてきてくれた。

OKを押すとブラウザが起動し、最新版の3.0.2がダウンロードできるページへ遷移した。

まとめというか、ActionScript 3.0 コンポーネントリファレンスガイドからのコピペ。

全共通

• direction : Tween インスタンスのイージングの方向を決定します。
• duration : Tween インスタンスの継続時間を決定します。
• easing : アニメーションのトゥイーン効果を設定します。

BlindsEffect

Blinds クラスは、次第に表示される矩形または消えていく矩形を使用して、ムービークリップオブジェクトを表示します。

• dimension : マスクストリップが垂直 (0) か水平 (1) かを示す整数。
• direction
• duration
• easing
• numStrips : Blinds 効果内のマスクストリップの数。推奨される値の範囲は 1 ～ 50 です。

FadeEffect

Fade クラスは、ムービークリップオブジェクトをフェードインまたはフェードアウトします。

• direction
• duration
• easing

FlyEffect

Fly クラスは、指定した方向からムービークリップオブジェクトをスライドインします。

• direction
• duration
• easing
• startPoint : 開始位置を示す整数。値の範囲は 1 ～ 9 です。左上 : 1。中央上 : 2。右上 : 3。左中央 : 4。中央 : 5。右中央 : 6。左下 : 7。中央下 : 8。右下 : 9。

IrisEffect

Iris クラスは、正方形のシェイプまたは円のシェイプがズームインまたはズームアウトするアニメーション化されたマスクを使用して、ムービークリップオブジェクトを表示します。

• direction
• duration
• easing
• shape : fl.transitions.Iris.SQUARE (正方形) または fl.transitions.Iris.CIRCLE (円) のマスクシェイプ。
• startPoint : 開始位置を示す整数。値の範囲は 1 ～ 9 です。左上 : 1。中央上 : 2。右上 : 3。左中央 : 4。中央 : 5。右中央 : 6。左下 : 7。中央下 : 8。右下 : 9。

PhotoEffect

写真のフラッシュのようにムービークリップオブジェクトの表示 / 非表示を切り替えます。

• direction
• duration
• easing

PixelDissolveEffect

PixelDissolve クラスは、チェッカーボードのパターンでランダムに表示される矩形または消える矩形を使用して、ムービークリップオブジェクトを表示します。

• direction
• duration
• easing
• xSections : 水平軸に沿ったマスク矩形セクションの数を示す整数。推奨される値の範囲は 1 ～ 50 です。
• ySections : 垂直軸に沿ったマスク矩形セクションの数を示す整数。推奨される値の範囲は 1 ～ 50 です。

RotateEffect

Rotate クラスは、ムービークリップオブジェクトを回転させます。

• ccw : ブール値。false の場合は時計回りの回転、true の場合は反時計回りの回転を示します。
• degrees : オブジェクトを回転する角度を示す整数。推奨される値の範囲は 1 ～ 9999 です。たとえば、角度に 1080 を指定すると、オブジェクトは完全に 3 回転します。
• direction
• duration
• easing

SqueezeEffect

Squeeze クラスは、ムービークリップオブジェクトを水平または垂直に拡大 / 縮小します。

• dimension : Squeeze 効果が水平 (0) か垂直 (1) かを示す整数。
• direction
• duration
• easing

WipeEffect

Wipe クラスは、水平方向に移動するシェイプのアニメーション化されたマスクを使用して、ムービークリップオブジェクトの表示と非表示を切り替えます。

• direction
• duration
• easing
• startPoint : 開始位置を示す整数。値の範囲は 1 ～ 9 です。左上 : 1。中央上 : 2。右上 : 3。左中央 : 4。中央 : 5。右中央 : 6。左下 : 7。中央下 : 8。右下 : 9。

ZoomEffect

Zoom クラスは、縦横比を維持しながら拡大 / 縮小することで、ムービークリップオブジェクトをズームインまたはズームアウトします。

• direction
• duration
• easing

前に貼ったビデオキャプチャを再掲載しとく。

パラメータeasingの値は以下の19通り。

• Back.easeIn
• Back.easeInOut
• Back.easeOut
• Bounce.easeIn
• Bounce.easeInOut
• Bounce.easeOut
• Elastic.easeIn
• Elastic.easeInOut
• Elastic.easeOut
• None.easeIn
• None.easeInOut
• None.easeNone *初期値
• None.easeOut
• Regular.easeIn
• Regular.easeInOut
• Regular.easeOut
• Strong.easeIn
• Strong.easeInOut
• Strong.easeOut

directionの「in」「out」は「in点」「out点」の意味だが、「easeIn」「easeInOut」「easeOut」は以下のような意味になる。

• easeIn ... 最初に効果を適用
• easeInOut ... 最初と最後に効果を適用
• easeOut ... 最後に効果を適用

Bounce.easeInならば、「最初にBounceを適用」となる。

参考ページ

• http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/fl/transitions/easing/package-detail.html
• http://livedocs.adobe.com/flash/9.0_jp/main/00000963.html#wp94261

コンポーネントを配置するだけで、エフェクトをかけることができるということは、1-3 フェードインで表示する - Progression 学習ノートでやった。今回は、パラメータの設定のうち「direction」をいじくってみる。

前回「1-5 ボタンをクリックして画面遷移する - Progression 学習ノート」の続きとしてすすめる。

エフェクトコンポーネント群から「FadeEffect」をドラッグし、シンボル「ContentA_mc」に配置する。

FadeEffectコンポーネントを選択し、パラメータパネルで「direction」を設定する。

directionには「in」「inOut」「out」の3種類があるので、以下のように設定してみる。

• ContentIndex ... in
• ContentA ... inOut *初期値
• ContentB... out

パブリッシュしたのを、ビデオキャプチャした。↓

ビデオだとわかりづらいな。(^_^;)

inを「表示のはじまり」outを「表示のおわり」という風に解釈した上で、説明を続ける。

ContentIndex（パラメータは「in」）

表示のはじまりは「フェードイン」する。他のボタンをクリックし、表示のおわり（別の画面に遷移する前）は何の効果もなく切り替わる。

ContentA（パラメータは「inOut」）

表示のはじまりは「フェードイン」する。他のボタンをクリックし、表示のおわりは「フェードアウト」してから切り替わる。

ContentB（パラメータは「out」）

表示のはじまりは何の効果もない。他のボタンをクリックし、表示のおわりは「フェードアウト」してから切り替わる。

※「表示のはじまり」「表示のおわり」という表現がしっくりこないので言い方については要再検討。

「in」「inOut」「out」3つの違いを確認した上で、もう一回ビデオを見てみよう。

※実際に自分でつくってクリックしてみると、「in」「inOut」「out」の違いが良くわかると思う。

次のような階層のページについて、画面遷移をつくる。

• index（トップページ）
• ├ content_A（下層ページA）
• └ content_B（下層ページB）

画面レイアウトを考える

左のボタンを押すと、右にコンテンツが出る。というようなレイアウトとする。

コンテンツをつくる

各ページのコンテンツ部分をライブラリに登録する。まず1つを新規シンボルとして作成。残り2つはそれを複製して修正すると楽。

名前は「ContentIndex_mc」「ContentA_mc」「ContentB_mc」とし「リンケージの一括設定（クイック）」でリンケージを設定する。

ボタンをつくり、リンクを設定する

まず「index」へのボタンをつくる。

コンテンツの作成と同様にして、ボタンをつくる。シンボル名は「NavIndex_mc」とする。

コンポーネントから「Progression Buttons」の中の「RollOverButton」をドラッグし、シンボル内の任意の場所に配置する。

ROボタンを選択し、パラメータの「navigatePath」を「/index」に設定する。

「NavIndex_mc」を複製し、同様に「NavA_mc」「NavB_mc」を作成する。

「navigatePath」はそれぞれ「/index/content_a」「/index/content_b」としておく。

最後に「リンケージの一括設定（クイック）」でリンケージを設定する。

easycasting.xmlを編集

※バージョン3で「シーンエディタ」が実装されると、以下の編集方法は変更になる。

<?xml version="1.0" encoding="utf-8" ?>
  <prml version="2.0.0" type="text/easycasting">
  <scene name="index">
    <cast cls="NavIndex" x="0" y="0" />
    <cast cls="NavA" x="0" y="40" />
    <cast cls="NavB" x="0" y="80" />
    <cast cls="ContentIndex" x="125" y="0" />

    <scene name="content_a">
      <cast cls="NavIndex" x="0" y="0" />
      <cast cls="NavA" x="0" y="40" />
      <cast cls="NavB" x="0" y="80" />
      <cast cls="ContentA" x="125" y="0" />
    </scene>    
    <scene name="content_b">
      <cast cls="NavIndex" x="0" y="0" />
      <cast cls="NavA" x="0" y="40" />
      <cast cls="NavB" x="0" y="80" />
      <cast cls="ContentB" x="125" y="0" />
    </scene>

  </scene>
</prml>

「content_a」「content_b」と名前の付けられたscene要素を挿入する。name属性値が「index」のscene要素に対して子要素となるようにする。cast要素でコンテンツをclass名で指定しておく。

※ナビゲーション部分は「Nav」というシンボルを作ってその中に「NavA_index」「NavA_mc」「NavB_mc」を配置した方がスマートに管理できるが、今回はこの方法で行く。

パブリッシュして確認

左のボタンを押すと、右のコンテンツが切り替わる。

次回は、コンテンツの切り替え時に、フェードなどのエフェクトをかける。