「flShowの利用」というページを書いたらその当日に「flShow」をキーワードに検索をして訪問してくれた人が３人もいらっしゃったので、利用方法で迷われている方のために記録をしておきます。
※当初、誤って「flshow」を「flShows」と記述していました。すみません。
●使ったファイル
flshow.html
（flShowを表示するためのファイル。このブログでは設置が面倒な気がしたので、QPBGMのサーバーに置いて、iframeを使ってこのブログで表示させています。このファイルを基準にして以下のファイルを設置していきます。）
icons.xml
(ファイル名は自由に決められますが、flshow.html内の記述で、そのファイル名を指定する必要があります。)
Carousel.swf
（flShowの本体。先頭が大文字であることも含め、ファイル名はそのままにしました。flshows.htmlと同じディレクトリーでもいいのですが、サイト管理上別のディレクトリーに置きました。flshows.html内の記述で、Carousel.swfへのパスを正しく書く必要があります。）
swfobject.js
(これは、flShowの作者のファイルではありません。従って、こちらからダウンロードします。)
画像ファイル
（新規に用意をしても、すでにある画像ファイルを使っても構いません。パスを正確に書けば、他のディレクトリーや他のサーバーのファイルも指定できます。）
●記述
○flshow.html
<body>
・・・・・
<div class="carousel_container" style="width: 650px; height: 500px; margin: 0px auto;">
<div id="mySlideShowDiv"><br /><br /><br /><span style="color:red;">This slideshow requires Adobe Flash Player 9 (or later) and JavaScript enabled.</span></div>
</div>
<script type="text/javascript">
swfobject.embedSWF("../flash/Carousel.swf", // flash file
"mySlideShowDiv", // div id
"650", "500", // width and height
"9.0.0", // flash palyer version
false, // autoinstall
{xmlfile:"icons.xml", loaderColor:"#000066"}, // flashvars
{bgcolor: "#ffffff"}, // parameter
{}); // attributes
</script>
・・・・・
</body>
☆../flash/Carousel.swf が、Carousel.swfへのパスです。
☆icons.xmlは同じディレクトリー内に置いたので、ファイル名を書いただけです。
☆最初の「<div class="carousel_container"・・・</div>」で、表示位置とサイズが決められるので、これを忘れずに記述します。（実は私はこれを書き忘れて、苦労をしました。）
○icons.xml
<slide_show>
<options>
<background>0xffffff</background> <!-- 0xRRGGBB -->
<margins>
<bottom>60</bottom> <!-- [-1000,1000] pixels -->
<vertical_ratio>50%</vertical_ratio> <!-- [1,100] a photo may occupy at most verticalRatio percent of the Carousel height -->
</margins>
<far_photos>
<size>60%</size> <!-- [0,100] -->
<amount>40%</amount> <!-- [0,100] -->
</far_photos>
<interaction>
<rotation>mouse</rotation> <!-- auto, mouse, keyboard -->
<view_point>mouse</view_point> <!-- none, mouse, keyboard -->
<speed>30</speed> <!-- [-360,360] degrees per second -->
<default_speed>15</default_speed> <!-- [-360,360] degrees per second -->
<default_view_point>100</default_view_point> <!-- [0,100] percentage -->
<reset_delay>5</reset_delay> <!-- [0,600] seconds, 0 means never -->
</interaction>
<reflection>
<amount>50</amount> <!-- [0,1000] -->
<blur>4</blur> <!-- [0,10] -->
<distance>5</distance> <!-- [-1000,1000] -->
<alpha>50%</alpha> <!-- [0,100] -->
</reflection>
</options>
<photo href="#" target="_top" title="キユーピー">../img/vegetables/kewpie150.gif</photo>
<photo href="#" target="_top" title="トマト">../img/vegetables/tomato150.gif</photo>
<photo href="#" target="_top" title="トウモロコシ">../img/vegetables/corn150.gif</photo>
<photo href="#" target="_top" title="タマネギ">../img/vegetables/onion150.gif</photo>
<photo href="#" target="_top" title="キャベツ">../img/vegetables/cabbage150.gif</photo>
<photo href="#" target="_top" title="なす">../img/vegetables/eggplant150.gif</photo>
<photo href="#" target="_top" title="ピーマン">../img/vegetables/pimento150.gif</photo>
<photo href="#" target="_top" title="にんじん">../img/vegetables/carrot150.gif</photo>
<photo href="#" target="_top" title="レタス">../img/vegetables/lettus150.gif</photo>
</slide_show>
一番下の <photo href="#" target="_top" title="キユーピー">../img/vegetables/kewpie150.gif</photo> からが、画像ファイルの指定です。一般的なパスの書き方あるいはweb上でのファイル名の指定の仕方になります。
ただし、同一ディレクトリー内のファイルを、たとえば、
./kewpie150.gif
と書くことがありますが、これはflShowでは無効かも知れません。
また、リンク先の記述もここに書きますが、今回のファイルではすべて「href="#" 」としましたので、どこかのページが新たに開くことはありません。
※flShowの利用〜追記(2)も書きました。
2010年10月01日
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/41034708
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
http://blog.sakura.ne.jp/tb/41034708
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。
