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でわかりづらくてすみません。自分用メモということでご勘弁を。