TOSSランド＞TOSSコミュニティ＞サークル・県別ML＞全国ネット研究会
【山田庵】／ TOSSランド建設／ Flash 使い方教室ＭＬ／ 課題２２

Flash 使い方教室

作成者：TOSSオホーツク・ 山田正和
作成日：2003年 3月23日(日)
最終更新日：2003年 3月27日(木)

課題２２：ホームページに、直接Flashを貼りなさい。 個人サイトが無い方は、後回しでも構いません

●ステップ１：白玉をダウンロードしなさい。

  1. 前回は「解説用のホームページからリンクさせる方法」を学習しました。
    白玉（swfファイル）とは別に、解説用ホームページ（HTMLファイル）を「転送（アップ）」する方法です。
  2. この方法の良いところは３つあります。
    Ａ：分かりやすい。
    Flash作品の内容や使い方が分かりやすい。（前回学習済み）
    Ｂ：全画面表示しやすい。
    「Ｆ１１」キーで簡単に全画面表示にできます。（前回学習済み）
    Ｃ：ダウンロードしやすい。
    白玉ファイルを自分のパソコンにコピーしやすい。教室に持ち込んで授業する時に便利。（今回学習）
  3. インターネット上にあるFlash作品を、授業で使おうとして失敗した経験のある方はいないでしょうか？
    ノートパソコンなどに「保存」したしたハズなのに、上手く表示されなかったという経験のある方です。
  4. 各教室に、インターネットに繋がったパソコンがあるならば話は違ってくるかもしれません。
  5. ですが回線が遅くて（重くて）表示に時間がかかったり、突然のトラブルでアクセス不能になってしまうことがあります。
    安心のために、インターネット上のFlash作品を自分のパソコンにコピー（保存）しておきたいと思う（思った）ことがある方も多いでしょう。
  6. 実は、Flash作品は自分のパソコンにコピー（保存）しづらいようにできています。
    ホームページ上の普通の画像（例えばデジカメ写真）と違って、簡単には保存できないのです。(*1)
  7. これは恐らく著作権に配慮したものだと考えられるのですが、我々教員にとっては少々困った設計です。
  8. 快適に授業で使うには、インターネット上のFlash作品（白玉ファイル）を自分のパソコンに保存（コピー）した方がよいからです。
  9. けれども安心してください。
    前回学習した「解説用のホームページからリンクさせる方法」ならば、この悩みを簡単に解決することができます。
  10. 解説用ページのリンクからは、簡単にFlash作品（白玉ファイル）を保存することができるのです。
  11. 論より証拠で、試してみましょう。
    以下に Flash作品（白玉ファイル）へのリンクを１つ用意しました。

    →「漢字のひつじゅん（山）」(kanji.swf)

  12. 上のリンク語句をクリック（普通の左クリック）すると、フリップのFlashが表示されます。
    「Ｆ１１」キーで全画面表示（フルスクリーン表示）されるのも前回学習したとおりです。
  13. "Internet Explorer"の「戻る」をクリックして、この課題ページに戻ってください。(*2)
  14. 今度は上のリンク語句を、右クリック→「対象をファイルに保存」とクリックします。
    たったこれだけの操作で「ダウンロード（インターネット上のファイルを、自分のパソコンの中にコピー）」が始まります。(*3)
  15. ダウンロードが終了すれば、あなたのパソコンの中に白玉（.swfファイル）があります。
    授業に使うのならば、このダウンロードした白玉をそのまま持ち込めば良いのです。
  16. このように「解説用のホームページからリンクさせる方法」を使えば、授業での利用がとてもしやすくなります。
  17. 解説用ページの存在は、TOSSランドの利用者にとって、とても便利でありがたいことなのです。
  18. では練習しましょう。前回の学習で作成した、自分の解説用ホームページから、白玉ファイルをダウンロードしなさい。(*4)
  19. 時間と気力に余裕があったら、２つ３つ、他の受講者の白玉ファイルをダウンロードしてみても構いません。
    解説ページのアドレス（URL）はＭＬに流れたメールにかかれています。

*1：普通の画像の保存法を一応書いておきます。
　"Internet Explorer"の場合、画像を右クリック→「名前をつけて画像を保存」です。

*2：余談ですが、キーボードで「Alt」＋「←」を押すと「戻る」になります。
　逆に「Alt」＋「→」で「進む」になります。"Internet Explorer"のショートカットキーです。

*3：保存する場所はどこでも構いません。
　迷ったら「Flash使い方教室」フォルダでも良いでしょう。

*4：保存する場所は、デスクトップなどが適当でしょう。
　「Flash使い方教室」フォルダには既に自分の白玉ファイルがあるはずですから。

