ブログのタイトルをFlashにしました


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

コメントを残す

メールアドレスが公開されることはありません。

Time limit is exhausted. Please reload CAPTCHA.