【インターネット探検隊】

隊長 ● 村野幸夫

作 ア 隊 フ マっ ニ 長 ラ クて メ の ッ ロ
み ーシ メュ デた シで ィが ョア⁝ ンを⁝Macromedia
Flash編「Macromedia Flash」はブレイクするかもしれない？

いやぁ〜、今月は最高に煮詰まりました
ヨ〜、まったくぅ……と唐突に結果報告か

illustrator : Kaori Takahashi

ら始めてしまうが、正直言って今回の探検
ほど アタマぐちゃぐちゃ になったのもさて問題のソフトはマクロメディア社が2珍しい。なんたって3 月号までの記事は年月19 日発売予定（だからこの号が発売さ末に書いて年明けはばっちり休むというのれるころにはすでに市場に出ているはず）がこの業界のジョーシキ……ん？ そのハーのアニメーションソフトウェア「Macro

ドな年末進行で稼いだリゾート気分が帳消media Flash」。もともとは米国の独立系のしのタフ〜な探検だったのである。

ソフト会社が作った製品だが、本誌の某コ

しかしてその探検テーマは、ここんとこ

ラムニスト氏によれば、彼がコラムで「化ずっとさわってなかったソフトウェア。しかけるかもしれない」と書いた途端にマクロもお絵書きやHTML 作成ならいざ知らず、メディアが会社を買収しちゃったんだそう

アニメーションソフトですよ、アニメーショである。まさか彼の記事を業界の名物男＝ン！

バド・コリガン会長が読んでるとは思えな

確かに例によって「もう止まったままのウェブページなんか面白くないよね」と休めるはずだったのに、またしても新たな探検指令が出てしまい……。

いけどね。

か、勝手なことを編集部で話してたのは事

それはともかく、このソフト、評判を聞実だけど、まさかこんなに大変なものだっいてみるとかなりユニークなものらしい。とたとは……ということで、今回は結果見えいうのは普通の絵（アニメーションも）が見えでスタートだ。

小さな画素（画面の要素）をモザイクみたいに集めて全体を描くの対して、これは画

Macromedia Flash： も と は Future Sprush社 の Future Sprush
Animator。マクロメディア社が買収したことによってMacromediaFlashに名称変更された。

面上の線や面を数式を使って描くのである。
一般には前者を「ペイント」と言って、フ338 INTERNET magazine 1997/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&Dォトショップなんかはこれに入る。対して、サイズは転送フォーマットにもよるが2 〜

後者は「ドロー」という形式。デザイナー

3Mバイト 程 度 。 これを伸 張 すると、などが使っている「イラストレーター」と「Macromedia Flash Trial PM」という30いうソフトもこの種類のものだそうだ。

日間の期間限定付きトライアル版のインスでは、どうしてドロー形式のほうがそのトーラが出てくる。

方面で使われるかというと、この形式の絵

これを使ってインストールを簡単に終えは拡大しても画面が粗くならない「スケーると「Macromedia Flash Animator Trial」ラブル」という特長を持っている。つまり、というフォルダーができる。この中にはア画素をたくさん集めて描いた絵というのは、プリケーション本体のほか、ヘルプやサン拡大していくと、どうしても最小の画素のプルのHTML、レッスンのファイル、部品単位がどんどん大きくなって、結局某方面となるシンボルのほか、ウェブのブラウザーで有名なモザイク状態になってしまい、そに入れてMacromedia Flashのファイルをの部分が何なのか分からなくなってしまう。

見るためのプラグインソフトが収められて逆に言えば、細かいところまで描こうとすいる。

ると、ファイルのサイズがどんどん大きくなる。

Macromedia Flash のダウンロード先
jhttp://www.macromedia.com/software/flash/

例によってお試し版だから丁寧なマニュ
アルなんて期待できないのは当然……と思

ところが、ドロー形式のほうは線や面がっていたら、うれしいことにレッスン付き計算式で描かれているから、どんどん拡大

ではないですか、ふむふむ。ともかくどんしても表示する拡大部分だけ計算すればいなものか見てみようと思ってプログラムをい。いくら大きくしても画面があれること起動すると、左端にお絵書き用のパレット、はない、さらにファイルサイズもそこそこで右に目盛りの入った長いスケールみたいないいというわけ。だから部分をどんどん書ものが……。どこかで見たような、と考えき込んでいく必要があるCADなどを使った

たらマクロメディアのディレクターに似てい設計図面ではこちらの形式が使われるんでる。そりゃそうか、あれもアニメーションある。もっとも普通の、テレビみたいな画ができるもんね。

