スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-- : -- : -- | スポンサー広告 | page top↑

SWFObjectを実装してみた。

そんなこんなで、フラビィ全体のcharsetをShift_jisからUTF-8に変換をしてみました~
これにより中国語訳とかにも対応できるはず。

んでもって、ついでにイマサラ感たっぷりですが、SWFObjectも実装してみました。

メリットとしては、
代替え画像やテキストが使える(画像でもalt属性が使える)
プラグインインストール誘導が行える
ソースが整理されてスッキリになる(外部javascriptにした場合も含めて)

などがあるのかなと。
では、実装してみましょう!
>
>
>

まず、Google Codeからダウンロードします。2011年6月現在の最新バージョンは2.2です。

swfobject – Google Code


この中のswfobjectというJSファイルを、サイトフォルダ内の好きなところに保存します。
保存したら、Swfを貼るHTMLのタグ内でJSファイルへのリンクを記述します。

<@@script language="JavaScript" type="text/javascript" src="js/swfobject.js">

(注)@@はブログ記述用に加えています。

swfobjectの設定をしてみよう!!


swfobject.jsはswfを表示させる本体なので、、次に個々のswfの設定をおこなってやります。

<@@script type="text/javascript">
var flashvars = { };
var params = {
play: "true",
loop: "false",
menu: "false",
quality: "high",
scale: "noscale",
salign: "lt",
wmode: "opaque"
};
var attributes = { };
//
swfobject.embedSWF("jigsaw/jigsaw_swf/jigsaw33.swf", "jigsaw-swf", "740", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
<@@/script>

まず、flashvars,params、attributesなどの各要素の設定をおこないます。
LightBoxやCSSでz-indexを使って重なりあうようなデザインをする場合には
wmode: "opaque"の設定は必須と思われます。

swfobject.embedSWFの設定をおこないます。
swfobject.embedSWFは(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) 前の5つが必須項目で、後ろの4つは任意項目です。

上のスクリプトに当てはめると
swfUrl="jigsaw/jigsaw_swf/jigsaw33.swf"
id="jigsaw-swf"
width="740"
height="600"
version="9.0.0"

と、なります。
これらをに書いた後に

内のswfを貼りたいところに

<@@div id="jigsaw-swf"><@@/div>

と書くことによりブラウザで見た時にswfが表示されます。
また、<div>タグ内に

<@@h1>フラッシュの内容テキスト
<@@p>
<@@a href="http://www.adobe.com/go/getflashplayer">
<@@img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />


と書き加えることで、swfが表示されない際の代替えテキストや画像を表示させたり出来ます。
このへんはSEO的もよいかもしれないっすね。

同じページで複数のswfを使う場合には

内に
<@@script type="text/javascript">
var flashvars = { };
var params = {
play: "true",
loop: "false",
menu: "false",
quality: "high",
scale: "noscale",
salign: "lt",
wmode: "opaque"
};
var attributes = { };
//
swfobject.embedSWF("jigsaw/jigsaw_swf/jigsaw33.swf", "jigsaw-swf", "740", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
<@@/script>

先に設定したjavascriptと同じモノををペーストして、idを設定している部分 "jigsaw-swf"を "jigsaw-swf2"という風に重複しないidに書き換えて使用します。

同じswfをいくつものページで使用する場合

同じswfをいくつものページで使用する場合は、外部スクリプトにして内でリンクを張ると良いかもです。
この場合も内にスクリプトを書いた場合と同じように
でswfを貼ることが出来ます。

flashvarsを使用する場合のメリット
フラビィのFLVプレイヤーの場合、flashvarsによりFLVファイルへのパスをswfへ受け渡しています。
swfobjectを使用して<head>に変数を定義することで、flashvarsへの記述や確認がしやすくなると思います。

スポンサーサイト
23 : 22 : 20 | Web関係のメモ | トラックバック(0) | コメント(0) | page top↑
<<ジグソーパズルのフラッシュにバグが見つかる | ホーム | 無料で遊べる富良野の風景のジグソーパズルゲーム>>
コメント

コメントの投稿














管理者にだけ表示を許可する

トラックバック
トラックバックURL
http://hoketu4.blog39.fc2.com/tb.php/40-7579b66f
この記事にトラックバックする(FC2ブログユーザー)
| ホーム |

カレンダー

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

プロフィール

hoketu

Author:hoketu
山菜採り命!

フリーエリア1

カテゴリ

最新記事

最新コメント

フリーエリア2

月別アーカイブ

検索フォーム

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。