Hypeでインタラクティブ・アニメーション効果とか動画の埋め込みとか

　先日ここで書いた、HTML5ベースのアニメーション等を簡単に作成できるオーサリング・アプリHypeですが、引き続きアレコレいじってみて、思いついたことを気ままにテストしてみました。
　というわけで、簡単なテスト結果を幾つか。

【インタラクティブ・アニメーション効果のあるギャラリーページを作ってみた】
hype_darkroom
　実際のページはこちら。【公開終了】
　要するにマウスオーバーやクリックに反応するアニメーションを使って、フォトギャラリー的なページに遊び要素を付け加えてみたものです。
　Hypeでは一つのシーンに複数のタイムラインを持たせることができるので、サブのタイムラインでドアの開閉やライトの明滅のアニメーションを用意して、ターゲットのクリックやマウスオーバーで、それらが動くようにしてみました。クリック用のマップは、写真の上に不可視のボックスを配置することで対応。
　全体を４シーンで構成。タイムラインの数は、多いときでメインを含めて７つ。シーン間の移動は、クリックでリンクを飛ぶタイプと、タイムライン終了後にオートで移動するタイプの二つを使っています。
　後者の、タイムライン終了後の次のアクションをどうするか（何もしない、シーンを移動、タイムラインの再生、Java scriptの再生、等）を指示できるのは、なかなか便利で面白いんですが、どうも１つのシーン内でサブのタイムライン個々に別々の指定をすることができないのが残念（サブのタイムラインを選択した状態で、タイムライン終了後のアクションを指定すると、それがメインのタイムラインにも適用されてしまう）。

【YouTube動画やムービーファイルを埋め込んでみた】
hype_movietest
　実際のページはこちら。【公開終了】
　まずYouTube動画の埋め込み。
　これはデフォルトでそういう機能が用意されているわけではありませんが、フォーラムを見たら事例があったので試してみました。
　具体的には、Hypeにはそれぞれのオブジェクトにinner HTMLというものを記入することが出来るので、それを使います。線と塗りをオフにしたボックスを配置し、そのinner HTMLに、YouTubeで取得できる埋め込み用のEMBEDコードを記入するだけ。
　結果として上手くはいきましたが、いったんYouTubeのEMBEDコードを記入してしまうと、なぜかエディタ上でタイムラインが操作できなくなるという現象あり。結果、先にアニメーションを指定しておいて、EMBEDコードは最後に記入するという方式で回避できましたけど。
　次に、サーバ上に用意したムービーファイルの埋め込みについて。
　いちおうHypeのマニュアルに書かれていたように、Safari、Chrome、IE、Firefoxなど、それぞれのブラウザに対応したフォーマットの動画ファイルを複数用意して（具体的には、H264 (mp4)、Theora (ogv)、 VP8 (webm)の３種類）埋め込んであるんですが、なぜかFirefoxは、ローカル環境では問題なく作動していたのに、サーバにアップするとエラーが出て再生できなくなるという現象あり。
　IE、Windows環境、iPhoneやiPadのiOSでどうなっているのかは未検証。
　動画を埋め込んだときの問題点は、アニメーション用のタイムラインと動画自体のタイムラインが別々に作動し、前者が優先されるということ。
　具体的には、例えば動画の再生が終了したら、自動的に次のシーンに飛ぶといったことが指示できない。タイムラインでそう指示していても、動画の再生は必要な読み込み時間などでタイムラグが発生し、結果、動画はまだ再生途中なのに、タイムライン上で「終了」と判断され（おそらく「動画の長さ＝タイムラインの長さ」になってしまい、読み込み時間などの誤差は無視されてしまう）、次のシーンに飛んでしまいます。
　フォーラムで対応策がないか調べたんですが、どうやら現時点では無理らしいです。
　最後の、文字が一文字ずつ出てくるアニメーションですが、これもテキストのinner HTMLを使っています。こんな感じて、例えばテキストの文面が３秒後に自動で丸々変化する、なんて設定もできます。

【強引に音声ファイルを埋め込んでみた】
hype_soundtest
　実際のページはこちら。【公開終了】
　Hypeは音声ファイルの埋め込みには対応していない（フォーラムによると、現状、ブラウザごとの対応ファイル形式がビデオ以上に錯綜した状態にあるのが、非対応の主な理由らしいです）んですが、ビデオの埋め込みを応用して、そこに強引にmp3ファイルを埋め込んでみました。
　これが上手くいけば、BGM付きのスライドショーなんてのも作れるかな……と思ったんですが、結果を先に言うと、あまり現実的ではない感じです。
　とりあえず出来たHTML5を、Twitterで有志の方にそれぞれの環境でチェックしていただいたんですが、マトモに動作したのはSafariとChromeだけという結果に。Firefox、IE、iPhone、iPadは音声が再生できず、Androidだと逆に音声だけ再生だった模様。
　理由としては、音声ファイルの対応フォーマット以外にも、ブラウザがオートスタートに対応しているかどうかもあるようですが、おそらくビデオのときと同様に、埋め込みファイルのタイムラインとHype自体のタイムラインを完全に同期させるのは難しいのではないかと。
　そんなこんなで、音と絵が同期したBGM付きスライドショーは、あらかじめ別アプリで作った動画を埋め込むしかない感じです。