像表示装置は最終的には画素で表示してしかし、これを見ただけじゃ、とりあえるから、近づいてみればそれなりに粗くなず絵らしきものは描けそうだが、何が何だるのは仕方ないんだけどね。

か分からない。そこで、よくよくメニュー
バーを見ると「Library」の下に「Lesson」

期間限定トライアル版をダウンロードとまぁ、にわか仕込みの背景説明はここという項目がある。さらにプルダウンしてみると……
1 Drawing

までにして、早速ソフトをダウンロードし2 Animation Overviewてみよう。日本のマクロメディア社のウェ

3 Frame-by-Frame

ブからも行けるが、ソフトの置いてあるの4 Motion Interpolation

は「Macromedia-Flash（http://www.

5 Creating Buttonsmacromedia.com/software/flash/）」だ。
氏名やメールアドレス、住所、それに「買……などという説明項目が並んでいる。

う気はあるか？」「買うとしたら何本くら不幸なことにこのお試しソフトは当然英語い？」なんていう質問に答えるとダウンロ

版……う〜ん、もうここでメゲそう。

ードエリアに進むことができる。ファイル

トライアル版には親切な使い方レッスンが付いていた（でも、英語〜）。

Macromedia Flashのファイルを見るためのプラグインソフト：
Shockwave Flashのこと。Macromedia Flashで作成されたアニメーションを再生するときに使用する。
ディレクター：マクロメディア社のアニメーション作成ソフト。ショッ
クウェーブのファイルはディレクターで作成した動画ファイルを圧縮したもの。

しかし、私もこの連載をあずかる身であインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/4339

インターネット探検隊る。というより、原稿に穴を空けるわけににする「OnionSkinning」という手法、画は……。なんとかやってみようと決意を固

面の構成要素をオブジェクトとして管理すめたのであった（ でも、 その下 にるための「SymbolPalette」、そしてコンピ「QuickStart」という項目があり、ついつュータを利用したアニメーションならでは

いひかれて見てしまったのは事実。でも何のインタラクションを引き出す「Buttons」

も簡単に使えそうなことは書いてありませなど、アニメーションの基本的な仕組みが、ぬ、残念なり）。

その作成法と一緒に解説されている。読み物としてもなかなか面白い。が、かなり長付属のチュートリアルで使い方のお勉強い。つ、つらい。しかしお手本もあるし、まあ、それなりに楽しめないわけではない。
ま、お茶でも一杯……。

とりあえず、付属の学習ファイル「Lesson」を見てみよう。

アニメーションの動きには、オブジェクト自体が変化する場合と変化せずに移動する場合がある。

結論から言うと、グラフィックスのセン次の「Frame-by-Frame」はこれに比べスにはいまいち感心できないが、このレッるとかなり短く楽ちん。「Timeline」を使スンは組み込み型の学習ファイルとしてはって、1コマ1コマをどうやって動きにつななかなかよくできている。英語の読める人げていくか、時計の短針を使った演習だ。

ならすぐにプログラムに慣れることができると、 ほっとしたのも束 の間 。 次 のかもしれないが、とりあえず面倒くさがり「Motion Interpolation」はかなりのボリュの読者のために順を追って簡単に説明してームで、しかもコマンドが分かりにくい。

いこう。

「Interpolation」とは「書き入れること」。

第一章の「Drawing」はアニメーション

つまりあるオブジェクトが画面内に入ったのベースになる静止画の描き方、要は左端ままで、その内部を上下や左右に移動してにあるパレットの使い方のお勉強である。

いる場合など、最初のコマのオブジェクト

これは全般にわたっての話でもあるが、の位置を指定し、中間を飛ばして、最後の操作はイラストの入った画面を読みながらコマのオブジェクトの位置を指定すれば、「NEXT」ボタンを押していくだけで、効率その間に入る複数のコマの中のオブジェク的にプログラムの機能が理解できる。また

トの位置を適当に決めて絵を描き入れてく

画面の右端には、縦方向にページごとのタれるという仕組みである。

ブが用意されており、これも前に読んだ項順番にこのレッスンを受けてきたなら、目などを見直すときには便利である。ちな

これまでにアニメーションには2種類の動きみに、遅いマシンを使っている人向けには、があって、1つはオブジェクトそのものの変画像のスムージングを解除する（こうする化（例えば鳥がはばたいている様子）であことで表示が速くなる）というオプション

り、もう1つがここで扱うオブジェクトのフまで設けられている。

レーム内での移動ということが分かっていこの章が静止画を扱っていたのに対して、次の「AnimationOverview」は本格的なアニメーションの技法解説だ。

