もっとFlashしたい
 
基礎知識&用語解説
Flash作成ソフトについて
パブリッシュ
HTML関係+
アクションスクリプト初級
コマアニメ
Flashムービー作成テクニック
知っておくと便利なこと
 
基礎知識&用語解説
  • 基礎知識 (知っておいて欲しい基本的なこと)
  • 用語解説 (Flashとネットに関係することばについて)

 
Flash作成ソフトについて
 
パブリッシュ
 
HTML関係+
 
アクションスクリプト初級
 
コマアニメ
 
Flashムービー作成テクニック
 
知っておくと便利なこと
 
 
 
基礎知識
ベクタ画像、ラスタ画像
Flashやイラストレータのようなソフトで使われている、拡大しても画像のギザギザが見えないものが、ベクタ。
bmp、jpeg、gifに代表される、web上で普段見ている、拡大するとギザギザが目立つ画像がラスタ。
拡張子
ファイル名の語尾につく、3文字前後の英数字のこと。
拡張子は、開くソフトの関連付け(ダブルクリックで開くソフトの指定)をしているだけである。
bmpだったらペイントで開く、jpegだったらIEで開くという程度のもの。
wavの拡張子をmp3にしても、mp3形式にはならない。中身は一緒。
aviが再生できないというような問題は、aviをダブルクリックで開いたソフトが、そのaviファイルの中の内容の形式に対応していないからである。そのaviファイルに対応した(再生できる)コーデックを入れれば、見られるかもしれない。

画像形式
jpeg/jpg:
サイズのわりに画質が良い。写真をweb上で配信するときに利用。
拡大したり、圧縮率を下げると画質の荒れが目立つ。(色の境界線に四角いノイズが入る)
jpeg画像は、再び読み込んで加工したりすると画質が悪くなっていくので、 webで使う画像に、最終的に出力するときにだけ利用する。
Flashの素材としては、可能な限り、jpegよりは、bmpで読み込ませることが望ましい。
ちなみに、Flashで読み込んだラスタ画像は特に設定しない限り、パブリッシュ時にjpeg形式で再圧縮されている。

gif:
最大で256色しか使えないが、単体でアニメーションができる画像形式。
色数とサイズを極端に減らせば、jpegよりファイルサイズが小さくなる。バナーなどに利用される。
特許の関係で、(主にフリーソフトで)作成できるソフトが少なかった。
ただ、PING形式がある現在ではあまり重要性は感じられない。

ping/png:
gifとほぼ同等の画像形式。
アニメが出来ないことがgifとの最大の違い。gifにあった、色数の制限もない。
PNG24形式ならば、半透明のラスタ画像をFlash上で(フチの色の差をなくして)綺麗に表示できる。

bmp:
ほぼ無圧縮の画像ファイル。非常にサイズが大きい。
凡用性が非常に高く、ほぼ全ての画像ソフトで開けるので、作業中の画像データの保存や他ソフトで加工するさいに利用。

まとめ:
Flashに読み込む素材としては、
背景などの一枚の画像ならできるだけbmp。(画質を気にしなければ、HD容量の都合などがあれば、jpeg)
人物などの手前の画像ならば、PNG24で保存したpng。
以上。
※何も設定しなければ(圧縮率を変えたり、ロスレスにしなければ)、読み込むラスタ画像の形式が違っていても、パブリッシュされるファイルのサイズはほぼ一緒である。

サウンドファイル、動画の形式(代表的な)
wave:(wav)
代表的な音声ファイル
ほぼ無圧縮なので劣化せず、加工するときや、Flashに読み込む素材として優れている
ファイルサイズが大きい

mp3:
圧縮された音声ファイル。
音質の割にサイズが小さいのが特徴。
高音が潰れたり、加工できるソフトが限られていたりと、素材としては少々扱いづらい。
Flashがパブリッシュ時にmp3形式にしてくれるので、無理にmp3で読み込む必要はない。できるだけwaveで読み込みたい。
読み込む素材のwaveをmp3にして読み込んでも、サイズ削減にはならない。
パブリッシュ時の再圧縮により音質が悪くなったり、読み込みエラーが出る原因になる可能性がある。
音声ファイルの拡張子をmp3からwaveなどに直接変えることには何も意味がない。詳しくは拡張子の項を参照

mpeg:(mpg)
基本的な動画形式。MPEG1に準拠した動画フォーマット
この形式で渡せばほとんど全ての環境で見ることができる。
ただし、ファイルサイズが非常に大きい。あるいは極端に画質が悪い。
とにかくFlashに読み込みたければ、この形式になんとか変換してみるとうまくいくことがある。

mov/qt:
Apple社のQuickTimeの動画形式。
Windows機だと、再生処理の負担が大きく、動作が重くなることがある。

avi:
Windows機の標準の動画形式
ただし、再生にはそれぞれの形式(フォーマット)のコーデックが入っている必要があり、再生できるかどうかはコーデック次第。
再生はできてもFlashに読み込めないこともよくある。

Flashの動画の読み込みについては、ヘルプを読んだり、公式サイトで情報を集めて、試行錯誤のうえの自己解決が必須。
Q&Aで対応できる内容ではない。使いたければ勉強する。分からなければ諦めたほうがよい。

線と塗り、シェイプ
ベクタのお絵かきは直感的に操作するのは難しい。
試行錯誤しながら、慣れるしかない。
ベクタで描いた図形がシェィプ。
グループ化
Ctrl+G
ベクタで描いた絵などは、上に何か描くと下のものが消えてしまうので、グループ化することで図形を保護できる。
グループ化して保護、重ね順の変更だけなので、何度か試行錯誤して、慣れるしかない
不必要に大量にグループ化すると、再生が重くなる原因となることがある。あまり気にする必要はないが。(MCにしすぎても同様。グループ化のほうが、MC化よりも、若干重くなる模様)
文字ツールで入力した文字は、グループ化されているので、そのままでは加工できない。
分解(Ctrl+B)を2回行って、グループ化を解除する必要がある。
シンボルとインスタンス
MC化するなどして、ライブラリの中に入っている図形が、シンボル。
ステージ上に配置した、シンボルのコピーがインスタンス

スタンプ台と、押されたハンコとなんとなく分かっていればよい。
マニュアルの類に大量に使われていて、初心者を困らせるもの。
正確に意味を覚えたりする必要はなく、MCがどこにあるかで、呼び方が違うということが分かっていればよい。

ムービークリップ、MC(シンボル化)
シェイプを選択して、F8
図形(シェイプ)をライブラリに登録(シンボル化)して何度も利用できるようにしたもの。
このサイトでは、ライブラリに登録すること、ムービクリップにすること、グラフィックにすることを全てMC化と表現している。
内部に独自のタイムラインとレイヤーを持ち、複雑な構造のアニメーションを作るときに重宝する。

ASを使うさいはムービークリップを選択しないと、内部のASが動作しないので、注意。
アニメーションだけならば、タイムライン上でプレビューできるグラフィックを選択するとよい。

グラフィック
タイムライン上でプレビューできるMC。
アニメーションを作る人は、何も考えずにこっちを選択すればよい。
ボタン
タイムラインを持たない特殊なMC。
その名のとおり、ボタンの用途に使う。
ヒットの部分を塗りつぶして、クリックしやすくするのは基本。
オブジェクト
本来の意味は、それぞれ単体の「物」、「人」のこと。
線や塗りの最小単位。
一本の線や、四角や丸、塗りなど
使う人によってはシェイプのことや、MCのことを指している場合もある。
macromediaがカッコつけて使っちゃって混乱を招いた言葉?
プログラミングにおいてオブジェクト指向という言葉もあり、余計に混同しやすい。

出てきたら、「それ」とか「あれ」という意味に翻訳しておけば問題ない。
使う必要のない言葉。

図形のことをオブジェクトと言う本やサイトを見かけたら、古い言い回しを使っているなと思っていればよい。
(ASを本格的に書くようになると別。ただし、線や塗りの意味のオブジェクトではなく、本来の「物」という意味で、オブジェクト指向のように使う)

