Flash MX

目次

はじめに

Macromedia Flash MX のインストール
　Macromedia Flash MXトライアル版（30日間無償）
　http://www.macromedia.com/jp/software/trial_download/


パネルセット
　ウィンドウーーパネルセットーーデザイナー[1024×768]

パネルを開く
　ウィンドウーーライブラリ

動かす　モーショントゥイーン

モーショントゥイーンの設定
　　アニメーションを開始する位置と、アニメーションを終了する位置を
　　設定すると、中間の動きが自動的に補われる。
　　
　　フレームの挿入
　　初めのフレームで、モーショントゥイーンを作成
　　最後のフレームにキーフレームを挿入
　　制御ーーループ再生にチェックーーループ再生

シンボルの編集
　　モーショントゥイーンを設定すると、イラストがシンボルに変換されて、
　　ムービー上ではインスタンスが表示される。
　　インスタンスは、変更できないので、シンボルを変更する。
　　シンボルを変更すると、インスタンスに反映される。
　　
　　シンボルの変更は
　　ウィンドーーライブラリーーライブラリのシンボルをダブルクリック

htmlファイルの作成
　　ファイルーーパブリッシュ
　　パブリッシュの設定
　　　　読込みプロテクト：Flash MXで再編集できないようにする
　　　　JPEG画像：画像の圧縮率でファイルサイズを小さくする。
　　　　

アニメーション

複数のイラストを連続するキーフレームに配置すると、バラバラ漫画のような
アニメーションを作成する。このアニメーションをアニメーションシンボルと
して、モーショントゥイーンを組み合わせることで、鳥が羽ばたきながら移動
するアニメーションが出来る。


フレームアニメーション
　・複数のイラストを連続するキーフレームに配置すると、
　　バラバラ漫画のようなアニメーションを作成する。
　・位置合わせの為、2フレームからは、空白キーフレームの挿入と
　　オニオンスキャンアウトラインを使用
　・特定のイラストの表示時間を長くするーーフレームを挿入
　・再生速度の変更ーー修正ーードキュメントーーフレームレート

アニメーションのシンボル化
　・ステージ上で作成したアニメーションは、シンボルにしてライブラリで
　　管理することが出来る。
　　アニメーションをシンボルにしておくと、インスタンスとして利用できる。
　・シンボルにするフレームをドラッグして選択し、右クリック、
　　フレームのコピー
　・挿入、新規シンボル、タイプ：グラフィック
　　　タイプ
　　　　　ムービークリップ：１つのフレームだけで動くアニメーション
　　　　　ボタン：Webページで使用するボタンを作成時
　　　　　グラフィック：タイムラインと連動するアニメーション
　・新しく作成したシンボルに、コピーしたフレームをペースト
　　　１フレーム目を右クリック、フレームのペースト

モーショントゥイーン
　　シンボルにしたアニメーションをインスタンスとしてキーフレームに
　　配置し、このインスタンスをモーショントゥイーンで動かす。

　・ライブラリを開いて、最初のフレームのステージ上にドラッグ＆ドロップ
　・最後のフレームにキーフレームの挿入、インスタンスを移動
　・最初のフレームを右クリックして、モーショントゥイーンを作成。


シェイプトゥイーン

　・インスタンスが変形して、徐々に別のイラストに変化
　・最初のフレームに変形前のイラスト
　・最後のフレームを右クリックして、キーフレームを追加し変更後のイラスト
　・変形前のキーフレームを選択、プロパティのトゥイーン：シェイプ
　　　　イージング：イラストの動きを加速、減速
　　　　ブレンド：ディストリビューティブ：丸い感じで変形
　　　　　　　　　アングラー：角ばった感じで変形
　・シェイプのヒント
　　　変形前のキーフレーム、修正、シェイプ、シェイプヒントの追加
　　　シェイプヒントを基準に変形する。


