Lesson 0 Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5  

  Lesson 1 最終更新 2001.7.13
 1−1 作成前の準備

101

「FLASH5」を起動するまえに、PCのハードディスクの中に「FLASH関係ファイルを保存するフォルダ」をまず作成してください。
場所はどこでも構いません。名前も何でも構いませんが、一応「FlashFiles」としてください。
これからも今後もFLASHで作ったファイルはすべてこのフォルダで一括管理するということにしておけば、ファイルが増えてきてもあとで迷うことはありません。
※ファイルが増え、さらに分割整理する必要がでてきても、このフォルダの中に新しいフォルダを作成してください。

102

「FLASH5」を起動させてください。
最初の画面がどのような状態か? 設定によって異なってきます。
本体のベース画面以外に、いろいろな設定のための「パネル」というものが何種類か重なって表示されている場合があります。
図01:起動後の画面例 参照(左の文字をクリックすれば見られます「以下同じ」)
ひとつひとつドラッグして位置を移動できますが、当面は邪魔になりますので各「パネル」右上の「×」をクリックして画面上から消してください。
「パネル」を一括して消す場合は、メニューバーウインドウ→すべてのパネルを閉じるをクリック。

103

すべての「パネル」を閉じた状態で以下のような画面になっているかご確認をお願いします

図02:制作画面例

これらの配置は、使う方の好みに応じて自由に変更できるようになっていますが、
これからの解説は、バーやツールなどがこの状態と仮定して進めていきますので、異なる場合は別途「Q&A掲示板」でお尋ねください。
各ツール等の設定方法をお知らせします。
上から順に「@タイトルバー」「Aメニューバー」「Bツールバー」
左端のお絵かきツール群を「Cツールボックス」、”レイヤー1”と反転しているのが「Dレイヤー」
そこから右に延びているのが各レイヤー(今は1つですが…)の「Eタイムライン」
「タイムライン」の中の1コマ、1コマを「Fフレーム」 といい、
左から順に1フレーム、2フレーム、3フレーム・・・というように番号で呼びます。
上の5単位の数字は、フレーム番号の目安です。
フレームの上にある赤枠が「G再生ヘッド」というものです。
下中央の一番大きな空間を「Hステージ」といい
、ここにFLASHムービーで表現する図形や文字などを書き込んでいきます。
「再生ヘッド」の示すフレームの画像が「ステージ」に表示されているという関係にありますが、
これらは”Lesson2”で詳しく説明しますので、今は各パーツの位置と名称だけ確認しておいていただければ充分です。

 1−2 ここからが本番!(新規作成のときはファイル名を付けてまず保存)

104

最初にFLASHを起動したときはいつでも、上の図02のように「タイトルバー」に”Flash-[ムービー1]”と表示されています。
この”[ムービー1]”というのが初期のファイル名です。
今、この状態で[ムービー1]というファイルが開いていて、内容は「ステージ」に表示されているように、黒の背景のムービー画面があるだけです。
毎回この状態でファイルを作成していくと、いつも[ムービー1]という名のファイルばかり作成することになりますので、保存すると先のファイルに上書きされ、以前の内容が消えてしまう危険があります。
そこで、新しくファイルを作成するときは、まずファイル名をきっちり付けて、最初に保存してください。

105

ファイルに新しく名前を付けて保存するには、メニューバーファイル→名前を付けて保存をクリック。
「名前を付けて保存」ダイヤログボックスがでてきますので、「保存する場所」に先ほど(上の”101”)作成した「FlashFiles」フォルダを選択し、「ファイル名」を「ムービー1.fla」からここでは一先ず「test01.fla」に書替えてください。
※ファイル名は必ず「半角英数文字」です。
「保存」をクリックすると、ダイヤログボックスが消え、「タイトルバー」のファイル名が”Flash-[test01]” となったのを確認してください。
これで目の前にある画面は「test01.fla」というファイルを制作する画面に変ったということです。
※ファイルの拡張子「.fla」 は「FLASHムービーの制作ファイル」という意味です。
※他に「.swf」というファイルがありますが、これについては”Lesson5”で詳しく説明します。
 1−3 FLASH画像(ムービー)の大きさと背景色を決める

106

正式なファイル名「test01.fla」を付けたので、これからその中味を作成していきます。
ステージに黒の四角がありますが、これがFLASHムービーの今の全体像です。
初期値は「500×350ピクセル」の大きさです。
これは、GIF画像やJPG画像でいう縦横幅に相当するもので、FLASHムービーをHTMLファイルに埋め込んで表示再生される大きさサイズです。
ブラウザの画面一杯に動き回るFLASH画像では例えば「700×500ピクセル」というサイズに設定したり、タイトルロゴとしてページの一部に使用するときは「300×90ピクセル」などと自由に設定することができます。

