スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。
【--/--/-- --:--】 | スポンサー広告 | page top↑
さあ試しに作ってみましょう(3) とりあえず完成
<作品作りー3アニメーションする文字テキストのシンボル化>
前回は、はじめに文字用のレイヤーを作成しました。ここでは部品(buhin-3)WELCOMETOMYWEBSITEを先に作ります。前回までの作成作業で、部品作りはシンボルの作成ですからメニューバーから「挿入」⇒「新規シンボル」⇒「グラフィック」でシンボル名は「文字」とします。下の図はこれから作るシンボル作成のステージです。
(注)文字に限らず図形を作成する際に背景色を同色もしくは同系色とすると見にくいため間違いの原因になります。それを避ける方法として「一時的」に背景色を変え、後で元に戻します。数種類の色を使った場合、背景色は黒などコントラストのはっきりした色を選びます。さらに背景色はすべてのレーヤーに適用されますので色々試してみてから決めて下さい。Flashファイル(SWF)を設置するWEBサイトの背景色と同じにするとFlash動画を実行させた時にWEBの背景色に溶け込み効果的に見えます。では作成に戻ります。シンボル作成画面のレイヤー(名前は付けなくても構わない)のタイムラインフレーム1をクリックし<テキスト、WELCOMETOMYWEBSITE>を作成します。
blogdezain_22.jpg

次にツールバーのテキストツール「A」をクリック。続けてステージ上の中央部分をクリック。
blogdezain_23.jpg

WELCOME TO MY WEBSITEと入力してテキスト文字を作成してください。フォントの種類は何でも構いません
blogdezain_24.jpg
<シンボルWELCOME TO MYWEBSITE>を作成する
レイヤー1をクリック。続けてテキスト(WELCOME〜)をクリック。プロパティパネルのサイズ欄でW(幅)、H(高さ)を変更して下さい。文字台紙のサイズを目安に。「テキストの種類」を静止テキストに。文字色を「白」に。背景色が白場合には文字が一時的に薄い灰色で表示されます。配置を中央に。ここで一度保存。続けて「WELCOME〜」の任意のところをクリックしてさらに右クリック。「シンボルに変換」をクリック。「シンボルに変換」パネルが開きますので「シンボル名」を「WELCOME」に「タイプ」をグラフィックにして「OK」。これで部品、buhin−3が完成しました。
(注)ツールバーからテキストツールと選択ツールを度々切り替えながら作業しますが、最初の内切り替えをはうっかり忘れる事がありますので、混乱しない様に。また、前回までに体験されたように、部品を作成する際には作成した文字や絵などはもう一度「シンボルに変換」し直す必要が有ります。ただ、「シンボル変換」せずに使う場合(シェイブと言います)もありますが混乱を避けるためここでは説明を致しません。ステージの右に表示されているライブラリーパネルを見るとシンボル「文字」とシンボル「WELCOME」が見えます。それぞれの表示されている部分をダブルクリックするとステージに取り込まれますのでステージ下のプロパティパネルを開いて二つの違いを確認して下さい。
blogdezain_25.jpg

<文字レイヤーにシンボル「WELCOME TO MY WEBSITE」を配置する>
確認が終わったらタイムラインの上に有る「シーン」をクリックして作成画面に戻ってください。台紙レイヤーの上にレイヤーを追加しましょう。レイヤー名は「WELCOME」と付け、60フレームに「空白キーフレームを挿入」して下さい。
blogdezain_26.jpg
右のライブラリーパネルからシンボル「WELCOME」をステージ上へドラッグアンドドロップして下さい。60フレームから120フレームのタイムラインが薄く灰色に変わりました。下の画面のように文字グラフック」を調整し、配置位置を中央に。(調整の時は他のレイヤーを一旦ロック)一度保存。
blogdezain_27.jpg

<キーフレームを設置する>
キーフレームは動作の区切りとなるポイントです。形状や色彩、傾き等の違った状態にある同一シンボル同士の間でのみモーショントイーンが作成できます。キーフレームとキーフレームの間で動作が変化してゆくプロセスとなります。では、下の図に従ってキーフレームを7つ追加して下さい。追加するフレームの位置は適当で構いません。
(注)フレームレート(1秒間を幾つのフレーム数に分けるかと言う割合)は特に指定しない場合(デフォルト)では12となります。動作させたい動きにより一概に言えませんが私の場合、とり合えず3フレーム単位(3、6、9、12など)で設定します。なお、フレームレートはメニューバーの「修正」⇒「ドキュメント」から設定しますがここで設定されたフレームレートは作品のすべてに適用されます。
blogdezain_28.jpg

