TOSSランド＞TOSSコミュニティ＞その他
【山田庵】／ TOSSランド建設／ Flash 使い方教室２／ 課題６

Flash 使い方教室２〜初級スクリプト編〜

作成者：TOSSオホーツク・ 山田正和
作成日：2004年9月9日(木)
最終更新日：2004年9月12日(日)
©Two-Way All rights reserved
TOSSランドは世界一の教育情報ポータルサイトです。
TOSSランドの正式名称はインターネットランド（登録商標4468327号）と言います。

課題６：数値で場所とサイズを変えなさい。

●ステップ１：長方形をマウスで動かしなさい。

  1. 今回は「プロパティ」パネルの一味違った使い方を学習します。
  2. "Flash"を起動しなさい。
  3. 「矩形（くけい）ツール」を使って、ステージやや左上に長方形を書きなさい。(*1)
    面積はステージの４分の１以下、色や線の太さを特に問いません。

  4. 「矢印ツール／選択ツール」で、長方形の「中（ぬり色）」をダブルクリック。(*2)
    長方形の「線」と「ぬり色」の両方が、網かけになればＯＫです。
  5. そのまま余計なところをクリックしないよう気をつけながら、「プロパティ」パネルを開きなさい。 (*3)
  6. 「プロパティ」パネルの左側、「Ｘ：」と「Ｙ：」の欄を確認しなさい。
    どちらの欄にも、３桁＋小数第１位の「数値」が表示されています。

  7. 「Ｘ：」と「Ｙ：」の数値には、個人差があります。
    上の画面写真と同じ数値になっていなくても安心してください。
  8. 「矢印ツール／選択ツール」で四角形を、ステージ左上にドラッグ＆ドロップしなさい。
    四角形の左上の角が、ステージの左上の角にだいたい重なるように動かすのです。

  9. 再び「プロパティ」パネルの「Ｘ：」と「Ｙ：」の欄を確認しなさい。
    どちらの欄も、限りなく「０（れい）」に近い値へと変化しています。(*4)

  10. 「矢印ツール／選択ツール」で四角形を、ステージ左下にドラッグ＆ドロップしなさい。
    四角形の左下の角が、ステージの左下の角にだいたい重なるように動かすのです。

  11. また「プロパティ」パネルの「Ｘ：」と「Ｙ：」の欄を確認しなさい。
    今度は「Ｘ：」だけが「０（れい）」に近い値へと変化しています。 「Ｙ：」の方は、３桁＋小数第１位へと変化しています。

  12. 「矢印ツール／選択ツール」で四角形を、ステージ右上にドラッグ＆ドロップしなさい。
    四角形の右上の角が、ステージの右上の角にだいたい重なるように動かすのです。

  13. また「プロパティ」パネルの「Ｘ：」と「Ｙ：」の欄を確認しなさい。
    今度は「Ｙ：」だけが「０（れい）」に近い値へと変化しています。
    「Ｘ：」の方は、３桁＋小数第１位へと変化しています。

  14. そろそろ「Ｘ：」と「Ｙ：」が何を意味する「数値」なのか、察しがついてきた人がいるかもしれませんね。
  15. あと２〜３回、「矢印ツール／選択ツール」で四角形を、様々な場所にドラッグ＆ドロップしなさい。
    そして、ドラッグ＆ドロップするたびに「Ｘ：」と「Ｙ：」の「数値」を確認するのです。

  16. 「Ｘ：」と「Ｙ：」は、「ステージ上の位置（座標）」を表しています。
    ステージ左上の角を「基点（原点）」として、「Ｘ：」が「Ｘ座標（横軸の値）」になります。
    同じく「Ｙ：」が「Ｙ座標（縦軸の値）」になります。

  17. 表すのは「矢印ツール／選択ツール」等で選択した物（図形や文字）の「位置（座標）」です。
    現在は長方形が選択されていますから、長方形の「位置（座標）」を表しているわけです。(*5)
  18. ステージ上の、何もないところをクリック。
    「プロパティ」パネルの「サイズ：」の欄を確認。
    初期設定のままなら「５５０×４００ピクセル」と書かれています。

  19. 初期設定のままのステージは、横が５５０ピクセル、縦が４００ピクセルの大きさです。(*6)
    ですから「Ｘ：」の数値（Ｘ座標／横軸の値）は、通常０〜５５０の値になります。
    同じく「Ｙ：」の数値（Ｙ座標／縦軸の値）は、通常０〜４００の値になります。
  20. ただし演出上の理由で、ステージからはみ出すように図形や文字を配置した場合は、この限りではありません。
    ５５０を超える「Ｘ：」や、４００を超える「Ｙ：」、マイナスの値もありえます。

