Flash 使い方教室

課題１１：写真を読み込みなさい

●ステップ１：他のファイルのライブラリを開きなさい

1. "Flash MX"を起動しなさい。
2. 「Ctrl」＋「Ｌ」で「ライブラリ（ハンコケース）」を開きなさい。

   

3. まだ何も登録していませんから、当然、「ライブラリ」の中は空（から）です。
   前回学習した通り、「ライブラリ」はファイルごとに作られるのです。
4. では、他のファイルの「ライブラリ」を開いてみましょう。
5. 開くのは、前回の課題で作ったファイル（ kadai10.fla ）の「ライブラリ」です。
6. 画面の左上、「ファイル」をクリック。
7. メニューの４行目、「ライブラリを開く」をクリック。

   

8. 「ファイルの場所」が「Flash使い方教室」になっていますか？(*1)

   

9. なっていなければ右の▼をクリックして、「マイドキュメント」→「Flash使い方教室」と開きます。(*1)
10. 「ファイルの場所」が「Flash使い方教室」なら、その中の"Flash10.fla"をクリック。(*2）
11. 「開く」をクリックする(*2)と、"kadai10.fla"のライブラリが開きます。

    

12. この「２段重ねのライブラリ」を初めて見た方も多いことでしょう。
13. では「"Flash10.fla"のライブラリ」の「シンボル１」をステージ左上にドラッグ＆ドロップしなさい。

    

14. ステージに「シンボル１」をドラッグ＆ドロップした後、「ライブラリ」を良く見なさい。
    「上段のライブラリ（指示２で開いた、空（から）のライブラリ）」にも「シンボル１」が入っています。
    

    

    上段と下段、２つのライブラリ（ハンコケース）の間で、シンボル（ハンコ）のコピーが行われたということです。
15. 試しに「下段のライブラリ（指示１１で開いた、"kadai10.fla"のライブラリ）」を閉じてごらんなさい。
    「▼ライブラリ−Kadai10.fla」を右クリックして、「パネルを閉じる」です。

    

16. 「下段のライブラリ」を閉じた後も、「上段のライブラリ」には「シンボル１」が残っています。
    ２つのライブラリ（ハンコケース）の間で、シンボル（ハンコ）のコピーが間違いなく行われたということです。

    

17. このように Flash は、他のファイルの「ライブラリ」を自由に使いまわせます。
    １度ドラッグ＆ドロップすれば、「ライブラリ」の中身（シンボル）も自動的にコピーされるので大変便利です。

*1：この時に開く画面（ウィンドウ）のデザインは、Windowsの種類によって違います。
　このページに掲載した画面写真は、WindowsXPのものです。

*2："Flash10.fla"をダブルクリックしても同じ結果になります。

●ステップ２：写真を読み込みなさい

1. 今度は、写真（画像）を取り込んでみましょう。
2. まず、講師が用意した写真をダウンロードします。(*1)
3. このページを印刷してから読んでいる人は、Internet Explorer (*2)を終了してしまっているでしょうか？
4. もし終了しているのでしたら、もう一度このページをInternet Explorer で開いてください。
   ダウンロードは、ホームページ上で直接行う作業です。
5. ではダウンロードを始めます。
   以下のファイル名（リンク語句）を右クリック→「対象をファイルに保存」(*3)。
   「保存する場所」は「Flash使い方教室」フォルダとします。

   sakura.png

6. 練習用に用意した小さい写真なので、低速回線でもすぐにダウンロードが終るはずです。
7. 写真の準備（ダウンロード）が終ったところで、いよいよ「読み込み」です。
   画面の左上、「ファイル」をクリック。
8. メニューの１０行目、「読み込み」をクリック。
9. "sakura.png"をクリック→「開く」。
10. ステージの左上に「桜という文字の写真(sakura.png)」が貼りつきました。
    この写真は【課題１０】のページに貼った写真から、一部を切り抜いたものです。

    

11. 「桜の写真」は、ステップ１でドラッグ＆ドロップした「桜（シンボル１）」の上に重なって貼り付いています。
    Flash では、後から書いたり貼り付けたりしたものが、上に重なっていくのです。(*4)
12. また、よく見ると「ライブラリ」の中にも「桜の写真（sakura.png）」が入っています。

    

13. Flash に写真を読み込むと、ステージ上だけではなく「ライブラリ」の中にも入ります。
    ですから１度読み込んだ写真は、「シンボル」と同じようにドラッグ＆ドロップだけでステージに貼りつけることができるのです。
14. ステージ上の「桜の写真（sakura.png）」を、右上に動かしなさい。
    「矢印ツール」で、ドラッグ＆ドロップです。

    

*1：インターネット上のファイルを自分のパソコンの中にコピーすることをダウンロードと言います。
　ご存知の方も多いでしょうが、念のために書いておきます。

*2：Internet Explorer 以外のソフトでホームページを見ている方、すみません。
　"Opera"、"Mozira"、"Netscape"など、お手数ですが適宜読み替えてください。
　本講座の参加者層を考えて、最も多数が使用しているブラウザ（ホームページ閲覧ソフト）の名前を書きました。

*3：「対象をファイルに保存」は、WindowsXP での文言です。
　他の Windows では微妙に言い回しが違うかもしれません。

*4：絵の具やペンキに似ています。後から塗った色が、先に塗った色の上に重なるのです。

●ステップ３：書き出して、全画面表示しなさい

1. 写真を貼り付けたFlash がどうなるか、書き出して確認します。
2. まず、"kadai11.fla"のファイル名で保存しなさい。
3. 次に、「Ctrl」＋「Enter」で「書き出し」をしなさい。(*1)
4. デスクトップ上の「マイドキュメント」→「Flash使い方教室」とクリック。
5. "kadai11.swf"（白玉ファイル）をダブルクリック。
6. 一見、同じような「桜」の字が並んでいます。

   

7. 「Ctrl」＋「Ｆ」で、全画面表示しなさい。(*2)
8. 左（桜のシンボル）と右（桜の写真）では、大きな違いがあります。
9. 全画面表示で拡大されても、左（桜のシンボル）は縁（ふち）がクッキリしています。
10. ところが右（桜の写真）は、縁（ふち）がボンヤリとしています。
    よく見ると、ギザギザしているところもあります。

    

    見比べてください。写真とシンボルを縦に並べてみました。

11. このように、Flash だけで書いた文字や絵は、拡大してもクッキリ表示されます。
    写真と違って、拡大してもボンヤリしないのが Flash の特徴なのです。(*4)
12. シンボルの桜は、Flashだけで書いた文字ですから、全画面表示で拡大した時にもクッキリとしています。

*1：もちろん「ムービープレビュー（試写会）」画面は、すぐに閉じます。(*3)

*2：全画面表示が出来ない人は、指示４を間違えています。
　Flash の画面で「ファイル」→「マイドキュメント」→「Flash使い方教室」ではありません。
　Flash とは別に、デスクトップ上の「マイドキュメント」→「Flash使い方教室」です。(*3)

*3：詳しくは【課題７・ステップ３】や【課題８・ステップ５】を参照。

*4：Flash のように拡大した時もクッキリしている画像を、ベクター（ベクトル／Vector）画像と言います。
　デジカメやスキャナーで取り込んだ写真（画像）は、ビットマップ（Bit Map）画像と言います。
　どちらにも一長一短があるので、どちらが優れているとは一概には言えません。

●ステップ４：２枚目の写真を読み込みなさい

1. もう少し「写真の読み込み」を練習しておきましょう。
2. ２枚目の写真（ school.png ）をダウンロードしなさい。(*1)
   保存する場所はもちろん「Flash使い方教室」です。

   school.png

3. Flashの画面左上、「ファイル」→「読み込み」
4. "school.png"をクリック→「開く」
5. ステージの左上に写真が貼り付くので、ステージ下に動かしなさい。
   「矢印ツール」でドラッグ＆ドロップすれば、簡単ですね。

   

6. 余談ですが、この建物は講師の勤務校（北海道別海町立上風連小学校）です。
7. 「プロパティ」パネルを開きなさい。
8. 「矢印ツール」で上風連小学校の写真をクリック。
9. 「プロパティ」パネルの中央、「入れ替え」ボタンをクリック。
10. 「ビットマップの入れ替え」という画面が現れます。

    

11. "sakura.png"→「ＯＫ」とクリックすれば、ステージ上の写真が入れ替わります。

    

12. このように「ライブラリの中の写真」同士だと、【課題１０】で勉強した「入れ替え」魔法が使えます。
13. ただし残念ながら、「写真」と「シンボル」の「入れ替え」はできません。(*2)

*1：ダウンロードの手順は、ステップ２と同じです。
　やり方が良くわからないという方は、もう一度ステップ２を読み返してください。

*2：抜け道はあります。
　写真を一旦「シンボル」に変換すれば良いのです。
　ただし「シンボル」に変換しても、元が写真ですから拡大した時にはボンヤリしてしまいます。

●ステップ５：ステージ上で、ライブラリの中身を修正しなさい

1. もう満腹の方もおりましょうが、最後に小技を１つ紹介しておきます。
   分量の都合で、【課題１０】から漏れてしまった小技です。
2. ステージ左上、「シンボルの桜」を「矢印ツール」でダブルクリックしなさい。
3. 「シンボルの桜」以外の部分が、半透明（というか薄い状態）になります。

   

4. この画面は、ステージ上でシンボルを修正する画面です。
5. この画面でも【課題１０・ステップ４】と同じように、シンボルの修正作業を行うことができます。
6. 「プロパティ」パネルを使って、「シンボルの桜」の色を変更しなさい。
7. 「ステージ上のシンボル」の色を変更すると、「ライブラリの中のシンボル」も色が変ります。
   ステージ上で修正しても、「シンボル」同士の絆（きずな／リンク）は有効なのです。

   

8. 今回の「ステージ上でダブルクリック」、前回の「ライブラリの中をダブルクリック」。
   どちらでシンボルを修正しても結果（効果）は同じです。好みや状況に応じて使い分けてください。
9. 例えば今回の方法だと、「ライブラリ」を開かなくてもシンボルの修正ができます。
   ですから画面の小さなノートパソコンにとって便利な方法であるとも言えるでしょう。

●ステップ６：保存して終了しなさい

1. "kadai11.fla"を保存（上書き保存）しなさい。
   画面左上「ファイル」→「保存」でＯＫです。
2. FlashMXを終了して、今回の学習を終えなさい。
3. 今回の学習で、静止画（一枚絵）の Flashを作成する勉強は一旦終了です。
4. 次回からは、いよいよ動画（アニメーション）の作成に入っていきます。
5. 動画と言っても、それほど難しいことはありません。
   ここまでの課題を頑張って来た方ならば必ず出来ます。安心してください。
6. 課題４〜１１までで、かなり丹念に Flashの基礎を勉強してきたからです。
7. 次回以降も、落ち着いて取り組んでください。