<枠外から飛んでくる拡大されたシンボルに加工>
60フレームをクリック。次にステージの「WELCOME〜」をクリック。ツールパネルから「自由変形ツール」を選択。{WELCOME〜}の回りに「囲み線」が付いて拡大縮小出来るようになりました。
(注)タイムライン右側の「100%」と表示されているプルダウンをクリックしてステージの表示サイズを一旦50パーセントにすると作業しやすくなります。「WELCOME〜」のコーナーハンドルをクリックした態で大きさを背景をはみ出る位まで拡大して下さい。拡大できたら配置を中央に調整。ステージを
100%に戻す。ここで一度保存。
blogdezain_29.jpg
<飛んでくる動き、モーショントイーン>を設定。
タイムライン60フレームをクリック。もう一度右クリック。モーショントイーンの作成をクリック。
blogdezain_30.jpg

60フレームから次のキーフレームまで黒い線が出来ました。
1番目から2番目までモーションが設定されました。続けて2番めのキーフレームをクリックし、続けて右クリック。2番目のキーフレームに文字が右回りに1回「回転」する動作を設定します。
blogdezain_31.jpg

3番目から4番目のキーフレームにも文字が回転する動作をつけます。「モーショントイーン」の設定までは同じ要領です。それぞれのプロパティパネルで「回転」蘭を「右回転」を選択「回転数」を1に。「イージング」はここでは省略します。
(注)イージングは動きを初速度、終速度で異ならせる時に使います。ここで一度保存。
blogdezain_32.jpg

<タイムラインの数字が表示されているところを左1から右方向でドラッグしてみて下さい。文字の動作が確認できます。6番目のフレームをクリック。
blogdezain_33.jpg

<キーフレームの追加、削除、移動>
6番目のキーフレームをクリック、ステージの「WELCOME〜」をサイズ変更します。幅と高さを少し増やして下さい。サイズはお好みに。次に7番目のキーフレームを削除します。削除は7番目のキーフレームをクリック、続けて右クリック、パネルが開いたら「キーフレームを削除」。次に6番目のキーフレームをクリックしたまま7番目のフレーム位置までドラッグして6番目のキーフレームを移動させて下さい。
blogdezain_34.jpg

次に5番目と6番目のキーフレームの間に(5番目から3フレーム位開けて)キーフレームを追加します。(新たに6番目となりました)6番目にモーショントイーンを設定して下さい。6番目の画像は5番目と同じ内容になっています。
(注)7番目のキーフレームを削除して5番目と6番目の間に新たにキーフレームを追加する作業は無駄とお考えと思います。その通りです。ここではキーフレームは必要に応じて削除したり、追加したり移動させたりできる事を理解していただく為にあえてこのようにしてあります。
(注)5番目にモーショントイーンを作らない理由は画像の動きに停止した状態を挟み込むことで動きをより効果的に表現できます。長い動作の作品には所々に静止状態(ストップモーション)を入れると良いでしょう。
blogdezain_35.jpg

<最終の調整>
7番目のキーフレームをクリック。ステージ上の「WELCOME〜」をクリックして最後に幅と高さを調整をします。文字台紙の幅をはみ出るまで増やします。決まったら配置位置を中央に修正。
(注)サイズの中に納まった感じでは何か平凡なので(作り手によって色々ですが、、)はみ出させまました。
blogdezain_35.jpg

blogdezain_36.jpg

6番目のキーフレームをクリック。モーショントイーンを設定します。これで完成です。一度保存。
blogdezain_37.jpg

メニューバーの「制御」から「ムービープレビュー」をクリック。この作品の再生が始まります。画像、文字、色、キーフレームの位置、など色々試しながらご自分の好みに有った作品に仕上げて下さい。ムービープレビュー画面に表示されている「サイズ」はこの作品のSWFのデーターサイズになります。