*1：前回も学習しましたが、「矩形ツール」は対角線にドラッグ＆ドロップします。
　長方形の左上の角にしたい地点でドラッグを開始し、右下の角にしたい地点でドロップします。

*2：クリックだと「ぬり色」だけしか選択できません。
　ダブルクリックをすると「ぬり色」と「線」の両方を選択することが出来ます。

*3：既に開いたままの人も多いかもしれません。
　閉じている人は、画面下の「▼プロパティ」をクリックします。

*4：個人差はありますが、だいたい「−２〜０〜２」ぐらいの数値のはずです。

*5：選択中の図形や文字の、左上の隅（すみ）の「座標」です。

*6：ピクセル（pixel）は、ここではデジタル画像の大きさ（縦横の長さ）を表す単位です。
　「pixture(画像)」の複数形「pix」と、「element(要素)」が結びついて生まれた言葉です。
　日本語では「画素（がそ）」または「画素数（がそすう）」と訳されます。
　とりあえず、モニター画面を虫眼鏡で拡大した際に見える「光点（ドット）」の数だとイメージしておいてください。
（厳密には違うのですが、説明がややこしいので）

●ステップ２：長方形を数値で動かしなさい。

  1. 「プロパティ」パネルの「Ｘ：」と「Ｙ：」は、単なる「メーター」ではありません。
    「ＸＹ座標」を教える（表示する）以外に、「もう１つの働き」があるのです。
  2. 「矢印ツール／選択ツール」で、四角形の「中（ぬり色）」をダブルクリック。
    長方形の「線」と「ぬり色」の両方が、網かけになればＯＫです。
  3. 「プロパティ」パネルの「Ｘ：」の欄（数値）をクリック。
  4. キーボードを使って、数値を「０（れい）」に書き直しなさい。
    ワープロやメールを書く場合の要領と、ほとんど変りません。
    元の数値を「ＢＳ」キーで全部消して、「０」キーを押してから「Enter」キーです。
  5. ただし書き直す「０(れい)」は半角数字でなければなりません。
    全角の「０」になってしまった場合は、やり直してください。
  6. 上手く「０」に書き直せた場合、「Enter」キーを押した瞬間に、長方形が移動します。
    ステージの左端まで瞬間移動するのです。

  7. よく見ると、「Ｘ：」の欄（数値）は「０.０（れいてんれい）」になっています。
  8. 今度は「プロパティ」パネルの「Ｙ：」の欄（数値）をクリック。
  9. キーボードを使って、数値を「０（れい）」に書き直しなさい。
    元の数値を「ＢＳ」キーで全部消して、「０」キーを押してから「Enter」キーです。
  10. 上手く「０」に書き直せた場合、「Enter」キーを押した瞬間に、長方形が移動します。
    ステージの左上まで瞬間移動するのです。

  11. よく見ると「Ｙ：」の欄（数値）も「０.０（れいてんれい）」になっています。
  12. そろそろ「Ｘ：」と「Ｙ：」の「もう１つの働き」について、察しがついてきた人がいるかもしれませんね。
  13. 「Ｘ：」を「５５０」に書き直しなさい。
    また「Ｙ：」を「４００」に書き直しなさい。
    長方形がステージ右下の外側に瞬間移動します。

  14. 「Ｘ：」を「５００」の半分、「２７５」に書き直しなさい。
    また「Ｙ：」を「４００」の半分、「２００」に書き直しなさい。
    長方形がステージ中央やや右下に瞬間移動します。

  15. 「プロパティ」パネルの「Ｘ：」と「Ｙ：」は、単なる「メーター」ではありません。
    「数値」を書き変えることで、図形や文字の「位置（座標）」を自在に変更することができるのです。
  16. 「マウス操作による数値の変化」と、「キーボード操作による数値の書き換え」は「表裏一体の関係」にあります。

    図形や文字を動かす→「Ｘ：」と「Ｙ：」の「数値」が変化する

    「Ｘ：」と「Ｙ：」の「数値」を書き換える→図形や文字が動く

  17. 通常は「矢印ツール／選択ツール」のマウス操作で図形や文字を動かすことの方が簡単です。
  18. ですがキーボード操作による「位置（座標）の書き換え」で図形や文字を動かした方が良い場合もあります。
    次の次のステップで学習しますが「半面ボタン」や「全面ボタン」を作る場合などです。
  19. 時間と気力に余裕があれば、もう２〜３回、「Ｘ：」と「Ｙ：」を書き換えなさい。
    「Ｘ：」の数値は「０」〜「５５０」、「Ｙ：」の数値は「０」〜「４００」にすると良いでしょう。
    ステージ上のどこかに瞬間移動する可能性が高くなります。(*1)

