Flash Catalystでナストマくんの4コマをスライドするSWFのモックアップを作ってみたよ

前記事のFlex User Group Japan Tour 2010 のセミナー中にFlash Catalyst CS5を試してみました。

Catalystを知らない方は、以下の動画を見てみるとだいたいイメージが掴めると思います。

SWFをASを一行も書かずに作れたのでちょっと感動してしまいました!
(しかも細かい調整はFlexの方でできるというじゃないですか)


クリックでSWFを表示します

実際に触ってみて感じた事や要望などをだらだら書いてみます。

ナストマくんの4コマの配信ブログパーツのモックアップを作る

  • 元画像は縦長い1枚画像
    ナストマくん(実際の画像はこちら)
  • 1コマ分だけ表示して、画像クリックで画像が下にスクロールして次のコマを表示
  • 最後の4コマ目の時のクリックは一番上に戻る
  • 上部分をクリックで前のコマに戻る

Catalystの実際の編集画面イメージ

ざっくり言うと、
上部がFlashのシーンというかキーフレームみたいなもの。
左真ん中がステージ。
左下が簡単なシーン切り替え時のタイムライン(これがちょっとわかりづらいかも)
レイヤーは読み込んだグラフィックファイル(.ai, .psd等)のレイヤーそのまま。

専門用語・画面メモ

  • ページ・ステート:画面(Flashのキーフレーム的なもの)
  • トランジション :画面切替時の設定
  • インタラクション:イベントに対する処理(ex:クリックでページ移動させる等)

このインタラクションの設定だけで、簡単に画面遷移やアクションを設定できるようになってます。

インタラクション

  • 選択したボタンのコンポーネント(オブジェクト)に対してイベントを設定。
    • クリック
    • マウスダウン
    • マウスアップ
    • ロールアウト(マウスアウト)
    • ロールオーバー(マウスオーバー)
    • 要望)
      ここに”キーボードイベント”を追加して欲しい!

      • そしたらすぐスライドが作れそうなので…
  • アクションの有効範囲も選択可能
    • 全ステート(全ページ)
    • 特定のステート限定
    • 要望)
      “ALL or One” ではなくて複数選択できると素敵!

イベントの後は”何を実行するか”を指定する。

  • ステートのトランジションを実行
  • アクションシーケンスを実行
  • URLに移動
  • ビデオを再生
  • ビデオを一時停止
  • ビデオを停止

ビデオ関係の簡単な制御があるのが嬉しいですね。

プロパティ

トランジション(画面展開、遷移)の指定

イージングが簡単に設定できます。
細かい調整もできます。

だいたい上部の設定で、
クリックするとどのページへ移動するようにして、
その時にどんな動きで移動するかを指定することで
モックアップの大半が制御できそうです。簡単!

Catalystで作成した[.fxp]をFlexで開く

MXMLなどが書かれてました。
インタラクションの設定も記述されてて、
「あー、ここがあの設定だろうなー」
となんとなく目で追えました。

Catalystの改善要望

こんな風になればもっといいのになーと声を挙げてみます。
主にページ遷移の指定方法です。

  • ステートの並び替えをできるように!
    • やっぱり、デザイナーにとっては直感的ではないですよね
    • 最初に表示するデフォルトのステートを指定することは可能
      • どのステートがデフォルトになっているかがわかりづらい
      • 一応右上に印が付くけど、もうちょっとわかりやすくしてもいい
  • ボタンのアクションの適用範囲を”より細かく”指定したい!
    • “全てのステート”か”個別のステート”しか選べない
    • チェックボックスみたいに指定できたら便利
    • “4コマ目の時は無効”とか、「この時以外」って指定はよく使いそう。
    • レイヤーのボタンのon/offでも代用はできるかもしれないけど。
  • その他
    • アクション指定に”Next”,”Back”を!
      • 前後のステートに移動するだけってのは普通によくありそう
      • この前後の制御をするために、ステートの並べ替えは必須になるけど、
        この方が絶対デザイナーさんには直感的に扱えると思う。

「細かいところはFlexでやれよ、カス」
「Catalystでそこまでできなくていいだろ、ボケ」
と言われたらそれまでなんですが、
モックでもデザイナーの意図がなるべく反映させられるなら、それが良いアプリ開発に繋がると思うのですよ。

というわけで以上、Catalystを試してみた雑感でした。

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*