次回は「ムービークリップシンボルの作成方と使い方」です。
【2008/03/04 10:29】 | Flash | トラックバック(0) | コメント(0) | page top↑
さあ試しに作ってみましょう(2)
<作品作りー2> 
<文字背景の作成>
背景レイヤーの上に配置される文字を見えやすくしたり、イメージ効果を良くする為に文字色と調和の取れる色彩で作成します。
まず、背景レーヤーの直ぐ上にもう一枚レイヤーを追加してください。自動的に120フレームのレイヤーが作成されます。レイヤー名を「文字台紙」に変更し、次に文字台紙レイヤーの36フレーム目をクリックして空白キーフレームを設置してください。
blogdezain_7.png

次にメニューバーの「挿入」をクリックし「新規シンボル」を開いてください。
blogdezain_8.png

「新規シンボル作成」のパネル開きますので「名称」蘭に「文字台紙」、「タイプ」蘭は
「グラフィック」を選び「OK」をクリックして下さい。
blogdezain_9.png

するとステージが変わります。これはこれから作成しようとしているグラフックシンボル、「文字台紙」作成の為のステージがFlashによって用意されたためです。

タイムラインの直ぐ上に白い文字で「シーン」その右側に「台紙」(文字台紙と読み替えてください)と表示されています。はじめに述べました「階層構造」が現れました。作成に伴い新しい階層構造が左から右に作成される場合があります。階層の深い順序は左から右に深くなってゆき、タイムラインの上の位置にすべて表示されます。ためしに「シーン」をクリックしてみて下さい。画面が変わり元の作成画面に戻りました。ではもう一度白い文字の「文字台紙」をクリックして新規シンボル作成画面に復帰して制作を続けましょう。ここで一旦ファイルを保存してください。

Flashで画像を作成すると縁取りと形状内容は別々に作成されますのでここでは縁取りを「使用しない /」に指定して下さい。(ツールバーのカラーの下の鉛筆マークを開いて)
ツールバーから「矩形ツール」を使い色は「青」を使って適当なサイズで長方形を作成し、中央に配置(大切)して下さい。ここで一旦保存。
blogdezain_10.jpg

縁取りラインを持たない青い長方形が作成されました。
blogdezain_11.jpg

次に「シェイブ」と言う表示の下にサイズ変更のための窓が有りますので大きさを入力して下さい。「シーン」に配置した後でも変更は可能ですので大体でかまいませんが、ここでは「背景」サイズ(400かける130)を目安にします。作成中に画像を操作したときは必ず位置の「中央配置」を確認を。
画像が指定したサイズに変更されました。

<部品作りの完了はシンボル化>
この長方形を一回クリックし続けて右クリックするとパネルが開きますので「シンボルに変換」をクリックして下さい。(この作業、シンボル化は大切です)プロパティの内容が「シェイブからシンボル」に変わりました。これでグラフィックシンボル「文字台紙」の完成です。

(注)プロパティ画面が開いて無い場合はプロパティの文字にある▶をクリックして▼に変えて下さい。プロパティ内容が表示されます。
blogdezain_12.jpg

「シーン」をクリックして画面を切り替えます。
blogdezain_13.jpg

<文字台紙のアニメーション、モーショントイーンの作成>
まず、背景レイヤーにロックをかけて下さい。レイヤーが複数になって来たら操作対象のレーヤーを除いて他はロックをかけることをお勧めします。
文字台紙レイヤーの36フレーム目をクリックし次にライブラリーから部品、グラフィックシンボル「文字台紙」をステージ上にドラッグアンドドロップ。サイズを図のように修正。中央配置して下さい。続けて60フレム目をクリックしもう一度右クリックして窓を開き「キーフレーの挿入でキーフレームを追加します。
(注)ライブラリーパネルが表示されていない時はメニューバーの「ウインドを開きライブライーパネルを表示させて下さい。
blogdezain_14.jpg

さらに台紙レーヤーの42フレーム目をクリックしてキーフレームを追加します。ステージ上の青い長方形画像は42フレーム目の画像です。
blogdezain_15.jpg

36フレーム目をクリックして下さい。
blogdezain_16.jpg

画像をクリクしたままドラッグアンドドロップで背景画像の枠外へ横移動させて下さい。
blogdezain_17.jpg

次に枠外へ移動させた画像をもう一度クリックしプロパティパネルのサイズ蘭で高さを10に変更して下さい。画像を修正したら配置位置を確認(たて位置を中央に)。
blogdezain_18.jpg