*1：長方形の左上の隅（すみ）の「座標」を書き換えています。
　ですから数値によっては、ステージの右や下の外に長方形がはみ出すことがあります。

●ステップ３：長方形のサイズを変えなさい。

  1. 今度は、長方形のサイズ（大きさ）について学習します。
  2. 好みの手段で、長方形をステージやや左上に移動させなさい。
    「矢印ツール／選択ツール」によるマウス操作でも構いません。
    キーボード操作による「座標（数値）の書き換え」でも構いません。(*1)

  3. 「プロパティ」パネルの左側、「Ｗ：」と「Ｈ：」の欄を確認しなさい。
    どちらの欄にも、３桁＋小数第１位の「数値」が表示されています。

  4. 「Ｗ：」と「Ｈ：」の数値を、メモ用紙などに書き写しておきなさい。(*2)
  5. 「自由変形ツール」で、長方形の「縦横の長さ」を２倍にしなさい。(*3)
    厳密でなくても構いません、だいたい２倍でＯＫです。

  6. 再び「プロパティ」パネルの「Ｘ：」と「Ｙ：」の欄を確認しなさい。
    どちらの欄も、先ほどメモした数値の約２倍になっています。

  7. あと２〜３回、「自由変形ツール」で長方形の「縦横の長さ」を変えてみなさい。
    そして長さを変えるたびに、「Ｗ：」と「Ｈ：」の欄を確認するのです。
    縦長の長方形や、横長の長方形など、様々なサイズの長方形を試してみると面白いでしょう。

  8. もう、お分かりですね？
    「Ｗ：」と「Ｈ：」は、長方形の「横の長さ」と「縦の長さ」を表しています。
  9. 「Ｗ：」は英語の「width」の頭文字です。
    「width（ウィドゥス）」の意味は、「幅」「広さ」「巾」「間口」「寸法」です。(*4)
  10. 「Ｈ：」は英語の「height」の頭文字です。
    「height（ハイト）」の意味は、「高さ」「身長」「全高」「高い所」「高地」「絶頂」です。(*4)
  11. そろそろ、次にどんな作業指示が来るのか察しがついている人がいるかもしれませんね。
  12. 「プロパティ」パネルの「Ｗ：」の欄（数値）をクリック。
  13. キーボードを使って、数値を「５５０」に書き直しなさい。
    もちろん全角ではなく、半角の数字です。
  14. 「プロパティ」パネルの「Ｈ：」の欄（数値）をクリック。
  15. キーボードを使って、数値を「４００」に書き直しなさい。
  16. 以上の操作で、長方形はステージと全く同じ大きさに変化します。

  17. このように「Ｗ：」と「Ｈ：」も、単なる「メーター」ではありません。
    「数値」を書き変えることで、図形や文字の「サイズ（縦横の長さ）」を自在に変更することができるのです。
    この辺の機能は「Ｘ：」や「Ｙ：」と全く同じです。

    図形や文字のサイズを変える→「Ｗ：」と「Ｈ：」の「数値」が変化する

    「Ｗ：」と「Ｈ：」の「数値」を書き換える→図形や文字のサイズが変る

  18. 通常は「自由変形ツール」のマウス操作で図形や文字のサイズを変えた方が簡単です。
  19. ですがキーボード操作による「サイズ（縦横の長さ）の書き換え」で変えた方が良い場合もあります。
    次のステップで学習しますが「半面ボタン」や「全面ボタン」を作る場合などです。
  20. 時間と気力に余裕があれば、もう２〜３回、「Ｗ：」と「Ｈ：」を書き換えなさい。(*5)
    縦長の長方形や、横長の長方形を作ってみても面白いでしょう。

*1：長方形のサイズにもよりますが、「Ｘ：」と「Ｙ：」は「５０〜６０」ぐらいが適当でしょう。

*2：ノートでも構いません。
　この課題をプリントアウトしている人は、余白に書き込んでおいても構いません。

*3：縦横の辺の長さが２倍になりますから、面積で言えば４倍になります。

*4：余談ですが、ホームページのソースを直接編集できる人にとっては、おなじみの単語です。
　画像のサイズなどを設定する際に、該当する「タグ」の「width」と「height」の属性値を指定するからです。

