Flash」タグアーカイブ

「新しいiPad」発売記念!ブログのアニメーションバナーをHTML5対応にしてみた


当ブログ(PC版)画面上部のバナー

image

は、Adobe Flashでアニメーションするようになっていますが、iPhoneやiPadのようなFlash非対応デバイスの増加や、Android向けFlashの提供がAndroid 4.0系を最後に停止される見込みであること、また次世代Windows「Windows 8」のInternet Explorerで主に使われるMetroスタイルでFlashをサポートしないなど、何かとFlashの肩身が狭くなってきていました。そこで可能な限り原型を残しつつ、この部分を(Flash非対応ブラウザでも動く)HTML5ベースで再構築することに。

使用したのはGoogleが提供している「Swiffy」というサービス。

Google Swiffy (Google)

このサービスを使うと、Flashのファイル(***.swf)をアップロードすると、同じような動きをするHTML5のコード(***.html)を自動生成してくれます。もちろんFlashの全機能に対応しているわけではないのですが、簡単なアニメーションであればほぼそのまま変換できます。上が元のFlash、下が変換されたHTML5です。画像では何のことだかわからないと思いますが、ほぼ同じような動きをするHTML5コードに変換されます。

image

すでにSwiffyで変換されたアニメーションバナーはこのブログ(PC版)に組み込まれており、HTML5に対応するブラウザではHTML5版が、そうでないブラウザではFlashが自動的に選択されて表示されます。主要ブラウザでひと通り動作確認はしてあります。なおAndroidではHTML5もFlashも動作が不安定なのでアニメーション自体を無効にしています。

実はSwiffyは発表当時に一度試したことがあるのですが、その時はSwiffyの対応もブラウザ側の対応も不十分で、こんなシンプルなアニメーションバナーですらFlashを置き換えることができませんでした。しかし今回はほぼ問題なくHTML5で置き換えることができており、着実に進歩しているなあと。

※タイトルの「新しいiPad」はステマですw。一応iPadでも動作確認はしてありますが…

携帯ページのFlashやめました


よくよく考えてみたらパケット代を気にしながらブログを見てくれている人もいるわけで、意味のないアニメーションFlashは外すことにしました。ついでに画像ファイルについても圧縮方式を見直してサイズを半分にしました。できるだけパケット代が安く上がるようにしましたので、携帯電話ユーザーの皆様、これからもちょくちょく寄ってくださいね。

携帯ページにもFlash導入


フリーソフト「Suzuka」でFlashを作ることに慣れてきたので、調子に乗って携帯版ブログ(このブログを携帯電話で見たときの表示)とWeb(http://m.bari-ikutsu.com)のタイトルもFlashにしてみました。

携帯電話のFlashは「Flash Lite」で、こまごましたことをしようとするとスクリプトの書き方が違って苦労するようですが、今回のようなアニメーションタイトルだけの場合、Suzukaの設定を「Flash4」にして、フレームレートを10くらいにセットして作成すれば、そのまま携帯電話で表示できるようです。

実は当ブログ、携帯電話ネタが多いせいか、アクセス数の半分近くの方が携帯電話からで、そのほぼすべてがFlashに対応しています。ぜひ一度、私の自己満足の携帯電話版タイトルFlashを見てやってください。

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