Tumult Hypeを使用した視覚的な広告作成ワークフロー

Tumult Hype

を使用してリッチメディア広告を効率的に作成します

（この記事はTumultが後援しています） SitePointを可能にしたパートナーをサポートしてくれてありがとう。

この記事は、Tumult Hypeを使用してリッチメディア広告を作成する方法を示すことを目的としています。広告を作成するというコンテキストでアプリを使用することの基本をカバーし、広告固有のヒントとトリックについて説明します。読んだ後、HTML5広告をすばやく美しく作成できるようになります！

キーポイント

• Tumult Hypeは、MacOSの主要なHTML5アニメーションとインタラクティブなアプリケーションであり、アニメーションとインタラクティブな機能を備えたリッチメディア広告を作成するための強力なツールとなっています。
• このアプリは、基調講演と同様のユーザーフレンドリーなインターフェイスを提供します。最も一般的なインタラクションはエンコードを必要としません。ただし、より高度な機能のためにJavaScript操作をサポートします。
• Tumult Hypeの広告作成ワークフローには、広告サイズの選択、資産のインポート、要素のアニメーション化、インタラクティブ性とアクションの追加、プレビュー、最終配信のエクスポートが含まれます。エクスポートスクリプトプラグインシステムは、広告プラットフォーム機能を統合し、エクスポートタスクを自動化できます。
• Tumult Hypeは、14日間のフル機能トライアルを提供し、99.99ドルの価格のプロフェッショナルバージョンのフルバージョンを提供しますが、SitePointユーザーは25％の割引を楽しむことができます。

HTML5広告の​​台頭

私たち全員が知っているように、デジタル広告にアニメーションとインタラクティブ性を追加すると、広告がより効果的になります。訪問者の注意を引き付けることに加えて、リッチメディア広告は製品やブランドをよりよく通信し、エンゲージメントを増やすことができ、より多くのクリックをもたらします。

リッチメディア広告は本質的に視覚的であるため、視覚化ツールでそれらを構築することは理にかなっています。変更はすぐに表示されます。何年もの間、Adobe's Flashは視覚的な広告作成ツールのKingでしたが、モバイルデバイスでのHTML5の互換性に置き換えられてきました。テクノロジーとして、HTML5広告には、アクセスしやすく、消費電力が少なくなるという利点も追加されています。しかし、HTML5自体は単なるマークアップ言語であり、Flashなどの視覚化ツールが組み込まれていません（FlashはFlash Professionalアプリを使用します）。手で広告を構築することは非常に遅いプロセスです。幸いなことに、HTML5を出力できる複雑な視覚化ツールがいくつかあります。

Tumult Hypeは視覚的な設計ツール

です

Tumult Hypeは、MacOSの主要なHTML5アニメーションとインタラクティブアプリケーションです。使いやすく、学習しやすい誇大広告が存在します。レイアウトは基調講演に似ており、各属性アニメーションキーフレームは、クイック「録音」機能を使用して自動的に作成できます。 Hypeは、カーブモーションパスに沿ったアニメーション、カスタマイズ可能な緩和/タイマー関数、同時に実行されるタイムライン、再利用可能なシンボルをカプセル化するなど、アニメーション機能の強力なセットを提供します。 JavaScriptの操作は、他のライブラリやサービスとの統合を通じて機能を拡張できますが、最も一般的な相互作用にはエンコードは必要ありません。

Tumult HypeはさまざまなHTML5コンテンツに使用できますが、特に豊富なメディア広告の作成に適しています。 「エクスポートスクリプト」と呼ばれるプラグインシステムは、広告プラットフォーム機能を統合し、配信のためにエクスポート出力をパッケージ化するのに役立ちます。高度なエクスポート機能は、エクスポートタスクの自動化にさらに役立ちます。 Hypeのランタイムライブラリは非常に小さく、25kbの圧縮サイズがあり、リソースのための十分なスペースを提供します。このランタイムはアニメーションを駆動し、ブラウザの互換性の問題を管理します（ただし、アプリケーションは、特定のブラウザで機能が実行できない場合でも警告します）。

Tumult Hypeを使用したAD作成ワークフロー

Tumult HypeとExport Scriptsを取得します