モーションガイド
　　モーショントゥイーンではイラストを直線的にしか動かすことが出来ないが
　　モーションガイドレイヤーを追加してパス（イラストの軌道）
　　を描くと、そのパスに沿ってイラストを動かすことが出来る。

レイヤーフォルダ
　　レイヤーフォルダーを作成して、レイヤーを整理。
　
　　目的のレイヤーを選択し、ドラッグ＆ドロップ

イラストが徐々に変化
　　最後のキーフレーム、イラストを選択、カラー
　　　　明度：徐々に明暗が変化
　　　　着色：徐々に単色になる
　　　　アルファ：徐々に透明になる

描画

鉛筆ツール
ブラシツール、内側をペイント
ペンツール
線の塗りへの変換、修正、シェイプ、線を塗りに変換
グラテーション、カラーミキサー、線状、バケツツール
塗り色の透明化、アルファ：0%
写真の読み込み、ファイル、読み込み
写真の分解、修正、分解、投げなわツール、自動選択ツール、
　　　　　　オプション、プロパティ、範囲：20、スムージング：標準
写真のトレース、画像を選択し、修正、ビットマップのトレース
　　色数：近似色の範囲  40　最も画像に近い:1
　　ノイズ許容量：範囲に含める周囲のピクセル数  300　最も画像に近い:1
　　ポイントの数：アンカーポイントの数　少ない　最も画像に近い:多い
テキスト
　　テキストを選択し、修正、分解で１文字づつ分解される。
　　さらに、修正、分解でテキストが面に変換される。
　　
　　テキストにソフトエッジを入れる
　　　　面に変換したテキストを選択し、編集、コピー
　　　　テキストの色を白に、修正、シェイプ、ソフトエッジ
　　　　　　幅：リンカクのピクセルをどのくらいぼかすか  10px
　　　　　　ステップ数：何段階のアウトラインを作成してぼかすか  3
　　　　　　方向：外側、内側　ぼかす方向　外側
　　　　コピーしておいたテキストをぼかしたテキストの上にペースト
　　　　　　編集、同じ位置にペースト

効率よく編集

オニオンスキン
イラストのグループ化、修正、グループ
シーン、挿入、シーン
イラストのシンボルへの変換、挿入、シンボルに変換
インスタンスをイラストに変換、修正、分解
シンボルの入れ替え、シンボルを選択し、プロパティ、入れ替え
ライブラリの整理、ウィンド、ライブラリ、使用数を更新する
　　　　　　　　　新規ホルダ
ルーラー・ガイドの利用、表示、ルーラ
　・ルーラの設定を編集：修正、ドキュメント、ルーラ単位
　・ガイドの設定を編集：表示、ガイド、ガイドの編集
グリッド
　・表示、グリッド、グリッドの表示
イラストの整列と配置
　・ウィンド、整列
ムービープレビュー
　・作成したムービーを実際に再生用のファイルとして保存した物と
　　同じ条件で確認
　・制御、ムービープレビュー
　・プロファイラ：表示、プロファイラ
ムービーの減量
　・まったく同じイラストは、ンボルを使う
　・線を最適化する、修正、最適化
　・ステージの外にはみ出したイラストを消去する

ボタン

ボタンシンボルのフレーム
　・アップ：マウスを合わせていない状態
　・オーバー：マウスポインタを合わせた状態
　・ダウン：マウスボタンを押した状態
　・ヒット：マウスボタンに反応する領域
ボタンシンボルの作成
　・挿入、新規シンボル、タイプ：ボタン、キーフレームを挿入
　・ライブラリから貼り付け
　・シンプルボタンで確認、制御、シンプルボタン
ボタンにアクションボタンを設定
　・目的のシンボルを選択、ウィンド、アクション、＋、
　　アクション、ブラウザ、getURL、URL記入
　・パブリッシュプレビューで確認：ファイル、パブリッシュプレビュー、HTML
　・アクションの削除：目的のアクション選択、−
クリック音の設定
　・サウンドファイルを読込む：ファイル、読み込み
　・ボタンシンボルにサウンドを設定：
　　　　ライブラリのボタンをダブルクリック、ダウンのフレームを選択、
　　　　プロパティ、サウンド、
　・確認：制御、ムービープレビュー
ボタンが動く
　・ボタンにムービークリップシンボルを組み込めば、マウスポインタの
　　動きに合わせて動き出すボタンを作成。
　・ボタン編集画面で動かせたいフレームを選択、挿入、シンボルに変換、
　　タイプ：ムービークリップ
　・ムービークリップシンボルをダブルクリックし、アニメーション作成
　・確認：シーンを選択、制御、ムービープレビュー