レイヤー
コスプレする人
透明なフィルムみたいなもの。画像を表示するときの重ね順みたいなもの。
画像ソフトを使ったことのある人にはおなじみ。
慣れないうちは煩雑になり、挫折しがち。
最初は1つのモーションやシェイプにつき1つのレイヤーを使うようにして、 レイヤーが増えてきて見づらくなったらフォルダに放り込む程度の理解でよい。
タイムライン操作
慣れ(ry
タイムラインのフレームを選択してから、F5でフレームの追加。
Shift+F5でフレームの削除
この2つの操作をまず覚える。
長い時間表示したい、もう少しゆっくりモーションを動かしたいときは、フレームの追加をして表示される時間を長くする。
反対に短く表示したい、速く動かしたいときは、フレームを削除して表示される時間を短くする。
Enterでタイムライン上でプレビューできるので、納得のいくまで調整する。

複数のフレームを選択して、追加や削除もできる。
また、複数のレイヤーを選択して、追加や削除ができる。

F6でキーフレームの挿入。
トゥイーンを利用するときに。
キーフレームを左右にドラッグすることで、タイミングの調整ができる。

F7で空白キーフレームの挿入
画面から消したいときに。
コマアニメするときに。
オニオンスキンを表示にしておけば、前のフレームの画像が残るので便利。

トゥイーン(モーション/シェイプ)

どちらも、ひとつの動きにはひとつのレイヤーで作る。

モーションはMCやグラフィックに対して行う。(MC化されてなくても、モーショントゥイーンの作成を行うとトゥイーン2のようにライブラリに勝手に追加される)

シェイプは、文字通りシェイプに対して行う。
Ctrl+B(分解)を繰り返して、全てのグループ化、MCを解除しないと適用されない。(シェイプしない)

アクションスクリプト、AS
JavaScriptを参考に開発された、Flashの言語。
Flashのゲームや、サイトなどを作るのに利用する。
最近のプログラムによくある、知らなければならない面倒な部分(手続き)が少なく、気軽に打ち込める。
ASを全く使えなくても問題ないし、ASのプログラムだけを目的にしてもよい。
アニメーションと、ASの両方を知っているのがベストではあるが。
 

用語解説
ここにない用語は基礎知識で解説しているものがある。
Flash
FutureWave Software社が、パソコンで簡単にお絵かきが出来る、web向けのベクトルベースでサイズの軽い、グラフィック、アニメーションツールとして「Future Splash」を開発。macromedia社が買収し、Flash(1.0)として発売したのが始まり。
パブリッシュされたFlashのムービー作品、要するにswfファイルの作品の意味で使われることが多い。
作品のことは、正確にはFlashムービーと言うべきだが、当サイトでもFlashと省略している。Flash(ムーピー)って方向で。
ムービー
映像作品のこと。
製作中のFlash、パブリッシュされたFlsah作品のこと。
MC、MovieClip
ムービークリップ
AS、ActionScript
アクションスクリプト
プリローダー
Now Loadingのこと
PV
音楽と同期して、映像の動くミュージッククリップ、モーショングラフィックのこと。
元はプロモーションビデオの略。
PV的な表現〜、というような紹介が多くされた結果、PVというジャンルがあると誤解された。
本来の意味は、商業的な目的を持つ動画映像。
文章系
文字を読むことを目的にしたムービー。
OOP
Object Oriented Programming
オブジェクト指向プログラミング
直接関係ないこと
D&D
ドラッグ&ドロップ
割れ
コピーしたソフト、不正使用している体験版のこと
SOFT WAREZ(コピーしたソフト)が転じて、WARE>割れに。
物質(スレ)
凄い勢いで誰かが問に答えるスレ」の略
※スレタイの語尾や言い回しが違う場合もあるので、「物凄い」あたりで検索するとよい
イースターエッグ
開発者がこっそり隠して入れた、メッセージ、デモ、ゲームなどのこと。
Flashの場合は、
「ヘルプ」メニューから、「FlashMX(2004)について」を開いて、
FlashMXでは、Xの真中あたり、
2004では、2004の文字の右上のTMをクリック。クリックできる場所はかなり小さいので根気よく探す。
黒(作品)
音楽、絵、映像などの商業的な著作物を勝手に利用して制作されたFlashムービー
黒歴史
∀ガンダムから。
知られたくないような恥ずかしい、または問題のある過去のこと。
ググる/ググれ
Googleで検索しろの意味。
頼むよ、まずは検索してくれ。
ロジックボム
論理爆弾。
不正な方法で入手したシリアルを入力すると、PCに害を及ぼす動作をするプログラムのこと。
不正利用ばっかりだと、開発者がキレてそういうことしちゃうこともあるということで。
信用問題なので、さすがに大手はやらないけど。
シェアではそういうこともあるので、コピーだとタダとか安易なこと言っていると痛い目を見る可能性があるってことで。
由来は、「中坊」が「厨房」になり、さらに「厨」と略されたもの。

〜厨となると、〜の部分のことに、やたらと拘る人
ID厨>>名前の右に表示される8桁のIDに拘る
仕切り厨>>流れを仕切りたがる人
this厨>>thisをつけないとダメだと主張する人
ウォンチュウ!>>ウォンチュウ

 
 
Flash5、MX、MX2004、(Flashのバージョン)について
バージョンが上がるごとに起動、動作が重たくなっている
  • Flash5
    アニメするだけなら5で充分。
    アニメ関係の機能は、5、MX、MX2004はほとんど一緒。

  • FlashMX
    aviなどの動画が扱えるようになった。
    ActionScriptが充実。FCS(別売)を利用したCGIの連携が強力に。
    AS2.0や携帯向けなどの特殊な用途を求めない限りMXで充分。

  • FlashMX2004
    AS2.0搭載。クラスが利用できるなど、よりオブジェクト思考が可能になった
    現時点で購入するならば、おそらくコレ。
    コマアニメ関係では、MX2004で特殊エフェクト(残像を残す文字など)が追加されたが、処理が重くて使いにくい。
    5、MXでも、工夫すれば同様のことができる。


       
    • エデュケーション(学生)版と通常版の違い
      機能は全く同じ。値段が違うだけ。
      エデュケーション版は製作したFlashを商業利用できない制限がある。
      厳密には、Yahoo!GeoCitiesやinfoseekiswebなどの広告のでるサイトで公開すると違反。
      エデュ版を不正に使用していることがバレると購入を迫られる模様

    • エデュケーション版の購入方法
      学生証を店舗で提示。(店舗によっては取り寄せの場合もある)
      通販では、書類の送付をすることによって購入可能。少々大変。

      公式:エデュケーション版購入対象者について 詳細な説明あり

    • MX2004の、通常版とプロフェッショナル版の違い
      初心者にはどちらでもよい。
      プロは複数人で開発する、携帯向けのFlash作成などの機能がある。
      公式:Macromedia Flash MX 2004 と Macromedia Flash MX Professional 2004 の違いは?


 
 
Macromedia以外のFlashが作成できるソフト
 
     
  • ※Macromedia公式以外のソフトは、入門書や解説サイトなどが極端に少ない。
    低価格、簡単操作のかわりに、学習が困難、出来ることが限定されているというデメリットがあることをよく理解して選択すること

    たいていのソフトは、各ウェブサイトで体験版が用意されているので、インストールして実際に試してみるとよい。
  • 低価格Flash作成ソフト
    • 学生ならば、エデュケーション版。本家最強
      Flashをしっかり使いたいと思っているならば、多少、高くても本家を選択するべき。

    • FlashMaker2
      画像を用意すれば手軽にMG(音楽にあわせた動画)が作れる。お絵かき機能はほぼ無いに等しい。用意されているエフェクト(だけ)が使える。基本的なAS(プリローダ、ボタン)は用意されいる。13440円

    • EazyFlash(Macあり)
      簡易Flash作成ソフト。ベジェ方式の作画が可能。MX程度のASも搭載。価格の割には性能がよい。ダウンロード価格5800円

    • SWiSH
      お手軽PV作成ソフト。テキストのエフェクトに特化。文字を簡単にかっこよく動かせる。ストリーミング再生できない欠点あり(音楽とあわせたムービー作成には不向き)。7560円
    • SWiSHmax
      上記SWiSHのパワーアップ版。ストリーミングに対応した他、独自のスクリプトで(MX程度の)ASに近いことができるようになった。14890円

    • Frames
      Flashアニメ製作ソフト。ラスタ画像を使うのが特徴。AS、サウンドには対応していない。シェアウェア、4500円
    • FrameToon
      上記のFramesの新バージョン。
      ドローソフト感覚の描画、アニメーション作成に特化。
      シェアウェア、6000円(上記ソフトからのアップグレードは3000円)

    • Swf Quicker(英語)
      モーション、ガイド、マスク、AS、2bite文字(日本語)の利用、ストリーミングが可能。swfを解析する機能(要するに人のFlashのASを覗ける)もあり。非常に高性能。シェアウェア、49.99$。
      >>日本語版として、Flash Creatorとして発売。9800円。
      通称フラクリ。現時点(2004/12)で、本家以外の有料のFlash作成ソフトならば、これがお勧め

     
  • 特殊Flash作成ソフト(高価格のもの)
    • Toon Boom Studio(Express)(Macあり)
      本格アニメスタジオ仕様。カメラ視点があり、対象に寄ったりする効果が作れる。ASは使えない。Express版は1000フレームまで、ペグ(カメラ移動)が2つまでといった制限あり。高価格(5万)

    • the TAB Pro(education)
      アニメに特化したソフト。筆圧情報を線に含められ、閉じなくても塗れる。カメラの概念がある。キャラのパーツに階層をつけられるのは便利。ASは使えない。高価格(12.8万)。

     
  • フリーFlash作成ソフト

参照元/関連リンク:swf出力可能ソフトの機能比較 まっつん氏のレビュー

 
Flash支援ソフト
     
  • Flash単体で実現するのが難しいことを支援できるソフト
    • FreeHand(Mac、Win)
      線の効果が多彩。macromeida製品であり、Flashとの連携が強力。メニューで複数のページをリンクしたFlashを作れる

    • Illustrator(Mac、Win)
      綺麗な線をFlashに持ち込める。ver.9以降からswfで出力でき、Flashで読みやすくなった。

    • Plasma
      Shockwave用の3D作成ソフト。Flashにぐるぐる回る3D効果を導入できる。Flashのライブラリの内容を直接加工できるなど連携能力が高い。体験版は読み込み、保存、起動時間などの機能制限が多い。

    • Swift 3D(Macあり)
      簡易3D作成ソフト。Flashにぐるぐる回る3D効果を導入できる。LightWave用のプラグインもある。体験版は書籍についているものだけ(レンダリングされた画像の出力ができない)

    • Moho(英語、Mac、Linuxあり)
      アニメに特化したソフト。ラインデータを特殊なスプラインで表現する。(家や箱のような多角形に限定されるが)3Dが扱える。ボーンが使えるので、多関節や、滑らかな関節アニメが作りやすい(ディズニーアニメのような滑らかな動きが作れる)。ただし、QTムービーなどの出力向け。swf出力はおまけ程度。日本語フォントは使えない。シェア、99$。

     
  • その他のFlash関係のソフト
    • ScreenSwift(英語)
      swfをスクリーンセイバーに出来る。体験版はロゴが入る。
      日本語化パッチ配布:EJMode

    • SWF Kit(英語)
      SWFを単体のexeにしたり、Flashを内臓したWinアプリを作れる。

    • Flash Plugin Switcher(英語)
      SAPlayerで再生するときのFlashのバージョンを切り替えるソフト。最新版で再生が出来るならば、通常の利用では問題ないが、心配性な人に。

    参考:Flashを保存したい(Flashの保存できるソフトの紹介あり)
    参考:BGM、効果音を保存したい(swfからファイルの抜き出せるソフトの紹介あり)

 
 
パブリッシュ
     
  • swf以外の形式で書き出す
       
    • パブリッシュ設定を行う
      「ファイル」>「パブリッシュ設定」の「形式」タブ。タイプのチェックを入れると、タブが増えて設定ができるようになる。

       

    • 任意の場所に書き出したい
      「ファイル」>「ムービーの書き出し」
      ファイルの種類を選択して書き出すことで、それぞれの形式で書き出せる。
      それぞれの形式は、パブリッシュ設定により設定が可能。
      ※JPEG、GIF、PNG「シーケンス」を選択すると、すべてのフレームの画像を連番で書き出せる。
      背景などを別のflaファイルでドローソフトの感覚で書いて、PNGシーケンスで書き出してから、再び読み込むことで、サイズと動作を軽くすることができる。

     
  • パブリッシュ後のサイズについて
       
    • ファイルサイズが増える状況
      • フォントの埋め込み
        日本語フォントは非常にサイズが大きくなる。
        >フォントにこだわる理由がない限り(モーションさせないで、ただ表示されるだけの文字の場合)、フォントの埋め込みはしない。(_で始まるデバイスフォントを使用する)
        ただし、視聴するPCに入っているフォントによっては、デザインが崩れる。とりわけWin、Mac間でのフォントの違いによる崩れが大きい。

      • 大きな画像の一部しか使わない
        ステージに配置すると、画面に入っていない部分、背景を消してある、縮小して表示などのあらゆる場合でも、サイズは元の読み込んだ画像(*圧縮率)のまま。再生速度が遅くなる原因にもなる(画面外にあっても描画されているため)。
        >一部しか使わない、縮小して使う場合は、一度、グラフィックソフトで加工してサイズを最小限にしてから読み込む。

      • 筆圧による塗りを多用する
        ついつい書き込みたくなることもあるが、線の数だけデータ量は増えている。ファイルサイズが大きくなる他に、描画速度にも大きく影響する。
        >できるだけ線の数を減らす。「選択ツール」の「スムーズ」や「ストレート」、「修正」>「最適化」を行う。「ダイレクト選択ツール」を使って、アンカーをできるだけ削除する。
        拡大をしない複雑な絵(とくに背景)は、いったんPING(手前の絵、半透明の画像)、GIF(色数の少ないアイコンや小さな画像)、JPEG(写真やグラデーションのある絵)形式などに書き出してから使うと、サイズ動作ともに軽くなる。

      • 「画質の圧縮率」を低く設定している、「ロスレス」に設定している
        画質をとるか、サイズをとるか製作者の悩みどころ。
        >サイズを小さくするだけなら、圧縮率を高く設定すればよい。
        写真だけならば20程度までに下げても、それなりに見られる画質である。

        (ロスレスにしない限りは、)読み込む画像のファイルサイズは、パブリッシュ後のファイルサイズに影響しない。
        パブリッシュ時の設定でjpegで圧縮される。
        例:同じ幅と高さの画像を用意して、1MのBMPと、12kのGIFにして、それぞれ別のflaに画像だけを配置してパブリッシュすると、読み込んだ画像の形式や容量に関わらず、ファイルサイズはほぼ一緒になる。
        ロスレスにすると、最適化されている16色の小さなGIFのような画像に適用する以外は、基本的にサイズが大きくなる。
        ロスレスはドット絵のキャラクターを綺麗に利用したいときや、透明PNGを使うときに利用。

      • 音声ファイルのビットレートが高すぎる
        CDと同じ音質ならば、128から160kbpsではあるが、3分で10M近いサイズになることも。
        >普段はデフォルトの16kbpsモノラルを使い、どうしてもというときは、最高で64kbps程度にするべき。
        セリフや効果音が頻繁に入るFlashの場合、一度、別のソフトで一つのwavに編集してから使うと、サイズ、動作ともに軽くなる。

      • レイヤー、MC、変数をたくさん作る
        >サイズはわずかだが大きくなる。気にしなくていいレベル

     
  • 背景を透明にしてパブリッシュする
    「パブリッシュ設定」>「HTML」タブ>「ウィンドウモード」>「透明表示」を選択してパブリッシュ。

 
 
 
HTML関係+
     
  • 別ウィンドウでFlashを表示する(ツールバーのない/小さなウィンドウで)
    JavaScriptを使う。
    window.open JavaScriptで検索

     

  • ブラウザを揺らしたり、閉じたい
    JavaScriptを使う。
    JavaScript 揺らす、とか、JavaScript 動かす、閉じるなどで検索。
    タブブラウザなど、IEやネスケ以外の環境で見ている人には分からないので、思った効果が出せないことがある。
    またJavaScriptによるウィンドウ操作は、迷惑に思うユーザーもいるので、リンクの前にJavaScript使用などと書いておく配慮があるとよい。(半分ネタバレ気味にもなるが。)あるいは、HPのトップに書いておくとか。

     

  • GET FLASH PLAYERアイコンを張る
    公式の、Macromedia Web ボタンから、ボタン使用のガイドラインを理解したうえで、「Get Macromedia Flash Player」アイコンとURLを貼る。

     

  • Flashの表示できないブラウザ、設定に対して代替イメージを提供する

    • <OBJECT classid="clsid:〜>〜</EMBED>

      <img src="noflash.jpg" alt="Flashの作品名。視聴できない環境です">

      </OBJECT>
      のように、HTMLソースに画像のURLを張っておく。さらにaltで説明文を加えるとなお良い。

    • Flashにより、サイトのナビゲーション(各コンテンツへのリンク)などを行っている場合に、Flashが見れない環境に配慮する。
      <OBJECT classid="clsid:〜>〜</EMBED>

      <a href="menu.html">メニュー(HTML版)</a>

      </OBJECT>
      のようにソースに書いておく。★暫定版。とりあえず動作しているが、いいやり方ではないと思われる。

 
 
アクションスクリプト初級
  • はじめに。
    ASはそんなに難しくない。ここのASは、手順どおりにやれば、数分で終わるので、気軽に導入するように。

    あらかじめ別名で保存しておけば、何かうまくいかなくなっても簡単に復帰できるので、恐がらずにとりあえずやってみる。

    一通りの操作方法を理解して、本格的に作品を作るようになったら、快適に鑑賞してもらうためにも、Now Loading(プリローダー)、再生ボタン、停止、リプレイボタンは覚えるべき。

    ※ASはエキスパートモードにして、コピペなり、タイプする。
    ノーマルモードは操作を覚える手間がかかる上に、自由度が低くて使いにくく、使用しないほうがよい。

    ※ASは、新しくAS用のレイヤーを作って(「Script」レイヤーなど分かりやすい名前で)、MCなどが置かれないようにロックして、キーフレームを打って書くようにする。

    ※アクションパネルは、「F9」で表示/非表示の切り替えができる。使うときだけ開けば良い。邪魔なら閉じておく

 
ボタンを作る
  • 手順
    1. 適当に「Play」なり、「リプレイ」の文字を打つ。
      (ボタンの枠は後で編集モードで作るといい)
    2. 文字を選択した状態で、分解(Ctrl+B)を2回行う
      (意味が分からなくてもやっておく。クリックできない問題を未然に回避)
    3. 文字(シェイプ)を選択したまま、「F8」を押してシンボルにする。「ボタン」を選ぶ。
      (ムービークリップにしてしまった場合は、ライブラリで右クリから、「タイプ」>「ボタン」に変更する。その後、いったんステージからボタンを消して、ライブラリから再配置するとボタンにできる。)
    4. 選択ツールで、ボタンをダブルクリックして編集モードに入る。
      (外枠を作りたかったら、レイヤーを追加してここで作る)
    5. 「ヒット」に「キーフレームを挿入」して、文字を多めに塗りつぶす。
      ヒットはクリックできる範囲。これを忘れるとクリックがしにくいボタンになってしまう。(必須事項)

      (「オーバー」はマウスを乗せたときの反応。「ダウン」はクリックしたときの反応。それぞれの変化をつけたかったらキーフレームを挿入して加工する。)
      (外枠があるならば、外枠のレイヤーのヒットにキーフレームを打てば、外枠の塗り部分がボタンの範囲になる)
    6. MCの編集モードを抜けて、ボタンを選択してから、ASを書く。
      「▽アクション − ボタン」となっているのを確認して書くように
      (実行すると、onハンドラは〜というようなエラーが出る場合、ASがボタンに書いていないということなので、ボタンを選択して書いているかを見直す)
        ASの例
      • ボタンを離したら…

        on (release) {}

      • ボタンを離したら、フレーム4に飛ぶ

        on (release){ gotoAndPlay (4); }

      • ボタンを押したら…

        on(press){}

      • ボタンを押したら、画質を低にする

        on (press) { _quality = "LOW"; }

      • ボタンにカーソルを乗せたら…

        on(rollOver){}

      • カーソルを乗せたら再生を開始する

        on (rollOver) { play(); }

 
ボタンであれこれ
     
  • 再生ボタンをつける
    1. NowLoadingをつけたいをそのまま使う。(プログレスバーを追加してても、そのままでよい)
    2. Scriptレイヤーを作り、フレーム2に、キーフレームを挿入し、以下のASを記入。

      stop ();

    3. 再生ボタンを作って、フレーム2に配置。(ボタンを作るを参考に)
    4. ボタンを選択して、以下のASを書いて完成

      on (release) { play (); }

    5. ムービーはフレーム3から作るようにする。

     
  • ムービーを最後で止める
    最終フレームに、キーフレームを挿入し、

    stop ();

    と書く

     
  • リプレイボタンをつける
    1. ムービーを最後で止めるをしてから、
    2. リプレイボタンを作って、最終フレームに配置。(ボタンを作るを参考に)
    3. ボタンを選択して、以下のASを書いて完成

      on (press){ gotoAndPlay(3);}

      gotoAndPlay()には再生させたいフレームを入れる

     
  • ASで画質を変える

    _quality = "LOW";
    updateAfterEvent();

    以上。
    BEST、HIGH、MEDIUM、LOWが指定できる。
    画質変更ボタンが押されたら、変化するように使うのが一般的
    ※ムービーの再生中に、ASで画質を勝手に変えることは好ましくない。最初の品質を変数にいれて、品質を最初の品質から、何段階、落とすというfunctionを作って利用するような工夫をすること。
     
  • ボタンでHTMLの移動をする
    (ボタンを作るを参考に)

    page2.htmlに移動(swfを再生しているページ自身を移動)

    on(release) { getURL("page2.html");}

    指定したURLで、別の新しいウィンドウを開く

    on(release) { getURL("http://〜.ne.jp/index.html","_blank");}

    mainフレームに、naiyou.htmlを開く(フレームを利用しているサイトに)

    on(release) { getURL("naiyou.html","main");}

 
 
Now Loadingをつける
  • しっぽのとこあしぷろを使うと、簡単。
    オススメ!

  • 手順(上記のあしぷろを使わずに自分で作る場合。改造とか、一歩表現力を上げたい人向け。)
    1. プリローダーの置く場所を確保、ロード中に表示されるものを用意する
      まず、フレーム1にキーフレームを挿入する。
      ローディング中は、フレーム1で停止させるので、フレーム1に「NowLoading」など、表示させる文字を書いておくとよい。
      MC(グラフィックではダメ)の中に、「NowLoading」の文字が点滅するなどのアニメを入れておくと、動きがあって待たされている感覚が減る。
      (ただし、NowLoading中のアニメはとにかく軽く作ること。Loadingアニメのサイズが大きいために、その読み込みで、しばらく何も表示されないといったことがないように)

    2. ASを書く(ローディングバー)部分を作成する
      適当に四角を書く。
      (プログレスバーをつけたい人は、横長の四角にしておくとよい。何もつけたくない、面倒なことがしたくない人は画面外に配置して見えなくしておく)
      「矢印ツール」を選び、図形を選択してから、「F8」を押して、「ムービークリップ」に変換する。
      ライブラリに登録する名前はなんでもよい。とにかく「OK」する。
      (ボタンやグラフィックにしてしまった場合、ステージのムービークリップを選択して、「プロパティ」の欄からムービークリップを選択する。)

    3. 実際にASを記入
      「F9」を押すと、アクションパネルが表示されるので、
      「▽アクション − ムービークリップ」とパネルの上に表示されているのを確認してから、以下のASを記入する。
      (「▽アクション − フレーム」となっていたら、図形のMCが選択されていない。または、MCになっていない、 「▽アクション − ボタン」となっていたら、ボタンになっている。「プロパティ」から変更する)

      onClipEvent (load) {
          _root.stop();
          this._xscale = 0;
      }
      onClipEvent (enterFrame) {
          _root.loadedSize = _root.getBytesLoaded();
          _root.totalSize = _root.getBytesTotal();
          _root.parcent = Math.floor((_root.loadedSize/_root.totalSize)*100);
          this._xscale = _root.parcent;
          if (_root.loadedSize>=_root.totalSize && _root.totalSize != 0) {
              _root.play();
          }
      }

    4. テストしてみる
      テストはパブリッシュプレビュー中に、「制御」→「ムービープレビュー」、
      「表示」→「ストリーミングを表示」。(MXの場合)
      「表示」→「ダウンロードのプレビュー」。(MX2004の場合)
      (最終確認はアップロードして行う。その際、一度読み込まれるとキャッシュされ最初から100%で飛ばされてしまう。FTP側でswfファイルの名前を変えて再びアクセスすることで、キャッシュを無視して実験ができる。読み込みが早すぎる場合、何も表示されないが正常に動いていれば気にしない。読み込みが数%終わったところから開始される現象を回避するには、loadMovieを使う必要がある。ただし難易度は高め。)


  • 進行状況(プログレス)バーをつける
    1. ひとつ前の、NowLoadingをつけるをそのまま利用する。

    2. プログレスバーを作る
      MCを選択したら、MCの編集モードに(ダブルクリックで)入り、全てを選択してから、「プロパティ」に、x:0を入力
      (これを忘れると中央から左右に広がるバーになる)。
      また、バーのサイズもこの時点で画面にあう大きさにしておく。(MCを編集モード以外の場所で拡大縮小しないように)

    3. 完成
      プレビューしてみる

      (プリローダー部分のASにローディングバーの機能が含まれている。具体的には、this._xscaleという部分で操作している)


  • 進行状況を%で表示する
    1. ふたつ前の、NowLoadingをつけるをそのまま利用する

    2. 文字が表示される場所を作る
      まずは、MCの編集モードではないことを確認する。
      (一つ前の手順で、プログレスバーの編集してた場合、特に注意)
      メインのタイムラインの、フレーム1にテキストエリアを作る。
      「テキストツール」で文字入力をする。サイズや色は好みで。
      「100」というように適当な数値を入れる。
      (入力した文字の幅、大きさや色が利用される。右寄せにしておくとよい)
      「%」はテキストエリアとは別に、文字ツールで横に書いておく

    3. 変数を指定する
      テキストエリアを選択したまま、
      プロパティから「ダイナミックテキスト」を選択して、「変数:」にparcentと入れる。
      (数値が変化しない場合は、大抵、ここの設定が間違っている。インスタンス名は空白にしておくこと!(MX以降のユーザー)。変数に変数名「parcent」をスペルミスせずに入れる。)
      (それでも、数値が変化しない場合、テキストの置く場所が間違っている。MCの中ではなく、_rootにテキストエリアがあることを確認する。あとはココみれ)

    4. 完成
      プレビューしてみる

      (AS部分の「_root.parcent = 〜」で読み込み状況に応じてparcentが変更されている。そうすると、変数parcentを指定したダイナミックテキストの内容も変化する)

    5. アレンジ
      「loadedSize」と「totalSize」という変数を持つダイナミックテキストを配置すれば、読み込み量と、総サイズを表示することができるようになる。

  • 発展:フォントの埋め込み
    デバイスフォントの数字をそのまま使うと格好悪いので。

     
  • バーを100%で停止させて、再生ボタンを表示する
    • NowLoadingをつけるをして、進行状況バーをつけるをしたあとで、

    • (バーのMCのある)フレーム1を選択して、右クリックから「フレームの挿入」を行う。
      (ローディングバーのレイヤーの)フレーム1、2の内容を同じにする。

    • レイヤーを新たに追加して(Script用のレイヤー)、フレーム2にキーフレームを打ち、以下のASを記入。

      _root.stop();

      これで、読み込みが終了しても、フレーム2で停止して、自動的に再生されなくなる。
      フレーム2に、ローディングバーが残っていれば、100%で停止した状態で画面に残る。

    • 最後に、再生ボタンをつければ完成。
      ボタンのAS例

      on (release) { _root.play (); }

       参考:再生ボタンをつける


  • Now Loadingに一工夫をする
    ※上記のNow Loadingがちゃんと作れるようになってから、改造するように
    • Now LoadingのAS部分の説明

      onClipEvent (load) {//MCが読み込まれたら
          _root.stop();//タイムラインを停止
          this._xscale = 0;//横幅を0に
      }
      onClipEvent (enterFrame) {
          _root.loadedSize = _root.getBytesLoaded();//読み込みサイズを取得
          _root.totalSize = _root.getBytesTotal();//総サイズを取得
      //parcentを、読み込み量の割り合いから算出
          _root.parcent = Math.floor( (_root.loadedSize/_root.totalSize)*100 );
          this._xscale = _root.parcent;//parcentに応じて横幅を変更
      //読み込みが終わっていて && 読み込みがちゃんと開始していたら
          if ( _root.loadedSize >= _root.totalSize && _root.totalSize != 0) {
              _root.play();//再生
          }
      }

    • onClipEventについて

      onClipEvent (load) {//MCが読み込まれたら
      //初期化処理
      }

      • onClipEvent (load)は、
        MCが画面に登場したときに、一度だけ実行される。

        _root.stop();//タイムラインを停止
        this._xscale = 0;//横幅を0に

        以上の処理を、行っている。

      onClipEvent (enterFrame) {
      //毎フレーム実行する処理
      }

      • onClipEvent (enterFrame)は、
        毎フレーム実行される。
        読み込まれているサイズを計算したり、バーを伸ばしたりしている。

    • パーセント表示の部分の説明

      _root.parcent = Math.floor(    (_root.loadedSize/_root.totalSize)*100    );

      まず、「_root」は、メインのタイムラインのことを示している。
      _root.parcentは、_rootにある、parcentという変数になる。
      _rootを省略すると、parcentはMCの変数になって、別のものになるので注意。
      よく分からなくても、とりあえず_rootを全部つけておけば安心ということ。

      (_root.loadedSize/_root.totalSize)*100という部分は、
      読み込みサイズ/総サイズ*100で、読み込み状況をパーセント単位にしている。

      ただし、読み込み状況の値は少数点以下の数字がずらずら並んでいるので、
      Math.floor ( );
      で切り捨てを行っている。
      例えば、その値が、19.5…だったら、
      Math.floor ( 19.5… );となり、
      切り捨てられ、19が出る。
      最後に、_root.parcentに代入される。

      メインのタイムライン(_root)の「parcent」の値が操作されるので、_rootにある、ダイナミックテキスト(変数:parcent)の表示が変化する。

    • プログレスバー部分の説明
      まず、最初に、 this._xscale = 0;で横幅を0にしている。
      読み込み途中で、 this._xscale = _root.parcent;で読み込み状況に応じて横幅を変更している。

      this._yscale とすれば、縦幅の変更ができる。


    • 少数点以下nケタの数字を表示する
      少数点以下2桁を表示する例

      _root.parcent =Math.floor((_root.loadedSize/_root.totalSize)*100*100) / 100;

      さらに100倍してから四捨五入をして、その後100で割って表示する。

      12.345378(%)
      ↓(100倍)
      1234.5378
      ↓(切り捨て)
      1234
      ↓(/100)
      12.34(%)

      表示する文字数が増えるので、テキストエリアの幅を広げておくように

    • 読み込みサイズと、終了サイズを表示する
      loadedSizeとtotalSizeという変数を表示するダイナミックテキストを作ればよい。
      ついでに1024で割ってキロバイト表示にアレンジ。

      _root.loadedSize = Math.round ( _root.getBytesLoaded () / 1024);
      _root.totalSize = Math.round ( _root.getBytesTotal () / 1024);

      Math.round()は四捨五入。

    • マスクでプログレスバーを伸ばす
      MX以降から
      プログレスバーをマスクにして、下にマスクされる(表示される)画像や模様などを置いておけばよい。以上

    • 読み込み状況でアニメーションを行う
      プログレスバーのMCに、1から100フレームで読み込みのアニメーションを作る。
      1から100フレームまでのモーションだったり、30%、50%で段階的に絵が変化するなど。
      以下のように、ASを変更。

      onClipEvent (load) {
          _root.stop();
      }
      onClipEvent (enterFrame) {
          _root.loadedSize = _root.getBytesLoaded();
          _root.totalSize = _root.getBytesTotal();
          _root.parcent = Math.floor((_root.loadedSize/_root.totalSize)*100);
          this.gotoAndStop(_root.parcent);
          if (_root.loadedSize>=_root.totalSize && _root.totalSize != 0) {
              _root.play();
          }
      }

      gotoAndStop()で現在の読み込み%に応じたフレームを表示している

    • 読み込みアニメーションを必ず再生する

      プログレスバーのMCに、1から100フレームで読み込みのアニメーションを作る。
      1から100フレームまでのモーションだったり、30%、50%で段階的に絵が変化するなど。
      フレーム1にキーフレームを打ち、配置後、MCを選択して、
      「▽アクション − ムービークリップ」となっているのを確認してから
      以下のASを記述

      onClipEvent (load) {
          _root.stop();
      }
      onClipEvent (enterFrame) {
          _root.loadedSize _root.getBytesLoaded();
          _root.totalSize = _root.getBytesTotal();
          _root.parcent = Math.floor((_root.loadedSize/_root.totalSize)*100);
          if (this._currentframe<_root.parcent) {
              this.gotoAndStop(this._currentframe+1);
          }
          if (this._currentframe>=100) {
              _root.play();
          }
      }

      _currentframeで、現在のフレームよりも、読み込みが進んでいたら読み込みアニメを再生。読み込みアニメが完了(100フレームに到達)していたらメインのタイムラインを再生している
      このASは、読み込みアニメのMCが100フレームに満たない場合、メインのタイムラインの再生が始まらないので注意!

      改造していてASが面白そうだと思えてきたら、ASを使いたいもどうぞ

 
1から1000までカウントさせる
  • 手順
    1. テキストツールで文字入力をする。サイズや色は好みで。
      「1000」というように適当な数値を入れる。(この幅が利用される)
    2. 「プロパティ」の、「ダイナミックテキスト」を選択して、「変数」にv_Numと入れる
      (ダイナミックテキストの変数の名前(ここではv_Num)に、数値を代入すると、代入した数値が表示される)
    3. 矢印ツールを選んでから、テキストエリアを選択して、「F8」を押してシンボルに変換する。
    4. 「▽アクション − ムービークリップ」となっているのを確認して
      以下のASを記述

      onClipEvent (load) {
          v_Num = 0;//初期値。
      }
      onClipEvent (enterFrame) {
          v_Num += 1;//速度。大きいほど増加が速い
          if(v_Num>=1000){ v_Num = 1000;}//1000になったら止める
      }

    5. 完成。プレビューしてみる

  • 発展:フォントの埋め込み
    デバイスフォントの数字をそのまま使うと格好悪いので。

 
 
コマアニメ
 
用意するもの/したいもの
  • アイデア、創作意欲、根気
    これはFlashやコマアニメだけに限らず、創作活動全般に言えることだが。逆にFlash操作の技術的なことはあまり必要としない。ASなんて気にしなくてもよい。やる気と継続して作品を作る能力が重要。(プロや職人の方々、尊敬しています…)

  • キャラクターデザイン
    はじめに作っておくと作業がはかどる。必須ではないが、あったほうがよい。とにかく枚数を描くことになるのでなるべくシンプルにして、描きやすいデザインに気を配る。

  • 絵コンテ
    あると全体の見通しがつけやすいが、絵コンテを書くと満足してしまい作業しない弊害も生む諸刃の剣。その場のノリで作っていくよりも、統一感の高い作品が作れる。Flashのタイムラインに直接、絵コンテを描いて、下書きに使うのもアリ。

  • お気に入りの映画、アニメなど
    お手本として。

  • スキャナ
    紙に書いた線画、写真をスキャンするのに必須。Flash以外のソフトで読み込んでベクターデータにしてからFlashに持ち込むといい。FlashのBMPのトレースするなら、上から書き直したほうがよい。

  • タブレット
    ほぼ必須アイテム。作画枚数の多いコマアニメではマウスだけの作業は非常にしんどい。筆圧入力ができるので、筆で書いたような線が描ける。無理に大きいものを買う必要は無い。(プロにでもならない限り)1万円以下の入門用で、充分なことが多い。

  • グラフィックソフト
    線画のトレース、ベクター化。ぼかし効果。着色したPNG画像の作成など、表現力が高まる。

 
実際のFlash上の作業
    ※これは一例。人それぞれの作業の仕方がある
  1. 新規シンボルの作成。適当な名前をつける。
    (「ギコ、口パク」など分かりやすく)
    シンボルの編集モードに自動的に入る
  2. 線画(下書き、ラフ)を配置してロックする。
  3. 線画を鉛筆ツールでトレース。
    (赤や青などの線画と違う色を使うとよい)
    (トレースが終わったら「インクボトル」で色を変える)
    線画のレイヤーが必要ないなら消す
  4. 顔、体、腕などを動かすのであれば、別レイヤーに分けて描く。
  5. 次のフレームにキーフレームを打ち、アニメさせた絵を描く。
    (例として、喋っているシーンならば、口を動かす。フレーム1は閉じている状態。フレーム3とフレーム5に開いた口と、半開きの口を入れる。好みに応じて目パチなどを入れる。配置するときに、1フレーム目で停止させておけば喋っていない状態に、ループさせれば喋っている状態にできる)
  6. 動きをプレビューしておかしいところがなければ、着色する。
  7. メインのタイムラインに配置して一つの動きが完成。
  8. 繰り返す

 
使えるツールの使い方
  • 消しゴムの「流し消す」
    絵の線をわざと交差させて描き、バケツで「線を閉じる」にして塗る。その後、流し消すで交差している線を消す。隙間の塗り忘れがなくなる。影の塗り分けの線を消すときにも。

  • 消しゴムの「線を消す」
    輪郭線だけを消したいときに使う。

  • ブラシの「内側をペイント」
    線や塗りを消さずに内側だけを塗れる。影を描くのに便利

  • ブラシの「選択範囲をペイント」
    選択している範囲だけを塗れる。服の模様やハイライト、影の追加などの仕上げに。

  • ブラシの「背面をペイント」
    線や塗りを消したくないときに使う。

  • 選択ツールの「スムーズ」と「ストレート」
    ブラシや鉛筆ツールで書いた線を多用するとファイルサイズが大きくなり、再生速度にも影響するので、選択してから絵が崩れない程度にスムーズにする。何度かクリックして崩れてしまったら、アンドウ(Ctrl+Z)

  • アウトラインの表示
    中割りをするのに利用。

 
コマアニメのコツ
  • MCはグラフィックで作る。
    タイムライン上のプレビューでもMC(シンボル)の中の動きが分かるので、作業性が上がる。

  • 24fpsでも24枚の絵を描く必要はない。
    実際のアニメでも動きの激しい場面以外は、秒間12枚の2コマ打ち、秒間8枚の3コマ打ち、作画が間に合わない/できないときは一枚絵のスクロールをしている。

  • デジカメ(カム)などで撮った動画をトレースする
    動画の読み込みはFlashMX以降で可能。練習用に、リアルなカメラワークなどに使える。
    実際の映画やアニメをトレースして練習してもいいが公開は控える。

  • ためる。ホールドする。(アンチ)
    剣を振る前、ものを投げる前、羽ばたく手前などは、現実では微妙に動いているがアニメする分には1枚絵で数フレーム固定する。少しオーバーな形にしておくと、よりメリハリがつく。無理に作業量を増やす中割りをしなくても良い。

  • 動きはゴーストで。
    動いてるシーンは、ブレている画像で。流線も加えるといい
    画像処理のできるソフトでぼかしてから使うとより効果が高い

  • 一瞬光らせる(白コマ)
    ものがぶつかったり、爆発したときは、画面を1フレーム程度、真っ白にすると迫力が出る。光らせる前に一瞬黒い画面を入れるとより効果的。
    効果音に合わせて、一瞬光らせると、その場面のアニメを省略できる。ビンタの音を出して、叩かれたあとの画面を描くなど。
    何度も光らせると倒れる人がいるので注意。控えめに。

  • 止まるときは勢いを吸収させる(クッション)
    静止するフレームの前に、一瞬行き過ぎた位置に絵を入れる。ピタっと止める動きにより迫力がでる。画面外からやってきて止まるときや、画面奥から接近してきてすぐ手前で止まるときなど。

  • 接近させるときに迫力を出す
    接近する場面をモーショントゥイーンのイージングだけでやってしまいがち。ぬーっとしたつまらない動きになってしまう。
    キーフレームを多めにうち、遠くにあるときは非常にゆっくり拡大、最後のコマで急接近させる。
    10フレームで接近するならば、1から7フレームまでで、40%程度に。残り3フレームで一気に100%に拡大させる。

  • ぶつかったときと伸びるとき
    よくあるボールのバウンド。ぶつかる時はぶつかる方向に縮み、跳ねるときはその方向に伸ばす。

  • フォロースルー
    振り向くときに髪の毛が遅れてくる、服がひらめく、爆発したあとの煙など。意識して作画すると、より動きが映える。3Dモデリングに対してコマアニメが有利な部分。乳揺れとか乳揺れ

  • 重さや重心
    いい動きには必須。忘れると軽い動きになってしまう
    とにかく実物を観察する。ビデオに撮ってスローで見てみる。羽ばたく鳥は、羽根の先を中心に上下運動しているなど。

  • はためき
    カーテンや旗やマントがひらひら。繰り返しの動き。固定された絵よりは見栄えがするが、作業量に対しての効果は出にくい。特に狙う効果がないならば、あまり派手に動かさないように。

  • まばたき
    2から3秒に一回程度。目が開いたままだと死んで見える場合も。
    閉じるときは、半目があってもいいが、開けるときは半目はいらない。
    不安なときや、考えているときは、まばたきが速くなる。瞳孔の動きを加えると更に効果を出せる。鬱系の話に

  • 歩いているシーンで地面を描かない
    木や電柱、背景を、後ろや横に流すだけでいい。手抜きのテクニック。
    上半身のバストショットにすれば、足の作画もしなくてよい

  • ホワイトアウト
    徐々に白くなる効果で、その場面の描写を省く
    爆発音がして、主人公のひきつった顔のアップでホワイトアウトなど。爆発自体は描かない。

  • スローモーション
    作業量は多くなるがここぞというシーンでは使いたい
    あまりにも長くすると飽きられる。ほんの一瞬、ここぞという時に使う。元の速度に戻ったときは、しばらくの間、少し早めに動かすとより効果的

  • コマ落ちをわざと表現する
    ひとつのテクニック。わざとガクガクさせることで、スローモーションの代わりに使う。ただし、中の繰り返しアニメしているMCや、雪などの全体にかけている効果があるならば、それもコマ落としにする。
    最大の効果をだすには、そのシーンだけを、背景を除いてPINGで書き出して、ぼかしを移動方向につけて再び読み込ませる。
    わざと負荷をかけてスローモーにするのは環境によって最適値が違いすぎるので非現実的。また、鑑賞者にとって迷惑。

  • 動きを全て書くと映像が死ぬ
    何か大きなものが出てくるシーンで、その登場が映像の流れの中で最大の価値がない限り(演出的な目的がない場合)、既に1/3程度、出ているシーンからはじめるとよい。
    その際、前景となる建物などである程度隠すと、登場させやすい。雲の中から飛行船が出てくるなど
    わざわざ、時間をかけて最初から最後まで登場を説明すると、映像に飽きられて、テンポが悪く感じる。
    あえて見せないこともテクニックになる。
    他にも、画面の端から人が出てくる場合、建物の陰から出すことによって登場時間を短くできる。
    空の薬きょうやナイフなどが地面に落ちるとき、地面で何度もバウンドさせてカラカラするのを見せるのではなく、一度接地して跳ねた時点で次の画面に切り替えてしまう。作業量も減るし、テンポもよくなる。音だけ流れていれば視聴者は分かってくれる。(ただし、目的があって全部の流れを見せる場合は別)

  • 上手と下手
    舞台における、客席から見て、左側が下手(しもて)。右側が上手(かみて)。
    弱いもの、不利な状況、挑戦者などは左側で右向き(下手側)に。
    強いもの、有利なもの、大きなものなどは、右側で左向き(上手に位置)で。
    背景のスクロールの場合でも、下手からは、抵抗、上昇などの意味に。
    上手からは、ごく自然な流れ、上から下に落ちるようなイメージで。
    演出上の都合で例外はあるが、このルールを守ると、見ていてなんとなく違和感を感じるが、理由がよく分からないという現象を回避できる。
    一度、このことに気をつけて映画やアニメなどを見てみるとよくわかる。


  • ASを使った表現
    • 発展:ムービー支援AS(回転、雪、タイプライター、画面を揺らすなど。少々難易度高め)

 
Flashムービー作成テクニック
   
閲覧者にとって優しいムービー
 
グラフィックを使ったタイムライン上のプレビュー
  • MCのタイプをグラフィックにしておくと、
    タイムラインのプレビューでも、MC(グラフィック)中の動きが表示される。

    歩いている人のMCを横にスライドさせる場合、
    グラフィックにしておけば、足の歩幅にあわせてモーションで動かすことで、簡単に進む距離のタイミング合わせができる。

    回転しながら接近してくるような場合、
    まず、回転だけでグラフィックを作成。
    その後、そのグラフィックをモーションで拡大する。
    回転と拡大が独立しているので、それぞれの速度の変更などが容易になる。
    一緒に作ってしまうと、どちらかの調整を行うと、もう片方がおかしくなる。

    激しいカメラの動きを表現するときに、
    画面サイズよりも大きく、写す対象をアニメしているグラフィックで作っておき、
    対象の動きを見ながら、グラフィックの位置をモーションで変更すれば、カメラが対象を追うような画面が作れる。

 
それっぽく見える回転や拡大
  • 回転のコツ
    モーショントゥイーンを使って上から見た回転している図を書く。
    その横幅を参考に拡大や縮小を行い回転を作る。
    本当に回転させているような雰囲気が出る

  • 拡大のコツ
    モーショントゥイーンを使って横から見た接近してくる図を書く。
    投射図のスクリーンになる線を引き、
    カメラ(視点)の位置から、スクリーン、接近してくるものの幅に直線を書き、 スクリーンに交わった縦幅を参考に拡大を行う。

    <) |           ■

    <) |      ■

    <) |  ■

    ※距離が倍離れると、目に見えるサイズは半分になる。
    10mの距離で、10cmのものは、20mになると、5cmに。
    1mの距離では、100cm。
    距離(m) 1m 10m 20m 30m 40m 50m 60m 70m 80m 90m 100m
    サイズ(cm) 100cm 10cm 5cm 3.3cm 2.5cm 2cm 1.6cm 1.4cm 1.25cm 1.1cm 1cm

    要するに、遠くにあるものは、接近してきても殆どサイズは変わらない。
    近くに来ると急激にサイズが大きくなる。
    一つのキーフレームで作られた、モーションとイージングのみの、ぬめっとした接近は、気持ち悪いからやめれ。

 