最初のステップは、Tumultの誇大広告をダウンロードすることです。トライアルバージョンは完全に機能しており、14日間使用できます。 Tumult Hypeには、標準と専門家の2つのモードがあります。広告の作成（およびこの記事を読む！）には、Hype Proを使用する必要があります。

エクスポートスクリプトを取得することを選択できます。これにより、追加の広告関連機能が誇大広告に追加されます。現在、Sizmek、Doubleclick Studio、Doubleclickキャンペーンマネージャーのスクリプトがあります。別の広告プラットフォームを使用している場合は、通常、標準出力を簡単に調整できます。

誇大広告の「設定」を調べて、エクスポートスクリプトがインストールされていることを確認できます。スクリプトをエクスポートすると、ドキュメントインスペクターにオプションが表示される場合があります。

広告サイズを選択

誇大広告を開始した後、作成する広告に一致するようにシーンサイズを設定する必要があります。これは、シーンインスペクターの幅と高さを設定するか、プリセットサイズの1つを選択することで実行できます。誇大広告には、一般的な広告バナーと長方形のプリセットサイズが含まれています。

広告に異なるサイズの表現がある場合、レスポンシブレイアウトと柔軟なレイアウトシステムを使用できます。レスポンシブレイアウトにより、幅ベースのブレークポイントの異なるコンテンツを表示できます。後で別々にエクスポートできます。柔軟なレイアウトシステムは、コンテナサイズに応じて要素の位置とサイズを調整します。

リソースをインポート

Tumult Hypeには基本的な形状とテキストのプリミティブがありますが、Photoshop、Illustrator、Sketchなどの他のプログラムから画像資産をインポートする可能性が高いでしょう。これらを単純にドラッグしてシーンエディターにドロップするか、「挿入...」メニュー項目を介して追加できます。誇大広告はリソースのコピーを保持しますが、元のリソースの変更に気付いた場合、更新を要求し、反復に役立ちます。

リソースライブラリにリソースを見つけることができます。ここでの1つのオプションは、エクスポート時に自動的に最適化することです。この機能はデフォルトで有効になり、次のタスクが自動的に実行されます。

1. 網膜（@2x）および生成された画像の非網状（@1x）バリアント（誇大広告が実行されたときにロードされるバリアント）
2. 画像サイズをドキュメントで使用する最大サイズに削減
3. ファイルサイズが改善されている場合、画像を動作する場所に圧縮してみてください
4. ネットワーク以外のセキュアイメージ形式
を変換します

これは通常有用ですが、広告ファイルサイズのターゲットと競合する場合があります。たとえば、ADのファイル全体のサイズは通常、実際にダウンロードされたコンテンツではなく、zipファイルから測定されます。したがって、網膜バリアントと非網膜バリアントの両方が重量を増やします。また、自動化された方法で誇大広告よりも優れている場合があります（ImageOptimなどのツールを使用）。このボックスを外す必要があるかもしれません。

とにかく、ビットマップベースのリソースは非常に迅速に蓄積する可能性があります。ブラウザによって広くサポートされているSVGの使用を検討することをお勧めします。誇大広告はそれらを画像として扱いますが、最適化しようとはしません。

ちなみに、IABは、ページを合理化するのに役立つように、最初は15以下のリソースをロードすることを推奨しています。

アニメーションの初心者

資産をドラッグしたり、テキスト/形状を挿入して要素を作成したら、次の手順で簡単にアニメーション化できます。

[録画]ボタンをクリック

プレイヘッドを後でドラッグします
要素の位置を変更するか、他の属性（不透明など）を変更する

録音は、各属性キーフレームを追加するためのUIショートカットです。いつでも手動で作成または編集できます。これには、タイミング機能をさまざまな緩和や弾力性やリバウンドなどの効果に変更することが含まれます。モーションパスをドラッグして曲線に形作ることにより、位置アニメーションをさらに改善できます。

誇大広告のタイムラインは、アニメーションストリームと見なすことができます。誇大広告のシーンには、常に少なくとも1つのタイムラインがあります。これはメインタイムラインです。複数のタイムラインを作成し、並行して実行できます。これは、操作またはループを維持するために特定の要素をアニメーション化するために多くの場合役立ちます。