*5：線の太さにもよりますが、「Ｗ：」と「Ｈ：」は「１未満」の数値にはなりません。
　「１未満」を指定すると、自動的に「１.０」に補正されてしまいます。

●ステップ４：ぴったりした半面ボタンを作りなさい。

  1. ステップ１〜３の学習を応用すると、前回課題の「半面ボタン」や「全面ボタン」を作るのが楽になります。
  2. 以下、実際に「半面ボタン」を作ってみましょう。
    ステップ１〜３で位置やサイズを変化させてきた長方形を、そのままボタンに変えます。（趣意説明）
  3. 「矢印ツール／選択ツール」で、長方形の「中（ぬり色）」をダブルクリック。
  4. 「プロパティ」パネルの４つの「数値」を書き換えなさい。（*1）

  5. ４つの「数値」を全部書き換えると、長方形はステージ上半分をピッタリ覆い隠します。

  6. 「矢印ツール／選択ツール」で、長方形を右クリック→「シンボルに変換」。
    シンボル名は「半面ボタン」、タイプは「ボタン」を選択して「ＯＫ」。

  7. 長方形が「ボタン」に変化さえすれば、透明にするのは簡単です。
    「プロパティ」パネルの「アルファ」を「Ｏ％」に変更しなさい。
  8. あとは、この「透明な半面ボタン」に必要な「スクリプト」を書き込めばＯＫです。
    ここでは「前へ」ボタンにしてみましょう。
    次の「スクリプト」でしたね。
    9. on (release) {
	prevFrame();
}
  9. 「Ctrl」＋「Ｌ」で「ライブラリ（ハンコケースのようなもの）」を開きなさい。
    先ほどシンボルに変換した、「半面ボタン」が入っています。

  10. 「ライブラリ」の中にある「半面ボタン」を、ステージの下の方にドラッグ＆ドロップしなさい。

  11. 「ライブラリ」から出した直後の「シンボル」は、既に「矢印ツール／選択ツール」で選択した状態になっています。
  12. 「プロパティ」パネルの３つの「数値」を書き換えなさい。

  13. あとは、この２個目の「透明な半面ボタン」にも、必要な「スクリプト」を書き込みます。
    先ほどの１個目が「前へ」ボタンだったので、今度は「次へ」ボタンです。
    次の「スクリプト」でしたね。
    14. on (release) {
	nextFrame();
}
  14. これで「半面ボタン」の２個セットが完成しました。
    他のフレームを全く作っていないので、「ムービープレビュー」をしても、ほとんど意味がありません。(*3)
  15. ですが「数値の書き換え」を使った、「半面ボタン」の作成手順が理解できたはずです。
  16. 前回課題（マウス操作のみの「半面ボタン」作成）と、今回課題（「数値書き換え」技を使った「半面ボタン」作成）、どちらが好みですか？
  17. 操作手順自体は、今回課題の方が煩雑です。
    ですが、ステージにぴったり重なった「半面ボタン」を作りたい時は、今回の方法を使った方が良いでしょう。
    ２個の「半面ボタン」が微妙に重なったり、隙間が生じたりすることがありません。

  18. 長くなって来たので、今回の課題はここまでです。
  19. 今回作成したファイルは、特に保存しておく必要がありません。(*4)
    "Flash"を終了しておいてください。
  20. なお時間と気力に余裕のある方は、前回課題のファイルを修正しても構いません。
    ２個の「半面ボタン」の「Ｘ：」と「Ｙ：」を書き直して、ステージぴったりに重ねるのです。

*1：「Ｗ：」を書き換えた後、次の「Ｈ：」の欄をクリックするのが面倒な時は「Tab」キーを使います。
　「Tab」キーを押すたびに、「Ｗ：」→「Ｈ：」→「Ｘ：」→「Ｙ：」とカーソル（カレット）が移動します。(*2)
　記憶力に自信の無い人にはオススメしませんが、キーボードから手を離してマウスに手を伸ばす必要がないので、「ものぐさ」な人には便利です。

*2：間違えた時は、「Shift」＋「Tab」キーの同時押しです。
　「Ｙ：」→「Ｘ：」→「Ｈ：」→「Ｗ：」と、逆方向にカーソル（カレット）が移動します。

*3：透明なボタンがある場所に矢印をあわせると、指マークになるのが分かるぐらいです。

*4：記念にとっておきたいのならば、ご自由にどうぞ。
　"kadai6.fla"などのファイル名が適当でしょう。

▲このページの先頭に戻る →課題７へ