応用（マスクレイヤー、読込中画面、残像、サウンド、フォトアルバム）

マスクレイヤー
　・一番下のレイヤーの明度：-70として、暗くする。
　・その上のレイヤーに明度：0
　・その上のレイヤーにスポットライトとなる円を描く、
　　最後のフレームを右クリック、フレームの挿入、
　　モーショントゥーんを作成、キーフレームを追加
　・他のレイヤーの最後のフレームに、フレームの挿入
　・一番上のレイヤーを右クリックして、マスク
　・確認：制御、ムービープレビュー

読み込み中の画面の作成
　・読み込み中画面を作成し、ムービークリップシンボルとして、
　　ライブラリに登録（挿入、新規シンボル）
　・アニメーションが設定されているすべてのフレームを選択し、
　　ドラッグして、２フレーム分、後ろに移動
　・レイヤーを追加し、１フレーム目に、読み込み中画面をＣ＆Ｄ、
　　最後のフレームを選択し、Ｃｔｒｌを押しながら２フレーム目までドラッグ
　・もう一つレイヤーを追加、２フレーム目に空白キーフレーム、
　　１フレーム目に
　　　アクションパネル、＋、アクション、条件、if
　　　　　　　　　　　　＋、プロパティ、_framesloaded>=62
　　　　　　　　　　　　＋、アクション、ムービーコントロール、goto、
　　　　　　　　　　　　　　Go to and Play、タイプ：フレーム番号
　　　　　　　　　　　　　　フレーム：３
　　２フレーム目に、アクションパネル、＋、アクション、
　　　　　　　　　　　　ムービーコントロール、goto、
　　　　　　　　　　　　　　Go to and Play、タイプ：フレーム番号
　　　　　　　　　　　　　　フレーム：１

アニメーション　その１

素材の作成
　新規ドキュメントの作成
　　ファイルーー新規
　ツールボックスを利用して図形を描く
　　ツールボックスーー矩形ツールーー塗りのカラーを赤にーー四角を描画
　アニメーション
　　ツールボックスーー矢印ツール
　　タイムラインの20を右クリックーーフレームの挿入
　　タイムラインの20を右クリックーーモーショントゥイーンを作成
　　タイムラインの20を右クリックーーキーフレームの挿入
　　ツールボックスーー矢印ツール
　　四角をドラッグし、ステージ右下へドロップ
アニメーションのテスト
　　制御ーー再生
　アニメーションの修正
　　１フレームをクリック
　　プロパティーー回転ーー時計回り
　　制御ーームービープレビューーーファイルーー閉じる
　ドキュメントの保存
　　ファイルーー名前を付けて保存
ファイルに書き出す
　パブリッシュ設定
　　ファイルーーパブリッシュ設定
　パブリッシュプレビュー
　　ファイルーーパブリッシュプレビューーーデフォルト
　　→　ブラウザが起動し、ムービーが再生される。
　パブリッシュ
　　ファイルーーパブリッシュ　
　　→　パブリッシュ設定で指定した再生用ファイルが書き出される。
　　ファイルーー保存
　　→　ドキュメントファイルが上書き保存。

ムービー再生