●ステップ２：「ホームページからリンクさせる方法」の苦手なことについて知りなさい。

  1. 授業で使う Flash作品は「解説用のホームページからリンクさせる方法」さえ出来れば、問題なくTOSSランドに登録することができます。
    教師が使う作品はもちろん、子どもが自学するタイプの作品でも、何も問題がありません。
  2. ですが、Flash作品の使い方はそれだけではありません。
  3. 仮にTOSSランド登録用に、体育の論文（法則化論文）を書いている自分をイメージしてください。
    論文の中で動きのある絵（動画）を貼り付けたくなる場合がありえないでしょうか？
  4. とび箱の飛ぶ姿勢や、水泳の手の動き、バスケットのシュート体勢などは、動画があった方が分かりやすい論文になるはずです。
  5. 次に図工や家庭科など、何かを作る作業の論文を書いている自分をイメージしてみてください。
    これもやはり動画を使いたくなることがありえます。
  6. 例えば「かたつむりの線」の、実際のスピードを動画で見せることには大きな意味があるはずです。
  7. また本講座の課題ページでも、一度、動画を使って説明したことがあります。
    【課題１５】のステップ４で「レイヤー」について教えた時です。

  8. このように論文（説明文）の中で動画を使いたい時は、今まで学習した方法では上手くいきません。
  9. 「解説用ホームページからリンクさせる方法」を応用して、論文の中に「説明用動画」などのリンク語句を置くことは可能です。
    ですが、今ひとつ使い勝手（見栄え？）が悪いです。
  10. ですから、このような場合は「ホームページに直接白玉ファイルを貼り付ける方法」を身につける必要があります。
  11. 「白玉だけを転送する方法」「解説用のホームページからリンクさせる方法」に続く、第３の方法です。
  12. この方法は、大雑把に言って２通りのやり方があります。
    Ａ：「ホームページビルダー」などの作成ソフトに任せる。
    「７」以降の「ホームページビルダー」は、白玉ファイルを貼り付けることができます。
    Ｂ：自分でタグを書く
    大部分はコピー＆ペーストだけで済みます。２ヶ所書き直すだけです。
    「メモ帳」や「Oedit」などのテキストエディタ。または「ホームページビルダー」の「ソース編集」を使います。
  13. 初心者（Flash初心者ではなく、ホームページ作成初心者）にとって簡単なのは、Ａのやり方です。
  14. ですが「ホームページビルダー７」以降など、白玉（swfファイル）の挿入が出来るソフトを持っていないと出来ません。
    「ホームページビルダー」を持っていなかったり、持っていても古いバージョンの方はＢを行うしかありません。
  15. そこで次のステップでは、Ｂの方法で統一します。
    「ホームページビルダー７」を持っている人も、持っていない人もＢの方法をやってもらうのです。
  16. 見た目はともかく慣れればＢも簡単なので、恐れずにやってみてください。

●ステップ３：白玉をホームページに貼り付けなさい。

  1. これから前回の課題で使った「オリジナルフリップ」を、ホームページに貼り付けます。
  2. まず新しく貼り付け用のホームページ(HTMLファイル)を作りなさい。
    「ホームページビルダー」を使うなり、「ホームページ使い方教室」の方法を使うなり、好きな方法で構いません。
  3. 本講座は「Flash使い方教室」ですから、細かい手順については指示しません。
  4. 一応、文章を書き直して使える、ひな形（テンプレート）を用意しておきます。
    必要な方は、ダウンロードして使ってください。
    ダウンロードした後、「ホームページビルダー」「メモ帳」「Oedit」などで開いて文章を書きなおすのです。
  5. ひな形は、題名を右クリック→「対象をファイルに保存」でダウンロードできます。
    →貼り付け用ホームページのひな形（CSSあり版）
    「ホームページ作成講座 in ＭＬ」または「ホームページ作り方教室」の受講経験者用です。
    "orange_line.css"へのリンクが既に書き込まれています。
    "orange_line.css"と同じフォルダに転送すると、自動的に色や枠囲いなどの体裁が整います。
    →貼り付け用ホームページのひな形（CSSなし版）
    「ホームページ作成講座 in ＭＬ」または「ホームページ作り方教室」を受講したことがない人用です。
    最小限の体裁しか整えていませんので、ご自分で色を変えたりしてください。
  6. ダウンロード後は、もちろんファイル名を書き直しても構いません。
  7. 白玉ファイル（swfファイル）と同じ名前にすると、前回の課題で作った解説用ホームページとダブってしまいます。
    "kanji2.html"や"kanjiB.html"など、数字や記号を追加すると良いでしょう。

  8. ホームページのソースに、以下のタグをコピー＆ペーストしなさい。(*1)(*2)(*3)
    （ひな型には、あらかじめ書き込んであります）
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    width="550" height="400" id="ファイル名">
    <param name="movie" value="ファイル名.swf">
    </object>
  9. 今コピー＆ペーストした「タグ」の中に２ヶ所、「ファイル名」と書かれた場所があります。
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    width="550" height="400" id="ファイル名">
    <param name="movie" value="ファイル名.swf">
    </object>
  10. その２ヶ所を、自分の「オリジナルフリップ（白玉ファイル）」のファイル名に書き直します。
    （白玉ファイルが"kanji.swf"だった場合、以下の例のようになります）
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    width="550" height="400" id="kanji">
    <param name="movie" value="kanji.swf">
    </object>
  11. これで「白玉の貼り付け」はＯＫです。
  12. ファイルを保存して、「ビルダー」または「メモ帳」または「Oedit」を終了しなさい。

