【Bubble】画面の背景を動画にしてみよう ~ ノーコードプログラミングを学ぼう ~ #11

Bubble

ノーコードプログラミングのBubbleの解説をやっていきます。

Bubbleは僕もまだまだ勉強中な部分も非常に多いので備忘的な部分も多く含めているのをご了承ください。




背景アイテム変更

Bubbleの画面背景アイテムの変更はメニューの「Appearrance」タブの「Background Style」から変更することができます。

そんな「Background Style」には「None」「Flat Color」「Gradient」「Image」「Video」の項目があります。




スポンサーリンク

背景アイテムの変更「Background Style」

今回はそんなBubbleの「Background Style」である背景アイテム変更の「Video」の「Static Image」「Play Video Silent」について解説していきます。


「Background Style」

Static file

Bubbleの「Background Style」の「Video」に変更して、「Static file」を選択することで背景アイテムを動画に変更することができます。


Dynamic link

背景アイテムを変更すると「Dynamic link」に相対パスが自動で挿入されますが、これは自動で挿入されるものなので特に気にしなくて大丈夫です。


Static Image

Bubbleの「Background Style」の「Static Image」を選択して変更したい画像を選択することで背景画像を選択することができますが、この画像は何に使われるかまだ分かっていません。


Dynamic Image

「Static Image」を変更すると「Dynamic Image」に相対パスが自動で挿入されますが、これは自動で挿入されるものなので特に気にしなくて大丈夫です。


External sources

「External sources」は無料の動画アイテムが配布されており、選択することで動画に設定することが可能です。


Play video silent

「Play video silent」はデフォルトでチェックボックスにチェックが入っていますが、この状態だと無音状態で動画が流れます。
なので、チェックボックスのチェックを外すと音声が流れます。




「Bubble」で背景アイテムの動画を変更してみよう

1-1.今回はフォルダ構成が見えてしまうので完成イメージはありません。




1-2.画面上のどこでもいいので「右クリック → Edit」 or 「ダブルクリック」でメニューを開きます。

Bubble_メニュー1


Bubble_メニュー2




1-3.メニューの「Appearrance」タブの「Background Style」が今回の変更対象です。
(デフォルト値は「None」(背景色無し)です。

Bubble_BackgroundStyle_None


Bubble_BackgroundStyle_プルダウン




1-4.背景である「Background Style」の「Video」の「Static Image」を押下して画像を選択すると選択した画像を挿入することができます。

(しかし画像を挿入したところでどこに表示されるとかは特にありませんでした。)

Bubble_BackgroundStyle_StaticImage


Bubble_BackgroundStyle_StaticImage_挿入


Bubble_BackgroundStyle_StaticImage_挿入完了




1-5.背景である「Background Style」の「Video」を設定した状態で「Play video Silent」のチェック状態をデフォルトのチェックが入っている状態からチェックを外すと音声が流れるはずです。

(音声が流れるはずでしたが、試したところ音声は流れませんでした)

Bubble_BackgroundStyle_VideoPlaySilent





今回はここまで。

次回も背景動画について解説していきます。

コメント