●ステージ
　ステージのサイズ変更
　　修正ーードキュメント
　ステージの背景色の変更
　　背景 #CCFFCC
　グリッドの表示
　　表示ーーグリッドーーグリッドの表示
　ガイドを引く
　　表示ーールーラーールーラの表示
　　ルーラ上でクリックーーステージの任意の位置にドラッグアンドドロップ
　ステージの表示比率を変更
　　表示ーー表示比率ーーステージ全体を表示
　ステージを拡大・縮小
　　ツールボックスの　虫めがねツール
　　ドラッグして、範囲指定するとそこの大きさが変わる
　表示位置の移動
　　ツールボックスの　ハンドツール


●タイムライン
　フレーム：一つ一つのコマ

　フレームレートの設定
　　修正ーードキュメントーーフレームレート
　キーフレーム：画像を設定するフレーム。タイムラインの上で●。

　フレームの挿入
　　フレームを挿入するます目(10フレーム)を右クリックーー
　　フレームの挿入
　フレームの削除
　　フレームを削除するます目(5フレーム)を右クリックーー
　　フレームの削除
　キーフレームの挿入
　　キーフレームを挿入するます目(5フレーム)を右クリックーー
　　キーフレームの挿入
　キーフレームの削除
　　キーフレームを削除するます目(5フレーム)を右クリックーー
　　キーフレームの削除
　空白キーフレームの挿入（白丸）
　　空白キーフレームを挿入するます目(5フレーム)を右クリックーー
　　空白キーフレームの挿入
　フレームの選択
　　フレームをクリック　→　選択されたフレームが反転表示
　複数フレーム：Ａｌｔ，Ｓｈｉｆｔ
　キーフレームとそれに続くフレームの選択
　　枠内のフレームをダブルクリック
　
　フレームの移動
　　Shift押しながら移動

●レイヤー  3_4
　レイヤー名の変更：レイヤー名をダブルクリック
　レイヤーの非表示：目をクリック

●シーン  3_5
　シーンパネル：ウィンドーーシーン
　シーンの追加：挿入ーーシーン

　

描画ツール

線ツール：Shiftで45度。
　　グリッドに吸着：表示ーーグリッド
　　オブジェクトに吸着：表示ーーオブジェクトに吸着
鉛筆ツール
ペンツール：ベジェ曲線
　　矢印ツールで囲む
　　マウスのクリックアンドドロップで、ほうらく線を決める。
矢印ツールで直線のコーナーを変える。直線から曲線にする。
　　ctrと同時に使うと、コーナーポイントが増える。
線が交差すると、交差した点がコーナーポイントとなり、別の線となる。
円や四角：カラー、太さ、スタイル
閉じた図形に色を塗る：パッケージツールで閉じた図形の内部をクリック
隙間のある図形に色を塗る
　　：パッケージツール、オプション：大きな隙間を閉じる
ブラシツール
　　標準
　　塗りをペイント：線は塗りつぶさない
　　背面をペイント：背面に
　　範囲をペイント
　　内側をペイント
線と塗りの分離
　　矢印ツールーー線をクリックして選択ーー線上でドラッグして移動
図形を重ねる
　　図形の上に円を描くーー矢印ツールーー円をダブルクリックし、
　　その状態でドラッグアンドドロップーー円が重なっている部分が消える　図形と線との交差
　　図形に線を描くーー線で図形が分断
　　線をダブルクリックし移動ーー分断は無くなる
消しゴムツール
　　標準
　　塗りを消す：線は消さない
　　線をを消す
　　選択された塗りを消す
　　内側を消す
色やグラデーションーーカラーミキサーパネル(Shift＋F9)
　　アルファ：透明度を％で
　　作成した色の保存：右上の三角をクリックーー色見本を追加
　　グラデーション　
　　　塗りのスタイル：線状、放射状ーー
　　　　　家のような物をクリックし、色設定
文字の入力ーーテキストツール
　　テキストを分解ーー矢印ツールで文字を選んで、修正ーー分解
　　

イラスト作成