オニオンスキンアウトラインを使ったイージングの繋ぎ
  • イージングは、あまり急な加速や停止はできず、物足りないことが多い。
    しかし、キーフレームを打って速度の変化をさせると、ガクっと速度が変わる部分が気になる。
    そこで、オニオンスキンアウトラインで前後3フレームを表示しつつ、イージングを調整すると、
    だんだん早くなるのような、違和感のない繋ぎが作れる
 
Shift、Altを使いこなす
  • Shiftを押しながら描写
    円や四角は、Shiftを押していると、正円、正方形が書ける。
    直線や、鉛筆、ブラシツールでは、水平、垂直な線が書ける。
    フリーハンドで書けるツールは、Shiftを押している間だけ、水平、垂直な線が書ける。

  • Shiftを押しながらペースト
    同じ位置にペーストが出来る。
    円をコピーして、同じ位置にペーストすれば、ペーストした円をShiftとAltを押しながら拡大縮小すれば、内側の正確な位置に円を書ける。

  • 変形ツールを使いこなす
    Shiftを押しながら変形させることで、縦横比を維持したまま拡大縮小できる。
    Shiftを押しながら回転させることで、45度単位で回転させられる。

    Altを押しながら変形させることで、中心を維持したままの変形が可能。
    横や縦に拡大するときに、中心がずれないので使いやすい。
    AltとShiftを押しながら変形させれば、中心と縦横比固定のまま変形できる。

  • Shiftを押しながら選択
    複数の選択ができる。
    複数のMCを選択してから、一緒に拡大や縮小ができる。

    ABCDEの文字がそれぞれ一文字づつ拡大してくる場合、
    5つの文字を別々のレイヤーに配置して、トゥイーンにしたあとで5つのMCを同時に拡大。
    フレームの挿入を行って動くタイミングを変えることで、比較的簡単にタイミングの違う同じ動きが得られる。
    アルファ変化なども、まとめて一緒にやっておくと吉

  • Ctrlを押して変形
    塗りのみ(MCは無理)だが、変形ツール使用中に、Ctrlを押してから4隅をドラッグすることで、歪曲になる。

  • Shiftを押しながらカーソルで移動
    選択をしたあとに、カーソルで1(ピクセル単位?)移動することができるが、
    Shiftを押しながらだと、10づつ移動できる。
    大まかな移動は、Shiftを押しながらで、微調整はShiftを放して行うとよい。
    慣れるとドラッグよりも速くて確実。
 
 
