Home < This Page

Web・ホームページ制作の技術が進み、他と違う「動き」のあるサイト作りが求められています。
そのため、何らかのFlashを使ったサイトが増えています。しかし、Objectタグと、Embedタグを併用した一般的なFlash埋め込み方法では、「activate」させてからでないと、操作できないという問題があります。
そこで、SWFObjectを使ったFlashの埋め込み方を紹介します。

SWFObjectを使ったFlashの埋め込み方法

  • スポンサードリンク

 

SWFObjectとは・・・

Macromediaの標準のFlashの埋め込み方は既にご存知のことと思います。
Objectタグと、Embedタグを併用する方法です。
これは最も一般的なFlash埋め込み方法で、Macromedia Flashのソフト上からパブリッシュした際のデフォルトの出力方法になっています。
そして、この方法は互換性も高く、多くのブラウザをカバーしています。

しかしながら、最も一般的なFlash埋め込み方法にも関わらず、いくつかの問題点があります。
プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったりします。
プラグインをインストールしていないIEユーザーには「ActiveXをインストールしますか?」というダイアログボックスが表示されます。
Mozillaベースのブラウザでも、似たような問題が起こります。
ユーザーは一度Flash画面をクリックして「activate」させてからでないと、操作できないという問題があります。
特に、embedというタグは、どのバージョンのHTML、XHTMLにもありません。しかし、object タグの仕様の違い(あるいは、サポートしていない、バグの多さ)の為に、保険としてembedタグが使われています。

そこで、HTMLにswfファイルを埋め込む際にembedタグやobjectタグを使わずにSWFObjectを使うという方法があります。

このSWFObjectを使うと最近のIEのアップデートによる、「クリックしないといけません」現象(activate化)も回避でき、設定で、Flashの表示をしない場合には代替機能でimg画像を表示してくれます。

上のFlashをご覧ください。このFlashはSWFObjectを使って表示しています。
仕組みは、ある要素の中身をswfを表示するための文字列に置き換えるというものです。

 

作成手順・・・SWFObjectを使う

SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。
埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、HTML、XHTML 1.0に使用できます。
  ※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。

1)http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.4をダウンロードしてください。
解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
ダウンロード ⇒  http://blog.deconcept.com/swfobject/#download

2)Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。

3)HTMLページにJavascriptを記述します。

   このページを例にしたFlashムービーを埋め込む為の記述が以下です。

<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_c.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
<script type="text/javascript">
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
so.write("headerFlash");
</script>
</div>

以上が、このページで記述しているJavaScriptです。

4)それでは各コードを説明します:

 

<div id="content_swf">
  <script type="text/javascript" src="js/swfobject.js"></script>
  <img src="img/ssp_cf.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />

 HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
 swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン対策にもなりますので、SEOに不利といわれるFlashの対策にもなります)。

   

var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
新規にSWFObjectをつくり、必要なパラメーターを渡します。

    