シンボルは同様の役割を果たすことができます。彼らは再利用可能な「シーンでのシーン」を表し、独自の要素を含み、独立したタイムラインアニメーションを実行します。シンボルを備えた他のアプリケーションと同様に、ある場合の変更は他のすべてのインスタンスに反映されます。

インタラクティブ性と操作を追加

ビデオ/アニメーションGIFの代わりにHTML5を選択する利点は、ユーザーとの相互作用と相互作用を可能にすることです。相互作用はイベントへの応答です。これらのイベントは、マウスクリック、ドラッグ、スライド、シーンの読み込み、ウェイポイントヒット、またはキープレスなどです。運用上の応答は、創造的な目標に依存します。アニメーションを起動したり、アニメーションをバインドしてドラッグしたり、シーンを変更したり、カスタムコードをトリガーしたりすることもできます。広告の世界では、典型的なタスクは、ボタンをクリックして外部URL（「exit」とも呼ばれる）に移動するか、広告サーバーに報告できるカウンターをトリガーすることです。

ほとんどの場合、インタラクティブはコードなしで作成されます。以下は、マウスのクリックに応じてアニメーションを実行するための基本的な手順です。

要素を選択
1. を選択します
操作検査官に移動して、
2. をクリックして
3. 操作のスタートタイムラインを選択し、次にタイムラインポップアップボタンで新しいタイムラインを選択します...
4. タイムラインに名前を付けて、アニメーションを作成します

エクスポートスクリプトは、イベントに応じて選択できる広告固有のアクションを提供することもできます。これらは同じアクションポップアップリストに表示されます。

さらに、JavaScriptを実行すると、AD関連の関数を呼び出したり、Hype APIを呼び出すなど、任意のカスタムコードに操作を使用できます。

preview

ビルドプロセス中に広告を頻繁にプレビューして、最終的なアニメーションとインタラクティブ性が予想どおりに実行されるようにすることが重要です。プレビューメニューを使用すると、コンピューター上の異なるブラウザ間をすばやく切り替えることができます。オプションキーを押し続けると、現在選択されている特定のシーン/レイアウトをプレビューできます。誇大広告は、無料の誇大宣伝リフレクトアプリを使用してiOSデバイスにプレビューすることもできます。

エクスポートスクリプトを使用している場合、その出力もプレビューに含めることができます。これを行うには、プレビューメニューを開き、「エクスポートスクリプトを使用してプレビュー」の下でスクリプトを確認します。

エクスポートと配信

広告が終了した後、最終配達のためにエクスポートする必要があります。 「ファイル> html5へのエクスポート」メニューには、デフォルトの.htmlページと対応するリソースフォルダーを生成する「フォルダー...」オプションが含まれています。このメニューには、エクスポートスクリプトが提供するオプションも提供します。これらは自動的にパッケージ化され、通常は不要なリソースを削除し、単一の.zipファイルに圧縮します。

さらなる自動化のために、「ファイル> Advanced Export ...」ツールを使用する必要がある場合があります。これにより、広告を特定のシナリオまたはレイアウトに分割し、エクスポートスクリプトを使用できます。 「ビデオとしてのファイル＆gt;エクスポート」は、必要に応じていくつかの静的な画像/ビデオオプションを提供します。

結論

これらは、Tumultの誇大広告を備えた豊富なメディアHTML5広告を作成するための主な手順です！視覚化ツールとして、誇大宣伝は機能や機能を制限することなく、作成と反復プロセスを大幅に高速化できます。エクスポートスクリプトの広告固有のワークフロー機能デジタル広告制作における多くの一般的なタスクを自動化します。これらのエクスポートスクリプトは誰でも構築または変更できます。そのため、広告システムや自動化がない場合は、好きなように構築できます。

もっと学ぶことに興味がある場合は、Tumult Webサイトのドキュメントとチュートリアルをご覧ください。 Hypeは、14日間のフル機能トライアルを提供し、99.99ドルの価格のプロフェッショナルバージョンのフルバージョンを提供しています。

しかし、今、SitePointユーザーとして、ここでProバージョンをわずか74.99ドルで入手できます。これは25％の割引です！

FAQ（FAQ）視覚的な広告作成ワークフローの誇大宣伝

Tumult Hypeは、CanvaやAdobe Expressなどの他の広告作成ツールとどのように比較されますか？