42フレムをクリックして同じようにサイズを修正して下さい。
blogdezain_19.jpg

36フレームをクリック、さらに右クリックすると窓が開きますので「モーショントイーンの作成」を選択。次に42フレームをクリックし、さらに右クリックしもう一つ「モーショントイーン」を作成します。
タイムライン上に36フレームから42フレームを通し60フレームまで2つの
モーショントイーンが作成され、黒い線が出来ました。
少し格好よくするために60フレーム目の文字台紙を透明にしましょう。60フレーム目をクリック、次に青い大きな文字台紙をクリック、次にプロパティパネルの
「カラー」のプルダウンメニューから「アルファ」を選択しその右のアルファー値を「50%」に。文字台紙がかなり透明になり背景画像が透けて見えるように変更されました。ここで一旦保存。
blogdezain_20.jpg

一度再生させて見ましょう。再生はメニューバーの▶をクリック。
左から細い台紙が進入してきて形状が大きくなり、透明にアニメーションするのが確認出来ます。

次回はアンメーションするテキスト(WELCOME TO MY WEBSITE)を作ります。
【2008/02/27 11:42】 | Flash | トラックバック(0) | コメント(0) | page top↑
さあ試しに作ってみましょう
では、作品作りをはじめましょう。

< 作品作り 1 >記事が大きくなりますので適当なところでページを
分けて有ります。画像をクリックしても表示サイズは大きくなりませんので、、。

図はコマとレーヤー(透明台紙)の対応図です。この図に従ってレーヤーのフレーム
(置き場所)に部品を設置してゆきます。

taiouzu-1.jpg


<部品1、背景画像の作成>
Flashを起動させ、新規作成をクリック。デフォルト(既定値)で仮のステージと一行だけの
タイムラインが出来ます。真っ白なステージをクリックして「ファイルメニュー」の
「読み込み」⇒「ステージに読み込み」からあなたのデジカメ画像をステージ上に
読み込みます。ライブラリーパネルで読み込んだ画像をダブルクリックしてステージ上に
取り出し、中央配置させサイズを400×190に修正してください。次に作成ステージに
戻り、画像を右クリックして「シンボルに変換」、タイプはグラフィックシンボル名は「背景1」
と名づけます。次にステージの画像を一旦削除します。

blogdezain_4.png


<レイヤー1、背景レイヤーの作成と部品の配置>
レイヤー名を「背景1」と名づけます。フレーム数を120フレームに増やします。
背景1の第1フレーム目をクリックし右のライブラリーパネルから背景1のシンボル画像を
ドラッグアンドドロップでステージ上に配置します。配置した画像は中央に位置修正して
下さい。
次にメニューバーの「修正」⇒「ドキュメント」を開き「サイズ」を400×190に変更します。
背景色はお好みに。するとステージサイズがデフォルトサイズから変更された為
中心位置が変わったため既に配置されている「背景1」が中央配置から外れてしまいました。
もう一度中央に正しく配置し直してください。(大切)

ここで一旦ファイルを保存して下さい。ファイル名は適当に。(半角英数字で)

(注)作成作業中に突然プログラムが強制終了される事が起きます。
特に初めは不慣れから異常な操作をしたりして、かなり頻繁に発生します。汗水流して
作成中の作品が一瞬にして無くなってしまいます。、保存はこまめにされる事をお勧めします。

(注)レーヤー名とシンボル名はダブっても構いませんが同じ
シンボル名同士やフレーム名では同一名は使えません。

blogdezain_5.png


<背景画像のアニメーション設定>
コマとレイヤーの対応図に従って36フレーム目をクリックしてキーフレームを設置して
下さい。カーソルは36フレーム目に移動してしまいますので再度1フレーム目をクリックし
次にステージ上の画像をクリックして下さい。。次に画面下部の「プロパテー」の「カラー」と
表示されているプルダウンメニューから「アルファ(透明度)」を選択し右の値を30%に
変更して下さい。

画像に透明度が設定されました。
もう一度第1フレーム目をクリックし、次にプロパテーパネルの「トイーン」のプルダウン
メニューから「モーション」を選択してください。レイヤーの第1フレーム目から第36フレーム
目まで黒い線が出来ました。透明度が30から100まで変化する「トイーン」が作られ
ました。

(注)透明度の%は画像そのものの透明度ではなく画像を操作するマス
ク(覆い)の透明度です。