図形を選択
　　矢印ツールーークリック、ダブルクリック（全部）
　　レイヤーのキーフレーム(タイムラインの黒丸)をクリック
　　矢印ツールで囲んだ場所
　　投げなわツールで囲んだ場所
図形を削除、コピー
　　図形を選択し、Delete
　　コピーーーペースト
線や塗りのプロパティをコピーーースポイトツール
図形を変形ーー自由変形ツール
　　歪曲　Ctrl＋
　　台形　Ctrl＋Shift＋
　　回転の中心を変えるーー白丸を移動
　　エンベロープーー四角は移動、丸は向きと長さ
図形を整列ーーウィンドーー整列
　　分布ーー位置を均等に
グループ化ーー修正ーーグループ
シンボルとインスタンス
　　シンボルは[ライブラリ]に
　　[ライブラリ]パネルからステージに配置されたシンボルが
　　「インスタンス」になる。
　　シンボルに変換ーー図形を選択しーー挿入ーーシンボルに変換
　　シンボルを見るーーウィンドーーライブラリ（Ｆ１１）
　　インスタンスを作成ーーライブラリパネルからクリックアンドドロップ
シンボルの構成要素　　　5_11
　　？？
シンボルの編集
　　インスタンスをダブルクリック
インスタンスの編集
　　インスタンスをクリック

イラストのアニメーション

フレームアニメーション
　　速度の調整：修正ーードキュメントーーフレームレート
　　タイムライン下のオニオンスキャン
イラストを移動
　　トゥイーンアニメーションは、２つのキーフレームを元に、
　　自動的に作成されるアニメーション
　　31フレームを右クリックし、キーフレームの挿入
　　Shiftを押したまま、インスタンスをドラッグアンドドロップ
　　1フレームを右クリックし、モーショントゥイーンを作成
　　動作確認：制御ーー再生
　　アニメーションの早さ：1フレームをクリック、イージング
　　　　イージング：プラスで減速、マイナスで加速
イラストを回転
　　20フレームを右クリックし、キーフレームの挿入
　　修正ーー変形ーー伸縮と回転、回転270度
　　1フレームを右クリックし、モーショントゥイーンを作成
イラストを軌道に沿って動かす
　　蝶レイヤを選択
　　挿入ーーモーションガイド
　　ガイド：蝶　レイヤ選択
　　鉛筆ツールーースムーズ
　　ドラッグしながら軌道を描く
　　バスに沿って動かすため[butterfly]インスタンスをモーションバスに吸着
　　　表示ーーオブジェクトに吸着
　　　矢印ツールーー[buttterfly]インスタンスをクリック
　　　[buttterfly]インスタンス中央の丸をクリックアンドドロップして吸着
　　　次に、蝶　レイヤ60をクリックし、吸着
イラストが拡大・縮小するアニメーション
　　キーフレームの挿入
　　修正ーー変形ーー伸縮と回転
　　右クリックして、モーショントゥイーンを作成
イラストの形がだんだん変化するーーシェイプトゥイーン
　　丸を描く：線のカラーなし
　　20フレームに空白キーフレームの挿入
　　テキストツール：静止テキスト、Impact、フォントサイズ96、赤
　　文字の挿入
　　矢印ツールーー文字の間隔
　　修正ーー分解
　　修正ーー分解
　　10フレームーートゥイーンーーシェイプ
イラストがだんだん透明になる
　　30フレームを右クリックして、キーフレームの挿入
　　インスタンスを選択し、アルファを0%に
　　1フレームを右クリックして、モーショントゥイーン
一部分から徐々に表示されるーーマスクレイヤー　mask1
　　マスク用レイアを作るーーごちそうレイアをクリックし、レイヤーの追加
　　レイヤー名をダブルクリックして、マスクに名前を変える
　　楕円ツール：線：塗りなし、塗り：黒
　　中央で円を描く
　　マスクレイヤのレイヤー名を右クリックし、マスク
　　マスクレイヤーのロックをはずす
　　円を選択し、挿入ーーシンボルに変換ーー名前:mask、グラフィック
　　マスクレイヤーの３０フレームを右クリックし、キーフレームの挿入
　　maskインスタンスを選択し、修正ーー変形ーー伸縮と回転、伸縮:2000
　　マスクレイヤーの１フレームを右クリックし、モーショントゥイーンを作成
　　マスクレイヤーの右の鍵括弧の列をクリック


　　