知っておくと便利なこと
   
良く使うショートカット
  • 総合
    ステージ以外のウィンドウを
    閉じる/表示する
    Tab
    新規シンボルCtrl+F8
    シンボルに変換F8
    ライブラリを表示F11
    グループ化Ctrl+G
    分解Ctrl+B
    同じ位置にペーストShift+Ctrl+V
    ステージのスクロール
    (一時的なハンドツール)
    スペース
    シェイプ、シンボルの移動(選択してから)
    カーソルキー

  • タイムライン上の操作(タイムライン上で/選択して)
    フレームの挿入F5
    フレームの削除Shift+F5
    キーフレームの挿入F6
    キーフレームの削除Shift+F6
    空白キーフレームの挿入F7

  • プレビュー
    タイムライン上でプレビューEnter
    パブリッシュプレビューCtrl+Enter

  • 画面
    ハンドツールをダブルクリック手ごろなサイズに表示
    ズームツールをダブルクリック100%の拡大率にする

 
 
 
動作を軽くする
  • 再生するときの画質を落とす。
    参考:画質を設定したい
    参考:ASで画質を変える

  • 無理に高いfpsで製作しない。
    60fpsでは画面が滑らかだが、より多くのPCでコマ落ちする可能性がある。

  • 複雑なシェイプの塗りは処理を重くする。できるだけ、シンプルな形にする。可能な限り最適化をする。拡大する目的がなければ、PINGやJPEG形式にして配置する。

  • 上記のものと同様の理由だが、小さな画像を大量に配置する場合(雪や雨、ASで増殖など)は特に処理が重くなる。
    アニメ部分をPING化するような工夫を。
    雨の絵を画面と同じサイズの透過PINGにして、数枚の絵を繰り替えすことで雨に見せるなど

  • 文字をモーションさせるときは(とくに文字数が多い場合)、分解して、線と塗りにすると軽くなる。

  • 読み込んだ画像のアンチエイリアスを行わない。
    ライブラリ上でグラフィックを右クリック>「プロパティ」。スムージングのチェックを外す。

  • グラデーション、半透明の塗り、アルファつきの画像は重くなる原因。複数のMCなどで同時に多用しないように。

  • アルファの変化をさせたトゥイーンは非常に処理が重い。不必要に使わない。

  • マスクで重くなることがある。描画されてない部分も裏で描画されているので、マスク自体と、マスクする画像で2倍の処理をしている。

  • シェイプトゥイーンはかなり重くなる。あまりにも複雑な変形をさせると、再生が途中で停止することがある。

  • MCを拡大して、一部分だけ使う場合は、一度分解して、画面外の部分は削除して、別のMCとして使ったほうが軽くなる。

  • スクロールさせる背景は、画面外の部分を削除してモーションさせたほうが軽くなる。さらに細切れにすれば、より軽く。
     ・参考リンク:こしあん堂>>FlashTips

  • セリフや効果音が頻繁に入るFlashの場合、一度、別のソフトで一つのBGMにまとめてから、利用すれば、サイズ、動作ともに軽くなる。

  • ストリーミングでBGMを鳴らしているときに、さらにストリーミングで音を鳴らすと処理落ちの原因になることがある。
    短い音は、イベントにするとよい。
    可能なら、上記の方法をとる。

  • 文字をタイプするような表現は、一つのレイヤーで一文字づつ消してリバースするより、別レイヤーに一文字づつ置くほうが処理が軽くなる。

  • 落ち葉や波紋などの画面効果は、MCだけで出来ることなら、ASを使わないほうが処理が軽くなる。
    (低スペックの再生環境では、ASの処理に時間がかかることがある)

  • IE6でFlashを再生すると重たくなる。
     参考:IE6でFlashを再生すると重たくなる

  • 諦める。再生の推奨環境を書く
    CPUは1Ghz、メモリーは128Mb程度のPCで再生して、低画質でコマ落ちしなければ問題はない(と思う)

 
