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