3日目の伊藤商店サイトを作った際のチップス。
FLASHを背景にしきたい場合、次のような感じにするといいみたい。

HTMLソース：Swfobjectを使用して配置

<div id="content">
<h1>伊藤商店</h1>
<p>伊藤商店はステキなwebクリエイターです</p>
</div>
<div id="flash">
<div id="flashcontent">
<strong>このサイトでは<a href="http://www.adobe.com/jp/products/flashplayer/" target="_blank">Adobe Flash Player</a>が必要です。</strong><br />
Adobeのサイトより最新の<a href="http://www.adobe.com/jp/products/flashplayer/" target="_blank">FlashPlayerをダウンロード</a>してください。
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("itoshoten.swf", "sotester", "100%", "100%", "10", "#000000");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.addParam("wmode", "transparent");
so.addParam("scale", "noscale");
so.write("flashcontent");
// ]]>
</script>
</div>

※swfobjectについては過去の記事を参照してちょ。

CSSソース

#content {
	position: relative;
	z-index: 1;
}
#flash {
	position: absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

z-indexでレイヤーを指定して使う。
古いブラウザによっては正常に見えない可能性もあるが、
IE6より前のブラウザとかは、無視したいところ。。。

昨日まで何も疑うことなく「XHTML Video Embed」というswfおよびビデオを埋め込めるプラグインを使用していたが、昨日タカハシデザインの作品をアップて表示させたところ、めっさメモリを食い散らかしていた。
気がつけば700MB。firefoxがフリーズしてるしｗ

ということで、一昨日見つけていたalumicanさんの「wp-al-swfobject_2.1_ja」を入れてみた。

動作は快適で問題ないっす！！！
利用させていただきます！

「XHTML Video Embed」はビデオ埋め込み用として使い分けが必要かもしれません。

どうでもいいのですが、「ｓｗｆ」って「スウィッフ」って読むらしいっす。
2年ほど前のセミナーでadobeの方が言ってたし。
初めて聞いたときキョトンとしてしまった。

昨日に引き続き、wordpressでFlashフォトギャラリーを使う方法をまとめる。

昨日はセットアップだったので、本日は画像の登録と設置方法について解説する。

1. まずはギャラリーにアクセスする。
   左側メニューの一番下にgalleryという項目が追加されいるのを確認。
2. その中の「AddGallery / Images」というボタンをクリック。
3. すると右側に「Add new gallery」というのが表示される。
   名称を入力するとギャラリー（カテゴリ）が追加される。
4. さらに、上のほうにある「UploadImages」というタブをクリックすることで、ファイルをアップするためのページに移動する。
5. Brouseをクリックして、3で追加したカテゴリを選択して、「UploadImages」をクリックすると画像が追加されるます。
   この作業を延々と続けるか、もしくはさらに右側にある「Upload a Zip-File」で画像をzipでまとめてアップすることができる。
6. アップが一通り終わったら確認してみる。
   再び、左側のGalleryメニュー中の「Manage Garllery」をクリックすると、３で追加したカテゴリが表示されるのでクリックすると登録された画像が確認できる。
7. 「Alt & Title Text / Description」に画像のキャプションを入力して、「SaveChanges」をクリック。
   消したい画像があれば消す。
8. 最後に「Manage Garllery」のページで、表示したいカテゴリのIDを覚えておく。
9. 投稿もしくはページの本文に、以下のいずれかの構文を入力する。
   ○simpleviewerの場合

   [simpleviewer=【ID】,【幅】,【高さ】]
   

   ○tiltviewerの場合

   [tiltviewer=【ID】,【幅】,【高さ】]
   

   ○autoviewerの場合

   [autoviewer=【ID】,【幅】,【高さ】]
   

   ○pcviewer（ポストカード）の場合

   [pcviewer=【ID】,【幅】,【高さ】]
   

   ※【】の部分は数値を入力します。

10. 列数行数やサムネイルの幅などの詳細設定は「管理画面」→「ギャラリー」→「Flashviewer」→「各ビューアーのタブ」で設定できる。

表示例は「イテル日記」にて公開中。

個人のブログの写真集などで利用はできるが、コーポレートサイトなどで使うシチュエーションがあまり浮かばないかも。

なんか有効活用したいけど思いつかない・・・。

撮りためた写真をwordpress上で公開したい場合に、使えるプラグイン「NextrGen Gallery」をご紹介。

NextGen Flashviewerの効果がステキな様子。

はじめに、「NextGen Gallery」を入れておく必要がある。

1. 「NextGen Gallery」をインストールする。
   インストール方法はプラグインの「新規追加」から追加、もしくはダウンロード＆アップロードで追加する。
2. 「NextGen Gallery Flashviewer」をインストールする。
   インストール方法はプラグインの「新規追加」から追加、もしくはダウンロード＆アップロードで追加する。
3. 「Airtight Viewers」より「SimpleViewer」「TiltViewer」「AutoViewer」「PostCardViewer」の各ビューアーのzipファイルをダウンロードし解凍する。
4. 解凍したフォルダに含まれるswfファイルを、デスクトップなどに「nggflash-swf」というフォルダを作成してコピーしておく。
   「PostCardViewer」の「viewer.swf」のみ、「pcviewer.swf」にリネームが必要なので注意する。
5. 「wp-content/plugins/」に「nggflash-swf」フォルダをswfファイルごとアップする。
6. プラグインの使用を開始する。

以上で、左側のナビゲーションに「Gallary」ボタンが追加され使用できるようになる。

具体的な使い方は明日説明する予定。

初歩的なことを忘れていたのでメモ。

jsのプルダウンメニューがflashにかかってしまう場合、objectタグで何も指定しないとflashの後ろにプルダウンメニューが入り込んでしまう。

また、ドリ標準のflash埋め込みは分かりにくいのでswfobjectを使用してみる。

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

ヘッダー内に上記記述を入れる。

<div id="flashcontent">
	ここはswfobjectでは読み込まないっす。
	flash playerがないとき表示されます。
</div>
<script type="text/javascript">
	var so = new SWFObject("flashdata.swf", "flas data", "500", "300", "9", "#ffffff");
	so.addParam("wmode", "transparent");
	so.write("flashcontent");
</script>

※tenteruさんのご指摘により「so.addParam」と「so.write」が逆になっておりましたので修正しました［2009/12/18］

と書けばok

so.addParam("wmode", "transparent");

これが肝。
プルダウンが上に表示される。

ちなみにswfobjectのパラメータは次の通り。

SWFObject(“flashdata.swf”, “flash movie”, “500″, “300″, “9″, “#ffffff”)

• flashdata.swf＝swfファイルのソース。
• flash movie＝このムービーの名称。特に気にする必要はない。
• 500＝swfの幅。
• 300＝swfの高さ。
• 9＝flash playerの対応バージョン。
• #ffffff＝背景色。

とのこと。