シーンの代わりにMCを使う
  • はじめに
    少々ASを使うので、そういう面倒なこと、難しいことが嫌いな人は、タイムラインに全部置いておけば良い。ただ、楽をしたい人は対象外。
    大規模な制作でタイムラインが長くなって煩雑になり、効率的な作り方をする必要がある人が対象

  • 手順
    まず、とにかく保存。失敗しても、再読み込みすれば復元できるので。

    ある場面として切り分けたい部分を、タイムラインで選択してコピー。
    複数のレイヤーがあったら、まとめて選択してコピーする。
    新規のMCを作り、そのMCのタイムラインにペースト。
    こうして場面1のMCが完成。

    メインのタイムラインにキーフレームを打ち、場面1のMCを配置。
    NowLoading(プリローダー)などがあるので、フレーム11に置いたことにする。

    場面2を作ったら、フレーム12に配置する。
    同様に、場面3はフレーム13…と作っていく。

  • ASを記入
    タイムラインにAS専用のレイヤーを作り、キーフレームを打って、ASを書く。
    (「script」のように分かりやすい名前にして、ロックしておくとよい。)
    ASは、ASが書いてあるキーフレームにタイムラインが来ると実行される。

    上の手順の場合、フレーム11でいったんタイムラインを止める必要があるので、
    フレーム11にキーフレームを打ち、メインのタイムラインを停止するASを書く。

    _root.stop();

    フレーム11に来ると、メインのタイムラインは停止するが、場面1のMCのタイムラインは動いているので、場面1のムービーが再生される。

    場面1のMCの再生が終わったら、
    場面2を再生したい(メインのフレーム12に行って欲しい)ので、
    場面1のMCの最後のフレームに、メインのタイムラインを次のフレームで停止させるというASを書く。

    _root.gotoAndStop(_root.currentframe + 1);

    以上。あとは、場面2以降の最後フレームでも同じ事を繰り返す。

  • 応用
    と言うほどではないが、パブリッシュプレビューしながら仕上がりを見たいときは、
    メインのタイムラインのフレーム1に、gotoAndStop(見たいフレーム数);を書けばよい。

    場面2を再生する(フレーム12で停止する)AS

    _root.gotoAndStop(12);


  • アレンジ
    クリックして先に進む、紙芝居にしてみる。
    場面1の最終フレームで、場面1を停止させるASを書いて

    this.stop();

    ボタンに、押されたら次のフレームに行くASを書けば、

    on(press){
    _root.gotoAndStop(_root.currentframe + 1);
    }

    簡単にクリックして先に進むムービーが作れる。

     参考:ボタンを作る

  • アレンジ2
    オープニング(開始)ムービを何度も利用する
    ひとまとめのMCにしておけば、flaファイルを複数開いて、MCをコピーして配置するだけでよい。
    タイムラインをコピペするよりは簡単で確実
    また、ローディング画面と、オープニングだけのムービーを「テンプレートとして保存」しておけば、非常にスムーズに利用できるようになる。

    発展:クリックすると先に進む/紙芝居を作る(コマ送りをする)

 
 
 
