速習デザイン Flash CS4

(9月3日全ページ完了。パスなし)

Ready
  • ペーストボード ステージの外側の灰色の部分。非表示にできる。
  • グリッド、ルーラ、ガイド
  • 取り消しは100回まで。環境設定で変更できる。ヒストリパネルで確認しながら行き来できる。
Part1
Lesson-1 
Lesson-2 線と塗り
  • 描画2種
    1. 結合描画モード
      • 描いた図形の一部を選択し、切り離すことができる
      • デフォルトでは結合描画モード
    2. オブジェクト描画モード
      • ツールパネル下部のオブジェクトの描画をクリックしオンにする
  • 結合描画モードでの切り抜きと結合
    1. 切り抜き 異なる色の図形を重ねると下の図形が上の図形の形で切り抜かれる
    2. 結合 同じ色の図形を重ねると、図形が結合して1つになる
Lesson-3
  • いくつか複製してステージに置く場合は、以下の方法で行うとサイズが大きくならない。
    1. シンボルに変換し、ライブラリに表示
    2. ライブラリのシンボルをステージに配置 (ライブラリのシンボルの「分身」)
    3. それぞれ、インスタンス名をつける
    4. それぞれ、自由に編集(大きさ、カラー効果、フィルタなど)
  • シンボルの種類
    • ムービークリップ:アニメーションで使用する場合
    • グラフィック:静止画として使用する場合
    • ボタン:アップ、オーバー、ダウン、ヒットのタイムラインがある。マウスを乗せるとマウスが手の形になる
Lesson-6
  • 隙間のある線画に着色する:塗りつぶしツール選択時に、[ツールパネル]-[隙間の大きさ]-[大きい隙間を閉じる]をクリックし、塗りつぶす
  • ブラシ
Part2
Lesson-1
  • アニメーションの種類(5種)
    1. キーフレームアニメーション
      • 一枚ずつ連続表示する手法
    2. モーショントゥイーン
      • 中間の絵を自動的に生成
      • 移動、拡大縮小、変形、回転、色の変化、透明度の変化、その他フィルタなどの特殊効果をアニメーション化できる
      • キーフレーム、中間のフレーム(トゥイーンスパン)
      • ステージ上にモーションパスが表示される
    3. クラシックトゥイーン
      • CS3までのモーショントゥイーン
      • キーフレームごとにオブジェクトの新しいインスタンスを持たなければならない
    4. シェイプトゥイーン
      • モーフィングと同等の効果を得られる機能
      • シェイプにのみ適用できる
      • シンボルやテキストなども、分解することでシェイプに変換できる
    5. インバースキネマティックポーズ
      • ボーンツールを使い、関節を自由に動かすことができる
  • 3Dトゥイーン:3D回転ツールを使う (swf)
