PC版ブログのタイトル（Webページの一番上のロゴイラスト）の部分をFlashにして動きをつけてみました。まあ自己満足ですけどねw。で、そのときにいろいろと苦労したことをメモメモ。
【Flash作成】
Adobe謹製のFlashツールは高くて使えないので、フリーツール「Suzuka」と「Inkscape」を使いました。SuzukaはFlash作成ツールで、タイムラインを使って動きをつけることができたりActionScriptを使えたりとなかなか高機能です。ただSuzuka上で画像を編集することはできないので、Inkscapeで作成したロゴデータをSuzukaに取り込むような感じにしました。使ったツールは本当にこれだけです。ただでここまでできるなんて、いい時代になりましたねぇ。
【タイトル部分への埋め込み】
タイトル部分に単純にFlashを埋め込むと、「今日の気分はバリいくつ？」などの文字がFlashに隠れて見えなくなってしまうため、ここの情報を参考に一工夫しました。肝は、
・Flashを表示させるobjectタグ内にwmode=transparentを指定する
・CSSでz-indexを指定する
・bodyのonloadイベントでjavascriptでFlashを表示させる
[CSSの抜粋]～positionをabsoluteに、z-indexを指定してflashのほうを裏に持っていっています。
#header div#headerflash {
position:absolute;
top:0;
z-index:1;
}
#header div#headercontent{
position:absolute;
z-index:2;
}
[HTMLの抜粋]～Flashを表示するdivを定義しています。onloadイベントにJavaScriptメソッドonloadFlashを定義しているところもミソです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
...
<head>
...
<script src="http://blog.bari-ikutsu.com/wp-content/themes/forwordpress1/dispflash.js"></script>
</head>
<body onload="onloadFlash();">
<div id="wrapper">
<div id="header">
<div id="headerflash"></div>
<div id="headercontent">
<h1 id="title"><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="description"><?php bloginfo('description'); ?></div>
<div id="kmax">member of <a href="http://kmax-biz.com/">K-MAX LLP</a></div>
</div>
</div>
...
[JavaScriptの抜粋]～わかりにくいのですが、idがheaderflashのdivのinnerHTMLにFlashを表示するobjectタグを設定しています。wmode属性がtransparentに鳴っているところにも注目してください。
function onloadFlash()
{
document.getElementById('headerflash').innerHTML =
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"
width="900" height="104"><param name="wmode" value="transparent">
<param name="movie" value="http://blog.bari-ikutsu.com/wp-content/themes/forwordpress1/bari-ikutsu_logo.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="quality" value="high" />
<embed src="http://blog.bari-ikutsu.com/wp-content/themes/forwordpress1/bari-ikutsu_logo.swf"
wmode="transparent" quality="high" width="900" height="104" name="bari-ikutsu_logo" align="middle"
type="application/x-shockwave-flash"/></embed></object>';
}
もうなんだかgdgdでわかりづらくてすみません。自分用メモということでご勘弁を。