2010年10月02日

flShowの利用〜追記(2)

flShowの設定についてさらに調べてみた。

マウスカーソルを画像の上に乗せたときに表示する文字をこのソフトではtitleというのだが、説明が長いときには改行をしたかったのだ。

改行の他、着色やイタリック、ボールド、フォントの指定、さらに背景(吹き出し)のデザインもできることが分かった。

全体の背景も透過色にできるので、本体のHTMLで画像を指定してそれを生かすこともできる。



まず、HTML内の記述に太字の1行を加える。
つまり、{wmode: "transparent"}として、背景の透過色指定をする。

<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:"flshow2_icons.xml",  loaderColor:"#000066"}, // flashvars
{wmode: "transparent"},
{bgcolor: "#ffffff"}, // parameter
{}); // attributes
</script>


次に、xmlファイルの記述の追加。(太字の部分)

<options>

<titles>
<style>
body { font-size: 14px; <!-- pixel only -->
font-family: Georgia, _serif; <!-- as standard CSS -->
color: #FFCC66; <!-- as standard CSS -->
}
.red { color: #FF0000; }
</style>


ここまで書いたら、とりあえず</style>で閉じる。

吹き出し部分をbodyに見立て、スタイルシートと同じ記述をすることで、フォントサイズ、フォントタイプ、フォント色を一括して行える。さらに、クラスやIDの指定もできる。(上の例ではidのみ)

こちらは、吹き出しの位置。
<position>above right</position> <!-- [above, below] [left,center,right] -->

吹き出しの背景指定は以下の通り。
<background>../img/mytitlebg.png</background> - <!-- image url -->
<scale9>14 14 14 14</scale9> - <!-- [0,1000] pixels -->
<padding>8 12 8 12</padding> - <!-- [-1000,1000] pixels -->
</titles>


(中略:元の記述内容)

</options>

そのあとに、個々の画像ファイルの指定。
<photo>
<href>../index.html</href><target>_blank</target>
<title>キユーピー</title>
<src>../img/vegetables/kewpie150.gif</src>
</photo>

<photo>
<href>../img/vegetables/tomato150.gif</href><target>_blank</target>
<title>トマト or a <span class="red">tomato</span>, isn't it? </title>
<src>../img/vegetables/tomato150.gif</src>
</photo>
(以下、略)

 なお、トマトの、<span class="red">tomato</span> に注意が必要。idではなくclassとなる。

これで、上書き、アップロード。


非常に興味深いのは、吹き出しの画像を指定するが、文字が入りきれないときには、自動的に拡大する仕組みになっていること。しかも、単純に拡大するのでは余白が不自然になったり、縁取りの幅が変わってしまうのだが、どうやらscale 9 gridという画像処理の方法があるようだ。ファイル内の指定では、
<scale9>14 14 14 14</scale9>
の部分にちょっとだけ出てくる。

これが吹き出しの本来の背景画像なのだが、


文字数や行数に応じてこんなふうに表示される。
fl_fukidashi.gif

ただし、
<scale9>14 14 14 14</scale9>
の数値を変えてみたが表示に変化はなし。

ためしに、違う画像を用意してみた。
mayonnaise.png



実際に使ってみると・・・

(備考:<padding>18 22 18 22</padding>に設定)

mayonnaise2.png
 
mayonnaise3.png

形のあるものは、あまり使えないことが分かった。


flShowの利用
flShowの利用〜追記

※野菜の画像は、フリー・画像サイトhttp://clipart.myds.jp/vegetables/のものを使用させていただきました。

posted by kewpie at 21:52| Comment(1) | TrackBack(0) | ファイル作成
この記事へのコメント
文字以外の詳しい設定について、次の日本語サイト(ブログ)があります。

http://d.hatena.ne.jp/moetsukiro/20090311/1236731302
Posted by kewpie at 2010年11月13日 16:54
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/41066267
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。