あれこれ(未整理のもの含む)
  • レイヤーやライブラリをフォルダで管理。増えてくると見づらくなり作業効率が落ちるので、目的別にフォルダを作り整理する。整理が面倒ならば、完了したものを放り込むフォルダを作って、その中に入れてしまう。

  • ASを使えるようになれば、文字効果や立体など、表現の幅を得られる。
    画面全体を好きなタイミングで揺らしたり、回転させたりできる。一度、ASを書けば、あとは何度でも再利用ができる。タイプライターのような表現も、いちいちキーフレームを入れてトゥイーンしたりせずに、文字を入れておけば、再生時に自動的に打ち込むようなことができる。
    サンプルを導入してみて慣れるといい。

 
 
 
Flash作成にあると便利なもの
  • Flash作成支援ソフト
    絶対に必要なものではないが。
    普通のドローイング(CG)、綺麗なベクタ線の作成、ぼかし表現、明度や彩度や色相の修正、圧縮率やサイズの調整、音声の編集や特殊効果、3D効果、テキストエディタ(長文のASを書くのに)、などなど。
    より表現の幅が広がるだけではなく、作業の効率化が可能になる。
    参考リンク:

  • ペンタブレット
    ペンで書く入力装置。
    ブラシツールの筆圧をオンにすれば、筆で書いたような線が書けるようになる。マウスで書くよりも直感的な入力が可能。作業効率は数倍にあがる。
    無理に大きく高価なタブレットを買う必要はなく、10000円以下の入門機で充分実用に耐える。
    ほぼ必須アイテム

  • スキャナー
    写真やトレス用のラフ画像の読み込みに使う。読み込みには別のソフト(大抵スキャナーに付属)が必要。
    タブレット、デジカメで無理をすれば代用できるものでもある。無理に高価な機種を買う必要はない。
    CGを書く人には、かなり必須。なくても困らないけど、少し欲しいレベル。

  • デジタルカメラ
    背景写真にそのまま使う。対象の背景を切り取って利用する。写真をトレスする。
    bmpの分解などをして利用すれば、味のある表現ができる。
    動画撮影のできる機能も欲しい。実際の動画をトレスするだけで非常にいい効果の画面が作れる。簡易持ち運び可能なマイクとしても一応使えることも。
    10万画素もあればとりあえず充分。携帯のカメラでそれなりに代用可能。逆にサイズの大きな画像はネット公開では不便なので別のソフトで必要な部分に切り取り、サイズを縮小するなど加工して使うこと。
    あったら嬉しいアイテム。

  • お手本
    好きな映画、アニメ、ミュージックビデオ、ゲーム、漫画などなど
    いい作品を見て創作意欲を高める。
    作り方や表現の勉強に同じ動きを再現してみることに挑戦してもいい。ただし公開は個人的範囲に限る。逮捕なり賠償金の請求をされても自己責任
    ついつい見入ってしまいFlash作成が中断しないように


  • 良いOS
    途中でフリーズ(停止)して、作業が全て消えたりしないように。結構重要。
    WindowsME機は買ってはダメ。安定性、速度の点でWindows2000を推奨。高速なマシンならXPでも可。
    MacはFlash作成以外に、画像作成がメインであるなら選択しても良いが、本体、メモリ、機材、ソフトの点でWindowsより高コストなことを覚悟して選択すること。

  • メモリ
    作業の効率を上げるために、ある程度必要。メーカー製のPCでは不足がち。
    512MBあれば、とりあえず困ることはない。作業中にHDアクセスをして作業にタイムロスが発生するならば購入を検討してみるとよい。
    ハードウェア関係は難しそうに感じるかもしれないが、メモリは電源を切って差し込むだけ。
    購入もメーカーのサポートに相談するなり、パソコンショップの店員に聞けば対応してくれる。5000円前後から増設可能

  • トラックボール
    指でボールを回して位置入力をする機器。マウスの代用に。
    タブレットなどで、机が狭くなったときには迷わずこれ。慣れるとマウスに戻れなくなる
    Tackball Explorerがお勧め。少々高価だが、安いものはすぐ壊れる、操作性が悪いなど意外にケチれない部分

  • マルチモニタ(環境)
    二つの画面で操作ができるようになる。なくても困らないが、あると非常に便利
    タイムラインを別のモニターに置いておくと、大量のレイヤーを使ってもスクロールしなくてよく、画面を非常に広く使えるようになる。
    Flash作成以外にも、webを見ながらタイプするときなどにいちいちウィンドウの切り替えをしなくても別画面にそれぞれ表示できる。
    マルチモニタを使用できるグラフィックボードと、もう1つのモニタを購入しないといけないので多少高コスト。モニタ2つぶんの場所をとる欠点も。
    20インチのモニタに買い換えるよりは、15インチのモニタを2つにすることを検討してみるべき。PCの知識も必要となる。ただし、一度体験すると止められない環境になる。一通り環境が揃ったら挑戦してみたいもの

  • PCのハード、ソフトの知識
    あればあるだけ嬉しいが、無理して覚えるものでもない。自然と身につく
    表現力、操作効率に直結する。
    キーボードショートカット、様々な表現方法、動画の利用、音声の編集、メモリの増設、OSの選択など、何かやりたいことや、不便に感じることがあったら、色々と学んでみるとよい