FreeHand 8J Webページデザイン(4) Flashアニメ作成

ひきつづき『FreeHand 8J Webページデザイン』を読むぞ。

• 正円にグラデーション塗りして、クローンを90%に縮小して[Modify - Join]（オブジェクトの結合）。これでなぜか外枠ができる。
• それをさらに90%縮小してグラデーション塗りの方向を逆にする。これでカメラレンズの枠ができた。
• [View - Page Rulers]でページルーラーを表示して、ガイドを内周に接するよう引く。このガイドの交点から正円を作れば、内周と一致する正円が描ける。
• 内部を塗るのだが‥‥カメラのレンズに見えないな‥‥。この塗りは改良の余地あり。

残る課題は‥‥

Flashアニメーション作成もやってみようか。

この本によると、FreeHand8ではFlash3よりswfファイルサイズが大きくなるという。Flash3で読み込み直せばファイルサイズを小さくできるんだって。

• まず、ドキュメントインスペクターで用紙サイズをCustom横向き、横幅400、縦300に指定した。別にこれはピクセル指定というわけではないらしい。FreeHandで100%の拡大率で見たときの大きさでFlashでも出力されるという。
• 大きな正円と文字「C」と小さな正円の3オブジェクトを用意する。
• ここで知ったことだが、ブレンドというのは最背面→最前面に向かって実行される。[背面] 大円→文字→小円 [前面] の重ね順にした。
• 最初は文字を「A」にしたのだが、Aではブレンドされない。[Modify - Combine - Blend]がグレーアウトしている。なぜか？ Aは文字の中に空白があるので、アウトライン化したときに「複合パス」になっていたのだ。[Modify - Split]で複合パスは解除できるが、文字のなかの空白を取り除くとかしないとならなかったりするので使うのをやめた。文字「C」ならアウトライン化したとき単純なパスになるのでブレンド可能だ。
• ブレンドのステップ数は 10 を指定した。
• [Operations - Release to Layers] （レイヤーに分解）。
• [File - Export - *.swf] でswfファイル出力。

swfファイルは4KBでとくに大きくはない。
Flashで[ファイル - 読み込み]で読み込み、[修正 - ムービー] で 12fps、幅400 x 高さ300 にしてアニメGIF（ファイルサイズ 14KB）で出力したのが以下。Flashにswfファイルをいきなりドラッグドロップすると編集できないが、新規ファイルを開いてから[ファイル - 読み込み]すれば編集できる。

形が変わるアニメか。Flashでは「シェイプ・トゥイーン」と呼ばれるやつだね

次のはまず木の形をつくる。円をグループ解除して、上の点を引っ張ってコーナーポイントに変えて作った。それをエンベロープで形を歪める。

ところで
を curve point
を corner point
を connector point
と呼ぶようだ。

ブレンドをパス上に結合する。

動きを改善したくなるなあ

次はTシャツが風になびくのだが‥‥。
Tシャツのオブジェクトを作り、クローンしてエンベロープでゆがめる。それを繰り返す。

これを文字だけブレンド、Tシャツ生地だけブレンドしたいのだが、文字だけ選択するのが難しい。一時的にレイヤーを使って、文字だけ別レイヤーに置いてそれぞれブレンドするぞ。

ブレンドしたあとでレイヤーをひとつに戻す。レイヤーはアニメのために使われるからね。アニメと関係ないレイヤーは削除しておく。

しかし、結果はこれさ‥‥

文字とTシャツのアニメがあってないよ！　そもそもTシャツのブレンドがおかしい

対処しようとしたんだけど、できなかったんだ。

FreeHandでブレンドを正確にするためには、各オブジェクトを選択した後で、さらに「ブレンドの基準になるポイント」を各オブジェクトごとに選択する必要がある。
この課題では最初と最後で同じ形にするために、同じ形のオブジェクトを２つ重ねてある（最背面と最前面に配置してある）。すると、その同じ形のオブジェクトのポイントを両方選択することはできなかったんだ。

• ポイントをクリックした場合は、重ね順が上のオブジェクトのポイントしか選択できない。
• ポイントをマウスドラッグで囲んだ場合、同じオブジェクトが重なっているとポイントがひとつも選択できない。

という理由でうまくいかなかった。私の知識がたりなかったかな、この課題。

‥‥‥‥

それでは次は花火だ。
花火が上がるまでと、上がったあとのアニメを、別ページで作成する。

上がるまでのアニメ。丸が下から上に上がるので、下のオブジェクトから作成する。
そのあと、ドキュメントインスペクターで [Options - Duplicate](複製)でページを2つにする。

次は上がったあとのアニメだ。丸を置いて[XtraTools - Mirror](ミラー)で放射状に配置。遠くにも丸を置いてミラーで配置。１つずつブレンドする。

それをどちらも選択して（Ctrl+Aではページ内しか選択できないので、マウスで選択）、[Operations - Release to Layers] （レイヤーに分解）。

それにFlashで背景色をつけたら、こうなった。

等速運動なので、いまいち‥‥　Flashのイージングを使って速度に変化がほしいな

ということでだいたい終了。
このあとは、この本では Insta.html 機能を使ったHTMLページの作り方の説明とか、ほかのアプリとのデータ互換、FreeHandの操作法でIllustratorと違う箇所の説明が載ってる。ここはパスするよ。

この本の感想は？

前の本とぜんぜん違ったな。前の本は操作方法の説明が詳しくて、操作とFreeHandの基礎を習得させるための課題という感じだった。
この本は操作方法の説明はなくて（後の方にまとめてあった）、高度な表現方法のレクチャーをメインにしていた。応用編という感じ。これまでベクター系のソフトをあまり学んでこなかったんで、勉強になったよ。

Macromedia FreeHand 8J Webページデザイン