340 INTERNET magazine 1997/4

るはずだ（なんちて偉そうだけど、まった
くそのとおり）。
さらに、この「移動」は直線的な移動にアニメーションのコマを時間軸に沿って限ったものではなく、折れ線や曲線をひい並べていく際に利用する「Timeline」、画ておいて、それを経路（path）として指定像を透明のセルに描いて構成要素ごとに扱すれば、そのとおりの動きをさせることもう「Layer」という考え方、場面展開のきできる。う〜ん、なかなか便利である。

っかけとなる「KeyFrame」、前後のフレー

ところで、上で「オブジェクト」と書いムを重ねながら滑らかな動きを描けるようたけれど、「Interpolation」で扱える画像

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

は静止しているものに限らない。つまり、動いているオブジェクト（上の例で言えばともあれ乗りかかった舟。早速プランを立てて実験してみることにした。

「はばたいている鳥」）でもよい。というこ

まずは一体化したビットマップのイラスとは、はばたいていながら位置的には止まトを要素に分解する。具体的にはフォトシっている鳥をアニメーションにしておいて、ョップでファイルを開き、右側のインプレ

これをオブジェクトとして登録（このプロス社屋と顧問の乗ったクルマ、さらに私自グラムでは「Symbol」パレットに登録でき身を分離する。ついでに車のホィールの照るようになっている）しておけば、これをり返しパターンを消したり、排気ガス（？）

経路に乗せるだけで、画面の右から左へ蛇や汗（？）なども消してしまう。これはあ行しながらはばたき、飛んで行く鳥のアニとから書き入れて動いている雰囲気を強調メーションができるというわけである。

するためだ。

最後の「Creating Buttons」はコンピュ

これだけの作 業 を終 えたらいよいよータを使ったインタラクティブなアニメならMacromedia Flashで新規画面を作成する。

ではのボタンの解説だ。このボタン、カー

まず最初にやるべきは画面のサイズ。実はソルを乗せる、クリックするなどのアクシ

この方法、レッスンには登場してこない。

ョンに応じて反応、またリンク先としてアったく、も〜。えらい大変だったすよ。

ニメーションシークェンスを指定できるほ「Format」から「Document...」を選び、か、URLへのリンクも可能というところが出てくるダイヤログボックスで広さを指定

いかにもウェブ対応といった感じだ。

する。ウェブに上げることを考えて、幅10アニメーションからURL へのリンクもできる！

インチ、高さ4インチを入力する。

ビットマップファイルの悲劇

次に「Object」メニューから「CreateSymbol...」を選択し、顧問の運転するトというわけで、ちょっと解説が長くなっラックを読み込む。この絵にホィールの回たが、これまでのお勉強の成果を使ってち転や荷台の上で揺れる隊長の私、さらに排ょっとした作品を作ってみることにした。

気ガスや飛び散る汗などでアニメ感を出そとは言っても、タブレットもないし、素材うという目論見だ。

から描くのも大変なので、例によって探検個別の動きを全部書き込むというのもあるが、結局それぞれを別のレイヤーで処理隊のイラストを流用することにする。
編集部からもらってきたのは先月号に登することにして、数フレームの動きをそれ場した「探検隊ネットワーク顧問I 氏と車ぞれが繰り返すようにフレームをコピーしでインプレスを出る」の図である。これをてお茶を濁すことにした。

改変して実際に動かしてみようというのが問題だったのはPICT ファイルで読み込今回の狙いだ。しかしここで若干の手違いんだため画像が矩形になってしまった点。

があった。

さらにどういうわけかレイヤーの重ね具合というのは、イラストレーターで描かれの調節がちゃんとできないこともあって散々たファイルなら「Macromedia Flash」に読な目にあってしまったが、なんとかこれをみ込んで、要素をバラバラにしたり、線な「Tanken Car」として登録して第一段階はどに変更を加えたりすることができるのだ

終了だ。

が、持って帰ったのはビットマップファイ

ここで元 の画 面 に戻 り（ というのはルだったのだ。もちろん、ビットマップの「Symbol」のパレットは同じアニメーショファイルを読み込めないことはないのだが、ンの中でしか使えなかったからだ。本当はこれだと表現は限られてしまう。

ちゃんとした方法があると思うが、発見でビットマップファイルではアニメーションの表現が限られてしまう。

タブレット：ペンで書くような線や文字をパソコンに入力できる周辺機器。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DINTERNET magazine 1997/4341

インターネット探検隊きなかった）、最初のキーフレームの右端にタンコしている）がずずずっと動くという

