Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

Flash:動きと変化をつくる

動きの受け取り方

  • TV・映画のような動画から得られる情報(受動的)
  • インターネット(Web)から得られる情報(能動的)
  • 閲覧者にとって意味のない動きは、敬遠される
アニメーション
  1. アニメーションの最初と最後のフレームにキーフレームを挿入
  2. それぞれのキーフレームのオブジェクトの状態を設定
  3. アニメーションの設定


移動

  • A地点からB地点への移動


回転

  • A地点からB地点へ回転しながら移動
  • その場で回転


拡大縮小

  • A地点からB地点へ拡大縮小しながら移動
  • その場で拡大縮小


明度

  • インスタンスの明るさを設定
  • 正の値なら全体が明るい(白っぽい)状態、負の値なら全体が暗い(黒っぽい)状態になります
  • 数字が大きいほど、その状態がはっきりします


着色

  • インスタンス全体を塗りつぶす色の設定ができます(インスタンスの一部分の色だけを変えるということはできません)
  • どんな色をどのくらいの割合で、今のインスタンスの色に混ぜていくかという設定ができます
  • 100%で、指定した色へ完全に変化した状態になります


アルファ

  • Flashのアニメーションでは非常に良く見られる設定
  • インスタンスの透明度を変更する設定
  • 数字が小さくなるほど透明度が高く、0%で完全に透明となり、消えた状態になります


詳細(高度な設定)

  • 着色とアルファを一度に、個別に設定
  • 左側で、現状のインスタンスRGB各色と透明度それぞれに対してどのくらいの割合で右の設定を混ぜるのかを設定して、右側でそれぞれの色(透明度)の度合い(濃さ)を設定します

レイヤー
  • セル画のような透明のフィルムと考える
  • これを重ねて、一つのグラフィックを作っていきます
  • グラフィックの部分ごとにレイヤーを分けると、一部を非表示にしたり、ロックしたりすることで、編集がしやすくなります
  • 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」の文字を連続的に表示していることがわかります。


まず、面白いを実感しましょう。

実践:右に移動させる

記述の順序
  1. 「ball_mc」を選択する
  2. アクションパネルを表示
  3. ムービークリップ制御」→「onClipEvent」をダブルクリック



  1. 「enterFrame」をダブルクリックで選択する


  1. 「{」の後で改行して、命令文を記述する
  2. 「ターゲットパスを挿入」をクリックする


  1. 「相対」を選択する


  1. 「ドットシンタックス」を利用して「_x」を選択する


  1. 「1」ずつ移動する命令になるよう記述します


  1. 「ムービープレビュー」で確認します


まず、基本はここまでです。
ここから「変数を使った書き換えの練習」をします。