Popcorn Maker の使い方

Mozilla Webmaker Japan community

https://popcorn.webmaker.org/

1Ver. 2013/7/19

Popcorn Maker の使い方目次0. Popcorn Maker 画面メニュー

1. 動画を貼りつけるには

1.-1 WebM 編一般サイトにあるビデオを使う場合

1.-2 YouTube 編

2. 編集／リミックスする前に (動画の頭出しと最後の部分のカットなど)

3. テキスト(文字)を表示するには

3.-1 基本編： 文字の追加、リンクを張る、文字位置の調整、アニメーションの追加

3.-2 上級編： 書体の変更、文字の大きさ、文字の色、影付き文字、文字の背景色

4. 吹き出しを追加するには

4.-1 基本編： 吹き出しを追加、表示時間の変更、吹き出しの種類を変える、

表示方法を変える

4.-2 上級編： 文字の色を変える、文字の大きさを変える

5. 地図を貼りつけるには

6. 画像を貼りつけるには

7. ループ (繰り返し) させるには

8. スキップ (カット) するには

9. 一時静止させるには

10. Wikipedia を表示するには

11. 編集を取り消すには

2

0. Popcorn Maker メニュー (1)

Popcorn Maker メニュー その１メディアタブ

レイヤー

3

0. Popcorn Maker メニュー (2)

Popcorn Maker メニュー その１イベントタブ

テキスト (文字)

ポップアップ (吹き出し)

Google マップ

スキップ (飛ばし)

ループ (繰り返し)

画像

一時静止

Wikipedia

保存

4

1.-1 動画を貼りつけるには

ビデオが 「WebM 形式」であれば

Popcorn Maker が使えます

WebM形式のビデオであれば Popcorn Maker が使えます。※Web掲載されているMozilla の動画を例にしています。