Lesson-2
  • モーションパスを編集 (swf
  • Lesson-3
Lesson-4
  • 変形、回転させるアニメーション (swf)
Lesson-5 モーションプリセット
  • スウォッシュ (swf)、フライインぼかし-下 (swf)
Lesson-6
  • モーションプリセットを組み合わせる (フライイン-下、パルス、フライインぼかし-下) (swf)
  • フレームの調整
    • キーフレームの位置を調整:Ctrl+クリックで選択し、ドラッグ
    • トウィーンスパンの複製:Altを押さえながらドラッグ
    • トウィーンスパンの境界の調整:境界線にマウスを合わせ、カーソルの形状が変わったらドラッグ
    • 同時に[フレームの挿入]:縦に複数のレイヤーをドラッグ→右クリック→フレームの挿入
Lesson-7
  • フィルタの使用例 (ぼかし) (swf)
Part-3
Lesson-2、3 Photoshopのpsdファイル、Illustratorのaiファイルを読み込む
  • (読み込む際に)シンボルに変換 (ムービークリップを作成し、インスタンス名をつける)
  • (読み込む際に)編集可能なテキストとして読み込む
  • (読み込む際に)アルファの設定を残して、編集可能なビットマップとして読み込む
  • (読み込む際に)ロスレス。(ロスレス=非可逆圧縮=jpeg、mp3など=戻せない。可逆圧縮=zip、gifなど)
Lesson-4 ビデオを読み込む
  • (特になし)
Lesson-5 サウンドを読み込む
  • エンベロープの編集ダイアログボックス:サウンドを選択→プロパティインスペクタ→鉛筆マークをクリック
    • エンベロープの編集:右チャンネルから左チャンネルへ、どのフレームでフェード、など
  • 音質を下げ、ファイルサイズを縮小・・・
    1. ライブラリのサウンドをダブルクリック
    2. サウンドプロパティダイアログボックスが表示される
    3. [読み込んだMP3の音質を使用]のチェックをはずす
    4. ビットレート16kbps、速度優先になっていることを確認
    5. テストをクリックし、音質を確認
    6. OKをクリック
    7. swfファイルのサイズを確認
    8. 音質を戻したい場合は、3.でチェックを入れる
Part-4 高度なムービー
Lesson-1 モーションエディタ
  • 基本モーションX、Yにキーフレームを作成し、上下、左右にドラッグ。
  • フレームインジケータをドラッグ、もしくはEnterキーで、動きを確認。
カスタムイージングLesson-2 モーションエディタ
  • イージングでスプリングを追加し、基本モーションXのイージングにスプリングを設定 (swf)
  • イージングでカスタムを追加、編集し、基本モーションXのイージングにカスタムを設定 (右図)(swf)
Lesson-3 ボーンツール
  • こつが必要。(p.202のただの棒で作るよりも)p.204の複数のオブジェクトをつなげる方がやりやすいかも(CS5は?かも) (swf)
    • マウスポインタの骨の色をよく見て、わずかなタイミングを狙うこと。白でスタートし、白で止める。
    • 「次の骨」は、「前の骨」の関節からスタート。ずれると繋がらない。
Lesson-4 ボーンツール
  • ボーンツールを使ったアニメーションボーンの動きを制限する。たとえば関節が360度回転しないように:
    1. ボーンをクリック
    2. (ボーンの始点ジョイントの円弧の範囲を確認しながら)(実際に動かしてみて)
    3. (CS4の場合)プロパティインスペクタパネル→結合→縦横比を固定→最小値と最大値を設定
    4. (CS5の場合)プロパティインスペクタパネル→ジョイント→回転→縦横比を固定→最小値と最大値を設定
  • アニメーションの作成
    (右図)(swf)

    1. フレームを挿入
    2. ゆっくり腕と手をドラッグ
    3. (女性の顔の動き-目、口、あご-を追加してみました)
Lesson-5 3Dアニメーション
  • 3D回転ツール
    • Y、X、Z、オレンジ色の円を上下左右にドラッグしてどのような動きをするか確認 (マウスポインタにY、X、Z、と小さいヒントが表示される)
    • 中心点を左上に移動し、Y、X、Z、オレンジ色の円で、どのような動きをするか確認
  • モーションエディター
    1. モーショントゥイーンを作成
    2. 再生ヘッドを設定したいフレームに移動
    3. 3D回転ツールオブジェクトをクリック
    4. [Y]を下に少しドラッグ
    5. モーションエディターパネルで・・・
    6. 基本モーション 回転Yの数値に360と入力
      • 回転Yで、数値を360度にすると時計回り・横方向に回転。-360度にすると反時計回り・横方向に回転
      • 回転Xで、数値を360度、-360度にすると縦方向に回転
      • 回転zで、数値を360度、-360度にすると2Dで回転
  • プロパティインスペクタ
    1. モーショントゥイーンを作成
    2. 再生ヘッドを設定したいフレームに移動
    3. 3D変換ツール-CS4(3D移動ツール-CS5)でオブジェクトをクリック
    4. プロパティインスペクタで数値を編集
Lesson-6 アクションスクリプト 3.0
  • 記述する場所
    • Flashムービーのタイムライン
      • メインのタイムライン
      • ムービークリップ内のタイムライン
    • 外部のテキストファイル(クラスファイル).as
  • 記述ルール
    • 半角英数字
    • 大文字と小文字は区別される
    • 末尾に;(セミコロン)を記述
    • 改行時はEnterキー
    • 間隔をあけるときはSpaceキー
    • コメントを書くときは//をつける
    • 複数行のコメントを書くときは/* と*/の間に記述
  • Part4-Lesson6 ActionScriptについて知っておこう実践
    • インスタンス名(ボタン2個)とラベル(フレーム2か所)を付ける
    • 1フレーム目にActionScriptを記述 (スクリプト)(swf、右リンク先と同じ)
      • 止まれ stop();
      • 左側のボタンをクリックしたら、2フレーム目に移動して止まる
      • 右側のボタンをクリックしたら、3フレーム目に移動して止まる 
    • 走るロボットのムービークリップの最終フレームにActionScriptを記述
      • 1フレーム目に戻って再生 MovieClip(parent).gotoAndPlay(1);
Part-5 パブリッシュ
Lesson-1 ムービーの書き出し
  1. QuickTime(か、かたまる・・・動作を停止しました・・・)(上書き保存しておきましょう;;)
    1. ファイルメニュー
    2. 書き出し
    3. ムービーの書き出し
    4. ファイルの種類でQuickTimeを選択
  2. Air
    1. パブリッシュ設定
    2. flashタブをクリック
    3. PlayerでAdobe Airを選択
    4. 設定をクリック
    5. パブリッシュをクリック
Lesson-2 再生環境を考える
  • プロファイラー
    1. 制御メニュー→ムービープレビュー
    2. 表示→プロファイラー、表示→ストリーミンググラフ、表示→ダウンロード設定→28.8(2.3kb/s) (2.3kb/sの通信環境でムービーを再生する場合はどうか・・・)
    3. 制御→巻き戻し (1フレーム目に戻る)
    4. ストリーミンググラフ→プリロード→65.1sとなっている (2.3kb/sの通信環境で再生する場合、1フレーム目が表示されるまでに65秒かかる・・・という意味)
    5. 表示→ダウンロードのシミュレート (実際にどのくらい待たされるかを体感できる)
    6. 表示→ダウンロード設定→DSL(32.6kb/s)、表示→フレーム毎データ量→赤い線を越えているフレームが2個 
      (そのフレームで一瞬、アニメーションが停止する可能性がある・・・ということがわかる)
  • スムーズに再生するために:ファイルサイズを小さくし、また、CPUに負荷のかかる要素を減らす (参考:SWF 出力のための FLA ファイルの最適化

    • ファイルサイズを縮小
      • ムービークリップか、グラフィックシンボルか (シンプルなムービーならグラフィックシンボルで。シンボルを使いまわす場合は、ムービークリップで)
      • シェイプ:[曲線の最適化]を行う
      • ビットマップ画像とサウンド:圧縮率を上げる
      • ステージの外にはみ出た部分:消去
    • 背景:アニメーションとは異なるレイヤーに配置・・・背景の再読込をなくすため
    • CPUの負荷を減らす
      • グラデーションの多用
      • アルファの多用
      • フィルタの多用
      • 線(特に破線など)の多用・・・塗りに変換することで改善する場合がある
      • 文章の多用
      • 巨大なビットマップ画像を動かす
      • ムービークリップの階層が深い
疑問
  • p74 変形点を中心に拡大されました・・・?