ムービーを公開

ムービーの動作テスト
　　制御ーームービープレビュー
　　　　デバッグーーダウンロード速度の選択
　　　　表示ーープロファィラ
　　　　表示ーーストリーミングを表示

アクション

ActionScript
　　・ムービーやムービークリップの再生／停止、フレームの移動
　　・エンドユーザーのマウス操作やキーボード入力の取得
　　・ムービークリップの移動、回転、透明度、表示／非表示


アクション
　　ウィンドーーアクション
アクションの挿入
　　挿入したいフレーム又はインスタンスを選択
　　アクションツールボックスーーアクションーームービーコントロールーー　　−−goto
ボタン
　　マウスイベントを取得ーームービーコントロールーーon--Release
　　play(); 再生
　　stop(); 停止
　　フレームアクションを記述    action2.fla
　　　　レイヤーを追加(action)し、1フレームにstop();
　　　　31フレームにキーフレームを挿入しstop();
　　　　71フレームにキーフレームを挿入しstop();
　　ボタンを押すとアニメ再生
　　　　レイヤーを追加(label)し、
　　　　1フレームにのフレームラベルをwait
　　　　5,32,72フレームにキーフレームを挿入しフレームラベルをmovie1,2,3
　　各movie再生後、はじめに戻るように設定
　　　　actionレイヤーの31,71,175フレームgotoAndStop("wait");
　　ボタンに各movieに移動する服ションを記述
　　　　ボタン１，２，３に
　　　　　on (release) {
    　　　　　　gotoAndPlay("move1");　　　　　　move2,3
　　　　　}
　　制御ーームービープレビュー
　　ファイルーーパブリッシュプレビューーーデフォルト


ムービーの先読み
　　指定した先読みフレーム数がダウンロードされていない間は、
　　再生ヘッドを指定フレームに戻し、繰り返し再生する。
　　ダウンロード中は、そこから先のフレームを再生しない。

　　フレームを繰り返すアクションを記述
　　actionレイヤーの2フレーム
　　アクションーー条件ーーifーー条件
　　プロパティーー_framesloaded　　<21
　　アクションーームービーコントロールーーgotoーーフレームラベル
　　　　if (_framesloaded<21) {
   　　　　 gotoAndPlay("loading");
　　　　}

サウンド、写真、ビデオ

サウンドファイルをライブラリに読込む　
　　ファイルーーライブラリに読み込み
サウンドを書き出す　　
　　ウィンドーーライブラリーーサウンドを選択し右クリックーープロパティ
パブリッシュ設定　
　　ファイルーーパブリッシュ設定ーーFlashタブーー
　　オーディオイベントーー設定
ボタンと関係付ける
　　ボタンをダブルクリックーー(ランプレイヤ)ーーレイヤーの追加ーー　
　　ダウンフレームを右クリックーーキーフレームの挿入ーー
　　プロパティインスペクタのサウンドをクリックし、サウンドを選ぶーー
　　同期：イベント
シーンプレビューで確認
　　制御ーーシーンプレビュー
BGMを付ける
　　サウンド用レイヤーを追加
　　(ボタンレイヤー)−−レイヤーの追加ーー1フレームーー
　　プロパティインスペクタのサウンド：サウンドを選択
　　同期：スタート
　　ループ：9999
　　シーンプレビューで確認　　制御ーーシーンプレビュー
　　

画像ファイル、デジタルビデオ　を取り込む
　　ファイルをライブラリに読込む　　　ファイルーーライブラリに読み込み
　　レイヤーを開き、ウィンドーライブラリー画像をクリックアンドドロップ
　　確認　　ファイルーーパブリッシュプレビューーーデフォルト