Tumult Hypeは、インタラクティブでアニメーション化されたコンテンツを作成できる強力なツールです。 CanvaやAdobe Expressの主な設計ツールとは異なり、Tumult Hypeはアニメーションとインタラクティブに焦点を当てています。タイムラインベースのインターフェイスを提供するため、コーディングなしで複雑なアニメーションを簡単に作成できます。ただし、より高度な機能のためにJavaScriptもサポートしています。これにより、シンプルなアニメーションから複雑なインタラクティブコンテンツまで、幅広いプロジェクトのための普遍的なツールになります。

Tumult Hypeを使用してFacebookの広告を作成できますか？

はい、Tumult Hypeを使用してFacebookの広告を作成できます。このツールを使用すると、FacebookがサポートしているHTML5コンテンツを作成できます。インタラクティブでアニメーション化された広告を作成して、視聴者を引き付け、キャンペーンの有効性を高めることができます。ただし、Facebookには広告の特定の要件があることに注意してください。したがって、コンテンツがこれらの要件を満たしていることを確認する必要があります。

他の広告作成ツールと比較して、Tumult Hypeの学習曲線は何ですか？

Tumult Hypeは、CanvaやAdobe Expressなどのツールと比較して、より急な学習曲線を持っています。これは、アニメーションやインタラクティブ性など、より高度な機能を提供するためです。ただし、ユーザーフレンドリーなインターフェイスがあり、開始するためのさまざまなチュートリアルとリソースを提供します。マスターしたら、デザインに多くの柔軟性と制御を提供することがわかります。

Tumult Hypeを無料で使用できますか？

Tumult Hypeは、無料のバージョンを提供する他の広告作成ツールとは異なる有料ツールです。ただし、無料トライアルを提供するため、購入するかどうかを決定する前に試してみることができます。ツールのコストは1回限りの料金で、将来のすべての更新が含まれます。これにより、定期的に使用する予定がある場合は、費用対効果の高いオプションになります。

Tumult Hypeはどのように広告作成ワークフローをサポートしていますか？

Tumult Hypeは、広告を作成、編集、公開するさまざまな機能を簡単に提供することにより、広告作成ワークフローをサポートします。タイムラインベースのインターフェイスを提供して、アニメーションを作成し、対話性をサポートし、広告をリアルタイムでプレビューできるようにします。また、さまざまなエクスポートオプションをサポートしているため、広告をさまざまなプラットフォームに簡単に投稿できます。

騒々しい誇大宣伝は初心者に適していますか？

Tumult Hypeは高度な機能を提供していますが、初心者にも適しています。ユーザーフレンドリーなインターフェイスを備えており、さまざまなチュートリアルとリソースを提供して、開始します。タイムラインベースのインターフェイスにより、経験がなくても、アニメーションの作成が簡単になります。

さまざまなオペレーティングシステムでTumult Hypeを使用できますか？

現在、Tumult HypeはMacでのみ利用できます。ただし、Tumult Hypeで作成されたコンテンツは、WindowsやLinuxコンピューター、スマートフォンやタブレットなど、HTML5対応のデバイスで表示できます。

Tumult Hypeを使用してどのような種類の広告を作成できますか？

Tumult Hypeを使用すると、シンプルなアニメーションから複雑なインタラクティブコンテンツまで、さまざまな広告を作成できます。これには、バナー広告、間質広告、ビデオ広告などが含まれます。このツールは、HTML5、GIF、ビデオを含むさまざまな形式をサポートしているため、広告作成の多用途​​オプションになります。

機能性の観点から、Tumult Hypeは他のツールとどのように比較されますか？

Tumult Hypeは、他の広告作成ツールとは異なるさまざまな機能を提供します。これには、アニメーションを作成するためのタイムラインベースのインターフェイス、インタラクティブ性のサポート、ライブプレビュー、さまざまなエクスポートオプションが含まれます。また、より高度な機能についてはJavaScriptもサポートしています。

Tumultの誇大広告を使用する場合、他の人と仕事をすることはできますか？

現在、Tumult Hypeはツール内のコラボレーションをサポートしていません。ただし、誇大広告文書としてエクスポートすることにより、プロジェクトを他の人と共有できます。これにより、他の人はTumult Hypeを使用してプロジェクトを編集および変更できます。

以上がTumult Hypeを使用した視覚的な広告作成ワークフローの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。