"menu_n.swf"  埋め込むswfのファイル名をパスで指定します。
"ssp"  オブジェクトやembedタグのIDとなります。任意の名前で構いません。
"600"  Flashムービーの幅 (width)
"120"  Flashムービーの高さ(height)
"6"   必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
"#000000"  背景色(background color)を指定できます(例:#FFFFFF)

   

so.write("content_swf");
(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。

    以上です。

SWFObjectは現行のの全てのブラウザに対応しています。
PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。

SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。

外部テキストファイルを読み込む場合の作り方は、こちらへ

   スポンサードリンク

フリー(無料)のFlashサンプル素材

◆サンプル素材 01

BGMに合わせて文字が出るフラッシュ(Flash)の動画ムービーです。
文字は全て外部テキストなので、外部テキストの内容を変更するだけで済みます。

◆サンプル素材 02

フラッシュ(Flash)に外部画像をXMLを介して読み込みます。メニュー名は外部テキストです。
ダウンロードされるとXMLファイルも入っています。XMLの作成の参考にしてください。

◆サンプル素材 03

ストリーミング再生のフラッシュ(Flash)Mp3Player。外部Mp3ファイルとメニュー名を読み込みます。
デザインは iPod 風。ストリーミング再生なので、Webにアップされる場合は、サーバーの機能を確認してください。

◆サンプル素材 04

フラッシュ(Flash)でパスワード画面を設定し、フラッシュ(Flash)内でのログインです。
このサイトのDownloadページのようなログイン画面が作れます。
ActionScriptなので、Flash解析ソフトを使わない限り、簡単にパスワードが盗まれることは、ありません。

◆サンプル素材 05

フラッシュ(Flash)でテキストをタイピングしているかのように表示します。
文字をマスキングしてスライドするのではなく、一文字づつ表示します。
外部asファイルに記述していますので修正も簡単です。

  
 

ちょっとFlashのHow To

◆How to 01 (外部テキスト)

フラッシュ(Flash)に外部テキストを読み込ませる設定の作り方です。
変更が多いテキスト部分は外部ファイルを読み込むようにしておくと、修正が簡単に済みます。
その作り方を説明します。

◆How To 02 (外部HTML)

フラッシュ(Flash)に外部HTMLを読み込ませる設定の作り方です。
Flashの中のテキスト部分に、リンクやカラーなどが自由に設定できる外部HTMLファイルの作り方です。
外部ファイルなので、修正も簡単です。

◆How To 03 (SWF Object)

HTMLにフラッシュ(Flash)のswfファイルを埋め込む際にSWFObjectを使うという方法があります。
このSWFObjectを使うと最近のIEのアップデートによる、「クリックしないといけません」現象も回避できます。
更に、代替画像のalt属性を利用することで、SEOに不利といわれるFLASHの問題にも対応できます。

◆How To 04 (外部asファイル)

フラッシュ(Flash)に外部asファイルを読み込ませる設定の作り方です。
Action Scriptを外部ファイル(asファイル)に記述し、読み込ませます。
外部ファイルなので、修正も簡単です。

 

Flash(フラッシュ)を解析するソフト

Flash(動画ムービー)の解析ソフト

◆FlashのSWFファイルを解析し、Scriptを編集できるソフト

当サイトのダウンロード・ページにあるパスワード入力画面は、サーバー不要のFlash Action Scriptで作っています。そのため、JavaScriptで作ったパスワード入力と違って、簡単に、パスワード不要にすることができません。
ただし、Flash解析ソフトを使うと、ActionScriptの中身(パスワード)を見ることができます。
そのためなのか、Flash解析ソフトとして、どのような商品があり、何ができるのか知りたいという問い合わせが多く、Flash(フラッシュ)の制作者としては、余り薦めたくはありませんが、Flashを簡単に作成したい・勉強したい方のために紹介します。

>>>>> 解析ソフトの詳細ページは、こちら

Flash解析ソフトの詳細

なお、ブラウザからFlash(SWFファイル)を取り込むフリーのソフトは、海外ソフトですがFlash Saving Pluginがあります。

  
 

ブックマークに登録

 

下記のブックマークから登録できます。

※ 登録情報 [ 入力例 ]
(サイト名):ホームページに使えるフラッシュ Flash(動画ムービー)の無料フリー素材
URL: http://www.e-ssp.net/
タグ:フラッシュ Flash 動画 ムービー 無料 フリー 素材 サンプル ダウンロード
メモ:ホームページに使えるフラッシュFlash(動画ムービー)の無料フリー素材がダウンロードできます。
フラッシュFlashの素材サンプルは、外部ファイル読み込みです。
フラッシュFlashの外部ファイルの作り方ページ。

  Yahoo!ブックマークに登録 Yahoo!ブックマークに登録
  Google Bookmarks に登録 Google Bookmarks に登録
  はてなブックマークに登録 はてなブックマークに登録
  ライブドアクリップに登録 ライブドアクリップに登録
  del.icio.us に登録 del.icio.us に登録
 

Flash(フラッシュ)に最適な「おすすめ」

▼レンタルサーバー選び

フラッシュFlashなどの動画ムービーのストリーミングに最適なレンタルサーバーを使ってみませんか。

Heteml(ヘテムル)
Flash Media Server 2 や Macromedia ColdFusionを標準装備し、容量3GBのサーバー環境を月額1,500円とリーズナブルな価格で提供して、あなたの表現活動をサポートしてくれます。

▼ドスパラ Prime

最新最速のGeForce8800シリーズ搭載!ヘビーユーザーも満足のハイスペックマシン。
デュアルコアプロセッサ「IntelR Core邃「2 Duo」IntelRP35 Express チップセットを搭載。
ハイスペックなのに低価格。特にノートPCは必見。3年保証がうれしいですね。
カスタマイズ可能。ドスブイ・パラダイス

▼Adobeのmacromedia製品販売

Adobe社のオンライン販売ストアです。無料ユーザー登録されると、特別価格で購入できます。

▼MacとAdobe Creative Suite 3 は最強の組合せ。Apple Storeにて受付中。
新しい Intel製CPU搭載のMacとAdobe Creative Suite 3は最強の組み合わせです。
あなたのクリエィティビティをさらなる高みに引き上げます。

▼Microsoft製品の販売

マイクロソフト社オープンライセンスの販売です。パッケージ製品よりも低価格で、管理も簡単です。
複数の場合は更に割引価格でソフトウェアを購入できます。

Page Top