メニューバーの下にある再生印▶をクリックしてみて下さい。ステージの画像が
徐々に変化してゆきます。アルファ(透明)値やキーフレームとキーフレームの間隔を
変えると変化の度合いが変わります。また、着色、明るさなども試してみて下さい。

「詳細」似ついてはは後半で解説いたします。

blogdezain_6.png


次回はレーヤー2で半透明の台紙を作成します、、。
【2008/02/21 15:33】 | Flash | トラックバック(0) | コメント(0) | page top↑
シニアと団塊の仲間の為のFlash超入門(3)
<Flashアニメーションの仕組み >

「さあ少し勉強してみようか」と思い参考書についているCDからサンプルファイル
(fra)を開き、予め用意されている部品を使って、参考書通りに半角英数字や文字を
入力し実行させてみると誤りが無い限り見事にFlashのアニメが実現されます。

しかし、各章に設定されている「応用問題」もこなし、一通り読み終えた後に自分の
オリジナルに挑んだとたん行き詰まることが必ず出てきます。

どこか一つの「要素」に関する理解が間違っていたりするとフラシュアニメは実現され
ず、試行錯誤するうちに混乱の迷路に迷い込む羽目になります。

新しい物を習得する過程は失敗と学習の繰り返しですから学習には誤りはつきものです
しかし、予め誤る回数が少なく学習の時間が短いに越した事はありません。

前回も書きましたがこの種の参考書には意図的に(?)と思えるほど肝心なことが説明
されていません。著者が想定する購読者の能力を少し高めに考えているからと善意にば
かり解釈していられません。

また、大部分の発行元はフラッシュアニメの制作を生業としているため参考書は「広告
媒体」の役割を使命としているからなのでしょう。ネットのフラッシュ関連サイトも
ご多分にもれません。参考書の数はどんどん増えてゆく事となります。出版社はどこも
売り上げ増大と大喜びでしょう。

混乱と迷路をさ迷いながら得た結論は、まず手始めに「要素」の少ない作品を作り。
幾つかの「要素」を習得、次にその作品に新たな「要素」を付け加わえ、作品を段階
的に複雑化してゆくと言う手法です。

以前にも書きましたが、このブログは必ず参考書の副読本としてお読み下さい。

<フラッシュで使う「部品」と「部品を組む設計図」>

「部品」の種類は、画像、音(サウンド)、動作(トゥイーン)、実効命令などです。

 <画像> のファイルタイプはGIF,JPEG,PNGのうちPNGは耳慣れないかもしれません。
 <音>  のファイルタイプにはWEV,MP3、AIFFのうちMP3をよく使います。

 <動作> には形状変化、位置変化、色彩変化、音量変化などがあります。

 <実効命令記述> ActionScriptと言うフラッシュ専用プログラムを使います。

 習得順位は画像⇒動作⇒音⇒実行命令書の順が良いと思います。次に

 「部品を組む設計図」は、

  1、目的とするアニメの<簡単な絵>を書きます。
  2、幾つの場面に分けるかを決め<コマ割り>をします。
  3、さらに<一つのコマ>に配置する<場面>を<幾つの絵に分割>するか決めます。
  4、画像の形状変化、色彩変化、移動位置変化、透明度変化、効果音を仮に決めます。
  5、場面の大きさ(ピクセルサイズ)を決めます。
  6、背景色を決めます。
  7、設計されたこれらの「要素」単位に名前をつけておくとあとあと大変便利です。

細かくなるに従ってさらに内容は増えて行きますが。ここではこれ以上は省略します。
また、文章を読まれただけでは具体的なイメージがはっきりしないと思いますので後日
(3月〜ごろから?)別途詳しい図を(WEB上に)掲載します。

blogdezain_3.jpg


<参考書に収録されているサンプル作品の構造>

  最初にステージに表示されている画像Aとそのレイヤー群とタイムライン。
  画像Aをダブルクリックすると開く画像Bとそのレイヤー群とタイムライン。
  画像Bをダブルクリックすると開く画像Cとそのレイヤー群とタイムライン。

<混乱の主は「要素」「部品」の入れ子構造>