*1：長い行があるので、紙に印刷すると右端が欠けて印刷されるかもしれません。注意してください。

*2："Internet Explorer"の場合、「トリプルクリック」で範囲を選択できます。
　あとは右クリック→「コピー」です

*3:ソースの、<body>と</body>の間に貼り付けます。
　"body"は、「ここ（<body>）からここ（</body>）までが本文（本体）ですよ」という意味の記号です。
　「ホームページビルダー」では、変な場所に貼ろうとすると修正機能が警告＆自動修正します。
　ですから気にしなくても大丈夫だと思うのですが、一応書いておきます。

●ステップ４：ブラウザで確認しなさい。

  1. ステップ３で、白玉を貼り付けたホームページをダブルクリックしなさい。
    "Internet Explorer"が動き出します。
  2. ホームページの中に「オリジナルフリップ」が貼り付いていれば成功です。(*1)

    →参照用作例へのリンク

  3. 「Ｆ１１」キーを押してごらんなさい。
    残念ながら全画面表示に切り替わっても、Flash作品の表示面積は変りません。
  4. ホームページ上に貼り付けると、画面の大きさに関わらず、表示面積は固定されてしまうのです。(*2)
  5. 前回と今回で学習した、３つの方法について以下にまとめておきます。

    　 内容や使い方 「Ｆ１１」キーを押すと 主な使い道
    １．swfファイル（白玉）だけを転送する ×　分かりづらい ○　全画面表示になる。（サイズが可変） 授業で使うFlash作品
    ２．解説用ホームページからリンクさせる ○　分かりやすい。
    ３．ホームページに直接swfファイルを貼り付ける ×　表示面積は最初のまま。（固定されている） 論文などの途中で、動きを見せたい（説明したい）時に使う
  6. ところで、ホームページに貼り付けたFlashの表示面積を変えたくなることがあります。
    論文の長さや文章量などに合わせたサイズにしたい時です。
  7. その場合は、タグの以下の部分を書き直すのです。
    "width"は「横はば」、"height"は「縦はば」を意味する英語です。
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    width="550" height="400" id="kanji">
    <param name="movie" value="kanji.swf">
    </object>
  8. 一応、小さくした場合の作例を示しておきます。

    →参照用作例（表示面積を小さくした場合）

  9. なお、応用技で「解説ページからリンク」と「直接貼り付ける」を折衷させることも可能です。

    →参照用作例（リンクと貼り付けの折衷パターン）

  10. こうしておけば、全画面表示も利きますし、ダウンロードも簡単です。
  11. 今回の学習は、ここまでです。お疲れさまでした。
  12. 時間と気力に余裕のある人は、今回作成した「貼り付け用ページ」を「転送（アップ）」してみても構いません。

*1：ステップ３で教えたタグは、必要最低限の内容に厳選してあります。
　ですから古いブラウザでは、Flashが上手く表示できないことがあります。
　例えば"Opera"の場合、「７」では表示できますが、「６」では表示できません

*2：厳密に言えば、表示面積を可変にすることも可能です。
　ただし、ホームページ作成に詳しい人でないとバランスを調整するのが難しいです。

●エクストラ・ステップ：「パブリッシュ」とは？

  1. "FlashMX"には「パブリッシュ」という機能があります。(*1)
  2. これは「書き出し」と「ホームページへの貼り付け」を同時に行ってくれる機能です。
  3. 便利といえば便利なのですが、幾つか問題点があります。
    講師としては、あまりオススメできません。
    １：書きかけのホームページには、白玉（swfファイル）を貼れない
    つまり、「白玉を貼ったホームページに文章を書き足すこと」しかできないのです。
    今回学習した技なら、「書きかけページに貼る」と「貼ってから文章を書き足す」の両方に対応できます。
    ２：もう一度「パブリッシュ」すると、ページがリセットされてしまう
    「パブリッシュ」で作った、貼り付け用ホームページを「ビルダー」などで加工したとします。
    その後でFlash作品の方を改造し、もう一度「パブリッシュ」すると、そのホームページは元の状態に戻ります。
    加工前の何も文章を書いていない状態に戻ってしまうのです。
    この場合は「パブリッシュ」ではなく、「書き出し」だけをすればよかったのです。
    ３：古いブラウザに対応させるため、タグが複雑
    いつも「ビルダー」任せという方には無関係ですが、一応書いておきます。
    ４：HTMLタグに文法違反がある。
    "Internet Explorer"は多少の文法違反も、補正しながら表示してくれます。
    ですから実害はあまりないのですが、将来も補正してくれるのか定かではありません。

*1：「パブリッシュ（Publish）」は「出版する」「発行する」という意味の英語です。

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