※ムービー(黒の四角部分)と全体のステージとの関係。
ステージは画面にあらわれている部分だけでなく無限の広がりを持っていて、そのどの部分にも図形や文字を描くことができます。
ただし、HTMLファイルの中でFLASH画像として再生され目に見えるのはムービーの範囲内だけです。
あるキャラクタが画面の外から中に入ってくるという場合、キャラクタは当初、ムービーの外のステージに描かれています。
※制作作業の都合により、ステージの縮尺を変更することができます。
画面左下の「%表示」された部分の右「▼」をクリックして、好みの縮尺に変更してください。
「100%」が実際にHTMLファイルで再生したときに見える大きさです。
大きなサイズのムービーの場合、全体像をみるには「ステージ全体」、小さな図形を描くときは拡大して作業がしやすいようにします。
※注:下のムービーの大きさと混同しないようにしてくださいね(^^g/~~
ステージの縮尺は作成作業用のためだけの一時的、相対的な大きさ
「下のムービーの大きさは、実際に再生するときの絶対的な大きさ

107

FLASHムービーの大きさを設定するには、メニューバー修正→ムービーをクリック。
「ムービープロパティ」ダイヤログボックスが出てきます。
上から2段目に「サイズ」という項目がありますから、ここで縦横幅を書替えます。
数値の上にマウスを置いてクリックするとカーソルがあらわれますので、「Delキー」又は「BackSpaceキー」を使って消し、直接キー入力してください。
これからサンプル画像を作成しますので、ここでは「450×250ピクセル」に書替えてください。
※数値は必ず「半角英数文字」です。

次にひとつおいて下の「背景」という項目ですが、初期値は「黒」です。
右下の「小さな▼」を押し込むとカラーパレットがでてきます。
ここで好みの色をドラッグしながら選択し、マウスボタンを離すと、背景色を変更することができます。
試しにいずれかの色を選択して背景色を変更してみてください。
「黒の窓」が「選択した色」に変ります。
「OK」をクリックすると、ダイヤログボックスが消え、ステージ上のムービー(四角)の大きさが「450×250ピクセル」に変るとともに色も変化します。
サンプルでは初期値の「黒」を使いますので、もう一度「修正」→「ムービー」で「背景」を黒に設定しなおし、「OK」をクリックしておいてください。
※この操作は制作途中でもいつでも可能です。
※「ムービープロパティ」でのそれ以外の項目については、特別な場合を除き、触る必要はありません。、

 1−4 図形を描く(T)

108

新規作成にあたっては、まずファイルに名前を付け、次にムービーの大きさなどを設定しますが、それから先は、作成しようとする中味によって順序は様々です。
ここではサンプル画像の作成を目標としていますので、「図形を描く」ことから入ります。
図形を描く道具(ツール)は、左端の「ツールボックス」の中にあります。
サンプル画像にあるタイトルのバック、ボタンなどのバックのグレーの「四角の図形」、タイトルのボールとしての「丸の図形」を描きながら勉強していきます。

109

四角の図形を描く」のは、ツールボックスの上から4段目右「矩形ツール」をクリック。
マウスをステージに移動するとカーソルの形が「+」になります。
四角や丸の図形には「周囲の線」と「中の塗り」の2つの要素があります。
ツールボックスのさらに下に「カラー」という文字があって、
その下の「鉛筆」の右が「線のカラー」指定、その下「バケツ」の右が「塗りのカラー」指定です。
それぞれの「小さな▼」を押し込み、適当に色を選択、マウスボタンを離すとその色が指定されます。
練習ですから、いろいろな色を指定して試してください。
次に「+カーソル」をムービーの適当な位置に移動、左上から右下にかけてドラッグしてください。
マウスボタンを離した時点で四角の図形が描かれます。

110

今は適当に描きましたが、実際の作業では描いたあと何度も修正することが多いのです。
修正も「線」と「塗り」の2つの要素を個別に行います。
線の修正」は、「ツールボックス」の上から6段目左「インクボトルツール」をクリックして、「カラー」の中の「鉛筆(線のカラー)」の色を選択しなおします。
そのまま「四角の図形」の上でクリックすると線の色が変ります。
塗りの修正」は、「インクボトルツール」の右「バケツツール」をクリックして、「カラー」の中の「バケツ(塗りのカラー)」の色を選択しなおします。
そのまま「四角の図形」の上でクリックすると塗りの色が変ります。

111

これは単純な図形の修正方法ですが、例えばこの例で、線でも上辺の線と左辺の線だけに限定して色を変更したい、という場合があります。
このように部分的に変更を加えたいときは、「変更対象を選択」してから「設定を変更」という方法を用います。
まず「(変更対象の)選択の方法」ですが、「ツールボックス」の一番上、左「(黒)矢印ツール」 をクリックします。
カーソルを目的の上辺の線上に移動すると、カーソル右下の「□マーク」が「半曲線マーク」に変るところがありますので、そこでクリックします。
すると、上辺の線が「破線状態」に変化します。これが「その部分が選択された状態」です。
次に「カラー」の中の「ペン(線のカラー)」で色を変更します。
選択した部分だけが変更されます。
「塗り」部分も同様の方法が使えます。
「(黒)矢印ツール」をクリック。
カーソルを塗りの上に移動すると、カーソル右下の「□マーク」が「小さい矢印付き+マーク」に変りますので、そこでクリック。
塗り部分に「網が掛った状態」に変化します。これが「塗りが選択された状態」です。
その状態で「カラー」の中の「バケツ(塗りのカラー)」で色を変更します。
選択された塗り部分の色が変更されます。
ここでは、塗り部分は1箇所ですから実感が沸かないかも知れませんが、複雑な図形で、個々に色を修正するときには便利です。
※「線」や「塗り」の修正は、ケースにより”110の方法”と”111の方法”を上手く使い分けてください。

112

図形の大きさの変更」も基本的には「線」と「塗り」を別々に行うことができます。
ここではまず、線といっても周囲の線すべて(=枠)を一度に変化させてみます。
大きさを変更するときは、上の”111”でおこなったように、「変更すべき対象を選択」してから「変更」します。
「ツールボックス」の一番上、左「(黒)矢印ツール」をクリックして、上辺の線を選択してください。
次に、右辺の線を同様に選択してください。
?確かに右辺の線が選択されましたが、その瞬間、先ほどの上辺の線が元の状態に戻ってしまったはずです。
これでは、枠全体を選択することができませんね(^^g/~~
複数の対象を同時に選択」するには、「Shiftキー」を押しながら選択します。
上辺を選択し、次に「Shiftキー」を押したまま右辺に「(黒)矢印カーソル」を移動してクリックします。
そのまま、下辺、左辺と選択していってください。
同時に4本の線が選択された状態になります。
この状態で、画面左端一番下にある「オプション」の中の一番下の右「伸縮」をクリック。
選択された4本の枠に「小さな□(ハンドル)が8個」あらわれます。
それぞれの「□(ハンドル)」の上にカーソルを移動してください。
場所によりカーソル(矢印)の形が変化します。
それぞれカーソルの矢印の方向にドラッグすると、大きさ、形が変化します。
カーソルが「小さい矢印付き+」のときにドラッグすると、大きさ、形はそのままで位置だけが変化します。
※位置だけの移動なら、選択した状態で、そのままドラッグ又は「キーボードの矢印キー」でもできます。

ここでは線(外枠)だけを選択して、大きさ、形を修正する練習をしていますから、中の塗り部分は置いてきぼりになっています(笑)

113

塗りの大きさを修正するのも同じです。
今、外枠の線が選択され、ハンドルが付いた状態ですから、まずこれを解除します。
選択を解除する方法」は、ステージ上のどこでも構いませんから、図形の無い場所でクリックします。
これで一斉にすべての選択が解除されます。
個別に選択を解除する場合は、「Shiftキー」を押しながら、選択部分をクリックします。

ステージからすべての選択が解除されたら、改めて塗りの上にカーソルを移動してクリック、塗り部分を選択状態にしてください。
線の場合と同様に画面左下の「オプション」の中の一番下右「伸縮」をクリック。
塗り部分に「8個のハンドル」があらわれますので、あとは”112”の方法で、大きさ、形の修正や位置の移動を行ってください。

※「伸縮」の左「回転」をクリックすると「小さい○(ハンドル)が8個」周囲にあらわれます。
それぞれのハンドルにカーソルを移動し、適当にドラッグして変化を確かめてみてください。

114

ここでは「図形を描く」基本の勉強ですから、描いた四角の図形を基にこの他にも様々に変化を試してください。
変化させたものの、その前の状態の方が良かった!というような場合は、操作の「取り消し」ができます。
操作を取り消す方法」は、画面上から3段目「ツールバー」、左から9番目「←(取り消し)」ボタンをクリックします。

クリックする度にひとつずつ以前の状態に戻っていきますから、失敗を恐れる心配はありません!
戻し過ぎたときは、その右「→(やり直し)」をクリックすることで、順々に前に進んできます。
実際にボタンをクリックして、ステージ上の図形の変化を確かめてください。
この「取り消し」「やり直し」操作は、図形に限らずすべての作業で有効ですから、これを知ってれば大胆に挑戦することができますね(*^^*)

115

「取り消し」をクリックし続けると、この場合、図形が消えてなくなり元のムービーだけの状態に戻るはず(設定等によっては完全に戻らない場合もあります)ですが、図形を描き直すのには少々面倒です。
そんな場合は、図形を削除して描きなおします。
図形を削除する」には、「削除すべき図形を選択」して「Delキー」を押します。
個別に選択して削除しても構いませんし、すべて選択して一斉に削除することもできます。
もし、今ステージにある図形が線や塗りでバラバラに分割されていて、手の付けようが無い状態なら・・・
ステージ上のどこでも構いませんから、カーソルを置いて”右クリック”、ショートカットメニューの「すべて選択」をクリックすると、すべての図形が一度に選択されます。
その状態で「Delキー」を押すと完全にステージ上の図形が削除できます。
※適当に四角の図形で遊びましたら、すべての図形を削除して、次のステップに進んでください。

116

上の”112〜115”では、図形の性質をご理解いただくために「線」と「塗り」の大きさ、形を別々に修正しました。
実際には、外枠と中の塗りとは一体の場合が多いので同時に修正します。
方法は、もうおわかりですね(*^^*)
・・・・・・・・
図形の線と塗りを同時に選択して、「オプション」の「伸縮」又は「回転」で大きさ、形を変化させれば良いだけです。
改めて、ステージの「ムービー(黒の背景部分)」の中に四角の図形を適当に描いてください(”109”)。
外枠の「線」と「塗り」を同時に選択してください。
図形の要素を同時に選択する方法は・・・
@ 「(黒)矢印ツール」で”112”のように「Shiftキー」を押しながら個別に選択。
A”115
”後段の、ステージ上で右クリック、ショートカットメニューの「すべて選択」。
をご説明しました。
もうひとつご参考までに図形の選択方法をご説明しておきます。
B「(黒)矢印ツール」を用いて、描いた図形を大きく囲むように、大体でいいですから左上から右下にかけてドラッグします。
 ドラッグした四角の枠に入っている図形がすべて選択されます。
これもよく使う選択方法です。状況に応じて@〜Bの方法を駆使していろいろなものを選択してください。

※「選択」という行為は、FLASHに限らず非常に重要な概念です。
どのようなソフトも「何をどうする!」というのが基本ですから、「何を」を特定する行為が「選択」ということです。
このことを理解していただければ、今後、他のソフトを扱う際にも”感”が働くようになってきます(^^g/~~

117

さて、新しく四角の図形を描いたところで、サンプル画像の作成に取りかかります。
サンプルでの「タイトルのバック図形」は、大きさサイズを「280×210ピクセル」にしています。
これは、ここにあとではめ込む「写真画像の大きさ」です。
塗りの色はグレーで厳密にはカラーコードが”#333333”です。
サンプルを見ると周囲に枠がありますが、周囲の枠に相当する「線」はこの段階では使っていません!
※詳しい説明は”Lesson3”で行いますから、ここでは説明を省略させていただきますm(_ _)m

それでまず、描いた四角の図形から「線」を取り去ります。
おさらいになりますが、「Shiftキー」を押しながら、「(黒)矢印ツール」で周囲の4本の線を選択し、「Delキー」を押します。
「塗り」だけになったところで、「(黒)矢印ツール」で図形をクリックして選択。
画面左端の「ツールボックス」下の「カラー」の中の「バケツ(塗りのカラー)」の「▼」を押し込んだまま、左端、上から2番目の「グレー」にポイントしてください。
上の窓に”#333333”とカラーコードが表示されていますね。
マウスボタンを離すとその色が選択され、ステージの図形の色が”#333333”に修正されます。

118

問題は図形の大きさです。
ここまで、ご説明してきた方法では目分量で大きさや位置を決めていました。
それでも一応は体裁を作ることができますし、作品によってはその方が面白いこともあります。
ここでは、スライドショーの枠ということですから、大きさも位置も、写真との関係でピシっと決めたいところです(笑)
説明を省いてきましたが、このスライドショーを作成するにあたって、まず紙の上で一応の設計をしています。
写真の大きさを「280×210ピクセル」とし、ボタンのバック図形を「115×125ピクセル」、その下のHOMEボタンのバック図形を「115×70ピクセル」。
上下の余白を各々「20ピクセル」として、全体の「ムービーの大きさ」を「450×250ピクセル」とする…などです。
あなたがご自分で独自のムービーをお作りになる際も、是非この設計からはじめられることをお奨めします!
少し話が横道に逸れましたが・・・

119

ピクセル単位で図形の大きさや位置を修正する方法」は、「情報パネル」を使います。
メニューバーウインドウ→パネル→情報をクリックすると「情報パネル」がでてきます。
ステージの中で邪魔にならないよう、パネル上の青いバーをドラッグしてパネルの位置を移動させてください。
左に「W・H」、右に「X・Y」という項目があります。
ここで図形を「(黒)矢印ツール」でクリックして選択してください。
各項目に数字が入ったと思います。選択された図形の現在の数値情報(単位ピクセル)です。
「W」は図形の横幅、「H」は図形の縦幅。
「X」は図形がムービー(黒の背景)の左上を”0”として、右に何ピクセルの位置にあるかというX座標値。
「Y」は図形がムービーの左上を”0”として下に何ピクセルの位置にあるかというY座標値。
「X・Y」のすぐ左の白と黒の点がありますが、黒の点が「左上」にあるときは、「X・Yの値」が図形の左上の位置の座標であることを示し、中央にあるときは、図形の中心点の座標であることを示しています。
白の点をクリックすると黒に変って、「左上」「中心点」を切り替えることができます。
実際にクリックして、「X・Yの値」が変化するのを確認してください。

120

このように「情報パネル」で現在の図形の情報を確認することができますが、
同時にこの「値」を変更してやると、選択されている図形が「値」に従って修正されます。
それぞれの数値の上にマウスを置きクリックすると、カーソルがあらわれますから、「Delキー」又は「BacksSpaceキー」で数値を消し、新しい値を入れます。
「W」を「280」、「H」を「210」とすれば、図形がその大きさに変化します。
※書き込んだ時点では図形が変化しませんが、次の項目をクリックするなど、フィールド(数値を入れる窓)から抜け出たときにその値に変化します。
※数値はいずれの場合も半角英数文字でないと無効になります。
「X・Y座標」位置を「左上」にして「X」を「20」、「Y」を「20」にして、ステージのどこでも構いませんからクリックして、すべてのフィールドから抜け出てください。
これがサンプルでの「タイトルのバック図形」です。

121

次に「ボタンのバック図形」と「HOMEボタンのバック図形」を作ります。
「タイトルのバック図形」と同じように作ればよいのですが、お勉強ですから今度はちょっと違う方法で作成します。
「ツールボックス」の「矩形ツール」をクリック。
「カラー」の中の「ペン(線のカラー)」の「▼」を押し込んだまま、カラーパレット欄外上の右から2番目「四角に斜線の入ったアイコン」をクリック。
これは、矩形でも「線を描かないとき(線なし)」に使用します。
※「バケツ(塗りのカラー)」でも同じアイコンがあります。これは、周囲の線だけ描いて、中の塗りが必要ない(塗りなしの)場合に使用します。

ここでも、「バケツ(塗りのカラー)」は”#333333”を指定してください。
「+カーソル」をムービーに持って行き、実際に描きたい位置に四角図形を2つ、連続で描いてください。
このとき、図形同士が重ならないように注意です。
「(黒)矢印ツール」をクリック、上段の四角図形をクリックして選択。
「情報パネル」の各値をそれぞれ「W=115」「H=125」「X=315」「Y=20」としてください。
下段の四角図形をクリックして選択。
「情報パネル」の各値をそれぞれ「W=115」「H=70」「X=315」「Y=160」として、
ステージの図形のないところでクリックします。
「情報パネル」も右上「×」をクリックして、パネルを閉じてください。


以上で、サンプルの「各バック図形」の完成です。

122

ここで、安全のために、ファイルを上書き保存しておきましょう。
ファイルの「上書き保存」は、画面の上から3段目ツールバーの左から3つ目の「フロッピーアイコン(保存)」をクリックするだけです。
こうしておけば、今後ソフトがフリーズしたり、ご操作などで修正不能になったとしても、一端ファイルを閉じ、改めてファイルを開き直せばこの状態まではいつでも復元できます。
逆に言えば、これ以降、無茶苦茶に遊んでも大丈夫ということですから、いろいろ実験をすることができます(笑)
 1−5 図形を描く(U)・・・レイヤー

123

「ボール」としての丸の図形を作成します。
丸の図形を描く」のは、ツールボックスの上から4段目左の「楕円ツール」をクリック。
四角の場合と同様にマウスをステージに移動するとカーソルの形が「+」になります。
「+カーソル」をムービーの適当な位置に移動、左上から右下にかけてドラッグしてください。
マウスボタンを離した時点で楕円の図形が描かれます。
「正円を描く」ときは、「Shiftキー」を押しながら、ドラッグします。
先ほどの四角の図形の上に、色を変えていろいろな円を実際に描いてみてください。

124

さて、描いた円のどれかひとつ、「矢印ツール」でクリックして選択し、それをドラッグして位置を移動させてみてください。
ちょっと様子が変ではないでしょうか(笑)
円のあった元の位置が、ぽっかり穴が空いていませんか?


図のように、グレー色の四角の図形の中にムービーの背景色(黒)がみえていると思います。
これはこの部分の色が抜け落ちてしまっていることを示しています。
「塗り」の上に「別の色の塗り」を重ねると、重なった下の塗りは、上の塗りに置きかえられてしまいます。
したがって、上の塗りを移動したり削除したときは、下には何も残っていないので空白になってしまいます。

このことは重要なことですから、覚えておいてください。

125

ところがFLASH作品をみると、背景の画像の上に別の画像があって、それが自由に動いたりもしています!
種明かしは「レイヤー」の活用です。
「レイヤー」とは・・・
透明なシートに四角の図形が描かれている状態をご想像ください。
もう1枚、別の透明なシートを持ってきて、それに丸の図形を描きます。
2枚のシートを重ね合わせて、上から眺めると、1枚のキャンバスに四角の図形と丸の図形が描かれているように見えます。
この透明なシートに相当するのが「レイヤー」です。

今”123
〜124”で行ったことは、1枚のレイヤー(透明シート)の上に絵の具で四角の図形を描き、さらにその上に丸の図形を描いたのです。
そして、丸の部分を消しゴムで消したら、下の四角の色も消えてしまったということです。
この方法は、特に図形を切りぬくのが目的の場合は別として、避けた方が懸命です。

この場合、丸の画像は、別のレイヤーに描いた方が良さそうです(*^^*)

126

ステージ上の図形が無茶苦茶になりましたので、やり直しましょう!
ツールバー「←(取り消し)」を何度もクリックして、元の四角だけの状態に戻っても構いませんし、
先ほど「上書き保存」していますので、一端、このファイルを閉じて、改めてファイルを開いても結構です。
ファイルの閉じ方」は、上から2段目メニューバーの右端「×(閉じる)」をクリックします。
※一番上のタイトルバーの「×(閉じる)」は、FLASHソフトそのものを終了させる場合です。

メニューバーの「×(閉じる)」をクリックすると、「test01.flaへの変更を保存しますか?」と聞いてきますが、このようなやり直しをする場合には、間違っても「はい」をクリックしないでください。
「はい」をクリックすると、この無茶苦茶の状態が上書き保存されてしまいます(爆)
必ず「いいえ」をクリックです。
ファイルの開き方」は、上から3段目ツールバーの左から2つ目「フォルダアイコン(開く)」をクリックします。
「開く」ダイヤログボックスで「ファイルの場所」を指定し、該当ファイル(test01.fla)をクリックして、「開く」をクリックします。
”121”の状態のファイルが開きます。

127

画面の「レイヤー1」というところに注目してください。
これまで、描いてきた透明シートは、この「レイヤー1」 です。
新しく「レイヤーの追加」をするときは、左図の赤丸内のアイコンをクリックします。
すると「レイヤー1」の上に「レイヤー2」が作成されます。
反転しているレイヤーが「書き込み対象」になっているレイヤーです。
「レイヤー名」のところをクリックすると反転しますので、随時「書き込み対象レイヤー」を切り替えることができます。
レイヤー名の右横のフレームをみてください。
「レイヤー1」には「●」がありますが、「レイヤー2」には何もありません。
「●」は図形や画像が描かれているというマークです。
何もないのは、何も描かれていないという意味です。
「レイヤー2」をクリックして反転させたうえで、ステージの中に”123”と同じように、丸の図形を描いてください。
「レイヤー2」の1フレームにも、図形が描かれたマークとして「●」が入ったのが確認できます。
「(黒)矢印ツール」で丸の図形をクリックして選択、それをドラッグして移動させてみてください。
周囲の線は取り残されたかも知れませんが、移動のあとには、四角の図形の色も抜け落ちずそのままになっていることが確認できるはずです。
別の透明シートに描かれた証拠です。

128

これで安心して、図形の上に図形を重ねてもレイヤー(透明シート)が異なればお互いの影響を受けないと思ったら大間違いです!
”127”では、丸の図形を選択するのに「(黒)矢印ツール」で直接クリックしました。
図形選択の他の方法(”116”)ではどうでしょうか?
「(黒)矢印ツール」で、丸の図形を大きく囲むように左上から右下にかけて、「線」と「塗り」を同時に選択しようとドラッグしてみてください。
「レイヤー2」の”丸”部分だけでなく、「レイヤー1」の四角の一部まで網がかかり「選択状態」になったでしょう。
ここで「Delキー」を押してください。
「レイヤー1」の四角の図形の一部までも削除されてしまいました。
レイヤーの数が増えてくると、このようなミスは慣れている方でもよくあります。
(ここで、ツールバー「←(取り消し)」を2回クリックして、削除前の状態に戻してください。)
こうしたミスを防ぐには、関係のないレイヤーを書き込み禁止にします。
特定の「レイヤーを書き込み禁止にする」には、レイヤー名の右にある「鍵アイコン」の列の「・」をクリックします。
すると、「・」が「鍵アイコン」に変り「レイヤーがロックされた状態」になります。
「レイヤー1」をロック状態にして、先ほどのように「(黒)矢印ツール」で”丸”の図形を大きく囲んでください。
四角の図形は何の影響も受けません。
レイヤーのロックを解除する」には、もう一度「鍵アイコン」をクリックして「・」に戻すだけです。
レイヤーを扱うときは、面倒でも「必要のないレイヤーにはロックする癖」をつけてください。

129

何らかの理由でレイヤーが不用になったときは、「レイヤーを削除」することができます。
「レイヤーを削除」するには、 不用なレイヤーのレイヤー名をクリックして反転させ、上の”127”の図で、青丸内のアイコンをクリックします。
「レイヤー2」を反転させ、青丸内のアイコンで削除してください。
そしてもう一度、赤丸内のアイコンをクリックして、新しくレイヤーを作成してください。
「レイヤー3」という名前の新しいレイヤーができます。
一度作成して、削除したレイヤー番号は欠番になります。
ですから、このレイヤー名にはあまり意味がありません。
今はレイヤーが2枚ですから、どのレイヤーに何が入っているか解かりますが、これが10枚にもなると、どこに何があるのかわからなくなります。
そこで、あとで自分がわかるように、レイヤーに任意に名前を付けることができます。
レイヤーに名前を付ける」には、レイヤー名をダブルクリックします。
名前の書き込み状態になりますから、「Delキー」で従来の名前を消し、キーボードから任意の名前を入力して「Enter(Return)キー」を押します。
このレイヤー名は、日本語でも構いません。わかり易い名前にしてください。
ここでは、「レイヤー1」を「背景」、「レイヤー3」を「ボール」という名前に変更してください。

130

「背景レイヤー」をロック(”128”)し、「ボールレイヤー」をクリックして反転、書き込み対象レイヤーにしてください。
画面左端の「ツールボックス」で「楕円ツール」をクリック。
「カラー」の中の「ペン(線のカラー
)」で「線なし」に設定(”121”)、「バケツ(塗りのカラー)」を適当に指定してください。
「タイトルのバック図形」の中に、サンプルにあるようなボールの大きさ(一番大きいとき)の正円(”123”)を描いてください。
位置も大きさもこの場合は、目分量で結構です。
もし、きっちり数値で指定したいと思われるなら「情報パネル(”119”)」を使ってください。

 1−6 図形を描く(V)・・・グラデーション

131

今描いたのは只の”円”で、とても”球”には見えません(笑)
”球”のように見せるには、塗りを「グラデーション」にします。
塗りを「グラデーション」にするには、「塗りパネル」を使います。
メニューバーウインドウ→パネル→塗りをクリックすると「塗りパネル」がでてきます。
フィールド(テキストの窓)に「カラー」という文字がありますが、その右端の「▼」をクリック。
その中の「放射状グラデーション」をクリック。


このような「グラデーション」パネルになります。
※右のカラーパレットは最初の画面では、でていません!

ここで「ツールボックス」の上から6段目右「バケツツール」をクリックして、”円の図形”の中でクリックしてください。
クリックする場所を微妙にずらせながらクリックすると、その度にグラデーションの様子が変ります。
初期の設定は「白黒」のグラデーションです。
図中、横長のグラデーション見本は、左が中心、右が外側の色です。
その下にぶら下がっている@、Aのバーの中は、その位置の色を示しています。
@をクリックするとBの中が@の色になります。Bの右下の「小さい▼」を押し込むと図のようなカラーパレットがあらわれますので、ここで選択した色が@に反映されます。
Aの場合も同様です。
また@、Aのバーは左右にドラッグして位置を移動することができます。
色を変え、バーの位置を様々に移動させてグラデーションの変化をお楽しみください。
そして「バケツツール」を用いて”円の図形”の中でクリックして、より球体らしい形に仕上げてください。

サンプルでは、@が”#FFFFFF”の白、Aが”#003300”の濃い緑で、Aの位置がやや左よりです。

132

”ボール”の図形が完成しましたら、「塗りパネル」右上「×」をクリックして閉じてください。
ここでも一先ず「上書き保存(”122”)」し、あとは「線状グラディエーション」なども練習してください。

 1−7 文字を描く

133

タイトルの「花のスライドショー」という文字を描きます。
この場合も、他の図形とは別のレイヤーに描きますので、新しくレイヤーを作成してください。
そのとき「ボールレイヤー」の上に新しいレイヤーを作ります。
レイヤーは反転したレイヤーのひとつ上にできますので、「ボールレイヤー」をクリックして反転させ、”127”の図の赤丸内のアイコンをクリックします。
レイヤー名を変更して「タイトル」としてください(”129”)。
「背景レイヤー」と「ボールレイヤー」をロック(”128”)し、「タイトルレイヤー」をクリック反転させて「書き込み対象レイヤー」にします。

134

文字を描く」ときは、まずメニューバーウインドウ→パネル→文字をクリックして「文字パネル」をだします。
「文字パネル」でフォント、大きさ、色などを設定します。
次に「ツールボックス」の上から3段目右「Aテキストツール」をクリック。
マウスをステージに移動するとカーソルの形が「+A」になります。
「+Aカーソル」をムービーの適当な位置でクリックすると、テキストフィールドがあらわれて文字入力状態になります。
ここで、キーボードから文字を入力してください。
一応の入力ができれば、「(黒)矢印ツール」をクリック。
文字の周囲が青線で囲まれます。これが「文字が選択された状態」です。
選択を解除する」ときは、図形の場合と同様、文字の無いところでクリックすると青線が消え解除された状態になります。
再び選択するときは、文字の上でクリックしてください。

135

文字を修正する方法」として、文字の「文章そのもの」の場合は、文字をダブルクリックします。
テキストフィールドがあらわれて文字入力状態になりますから、キーボードで修正入力してください。
文字フォント、大きさ、色等」の場合は、文字をクリックして選択状態にします。
その状態で「文字パネル」の各項目を修正します。
また大きさに限っては、図形の場合と同様、選択された状態で画面左下の「オプション」の「伸縮」「回転」を利用することができます。

サンプルでは、「有澤楷書」「33ポイント」「白(”#FFFFFF”)」「AV(文字間隔)=−7」としています。

文字が完成すれば「文字パネル」右上「×」をクリックしてパネルを閉じ、上書き保存してください。

136

”Lesson1”の最後にレイヤーに関してもうひとつ重要なことを記しておきます。
今 、下から順に「背景レイヤー」「ボールレイヤー」「タイトルレイヤー」と重なっていますが、これの重なり順序には意味があります。
そして、この順序はいつでも並べ替えができます。
レイヤーの順序を入れ替える」には、レイヤー名のところをクリックして反転させ、それをドラッグして上下に移動させます。
試しに「背景レイヤー」をドラッグして、一番上の「タイトルレイヤー」の上に持って行ってください。
今まで見えていた「ボール」や「タイトル文字」が「バック図形」に遮られて見えなくなったはずです。
まさに透明シートに描かれた図形を重ねて、それを上から眺めたのと同じです。
下のシートに描かれた絵は、上のシートの絵に遮られています。

※今は仮定でこのようなレイヤー配置にしましたが、制作段階で現実このように上のレイヤーに遮られて、下の図形が確認できないばかりか、修正できない場合が起こってきます。
そのようなときは、レイヤー名の右横「目アイコン」の列にある「・」をクリックします。
「・」が「×」に変り、そのレイヤーの図形がブラインド(見えなく)になり、下の図形があらわれます。
これは、一時的にその部分の透明シートを抜き取るのと同じです。
元に戻すときは、もう一度同じところをクリックしてください。

137

今はまだ単純な構成ですが、これからご自分でFLASHムービーをお作りになられるときは、この「レイヤーの重なり」も非常に重要な要素になってきます。

「レイヤーの数」には制限がありませんし、増やしたからといってムービーのメモリがそのために増えるということはありません。
制作段階での余計なトラブルを防ぐためにも、スムーズなムービーを作成するためにも、レイヤーを惜しみなく使うことをお奨めします。
難点は、制作段階でどのレイヤーに何が入っているのか自分でもわからなくなってしまうことがありますから、新規にレイヤーを作成されましたら、その都度レイヤーに分かりやすい名前を付ける(”129”)ことを励行してください。

Lesson1 戻る このページの先頭へ 次へ


【おしえて!FLASH5】お奨め関連ページ
○「1−4 お絵かきツール大研究」…P20〜23
○「2−4 背景をつけてみよう(右ページ「レイヤー図解」)」 …P37
○「9−1 静止テキストとテキストの基本(さわりだけ)」…P140〜141
○「10−2 グラデーション塗り」…P156〜157
○「10−13 情報・変形パネル」…P172〜173


質問掲示板 過去記事 サンプル作品集 FLASH5講座 ACTION SCRIPT講座 リンク 憲ちゃんのHP FLASH制作代行 トップページ

トップページ