前記事のFlex User Group Japan Tour 2010 のセミナー中にFlash Catalyst CS5を試してみました。
Catalystを知らない方は、以下の動画を見てみるとだいたいイメージが掴めると思います。
SWFをASを一行も書かずに作れたのでちょっと感動してしまいました!
(しかも細かい調整はFlexの方でできるというじゃないですか)
実際に触ってみて感じた事や要望などをだらだら書いてみます。
ナストマくんの4コマの配信ブログパーツのモックアップを作る
- 元画像は縦長い1枚画像
(実際の画像はこちら) - 1コマ分だけ表示して、画像クリックで画像が下にスクロールして次のコマを表示
- 最後の4コマ目の時のクリックは一番上に戻る
- 上部分をクリックで前のコマに戻る
Catalystの実際の編集画面イメージ
ざっくり言うと、
上部がFlashのシーンというかキーフレームみたいなもの。
左真ん中がステージ。
左下が簡単なシーン切り替え時のタイムライン(これがちょっとわかりづらいかも)
レイヤーは読み込んだグラフィックファイル(.ai, .psd等)のレイヤーそのまま。
専門用語・画面メモ
- ページ・ステート:画面(Flashのキーフレーム的なもの)
- トランジション :画面切替時の設定
- インタラクション:イベントに対する処理(ex:クリックでページ移動させる等)
このインタラクションの設定だけで、簡単に画面遷移やアクションを設定できるようになってます。
インタラクション
- 選択したボタンのコンポーネント(オブジェクト)に対してイベントを設定。
- クリック
- マウスダウン
- マウスアップ
- ロールアウト(マウスアウト)
- ロールオーバー(マウスオーバー)
- 要望)
ここに”キーボードイベント”を追加して欲しい!- そしたらすぐスライドが作れそうなので…
- アクションの有効範囲も選択可能
- 全ステート(全ページ)
- 特定のステート限定
- 要望)
“ALL or One” ではなくて複数選択できると素敵!
イベントの後は”何を実行するか”を指定する。
- ステートのトランジションを実行
- アクションシーケンスを実行
- URLに移動
- ビデオを再生
- ビデオを一時停止
- ビデオを停止
ビデオ関係の簡単な制御があるのが嬉しいですね。
プロパティ
トランジション(画面展開、遷移)の指定
イージングが簡単に設定できます。
細かい調整もできます。
だいたい上部の設定で、
クリックするとどのページへ移動するようにして、
その時にどんな動きで移動するかを指定することで
モックアップの大半が制御できそうです。簡単!
Catalystで作成した[.fxp]をFlexで開く
MXMLなどが書かれてました。
インタラクションの設定も記述されてて、
「あー、ここがあの設定だろうなー」
となんとなく目で追えました。
Catalystの改善要望
こんな風になればもっといいのになーと声を挙げてみます。
主にページ遷移の指定方法です。
- ステートの並び替えをできるように!
- やっぱり、デザイナーにとっては直感的ではないですよね
- 最初に表示するデフォルトのステートを指定することは可能
- どのステートがデフォルトになっているかがわかりづらい
- 一応右上に印が付くけど、もうちょっとわかりやすくしてもいい
- ボタンのアクションの適用範囲を”より細かく”指定したい!
- “全てのステート”か”個別のステート”しか選べない
- チェックボックスみたいに指定できたら便利
- “4コマ目の時は無効”とか、「この時以外」って指定はよく使いそう。
- レイヤーのボタンのon/offでも代用はできるかもしれないけど。
- その他
- アクション指定に”Next”,”Back”を!
- 前後のステートに移動するだけってのは普通によくありそう
- この前後の制御をするために、ステートの並べ替えは必須になるけど、
この方が絶対デザイナーさんには直感的に扱えると思う。
- アクション指定に”Next”,”Back”を!
「細かいところはFlexでやれよ、カス」
「Catalystでそこまでできなくていいだろ、ボケ」
と言われたらそれまでなんですが、
モックでもデザイナーの意図がなるべく反映させられるなら、それが良いアプリ開発に繋がると思うのですよ。
というわけで以上、Catalystを試してみた雑感でした。
コメント