Flash:動きと変化をつくる
動きの受け取り方
- TV・映画のような動画から得られる情報(受動的)
- インターネット(Web)から得られる情報(能動的)
- 閲覧者にとって意味のない動きは、敬遠される
アニメーション
- アニメーションの最初と最後のフレームにキーフレームを挿入
- それぞれのキーフレームのオブジェクトの状態を設定
- アニメーションの設定
移動
- A地点からB地点への移動
回転
- A地点からB地点へ回転しながら移動
- その場で回転
拡大縮小
- A地点からB地点へ拡大縮小しながら移動
- その場で拡大縮小
明度
- インスタンスの明るさを設定
- 正の値なら全体が明るい(白っぽい)状態、負の値なら全体が暗い(黒っぽい)状態になります
- 数字が大きいほど、その状態がはっきりします
着色
- インスタンス全体を塗りつぶす色の設定ができます(インスタンスの一部分の色だけを変えるということはできません)
- どんな色をどのくらいの割合で、今のインスタンスの色に混ぜていくかという設定ができます
- 100%で、指定した色へ完全に変化した状態になります
アルファ
詳細(高度な設定)
レイヤー
- セル画のような透明のフィルムと考える
- これを重ねて、一つのグラフィックを作っていきます
- グラフィックの部分ごとにレイヤーを分けると、一部を非表示にしたり、ロックしたりすることで、編集がしやすくなります
- Flashでは、一つのレイヤーに一つのオブジェクトのアニメーションしか設定できないので、レイヤーは非常に大きな意味を持ちます
イージング
- トゥイーンアニメーションでは、通常、キーフレームとキーフレームとの間の動きは、間にあるフレームの数に応じて均等に割り振られますが、これを変化させる機能がイージングです
- 自然界の動きには、必ず動き始めの加速や、止まる前の減速があります
- 質の高いアニメーションを作るためには、加速や減速、つまりイージングの設定に気を配る必要があります
- 「イン:-100」と「アウト:100」で設定するのが一般的です
フレームレート
- 1秒間にフレームが何コマ進むかということを表したもの
- 初期設定では、24fps(frame per second)
- フレーム数が多く、フレームレートが高ければ滑らかに見えます(30fpsが上限)
小さな意味を伝えようとする「スクリプト」
- メソッドの意味や使い方を覚えてもゲームのようなコンテンツを作成できるようにはなりません
- 「どの機能を組み合わせるか」つまり「設計する力」が重要
- 「考え方」を記述する習慣を身につけましょう
この授業では、あえてパッケージ化されている「ActionScript2.0」から入ります。
このスクリプトの考え方が理解できれば、JavaScriptも何を書けばよいかが理解できるはずです。
いままでの、Flashの基礎練習とは違い、タイムラインに依存しません。
すべて「ムービークリップ」での練習になります。
まず、「ムービークリップ」を作成しましょう。
(1)新規ドキュメント作成
(2)オブジェクトを描いて「ムービークリップシンボル」に変換する
(3)ステージ上の「インスタンス」に名前を付ける
- 名前には接尾辞「_mc」を付記する
ここまでが、ActionScriptを記述するための準備です。
「いつ」「何をするか」
- 必ず、これを考えます
「いつ」を設定するベントハンドラ
- 連続的には、「enterFrame」を利用します。
onClipEvent (enterFrame) { trace("enterFrame"); }
- 「trace文」を使うことにより、再生ヘッドが読まれるたびに「enterFrame」の文字を連続的に表示していることがわかります。
まず、面白いを実感しましょう。
実践:右に移動させる
- ムービークリップ「ball_mc」を、ステージの左に配置
- ActionScriptを記述し、ムービーが読みこまれた時点から右に移動させる