Hype 1.0.3ではコーディングなしでHTML 5アニメーションを作成できます

TumultのHype 1.0.3を使えば、コードを1行も書かずにインタラクティブなHTML 5アニメーションを作成できます。使い方は簡単なので、初心者でもすぐに見栄えの良いアニメーションを作成できますが、改善の余地はあります。限られたデザインツールと柔軟性に欠けるインターフェースは、複雑なプロジェクトの構築を妨げる可能性があります。

シーンをデザインする

Hypeプロジェクトは1つ以上のシーンで構成され、Keynoteプレゼンテーションのスライドのように機能します。シーンにはテキスト、画像、動画、その他の要素を含めることができますが、オーディオファイルのインポートはまだサポートされていません。スナップガイドと自動配置コマンドにより、要素を正確に配置してカスタマイズできます。Hypeのインスペクタでは、角度、色、不透明度などのプロパティを微調整できるほか、作業中にカスタマイズ可能なブラウザリストで潜在的な非互換性を警告します。

HypeのiWork風デザインツールは使いやすいものの、多くの馴染みのある機能が欠けています。要素を固定したりグループ化したりできず、シーンに追加できる図形は正方形のみ（ただし、調整して罫線や円を形成することは可能です）です。コンテキストメニュー、画像編集ツール、マスキングツールはなく、ワークスペースの表示を拡大縮小する機能もないため、ディスプレイの小さいMacで大きなドキュメントを作成するのは困難です。これらの問題は必ずしも致命的な欠点ではありませんが、洗練されたアプリケーションとしては残念な欠点です。

動きとインタラクティブ性の追加

要素をアニメーション化するには、まずそのプロパティ（位置など）を 1 つ以上選択し、Hype のタイムラインに開始キーフレームと停止キーフレームを追加して、各ポイントで異なる状態を作成します。Hype が「中間」フレームを自動的に作成します。便利な記録機能により、アクションが監視され、キーフレームが自動的に作成されてプロパティがリアルタイムに変更されるため、このプロセスは簡素化されます。また、複数のアニメーションを作成して、アニメーション化されたシーン内で要素に異なる外観を与えることもできます。例えば、マウスオーバー時に画像が光ったりフェードアウトしたりするなどです。アニメーション、シーントランジション（オプションでディゾルブ効果やプッシュ効果も使用可能）、さらには JavaScript アクションは、自動的に実行されることもあれば、マウスのクリック、マウスオーバー、キーの押下などのユーザーイベントに反応して実行されることもあります。Hype またはブラウザでプロジェクトをいつでもプレビューし、アニメーションがどのように表示されるかを正確に確認できます。

プロジェクトのタイミングを微調整するために、タイムラインでキーフレームを自由に再配置し、キーフレーム間のアニメーションを長くしたり短くしたりできます。そこでアニメーションをダブルクリックすると、正確なキーフレームの開始時間を入力し、アニメーションの長さを設定し、再生時にアニメーションをイーズインまたはイーズアウトするかどうかを選択できます。ただし、多数の要素を含むプロジェクトでは、タイムラインで複数のアニメーションを管理することが困難な場合があります。要素のプロパティはタイムラインの横のリストに表示されますが、多くの要素を一緒に表示するには大きな画面が必要です。または、タイムラインのペインを拡大して作業スペースを隠す必要があります。要素は、比較しやすいようにリスト内で互いに近づけることができますが、そうすることで、シーン内の他の要素の上または下に表示されるかどうかも影響を受けます。

Hype では既存のサイトのアニメーションを作成できますが、スタンドアロンの視覚重視の Web サイトを構築することもできます。

プロジェクトが完成したら、Dropbox のパブリックフォルダにエクスポートして世界中に共有するか、HTML 5 ドキュメントとリソースフォルダにエクスポートできます。エクスポートした HTML ファイルから、明確にマークされたコードを数行選択し、既存の HTML ドキュメントに貼り付けてリソースをアップロードすることで、既存のサイトに追加できます。エクスポート時にオプションの互換性チェックを実行すると、最終プロジェクトの再生に問題が発生するブラウザ（存在する場合）を特定できます。

Hype で作成し、Dropbox にエクスポートしたサイトがこちらです。