WebM編 (一般サイトにあるビデオ を使う場合） (1)

5

1.-1 動画を貼りつけるには

「リンクの URL をコピー」をクリック

動画の URL をコピー

WebM編（一般サイトにあるビデオを使う場合） (2)

6

1.-1 動画を貼りつける には

ここで右クリックして「貼り付け」を選択

WebM編（一般サイトにあるビデオを使う場合） (3)

動画の URL を Popcorn Maker に貼りつけます

7

1.-1 動画を貼りつける には

「Create clip」をクリック

WebM編（一般サイトにあるビデオを使う場合） (4)

8

1.-1 動画を貼りつける には

出てきた動画をクリック

WebM編（一般サイトにあるビデオを使う場合） (5)

9

1. -1 動画を貼りつける には

動画の貼りつけが完了しました！

WebM編（一般サイトにあるビデオを使う場合） (6)

10

1.-2 動画を貼りつけるには

アドレスを右クリック

YouTube編 (1)

YouTube や Vimeo に掲載されている動画を編集・リミックスする場合

11

1.-2 動画を貼りつける には

「コピー」を選択

YouTube編 (2)

12

1.-2 動画を貼りつける には

ここで右クリックして「貼り付け」を選択

YouTube編 (3)

13

1.-2 動画を貼りつける には

「Create clip」をクリック

YouTube編 (4)

14

1.-2 動画を貼りつける には

出てきた動画をクリック

YouTube編 (5)

15

1.-2 動画を貼りつけるには

動画の貼りつけが完了しました！

YouTube編 (6)

16

2. 編集/リミックスする前に (1)

17

動画を貼りつけると以下のような画面 (素材ビデオのレイヤー画面)になります

素材ビデオのレイヤーです。ここをクリックするとこの画面になります

再生/一時停止ボタン

音声あり or なし

ビデオのタイトル (変えられます)

2. 編集/リミックスする前に (2)

18

素材ビデオのスタート (頭出し) とエンド (最後の部分) の設定

ここをドラッグ＆ドロップしても、素材ビデオの前と後ろのカット部分設定できます

素材ビデオの最初をカットする場合はスタートさせたい時間を In に入力、

後ろをカットしたい場合は終わらせる時間を Out に入力

2. 編集/リミックスする前に (3)

19

編集するビデオ全体の中で素材ビデオを実行する時間を設定する

編集するビデオ全体の中で、素材ビデオをどのタイミングで表示させるかを

Start と End で設定できます

ここをドラッグ＆ドロップしても、素材ビデオのスタートタイミングとエンドのタイミングを設定できます

3.-1 文字を表示するには :基本編(1)

「Events」をクリック

ビデオに字幕や説明の文字を追加します

20

「Text」 をクリック

3.-1 文字を表示する には :基本編(2)

21

基本操作 (Basic) タブをクリック

3.-1 文字を表示するには: 基本編(3)

22

「Start」「End」に動画のどこからどこまで

文字を表示するか、を入力

例えば、0秒目から10秒目まで表示したいなら、Startに0:00、Endに0:10と入力します

文字を表示させるタイミングを設定

3.-1 文字を表示するには: 基本編(4)

23

「Text」に表示

したい文字を入力

文字を入力します

3.-1 文字を表示するには :基本編(5)

24

文字にリンクを張りたいなら、「Link URL」にリンク先の

URLを入力

リンクを張る場合

3.-1 文字を表示するには :基本編(6)

25

文字をどの位置に表示したいかを「Text Position」で

選択

「Middle」は中央、「Bottom」は下部、「Top」は上部に文字を表示します

文字の (縦) 位置を調整文字の位置を 「Middle (中央) / Bottom (下) / Top (上)」 のいずれかにする場合

3.-1 文字を表示するには :基本編(7)

26

文字をそろえる文字列の (横) 位置を調整する

文字をどうそろえるかを「Text

Alignment」で選択

「Center」は中央、「Left」は左、「Right」は右に文字をそろえる。

3.-1 文字を表示するには: 基本編(8)

27

文字にどうアニメーションを付けるかを「Transition」で

選択

「None」は何もしない。「Pop」「Fade」「Slide Up」「Slide Down」はそれぞれ効果を設定できます。

文字の出し方 (アニメーションの追加)

3.-1 文字を表示するには :基本編(9)

28

文字表示に関するその他の機能は、「Advanced」 タブをクリック

3.-2 文字を表示するには :上級編(1)

29

文字の書体を変える

「Font」 を変更する

と、文字の書体が変化します

3.-2 文字を表示するには :上級編(2)

30

文字の大きさを変える

「Font Size」 を変更

すると、文字の大きさが変化します

3.-2 文字を表示する には :上級編(3)

31

文字の色を変える

使える色は black、silver、gray、 、maroon、red、purple、fuchsia、green、lime、olive、 、navy、blue、teal、aquaの16種類

「Font Colour」 を

変更すると、文字の色が変化します

3.-2 文字を表示するには :上級編(4)

32

文字に影をつける

「Shadow」 にチェック

を入れると、文字に影をつけられます。影の色は「Shadow colour」 で設定でき

ます

3.-2 文字を表示するには :上級編(5)

33

文字に背景色をつける

「Background」 に

チェックを入れると、文字に背景を設定

できます。

背景の色は「Background colour」で設定できます

3.-2 文字を表示するには :上級編(6)

34

4.-1 吹き出しを追加するには: 基本編(1)

Popup をクリック

35

4.-1 吹き出しを追加するには: 基本編(2)

Text に文字を入力する

吹き出しの文字を変えます

36

Start と End で設定

吹き出しの表示時間を変えるには

4.-1 吹き出しを追加するには: 基本編(3)

37

Type で種類を選ぶ

吹き出しの種類を変えるには

4.-1 吹き出しを追加するには: 基本編(4)

38

Transition で選ぶ

吹き出しの表示方法を変えるには

4.-1 吹き出しを追加するには: 基本編(5)

39

1. Advanced をクリック

2. Font colour に設定

吹き出しの文字色を変えるには

4.-2 吹き出しを追加するには: 上級編(1)

40

1. Advanced をクリック

2. Font Size から選ぶ

吹き出しの文字の大きさを変えるには

4.-2 吹き出しを追加するには: 上級編(2)

41

5. 地図を貼り付けるには (1)

GoogleMap をクリック

42

表示する場所を指定します

住所や施設名を入力

5. 地図を貼り付けるには (2)

43

地図の表示範囲を変更できます。

Zoom の数値を変更

5. 地図を貼り付けるには (3)

44

6. 画像を貼り付けるには (1)

Image をクリック

45

貼り付ける画像を指定します

画像ファイルを

ドラッグ＆ドロップ

6. 画像を貼り付けるには (2)

46

画像を移動させて位置を決めます

画像右上のプラスマークを

ドラッグ＆ドロップ

6. 画像を貼り付けるには (3)

47

画像を拡大/縮小させ大きさを決めます

画像の上下と左右、左下の

バーをドラッグ＆ドロップ

6. 画像を貼り付けるには (4)

48

画像を表示する時間を指定させます

レイヤー上のバーを

ドラッグ＆ドロップ

6. 画像を貼り付けるには (5)

49

Loop （ループ）は、動画の一部を繰り返し再生させることができるイベントです。

7. ループ (繰り返し) させるには (1)

ここをクリックしてください

50

Start（スタート）： 繰り返し再生さ

せたい部分が始まる時間を入力してください。（○分：○秒）

End（エンド）：繰り返し再生した

い部分が終わる時間を入力してください。 （○分：○秒）

Number of loops： 繰り返

す回数を入力してください。0 を入力すると、無限に再生します。

7. ループ (繰り返し) させるには (2)

51

Skip（スキップ）は、動画の一部を再生しないように抜かすことができるイベントです。

8. スキップ (カット) するには (1)

ここをクリックしてください

52

Start（スタート）：再生せずに

抜かしたい部分が始まる時間を入力してください。 （○分：○秒）

End（エンド）：再生せずに

抜かしたい部分が終わる時間を入力してください。（○分：○秒）

8. スキップ (カット) するには (2)

53

Pause （ポーズ）は、動画を一時停止させることができるイベントです。

9. 一時静止 (Pause) させるには (1)

ここをクリックしてください

54

Start（スタート）： 一時停止させ

たい場面の時間を入力してください。（○分：○秒）

End（エンド）：このイベントでは、

特に設定する必要はありません。

Pause Duration：一時停止

させた状態を持続させる時間を入力してください。0 を入力すると、無限に停止します。

9. 一時静止 (Pause) させるには (2)

55

10. WikiPedia を表示するには (1)

Wikipedia をクリック

56

表示する記事を指定します

記事名を入力

10. WikiPedia を表示するには (2)

57

記事の言語を指定します

Japanese を選択

10. WikiPedia を表示するには (3)

58

11. 編集を取り消すには (1)

「Layer *」 の下の「+」をクリック

行った編集作業を取り消す場合は、レイヤーを削除します

59

11. 編集を取り消すには (2)

削除したい効果をクリックし、一番下のLayerにドラッグ＆ドロップする

60

11. 編集を取り消すには (3)

Layerの左側にマウスをのせるとゴミ箱マークが出てくるので、そのゴミ箱マークをクリックする

61

11. 編集を取り消すには (4)

「Yes」 をクリックする

62