サンプル作品は必ず入れ子構造(ネストとも言います)で造られています。この入れ子は
必要ならば何層も造る事が出来ます。初めてフラッシュを学習する際に起きる混乱の
原因はこの入れ子構造に出会い、学習者が操作していると思っている「部品」が、
見た目は同じでも実は属性の変わった違う「部品」を呼び出していたり、別の階層へ
移動してしまったりする事です

外から取り込んだJPEG画像やBMP画像を使って作品を制作している途中でシンボル化
した画像の色彩を少し手直ししようとダブルクリックをして目的画像を呼び出し修正を試みて
も修正が出来ないことや、シンボル化された画像から作られ、複数個配置されているインス
タンスがすべて修正されてしまう、などの経験は一度は味わう混乱です。

学習者はこうした入れ子構造の作品作りが「作品はこうして造らなければならないもの」と
理解してしまい次第に億劫になって来ます。
この仕組み(入れ子関係)は実効命令記述(ActionScript)を作成する時には重要な意味
を持ってきます。ActionScriptでプログラムを書く際に実効命令記述が書かれている
「部品」が、実行させたい他の「部品」へ辿り着くルート(道筋)を指定してやる場合に入れ
子関係などを指定してやらなければならないからです。

参考書にはActionScriptでのルート指定の考え方が説明されていて、絶対指定と相対指
定に ついて詳細に書かれていますが原則をいくら読んでみても理解が進みません。
その原因の一つは「部品」の全体に於ける位置と入れ子構造の関係が理解されtいない為
と思います。

 「入れ子構造」は重要なものです。実は「部品」自体も入れ子構造で造られています。
たとえば外部から読み込んだオリジナル画像は読み込んだ時点でのファイル形式(JPEG
とかBMP、PNGなど)を持っていますがこれらをFlashの中で使うにはシンボル化します。
さらにそのシンボル化されたものを実際に配置する時にはインスタンスと言うコピーを使い
ます。この関係は入れ子関係です。
   
ご承知の方もおいでと思いますが、コンピューターで組まれるプログラムには必ず<サブ
ルーチン>と言う使いまわしのきく子供のプログラムを予め沢山用意しています。
システム設計者はコンピューターに作業させたい処理を幾つかの業務種にグループ分けし
必要に応じて単位業務種をさらに複数の仕事に分割し処理の流れを設計します。
このそれぞれ分割、独立し、決まった処理をするプログラムがサブルーチンと言われる
プログラム群です。枝分かれ、判断、サブルーチンの呼び出し、都度の処理と言う繰り返
しの処理を可能とします。

膨大な処理を人の記憶や思い付きだけでは正しいシステムをくみ上げる事は出来ません
のでシステム構築に当たっては、処理の全体を見渡せる流れ図(フローチャート)をつくり
ます

Flashもこうしたコンピューター処理の基本に乗って考え作られていますので、各部品、させ
たい作業の一覧表を作成しそれぞれがレーヤ(透明台紙)と連結された「展開図」をフロー
チャートのかわりとして予め準備しておくと作品作りがはかどります。

ここでは階層的な入れ子構造から一旦おさらばし、ベタで制作を進めてゆきます。入れ子
関係の無い作品から始める事で煩わしい混乱から開放されることでしょう。

 次回はいよいよ作品作りに入ります。 
【2008/02/10 04:45】 | Flash | トラックバック(0) | コメント(3) | page top↑
シニアと団塊の仲間のためのFlash超入門(2)
「解説書、参考書を選ぶ」

おことわり:以後の内容は私の経験からの感想です。決してこれがベストであるとか
こうした方が良いと言うことでは有りません。閲覧者の皆様の「腕前」に応じて咀嚼
して頂ければ、、。

< フラシュとの出会い >

2003年11月にマイクロソフトのフロントページで四苦八苦しながらタグを打ち込み
ウエブサイト(爺さんのミディサロン)を公開しました。

一年くらい経ち、他のサイトを見て「画像がゆっくり変わる」ものに興味を持ちました。
フラッシュ( Flash )というアニメーション作成ソフトで作られている事を知りました。

フラッシュは1996年にアメリカで発売され現在はバージョン9まで進化おり、版権
はマクロメディアからアドビシステムに移っています。

遠い昔話で恐縮ですが、あのライブドア飛躍のきっかけはホリエモンが小室哲也の
サイトにフラッシュを使い「かっこ良いウエブ表現でサイトを構築する会社」と評判に
なった事とか。

