Adobe Museにビデオを追加する
Adobe Museの本当に興味深い点は、出版物のレイアウトに使用したのと同様のワークフローを使用してWebページを作成できることです。サイトやページを構築するコードを深く理解する必要はありませんが、HTML5、CSS、JavaScriptの知識は害ではありません。
伝統的なWebビデオは通常、HTML5 Video APIを使用して追加されますが、Adobe Museは同じことを「ウィジェット」と呼んでいます。ウィジェットは、特定のタスクに必要なHTML 5を作成しますが、ページが公開されるときにMuseでプレーン言語のインターフェイスを使用してコードを記述します。
この練習では、Muse Resourcesから無料でダウンロードできるウィジェットを使用します。ウィジェットがダウンロードされたら、.zipファイルを開き、フルスクリーンビデオフォルダの.mulibファイルをダブルクリックするだけです。これにより、Adobe Museのコピーにインストールされます。
Adobe Muse CCでバックグラウンドビデオのページを準備する方法
ウィジェットをインストールすると、ビデオを使用するページを作成できるようになりました。
開始する前に、Museサイト用のフォルダを作成してください。そのフォルダの中に別のフォルダを作成する - 私は " メディア " - そのビデオのmp4とwebmのバージョンをそのフォルダに移動します。
Museを起動すると ファイル>新しいサイト。 レイアウトダイアログボックスが表示されたら デスクトップ として 初期レイアウト そして、 ページ幅 そして ページの高さ 〜への値 1200 そして 900。クリック OK.
プランビューでマスターページをダブルクリックして、マスターページを開きます。マスターページが開くと、ヘッダーとフッターのガイドがページの上部と下部に移動します。この例では、実際にヘッダーとフッターは必要ありません。
03/05Adobe Muse CCのフルスクリーン背景ビデオウィジェットを使用する方法
ウィジェットの使い方は簡単です。最初に実行する必要があるのは、プランビューに戻ることです。 表示>プランモード。平面図をダブルクリックして開きます。 ホームページ それを開く。
ライブラリパネルを開く - インターフェイス選択の右側に開いていない場合 ウィンドウ>ライブラリ そして、 MRフルスクリーン背景ビデオ フォルダ。ウィジェットをページのフォルダにドラッグします。
あなたは オプション ビデオのmp4とwebmのバージョンの名前を入力するように頼んでください。名前を入力したフォルダに入力します。ミスをしないようにするには、mp4ビデオの名前をコピーして、 MP4 そして WEBM の領域 オプションメニュー.
もう1つのトリック：このウィジェットはHTML 5コードを書くことです。あなたはこれを知ることができます <> ウィジェットで。この場合、Webページのウィジェットをペーストボードに置くことができ、それでも機能します。この方法では、ページに配置するコンテンツに干渉しません。
04/05Adobe Muse CCでビデオを追加してページをテストする方法
あなたがビデオを再生するコードを追加したにもかかわらず、Museはまだそれらのビデオが配置されている手がかりを持っていません。これを修正するには、 ファイル>アップロードするファイルを追加。いつ アップロードダイアログボックス あなたのビデオを含むフォルダに移動し、それらを選択してクリックします 開いた。アップロードされたことを確認するには、 アセットパネル あなたは2つのビデオを見るべきです。パネルにそれらを残してください。彼らはページに配置する必要はありません。
プロジェクトをテストするには ファイル>ブラウザのプレビューページ または、これは単一ページなので、 ファイル>ブラウザでプレビューサイト。あなたのデフォルトブラウザが開き、私の場合は熱帯低気圧のビデオが再生されます。
この時点で、Museファイルを通常のWebページとして扱い、ホームページにコンテンツを追加すると、その下にビデオが再生されます。
05/05Adobe Muse CCでビデオポスターフレームを追加する方法
これは私たちがここで話しているウェブです。接続速度によっては、ビデオが読み込まれている間にユーザーがページを開いて空白の画面を見つめる可能性があります。これは良いことではありません。ここでは、この不快感をどのように処理するかについて説明します。
動画のポスターフレームを含める「ベストプラクティス」です。ビデオの読み込み中に表示されます。これは、通常、ビデオのフレームのフルサイズのスクリーンショットです。
ポスターフレームを追加するには、一度クリックしてください ブラウザの塗りつぶし ページの上部に表示されます。クリック 画像リンク 使用する画像にナビゲートします。の中に フィッティング エリア、選択 塗りつぶす をクリックして 中心点 の中に ポジション エリア。これにより、ブラウザのビューポートサイズが変更されたときに、イメージが常にイメージの中央から拡大縮小されます。あなたはまた、画像がページを埋めるのを見るでしょう。
もう一つの小さなトリックは、ポスターフレームに表示されるのにちょうど時間がかかる場合に備えて、少なくとも白い色で塗りつぶされていない色を持つことです。これを行うには、カラーチップをクリックして、ミューズカラーピッカーを開きます。スポイトツールを選択し、イメージ内の優勢な色をクリックします。終了したら、ページをクリックしてブラウザの塗りつぶしダイアログボックスを閉じます。
この時点で、プロジェクトを保存したり公開することができます。
このシリーズの最後の部分では、ビデオをWebページの背景にスライドさせるHTML5コードを記述する方法を示します。