インプレス社屋のPICT を貼り込む。サイ

みっともない状態。しょうがないので、こズは大きいがパレットを使って簡単にサイれはバックグラウンドを白に切り替えるこズ変更することができる。とでなんとかなったが、どうもファイルが重ここで新しいレイヤーを作り、最初のキーフレーム右端、インプレス社屋直近の部作成されたアニメーションはQuickTime かGIF アニメーションのファイルに変換できる。

たい。どしてぇ？と思ってファイルサイズを確かめてみてびっくし。なんとこのGIF分に「Symbol」パレットから先ほど作成

アニメ、300K を超えているではないか！

した「TankenCar」をドラッグし、リサイどショォ〜ック！

ズして貼り込む。さらに最後のキーフレー

Flash のプレイヤーファイルにしてみてもムに画面を切り替え、最終地点にこのクル200Kを超えている！ ダブルパァ〜ンチ！

ついでにMacromedia

マを置く。次に「Interpolation」を設定す

やっぱしお手軽にビットマップファイルれば、これでいちおう終了だ。後はプレイなんかを持ってきたのがよくなかったんだろ

バックすると、見事に車は左から右へガタうか。これでは「軽いファイルで楽々ウェガタしながら進んでくれる。

ブアニメーション」なんて言えたもんじゃ

このあと、「path」を使って車を垂直方ない。やっぱし、ちゃんとドロー方式でア向に上下させながら走らせたり、アップ＆ニメを起こさないと駄目なわけね、と反省ダウンさせたりしてみたが、「path」のライしきりの隊長なのであった。

ンの曲り方にはシビアに反応し過ぎてしまとまぁ、こうして今回の探検は終わるわ

うので、これ以上のギミックを加えるのはけだが、実際振り返ってみると、ここに書止めることにした。

けたのは私の苦労の100分の1くらいじゃないかと思ってしまう。というのは、このプアニメーションはドロー方式でないとだめ?!

ログラムをレッスンどおりに使うと、結構予定調和的に作っていかなければ効率的にアニメーションはできそうもないのである。

さて、これでいちおうアニメーションとこういう部分、途中で方針変更したり、どしては完成だが、インターネット探検隊とんな気ままなやり方をしたりしても、とりしてはこれをウェブで見れるようにするといあえずモノが簡単に作れるというような、う重大な課題が残っている。この場合、ま融通の利くマルチアプローチのできるプロ

ずはMacromedia Flashのファイルとしてウグラムがないもんだろうか… とも思うのだ

ェブに置き（そのためのHTMLの書き方サが、やっぱそれなりに苦労が必要なんでしンプルもある）、ユーザーにはそのためのプょ〜ね、アニメーションって。

ラグインをブラウザーに入れてもらうというビットマップでアニメーションを作ったら、ファイルサイズがやたら大きくなってしまった。

方法がある。さらには……これがこのプログラムの面白いところだが……QuickTimeのファイルにしてしまうか、GIFアニメにしてしまうという方法があるのだ。
そこで今回は、GIF アニメのファイルとして出力し、HTMLファイルの中に組み込んでローカルでながめてみることにした。果たしてその結果は……というと、前述のPICTファイルがたたって、標準的なグレーのバックだと白い矩形（中でクルマがバッ

342 INTERNET magazine 1997/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&Dこのアニメーションはインターネットマガジンのホームページで見られます。
jhttp://home.impress.co.jp/magazine/inetmag/

今回紹介したアニメーションの作り方

使用した素材 隊長を乗せた車が右から左に移動するアニメーションを作成。

図1

1.トラックの部分を作る

図2

図4

図 1＋ 2「wheel」「sweat」など、パーツごとの動 きを記 録 。
左 図 中 の● 印 はパーツの動きが変化したことを意味している。

2.トラックとビルを組み合わせる

図3

いくつかの素材をまとめて隊長が乗っている車だけが動くアニメーションを作り、「Symbol Name」として登録しておく。

図 1＋ 2＋ 3

トラックは最初と最後の動きを登録しておいて、その間のフレームは「Interpolation」というコマンドで埋めておく。ビルの部分は動かないので、1 フレーム目だけ記録。

完成！
インターネットマガジンのホームページ（http://home.impress.co.jp/magazine/inetmag/）でアニメーションを見てみよう。

「Format」の「Document」でアニメーション全体のサイズを調節する。

「File」の「Export Movie」を選択して、アニメーションファイルの保存形式を選択。アニメーションGIF の形式で保存すれば、ウェブで見ることができる。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/4343

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.