Flashを調べに近くの書店に行きました。何種類かの中から比較的文字の大きな
一冊を選びました。お試し版CDソフトも付いていました。(標準デザイン講座)

最初から最後まで一通り読んでみてもほとんどぴんと来ません。これは、書籍選び
を間違えたのでは?と思い結局一冊又一冊と参考書が増えて行きました。

現在Flashの参考書は9冊にもなってしまいました。そしてたどり着いたことは
「何れの参考書でも一冊で自分の疑問があらかた解決される物は無い」と言う事
です。参考書はヒントを提供してくれる物と考えるべきでしょう。

< Flash習得の近道 >

Flashアニメ制作の興味は一つ作品を作るたびに上って行きますので経験が進むに
従い必要になってくる技術の程度もより詳細になります。

どの参考書もFlashの基本的な要素は一通り触れられていて、基本的「ツール:
道具」の解説と使い方を演習的に進める方法をとっています。

Flash習得の早道は「基本要素:ツールの理解」と「作り方:手順」を分けて学習
する方が混乱無く進むでしょう。

Flashでの作品つくりはキャンパスに絵を描くように10人10色となります。ただ、
参考書が説明するように「網羅的にある程度内容をマスターしてから作る」と言う
態度は必ずしも必要無いと思います。(まず作ってみることが大切です)

簡単な作品をつくりその作品を修正発展させながら次第に複雑な物を仕上げ
ると言う進み方がFlashを早くマスターする秘訣と思います。とりわけ手作業で作る
アニメーション画像はドロー系のベクター画像作成の技術を必要とするためかなり
上達しないと良い素材は作る事が出来ません。

< 自分に無理の無いものを選ぶ >

参考書をパラパラとめくってみると、内容構成のページ数でおおよそ4種類の
タイプに分類できます。

1、写真画像の作品に関するページが多いもの(写真スライドショーや企業向け
会社案内など)
2、手書き画像作品に関するページが多いもの(漫画風、原画3〜5色素材での
オリジナル画像を多用)
3、実行命令記述書(ActionScript)に関するページが多いもの(半角英数字の
実効命令文の多いもの)
4、リファレンス(疑問に応じて辞書引き出来るもの)

私は1と4を組み合わせて使用しました。ある程度Flashが理解できたら2に進み
最後に3と言う順序になりました。(参考書で使用されているFlashのバージョン
は新しいほど良いですがバージョン.6以前のものでも勉強する上では問題はあり
ません)

< FlashをWEBサイトに乗せる為には >

始めてFlashでバナーをつくりいざ自分のサイトに載せようとしましたがうまく行きま
せんでした。
その時使っていたWEB作成用のソフトはマイクロソフト社のフロントページでした。
多分自分の技量不足が原因と思われます。止むを得ずIBMのホームページビルダ
ーに乗り換えました。
ビルダーにはFlashで作成されるSWFファイルを挿入する機能が揃っていた為です。
以来ビルダーは必須のツールとなっています。

私が購入した参考書のリストは以下の通りです。(上から購入時期順になります)

A.標準デザイン講座(FlashMX)
          株式会社 翔泳社 320ページ  2700円

B.FlashMX独習ナビ      
          株式会社 インプレス      300ページ  2800円
 
C.FlashMX2004ポケットリファレンス
          株式会社 技術評論社     400ページ  1980円

D.速習WEBデザインFlashMX 
          株式会社 技術評論社      270ページ  2480円

E.速習WEBテクニックFlashMX
          株式会社 技術評論社 400ページ  2880円

F.Flashモーションデザインハンドブック
          株式会社 エクスメディア    240ページ  1980円

G.Flashモーションデザイン辞典
          株式会社 技術評論社      160ページ  1880円

H.FlashMXActionScriptWEBインターフェース編
          株式会社 秀和システム    350ページ  2500円

I.サンプルで学ぶActionScript
          株式会社 エクスメディア    355ページ  2800円

こんなに多くは必要ありません。Cは必ず用意されるほうが良いと思います。
なお、このブログは予めFlashの参考書をお読みになった経験のある方、もしくは
現在読んでおられる方を想定しております。

Flash参考書


次回はFlashアニメーションの基本構造(概念)と関連知識です。
alhambra2.mid
【2008/01/29 18:22】 | Flash | トラックバック(0) | コメント(0) | page top↑
| ホーム | 次ページ